kd-aiot-frontend/src/views/classifyManage/treeClassify/details.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <ele-split-layout
        width="356px"
        allow-collapse
        :right-style="{ overflow: 'hidden' }"
      >
        <div>
          <!-- 操作按钮 -->
          <ele-toolbar class="ele-toolbar-actions">
            <div style="margin: 5px 0">
              <div>
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-plus"
                  class="ele-btn-icon"
                  @click="openEdit(true)"
                  v-if="$hasPermission('main:categorylevel:save')"
                >
                  新建下级节点
                </el-button>
                <el-button
                  size="small"
                  type="warning"
                  icon="el-icon-edit"
                  class="ele-btn-icon"
                  :disabled="!current.id || current.id == rootId"
                  @click="openEdit(false)"
                  v-if="$hasPermission('main:categorylevel:update')"
                >
                  编辑节点
                </el-button>
                <el-button
                  size="small"
                  type="danger"
                  icon="el-icon-delete"
                  class="ele-btn-icon"
                  :disabled="!current.id || current.id == rootId"
                  @click="deleteCategory"
                  v-if="$hasPermission('main:categorylevel:delete')"
                >
                  删除
                </el-button></div
              >
              <div>
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-download"
                  class="ele-btn-icon"
                  @click="importProfession"
                  style="margin-top: 5px"
                  v-if="$hasPermission('main:categorylevel:update')"
                >
                  导入
                </el-button></div
              >
            </div>
          </ele-toolbar>
          <div class="ele-border-lighter sys-organization-list">
            <el-tree
              :data="treeData"
              :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 }">
                {{ (isCode == 1 ? data.code : '') + ' ' + data.name }}
              </span>
            </el-tree>
          </div>
        </div>
        <template v-slot:content>
          <div class="ele-border-lighter form-content" v-loading="loading">
            <ele-toolbar class="ele-toolbar-actions">
              <h4 style="margin: 5px 0"> 节点信息 </h4>
              <el-button
                size="small"
                type="primary"
                class="ele-btn-icon"
                @click="back()"
              >
                返回
              </el-button>
            </ele-toolbar>
            <div class="form-wrapper">
              <el-form size="mini" label-width="100px" class="ele-form-detail">
                <el-row :gutter="15" v-if="current.id == rootId">
                  <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
                    <el-form-item label="类型编码:">
                      <div class="ele-text-secondary">
                        {{ current.code }}
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
                    <el-form-item label="类型名称:">
                      <div class="ele-text-secondary">
                        {{ current.name }}
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
                    <el-form-item label="类型用途:">
                      <div class="ele-text-secondary">
                        {{ getDictValue('类型用途', current.type + '') }}
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
                    <el-form-item label="描述:">
                      <div class="ele-text-secondary">
                        {{ current.remark }}
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
                    <el-form-item label="状态:">
                      <div class="ele-text-secondary">
                        {{ current.isEnabled === 0 ? '停用' : '启用' }}
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="15" v-else>
                  <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
                    <el-form-item label="父级节点:">
                      <div class="ele-text-secondary">
                        {{ current.parentName }}
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
                    <el-form-item label="层级全览:">
                      <div class="ele-text-secondary">
                        {{ fullName }}
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
                    <el-form-item label="节点编码:">
                      <div class="ele-text-secondary">
                        {{ current.code }}
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
                    <el-form-item label="节点名称:">
                      <div class="ele-text-secondary">
                        {{ current.name }}
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
                    <el-form-item label="与下层分隔:">
                      <div class="ele-text-secondary">
                        {{ current.separatorChar }}
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
                    <el-form-item label="状态:">
                      <div class="ele-text-secondary">
                        {{ current.isEnabled === 0 ? '停用' : '启用' }}
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </template>
      </ele-split-layout>
    </el-card>
    <!-- 编辑弹窗 -->
    <list-edit
      ref="editRef"
      @done="reload"
      :rootId="rootId"
      :curNode="curNode"
    />
    <importDialog
      ref="importDialogRef"
      :apiUrl="'/main/factoryworkstation/importBatch'"
      :fileUrl="'/main/factoryworkstation/downLoadTemplate'"
      fileName="分类导入模板"
      @success="reload"
      :param="{
        id: current.id
      }"
    />
  </div>
