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 class="form-wrapper" v-loading="loading">
        <div 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 v-if="!leftShow" class="planInfo">
            <el-row style="width: 100%">
              <!-- <el-col
                :span="planInfo.salesCode ? 6 : planInfo.salesCode.length * 6"
              >
                <div style="color: blue; display: flex">
                  <div>销售单号：</div
                  ><div v-if="planInfo.salesCode"
                    ><span v-for="item in planInfo.salesCode"
                      >　{{ item }}</span
                    ></div
                  >
                </div>
              </el-col> -->
              
              <!-- <el-col :span="6"> 批次号：{{ planInfo.batchNo }} </el-col> -->
              <el-col :span="6"> 名称：{{ planInfo.productName }} </el-col>
              <el-col :span="5"> 规格：{{ planInfo.specification }} </el-col>
              <el-col :span="5"> 型号：{{ planInfo.model }} </el-col>
              <el-col :span="2"> 牌号：{{ planInfo.brandNo }} </el-col>
              <el-col :span="4"> 计划编号：{{ planInfo.code }} </el-col>
              <el-col :span="2"> 计划数量：{{ planInfo.productNum }} </el-col>
            </el-row>
            <el-row> </el-row>
          </div>
          <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:stockCount="{ row }">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="stockDetail(row)"
                >
                  {{ row.stockCount }}
                </el-link>
              </template>
              <template v-slot:currentCount="{ row }">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="currentDetail(row)"
                >
                  {{ row.currentCount }}
                </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 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: 'demandQuantity',
            label: '定额数量',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            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% - 230px)';
        } 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(row);
      },
      currentDetail(row) {
        this.$refs.currentDetailDialog.open(row);
      },
      // 选择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.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;
  }
</style>