kd-aiot-frontend-eom/src/BIZComponents/homogeneityInspect/orderHomogeneityInspectDialog.vue

<template>
  <div>
    <ele-modal
      width="80vw"
      :visible.sync="visible"
      :close-on-click-modal="false"
      row-key="code"
      custom-class="ele-dialog-form"
      :title="'齐套性检查'"
      :maxable="true"
    >
      <div v-loading="loading">
        <el-form label-width="80px" :model="form" class="order_form">
          <el-row :gutter="20" type="flex" style="flex-wrap: wrap">
            <el-col :span="8">
              <el-form-item label="单据编码:">
                <el-input readonly v-model="form.planCode"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div>
          <ele-pro-table
            ref="table"
            :needPage="false"
            :columns="columns"
            key="checkTable"
            :init-load="false"
            :selection.sync="selection"
            :datasource="datasourceList"
          >
            <template v-slot:toolbar>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-plus"
                class="ele-btn-icon"
                @click="issuePurchaseOrder"
                v-if="form.status == 2"
              >
                下发采购订单
              </el-button>
            </template>
            <template v-slot:inventoryQuantity="{ row }">
              <el-link
                type="primary"
                :underline="false"
                @click="stockDetail(row)"
              >
                {{ row.inventoryQuantity }}
              </el-link>
            </template>
            <template v-slot:inTransitNum="{ row }">
              <el-link
                type="primary"
                :underline="false"
                @click="currentDetail(row)"
              >
                {{ row.inTransitNum }}
              </el-link>
            </template>
            <template v-slot:inventoryStatusText="{ row }">
              <div
                :class="
                  row.inventoryStatusText == '缺料'
                    ? 'statusRed'
                    : 'statusGreen'
                "
              >
                {{ row.inventoryStatusText }}
              </div>
            </template>
            <template v-slot:inTransitStatusText="{ row }">
              <div
                :class="
                  row.inTransitStatusText == '缺料'
                    ? 'statusRed'
                    : 'statusGreen'
                "
              >
                {{ row.inTransitStatusText }}
              </div>
            </template>
            <template v-slot:finalStateText="{ row }">
              <div
                :class="
                  row.finalStateText == '缺料' ? 'statusRed' : 'statusGreen'
                "
              >
                {{ row.finalStateText }}
              </div>
            </template>
          </ele-pro-table>
        </div>
      </div>
      <div slot="footer">
        <el-button plain @click="cancel">取消</el-button>
      </div>
    </ele-modal>

    <stockDetailDialog ref="stockDetailDialog" />

    <currentDetailDialog ref="currentDetailDialog" />
  </div>
</template>

