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">
              <el-button
                size="small"
                type="primary"
                icon="el-icon-plus"
                class="ele-btn-icon"
                @click="openEdit(true)"
              >
                新建下级节点
              </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)"
              >
                编辑节点
              </el-button>
              <el-button
                size="small"
                type="danger"
                icon="el-icon-delete"
                class="ele-btn-icon"
                :disabled="!current.id || current.id == rootId"
                @click="deleteCategory"
              >
                删除
              </el-button>
            </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"
            ></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>
            </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-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.separate }}
                      </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"
    />
    <!-- <classify-manage-edit ref="editRef" @done="reload" /> -->
  </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';
  export default {
    components: {
      classifyManageEdit,
      ListEdit
    },
    mixins: [dictMixins],
    data () {
      return {
        loading: false,
        current: {},
        curNode: {},
        treeData: [],
        formData: {},
        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);
        });
      });
    },
    methods: {
      async reload (isEdit) {
        if (isEdit) {
          this.getTree().then(() => {
            this.getDetail(this.current.id);
          });
        } else {
          this.getTree();
        }
      },
      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;
  }
</style>