kd-aiot-frontend-aps/src/views/saleOrder/components/orderHomogeneityInspectInstallDialog.vue

<template>
  <div>
    <el-drawer
      title="齐套性检查"
      :visible.sync="visible"
      direction="rtl"
      :append-to-body="true"
      size="100%"
    >
      <div class="form-wrapper">
        <div style="width: 20%">
          <el-card class="box-card">
            <div class="ele-border-lighter sys-organization-list">
              <el-radio-group
                size="small"
                v-model="currentNodeData.bomType"
                @change="bomChange"
              >
                <el-radio-button :label="1">PBOM </el-radio-button>
                <el-radio-button :label="3">ABOM </el-radio-button>
              </el-radio-group>

              <el-tree
                class="treeData"
                :data="treeList"
                :expand-on-click-node="false"
                :props="defaultProps"
                ref="treeRef"
                :default-expanded-keys="
                  current && current.id ? [current.id] : []
                "
                :highlight-current="true"
                node-key="id"
                @node-click="handleNodeClick"
              >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  {{ node.label }} / {{ data.code }}
                </span>
              </el-tree>
            </div>
          </el-card>
        </div>
        <div style="width: 80%">
          <el-card class="box-card">
            <ele-pro-table
              ref="table"
              :needPage="false"
              :columns="columns"
              :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>
          </el-card>
        </div>
      </div>
      <div slot="footer">
        <el-button plain @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </div>
    </el-drawer>

    <stockDetailDialog ref="stockDetailDialog" />

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

<script>
import {
  pbomHomogeneityInspect,
  getOrderBomRoot, orderPbomHomogeneityInspect
} from '@/api/productionPlan/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,

        isFullscreen: true,
        formData: {},
        requestData: {
          deviceCode: '',
          deviceName: '',
          deviceId: ''
        },
        requiredFormingNum: 0,

        // form: {
        //   homogeneityInspect: []
        // },

        rules: {},

        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            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: '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: true,
        leftWidth: '0%',
        rightWidth: '100%',

        versList: [],
        searchObj: {
          versions: '',
          categoryId: '',
          isProduct: false,
          isTemp: 0
        },
        current: {},
        currentNodeData: {
          bomType: 1,
          children: []
        },

        treeId: '',
        treeList: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        orderIds: [],
      };
    },
    watch: {
      leftShow(newVal, oldVal) {
        if (newVal) {
          this.leftWidth = '30%';
          this.rightWidth = '70%';
        }
      }
    },
    mounted() {},
    methods: {
      reload(where) {
        this.$nextTick(() => {
          this.$refs.table.reload({ page: 1, where });
        });
      },
      /* 表格数据源 */
      datasource({ page, limit, where }) {
        return orderPbomHomogeneityInspect({
          pageNum: page,
          size: limit,
          ...where
        });
      },

      stockDetail(row) {
        this.$refs.stockDetailDialog.open(row);
      },
      currentDetail(row) {
        this.$refs.currentDetailDialog.open(row);
      },
      async open(data) {
        console.log(data);
        this.visible = true;
        this.orderIds = [];
        this.orderIds = data;
        this.treeList = [];
        this.treeList = await getOrderBomRoot({orderIds: this.orderIds, bomType: this.currentNodeData.bomType});
        if(this.treeList && this.treeList.length > 0){
          let bomIds = [];
          this.getTreeIds(this.treeList[0], bomIds)
          this.reload({bomIds: bomIds, orderId: this.treeList[0].orderId});
        }

      },
      handleClose() {
        this.searchObj = {
          versions: '',
          categoryId: '',
          isProduct: false,
          isTemp: 0
        };
        this.activeName = '属性';
        this.drawer = false;
      },

      handleFull() {
        this.isFullscreen = !this.isFullscreen;
        this.$forceUpdate();
      },
      async bomChange(e) {
        console.log(e, 'e');
        this.searchObj.versions = '';
        this.currentNodeData.bomType = e;
        this.treeList = [];
        this.treeList = await getOrderBomRoot({orderIds: this.orderIds, bomType: this.currentNodeData.bomType});
        if(this.treeList && this.treeList.length > 0){
          let bomIds = [];
          this.getTreeIds(this.treeList[0], bomIds)
          this.reload({bomIds: bomIds, orderId: this.treeList[0].orderId});
        }
      },
      handleNodeClick(data) {
        this.treeId = data.id;
        let bomIds = [];
        this.getTreeIds(data, bomIds);
        this.reload({bomIds: bomIds, orderId: data.orderId})
      },
      cancel() {
        this.formData = {};
        this.visible = false;
      },

      confirm() {
        this.visible = false;
      },
      getTreeIds(tree, list){
        if(tree){
          if(tree.id){
            list.push(tree.id);
          }
          if(tree.children && tree.children.length > 0){
            for(let item of tree.children){
              this.getTreeIds(item, list);
            }
          }
        }
      }
    }
  };
</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;
  }
  .form-wrapper {
    display: flex;
  }
  /* 自定义全屏样式 */
  ::v-deep .is-fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important; /* 隐藏滚动条 */
  }
  ::v-deep .not-fullscreen {
    width: calc(100vw - 260px) !important;
    height: 100vh !important;
    overflow: hidden !important; /* 隐藏滚动条 */
  }

  .custom-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 15px;
    background-color: #f5f7fa; /* 自定义背景色 */
    border-bottom: 1px solid #ebeef5; /* 自定义边框，与抽屉内容分隔 */
  }

  .drawer_content {
    margin: 10px 20px;
    box-sizing: border-box;
  }
  .sys-organization-list {
    height: calc(100vh - 100px);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    overflow: auto;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .treeData {
      height: 0 1 auto;
      overflow-y: auto;
      height: calc(100vh - 125px);
    }
  }

  .tab-box {
    margin-top: 12px;
  }
</style>