Merge branch 'develop' of http://117.34.109.166:18448/r/vue_mdc_430

zenglf

2023-09-18 92ff846fb659c62037a32b1d8c15eae9df9d9b54

 src/views/spare/modules/sparePartOutbound/SparePartOutboundModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,518 @@
<template>
  <a-modal
    :title="title"
    :width="1450"
    :visible="visible"
    :maskClosable="false"
    @ok="handleOk"
    cancelText="关闭"
    @cancel="handleCancel"
    :confirmLoading="confirmLoading"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="24">
          <a-col :span="24/2">
            <a-form-item
              label="申请单编码"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                placeholder="请输申请单编码"
                :disabled="true"
                v-decorator="['num', validatorRules.num]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="24/2">
            <a-form-item
              label="领用部门"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-tree-select
                style="width: 100%"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                :tree-data="treeData"
                placeholder="请选择领用部门"
                tree-default-expand-all
                v-decorator="['departId', validatorRules.departId]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24/2">
            <a-form-item
              label="出库人员"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <j-dict-select-tag
                allow-clear
                :disabled="disableSubmit"
                :placeholder="'请选择出库人员'"
                v-decorator="['outboundPersonId', validatorRules.outboundPersonId]"
                dictCode="sys_user,realname,id,del_flag!='1'"
              />
            </a-form-item>
          </a-col>
          <a-col :span="24/2">
            <a-form-item
              label="仓库"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <j-dict-select-tag
                allow-clear
                :disabled="disableSubmit"
                :placeholder="disableSubmit?'':'请选择仓库'"
                :triggerChange="true"
                dictCode="mom_base_warehouse,name,id , del_flag!='1'"
                v-decorator="['warehouseId', validatorRules.warehouseId]"
                @change="(e)=>handle2Change(e)"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
    <a-button
      type="primary"
      :disabled="disableSubmit"
      :style="{ marginRight: '8px',marginBottom:'8px' }"
      :loading="confirmLoading"
      @click="selectSparePartInventory()"
    >增加备件库存信息</a-button>
    <a-table
      ref="table"
      bordered
      size="middle"
      rowKey='id'
      :columns="columns"
      :dataSource="dataSource"
      :scroll="{ x: 'calc(1200px + 50%)', y: 900 }"
    >
      <template
        v-for="col in columns"
        :slot="col.dataIndex"
        slot-scope='text, record, index'
      >
        <div :key="col.dataIndex">
          <a-input-number
            :value="text"

            v-if="col.dataIndex == 'outboundMainQuantity'"
            :min="0"
            :disabled="disableSubmit"
            :max="record.mainQuantity"
            @change="(e)=>handleChange(e, record.key, col, index)"
          />
        </div>
      </template>

      <span
        slot="action"
        slot-scope="text, record, index"

      >
        <a-popconfirm

          title="确定删除吗?"
          :disabled="disableSubmit"
          @confirm="() => handleDelete(text,record, index)"
        >
          <a>删除</a>
        </a-popconfirm>
      </span>
    </a-table>
    <template slot="footer">
      <a-button
        :style="{marginRight: '8px'}"
        @click="handleCancel()"
      >
        å…³é—­
      </a-button>

      <a-button
        @click="handleOk()"
        :disabled="disableSubmit"
        type="primary"
        :loading="confirmLoading"
      >确定</a-button>
    </template>
    <j-select-spare-part-inventory-modal ref="sparePartInventoryModalForm"></j-select-spare-part-inventory-modal>
  </a-modal>

</template>

<script>
import { getAction, postAction, requestPut } from '@/api/manage'
import pick from 'lodash.pick'
import JMultiSelectTag from '@/components/dict/JMultiSelectTag'
import { duplicateCheck } from '@/api/api'
import Tooltip from 'ant-design-vue/es/tooltip'
import JSelectSparePartInventoryModal from './JSelectSparePartInventoryModal'

