kd-aiot-frontend-wms/src/views/warehouseManagement/unlockApplication/components/unlockModal.vue

<template>
  <ele-modal
    :title="title"
    :visible.sync="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="75%"
    :maxable="true"
  >
    <el-card shadow="never">
      <el-descriptions>
          <el-descriptions-item label="创建时间">{{ formData.createTime }}</el-descriptions-item>
          <!-- <el-descriptions-item label="创建人">{{ formData.createUser }}</el-descriptions-item> -->
          <el-descriptions-item label="物品编码">{{ formData.productCode }}</el-descriptions-item>
          <el-descriptions-item label="名称">{{ formData.productName }}</el-descriptions-item>
          <el-descriptions-item label="批次号">{{ formData.batchNo }}</el-descriptions-item>
          <!-- <el-descriptions-item label="规格">{{ formData.spec }}</el-descriptions-item> -->
          <!-- <el-descriptions-item label="型号">{{ formData.model }}</el-descriptions-item> -->
          <!-- <el-descriptions-item label="牌号">{{ formData.certificateNumber }}</el-descriptions-item> -->
      </el-descriptions>
      <div style="margin-top: 12px">
        <ele-pro-table
          ref="eleTable"
          :columns="tableColumns"
          :datasource="formData.details || []"
          height="calc(100vh - 405px)"
          full-height="calc(100vh - 116px)"
          tool-class="ele-toolbar-form"
          :pageSize="20"
          @selection-change="handleSelectionChange"
          :initLoad="false"
          :needPage="false"
        >
          <template v-slot:unionQuantity="{ row }">
            <el-input
              v-model="row.unionQuantity"
              placeholder="请输入"
              :disabled="readonlyMode"
              @input="(value) => inputNum(value, row)"
            ></el-input>
          </template>
        </ele-pro-table>
      </div>
    </el-card>
    <div class="btns" v-if="title != '详情'">
      <el-button :loading="loading" type="primary" size="small" @click="handleSave(0)"
        >保存</el-button
      >
      <el-button :loading="loading" type="primary" size="small" @click="handleSave(1)"
        >提交</el-button
      >
      <el-button size="small" @click="handleClose">取消</el-button>
    </div>
  </ele-modal>
</template>
<script>
  import storageApi from '@/api/warehouseManagement';
  export default {
    props: {},
    data() {
      return {
        visible: false,
        title: '',
        formData: {},
        modalType: '',
        columns: [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center'
          },
          {
            columnKey: 'index',
            type: 'index',
            width: 50,
            align: 'center',
            label: '序号',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'quantity',
            label: '锁定数量',
            showOverflowTooltip: true,
            width: 130,
            align: 'center'
          },
          {
            prop: 'unionQuantity',
            label: '解锁数量',
            slot: 'unionQuantity',
            // sortable: 'custom',
            showOverflowTooltip: true,
            width: 130,
            align: 'center'
          },
          {
            prop: 'sourceOrderNo',
            label: '关联单据编码',
            align: 'center'
          },
          {
            prop: 'sourceType',
            label: '关联单据类型',
            align: 'center',
            formatter: (row) => {
              return this.LockOrderSourceTypeEnum[row.sourceType] || '-';
            }
          },
          {
            prop: 'orderDate',
            label: '锁定时间',
            align: 'center'
          },
        ],
        rules: {
          sourceType: [
            { required: true, message: '请选择申请类型', trigger: 'change' }
          ]
        },
        loading: false,
        selectionList: [],
        ids: [],
        detailJnVOList: [],
        tableData: [],
        businessId: '',
        LockOrderSourceTypeEnum: {
          0: '无定义',
          1: '销售发货单',
          2: '领料出库单',
          3: '调拨出库单',
          4: '销售订单'
        }
      };
    },
    computed: {
      readonlyMode() {
        return this.title === '详情';
      },
      tableColumns() {
        return this.title === '详情'
          ? this.columns.filter((c) => c.type !== 'selection')
          : this.columns;
      }
    },

    methods: {
      reload(where) {
        this.$nextTick(() => {
          if (this.$refs.eleTable && this.$refs.eleTable.reload)
            this.$refs.eleTable.reload({ page: 1, where: where });
        });
      },

      async open(type, row) {
        this.visible = true;
        this.title = '解锁';
        console.log(type, row, 'row');
        this.modalType = type;
        if(type === 'add') {
          const res = await storageApi.inboundLockPage({
            pageNum: -1,
            systemBatchNo: row.systemBatchNo
          });
          console.log(res, 'res');
          this.tableData = res.list || [];
          this.formData = {
            ...row,
            productName: row.categoryName,
            productId: row.categoryId,
            productCode: row.categoryCode,
            details: res.list || []
          };

          console.log(this.formData, 'formData');
        } else {
          await this.getDraftDetail(row.id);
        }
        
        
        // await this.reload();
      },
      async getDraftDetail(id) {
        const res = await storageApi.getUnlockDetails(id);
        if (res) {
          console.log(res, '详情');
          this.$set(this, 'formData', res);
          this.businessId = res.id;
         this.formData = {
          ...res
         }
         this.selectionList = res.details || [];
        }
      },
      inputNum(value, row) {
        const num = value.replace(/[^\d.]/g, '');
        const oldValue = row.quantity;

        if (num > oldValue) {
          this.$set(row, 'unionQuantity', oldValue);
        } else {
          this.$set(row, 'unionQuantity', num);
        }
      },
      handleSelectionChange(selection) {
        console.log(selection, '勾选');
        // if (this.title === '新增' && selection.length > 1) {
        //   const last = selection[selection.length - 1];
        //   this.selectionList = [last];
        //   this.$nextTick(() => {
        //     if (this.$refs.eleTable && this.$refs.eleTable.setSelectedRowKeys) {
        //       this.$refs.eleTable.setSelectedRowKeys([last.outInDetailId]);
        //     }
        //   });
        //   return;
        // }
        this.selectionList = selection;
      },
      handleClose() {
        this.visible = false;
      },
      handleSave(status) {
        if (this.selectionList.length == 0)
          return this.$message.warning('请选择解锁数据');

        let isValid = true;
        this.selectionList.forEach((item) => {
          if (!item.unionQuantity) {
            isValid = false;
          }
        });
        if (!isValid) {
          this.$message.error('请填写解锁数量');
          return;
        }

        let postData = {
          ...this.formData,
          // productName: this.formData.categoryName,
          // productId: this.formData.categoryId,
          // productCode: this.formData.categoryCode,
          details: this.selectionList
        };
        this.loading = true;
        const api = this.modalType === 'add' ? storageApi.saveUnlock : storageApi.updateUnlock;
        api(postData)
          .then(async (res) => {
            console.log(res, 'res');
            // if (res == 0) {
              try {
                if(status == 1) {

                  storageApi.submitUnlock({ businessId: this.modalType === 'add' ? res : this.businessId })
                  this.$message.success('提交成功');
                  this.loading = false;
                  this.visible = false;
                  this.$emit('success');
                } else {
                  this.$message.success('保存成功');
                  this.loading = false;
                  this.visible = false;
                  this.$emit('success');
                }
              } catch (error) {
                // this.visible = false;
                console.log('失败', error);
              }
            // }
          })
          .catch((err) => {
            console.log('申请失败', err);
            this.loading = false;
            this.visible = false;
          });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .btns {
    text-align: center;
    padding: 10px 0;
  }

  .el-form-item__error {
    color: red;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
    position: relative;
  }

  .is-error .el-input__inner {
    border-color: red;
  }
</style>