</template>
<script>
  import ListEdit from './components/list-edit.vue';
  import classifyManageEdit from './components/classifyManageEdit.vue';
  import dictMixins from '@/mixins/dictMixins';
  import {
    getTreeByPid,
    getInfoById,
    deleteCategory
  } from '@/api/classifyManage';
  import { parameterGetByCode } from '@/api/system/dictionary/index.js';
  import importDialog from '@/components/upload/import-dialogNew.vue';

  export default {
    components: {
      classifyManageEdit,
      ListEdit,
      importDialog
    },
    mixins: [dictMixins],
    data() {
      return {
        loading: false,
        current: {},
        curNode: {},
        treeData: [],
        formData: {},
        isCode: 0,
        defaultProps: {
          children: 'children',
          label: 'name'
        }
      };
    },

    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      },
      rootId() {
        return this.$route.query.id;
      },
      fullName() {
        let str = '';
        let codeStr = '';
        let node = this.curNode;
        while (node?.data?.name) {
          str = node.data.name + '-' + str;
          codeStr = node.data.code + '-' + codeStr;
          node = node?.parent;
        }

        return (
          str.substring(str, str.length - 1) +
          `(${codeStr.substring(str, str.length - 1)})`
        );
      }
    },
    created() {
      this.requestDict('类型用途');
      this.requestDict('分隔符');
      this.getTree().then(() => {
        this.$nextTick(() => {
          this.getDetail(this.treeData[0]?.id);
        });
      });
      //是否显示code
      parameterGetByCode({
        code: 'mian_treeClassify_code'
      }).then((res) => {
        if (res.value) {
          this.isCode = res.value;
        }
      });
    },
    methods: {
      importProfession() {
        this.$refs.importDialogRef.open();
      },
      async reload(isEdit) {
        if (isEdit) {
          this.getTree().then(() => {
            this.getDetail(this.current.id);
          });
        } else {
          this.getTree();
        }
      },
      back() {
        this.$router.push('/treeClassify');
      },
      handlOpen() {
        this.$refs.addDialog.open();
      },
      deleteCategory() {
        this.$confirm('确定要删除选中节点吗?', '提示', {
          type: 'warning'
        }).then(async () => {
          const res = await deleteCategory(this.current.id);
          if (res?.code == '0') {
            this.getTree().then(() => {
              this.$nextTick(() => {
                this.getDetail(this.treeData[0]?.id);
              });
            });
            this.$message.success('删除成功！');
          }
        });
      },
      async getTree() {
        const res = await getTreeByPid(this.rootId);

        if (res.code == '0') {
          this.treeData = res.data;
          return;
        }

        return Promise.reject();
      },
      async getDetail(id) {
        this.loading = true;
        const res = await getInfoById(id);
        this.loading = false;
        if (res.code == '0') {
          this.current = res.data;
          this.$nextTick(() => {
            this.$refs.treeRef.setCurrentKey(this.current.id);
          });
        }
      },
      openEdit(isAdd = true) {
        this.$refs.editRef.open(isAdd ? null : this.current, this.current);
      },
      handleNodeClick(data, node) {
        this.curNode = node;
        this.getDetail(data.id);
      }
    }
  };
</script>
<style lang="scss" scoped>
  .sys-organization-list {
    height: calc(100vh - 264px);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    overflow: auto;
  }

  .sys-organization-list :deep(.el-tree-node__content) {
    height: 30px;

    & > .el-tree-node__expand-icon {
      margin-left: 10px;
    }
  }

  .form-content {
    height: 100%;
    border: 1px solid;
    box-sizing: border-box;
  }
  .form-wrapper {
    padding: 24px;
  }
  .ele-toolbar-actions :deep(.ele-table-tool-title-content) {
    display: flex;
    justify-content: space-between;
  }
</style>