export default {
  name: "SparePartOutboundModal",
  components: {
    JMultiSelectTag,
    Tooltip,
    JSelectSparePartInventoryModal
  },
  data() {
    return {
      disabled:false,
      treeData:[],
      departs: [],
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
          width: 50,
        },
        {
          title: '批次号',
          align: 'center',
          dataIndex: 'batchNum'
        },
        {
          title: '备件编码',
          align: 'center',
          dataIndex: 'num'
        },
        {
          title: '备件名称',
          align: 'center',
          dataIndex: 'name'
        },
        {
          title: '型号',
          align: 'center',
          dataIndex: 'model'
        },
        {
          title: '规格',
          align: 'center',
          dataIndex: 'specification'
        },
        {
          title: '制造商',
          align: 'center',
          dataIndex: 'constructorName',
        },
        {
          title: '出厂日期',
          align: 'center',
          dataIndex: 'manufactureDate',
        },
        {
          title: '仓库',
          align: 'center',
          dataIndex: 'warehouseName',
        },
        {
          title: '库区',
          align: 'center',
          dataIndex: 'warehouseAreaName'
        },
        {
          title: '库位',
          align: 'center',
          dataIndex: 'warehouseLocationNum'
        },
        {
          title: '单位',
          align: 'center',
          dataIndex: 'mainUnitName'
        },
        {
          title: '数量',
          align: 'center',
          dataIndex: 'mainQuantity',
        },
     /*    {
          title: '辅单位',
          align: 'center',
          dataIndex: 'auxiliaryUnitName'
        },
        {
          title: '辅数量',
          align: 'center',
          dataIndex: 'auxiliaryQuantity'
        }, */
        {
          title: '出库数量',
          align: 'center',
          dataIndex: 'outboundMainQuantity',
          scopedSlots: { customRender: 'outboundMainQuantity' }
        },
        // {
        //   title: '出库辅数量',
        //   align: 'center',
        //   dataIndex: 'outboundAuxiliaryQuantity',
        // },
        {
          title: '操作',
          align: 'center',
          dataIndex: 'action',
          fixed: 'right',
          width: 100,
          scopedSlots: {
            customRender: 'action'
          },
        }
      ],
      title: "操作",
      visible: false,
      disableSubmit: false,
      codeDisable: true,
      model: {},
      warehouseId: "",
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        num: {
          rules: [
            { required: true, message: '请输入入库单编号!' },
          ]
        },
        departId: {
          rules: [
            { required: true, message: '请选择部门!' },
          ]
        },
        outboundPersonId: {
          rules: [
            { required: true, message: '请选择出库人员!' },
            // { validator: this.validateEquipmentId },
          ]
        },
        warehouseId: {
          rules: [
            { required: true, message: '请选择仓库!' },
          ]
        },
      },
      url: {
        add: "/spare/sparePartOutbound/add",
        loadOptions: '/sys/sysDepart/loadDepartTreeOptions',
        getSysDeparts: "/eam/equipment/getSysDeparts",
        getNum: '/eam/sysIdentity/getNumNew',
        edit: "/spare/sparePartOutbound/edit",
      },

      dataSource: [],
    }
  },


  mounted() {
    this.$bus.$on('selectionRows', (data) => {
      for (let i = 0; i < data.length; i++) {
        this.dataSource.push({
          id: data[i].id,
          sparesPartInventoryId: data[i].id,
          sparePartId: data[i].sparePartId,
          batchNum: data[i].batchNum,
          num: data[i].num,
          name: data[i].name,
          specification: data[i].specification,
          model: data[i].model,
          mainQuantity: data[i].mainQuantity,
          mainUnitId: data[i].mainUnitId,
          mainUnitName: data[i].mainUnitName,
      /*     auxiliaryQuantity: data[i].auxiliaryQuantity, */
       /*    auxiliaryUnitId: data[i].auxiliaryUnitId,
          auxiliaryUnitName: data[i].auxiliaryUnitName, */
        /*   conversionRatio: data[i].conversionRatio, */
          constructorId: data[i].constructorId,
          constructorName: data[i].constructorName,
          supplierId: data[i].supplierId,
          manufactureDate: data[i].manufactureDate,
          warehouseName: data[i].warehouseName,
          warehouseAreaName: data[i].warehouseAreaName,
          warehouseLocationNum: data[i].warehouseLocationNum,
        })
      }
    })
  },

