drp-ui/src/views/material/changeApply/add.vue

<template>
  <div class="apply_add">
    <el-tabs type="border-card" v-model="tabValue" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="first">
        <el-form :model="basicForm" :rules="basicRules" ref="basic" label-width="170px">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="单据编码" prop="code">
                <el-input disabled v-model="basicForm.code"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属组织" prop="orgId">
                <el-input disabled v-model="basicForm.orgId"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="物料编码" prop="materialCode">
                <el-input readonly :disabled="disable" v-model="basicForm.materialCode">
                  <el-button :disabled="disable" slot="append" icon="el-icon-more" @click="test01"></el-button>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="物料名称" prop="materialName">
                <el-input :disabled="disable" v-model="basicForm.materialName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="医药物料" prop="medicineMaterial">
                <el-select v-model="basicForm.medicineMaterial" placeholder="医药物料" clearable :disabled="disable"
                  @change="controlMedic">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="物料分类" prop="materialClassifyId">
                <el-input readonly :disabled="disable" v-model="basicForm.fourClass">
                  <el-button :disabled="disable" slot="append" icon="el-icon-more" @click="chooseFourClass"></el-button>
                </el-input>
                <el-input v-show="false" readonly :disabled="disable" v-model="basicForm.materialClassifyId"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="规格" prop="specification">
                <el-input :disabled="disable" v-model="basicForm.specification"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="型号" prop="model">
                <el-input :disabled="disable" v-model="basicForm.model"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="生产厂家/代理人" prop="factory">
                <el-select ref="factoryOrman" v-model="basicForm.factory" placeholder="生产厂家/代理人" clearable
                  :disabled="disable" @focus="chooseFactory">
                  <el-option v-for="item in factoryOptions" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
                <!-- <el-input :disabled="disable" v-model="basicForm.factory">
                  <el-button :disabled="disable" slot="append" icon="el-icon-more" @click="test02"></el-button>
                </el-input> -->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="注册人/上市许可持有人" prop="registrant">
                <el-input :disabled="disable" v-model="basicForm.registrant"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="存储条件" prop="storageConditions">
                <el-select v-model="basicForm.storageConditions" placeholder="存储条件" clearable :disabled="disable">
                  <el-option v-for="dict in dict.type.sys_storage_condition" :key="dict.value" :label="dict.label"
                    :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="运输条件" prop="transportCondition">
                <el-select v-model="basicForm.transportCondition" placeholder="运输条件" clearable :disabled="disable">
                  <el-option v-for="dict in dict.type.sys_conditions_carriage" :key="dict.value" :label="dict.label"
                    :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="交货周期" prop="leadTime">
                <el-input type="number" min="0" :disabled="disable" v-model="basicForm.leadTime"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="备注" prop="remark">
                <el-input :disabled="disable" v-model="basicForm.remark"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="一级分类" prop="oneClass">
                <el-input readonly disabled v-model="basicForm.oneClass"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="二级分类" prop="twoClass">
                <el-input readonly disabled v-model="basicForm.twoClass"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="三级分类" prop="threeClass">
                <el-input readonly disabled v-model="basicForm.threeClass"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="四级分类" prop="fourClass">
                <el-input readonly disabled v-model="basicForm.fourClass">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="医药属性" name="second">
        <el-form :model="basicForm2" ref="basic2" label-width="160px">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="药品" prop="drug">
                <el-select v-model="basicForm2.drug" placeholder="请选择" clearable :disabled="disable || isControl">
                  <el-option v-for="dict in dict.type.sys_medicine" :key="dict.value" :label="dict.label"
                    :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="注册证号/备案凭证编号" prop="registrationNo">
                <el-input :disabled="disable || isControl" v-model="basicForm2.registrationNo"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="医疗器械" prop="medicalDevices">
                <el-select v-model="basicForm2.medicalDevices" placeholder="请选择" clearable
                  :disabled="disable || isControl">
                  <el-option v-for="dict in dict.type.medical_instruments" :key="dict.value" :label="dict.label"
                    :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="养护类型" prop="maintenanceType">
                <el-select v-model="basicForm2.maintenanceType" placeholder="请选择" clearable
                  :disabled="disable || isControl">
                  <el-option v-for="dict in dict.type.curing_type" :key="dict.value" :label="dict.label"
                    :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- <el-row style="margin-bottom: 12px;">
          <span>物料类别</span>
        </el-row>
        <el-row style="margin-bottom: 12px;">
          <el-button type="primary" size="small" plain @click="addLine">新增</el-button>
          <el-button type="primary" size="small" plain @click="handleDelete">删除</el-button>
          <el-button type="primary" size="small" plain @click="testsave">暂存</el-button>
        </el-row> -->
        <!-- <el-row>
          <el-col :span="12">
            <el-table 
            :data="basicForm2.medicineTypeChanges"
            class="request-table"
            @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column label="序号" align="center" prop="sort">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.sort"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="物料类别" align="center" prop="medicineCode">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.medicineCode"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="类别名称" align="center" prop="medicineName">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.medicineName"></el-input>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row> -->
      </el-tab-pane>

      <el-tab-pane label="修改记录" name="third">
        <el-table :data="basicForm.changeRecords" class="request-table">
          <el-table-column label="字段名称" align="center" prop="pageCondtion" />
          <el-table-column label="变更前" align="center" prop="beforeChangeValue" />
          <el-table-column label="变更后" align="center" prop="afterChangeValue" />
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="单据信息" name="fourth">
        <el-form :model="basicForm" ref="info" label-width="160px">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="申请人" prop="createByName">
                <el-input disabled v-model="basicForm.createByName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="申请时间" prop="createTime">
                <el-input disabled v-model="basicForm.createTime"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建人" prop="createByName">
                <el-input disabled v-model="basicForm.createByName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="创建时间" prop="createTime">
                <el-input disabled v-model="basicForm.createTime"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="最后修改人" prop="updateByName">
                <el-input disabled v-model="basicForm.updateByName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="最后修改时间" prop="updateTime">
                <el-input disabled v-model="basicForm.updateTime"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <!-- <el-col :span="8">
              <el-form-item label="最后审核人" prop="approver">
                <el-input disabled v-model="basicForm.approver"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="最后审核时间" prop="approvalTime">
                <el-input disabled v-model="basicForm.approvalTime"></el-input>
              </el-form-item>
            </el-col> -->
            <el-col :span="8">
              <el-form-item label="单据状态" prop="status">
                <el-select v-model="basicForm.status" size="small" disabled>
                  <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
                <!-- <el-input disabled v-model="basicForm.status"></el-input> -->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>

    <div class="btn_group">
      <el-col :span="1.5">
        <el-button type="primary" size="small" plain @click="save"
          v-if="pageStu == 'add' || pageStu == 'edit'">保存</el-button>
      </el-col>
      <el-col :span="1.5" style="margin: 0 10px;">
        <el-button type="primary" size="small" plain @click="submit" v-if="pageStu == 'edit'">提交</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" size="small" plain @click="back">返回</el-button>
      </el-col>
    </div>

    <popDialog ref="contractSelect" @doSubmit="selectionsToInput" :selectData="selectData" :single="true" />

    <factory ref="factory" @doSubmit="acceptFactory" :selectData="selectData2" :single="true" />

    <fourClass ref="fourClass" @doSubmit="acceptFourClass" :selectData="selectData3" :single="true" />
  </div>
