elizebeth/src/xt_pages/data/components/addDrugs.vue

<template>
  <el-dialog
    :title="formTitle"
    width="1000px"
    :visible.sync="visible"
    :before-close="_close"
    class="addDrugsDialog"
  >
    <el-tabs v-model="activeName" >
      <el-tab-pane label="基础数据" name="first">
        <div>
          <el-form :model="form" :rules="rules" ref="form" label-width="120px"
                   style="display: flex;flex-wrap: wrap;justify-content: space-between;">
            <el-form-item label="药品名称 : " prop="drug_name" >
              <el-input v-model="form.drug_name" style="width:160px;" placeholder="" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="拼音 : " prop="pinyin" >
              <el-input v-model="form.pinyin" style="width:160px;" placeholder="" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="五笔 : " prop="wubi">
              <el-input v-model="form.wubi" style="width:160px;" placeholder="" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="药品别名 : " prop="drug_alias">
              <el-input v-model="form.drug_alias" style="width:160px;" placeholder="" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="别名拼音 : " prop="drug_alias_pinyin">
              <el-input v-model="form.drug_alias_pinyin" style="width:160px;" placeholder="" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="别名五笔 : " prop="drug_alias_wubi">
              <el-input v-model="form.drug_alias_wubi" style="width:160px;" placeholder="" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="药品类别 : " prop="drug_category" >
              <el-select v-model="form.drug_category" style="width:160px;" placeholder="请选择">
                <el-option
                  v-for="item,index in getDictionaryDataConfig('system','drug_category')"
                  :key="index"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="药品规格 : " prop="drug_spec" >
              <el-input v-model="form.drug_spec" style="width:160px;" placeholder="" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="药品类型 : " prop="drug_type">
              <el-input v-model="form.drug_type" style="width:160px;" placeholder="" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="库存警戒:" prop="drug_stock_limit" >
              <el-input v-model="form.drug_stock_limit" style="width:160px;" placeholder="" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="产地:" prop="drug_origin_place" >
              <el-input v-model="form.drug_origin_place" style="width:160px;" placeholder="" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="药品剂型 : " prop="drug_dosage_form" >
              <el-input v-model="form.drug_dosage_form" style="width:160px;" placeholder="" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="医保等级 : " prop="medical_insurance_level" >
              <el-select v-model="form.medical_insurance_level" style="width:160px;" placeholder="请选择">
                <el-option
                  v-for="item,index in getDictionaryDataConfig('system','medical_insurance_level')"
                  :key="index"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="最大单位 : " prop="max_unit" >
              <el-select v-model="form.max_unit" style="width:160px;" placeholder="请选择">
                <el-option
                  v-for="item,index in getDataConfig('hemodialysis','units')"
                  :key="index"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="最小单位 : " prop="min_unit" >
              <el-select v-model="form.min_unit" style="width:160px;" placeholder="请选择">
                <el-option
                  v-for="item,index in getDataConfig('hemodialysis','units')"
                  :key="index"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="单位换算 : " prop="unit_matrixing" >
              <el-input v-model="form.unit_matrixing" style="width:160px;" placeholder="" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="零售价(元) : " prop="retail_price" >
              <el-input v-model="form.retail_price" style="width:160px;" placeholder="" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="上次进价(元) : " prop="last_price" >
              <el-input v-model="form.last_price" style="width:160px;" placeholder="" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="开药控制 : " prop="drug_control">
              <el-select v-model="form.drug_control" style="width:160px;" placeholder="请选择">
                <el-option
                  v-for="item,index in getDictionaryDataConfig('system','drug_control')"
                  :key="index"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="批准文号 : " prop="number">
              <el-input v-model="form.number" style="width:160px;" placeholder="" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="药物分类 : " prop="drug_classify" >
              <el-select v-model="form.drug_classify" style="width:160px;" placeholder="请选择">
                <el-option
                  v-for="item, index in getDictionaryDataConfig('system','drug_classify')"
                  :key="index"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="剂量 : " prop="drug_dose" >
              <el-input v-model="form.drug_dose" style="width:70px;margin-right:5px;" placeholder=""
                        maxlength="30"></el-input>
              <el-select v-model="form.drug_dose_unit" style="width:80px;" placeholder="请选择">
                <el-option
                  v-for="item,index in getDataConfig('hemodialysis','units')"
                  :key="index"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="医保编码 : " prop="medical_insurance_number">
              <el-input v-model="form.medical_insurance_number" style="width:160px;" placeholder="" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="生产厂商 : " prop="manufacturer" >
              <el-select v-model="form.manufacturer" style="width:160px;" placeholder="请选择">
                <el-option
                  v-for="item,index in manufacturers"
                  :key="index"
                  :label="item.manufacturer_name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="药理分类 : " prop="pharmacology_category">
              <el-select v-model="form.pharmacology_category" style="width:160px;" placeholder="请选择">
                <el-option
                  v-for="item,index  in getDictionaryDataConfig('system','pharmacology_category')"
                  :key="index"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="统计分类 : " prop="statistics_category">
              <el-select v-model="form.statistics_category" style="width:160px;" placeholder="请选择">
                <el-option
                  v-for="item,index  in getDictionaryDataConfig('system','statistics_category')"
                  :key="index"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="本位码 : " prop="code">
              <el-input v-model="form.code" style="width:160px;" placeholder="" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="是否特病目录:" prop="is_special_diseases">
              <el-select v-model="form.is_special_diseases" style="width:160px;" placeholder="请选择">
                <el-option
                  v-for="item,index in options"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否备案 : " prop="is_record">
              <el-select v-model="form.is_record" style="width:160px;" placeholder="请选择">
                <el-option
                  v-for="item,index in options"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="代理商 : " prop="agent">
              <el-input v-model="form.agent" style="width:160px;" placeholder="" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label=""  style="visibility: hidden;">
              <el-input style="width:160px;" placeholder="" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="状态 : " prop="drug_status">
              <el-checkbox-group v-model="drug_status">
                <el-checkbox label="停用">停用</el-checkbox>
                <el-checkbox label="贵重">贵重</el-checkbox>
                <el-checkbox label="收费">收费</el-checkbox>
                <el-checkbox label="库存管理" >库存管理</el-checkbox>
                <el-checkbox label="默认用药途径收费" >默认用药途径收费</el-checkbox>
                <el-checkbox label="注射类" >注射类</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="限制说明 : " prop="limit_remark" style="width:100%;">
              <el-input type="form.restrictions" :rows="2" placeholder="请输入内容" v-model="form.limit_remark"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="扩展数据" name="second">
        <el-form :model="form" label-width="120px"
                 style="display: flex;flex-wrap: wrap;justify-content: space-between;">
          <el-form-item label="默认给药途径:" prop="delivery_way">
            <el-select v-model="form.delivery_way" style="width:160px;" placeholder="请选择">
              <el-option
                v-for="item, index in deliveryWayOptions"
                :key="index"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="默认执行频率:" prop="execution_frequency">
            <el-select v-model="form.execution_frequency" style="width:160px;" placeholder="请选择">
              <el-option
                v-for="item,index in executionFrequencyOptions"
                :key="index"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="默认单次用量:" prop="single_dose">
            <el-input v-model="form.single_dose" style="width:160px;" placeholder="" maxlength="30"></el-input>
          </el-form-item>
          <el-form-item label="默认开药数量:" prop="prescribing_number">
            <el-input v-model="form.prescribing_number" style="width:160px;" placeholder=""
                      maxlength="30"></el-input>
          </el-form-item>
          <el-form-item label="标签:" prop="label">
            <el-select v-model="form.label" style="width:160px;" placeholder="请选择">
              <el-option
                v-for="item,index in getDictionaryDataConfig('system','sign')"
                :key="index"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="收费项目排序:" prop="sort">
            <el-input v-model="form.sort" style="width:160px;" placeholder="" maxlength="30"></el-input>
          </el-form-item>
          <el-form-item label="是否常用医嘱:" prop="is_use_doctor_advice">
            <el-select v-model="form.is_use_doctor_advice" style="width:160px;" placeholder="请选择">
              <el-option
                v-for="item,index in options"
                :key="index"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否默认:" prop="is_default">
            <el-select v-model="form.is_default" style="width:160px;" placeholder="请选择">
              <el-option
                v-for="item,index in options"
                :key="index"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否收费预估项:" prop="is_charge_predict">
            <el-select v-model="form.is_charge_predict" style="width:160px;" placeholder="请选择">
              <el-option
                v-for="item,index in options"
                :key="index"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否统计工作量:" prop="is_statistics_work">
            <el-select v-model="form.is_statistics_work" style="width:160px;" placeholder="请选择">
              <el-option
                v-for="item,index in options"
                :key="index"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否收费常用项:" prop="is_charge_use">
            <el-select v-model="form.is_charge_use" style="width:160px;" placeholder="请选择">
              <el-option
                v-for="item,index in options"
                :key="index"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" style="visibility: hidden;">
            <el-input style="width:160px;" placeholder="" maxlength="30"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>


    <span slot="footer" class="dialog-footer">
    <el-button  @click="cancle('form')">取 消</el-button>
    <el-button type="primary" @click="comfirm('form')">保 存</el-button>
  </span>
  </el-dialog>
