hn-hlw-pc/src/views/hlw-drug-manage/drug-drawer.vue

<template>
  <el-drawer v-loading="loading" :close-on-click-modal="false" :model-value="visible"
    :title="data._id ? '编辑药品' : '新增药品'" size="70%" style="--el-drawer-padding-primary: 0" @close="close">
    <my-layout>
      <layout-main>
        <el-form :label-width="140" :model="taskForm" label-suffix="：" class="p-15px pr-30px"
          :class="loading ? 'pointer-events-none' : ''">
          <div active-title-bar class="mb-2.5">药品基本信息</div>
          <el-row>
            <el-col :span="12" v-for="item in basicInfoList" :key="item.prop">
              <el-form-item :label="item.label" :prop="item.prop" :class="requiredMap[item.prop] ? 'is-required' : ''">
                <el-select v-if="item.options" filterable clearable :model-value="form[item.prop]"
                  :placeholder="`请选择${item.label}`" class="w-full" @update:model-value="changeValue($event, item.prop)">
                  <el-option v-for="option in item.options" :key="option" :label="option" :value="option" />
                </el-select>
                <el-input v-else clearable :model-value="form[item.prop]" :maxlength="item.maxlength"
                  :placeholder="`请输入${item.label}`" @update:model-value="changeValue($event, item.prop)" />
              </el-form-item>
            </el-col>
          </el-row>
          <div active-title-bar class="mb-2.5">药品标准用法用量</div>
          <el-row>
            <el-col :span="12" v-for="item in usageInfo" :key="item.prop">
              <el-form-item :label="item.label" :prop="item.prop" :class="requiredMap[item.prop] ? 'is-required' : ''">
                <el-select v-if="item.options" filterable clearable :model-value="form[item.prop]"
                  :placeholder="`请选择${item.label}`" class="w-full" @update:model-value="changeValue($event, item.prop)">
                  <el-option v-for="option in item.options" :key="option" :label="option" :value="option" />
                </el-select>
                <el-input v-else clearable :model-value="form[item.prop]" :maxlength="item.maxlength"
                  :placeholder="`请输入${item.label}`" @update:model-value="changeValue($event, item.prop)" />
              </el-form-item>
            </el-col>
          </el-row>
          <div active-title-bar class="mb-2.5">药品规则配置</div>
          <el-row>
            <template v-if="libType === 'online'">
              <el-col :span="12" v-for="item in suitableInfo" :key="item.prop">
                <el-form-item :label="item.label" :prop="item.prop"
                  :class="requiredMap[item.prop] ? 'is-required' : ''">
                  <el-select filterable clearable :model-value="form[item.prop]" :placeholder="`请选择${item.label}`"
                    class="w-full" @update:model-value="changeValue($event, item.prop)">
                    <el-option v-for="option in item.options" :key="option" :label="option.label"
                      :value="option.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" :key="repeatTag">
                <el-form-item label="重复用药标识" prop="repeatTag">
                  <!-- <el-select-v2 filterable clearable :multiple="true" :model-value="form.repeatTag" placeholder="请选择重复用药标识"
                    class="w-full" @update:model-value="changeValue($event, 'repeatTag')">
                    <el-option v-for="option in repeatTagList" :key="option.value" :label="option.label"
                      :value="option.value" />
                  </el-select-v2> -->
                  <el-select-v2 :model-value="form.repeatTag||[]" :options="repeatTagList" placeholder="请选择重复用药标识"
                    class="w-full" multiple filterable clearable
                    @update:model-value="changeValue($event, 'repeatTag')" />
                </el-form-item>
              </el-col>
            </template>
            <el-col v-for="item in otherInfo" :key="item.prop">
              <el-form-item :label="item.label" :prop="item.prop" :class="requiredMap[item.prop] ? 'is-required' : ''">
                <div class="other-info-row">
                  <el-select class="other-info-select" placeholder="请选择" :model-value="form[item.prop]"
                    @change="val => selectChange(item.prop, val)">
                    <el-option v-for="option in item.options" :key="option.value" :label="option.label"
                      :value="option.value" />
                  </el-select>
                  <!-- 当选择为 true 时才渲染输入框，同时把输入框拉伸占满剩余空间 -->
                  <div v-if="item.prop === 'need_medication_proof' && form.need_medication_proof"
                    class="other-info-desc">
                    <el-input clearable :model-value="form.medication_proof_desc" placeholder="描述需上传的用药证明文件类型，用于患者端显示"
                      style="width:100%" @update:model-value="val => changeValue(val, 'medication_proof_desc')" />
                  </div>
                  <div v-else-if="item.prop === 'has_usage_restriction' && form.has_usage_restriction"
                    class="other-info-desc">
                    <el-input clearable :model-value="form.usage_restriction_desc" placeholder="描述该药品的限制使用范围，用于医生、药师端展示"
                      style="width:100%" @update:model-value="val => changeValue(val, 'usage_restriction_desc')" />
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </layout-main>
      <layout-item>
        <div common-shadow--r class="text-center py-10px">
          <el-button class="w-100px" @click="close()">取消</el-button>
          <el-button class="w-100px" :loading="loading" type="primary" @click="save()">保存</el-button>
        </div>
      </layout-item>
    </my-layout>
  </el-drawer>