created() {
},
  methods: {
    getSysDeparts() {
      getAction(this.url.getSysDeparts).then((res) => {
        if (res.success) {
          this.departs = res.result
        }
      })
    },
    //选择备件库存信息
    selectSparePartInventory: function () {
      if (this.warehouseId == "" || this.warehouseId == null) {
        this.$message.warning("请选择仓库！");
        return
      }
      let ids = [];
      for (let i = 0; i < this.dataSource.length; i++) {
        ids.push(this.dataSource[i].sparesPartInventoryId);
      }
      this.$refs.sparePartInventoryModalForm.showModals(ids, this.warehouseId);
      this.$refs.sparePartInventoryModalForm.title = '选择备件库存信息';
      this.$refs.sparePartInventoryModalForm.disableSubmit = false;
    },

    add() {
      this.edit({ sparePartOutboundDetailList: [] })

    },

    edit(record) {
      let that = this;
      that.dataSource = [];
      that.form.resetFields();
      that.model = Object.assign({}, record);
      that.visible = true;
      that.initOptions()
      that.warehouseId = record.warehouseId
      if (record.sparePartOutboundDetailList != undefined) {
        const temp = [...record.sparePartOutboundDetailList];
        that.dataSource = temp;
      }
      that.$nextTick(() => {
        that.form.setFieldsValue(pick(that.model, 'num', 'departId', 'outboundPersonId', 'warehouseId'));
      });
      if (record.id) {
        this.codeDisable = true;
      } else {
        this.codeDisable = false;
        this.$nextTick(() => {
          getAction(this.url.getNum, { type: 'SparePart', length: '4' }).then((res) => {
            if (res.success) {
              this.form.setFieldsValue({ num: res.message });
            }
          })
        });
      }
    },
    initOptions() {
      getAction(this.url.loadOptions).then(res => {
        if (res.success) {
          this.treeData = res.result
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    close() {
      this.$emit('close');
      this.visible = false;
      this.warehouseId = "";
    },

    handleCancel() {
      this.close();
    },

    handleOk() {
      const that = this;
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let formData = Object.assign(this.model, values);
          formData.sparePartOutboundDetails = that.dataSource;
          if (that.dataSource.length ===0){
            that.confirmLoading = false
            that.$message.warning("请添加明细")
            return
          }
          let obj;
          if (!this.model.id) {
            obj = postAction(this.url.add, formData);
          } else {
            obj = requestPut(this.url.edit, formData, { id: this.model.id });
          }
          obj.then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
            that.close();
          })
        }
      })
    },

    handleDelete(text, record, index) {
      this.dataSource.splice(index, 1);
    },


    handleChange(value, key, column, index) {
      let that = this;
      const temp = [...that.dataSource];
      const target = temp.filter(item => key === item.key)[index];
      if (target) {
        if (column.dataIndex == 'outboundMainQuantity') {
          target[column.dataIndex] = value;
        /*   target["outboundAuxiliaryQuantity"] = value * target.conversionRatio */
        }
        //显示带过来的数据
        that.dataSource = temp;
      }
    },

    handle2Change(val) {
      this.warehouseId = val
      this.dataSource = []
    }
  },
}
</script>

<style lang="less" scoped>
/deep/ .frozenRowClass {
  color: #c9c9c9;
}
.fontweight {
  font-weight: bold;
}
.ant-btn {
  padding: 0 10px;
  margin-left: 3px;
}

.ant-form-item-control {
  line-height: 0px;
}

/** ä¸»è¡¨å•è¡Œé—´è· */
.ant-form .ant-form-item {
  margin-bottom: 10px;
}

/** Tab页面行间距 */
.ant-tabs-content .ant-form-item {
  margin-bottom: 0px;
}
</style>