kd-aiot-frontend-aps/src/views/productionPlan/components/homogeneityInspectDialog.vue

<template>
  <div>
    <ele-modal
      width="90vw"
      :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="planInfo" class="plan_form">
          <el-row :gutter="20" type="flex" style="flex-wrap: wrap">
            <el-col :span="8">
              <el-form-item label="名称:">
                <el-input readonly v-model="planInfo.productName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="计划编号:">
                <el-input readonly v-model="planInfo.code"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="规格:">
                <el-input readonly v-model="planInfo.specification"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="型号:">
                <el-input readonly v-model="planInfo.model"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="牌号:">
                <el-input readonly v-model="planInfo.brandNo"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="计划数量:">
                <el-input readonly v-model="planInfo.productNum"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="form-wrapper">
          <div class="left_tree" v-show="leftShow" :style="{ width: leftWidth }">
            <el-tree
              ref="treeRef"
              :expand-on-click-node="false"
              :data="cardList"
              :props="treeProps"
              node-key="id"
              highlight-current
              @node-click="handleNodeClick"
            ></el-tree>
          </div>
          <div :style="{ width: rightWidth }">
            <div>
              <ele-pro-table
                ref="table"
                :needPage="false"
                :columns="columns"
                key="checkTable"
                :init-load="false"
                :datasource="datasourceList"
              >
                <template v-slot:toolbar>
                  <!-- <el-button type="primary" @click="bulkPurchase" size="mini"
                  >采购申请</el-button
                > -->
                </template>
                <template v-slot:toolkit>
                  <el-form
                    :inline="true"
                    :model="formInline"
                    class="demo-form-inline"
                  >
                    <el-form-item label="BOM类型">
                      <el-select
                        size="mini"
                        v-model="formInline.bomType"
                        placeholder="BOM类型"
                        class="select-type"
                        @change="bomTypeChange"
                      >
                        <el-option
                          v-for="item in bomListType"
                          :key="item.id"
                          :label="item.bomName"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="BOM版本">
                      <el-select
                        class="select-type"
                        size="mini"
                        v-model="formInline.bomId"
                        placeholder="BOM版本"
                        @change="bomVChange"
                      >
                        <el-option
                          v-for="item in bomListV"
                          :key="item.bomId"
                          :label="item.versions"
                          :value="item.bomId"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="最终状态">
                      <el-select
                        class="select-type"
                        size="mini"
                        v-model="formInline.finalState"
                        placeholder="最终状态"
                        @change="finalChange"
                      >
                        <el-option
                          v-for="item in finalStateList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </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>
                <template v-slot:finishCount="{ row }">
                  <div>
                    <div v-if="row.finishCount > 0">{{ row.finishCount }}</div>
                    <div v-else>-</div>
                  </div>
                </template>
                <!-- <template v-slot:action="{ row }">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="purchase(row)"
                >
                  采购申请
                </el-link>
              </template> -->
              </ele-pro-table>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <el-button plain @click="cancel">取消</el-button>
        <!-- <el-button type="primary" @click="confirm">确定</el-button> -->
      </div>
    </ele-modal>

    <stockDetailDialog ref="stockDetailDialog" />
    <currentDetailDialog ref="currentDetailDialog" />
    <producePlan ref="produceRef" @success="reloads"></producePlan>
    <purchaseDialog ref="purchaseDialogRef" />
  </div>
</template>

