kd-aiot-frontend/src/views/material/BOMmanage/detailsPop.vue

<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 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>