|
|
@@ -0,0 +1,328 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-drawer
|
|
|
+ title=""
|
|
|
+ :visible.sync="drawer"
|
|
|
+ :custom-class="isFullscreen ? 'not-fullscreen' : 'is-fullscreen'"
|
|
|
+ :before-close="handleClose"
|
|
|
+ :with-header="false"
|
|
|
+ >
|
|
|
+ <!-- 自定义头部 -->
|
|
|
+ <div class="custom-drawer-header">
|
|
|
+ <div class="radio_box rx-cc">
|
|
|
+ <el-radio-group
|
|
|
+ size="small"
|
|
|
+ v-model="currentNodeData.bomType"
|
|
|
+ @change="bomChange"
|
|
|
+ >
|
|
|
+ <el-radio-button :label="4">EBOM </el-radio-button>
|
|
|
+ <el-radio-button :label="1">PBOM </el-radio-button>
|
|
|
+ <el-radio-button :label="2">MBOM </el-radio-button>
|
|
|
+ <el-radio-button :label="3">ABOM </el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+
|
|
|
+ <div style="margin-left: 100px">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="mini"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ @click="handleAdd"
|
|
|
+ >
|
|
|
+ 新建
|
|
|
+ </el-button>
|
|
|
+
|
|
|
+ <el-button type="danger" size="mini" icon="el-icon-delete">
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+
|
|
|
+ <el-button type="warning" size="mini"> 提交发布 </el-button>
|
|
|
+
|
|
|
+ <el-button type="warning" size="mini"> 保存 </el-button>
|
|
|
+
|
|
|
+ <el-button
|
|
|
+ v-if="currentNodeData.bomType == 1"
|
|
|
+ type="primary"
|
|
|
+ size="mini"
|
|
|
+ icon="el-icon-download"
|
|
|
+ plain
|
|
|
+ >导出</el-button
|
|
|
+ >
|
|
|
+
|
|
|
+ <el-button
|
|
|
+ v-if="currentNodeData.bomType == 1"
|
|
|
+ type="primary"
|
|
|
+ size="mini"
|
|
|
+ icon="el-icon-upload2"
|
|
|
+ plain
|
|
|
+ >导入</el-button
|
|
|
+ >
|
|
|
+
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="mini"
|
|
|
+ icon="el-icon-refresh"
|
|
|
+ plain
|
|
|
+ @click="transformation('M')"
|
|
|
+ v-if="currentNodeData.bomType == 1"
|
|
|
+ >转换MBOM</el-button
|
|
|
+ >
|
|
|
+
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="mini"
|
|
|
+ icon="el-icon-refresh"
|
|
|
+ plain
|
|
|
+ @click="transformation('A')"
|
|
|
+ v-if="currentNodeData.bomType == 1"
|
|
|
+ >转换ABOM</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-button
|
|
|
+ icon="el-icon-full-screen"
|
|
|
+ type="text"
|
|
|
+ @click="handleFull"
|
|
|
+ >{{ isFullscreen ? '全屏' : '缩小' }}</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ icon="el-icon-circle-close"
|
|
|
+ type="text"
|
|
|
+ @click="handleClose"
|
|
|
+ >关闭</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 抽屉内容 -->
|
|
|
+ <div class="drawer_content">
|
|
|
+ <ele-split-layout
|
|
|
+ width="260px"
|
|
|
+ allow-collapse
|
|
|
+ :resizable="true"
|
|
|
+ :min-size="200"
|
|
|
+ :max-size="-200"
|
|
|
+ :left-style="{
|
|
|
+ overflow: 'hidden',
|
|
|
+ width: '100%'
|
|
|
+ }"
|
|
|
+ :right-style="{ overflow: 'hidden' }"
|
|
|
+ :responsive="false"
|
|
|
+ >
|
|
|
+ <div class="ele-border-lighter sys-organization-list">
|
|
|
+ <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>
|
|
|
+
|
|
|
+ <template v-slot:content>
|
|
|
+ <baseInfo :dataInfo="currentNodeData" />
|
|
|
+ </template>
|
|
|
+ </ele-split-layout>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
+
|
|
|
+ <baseInfoSave v-if="baseInfoShow" @close="baseClose"></baseInfoSave>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ getBomTreeList,
|
|
|
+ getBomGetById,
|
|
|
+ convert,
|
|
|
+ convertABom,
|
|
|
+ deleteBomTreeList
|
|
|
+ } from '@/api/material/BOM.js';
|
|
|
+
|
|
|
+ import baseInfo from './components/baseInfo.vue';
|
|
|
+ import baseInfoSave from './components/baseInfoSave.vue';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ components: { baseInfo, baseInfoSave },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ drawer: false,
|
|
|
+ isFullscreen: true,
|
|
|
+
|
|
|
+ currentNodeData: {
|
|
|
+ bomType: 1,
|
|
|
+ children: []
|
|
|
+ },
|
|
|
+ isProduct: false,
|
|
|
+
|
|
|
+ current: {},
|
|
|
+ treeList: [],
|
|
|
+ treeLoading: false,
|
|
|
+
|
|
|
+ defaultProps: {
|
|
|
+ children: 'children',
|
|
|
+ label: 'name'
|
|
|
+ },
|
|
|
+
|
|
|
+ searchObj: {
|
|
|
+ versions: '',
|
|
|
+ categoryId: ''
|
|
|
+ },
|
|
|
+
|
|
|
+ baseInfoShow: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ open(row) {
|
|
|
+ this.searchObj = row;
|
|
|
+ this.drawer = true;
|
|
|
+ this.getTreeData();
|
|
|
+ },
|
|
|
+
|
|
|
+ handleClose() {
|
|
|
+ this.drawer = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ handleFull() {
|
|
|
+ this.isFullscreen = !this.isFullscreen;
|
|
|
+ this.$forceUpdate();
|
|
|
+ },
|
|
|
+
|
|
|
+ bomChange(e) {
|
|
|
+ this.currentNodeData.bomType = e;
|
|
|
+ this.getTreeData();
|
|
|
+ },
|
|
|
+
|
|
|
+ async getTreeData() {
|
|
|
+ try {
|
|
|
+ this.treeLoading = true;
|
|
|
+ const res = await getBomTreeList({
|
|
|
+ categoryId: this.searchObj.categoryId,
|
|
|
+ versions: this.searchObj.versions,
|
|
|
+ bomType: this.currentNodeData.bomType,
|
|
|
+ isTemp: this.searchObj.isTemp
|
|
|
+ });
|
|
|
+ this.treeLoading = false;
|
|
|
+ if (res?.code === '0') {
|
|
|
+ if (res.data?.length > 0) {
|
|
|
+ this.treeList = res.data;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ // 默认高亮第一个
|
|
|
+ this.$refs.treeRef.setCurrentKey(res.data[0].id);
|
|
|
+ this.handleNodeClick(res.data[0]);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.treeList = [];
|
|
|
+ }
|
|
|
+ return this.treeList;
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error);
|
|
|
+ }
|
|
|
+ this.treeLoading = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ handleNodeClick(data) {},
|
|
|
+
|
|
|
+ remove() {
|
|
|
+ this.$confirm('是否确认删除?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ const loading = this.$loading({ lock: true });
|
|
|
+
|
|
|
+ deleteBomTreeList([this.currentNodeData.id])
|
|
|
+ .then((msg) => {
|
|
|
+ loading.close();
|
|
|
+ this.$message.success('删除' + msg);
|
|
|
+ this.getTreeData();
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ loading.close();
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ },
|
|
|
+
|
|
|
+ transformation(tt) {
|
|
|
+ this.loadingInstance = this.$loading({
|
|
|
+ lock: true,
|
|
|
+ text: '转换中...',
|
|
|
+ background: 'rgba(0, 0, 0, 0.7)'
|
|
|
+ });
|
|
|
+ let ULR = tt == 'M' ? convert : tt == 'A' ? convertABom : '';
|
|
|
+ ULR({ versions: this.versions, categoryId: this.categoryId }).then(
|
|
|
+ (data) => {
|
|
|
+ if (data.code == '0') {
|
|
|
+ this.loadingInstance.close();
|
|
|
+ this.$message.success('转换成功');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+
|
|
|
+ handleAdd() {
|
|
|
+ this.baseInfoShow = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ baseClose() {
|
|
|
+ this.baseInfoShow = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ /* 自定义全屏样式 */
|
|
|
+ ::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 - 65px);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-width: 1px;
|
|
|
+ border-style: solid;
|
|
|
+ overflow: auto;
|
|
|
+ padding: 0 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .treeData {
|
|
|
+ height: 0 1 auto;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
ysy