</template>
<script setup>
import { computed, ref, watch } from 'vue';
import { ElMessage } from "element-plus";
import { addHlwDrugInfo, editHlwDrugInfo, addOnlineDrugInfo, editOnlineDrugInfo, getOnlineDrugRepeatTags } from "@/api/hlw";
import categoryList from '@/baseData/drug-category';
import frequencyList from '@/baseData/frequency.js';
import dosageUnitList from '@/baseData/dosageUnit.js';
import unitList from '@/baseData/unit';
import usageList from '@/baseData/usage.js';
import { getDrugFieldDict, getDrugList } from './drug-dict.js'

import MyLayout, { LayoutMain, LayoutItem } from "@/components/layout";

const emits = defineEmits(['close', 'change'])
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  // 库类型：hlw = 互联网医院药品库(drug-info)，online = 配送/线上药品库(online-drug-info)
  libType: {
    type: String,
    default: 'hlw'
  },
  memberInfo: { type: Object, default: () => ({}) },
  data: {
    type: Object,
    default: () => ({})
  }
})

const repeatTagList = ref([])
const basicInfo = [
  { label: '药品名称', prop: "name", maxlength: 100 },
  { label: '药品规格', prop: "specification", maxlength: 100 },
  { label: '包装单位', prop: "unit", options: unitList },
  { label: '包装量', prop: "package_amount", maxlength: 100 },
  { label: '生产厂家', prop: "manufacturer", maxlength: 100 },
  { label: '商品条形码', prop: "barcode", maxlength: 100 },
  { label: '医保编码', prop: "insurance_code", maxlength: 100 },
  { label: '药品分类', prop: "category", options: categoryList },
  { label: '药品拼音码', prop: "pinyin_code", maxlength: 100 },
  { label: '通用名', prop: "generic_name", maxlength: 100 },
  { label: '通用名拼音码', prop: "generic_pinyin", maxlength: 100 },
]

// 在线药品库扩展字段：管理分类 + 剂型
const onlineBasicInfoExtra = [
  { label: '管理分类', prop: "manage_category", options: ['处方药', 'OTC'] },
  { label: '剂型', prop: "dosage_form", maxlength: 100 },
  { label: 'ERP编码', prop: "his_drug_code", maxlength: 100 },
]

// 根据 libType 决定展示哪些基础信息字段
const basicInfoList = computed(() => {
  const idField = props.libType === 'online'
    ? { label: '药库货品ID', prop: "product_id", maxlength: 100 }
    : { label: 'ERP ID', prop: "erpId", maxlength: 100 };
  const fields = [...basicInfo.slice(0, 9), idField, ...basicInfo.slice(9)];
  return props.libType === 'online' ? [...fields, ...onlineBasicInfoExtra] : fields;
})

const usageInfo = [
  { label: '单次标准剂量', prop: "dosage", maxlength: 100 },
  { label: '剂量单位', prop: "dosage_unit", options: dosageUnitList },
  { label: '给药标准频次', prop: "frequency", options: frequencyList.map(i => i.name) },
  { label: '给药标准方式', prop: "administration_method", options: usageList.map(i => i.name) },
  { label: '用药标准天数', prop: "days", maxlength: 100 },
  { label: '发药标准数量', prop: "recommended_quantity", maxlength: 100 },
]
const suitableInfo = [
  { label: '适用性别', prop: 'suitableGender', options: [{ label: '通用', value: 'common' }, { label: '男', value: 'male' }, { label: '女', value: 'female' }] },
  { label: '是否儿童用药', prop: 'suitableChild', options: [{ label: '是', value: true }, { label: '否', value: false }] },
  // { label: '重复用药标识', prop: 'repeatTag', multiple: true, options: new Array(5).fill(1).map((_, index) => ({ label: index + 1, value: index + 1 })) },
]
// 其他信息：是否需要上传用药证明/是否有使用范围限制 与 对应描述
const otherInfo = [
  { label: '是否上传用药证明', prop: 'need_medication_proof', type: 'select', options: [{ label: '是', value: true }, { label: '否', value: false }] },
  { label: '是否限制使用范围', prop: 'has_usage_restriction', type: 'select', options: [{ label: '是', value: true }, { label: '否', value: false }] }
]

