kd-aiot-frontend-aps/src/views/saleOrder/components/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="'齐套性检查'"
  >
    <div class="form-wrapper">
      <div v-if="leftShow" :style="{width: leftWidth}">
        <el-tree :expand-on-click-node="false" :data="cardList" :props="treeProps" @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">
              销售单号：{{orderInfo.code}}
            </el-col>
            <el-col :span="6">
              编号：{{orderInfo.productCode}}
            </el-col>
            <el-col :span="6">
              名称：{{orderInfo.productName}}
            </el-col>
            <el-col :span="6">
              规格：{{orderInfo.specification}}
            </el-col>
            <el-col :span="6">
              型号：{{orderInfo.model}}
            </el-col>
            <el-col :span="6">
              合同数量：{{orderInfo.contractNum}}
            </el-col>
          </el-row>
        </div>
        <div>
          <ele-pro-table
            ref="table"
            :needPage="false"
            :columns="columns"
            key="checkTable"
            :init-load="false"
            :datasource="datasource"
          >
            <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 { orderHomogeneityInspect } from '@/api/saleOrder/index.js';
  import stockDetailDialog from '../../productionPlan/components/stockDetailDialog.vue';
  import currentDetailDialog from '../../productionPlan/components/currentDetailDialog.vue';
  export default {
    components: {
      stockDetailDialog,
      currentDetailDialog
    },
    data() {
      return {
        visible: false,

        bomIdList: [],
        formData: {},
        requestData: {
          deviceCode: '',
          deviceName: '',
          deviceId: ''
        },
        requiredFormingNum: 0,

        form: {
          homogeneityInspect: []
        },

        rules: {},

        columns: [
          {
            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: 'count',
            label: '定额数量',
            align: 'center',
            minWidth: 80
          },
          {
            slot: 'stockCount',
            prop: 'stockCount',
            label: '库存数量',
            align: 'center',
            minWidth: 80
          },
          {
            slot: 'stockColor',
            prop: 'stockStatus',
            label: '库存状态',
            align: 'center',
            minWidth: 80
          },
          {
            slot: 'currentCount',
            prop: 'currentCount',
            label: '在途数量',
            align: 'center',
            minWidth: 80
          },
          {
            slot: 'currentColor',
            prop: 'currentStatus',
            label: '在途状态',
            align: 'center',
            minWidth: 80
          },
          {
            slot: 'finishCount',
            prop: 'finishCount',
            label: '最终缺料数量',
            align: 'center',
            minWidth: 80
          },
          {
            slot: 'finishColor',
            prop: 'finishStatus',
            label: '最终状态',
            align: 'center',
            minWidth: 80
          },
        ],
        ids: [],
        leftShow: false,
        leftWidth: '0%',
        rightWidth: '100%',
        cardList: [],
        treeProps: {
          label: 'code',
          children: 'children',
        },
        planInfo: {
          salesCode: '',
        },
        orderInfo: {
          code: '',
          productCode: '',
          productName: '',
          contractNum: '',
          specification: '',
          model: '',
        }
      };
    },
    watch: {
      leftShow(newVal, oldVal){
        if(newVal){
          this.leftWidth = '15%';
          this.rightWidth = '85%';
        } else {
          this.leftWidth = '0%';
          this.rightWidth = '100%';
        }
      }
    },
    methods: {
        reload(where) {
          this.$nextTick(() => {
            this.$refs.table.reload({ page: 1, where });
          });
        },
        /* 表格数据源 */
        datasource({ page, limit, where }) {
          return orderHomogeneityInspect({
            pageNum: page,
            size: limit,
            ...where,
          });
        },
       stockDetail(row) {
         this.$refs.stockDetailDialog.open(row);
       },
       currentDetail(row) {
         this.$refs.currentDetailDialog.open(row);
       },
      open(data, order) {
         this.visible = true;
         this.bomIdList = [];
         if(data){
           if(data.length == 1){
             this.orderInfo = data[0];
             this.orderInfo.code = order.code;
             console.log(this.orderInfo);
             this.leftShow = false;
           } else {
             this.leftShow = true;
           }
           let list = [];
           for(let item of data){
             list.push({bomId: item.bomCategoryId, planNum: item.contractNum});
           }
           this.bomIdList = list;
           this.reload({bomIdList: this.bomIdList});
         }

      },
      cancel() {
        this.formData = {};
        this.visible = false;
      },

      confirm() {
        this.visible = false;
      },

      handleNodeClick(data){
          console.log(data);
        // this.reload({planIds: [data.id]});
      },
    }
  };
</script>

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

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