|
|
@@ -0,0 +1,423 @@
|
|
|
+<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,
|
|
|
+ getBomRoot
|
|
|
+ } from '@/api/productionPlan/index.js';
|
|
|
+ import stockDetailDialog from './stockDetailDialog.vue';
|
|
|
+ import currentDetailDialog from './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: '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: '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'
|
|
|
+ },
|
|
|
+ planIds: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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 pbomHomogeneityInspect({
|
|
|
+ pageNum: page,
|
|
|
+ size: limit,
|
|
|
+ ...where
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ stockDetail(row) {
|
|
|
+ this.$refs.stockDetailDialog.open(row);
|
|
|
+ },
|
|
|
+ currentDetail(row) {
|
|
|
+ this.$refs.currentDetailDialog.open(row);
|
|
|
+ },
|
|
|
+ async open(data) {
|
|
|
+ this.visible = true;
|
|
|
+ data.map(ele => {
|
|
|
+ this.planIds.push(ele.id);
|
|
|
+ });
|
|
|
+ this.treeList = [];
|
|
|
+ this.treeList = await getBomRoot({planIds: this.planIds, bomType: this.currentNodeData.bomType});
|
|
|
+ if(this.treeList && this.treeList.length > 0){
|
|
|
+ let bomIds = [];
|
|
|
+ this.getTreeIds(this.treeList[0], bomIds)
|
|
|
+ this.reload({bomIds: bomIds, planId: this.treeList[0].planId});
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ 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 getBomRoot({planIds: this.planIds, bomType: this.currentNodeData.bomType});
|
|
|
+ if(this.treeList && this.treeList.length > 0){
|
|
|
+ let bomIds = [];
|
|
|
+ this.getTreeIds(this.treeList[0], bomIds)
|
|
|
+ this.reload({bomIds: bomIds, planId: this.treeList[0].planId});
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleNodeClick(data) {
|
|
|
+ this.treeId = data.id;
|
|
|
+ let bomIds = [];
|
|
|
+ this.getTreeIds(data, bomIds);
|
|
|
+ this.reload({bomIds: bomIds, planId: data.planId})
|
|
|
+ },
|
|
|
+ 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>
|