|
|
@@ -0,0 +1,242 @@
|
|
|
+<template>
|
|
|
+ <div class="ele-body">
|
|
|
+ <el-card shadow="never">
|
|
|
+ <ele-split-layout width="300px" allow-collapse :right-style="{ overflow: 'hidden' }">
|
|
|
+ <div class="ele-border-lighter sys-organization-list">
|
|
|
+ <el-tree :data="treeList" :props="defaultProps" ref="treeRef"
|
|
|
+ :default-expanded-keys="current && current.id ? [current.id] : []" :highlight-current="true" node-key="id"
|
|
|
+ @node-click="handleNodeClick"></el-tree>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <template v-slot:content>
|
|
|
+ <div class="ele-border-lighter form-content" v-loading="loading">
|
|
|
+ <div class="form-wrapper">
|
|
|
+ <el-form size="mini" label-width="100px" class="ele-form-detail">
|
|
|
+ <el-row :gutter="15" v-if="current.parentId == 0">
|
|
|
+ <el-col v-bind="styleResponsive ? { sm: 6 } : { span: 6 }">
|
|
|
+ <el-form-item label="类型编码:">
|
|
|
+ <div class="ele-text-secondary">
|
|
|
+ {{ current.code }}
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col v-bind="styleResponsive ? { sm: 6 } : { span: 6 }">
|
|
|
+ <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.remark }}
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="15" v-else>
|
|
|
+ <el-col v-bind="styleResponsive ? { sm: 6 } : { span: 6 }">
|
|
|
+ <el-form-item label="节点编码:">
|
|
|
+ <div class="ele-text-secondary">
|
|
|
+ {{ current.code }}
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col v-bind="styleResponsive ? { sm: 6 } : { span: 6 }">
|
|
|
+ <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">
|
|
|
+ {{ fullName }}
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <IndexSearch @search="reload" />
|
|
|
+
|
|
|
+ <IndexData ref="listData" v-if="current" :current-id="current.id" :data="current" :rootTreeId="rootTreeId" :rootId="rootId">
|
|
|
+ </IndexData>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </ele-split-layout>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <script>
|
|
|
+ import IndexData from './components/index-data.vue';
|
|
|
+ import IndexSearch from './components/index-search.vue';
|
|
|
+
|
|
|
+ import dictMixins from '@/mixins/dictMixins';
|
|
|
+ import { getTreeByPid } from '@/api/classifyManage';
|
|
|
+
|
|
|
+ import { getInfoById } from '@/api/classifyManage';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ IndexData,
|
|
|
+ IndexSearch
|
|
|
+ },
|
|
|
+ mixins: [dictMixins],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ current: {},
|
|
|
+ curNode: {},
|
|
|
+ treeList: [],
|
|
|
+ treeLoading: false,
|
|
|
+ formData: {},
|
|
|
+ rootTreeId: null,
|
|
|
+ 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);
|
|
|
+ // return (
|
|
|
+ // str.substring(str, str.length - 1) +
|
|
|
+ // `(${codeStr.substring(str, str.length - 1)})`
|
|
|
+ // );
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getTreeData();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getTreeData() {
|
|
|
+ try {
|
|
|
+ this.treeLoading = true;
|
|
|
+
|
|
|
+ const res = await getTreeByPid(9);
|
|
|
+ this.treeLoading = false;
|
|
|
+ if (res?.code === '0') {
|
|
|
+ this.treeList = res.data;
|
|
|
+
|
|
|
+ this.$nextTick(() => {
|
|
|
+ // 默认高亮第一级树节点
|
|
|
+ if (this.treeList[0]) {
|
|
|
+ this.rootTreeId = this.treeList[0].id
|
|
|
+ this.getDetail(this.treeList[0].id);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return this.treeList;
|
|
|
+ }
|
|
|
+ } catch (error) { }
|
|
|
+ this.treeLoading = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ 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);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ handleNodeClick(data, node) {
|
|
|
+ this.curNode = node;
|
|
|
+ this.pathList = this.findParent([], data, this.treeList)
|
|
|
+ this.rootTreeId = null
|
|
|
+ if (this.pathList.length == 0) {
|
|
|
+ this.rootTreeId = data.id
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.rootTreeId = this.pathList[this.pathList.length - 1] && this.pathList[this.pathList.length - 1].id
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ this.getDetail(data.id);
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 刷新表格 */
|
|
|
+ reload(where) {
|
|
|
+ this.$refs.listData.reload(where);
|
|
|
+ },
|
|
|
+
|
|
|
+ // parents:用于返回的数组，childNode:要查询的节点，treeList：json树形数据
|
|
|
+ findParent(parents, childNode, treeList) {
|
|
|
+ for (let i = 0; i < treeList.length; i++) {
|
|
|
+ // 父节点查询条件
|
|
|
+ if (treeList[i].id === childNode.parentId) {
|
|
|
+ // 如果找到结果,保存当前节点
|
|
|
+ parents.push(treeList[i])
|
|
|
+ // 用当前节点再去原数据查找当前节点的父节点
|
|
|
+ this.findParent(parents, treeList[i], this.treeList)
|
|
|
+ break
|
|
|
+ } else {
|
|
|
+ if (treeList[i].children instanceof Array) {
|
|
|
+ // 没找到，遍历该节点的子节点
|
|
|
+ this.findParent(parents, childNode, treeList[i].children)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return parents
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ </script>
|
|
|
+ <style lang="scss" scoped>
|
|
|
+ .sys-organization-list {
|
|
|
+ height: calc(100vh - 165px);
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-content {
|
|
|
+ height: 50px;
|
|
|
+ border: 1px solid;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-wrapper {
|
|
|
+ padding: 12px 24px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+
|
ysy