<script>
  import {
    getMaterialInfo,
    issuePurchaseOrder
  } from '@/api/purchasingManage/purchasePlanManage';
  import stockDetailDialog from './stockDetailDialog.vue';
  import currentDetailDialog from './currentDetailDialog.vue';

  export default {
    components: {
      stockDetailDialog,
      currentDetailDialog
    },
    data() {
      return {
        visible: false,

        loading: false,
        datasourceList: [], // 表格物料数据
        form: {},
        selection: [],
        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            fixed: 'left'
          },
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            slot: 'selection',
            fixed: 'left',
            selectable: (row, index) => {
              return !row.hasIssued;
            }
          },
          {
            prop: 'supplierName',
            label: '供应商名称',
            align: 'center',
            minWidth: 100,
            showOverflowTooltip: true
          },

          {
            prop: 'productCode',
            label: '物料编码',
            align: 'center',
            minWidth: 100,
            showOverflowTooltip: true
          },
          {
            prop: 'productName',
            label: '物料名称',
            align: 'center',
            minWidth: 100,
            showOverflowTooltip: true
          },
          {
            prop: 'totalCount',
            label: '需求数量',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            prop: 'inventoryQuantity',
            slot: 'inventoryQuantity',
            label: '库存数量',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            prop: 'secureInventory',
            label: '安全库存',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            prop: 'lockQuantity',
            label: '锁库数量',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            slot: 'inventoryStatusText',
            prop: 'inventoryStatusText',
            label: '库存状态',
            align: 'center',
            minWidth: 80
          },
          {
            slot: 'inTransitNum',
            prop: 'inTransitNum',
            label: '在途数量',
            align: 'center',
            minWidth: 80
          },
          {
            prop: 'inTransitOrdersNum',
            label: '在途已关联数量	',
            align: 'center',
            minWidth: 120
          },
          {
            slot: 'inTransitStatusText',
            prop: 'inTransitStatusText',
            label: '在途状态',
            align: 'center',
            minWidth: 80
          },
          {
            label: '最终可用数量',
            prop: 'finalAvailableQuantity',
            align: 'center',
            minWidth: 110
          },
          {
            label: '最终缺料数量',
            prop: 'finalShortageQuantity',
            align: 'center',
            minWidth: 120
          },

          {
            prop: 'hasIssued',
            label: '下发状态',
            align: 'center',
            minWidth: 80,
            formatter: (row) => {
              return row.hasIssued ? '已下发' : '未下发';
            }
          },
          {
            slot: 'finalStateText',
            prop: 'finalStateText',
            label: '最终状态',
            align: 'center',
            minWidth: 80
          }
          // {
          //   columnKey: 'action',
          //   label: '操作',
          //   width: 120,
          //   align: 'center',
          //   resizable: false,
          //   fixed: 'right',
          //   slot: 'action'
          // }
        ]
      };
    },

    methods: {
      // 定额数量
      stockDetail(row) {
        this.$refs.stockDetailDialog.open({ bomCode: row.productCode });
      },
      // 在途
      currentDetail(row) {
        this.$refs.currentDetailDialog.open({ bomCode: row.productCode });
      },
      async issuePurchaseOrder() {
        if (!this.selection.length) {
          return this.$message.warning('请选择一条数据！');
        }
        let productData = [];
        this.selection.forEach((item) => {
          if (!item.supplierName) {
            productData.push(item.productName);
          }
        });
        if (productData.length) {
          this.$confirm(
            `物料${productData.join(',')}没有维护供应商，${
              productData.length > 1 ? '会合并下发为一个采购订单，' : ''
            }是否继续下发！`,
            {
              confirmButtonText: '是',
              cancelButtonText: '否'
            }
          ).then(() => {
            this.issuePurchaseOrderFn();
          });
        } else {
          this.issuePurchaseOrderFn();
        }
      },
      issuePurchaseOrderFn() {
        issuePurchaseOrder({
          planId: this.form.id,
          detailList: this.selection.map((item) => {
            return {
              detailId: item.detailId,
              finalShortageQuantity: item.finalShortageQuantity
            };
          })
        })
          .then((res) => {
            if (res) {
              this.$message.success('下发成功');
              this.visible = false;
              this.$emit('reload');
            }
          })
          .catch(() => {});
      },

      open(data) {
        this.visible = true;
        this.$set(this, 'form', data);
        this.getMaterialData();
      },
      cancel() {
        this.clearData();
        this.visible = false;
      },

      // 获取物料数据信息
      async getMaterialData() {
        const result = await getMaterialInfo({
          planId: this.form.id
        });
        // result.map((item) => {
        //   item.batchNo = this.dataObj.batchNo;
        //   item.productCode = this.dataObj.productCode;
        //   item.finalState =
        //     item.finalStateText == '齐套'
        //       ? 1
        //       : item.finalStateText == '缺料'
        //       ? 2
        //       : '';
        // });
        this.datasourceList = result;
      },

      clearData() {
        this.datasourceList = [];
        this.form = {};
        this.selection = [];
      }
    }
  };
</script>

<style lang="scss" scoped>
  .mt20 {
    margin-top: 20px;
  }

  .el-form-item {
    margin-bottom: 0 !important;
  }
  .planInfo {
    display: flex;
    font-size: 16px;
  }

  .form-wrapper {
    display: flex;
  }

  .order_form {
    .el-col {
      margin-bottom: 16px;
    }
  }

  .statusRed {
    color: red;
  }

  .statusGreen {
    color: green;
  }

  .left_tree {
    width: 250px;
    max-height: 600px;
    min-height: 300px;
    overflow: auto;
    border: 1px solid #ccc;
    margin-right: 10px;
  }
</style>