const requiredMap = computed(() => {
  const m = getDrugFieldDict(props.libType).reduce((acc, cur) => {
    acc[cur.field] = typeof cur.required === 'boolean' ? cur.required : false
    return acc
  }, {})
  m.medication_proof_desc = Boolean(m.medication_proof_desc);
  m.usage_restriction_desc = Boolean(m.usage_restriction_desc);
  if (props.libType === 'online') {
    m.his_drug_code = true
  }
  return m
})

const editForm = ref({})
const form = computed(() => ({ ...props.data, ...editForm.value }))
const tableRef = ref(null);
const loading = ref(false)

function changeValue(val, prop) {
  editForm.value[prop] = val
}


function close() {
  if (loading.value) return;
  emits('close')
}

async function save() {
  if (loading.value) return;
  const isEdit = Boolean(props.data._id);
  const verifyData = isEdit ? form.value : editForm.value;
  const [drug] = getDrugList([verifyData], 'field', true, props.libType);
  if (drug.msgs.length) {
    ElMessage.info(drug.msgs[0])
    return
  }

  if (Object.keys(editForm.value).length) {
    loading.value = true;
    const isOnline = props.libType === 'online';
    const apiMap = {
      update: isOnline ? editOnlineDrugInfo : editHlwDrugInfo,
      add: isOnline ? addOnlineDrugInfo : addHlwDrugInfo,
    }
    const api = props.data._id ? apiMap.update : apiMap.add;
    const payload = {
      params: { ...editForm.value },
      id: props.data._id,
      operator: props.memberInfo.anotherName,
      operatorId: props.memberInfo._id,
    }
    if (!props.data._id) {
      payload.params.onSale = true;
    }
    loading.value = false;
    const { success, message } = await api(payload);
    loading.value = false;
    if (success) {
      ElMessage.success(message)
      emits('change')
      close();
    } else {
      ElMessage.error(message)
      return
    }
  }
}

async function getRepeatTags() {
  const res = await getOnlineDrugRepeatTags()
  repeatTagList.value = res && res.data && Array.isArray(res.data.data) ? res.data.data.map(i => ({ label: `${i}`, value: i })) : [];
}

watch(() => props.visible, (val) => {
  if (val) {
    // reset local editForm when opening drawer
    editForm.value = {}
    if (props.libType === 'online') {
      getRepeatTags()
    }
    // initialize select values based on props.data for edit scenario
    if (props.data) {
      if (props.data.medication_proof_desc) {
        editForm.value.medication_proof_desc = props.data.medication_proof_desc
        editForm.value.need_medication_proof = true
      } else {
        editForm.value.need_medication_proof = false
      }
      if (props.data.usage_restriction_desc) {
        editForm.value.usage_restriction_desc = props.data.usage_restriction_desc
        editForm.value.has_usage_restriction = true
      } else {
        editForm.value.has_usage_restriction = false
      }
      if (props.data.repeatTag && !Array.isArray(props.data.repeatTag)) {
        editForm.value.repeatTag = [props.data.repeatTag]
      }
    }
  }
})

function selectChange(prop, val) {
  // store select value and clear description when selecting '否' (false)
  changeValue(val, prop)
  if (prop === 'need_medication_proof' && !val) {
    changeValue('', 'medication_proof_desc')
  }
  if (prop === 'has_usage_restriction' && !val) {
    changeValue('', 'usage_restriction_desc')
  }
}

</script>
<style scoped>
.other-info-row {
  display: flex;
  align-items: center;
  /* vertically center select and input */
  gap: 12px;
  width: 100%;
}

.other-info-select {
  flex: 0 0 140px;
  /* slightly wider to accommodate labels */
}

.other-info-desc {
  flex: 1 1 0;
  /* take remaining space */
  min-width: 0;
  /* allow input to shrink properly inside flex */
}
</style>