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">
        <div v-if="leftShow" :style="{ width: leftWidth }">
          <el-tree
            :expand-on-click-node="false"
            :data="cardList"
            :props="treeProps"
            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.code }} </el-col>
              <el-col :span="6"> 批次号：{{ planInfo.batchNo }} </el-col>
              <el-col :span="6"> 名称：{{ planInfo.productName }} </el-col>
              <el-col :span="6"> 规格：{{ planInfo.specification }} </el-col>
              <el-col :span="6"> 型号：{{ planInfo.model }} </el-col>
              <el-col :span="6"> 计划数量：{{ planInfo.productNum }} </el-col>
            </el-row>
            <el-row>
              <el-form
                :inline="true"
                :model="formInline"
                class="demo-form-inline"
              >
                <el-form-item label="审批人">
                  <el-select
                    size="mini"
                    v-model="formInline.region"
                    placeholder="BOM类型"
                  >
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="活动区域">
                  <el-select
                    size="mini"
                    v-model="formInline.region"
                    placeholder="BOM版本"
                  >
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-row>
          </div>
          <div>
            <ele-pro-table
              ref="table"
              :needPage="false"
              :columns="columns"
              key="checkTable"
              :init-load="false"
              :datasource="datasourceList"
            >
              <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:stockColor="{ row }">
                <div :class="{ statusRed: row.stockStatus == '缺料' }">
                  {{ row.stockStatus }}
                </div>
              </template>
              <template v-slot:currentColor="{ row }">
                <div :class="{ statusRed: row.currentStatus == '缺料' }">
                  {{ row.currentStatus }}
                </div>
              </template>
              <template v-slot:finishColor="{ row }">
                <div :class="{ statusRed: row.finishStatus == '缺料' }">
                  {{ row.finishStatus }}
                </div>
              </template>
              <template v-slot:finishCount="{ row }">
                <div>
                  <div v-if="row.finishCount > 0">{{ row.finishCount }}</div>
                  <div v-else>-</div>
                </div>
              </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" />
  </div>
</template>

<script>
  import {
    homogeneityInspect,
    homogeneityInspectMerge,
    findMaterialInfoByPlanId,
    findBomCategoryByCategoryId
  } from '@/api/productionPlan/index.js';
  import stockDetailDialog from './stockDetailDialog.vue';
  import currentDetailDialog from './currentDetailDialog.vue';
  export default {
    components: {
      stockDetailDialog,
      currentDetailDialog
    },
    data() {
      return {
        visible: false,

        formData: {},
        requestData: {
          deviceCode: '',
          deviceName: '',
          deviceId: ''
        },
        requiredFormingNum: 0,
        formInline: {},
        // form: {
        //   homogeneityInspect: []
        // },

        rules: {},

        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          },
          // {
          //   prop: 'productCode',
          //   label: '计划编号',
          //   align: 'center',
          //   minWidth: 100,
          //   showOverflowTooltip: true
          // },
          // {
          //   prop: 'opCode',
          //   label: '工序编码',
          //   align: 'center',
          //   minWidth: 100,
          //   showOverflowTooltip: true
          // },
          // {
          //   prop: 'opName',
          //   label: '工序名称',
          //   align: 'center',
          //   minWidth: 100
          // },
          // {
          //   prop: 'bomCode',
          //   label: '物料编码',
          //   align: 'center',
          //   minWidth: 100,
          //   showOverflowTooltip: true
          // },
          // {
          //   prop: 'bomName',
          //   label: '物料名称',
          //   align: 'center',
          //   minWidth: 100
          // },
          {
            prop: 'demandQuantity',
            label: '定额数量',
            align: 'center',
            minWidth: 80
          },
          // {
          //   slot: 'stockCount',
          //   prop: 'stockCount',
          //   label: '库存数量',
          //   align: 'center',
          //   minWidth: 80
          // },
          {
            slot: 'stockColor',
            prop: 'stockStatus',
            label: '库存状态',
            align: 'center',
            minWidth: 80
          },
          {
            slot: 'inTransitNum',
            prop: 'inTransitNum',
            label: '在途数量',
            align: 'center',
            minWidth: 80
          },
          // {
          //   slot: 'currentColor',
          //   prop: 'currentStatus',
          //   label: '在途状态',
          //   align: 'center',
          //   minWidth: 80
          // },
          {
            label: '最终缺料数量',
            align: 'center',
            minWidth: 80,
            formatter: (row) => {
              let total =
                row.demandQuantity - row.inTransitNum - row.inventoryQuantity;
              if (total < 0) {
                return 0;
              }
              return total;
            }
          },
          {
            slot: 'finishColor',
            prop: 'finishStatus',
            label: '最终状态',
            align: 'center',
            minWidth: 80
          }
        ],
        ids: [],
        leftShow: false,
        leftWidth: '0%',
        rightWidth: '100%',
        cardList: [],
        treeProps: {
          label: 'code',
          children: 'children'
        },
        planInfo: {
          salesCode: ''
        },
        datasourceList: []
      };
    },
    watch: {
      leftShow(newVal, oldVal) {
        if (newVal) {
          this.leftWidth = '15%';
          this.rightWidth = '85%';
        } else {
          this.leftWidth = '0%';
          this.rightWidth = '100%';
        }
      }
    },
    mounted() {},
    methods: {
      handleNodeClick(data) {
        this.reload({ planIds: [data.id] });
      },
      reload(where) {
        this.$nextTick(() => {
          this.$refs.table.reload({ page: 1, where });
        });
      },
      /* 表格数据源 */
      // 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);
      },
      async open(dataList) {
        this.visible = true;
        try {
          let data = dataList[0];
          const res = await findBomCategoryByCategoryId(data.categoryId);
          let obj = {};
          res.map((el) => {
            let OBMINFO = {
              bomId: el.bomId,
              bomType: el.type,
              versions: `V${el.versions}.0`
            };
            if (obj[el.bomType]) {
              obj[el.bomType].bomList.push(OBMINFO);
            } else {
              obj[el.bomType] = { ...el, bomList: [OBMINFO] };
            }
          });
          console.log(obj,'obj ++++++++++')
          console.log(res, '版本 类型');
          let params = {
            planId: data.id
          };
          const result = await findMaterialInfoByPlanId(params);
          console.log(result, 'result +++++');
          this.datasourceList = result;
        } catch (err) {
          this.$message.error(err.message);
        }
        return;
        this.cardList = dataList || [];
        for (let item of this.cardList) {
          let children = [];
          if (item.salesCode) {
            for (let ele of item.salesCode) {
              children.push({ code: ele, id: item.id });
            }
          }
          item.children = children;
        }
        this.planInfo = dataList.length > 0 ? dataList[0] : null;
        console.log(this.planInfo);
        if (dataList.length > 1) {
          this.leftShow = true;
        } else {
          this.leftShow = false;
        }
        if (this.planInfo) {
          this.reload({ planIds: [this.planInfo.id] });
        }
      },
      cancel() {
        this.formData = {};
        this.visible = 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;
  }
  .planInfo {
  }
  .form-wrapper {
    display: flex;
  }
  .planInfo {
    // display: flex;
    font-size: 16px;
  }
</style>