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"
              @click="remove"
            >
              删除
            </el-button>

            <el-button
              v-if="currentNodeData.bomType == 1"
              type="primary"
              size="mini"
              icon="el-icon-download"
              plain
              >导出</el-button
            >

            <el-button
              @click="uploadFile"
              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('P')"
              v-if="currentNodeData.bomType == 4"
              >转换PBOM</el-button
            >


            
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-refresh"
              plain
              @click="transformation('E')"
              v-if="currentNodeData.bomType == 1"
              >转换EBOM</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
            >

            <el-button
              type="primary"
              size="mini"
              @click="handSubmit"
              v-if="
                currentNodeData.approvalStatus == 0 ||
                currentNodeData.approvalStatus == 3
              "
            >
              提交发布
            </el-button>

            <el-button type="primary" size="mini" @click="handleSave">
              保存
            </el-button>
          </div>
        </div>
        <div>
          <el-button
            type="text"
            @click="handleDetails()"
            v-if="isNotData && currentNodeData.approvalStatus == 1"
            :underline="false"
          >
            {{ approvalStatusOpt[+currentNodeData.approvalStatus] }}
          </el-button>

          <el-button
            type="text"
            style="color: #f56c6c"
            v-if="isNotData && currentNodeData.approvalStatus == 3"
            :underline="false"
          >
            {{ approvalStatusOpt[+currentNodeData.approvalStatus] }}
          </el-button>

          <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">
          
            <div>
              版本号: &nbsp; &nbsp;
            <el-select
              size="mini"
              style="width: 72%; margin: 6px 0"
              v-model="searchObj.versions"
              placeholder="请选择bom版本"
              @change="getTreeData"
            >
              <el-option
                v-for="item in versList"
                :label="item.versions"
                :value="item.versions"
                :key="item.id"
              >
              </el-option>
            </el-select>
            </div>

            <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 v-if="isNotData">
            <baseInfo :dataInfo="currentNodeData" />

            <el-tabs
              v-model="activeName"
              class="tab-box"
              type="border-card"
              @tab-click="handleClick"
            >
              <el-tab-pane label="属性" name="属性">
    
                <attribute  v-if="activeName == '属性'" :attributeData="currentNodeData"></attribute>
              </el-tab-pane>

              <el-tab-pane
                :label="
                  currentNodeData.bomType == 1
                    ? 'PBOM明细表'
                    : currentNodeData.bomType == 2
                    ? 'MBOM明细表'
                    : currentNodeData.bomType == 3
                    ? 'ABOM明细表'
                    : 'EBOM明细表'
                "
                name="明细表"
              >
                <detailedList :attributeData="currentNodeData" :treeId="treeId"></detailedList>
              </el-tab-pane>

              <el-tab-pane
                label="工艺路线"
                name="工艺路线"
                v-if="
                  currentNodeData.bomType != 4
                "
              >
                <routing
                 v-if="activeName == '工艺路线'"
                  ref="routingRef"
                 :attributeData="currentNodeData"
                  :taskParam="currentNodeData"
                ></routing>
              </el-tab-pane>
              <el-tab-pane
                label="工序配置"
                name="工序配置"
                v-if="
                  currentNodeData.bomType != 1
                "
              >
                <workmanship
                  v-if="activeName == '工序配置'"
                  ref="workmanshipRef"
                  :taskParam="currentNodeData"
                ></workmanship>
              </el-tab-pane>

            </el-tabs>
          </template>

          <template v-slot:content v-else>
            <el-empty
              :image-size="200"
              :description="
                currentNodeData.bomType == 1
                  ? 'PBOM 暂无数据，请先新建'
                  : currentNodeData.bomType == 2
                  ? 'MBOM 暂无数据，请先新建'
                  : currentNodeData.bomType == 3
                  ? 'ABOM 暂无数据，请先新建'
                  : 'EBOM 暂无数据，请先新建'
              "
            ></el-empty>
          </template>
        </ele-split-layout>
      </div>
    </el-drawer>

    <baseInfoSave
      v-if="baseInfoShow"
      @close="baseClose"
      :categoryObj="currentNodeData"
    ></baseInfoSave>

    <importDialog
      :defModule="moudleName"
      ref="importDialogRef"
      @success="getTreeData"
    />

    <el-dialog
      title="发布"
      :visible.sync="isSubmit"
      v-if="isSubmit"
      width="30%"
      center
    >
      <div>
        <el-radio v-model="radioSubmit" :label="1">药品</el-radio>
        <el-radio v-model="radioSubmit" :label="2">器械</el-radio>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isSubmit = false">取 消</el-button>
        <el-button type="primary" @click="handJsSubmit()">确 定</el-button>
      </span>
    </el-dialog>

    <LCdetail ref="detailRef"></LCdetail>
  </div>
</template>

