kd-aiot-frontend/src/views/codeManagement/businessCode/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading">
      <ele-split-layout
        width="210px"
        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()"
                >
                  添加
                </el-button>
                <el-button
                  size="small"
                  type="warning"
                  icon="el-icon-edit"
                  class="ele-btn-icon"
                  :disabled="!current"
                  @click="openEdit(current)"
                >
                  修改
                </el-button>
                <el-button
                  size="small"
                  type="danger"
                  icon="el-icon-delete"
                  class="ele-btn-icon"
                  :disabled="!current"
                  @click="remove"
                >
                  删除
                </el-button> -->
            </div>
          </ele-toolbar>
          <div class="ele-border-lighter sys-organization-list">
            <el-tree
              ref="tree"
              :data="data"
              highlight-current
              node-key="id"
              :props="{ label: 'name', children: 'sonDirectoryList' }"
              :expand-on-click-node="false"
              :default-expanded-keys="['0','1']"
              @node-click="onNodeClick"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <!-- {{ data.type }} -->
                <img src="../../../assets/code1.png" v-if="data.type == 1" />
                <img src="../../../assets/code2.png" v-if="data.type == 2" />
                <img src="../../../assets/code3.png" v-if="data.type == 3" />
                <span>{{ node.label }}</span>
              </span>
            </el-tree>
          </div>
        </div>
        <template v-slot:content>
          <codeList
            :parentData="current"
            ref="tableRef1"
            v-if="current.type == 1"
            @done="done"
          ></codeList>
          <codeSegmentList
            :parentData="current"
            ref="tableRef2"
            v-if="current.type == 2"
            @done="done"
          ></codeSegmentList>
          <codeValueList
            :parentData="current"
            v-if="current.type == 3"
            @done="done"
            ref="tableRef3"
          ></codeValueList>
        </template>
      </ele-split-layout>
    </el-card>
    <!-- 编辑弹窗 -->
    <!-- <folder-edit @done="query" ref="editRef" :fileType="fileType" /> -->
  </div>
</template>
  
  <script>
//   import fileTableList from '@/views/doc/components/file-table-list.vue';
import codeList from './codeList.vue';
import codeSegmentList from './codeSegmentList.vue';
import codeValueList from './codeValueList.vue';
import { selectTreeList } from '@/api/businessCode';
//   import { mapGetters } from 'vuex';

export default {
  components: { codeList, codeSegmentList, codeValueList },

  data() {
    return {
      rightData: {},
      // 加载状态
      loading: true,
      // 列表数据
      data: [],
      institutionList: [],
      // 选中数据
      current: {},
      // 是否显示表单弹窗
      showFolderEditFlag: false,
      // 编辑回显数据
      editData: null,
      // 上级id
      parentId: null
    };
  },
  computed: {
    // ...mapGetters(['user'])
  },
  created() {
    this.query();
  },
  methods: {
    /* 查询 */
    async query(row) {
      this.loading = true;
      this.data = await selectTreeList();
      this.setTree(this.data);
      this.$nextTick(() => {
        if (row) {
          this.$refs.tree.setCurrentKey(row.id);
          this.onNodeClick(row);
        } else {
          this.$refs.tree.setCurrentKey(this.data[0].id);
          this.onNodeClick(this.data[0]);
        }
      });
      this.loading = false;
    },
    setTree(data) {
      data.forEach((item) => {
        if (item.codeManageVOList && item.codeManageVOList.length > 0) {
          item.sonDirectoryList = item.codeManageVOList;
          item.codeManageVOList.forEach((val) => {
            val['type'] = 3;
          });
        }
        if (item.sonDirectoryList && item.sonDirectoryList.length > 0) {
          this.setTree(item.sonDirectoryList);
        }
      });
    },
    /* 选择数据 */
    onNodeClick(row) {
      if (row) {
        this.current = row;
        this.$nextTick(() => {
          if (this.current.type == 1) {
            this.$refs.tableRef1.reload();
          }
          if (this.current.type == 2 && this.$refs.tableRef2) {
            this.$refs.tableRef2.reload();
          }
          if (this.current.type == 3 && this.$refs.tableRef3) {
            this.$refs.tableRef3.reload();
          }
        });
      } else {
        this.current = null;
      }
    },
    done(row) {
      this.query(row);
    },
    /* 显示编辑 */
    openEdit(type) {
      if (type == 'del') {
        this.remove();
        return;
      }
      this.$refs.editRef.open(
        type,
        JSON.parse(JSON.stringify(this.current)),
        this.data
      );
    },
    /* 删除 */
    remove() {
      this.$confirm('确定要删除选中文件夹吗?', '提示', {
        type: 'warning'
      })
        .then(() => {
          const loading = this.$loading({ lock: true });
          directoryDeleteAPI([this.current.id])
            .then((msg) => {
              loading.close();
              this.$message.success('操作成功');
              this.query();
            })
            .catch((e) => {
              loading.close();
            });
        })
        .catch(() => {});
    }
  }
};
</script>
  
  <style lang="scss" scoped>
.sys-organization-list {
  height: calc(100vh - 180px);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  overflow: auto;
}
.sys-organization-list :deep(.el-tree-node__content) {
  height: 40px;

  & > .el-tree-node__expand-icon {
    margin-left: 10px;
  }
}
.custom-tree-node {
  display: flex;
  align-items: center;
  img {
    width: 20px;
    height: 20px;
    margin-right: 2px;
  }
}
:deep(.el-popover) {
  min-width: 50px;
}
:deep(.ele-split-panel-side .ele-table-tool-default) {
  display: none;
}
</style>
<style>
.el-input.is-disabled .el-input__inner {
  color: #606266;
}
</style>