</template>

<script>
import popDialog from '@/components/PopDialog/index.vue'
import factory from '@/components/PopDialog/productFactory.vue'
import { addChangeList, getMaterialDetails, getChangeDetails, editChangeList } from '@/api/changeApply/basic'
// 生产厂商/代理人调用用于回显
import { getProductFactory } from '@/api/changeApply/basic'
// 四级分类
import fourClass from '@/components/PopDialog/fourClass.vue'
// 调用物料分类详情接口用于数据回显
import { getDetail } from '@/api/classify/basic';
export default {
  name: 'applyAdd',
  dicts: ['sys_storage_condition', 'sys_conditions_carriage', 'sys_medicine', 'medical_instruments', 'curing_type'],
  components: {
    popDialog,
    factory,
    fourClass
  },
  props: ['pageStu', 'row', 'disable'],
  model: {
    prop: 'isList',
    event: 'jugislist'
  },
  data() {
    return {
      factoryOptions: [],
      tabValue: 'first',
      isControl: true,
      basicForm: {
        code: '',
        orgId: '德荣集团',
        // 物料id
        materialId: '',
        materialCode: '',
        materialName: '',
        materialClassifyId: '',
        medicineMaterial: '2',
        oneClass: '',
        twoClass: '',
        threeClass: '',
        fourClass: '',
        specification: '',
        model: '',
        factory: '',
        registrant: '',
        storageConditions: '',
        transportCondition: '',
        leadTime: '',
        remark: '',
        // 修改记录
        changeRecords: [],
        // 单据信息字段
        createBy: '',
        applicationTime: '',
        createTime: '',
        updateBy: '',
        updateTime: '',
        approver: '',
        approvalTime: '',
        status: ''
      },
      options: [{
        value: '0',
        label: '是'
      }, {
        value: '2',
        label: '否'
      }],
      statusOptions: [{
        value: '0', label: '未提交'
      }, {
        value: '1', label: '审批中'
      }, {
        value: '2', label: '已完成'
      }, {
        value: '3', label: '已驳回'
      },],
      basicRules: {
        materialCode: [{ required: true, message: '请选择物料编码', trigger: 'blur' }],
        materialName: [{ required: true, message: '请填写物料名称', trigger: 'blur' }],
        specification: [{ required: true, message: '请填写规格', trigger: 'blur' }],
        materialClassifyId: [{ required: true, message: '请选择物料分类', trigger: 'blur' }],
        // model: [{required: true, message: '请填写型号', trigger: 'blur'}],
        factory: [{ required: true, message: '请选择生产厂家/代理人', trigger: 'blur' }],
        registrant: [{ required: true, message: '请填写注册人/上市许可持有人', trigger: 'blur' }],
        storageConditions: [{ required: true, message: '请选择存储条件', trigger: 'blur' }],
        // transportCondition: [{required: true, message: '请选择运输条件', trigger: 'blur'}],
        leadTime: [{ required: true, message: '请填写交货周期', trigger: 'blur' }],
      },
      basicForm2: {
        drug: '',
        registrationNo: '',
        medicalDevices: '',
        maintenanceType: '',
        // 医药属性子表
        // medicineTypeChanges:[
        // ],
      },
      // tableList: [],
      // 子表选中
      ids: [],
      // 弹窗
      name: '',
      selectData: [],
      selectData2: [],
      selectData3: []
    }
  },
  // watch: {
  //   value: {
  //     handler (newVal) {
  //       this.selectData = []
  //       if (newVal) {
  //         newVal.split(',').forEach((id) => { // 回显拿数据
  //           this.contractService.queryById(id).then(({data}) => {
  //             if (data && data.id !== '') {
  //               this.selectData.push(data)
  //             }
  //           })
  //         })
  //       }
  //     },
  //     immediate: true,
  //     deep: false
  //   },
  //   selectData: {
  //     handler (newVal) {
  //       this.name = newVal.map(contract => contract.contractName).join(',')
  //     },
  //     immediate: false,
  //     deep: false
  //   }
  // },
  mounted() {
    this.$nextTick(() => {
      // console.log('页面状态',this.pageStu)
      if (this.pageStu == 'check') {
        // alert('详情页面:')
        console.log('页面状态', this.pageStu)
        console.log('数据', this.row)
        this.getDetails(this.row)
        // 生产厂家代理人用于回显
        if (this.row.factory) {
          this.getFactoryDetails(this.row.factory)
        }
      } else if (this.pageStu == 'edit') {
        // alert('修改页面')
        console.log('页面状态', this.pageStu)
        console.log('数据', this.row)
        this.getDetails(this.row)
        // 控制医药属性是否能够填写
        if (this.row.medicineMaterial == '0') {
          this.isControl = false
        } else {
          this.isControl = true
        }
        // 生产厂家代理人用于回显
        if (this.row.factory) {
          this.getFactoryDetails(this.row.factory)
        }
      } else if (this.pageStu == 'add') {
        // alert('新增页面')
        console.log('页面状态', this.pageStu)
      }
    })
  },
  methods: {
    // 生产厂家/代理人用于回显
    getFactoryDetails(id) {
      getProductFactory({ id: id }).then(res => {
        if (res.code === 200) {
          this.factoryOptions = res.data.tableBody
        }
      })
    },
    // 选择是否医药物料时控制医药属性
    controlMedic(val) {
      console.log('val', val)
      if (val == '0') {
        this.isControl = false
      } else {
        this.basicForm2.drug = ''
        this.basicForm2.registrationNo = ''
        this.basicForm2.medicalDevices = ''
        this.basicForm2.maintenanceType = ''
        this.isControl = true
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
      console.log('页面状态', this.pageStu)
    },
    // 如果是详情进入，则调用详情接口
    getDetails(row) {
      getChangeDetails(row.id).then(res => {
        if (res.code === 200) {
          this.basicForm = res.data
          if (res.data.medicineChange) {
            this.basicForm2 = res.data.medicineChange
          }
        }
      })
    },
    save() {
      // alert('保存传status：0')
      let sparams = { ...this.basicForm, ...{ status: 0 } }
      sparams.medicineChange = this.basicForm2
      console.log('保存参数', sparams)
      this.$refs['basic'].validate((valid) => {
        if (valid) {
          addChangeList(sparams).then(res => {
            if (res.code === 200) {
              this.$message({
                message: res.msg,
                type: 'success'
              });
              this.back()
            }
          })
        }
      })
    },
    submit() {
      // alert('提交传status：1')
      let sparams = { ...this.basicForm, ...{ status: 1 } }
      sparams.medicineChange = this.basicForm2
      console.log('提交参数', sparams)
      this.$refs['basic'].validate((valid) => {
        if (valid) {
          editChangeList(sparams).then(res => {
            if (res.code === 200) {
              this.$message({
                message: res.msg,
                type: 'success'
              });
              this.back()
            }
          })
        }
      })
    },
    back() {
      this.$emit('jugislist', true)
      let queryParams = {
        pageNum: 1,
        pageSize: 10
      }
      this.$emit('refresh', queryParams)
    },
    // 子表增删行
    // handleSelectionChange(val) {
    //   this.ids = val
    //   console.log('this.ids',this.ids)
    // },
    // addLine() {
    //   //添加行数
    //   let newValue = {
    //     sort:'',
    //     medicineCode: '',
    //     medicineName: '',
    //   };
    //   this.basicForm2.medicineTypeChanges.push(newValue);
    // },
    // handleDelete(index) {
    //   if(this.ids.length == 0) {
    //     this.$message({
    //       message: '请选择删除条目',
    //       type: 'warning'
    //     });
    //   } else {
    //     // console.log('index',index)
    //     // this.basicForm2.medicineTypeChanges.splice(index, 1);
    //     this.basicForm2.medicineTypeChanges = this.basicForm2.medicineTypeChanges.filter(item =>
    //      !this.ids.some(ele =>
    //      ele.sort == item.sort))
    //   }
    // },
    // testsave() {
    //   console.log('暂存表格：', this.basicForm2.medicineTypeChanges)
    //   console.log('暂存表单1', this.basicForm)
    //   let params = {...this.basicForm, ...this.basicForm2}
    //   console.log('暂存总表单', params)
    // },
    // 设置选中
    selectionsToInput(selections) {
      console.log('父组件拿到的：', selections)
      this.selectData = selections
      this.$emit('getInfo', this.selectData)
      getMaterialDetails(selections[0].id).then(res => {
        console.log('res', res)
        if (res.code === 200) {
          let data = res.data.data
          // 物料id
          this.basicForm.materialId = data.id
          // 物料分类Id
          this.basicForm.materialClassifyId = data.classifyId
          this.basicForm.materialCode = data.code
          this.basicForm.materialName = data.name
          this.basicForm.medicineMaterial = data.isMedicine
          this.basicForm.oneClass = data.oneClass
          this.basicForm.twoClass = data.twoClass
          this.basicForm.threeClass = data.threeClass
          this.basicForm.fourClass = data.fourClass
          this.basicForm.specification = data.specification
          this.basicForm.model = data.model
          this.basicForm.factory = data.manufacturerId
          this.basicForm.registrant = data.registrant
          this.basicForm.storageConditions = data.storageCondition
          this.basicForm.transportCondition = data.transportationCondition
          this.basicForm.leadTime = data.deliveryPeriod
          if (data.manufacturerId) {
            this.getFactoryDetails(data.manufacturerId)
          }
          if (data.medcines.length !== 0) {
            this.basicForm2.drug = data.medcines[0].isDrug
            this.basicForm2.registrationNo = data.medcines[0].registrationNo
            this.basicForm2.medicalDevices = data.medcines[0].medicalInstruments
            this.basicForm2.maintenanceType = data.medcines[0].curingType
          }
          // 控制医药属性是否能够填写
          if (this.basicForm.medicineMaterial == '0') {
            this.isControl = false
          } else {
            this.isControl = true
          }
        }
      })
    },
    // selectionsToInput2 (selections) {
    //   console.log('选择的数据',selections)
    //   this.basicForm.factory = selections[0].manufactureName
    // },
    // 显示列表
    test01() {
      console.log('测试点击')
      this.$refs.contractSelect.init()
    },
    // test02() {
    //   console.log('测试弹窗2');
    //   this.$refs.contractSelect2.init()
    // },
    // 选择生产厂家/代理人
    acceptFactory(selections) {
      console.log('选择的数据', selections)
      this.factoryOptions = selections
      this.basicForm.factory = selections[0].id
      this.getFactoryDetails(selections[0].id)
    },
    // 生产厂家/代理人显示列表
    chooseFactory() {
      this.$refs.factoryOrman.blur()
      this.$refs.factory.init()
    },
    // 选择四级分类
    acceptFourClass(selections) {
      console.log('收到的四级分类', selections)
      this.basicForm.materialClassifyId = selections.id
      this.getTreeDetails(selections.id)
    },
    // 四级分类显示列表
    chooseFourClass() {
      this.$refs.fourClass.init()
    },
    // 选择四级分类后需要根据id再次查询一下123级分类
    getTreeDetails(id) {
      getDetail(id).then(res => {
        if (res.code === 200) {
          this.basicForm.oneClass = res.data.oneClass
          this.basicForm.twoClass = res.data.twoClass
          this.basicForm.threeClass = res.data.threeClass
          this.basicForm.fourClass = res.data.fourClass
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.apply_add {
  height: calc(100vh - 84px);
  padding: 12px;
  box-sizing: border-box;
  overflow-y: auto;
}

.btn_group {
  width: 100%;
  margin: 20px 0;
  display: flex;
  justify-content: center;
}
</style>