elizebeth/src/xt_pages/stock/Dialog/goodInfoDailog.vue

<template>
  <el-dialog width="870px"
             :title="titles"
             :visible.sync="visible"
             :close-on-click-modal="isClose"
             :close-on-press-escape="isClose"
             :before-close="_close">

    <el-tabs v-model="activeName">
      <el-tab-pane label="基础数据" name="first">
        <div>
          <el-form :model="form" ref="form" :rules="rules" label-width="100px"
                   style="display: flex;flex-wrap: wrap;justify-content: space-between;">
            <el-form-item label="耗材名称 : " prop="good_name" style="width:100%">
              <el-input v-model="form.good_name" placeholder="" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="耗材种类 : " prop="good_kind">
              <el-select v-model="form.good_kind" style="width:160px;" placeholder="请选择">
                <el-option
                  v-for="(item,index) in goodKindList"
                  :key="index"
                  :label="item.name"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="耗材类型 : " prop="good_type_id">
              <el-select v-model="form.good_type_id" style="width:160px;" placeholder="请选择">
                <el-option
                  v-for="item,index in form.goodType"
                  :key="index"
                  :label="item.type_name"
                  :value="item.id">
                </el-option>
              </el-select>
            </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 medicalInsuranceLevelList"
                  :key="index"
                  :label="item.name"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>



            <el-form-item label="规格型号 : " prop="specification_name">
              <el-input v-model="form.specification_name" placeholder=""></el-input>
            </el-form-item>
            <el-form-item prop="packing_unit"  label="包装单位:">
              <el-select v-model="form.packing_unit" style="width:160px;" placeholder="包装单位" @change="changePackingUnit">
                <el-option
                  v-for="(item,index) in getDataConfig('hemodialysis','units')"
                  :key="index"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="生产厂商 : " prop="manufacturer" style="width:100%">

               <el-select v-model="form.manufacturer" style="width:100%;" filterable placeholder="请选择">
                  <el-option
                    v-for="(item,index) in form.manufacturers"
                    :key="index"
                    :label="item.manufacturer_name"
                    :value="item.id">
                  </el-option>
             </el-select>
            </el-form-item>
            <!-- <el-form-item label="单位 : " prop="good_unit">
              <el-select v-model="form.good_unit" style="width:160px;" placeholder="请选择">
                <el-option
                  v-for="item,index in form.goodUnit"
                  :key="index"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="零售价 : " prop="retail_price">
              <el-input v-model="form.packing_price" 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="buy_price">
              <el-input v-model="form.buy_price" style="width:160px;" placeholder="" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="默认单次用量:" prop="name">
              <el-input v-model="form.default_count" style="width:80px;" placeholder="" maxlength="30"></el-input>
                <el-select v-model="form.default_count_unit" style="width:80px;" placeholder="单次用量单位" @change="changeDefaultCountUnit">
                  <el-option
                    v-for="(item,index) in unitList"
                    :key="index"
                    :label="item.name"
                    :value="item.name">
                  </el-option>
                </el-select>
             </el-form-item>
            <el-form-item label="库存警戒 : " prop="stock_warn_count">
              <el-input v-model="form.stock_warn_count" style="width:160px;" placeholder="" maxlength="30"></el-input>
            </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="is_special_diseases">
              <el-select v-model="form.is_special_diseases" style="width:160px;" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :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 in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </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 statisticsCategoryList"
                  :key="index"
                  :label="item.name"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="状态 : " prop="good_status">
              <el-checkbox-group v-model="good_status">
                <el-checkbox label="停用">停用</el-checkbox>
                <el-checkbox label="收费">收费</el-checkbox>
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="国家编码:" >
               <el-input v-model="form.social_security_directory_code" style="width:180px"></el-input>
            </el-form-item>

            <el-form-item label="生产地类别:">
              <el-select v-model="form.production_type" style="width:160px;" placeholder="请选择">
                <el-option
                  v-for="item in optionsOne"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>



            <el-form-item label="特殊医用材料标志:">
              <el-select v-model="form.special_medical " style="width:160px;" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>



           <el-form-item label="经销商 : " style="width:100%">

               <el-select v-model="form.dealer" style="width:100%;" filterable placeholder="请选择">
                  <el-option
                    v-for="(item,index) in dealer"
                    :key="index"
                    :label="item.dealer_name"
                    :value="item.id">
                  </el-option>
              </el-select>
           </el-form-item>


            <el-form-item label="注册编码:" >
              <el-input v-model="form.register_number" style="width:180px"></el-input>
            </el-form-item>



            <el-form-item label="备注 : " prop="name" style="width:100%;">
              <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.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="sign">
            <el-select v-model="form.sign" 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="is_default">
            <el-select v-model="form.is_default" style="width:160px;" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :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 in options"
                :key="item.value"
                :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 in options"
                :key="item.value"
                :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 in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </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_doctor_use">
            <el-select v-model="form.is_doctor_use" style="width:160px;" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :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="耗材编号:" prop="good_number">
            <el-input v-model="form.good_number" 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 { getManufacturerList,GetAllConfig,getInitializtion } from "@/api/stock";

  export default {
    name: 'goodInfoDailog',
    data() {
      return {
        visible: false,
        formTitle: '',
        activeName: 'first',
        options: [{
          value: '1',
          label: '是'
        }, {
          value: '2',
          label: '否'
        }],
        optionsOne: [{
          value: '1',
          label: '国内'
        }, {
          value: '2',
          label: '国外'
        }],
        good_unit: '',
        isClose: false,
        good_status: [],
        size: 11,
        visibility: false,
        form: {
          good_id: '',
          specification_name: '',
          buy_price: '',
          sell_price: '',
          remark: '',
          manufacturer: '',
          good_type_id: '',
          dealer: '',
          expiry_date_warn_day_count: '',
          stock_warn_count: '',
          is_reuse: '2',
          good_name: '',
          pinyin: '',
          wubi: '',
          good_kind: '',
          medical_insurance_level: '',
          good_unit: '',
          retail_price: '',
          medical_insurance_number: '',
          is_special_diseases: '',
          is_record: '',
          statistics_category: '',
          agent: '',
          good_status: '',
          default_count:1,
          sign: '',
          is_default: '',
          is_charge_use: '',
          is_charge_predict: '',
          is_statistics_work: '',
          sort: '',
          is_doctor_use: '',
          good_number: '',
          social_security_directory_code:"",
          production_type:"",
          special_medical:"",
          min_number:"",
          packing_unit:"",
          packing_price:'',
          default_count_unit:"",
          min_unit:"",
          total:"",
          register_number:"",
        },

        rules: {
          specification_name: [
            { required: true, message: '请输入规格型号', trigger: 'blur' }
          ],
          good_type_id: [
            { required: true, message: '请选择商品类型', trigger: 'change' }
          ],
          good_name: [
            { required: true, message: '请输入耗材名称', trigger: 'blur' }
          ],
          packing_unit:[
            {required:true,message:"请输入包装单位",trigger:'blur'}
          ],
          good_kind: [
            { required: true, message: '请选择耗材种类', trigger: 'change' }
          ],
          medical_insurance_level: [
            { required: true, message: '请输入医保等级', trigger: 'blur' }
          ],
          manufacturer: [
            { required: true, message: '请选择生产厂商', trigger: 'blur' }
          ], good_unit: [
            { required: true, message: '请选择单位', trigger: 'blur' }
          ],social_security_directory_code:[
            {required:true,message:"请填写社保目录编码",trigger:'blur'}
          ],production_type:[
            {required:true,message:"请填写生产地类别",trigger:"blur"}
          ],special_medical:[
            {required:true,message:"请填写特殊医院材料标志",trigger:"blur"}
          ]
        },
        dealer:[],
        goodKindList:[],
        medicalInsuranceLevelList:[],
        statisticsCategoryList:[],
        unitList:[],
        showMinNumber:false,
      }
    },
    props: {

      titles: {
        type: String,
        default: ''
      },
      formValue: {
        type: Object
      },
      isCreated: {
        type: Number,
        default: 1

      }

    },
    methods: {
      getDictionaryDataConfig(module, filed_name) {
        return getDictionaryDataConfig(module, filed_name)
      },
      getDataConfig(module, filed_name){
        return getDataConfig(module, filed_name)
      },
      show(id,form) {
        console.log("form",form)

        if(form!=undefined){
          this.unitList = []
          var arr =  getDataConfig('hemodialysis','units')
          for(let i=0;i<arr.length;i++){
            if(form.min_unit == arr[i].name){
              this.unitList.push(arr[i])
            }
          }
          for(let j=0;j<arr.length;j++){
          if(form.packing_unit == arr[j].name){
              this.unitList.push(arr[j])
            }
          }
          console.log("列表222",this.unitList)
        }

        this.visible = true
        this.good_status =[]
        this.getlist()
        this.GetAllConfig()
        this.getInitializtion()
        if (id == 0) {
          var tempform = {
              good_id: '',
              specification_name: '',
              buy_price: '',
              sell_price: '',
              remark: '',
              manufacturer: '',
              good_type_id: '',
              dealer: '',
              expiry_date_warn_day_count: '',
              stock_warn_count: '',
              is_reuse: '2',
              good_name: '',
              pinyin: '',
              wubi: '',
              good_kind: '',
              medical_insurance_level: '',
              good_unit: '',
              retail_price: '',
              medical_insurance_number: '',
              is_special_diseases: '',
              is_record: '',
              statistics_category: '',
              agent: '',
              good_status: '',
              default_count: '',
              sign: '',
              is_default: '',
              is_charge_use: '',
              is_charge_predict: '',
              is_statistics_work: '',
              sort: '',
              is_doctor_use: '',
              good_number: '',
              min_number:"",
              packing_unit:"",
              packing_price:'',
              default_count_unit:"",
              min_unit:"",
              total:"",
            }
          this.good_status = []
          for (let key in tempform) {
            this.form[key] = tempform[key]
          }
        } else {
          for (let key in form) {
            this.form[key] = form[key]
          }
          if (this.form.good_status.length > 0) {
            for (let i = 0; i < this.form.good_status.split(",").length; i++) {
              this.good_status.push(this.form.good_status.split(',')[i])
            }
          }
        }

      }, hide() {
        this.visible = false
      },
      cancle: function(formName) {
        this.$emit('dialog-cancle', this.getValue())
      },
      comfirm: function(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$emit('dialog-comfirm', this.getValue())
          }
        })
      },
      _close: function(done) {
        // this.clear()
        // done()
        this.$confirm('是否保存')
          .then(_ => {
            this.comfirm('form')
            // done();
          })
          .catch(_ => {
            done()
          });
      },
      getValue: function() {

        const form = {}
        form['specification_name'] = this.form.specification_name
        form['good_unit'] = this.form.good_unit
        form['buy_price'] = this.form.buy_price
        form['sell_price'] = this.form.sell_price
        form['remark'] = this.form.remark
        form['manufacturer'] = this.form.manufacturer
        form['dealer'] = this.form.dealer
        form['expiry_date_warn_day_count'] = this.form.expiry_date_warn_day_count
        form['stock_warn_count'] = this.form.stock_warn_count
        form['is_reuse'] = this.form.is_reuse
        form['isCreated'] = this.isCreated
        form['good_id'] = this.form.good_type_id
        form['good_name'] = this.form.good_name
        form['pinyin'] = this.form.pinyin
        form['wubi'] = this.form.wubi
        form['good_kind'] = this.form.good_kind
        form['medical_insurance_level'] = this.form.medical_insurance_level
        form['manufacturer'] = this.form.manufacturer
        form['retail_price'] = this.form.retail_price
        form['medical_insurance_number'] = this.form.medical_insurance_number
        form['is_special_diseases'] = this.form.is_special_diseases
        form['is_record'] = this.form.is_record
        form['statistics_category'] = this.form.statistics_category
        // form['good_status'] = this.form.good_status
        form['default_count'] = this.form.default_count
        form['sign'] = this.form.sign
        form['is_default'] = this.form.is_default
        form['is_charge_use'] = this.form.is_charge_use
        form['is_charge_predict'] = this.form.is_charge_predict
        form['is_statistics_work'] = this.form.is_statistics_work
        form['sort'] = this.form.sort
        form['is_doctor_use'] = this.form.is_doctor_use
        form['agent'] = this.form.agent
        form['good_number'] = this.form.good_number
        form['good_status'] = this.good_status.join(',')
        form['social_security_directory_code'] = this.form.social_security_directory_code
        form['production_type'] = this.form.production_type
        form['special_medical'] = this.form.special_medical
        form['min_unit'] = this.form.min_unit
        form['min_number'] = this.form.min_number
        form["packing_unit"]= this.form.packing_unit
        form["packing_price"] = this.form.packing_price
        form["default_count_unit"] = this.form.default_count_unit
        form["total"] = this.form.total
        form["register_number"] = this.form.register_number


        return form
      }, changeSelected: function(val) {
        console.log(val)
      },
      getlist(){
         var params = {
             page:this.page,
             limit:this.limit
          }

        getManufacturerList(params).then(response=>{
           var manufacturerList =   response.data.data.manufacturer

           this.manufacturerList = manufacturerList
        })
      },
      GetAllConfig(){
        GetAllConfig().then(response => {
        if (response.data.state == 0) {
          this.$message.error(response.data.msg);
          return false;
        } else {
          this.dealer = response.data.data.dealer;

        }
       });
      },
      getInitializtion(){
       getInitializtion().then(response=>{
         if(response.data.state == 1){
           var goodKindList = response.data.data.goodKindList
           console.log("耗材种类",goodKindList)
           this.goodKindList = goodKindList
           var medicalInsuranceLevelList =  response.data.data.medicalInsuranceLevelList
           console.log("医保等级",medicalInsuranceLevelList)
           this.medicalInsuranceLevelList = medicalInsuranceLevelList
           var statisticsCategoryList = response.data.data.statisticsCategoryList
           console.log("统计分类",statisticsCategoryList)
           this.statisticsCategoryList = statisticsCategoryList

         }
       })
      },
      changeMinUnit(val){
        if(this.form.packing_unit == val){
          this.form.min_number = 1
          this.showMinNumber = true
        }else{
          this.showMinNumber = false
        }
        var arr =  getDataConfig('hemodialysis','units')
        for(let i=0;i<arr.length;i++){
          if(val == arr[i].name){
           this.unitList.push(arr[i])
          }
        }

      },
      changePackingUnit(val){
        if(this.form.min_unit == val){
           this.form.min_number = 1
           this.showMinNumber = true
        }else{
          this.showMinNumber = false
         }
        var arr =  getDataConfig('hemodialysis','units')
        for(let i=0;i<arr.length;i++){
          if(val == arr[i].name){
           this.unitList.push(arr[i])
          }
        }
      },
     changeDefaultCountUnit(val){
       console.log("val2222",val)
       this.form.default_count_unit = ''
        this.form.default_count_unit = val
      }
    },
    watch: {
      visible(val) {
        this.form = this.formValue
        this.good_unit = this.formValue.good_unit

        if (this.isCreated == 1) {
          this.good_unit = ''
        }
      }
    },
    created(){
      this.getlist()
      //获取所有经销商
      this.GetAllConfig()
      this.getInitializtion()
    }
  }

</script>

<style lang="scss">
   .noMargin{
    .el-form-item__content{
        margin-left: 0 !important;
      }
    }
</style>