365 lines
9.2 KiB
Vue
365 lines
9.2 KiB
Vue
<template>
|
||
<view class="chinese-medicine-config">
|
||
<view class="config-section">
|
||
<view class="section-title">
|
||
<d-text text="制剂方式" className="fs-3 main-c"></d-text>
|
||
</view>
|
||
<view class="section-content">
|
||
<view class="tag-group">
|
||
<view
|
||
class="tag-item"
|
||
:class="{ active: localConfig.ruleType === 1 }"
|
||
@click="handleRuleTypeChange(1)"
|
||
>
|
||
自制剂
|
||
</view>
|
||
<view
|
||
class="tag-item"
|
||
:class="{ active: localConfig.ruleType === 2 }"
|
||
@click="handleRuleTypeChange(2)"
|
||
>
|
||
委托调剂
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 自制剂配置 -->
|
||
<view class="config-section" v-if="localConfig.ruleType === 1">
|
||
<view class="section-title">
|
||
<d-text text="包法" className="fs-3 main-c"></d-text>
|
||
</view>
|
||
<view class="section-content">
|
||
<view class="tag-group">
|
||
<view
|
||
v-for="item in packageMethodList"
|
||
:key="item.id"
|
||
class="tag-item"
|
||
:class="{ active: localConfig.packageMethodId === item.id }"
|
||
@click="handlePackageMethodTagClick(item)"
|
||
>
|
||
{{ item.name }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 委托调剂配置 -->
|
||
<view class="config-section" v-if="localConfig.ruleType === 2">
|
||
<view class="section-title">
|
||
<d-text text="制剂" className="fs-3 main-c"></d-text>
|
||
</view>
|
||
<view class="section-content">
|
||
<view class="tag-group">
|
||
<view
|
||
v-for="item in processRuleList"
|
||
:key="item.id"
|
||
class="tag-item"
|
||
:class="{ active: localConfig.processRuleId === item.id }"
|
||
@click="handleProcessRuleTagClick(item)"
|
||
>
|
||
{{ item.name }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="section-title m-t-16">
|
||
<d-text text="煎法" className="fs-3 main-c"></d-text>
|
||
</view>
|
||
<view class="section-content">
|
||
<view class="tag-group">
|
||
<view
|
||
v-for="item in childProcessRuleList"
|
||
:key="item.id"
|
||
class="tag-item"
|
||
:class="{ active: localConfig.childProcessRuleId === item.id }"
|
||
@click="handleChildProcessRuleTagClick(item)"
|
||
>
|
||
{{ item.name }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="section-title m-t-16">
|
||
<d-text text="备注" className="fs-3 main-c"></d-text>
|
||
</view>
|
||
<view class="section-content">
|
||
<view class="tag-group">
|
||
<view
|
||
v-for="item in processRuleNoteList"
|
||
:key="item.id"
|
||
class="tag-item"
|
||
:class="{ active: localConfig.processRuleNoteId === item.id }"
|
||
@click="handleProcessRuleNoteTagClick(item)"
|
||
>
|
||
{{ item.note || item.name }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 用量和频次 -->
|
||
<view class="config-section">
|
||
<view class="section-title">
|
||
<d-text text="用量" className="fs-3 main-c"></d-text>
|
||
</view>
|
||
<view class="section-content">
|
||
<u-number-box v-model="localConfig.dosage" :min="1" />
|
||
<d-text text="天" className="fs-3 color9 m-l-16"></d-text>
|
||
<u-input disabled class="input" placeholder="剂数" v-model="localConfig.dosage" :clearable="false" type="number" />
|
||
<d-text text="剂" className="fs-3 color9"></d-text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="config-section">
|
||
<view class="section-title">
|
||
<d-text text="频次" className="fs-3 main-c"></d-text>
|
||
</view>
|
||
<view class="section-content">
|
||
<u-number-box v-model="localConfig.dayDosage" :min="1" />
|
||
<d-text text="次/天" className="fs-3 color9 m-l-16"></d-text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'ChineseMedicineConfig',
|
||
props: {
|
||
/**
|
||
* 中药配置
|
||
*/
|
||
config: {
|
||
type: Object,
|
||
default: () => ({
|
||
ruleType: 1,
|
||
packageMethodId: null,
|
||
processRuleId: null,
|
||
childProcessRuleId: null,
|
||
processRuleNoteId: null,
|
||
dosage: 7,
|
||
dayDosage: 2
|
||
})
|
||
},
|
||
/**
|
||
* 制剂列表
|
||
*/
|
||
processRuleList: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
/**
|
||
* 煎法列表
|
||
*/
|
||
childProcessRuleList: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
/**
|
||
* 备注列表
|
||
*/
|
||
processRuleNoteList: {
|
||
type: Array,
|
||
default: () => []
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
localConfig: {},
|
||
packageMethodList: [
|
||
{ id: 1, name: '味包' },
|
||
{ id: 2, name: '剂包' }
|
||
]
|
||
};
|
||
},
|
||
watch: {
|
||
config: {
|
||
handler(newVal) {
|
||
this.localConfig = { ...newVal };
|
||
},
|
||
immediate: true,
|
||
deep: true
|
||
},
|
||
localConfig: {
|
||
handler(newVal) {
|
||
this.$emit('update:config', { ...newVal });
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
methods: {
|
||
/**
|
||
* 处理制剂方式改变
|
||
* @param {number} value - 制剂方式：1=自制剂，2=委托调剂
|
||
* 职责：更新制剂方式，触发配置更新
|
||
*/
|
||
handleRuleTypeChange(value) {
|
||
this.localConfig.ruleType = value;
|
||
// 切换时清空相关配置
|
||
if (value === 1) {
|
||
// 自制剂：清空委托调剂相关配置，默认选择第一个包法
|
||
this.localConfig.processRuleId = null;
|
||
this.localConfig.childProcessRuleId = null;
|
||
this.localConfig.processRuleNoteId = null;
|
||
// 如果包法未选择，默认选择第一个
|
||
if (!this.localConfig.packageMethodId && this.packageMethodList.length > 0) {
|
||
this.localConfig.packageMethodId = this.packageMethodList[0].id;
|
||
}
|
||
} else {
|
||
// 委托调剂：清空自制剂相关配置
|
||
this.localConfig.packageMethodId = null;
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 处理包法改变（标签点击）
|
||
* @param {Object} item - 包法项
|
||
* 职责：更新包法ID
|
||
*/
|
||
handlePackageMethodTagClick(item) {
|
||
this.localConfig.packageMethodId = item.id;
|
||
},
|
||
|
||
/**
|
||
* 处理制剂改变（标签点击）
|
||
* @param {Object} item - 制剂项
|
||
* 职责：更新制剂ID，触发加载煎法列表
|
||
*/
|
||
handleProcessRuleTagClick(item) {
|
||
// 清空煎法和备注ID（级联清空）
|
||
this.localConfig.processRuleId = item.id;
|
||
this.localConfig.childProcessRuleId = null;
|
||
this.localConfig.processRuleNoteId = null;
|
||
// localConfig 的变化会通过 watch 自动触发 @update:config
|
||
},
|
||
|
||
/**
|
||
* 处理煎法改变（标签点击）
|
||
* @param {Object} item - 煎法项
|
||
* 职责：更新煎法ID，触发加载备注列表
|
||
*/
|
||
handleChildProcessRuleTagClick(item) {
|
||
// 清空备注ID（级联清空）
|
||
this.localConfig.childProcessRuleId = item.id;
|
||
this.localConfig.processRuleNoteId = null;
|
||
// localConfig 的变化会通过 watch 自动触发 @update:config
|
||
},
|
||
|
||
/**
|
||
* 处理备注改变（标签点击）
|
||
* @param {Object} item - 备注项
|
||
* 职责：更新备注ID
|
||
*/
|
||
handleProcessRuleNoteTagClick(item) {
|
||
this.localConfig.processRuleNoteId = item.id;
|
||
},
|
||
|
||
/**
|
||
* 获取包法名称
|
||
* @returns {string} 包法名称
|
||
*/
|
||
getPackageMethodName() {
|
||
const item = this.packageMethodList.find(item => item.id === this.localConfig.packageMethodId);
|
||
return item?.name || '';
|
||
},
|
||
|
||
/**
|
||
* 获取制剂名称
|
||
* @returns {string} 制剂名称
|
||
*/
|
||
getProcessRuleName() {
|
||
const item = this.processRuleList.find(item => item.id === this.localConfig.processRuleId);
|
||
return item?.name || '';
|
||
},
|
||
|
||
/**
|
||
* 获取煎法名称
|
||
* @returns {string} 煎法名称
|
||
*/
|
||
getChildProcessRuleName() {
|
||
const item = this.childProcessRuleList.find(item => item.id === this.localConfig.childProcessRuleId);
|
||
return item?.name || '';
|
||
},
|
||
|
||
/**
|
||
* 获取备注名称
|
||
* @returns {string} 备注名称
|
||
*/
|
||
getProcessRuleNoteName() {
|
||
const item = this.processRuleNoteList.find(item => item.id === this.localConfig.processRuleNoteId);
|
||
return item?.name || '';
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.chinese-medicine-config {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.config-section {
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.section-title {
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.section-content {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.tag-group {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.tag-item {
|
||
padding: 12rpx 32rpx;
|
||
background-color: #f5f5f5;
|
||
color: #666;
|
||
border-radius: 32rpx;
|
||
font-size: 28rpx;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
border: 2rpx solid transparent;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.tag-item.active {
|
||
background-color: #6ACDBB;
|
||
color: #fff;
|
||
border-color: #6ACDBB;
|
||
}
|
||
|
||
.picker-view {
|
||
padding: 16rpx;
|
||
background: #f9f9f9;
|
||
border-radius: 8rpx;
|
||
min-width: 200rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.input {
|
||
width: 200rpx;
|
||
}
|
||
|
||
.m-t-16 {
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
.m-l-16 {
|
||
margin-left: 16rpx;
|
||
}
|
||
|
||
.color9 {
|
||
color: #999;
|
||
}
|
||
</style>
|