<script>
  import {
    getBomTreeList,
    versionList,
    getBomGetById,
    convert,
    convertABom,
    convertEBOM,
    convertEBomToPBOM,
    deleteBomTreeList,
    bomSubmit,
    jsBomSubmit,
    deviceBomSubmit
  } from '@/api/material/BOM.js';

  import baseInfo from './components/baseInfo.vue';
  import baseInfoSave from './components/baseInfoSave.vue';
  import attribute from './components/attribute.vue';
  import detailedList from './components/detailedList.vue';
  import importDialog from './qualityTesting/import-dialog.vue';
  import LCdetail from './components/LCdetail.vue';
  import routing from './components/routing.vue';
  import workmanship from './components/workmanship.vue';

  export default {
    components: {
      baseInfo,
      baseInfoSave,
      attribute,
      detailedList,
      importDialog,
      LCdetail,
      routing,
      workmanship
    },
    data() {
      return {
        drawer: false,
        isFullscreen: true,

        currentNodeData: {
          bomType: 1,
          children: []
        },
        isProduct: false,

        current: {},
        treeList: [],
        versList: [],
        treeLoading: false,

        defaultProps: {
          children: 'children',
          label: 'name'
        },

        searchObj: {
          versions: '',
          categoryId: '',
          isProduct: false,
          isTemp: 0
        },

        activeName: '属性',

        baseInfoShow: false,
        isNotData: true,

        moudleName: 'mainUser',
        isSubmit: false,
        radioSubmit: 1,

        treeId: null,

        approvalStatusOpt: {
          0: '未提交',
          1: '审核中',
          2: '审核通过',
          3: '审核不通过'
        }
      };
    },

    computed: {
      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      }
    },

    methods: {
      open(row) {
        this.searchObj = row;
        this.drawer = true;
        this.getTreeData();
        this.getVersion();
      },

      handleClose() {
        this.drawer = false;
      },

      handleFull() {
        this.isFullscreen = !this.isFullscreen;
        this.$forceUpdate();
      },

      bomChange(e) {
        this.searchObj.versions = '';
        this.currentNodeData.bomType = e;
        this.getTreeData();
        this.getVersion();
      },

      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.isNotData = true;
                // 默认高亮第一个
                this.$refs.treeRef.setCurrentKey(res.data[0].id);
                this.handleNodeClick(res.data[0]);
              });
            } else {
              this.isNotData = false;
              this.treeList = [];
            }
            return this.treeList;
          }
        } catch (error) {
          console.log(error);
        }
        this.treeLoading = false;
      },

      handleNodeClick(data) {
        this.treeId = data.id;
        this.handBomDetails(data.id);
      },

      handBomDetails(id) {
        if (id) {
          getBomGetById(id).then((res) => {
            this.currentNodeData = res.data;
            this.$forceUpdate();
          });
        } else {
          this.currentNodeData = {
            bomType: 1,
            children: []
          };
        }
      },

      getVersion(type) {
        let param = {
          categoryId: this.searchObj.categoryId,
          bomType: this.currentNodeData.bomType
        };
        versionList(param).then((res) => {
          this.versList = res || [];
          if (type == 'del' || type == 'add') {
            if (this.versList.length >= 1) {
              this.searchObj.versions =
                this.versList[this.versList.length - 1].versions;
            } else {
              this.searchObj.versions = '';
            }

            this.getTreeData();
          }
        });
      },

      handleClick(tab) {},
      remove() {
        if (this.currentNodeData.status == 1) {
          return this.$message.warning('已发布版本不能删除');
        }

        this.$confirm('是否确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            deleteBomTreeList([this.currentNodeData.id]).then((msg) => {
              this.$message.success('删除' + msg);
              this.getVersion('del');
            });
          })
          .finally(() => {});
      },

      transformation(tt) {
        if (this.currentNodeData.status != 1) {
          return this.$message.warning('只有已发布版本才可以转换');
        }
        this.loadingInstance = this.$loading({
          lock: true,
          text: '转换中...',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        let ULR = tt == 'M' ? convert : tt == 'A' ? convertABom : tt == 'E' ? convertEBOM :  tt == 'P' ?  convertEBomToPBOM : '';
        ULR({ versions: this.searchObj.versions, categoryId: this.searchObj.categoryId }).then(
          (data) => {
            if (data.code == '0') {
              this.loadingInstance.close();
              this.$message.success('转换成功');
            }
          }
        );
      },

      handleAdd() {
        this.baseInfoShow = true;
      },

      baseClose(val) {
        if (val) {
          this.getVersion('add');
        }
        this.baseInfoShow = false;
      },

      uploadFile() {
        this.$refs.importDialogRef.open();
      },

      handleSave() {
        this.$message.success('保存成功');
        this.handleClose();
      },

      handSubmit() {
        if (this.clientEnvironmentId == 4) {
          this.isSubmit = true;
        } else {
          this.$alert('确定要发布吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              bomSubmit({ businessId: this.currentNodeData.id }).then((res) => {
                this.$message.success('发布成功');
                this.getTreeData();
              });
            })
            .catch(() => {});
        }
      },

      handJsSubmit() {
        let URL = this.radioSubmit == 1 ? jsBomSubmit : deviceBomSubmit;
        this.$alert('确定要发布吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            URL({ businessId: this.currentNodeData.id }).then((res) => {
              this.isSubmit = false;
              this.$message.success('发布成功');
              this.getTreeData();
            });
          })
          .catch(() => {});
      },

      handleDetails() {
        if (!this.currentNodeData.processInstanceId) {
          this.$message.info('未提交没有审核流程');
        } else {
          this.$refs.detailRef.open(this.currentNodeData.processInstanceId);
        }
      }
    }
  };
</script>

<style lang="scss" 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;
    }
  }

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