xk-doctor-wx/subPackages/sub_workbench/prescription_v2/components/ChineseMedicineConfig.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, disabled: disabled }"
              @click="!disabled && handleRuleTypeChange(1)"
          >
            自制剂
          </view>
          <view
              class="modern-pill"
              :class="{ active: localConfig.ruleType === 2, disabled: disabled }"
              @click="!disabled && 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, disabled: disabled }"
              @click="!disabled && 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, disabled: disabled }"
              @click="!disabled && 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, disabled: disabled }"
              @click="!disabled && 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, disabled: disabled }"
              @click="!disabled && 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"
              :disabled="disabled"
              :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"
              :disabled="disabled"
              :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: () => []
    },
    /**
     * 特色方锁定后禁止修改配置
     */
    disabled: {
      type: Boolean,
      default: false
    }
  },
  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;
    }
  }

  &.disabled {
    opacity: 0.5;
    pointer-events: none;
  }
}
</style>