372 lines
10 KiB
Vue
372 lines
10 KiB
Vue
<template>
|
||
<view class="chinese-medicine-config">
|
||
<!-- 制剂方式 -->
|
||
<view class="config-section m-b-32">
|
||
<view class="section-title m-b-16">
|
||
<d-text text="制剂方式" className="fs-30 font-bold color-title"></d-text>
|
||
</view>
|
||
<view class="section-content">
|
||
<view class="modern-pill-group">
|
||
<view
|
||
class="modern-pill"
|
||
:class="{ active: localConfig.ruleType === 1 }"
|
||
@click="handleRuleTypeChange(1)"
|
||
>
|
||
自制剂
|
||
</view>
|
||
<view
|
||
class="modern-pill"
|
||
:class="{ active: localConfig.ruleType === 2 }"
|
||
@click="handleRuleTypeChange(2)"
|
||
>
|
||
委托调剂
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 自制剂配置 -->
|
||
<view class="config-section border-t-dashed pt-32 m-b-32" v-if="localConfig.ruleType === 1">
|
||
<view class="section-title m-b-16">
|
||
<d-text text="包法选择" className="fs-30 font-bold color-title"></d-text>
|
||
</view>
|
||
<view class="section-content">
|
||
<view class="modern-pill-group">
|
||
<view
|
||
v-for="item in packageMethodList"
|
||
:key="item.id"
|
||
class="modern-pill outline"
|
||
:class="{ active: localConfig.packageMethodId === item.id }"
|
||
@click="handlePackageMethodTagClick(item)"
|
||
>
|
||
{{ item.name }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 委托调剂配置 -->
|
||
<view class="config-section border-t-dashed pt-32" v-if="localConfig.ruleType === 2">
|
||
<view class="section-title m-b-16">
|
||
<d-text text="制剂要求" className="fs-30 font-bold color-title"></d-text>
|
||
</view>
|
||
<view class="section-content m-b-24">
|
||
<view class="modern-pill-group">
|
||
<view
|
||
v-for="item in processRuleList"
|
||
:key="item.id"
|
||
class="modern-pill outline"
|
||
:class="{ active: localConfig.processRuleId === item.id }"
|
||
@click="handleProcessRuleTagClick(item)"
|
||
>
|
||
{{ item.name }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="section-title m-b-16 m-t-24">
|
||
<d-text text="煎法说明" className="fs-30 font-bold color-title"></d-text>
|
||
</view>
|
||
<view class="section-content m-b-24">
|
||
<view class="modern-pill-group">
|
||
<view
|
||
v-for="item in childProcessRuleList"
|
||
:key="item.id"
|
||
class="modern-pill outline"
|
||
:class="{ active: localConfig.childProcessRuleId === item.id }"
|
||
@click="handleChildProcessRuleTagClick(item)"
|
||
>
|
||
{{ item.name }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="section-title m-b-16 m-t-24">
|
||
<d-text text="附加备注" className="fs-30 font-bold color-title"></d-text>
|
||
</view>
|
||
<view class="section-content m-b-32">
|
||
<view class="modern-pill-group">
|
||
<view
|
||
v-for="item in processRuleNoteList"
|
||
:key="item.id"
|
||
class="modern-pill outline"
|
||
:class="{ active: localConfig.processRuleNoteId === item.id }"
|
||
@click="handleProcessRuleNoteTagClick(item)"
|
||
>
|
||
{{ item.note || item.name }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 用量和频次：与 WesternUsageModal 保持一致的表单布局 -->
|
||
<view class="config-form border-t-dashed pt-20">
|
||
<view class="form-item flex-row flex-jus-sp flex-ali-center p-y-24">
|
||
<view class="item-label">
|
||
<d-text text="剂数" className="fs-30 font-bold color-title"></d-text>
|
||
</view>
|
||
<view class="item-content flex-row flex-ali-center">
|
||
<u-number-box
|
||
v-model="localConfig.dosage"
|
||
:min="1"
|
||
:input-width="80"
|
||
:input-height="60"
|
||
bg-color="#F7F8FA"
|
||
/>
|
||
<d-text text="剂(天)" className="fs-28 color-sub m-l-16"></d-text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-item flex-row flex-jus-sp flex-ali-center p-y-24">
|
||
<view class="item-label">
|
||
<d-text text="用药频次" className="fs-30 font-bold color-title"></d-text>
|
||
</view>
|
||
<view class="item-content flex-row flex-ali-center">
|
||
<u-number-box
|
||
v-model="localConfig.dayDosage"
|
||
:min="1"
|
||
:input-width="80"
|
||
:input-height="60"
|
||
bg-color="#F7F8FA"
|
||
/>
|
||
<d-text text="次/天" className="fs-28 color-sub m-l-16"></d-text>
|
||
</view>
|
||
</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>
|
||
/* 统一样式 */
|
||
.color-title { color: #2A2E35; }
|
||
.color-sub { color: #8A92A3; }
|
||
.fs-28 { font-size: 28rpx; }
|
||
.fs-30 { font-size: 30rpx; }
|
||
.font-bold { font-weight: bold; }
|
||
.m-b-16 { margin-bottom: 16rpx; }
|
||
.m-b-24 { margin-bottom: 24rpx; }
|
||
.m-b-32 { margin-bottom: 32rpx; }
|
||
.m-t-24 { margin-top: 24rpx; }
|
||
.m-l-16 { margin-left: 16rpx; }
|
||
.pt-20 { padding-top: 20rpx; }
|
||
.pt-32 { padding-top: 32rpx; }
|
||
.p-y-24 { padding: 24rpx 0; }
|
||
.border-t-dashed { border-top: 1px dashed #E2E8F0; }
|
||
|
||
.flex-row { display: flex; flex-direction: row; }
|
||
.flex-jus-sp { justify-content: space-between; }
|
||
.flex-ali-center { align-items: center; }
|
||
|
||
.chinese-medicine-config {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.modern-pill-group {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.modern-pill {
|
||
padding: 12rpx 36rpx;
|
||
background-color: #F4F6F8;
|
||
color: #6C7380;
|
||
border-radius: 40rpx;
|
||
font-size: 26rpx;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
border: 1px solid transparent;
|
||
transition: all 0.2s;
|
||
|
||
&.active {
|
||
background-color: #00A88A;
|
||
color: #fff;
|
||
border-color: #00A88A;
|
||
font-weight: bold;
|
||
}
|
||
|
||
&.outline {
|
||
background-color: #fff;
|
||
border: 1px solid #E2E8F0;
|
||
|
||
&.active {
|
||
background-color: #E8F6F4;
|
||
color: #00A88A;
|
||
border-color: #00A88A;
|
||
}
|
||
}
|
||
}
|
||
</style> |