</template>

<script>
  import { getDictionaryDataConfig,getDataConfig } from "@/utils/data";
  import {
    getAdviceConfig,
  } from '@/api/advice'
  export default {
    data() {
      return {
        visible: false,
        formTitle: '',
        activeName: 'first',
        manufacturers:[],
        drugCategorys: [
          { id: 1, name: '中药' },
          { id: 2, name: '西药' },
          { id: 3, name: '草药' },
          { id: 4, name: '其他' }],
        options: [{
          value: '1',
          label: '是'
        }, {
          value: '2',
          label: '否'
        }],
        deliveryWayOptions:[],
        executionFrequencyOptions:[],
        value: '',
        radio: '1',
        drug_status:[],
        form: {
          drug_name: '',//药品名称
          pinyin: '',//拼音
          wubi: '',//五笔输入法
          drug_alias: '',//药品别名
          drug_alias_pinyin: '',//别名拼音
          drug_alias_wubi: '',//别名五笔
          drug_category: '',//药品类别
          drug_spec: '',//药品规格
          drug_type: '',//药品类型
          drug_stock_limit: '',//库存警戒
          drug_origin_place: '',//产地
          drug_dosage_form: '',//药品剂型
          medical_insurance_level: '',//医保等级
          max_unit: '',//最大单位
          min_unit: '',//最小单位
          unit_matrixing: '',//单位换算
          retail_price: '',//零售价
          last_price: '',//上次进价
          drug_control: '',//开药控制
          number: '',//批准文号
          drug_classify: '',//药物分类
          drug_dose: '',//药品剂量
          drug_dose_unit:'',
          medical_insurance_number: '',//医保编号
          manufacturer:'', //生产产商
          pharmacology_category: '',//药理分类
          statistics_category: '',//统计分类
          code: '',//本位码
          is_special_diseases: '',//是否特病目录
          is_record: '',//是否备案
          agent: '',// 代理商
          drug_status: '',// 状态
          limit_remark: '',//限制说明
          delivery_way: '',//默认给药途径
          execution_frequency: '',//默认执行频率
          single_dose: '',//默认单次用量
          prescribing_number: '',//默认开药数量
          label: '',//标签
          sort: '',//收费项目排序
          is_use_doctor_advice: '',//是否常用医嘱
          is_default: '',//是否默认
          is_charge_predict: '',//是否收费预估项
          is_statistics_work: '',//是否统计工作量
          is_charge_use: '',//是否收费常用项
          drug_code:'',
        },

        rules: {
          drug_name: [{ required: true, message: '请填写药品名称', trigger: 'blur'  }],
          pinyin: [{ required: true, message: '请填写拼音' , trigger: 'blur' }],
          wubi: [{ required: true, message: '请填写五笔' , trigger: 'blur' }],
          drug_alias: [{ required: true, message: '请选择药品类别', trigger: 'change' }],
          drug_spec: [{ required: true, message: '请填写药品规格',trigger: 'blur' }],
          drug_type: [{ required: true, message: '请填写药品类型',trigger: 'blur' }],
          drug_stock_limit: [{ required: true, message: '请填写库存警戒',trigger: 'blur'  }],
          drug_origin_place: [{ required: true, message: '请填写产地',trigger: 'blur' }],
          drug_dosage_form: [{ required: true, message: '请填写药品剂型',trigger: 'blur' }],
          medical_insurance_level: [{ required: true, message: '请选择医保等级',trigger: 'change' }],
          max_unit: [{ required: true, message: '请填写最大单位',trigger: 'change' }],
          min_unit: [{ required: true, message: '请填写最小单位',trigger: 'change' }],
          unit_matrixing: [{ required: true, message: '请填写单位换算',trigger: 'blur' }],
          retail_price: [{ required: true, message: '请填写零售价',trigger: 'blur'  }],
          last_price: [{ required: true, message: '请填写上次进价',trigger: 'blur'  }],
          drug_classify: [{ required: true, message: '请选择药物分类',trigger: 'change'  }],
          drug_dose: [{ required: true, message: '请填写剂量',trigger: 'blur'  }],
          manufacturer: [{ required: true, message: '请选择生产产商',trigger: 'change'  }]
        }
      }
    },
    props: {
      manufacturers:{
        type:Array
      },
      titles: {
        type: String,
        default: ''
      },
      formValue: {
        type: Object
      },
      isCreated: {
        type: Number,
        default: 1
      }

    },
    methods: {
      cancle: function(formName) {
        this.$emit('dialog-cancle', this.getValue())
      },
      comfirm: function(formName) {
        this.$refs[formName].validate((valid) => {
          console.log(valid)
          if (valid) {
            console.log( this.getValue())
            this.$emit('dialog-comfirm', this.getValue())
          }
        })
      },
      getDictionaryDataConfig(module, filed_name) {
        return getDictionaryDataConfig(module, filed_name)

      },getDataConfig(module, filed_name){
        return getDataConfig(module, filed_name)

      },
      _close: function(done) {
        // this.clear()
        done()
      },
      clear: function() {
        this.form.id = 0
        this.form.name = ''
        this.form.intro = ''
      },
      show(id,obj) {
        // this.clear()
        this.visible = true
        if (id == 0) {
          this.formTitle = '新增'
          this.form['id'] = 0
          for(let key in obj){
            this.form[key] = obj[key]
          }

        } else {
          for(let key in obj){
            this.form[key] = obj[key]
          }

          this.form.drug_classify = parseInt(this.form.drug_classify)
          this.form.max_unit = parseInt(this.form.max_unit)
          this.form.min_unit = parseInt(this.form.min_unit)

          this.form['id'] = id

          console.log(this.form.drug_status.length)
          this.drug_status = []
          if(this.form.drug_status.length > 0){
            for (let i = 0; i <  this.form.drug_status.split(",").length; i++){
                this.drug_status.push(this.form.drug_status.split(",")[i])
            }
            console.log(this.drug_status)
          }

          this.formTitle = '编辑'


        }
        this.getAdviceConfig()

      },getAdviceConfig() {
        getAdviceConfig().then(response => {
          if (response.data.state == 1) {
            this.deliveryWayOptions =
              response.data.data.drugways === null
                ? []
                : response.data.data.drugways

            this.executionFrequencyOptions =
              response.data.data.efs === null ? [] : response.data.data.efs
          }
        })

      }
      ,
      hide() {
        // this.clear()
        this.visible = false
      },getValue: function() {
        const form = {}
        form['id'] = this.form.id
        form['drug_name'] = this.form.drug_name
        form['pinyin'] = this.form.pinyin
        form['wubi'] = this.form.wubi
        form['drug_alias'] = this.form.drug_alias
        form['drug_alias_pinyin'] = this.form.drug_alias_pinyin
        form['drug_alias_wubi'] = this.form.drug_alias_wubi
        form['drug_category'] = this.form.drug_category
        form['drug_spec'] = this.form.drug_spec
        form['drug_type'] = this.form.drug_type
        form['drug_stock_limit'] = this.form.drug_stock_limit
        form['drug_origin_place'] = this.form.drug_origin_place
        form['drug_dosage_form'] = this.form.drug_dosage_form
        form['medical_insurance_level'] = this.form.medical_insurance_level
        form['max_unit'] = this.form.max_unit
        form['min_unit'] = this.form.min_unit
        form['unit_matrixing'] = this.form.unit_matrixing
        form['retail_price'] = this.form.retail_price
        form['last_price'] = this.form.last_price
        form['drug_control'] = this.form.drug_control
        form['number'] = this.form.number
        form['drug_dose'] = this.form.drug_dose
        form['drug_dose_unit'] = this.form.drug_dose_unit
        form['medical_insurance_number'] = this.form.medical_insurance_number
        form['manufacturer'] = this.form.manufacturer
        form['pharmacology_category'] = this.form.pharmacology_category
        form['statistics_category'] = this.form.statistics_category
        form['code'] = this.form.code
        form['is_special_diseases'] = this.form.is_special_diseases
        form['is_record'] = this.form.is_record
        form['agent'] = this.form.agent
        form['drug_status'] = this.drug_status.join(",")
        form['limit_remark'] = this.form.limit_remark
        form['delivery_way'] = this.form.delivery_way
        form['execution_frequency'] = this.form.execution_frequency
        form['single_dose'] = this.form.single_dose
        form['prescribing_number'] = this.form.prescribing_number
        form['label'] = this.form.label
        form['sort'] = this.form.sort
        form['is_use_doctor_advice'] = this.form.is_use_doctor_advice
        form['is_default'] = this.form.is_default
        form['is_charge_predict'] = this.form.is_charge_predict
        form['is_statistics_work'] = this.form.is_statistics_work
        form['is_charge_use'] = this.form.is_charge_use
        form['drug_code'] = this.form.drug_code
        form['drug_classify'] = this.form.drug_classify



        return form
      },
    }, watch: {
      visible(val) {
        // this.form = this.formValue

      }
    }
  }
</script>

<style lang="scss">
.addDrugsDialog{
  .el-dialog__body{
    padding-top: 0px;
  }
}
</style>