<script>
  import {
    homogeneityInspect,
    homogeneityInspectMerge,
    findMaterialInfoByPlanId,
    findBomCategoryByCategoryId,
    getBom
  } from '@/api/productionPlan/index.js';
  import { listBomByPlanIdsOverride } from '@/api/materialPlan/index';
  import stockDetailDialog from './stockDetailDialog.vue';
  import currentDetailDialog from './currentDetailDialog.vue';
  import producePlan from '@/views/materialPlan/components/producePlan.vue';
  import purchaseDialog from './purchaseDialog.vue';
  export default {
    components: {
      stockDetailDialog,
      currentDetailDialog,
      producePlan,
      purchaseDialog
    },
    data() {
      return {
        visible: false,
        requiredFormingNum: 0,
        formInline: {
          finalState: 0
        },
        finalStateList: [
          {
            label: '全部',
            value: 0
          },
          {
            label: '齐套',
            value: 1
          },
          {
            label: '缺料',
            value: 2
          }
        ],
        // form: {
        //   homogeneityInspect: []
        // },
        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            fixed: 'left'
          },
          // {
          //   width: 45,
          //   type: 'selection',
          //   columnKey: 'selection',
          //   align: 'center',
          //   slot: 'selection',
          //   fixed: 'left'
          // },
          {
            prop: 'batchNo',
            label: '批次号',
            align: 'center',
            minWidth: 100,
            showOverflowTooltip: true
          },
          {
            prop: 'salesCode',
            label: '销售订单号',
            align: 'center',
            minWidth: 100,
            showOverflowTooltip: true
          },
          {
            prop: 'code',
            label: '物料编码',
            align: 'center',
            minWidth: 100,
            showOverflowTooltip: true
          },
          {
            prop: 'name',
            label: '物料名称',
            align: 'center',
            minWidth: 100,
            showOverflowTooltip: true
          },
          {
            prop: 'dosage',
            label: '定额数量',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            slot: 'inventoryQuantity',
            prop: '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
          },
          {
            slot: 'finalStateText',
            prop: 'finalStateText',
            label: '最终状态',
            align: 'center',
            minWidth: 80
          }
          // {
          //   columnKey: 'action',
          //   label: '操作',
          //   width: 120,
          //   align: 'center',
          //   resizable: false,
          //   fixed: 'right',
          //   slot: 'action'
          // }
        ],
        ids: [],
        leftShow: false,
        leftWidth: '0%',
        rightWidth: '100%',
        cardList: [],
        treeProps: {
          label: 'code',
          children: 'children'
        },
        planInfo: {
          salesCode: ''
        },
        datasourceAllList: [], // 表格物料全部数据
        datasourceList: [], // 表格物料数据
        bomListV: [], // BOM版本
        bomListType: [], // BOM 类型
        planId: '',
        selectNodeId: '',
        loading: false
      };
    },
    watch: {
      leftShow(newVal, oldVal) {
        if (newVal) {
          this.leftWidth = '230px';
          this.rightWidth = 'calc(100% - 240px)';
        } else {
          this.leftWidth = '0';
          this.rightWidth = '100%';
        }
      }
    },
    mounted() {},
    methods: {
      handleNodeClick(data) {
        this.clearData();
        this.getBomData(data);
        this.selectNodeId = data.id;
        this.planInfo = data;
      },
      reload(where) {
        this.$nextTick(() => {
          this.$refs.table.reload({ page: 1, where });
        });
      },
      reloads() {},
      /* 表格数据源 */
      // datasource({ page, limit, where }) {
      //   return homogeneityInspect({
      //     pageNum: page,
      //     size: limit,
      //     ...where
      //   });
      // },
      stockDetail(row) {
        this.$refs.stockDetailDialog.open({ bomCode: row.code });
      },
      currentDetail(row) {
        this.$refs.currentDetailDialog.open({ bomCode: row.code });
      },
      // 选择BOM类型
      async bomTypeChange(e) {
        this.formInline.bomType = e;
        let data = this.bomListType.find((el) => el.id === e);
        if (!data) return;
        this.bomListV = data.bomList;
        await this.bomVChange(data.bomList[0].bomId);
      },
      // 选择BOM版本
      async bomVChange(e) {
        this.formInline.bomId = e;
        let data = this.bomListV.find((el) => el.bomId === e);
        if (!data) return;
        await this.getMaterialData(data);
      },
      // 获取物料数据信息
      async getMaterialData(data) {
        let params = { planId: this.planId, bomVersionId: data.bomId };
        const result = await findMaterialInfoByPlanId(params);
        result.map((item) => {
          item.batchNo = this.planInfo.batchNo;
          item.salesCode = this.planInfo.salesCode;
          item.finalState =
            item.finalStateText == '齐套'
              ? 1
              : item.finalStateText == '缺料'
              ? 2
              : '';
        });
        this.datasourceAllList = result;
        this.finalChange(0);
      },
      // 选择状态
      finalChange(e) {
        if (e === 0 || !e) {
          this.datasourceList = this.datasourceAllList;
          return;
        }
        this.datasourceList = this.datasourceAllList.filter(
          (item) => item.finalState === e
        );
      },
      // 批量采购
      async bulkPurchase(list) {
        if (list.length == 0) {
          return this.$message.warning('请至少选择一条数据');
        }
        // let planIds = list.map((item) => item.id);
        // let data = {
        //   planIds: ['1948548495278911490', '1948548022580850689'],
        //   demandType: '1'
        // };
        // this.$refs.produceRef.visible = true;
        const o = this.cardList.find((el) => el.id === this.selectNodeId);
        let obj = JSON.parse(JSON.stringify(o));
        obj.materialList = list;
        this.$nextTick(() => {
          this.$refs.purchaseDialogRef.open([obj], '生产计划');
        });
        // const result = await listBomByPlanIdsOverride(data);
      },
      // 采购申请
      purchase(row) {
        this.bulkPurchase([row]);
      },
      async open(dataList) {
        this.visible = true;
        this.cardList = dataList;
        if (dataList.length === 1) {
          this.leftShow = false;
        } else {
          this.leftShow = true;
          const firstNodeKey = dataList[0].id;
          this.$nextTick(() => {
            this.$refs.treeRef.setCurrentKey(firstNodeKey);
          });
        }
        this.handleNodeClick(dataList[0]);
      },
      cancel() {
        this.clearData();
        this.visible = false;
      },
      clearData() {
        this.formInline = {
          finalState: 0
        };
        this.bomListV = [];
        this.bomListType = [];
        this.datasourceList = [];
        this.datasourceAllList = [];
      },
      // 获取bom 数据
      async getBomData(data) {
        this.loading = true;
        try {
          this.planId = data.id;
          const res = await findBomCategoryByCategoryId(data.categoryId);
          if (!res || res.length == 0) {
            this.loading = false;
            this.bomListD = [];
            this.datasourceList = [];
            return;
          }
          let obj = {};
          let bomMap = {
            1: 'PBOM',
            2: 'MBOM',
            3: 'ABOM',
            4: 'EBOM'
          };
          res.map((el) => {
            el.bomName = bomMap[el.bomType];
            let OBMINFO = {
              bomId: el.bomId,
              bomType: el.type,
              versions: `V${el.versions}.0`
            };
            if (obj[el.bomType]) {
              obj[el.bomType].bomList.unshift(OBMINFO);
            } else {
              obj[el.bomType] = { ...el, bomList: [OBMINFO] };
            }
          });
          let list = Object.values(obj);
          this.bomListType = list;
          await this.bomTypeChange(list[0].id);
          this.loading = false;
        } catch (err) {
          this.$message.error(err.message);
          this.loading = false;
        }
      },

      confirm() {
        this.visible = false;
      },
      async merge() {
        this.reload({ planIds: this.ids, productType: 1, merge: 2 });
      },
      tabClick() {
        this.reload({ planIds: this.ids, productType: 1 });
      }
    }
  };
</script>

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

  .el-form-item {
    margin-bottom: 0 !important;
  }
  .optionButton {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 3px;
  }
  .statusRed {
    color: red;
  }

  .statusGreen {
    color: green;
  }
  .planInfo {
  }
  .form-wrapper {
    display: flex;
  }
  .planInfo {
    // display: flex;
    font-size: 16px;
  }
  .plan_form {
    .el-col {
      margin-bottom: 16px;
    }
  }

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