Merge branch 'http_mock' of git.xiaojukeji.com:jacklijiajia/thoth-frontend into http_mock

src/api/configure.js

@@ -62,3 +62,48 @@ export function teamModifyTeam(data) {
     data
   })
 }
+
+// 判断是否是管理员
+export function verifyIsAdmin(data) {
+  return request({
+    url: TeamManagement + `/setting/verifyIsAdmin`,
+    method: 'post',
+    data
+  })
+}
+
+// 获取所有业务线列表
+export function getBizList(data) {
+  return request({
+    url: TeamManagement + `/setting/getBizList`,
+    method: 'post',
+    data
+  })
+}
+
+// 添加业务线
+export function addBiz(data) {
+  return request({
+    url: TeamManagement + `/setting/addBiz`,
+    method: 'post',
+    data
+  })
+}
+
+// 更新业务线
+export function updateBiz(data) {
+  return request({
+    url: TeamManagement + `/setting/updateBiz`,
+    method: 'post',
+    data
+  })
+}
+
+// 删除业务线
+export function deleteBiz(data) {
+  return request({
+    url: TeamManagement + `/setting/deleteBiz`,
+    method: 'post',
+    data
+  })
+}

src/components/dialog/normalDialog.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="dialog-main">
+    <el-dialog :title="title" :visible.sync="visible">
+      <slot />
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="cancel()">取 消</el-button>
+        <el-button type="primary" @click="confirm()">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '',
+      required: false
+    },
+    showDialog: {
+      type: Boolean,
+      default: false,
+      required: true
+    }
+  },
+  data() {
+    return {
+      visible: this.showDialog
+    }
+  },
+  watch: {
+    showDialog() {
+      this.visible = this.showDialog
+    }
+  },
+  methods: {
+    confirm() {
+      this.$emit('confirm', true)
+    },
+    cancel() {
+      this.$emit('cancel', false)
+    }
+  }
+}
+</script>

src/views/ToConfigure/configure.vue

@@ -1,93 +1,186 @@
 <template>
-  <div class="1hao" style="height: calc(100vh - 80px);background-color:#F2F3F6;display:flex;align-items: center;justify-content: center;">
-    <div class="2hao" style="height: 96%;width: 98%;background-color: white;overflow: auto;border-radius:4px;">
-      <el-tabs v-model="activeName" class="abc" @tab-click="handleClick">
-        <el-tab-pane label="我的" name="second">
-          <div align="right" style="margin-right: 1%;"><el-button size="mini" type="primary" @click="create_test(form)">新建团队</el-button></div>
-          <div align="center" style="margin: 1%;">
-            <el-table :data="table_Data" :header-cell-style="{ background: '#F0F2F4', color: '#333B4A' }" size="mini" width="80%" border show-overflow-tooltip="true">
-              <el-table-column label="团队名称" min-width="120" align="center"><template slot-scope="scope">{{ scope.row.teamName }}</template></el-table-column>
-              <el-table-column label="我的角色" min-width="120" align="center"><template slot-scope="scope">{{ scope.row.teamAttribute[0] }}, {{ scope.row.teamAttribute[1] }}</template></el-table-column>
-              <el-table-column label="成员名单" min-width="120" align="center">
-                <template slot-scope="scope">
-                  <span v-for="(item, i) in scope.row.memberName" :key=" i + 'a'">{{ item }}<span v-show="item" style="color: red; margin-left: 2%;">Leader 、</span></span>
-                  <span v-for="(item, index) in scope.row.memberName1" :key="index">{{ item }} 、 </span>
-                </template>
-              </el-table-column>
-              <el-table-column label="操作" align="center">
-                <template slot-scope="scope"><el-button size="mini" type="primary" plain @click="update_test(scope.row)">编辑</el-button></template>
-              </el-table-column>
-            </el-table>
-            <el-pagination :current-page.sync="currentPage1" :page-sizes="[15]" background layout="total, prev, pager, next" :total="total1" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="全部" name="third">
-          <div align="right" style="margin-right: 1%;"><el-button size="mini" type="primary" @click="create_test(form)">新建团队</el-button></div>
-          <div align="center" style="margin: 1%;">
-            <el-table v-loading="loading" :data="tableData" :header-cell-style="{ background: '#F0F2F4', color: '#333B4A' }" size="mini" width="80%" border show-overflow-tooltip="true">
-              <el-table-column label="团队名称" min-width="100" align="center"><template slot-scope="scope">{{ scope.row.teamName }}</template></el-table-column>
-              <el-table-column label="团队属性" min-width="60" align="center"><template slot-scope="scope">{{ scope.row.teamAttribute[0] }} {{ scope.row.teamAttribute[1] }}</template></el-table-column>
-              <el-table-column label="成员名单" min-width="120" align="center" show-overflow-tooltip>
-                <template slot-scope="scope">
-                  <span v-for="(item1, index) in scope.row.memberName" :key="index+'a'">{{ item1 }}<span v-show="item1" style="color: red; margin-left: 2%;">Leader 、</span></span>
-                  <span v-for="(item, index) in scope.row.memberName1" :key="index">{{ item }}、</span>
-                </template>
-              </el-table-column>
-              <el-table-column label="操作" align="center">
-                <template slot-scope="scope"><el-button size="mini" type="primary" plain @click="update_test(scope.row)">编辑</el-button></template>
-              </el-table-column>
-            </el-table>
-            <el-pagination :current-page.sync="currentPage1" :page-size="15" :page-sizes="[15, 30, 40, 50]" background layout="total, prev, pager, next" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
-          </div>
-        </el-tab-pane>
-      </el-tabs>
-    </div>
-    <el-dialog :title="title_name" :visible.sync="dialogFormVisible" width="30%" center :close-on-click-modal="false">
-      <el-form ref="form" label-position="left" :model="form" :rules="rules" label-width="110px">
-        <el-form-item label="团队名称" prop="teamName">
-          <el-input v-model="form.teamName" autocomplete="off" placeholder="请输入团队名称，不得超过20个汉字" @blur="blur_teamName(form.teamName)" />
-        </el-form-item>
-        <el-form-item label="团队属性" prop="teamAttribute">
-          <el-select v-model="form.teamAttribute" style="width: 100%;" placeholder="请选择">
-            <el-option v-for="item in arr_team" :key="item.code" :label="item.msg" :value="item.code" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="团队Leader">
-          <el-select v-model="form.lerader" style="width: 100%;" multiple filterable remote reserve-keyword placeholder="请输入姓名或者邮箱前缀" :remote-method="remoteMethod" :loading="loading" @change="team_lerader(form.lerader)">
-            <el-option v-for="item in options" :key="item.idap" :label="item.name" :value="test2(item, 1)">
-              <div style="display: flex;justify-content: start;">
-                <div style="min-width:100px;color: #8492a6; font-size: 13px; overflow:hidden">{{ item.deptName }}</div>
-                <div style="min-width:80px">{{ item.name }}</div>
-                <div style="min-width:100px;color: #8492a6; font-size: 13px; overflow:hidden">{{ item.idap }}</div>
-              </div>
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="团队成员" prop="dates">
-          <el-select v-model="form.dates" style="width: 100%;" multiple filterable remote reserve-keyword placeholder="请输入姓名或者邮箱前缀" :remote-method="remoteMethod" :loading="loading" @change="team_dates(form.dates)">
-            <el-option v-for="item in options" :key="item.idap" :label="item.name" :value="test2(item, 0)">
-              <div style="display: flex;justify-content: start;">
-                <div style="min-width:100px;color: #8492a6; font-size: 13px; overflow:hidden">{{ item.deptName }}</div>
-                <div style="min-width:80px">{{ item.name }}</div>
-                <div style="min-width:100px;color: #8492a6; font-size: 13px; overflow:hidden">{{ item.idap }}</div>
-              </div>
-            </el-option>
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" type="danger" plain @click="dialogFormVisible = false">关 闭</el-button>
-        <el-button size="mini" type="primary" plain @click="Preservation(form)">保 存</el-button>
+  <el-container element-loading-background="rgba(0, 0, 0, 0.7)" element-loading-text="拼命加载中" class="set-background">
+    <el-header class="header">
+      <el-menu :default-active="activeIndex" active-text-color="#409EFF" mode="horizontal" @select="handleSelect">
+        <el-menu-item index="0">组织配置</el-menu-item>
+        <el-menu-item index="1">业务模块配置</el-menu-item>
+      </el-menu>
+    </el-header>
+    <section v-show="activeIndex === '0'" class="one-hao">
+      <div class="two-hao">
+        <el-tabs v-model="activeName" class="abc" @tab-click="handleClick">
+          <el-tab-pane label="我的" name="second">
+            <div align="right" style="margin-right: 1%;"><el-button size="mini" type="primary" @click="create_test(form)">新建团队</el-button></div>
+            <div align="center" style="margin: 1%;">
+              <el-table :data="table_Data" :header-cell-style="{ background: '#F0F2F4', color: '#333B4A' }" size="mini" width="80%" border show-overflow-tooltip="true">
+                <el-table-column label="团队名称" min-width="120" align="center"><template slot-scope="scope">{{ scope.row.teamName }}</template></el-table-column>
+                <el-table-column label="我的角色" min-width="120" align="center"><template slot-scope="scope">{{ scope.row.teamAttribute[0] }}, {{ scope.row.teamAttribute[1] }}</template></el-table-column>
+                <el-table-column label="成员名单" min-width="120" align="center">
+                  <template slot-scope="scope">
+                    <span v-for="(item, i) in scope.row.memberName" :key=" i + 'a'">{{ item }}<span v-show="item" style="color: red; margin-left: 2%;">Leader 、</span></span>
+                    <span v-for="(item, index) in scope.row.memberName1" :key="index">{{ item }} 、 </span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" align="center">
+                  <template slot-scope="scope"><el-button size="mini" type="primary" plain @click="update_test(scope.row)">编辑</el-button></template>
+                </el-table-column>
+              </el-table>
+              <el-pagination :current-page.sync="currentPage1" :page-sizes="[15]" background layout="total, prev, pager, next" :total="total1" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="全部" name="third">
+            <div align="right" style="margin-right: 1%;"><el-button size="mini" type="primary" @click="create_test(form)">新建团队</el-button></div>
+            <div align="center" style="margin: 1%;">
+              <el-table v-loading="loading" :data="tableData" :header-cell-style="{ background: '#F0F2F4', color: '#333B4A' }" size="mini" width="80%" border show-overflow-tooltip="true">
+                <el-table-column label="团队名称" min-width="100" align="center"><template slot-scope="scope">{{ scope.row.teamName }}</template></el-table-column>
+                <el-table-column label="团队属性" min-width="60" align="center"><template slot-scope="scope">{{ scope.row.teamAttribute[0] }} {{ scope.row.teamAttribute[1] }}</template></el-table-column>
+                <el-table-column label="成员名单" min-width="120" align="center" show-overflow-tooltip>
+                  <template slot-scope="scope">
+                    <span v-for="(item1, index) in scope.row.memberName" :key="index+'a'">{{ item1 }}<span v-show="item1" style="color: red; margin-left: 2%;">Leader 、</span></span>
+                    <span v-for="(item, index) in scope.row.memberName1" :key="index">{{ item }}、</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" align="center">
+                  <template slot-scope="scope"><el-button size="mini" type="primary" plain @click="update_test(scope.row)">编辑</el-button></template>
+                </el-table-column>
+              </el-table>
+              <el-pagination :current-page.sync="currentPage1" :page-size="15" :page-sizes="[15, 30, 40, 50]" background layout="total, prev, pager, next" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+            </div>
+          </el-tab-pane>
+        </el-tabs>
       </div>
-    </el-dialog>
-  </div>
+      <el-dialog :title="title_name" :visible.sync="dialogFormVisible" width="30%" center :close-on-click-modal="false">
+        <el-form ref="form" label-position="left" :model="form" :rules="rules" label-width="110px">
+          <el-form-item label="团队名称" prop="teamName">
+            <el-input v-model="form.teamName" autocomplete="off" placeholder="请输入团队名称，不得超过20个汉字" @blur="blur_teamName(form.teamName)" />
+          </el-form-item>
+          <el-form-item label="团队属性" prop="teamAttribute">
+            <el-select v-model="form.teamAttribute" style="width: 100%;" placeholder="请选择">
+              <el-option v-for="item in arr_team" :key="item.code" :label="item.msg" :value="item.code" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="团队Leader">
+            <el-select v-model="form.lerader" style="width: 100%;" multiple filterable remote reserve-keyword placeholder="请输入姓名或者邮箱前缀" :remote-method="remoteMethod" :loading="loading" @change="team_lerader(form.lerader)">
+              <el-option v-for="item in options" :key="item.idap" :label="item.name" :value="test2(item, 1)">
+                <div style="display: flex;justify-content: start;">
+                  <div style="min-width:100px;color: #8492a6; font-size: 13px; overflow:hidden">{{ item.deptName }}</div>
+                  <div style="min-width:80px">{{ item.name }}</div>
+                  <div style="min-width:100px;color: #8492a6; font-size: 13px; overflow:hidden">{{ item.idap }}</div>
+                </div>
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="团队成员" prop="dates">
+            <el-select v-model="form.dates" style="width: 100%;" multiple filterable remote reserve-keyword placeholder="请输入姓名或者邮箱前缀" :remote-method="remoteMethod" :loading="loading" @change="team_dates(form.dates)">
+              <el-option v-for="item in options" :key="item.idap" :label="item.name" :value="test2(item, 0)">
+                <div style="display: flex;justify-content: start;">
+                  <div style="min-width:100px;color: #8492a6; font-size: 13px; overflow:hidden">{{ item.deptName }}</div>
+                  <div style="min-width:80px">{{ item.name }}</div>
+                  <div style="min-width:100px;color: #8492a6; font-size: 13px; overflow:hidden">{{ item.idap }}</div>
+                </div>
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button size="mini" type="danger" plain @click="dialogFormVisible = false">关 闭</el-button>
+          <el-button size="mini" type="primary" plain @click="Preservation(form)">保 存</el-button>
+        </div>
+      </el-dialog>
+    </section>
+    <section v-show="activeIndex === '1'" class="one-hao">
+      <div class="two-hao">
+        <el-container style="height:calc(100vh - 140px);">
+          <el-aside class="aside">
+            <label class="tab-line">业务线<i class="el-icon-circle-plus" @click="handlerNodeTree('add');dialogTitle='新增业务线'" /></label>
+            <el-tree
+              ref="tree"
+              node-key="id"
+              :data="treeData"
+              :highlight-current="true"
+              @node-click="handleNodeClick"
+            >
+              <span slot-scope="{ node, data }" class="custom-tree-node">
+                <span>{{ node.label }}</span>
+                <el-popover
+                  trigger="click"
+                  placement="bottom"
+                >
+                  <div class="edit-cancel">
+                    <el-button size="mini" type="text" @click.stop="handlerNodeTree('edit',data); dialogTitle='编辑业务线'">编辑</el-button>
+                    <el-button size="mini" type="text" @click.stop="handlerNodeTree('delete',data); dialogTitle='删除确认'">删除</el-button>
+                  </div>
+                  <i slot="reference" class="el-icon-more icon-display" />
+                </el-popover>
+              </span>
+            </el-tree>
+          </el-aside>
+          <normal-dialog :show-dialog="showDialog" :title="dialogTitle" @confirm="confirm('nodeForm')" @cancel="showDialog=false">
+            <el-form ref="nodeForm" :model="nodeForm" :rules="nodeRules">
+              <el-form-item v-if="curcentDialog === 'add' || curcentDialog === 'edit' " label="业务线名称" :label-width="formLabelWidth" prop="name">
+                <el-col :span="11">
+                  <el-input v-model="nodeForm.name" autocomplete="off" placeholder="不超过10个字符" />
+                </el-col>
+              </el-form-item>
+              <el-form-item v-if="curcentDialog === 'add'" label="ID标识" :label-width="formLabelWidth" prop="id">
+                <el-col :span="11">
+                  <el-input v-model.number="nodeForm.id" autocomplete="off" placeholder="请输入数字" />
+                </el-col>
+              </el-form-item>
+              <el-form-item v-if="curcentDialog === 'edit'" label="ID标识" :label-width="formLabelWidth" prop="id">
+                <el-col :span="11">
+                  <el-input v-model.number="nodeForm.id" autocomplete="off" placeholder="请输入数字" :disabled="true" />
+                </el-col>
+              </el-form-item>
+              <el-col v-if="curcentDialog === 'delete'" :span="11">
+                是否要删除业务：<span style="color: #E6A23C">{{ nodeForm.name }}</span>
+              </el-col>
+            </el-form>
+          </normal-dialog>
+          <el-main class="combine-table">
+            <el-row class="table-main">
+              <div class="table-title">{{ curcentTreeData.label }}</div>
+              <div class="table-id">ID:{{ curcentTreeData.id }}</div>
+            </el-row>
+            <div>
+              <el-table
+                :data="tableData1"
+                style="width: 100%;margin-bottom: 20px;"
+                row-key="id"
+                border
+                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+              >
+                <el-table-column prop="date" label="模块名称" width="180" />
+                <el-table-column prop="name" label="创建人" width="180" />
+                <el-table-column prop="address" label="创建时间" />
+                <el-table-column label="操作">
+                  <template slot-scope="scope">
+                    <el-button
+                      size="mini"
+                      @click="handleEdit(scope.$index, scope.row)"
+                    >编辑</el-button>
+                    <el-button
+                      size="mini"
+                      type="danger"
+                      @click="handleDelete(scope.$index, scope.row)"
+                    >删除</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </el-main>
+        </el-container>
+      </div>
+    </section>
+  </el-container>
 </template>
 <script>
 
-import { teamCreateTeam, memberQueryMemberInfoByIDAPorName, teamQueryTeamInfoList, configShowTeamAndMemberEnum, teamIsTeamNameRepetition, teamQueryTeamInfo, teamModifyTeam } from '@/api/configure'
-
+import { teamCreateTeam, memberQueryMemberInfoByIDAPorName, teamQueryTeamInfoList, configShowTeamAndMemberEnum, teamIsTeamNameRepetition, teamQueryTeamInfo, teamModifyTeam, getBizList, verifyIsAdmin, addBiz, updateBiz, deleteBiz } from '@/api/configure'
+import normalDialog from '@/components/dialog/normalDialog'
 export default {
   name: 'PersonalWorkbench',
+  components: { normalDialog },
   data() {
     return {
       userInformation: localStorage.getItem('username'),
@@ -120,14 +213,61 @@ export default {
       total: 0,
       total1: 0,
       curIndex: 1,
-      pageSize: 15
+      pageSize: 15,
+      activeIndex: '1',
+      isAdmin: false, // 是否管理员
+      treeData: [],
+      curcentTreeData: { id: null, label: null },
+      showDialog: false,
+      dialogTitle: '', // 对话框title
+      curcentDialog: '', // 当前业务线窗口的类型
+      nodeForm: { id: null, name: null }, // 添加节点form
+      formLabelWidth: '120px',
+      nodeRules: {
+        name: [
+          { required: true, message: '请输入业务线名称', trigger: 'blur' },
+          { min: 1, max: 10, message: '业务线名称过长', trigger: 'blur' }
+        ],
+        id: [
+          { required: true, message: 'id不能为空' },
+          { type: 'number', message: 'id必须为数字值' }
+        ]
+      },
+      tableData1: [{
+        id: 3,
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1519 弄',
+        children: [{
+          id: 31,
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        }, {
+          id: 32,
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        }]
+      }]
     }
   },
   created() {
+    this.get_isAdmin()
     this.get_select()
     this.get_list(this.userInformation)
+    this.getBiz_list()
   },
   methods: {
+    async get_isAdmin() { // 是否管理员
+      const res = await verifyIsAdmin({})
+      if (res.code === 200) {
+        this.isAdmin = res.data
+      }
+    },
+    handleSelect(key, keyPath) { // 切换导航
+      this.activeIndex = key
+    },
     test2(item, e) { // 获取团队人员信息
       if (typeof this.test[item.idap] === 'undefined') {
         item.role = e
@@ -306,11 +446,204 @@ export default {
           return item.code <= 3
         })
       })
+    },
+    async getBiz_list() { // 获取业务线
+      const res = await getBizList({})
+      if (res.code === 200) {
+        this.treeData = res.data.map((item) => {
+          return { id: item.code, label: item.name }
+        })
+        this.curcentTreeData = this.treeData[0]
+        this.$nextTick(() => {
+          this.$refs.tree.setCurrentKey(this.treeData[0].id)
+        })
+      } else {
+        this.$message({ message: res.msg, type: 'error' })
+      }
+    },
+    handlerNodeTree(type, data) { // 业务线操作
+      if (this.isAdmin) {
+        this.showDialog = true
+        this.curcentDialog = type
+        if (type === 'add') {
+          this.nodeForm = { id: null, name: null }
+        } else {
+          this.nodeForm = { id: this.curcentTreeData.id, name: this.curcentTreeData.label }
+        }
+      } else {
+        this.$message({ message: '没有权限，请联系管理员廖子君、朱晓菲进行配置！', type: 'error' })
+      }
+    },
+    confirm(formName) { // 业务线确认操作
+      if (this.curcentDialog === 'add') {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.addNodeTree(this.nodeForm)
+          } else {
+            this.$message({ message: '填写格式不正确', type: 'error' })
+            return false
+          }
+        })
+      }
+      if (this.curcentDialog === 'edit') {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.editNodeTree(this.nodeForm)
+          } else {
+            this.$message({ message: '填写格式不正确', type: 'error' })
+            return false
+          }
+        })
+      }
+      if (this.curcentDialog === 'delete') {
+        this.deteleNodeTree(this.nodeForm)
+      }
+    },
+    async addNodeTree(nodeForm) { // 添加业务线请求
+      const res = await addBiz({ id: nodeForm.id, bizName: nodeForm.name })
+      if (res.code === 200) {
+        this.$message({ message: '添加成功', type: 'success' })
+        this.getBiz_list()
+        this.showDialog = false
+      } else {
+        this.$message({ message: res.msg, type: 'error' })
+      }
+    },
+    async editNodeTree(nodeForm) { // 编辑业务线
+      const res = await updateBiz({ id: nodeForm.id, bizName: nodeForm.name })
+      if (res.code === 200) {
+        this.$message({ message: '修改成功', type: 'success' })
+        this.getBiz_list()
+        this.showDialog = false
+      } else {
+        this.$message({ message: res.msg, type: 'error' })
+      }
+    },
+    async deteleNodeTree(nodeForm) { // 删除业务线
+      const res = await deleteBiz({ id: nodeForm.id })
+      if (res.code === 200) {
+        this.$message({ message: '删除成功', type: 'success' })
+        this.getBiz_list()
+        this.showDialog = false
+      } else {
+        this.$message({ message: res.msg, type: 'error' })
+      }
+    },
+    handleNodeClick(data) { // 选择业务线
+      console.log(data)
+      this.curcentTreeData = {
+        id: data.id,
+        label: data.label
+      }
+    },
+    handleEdit() {
+
+    },
+    handleDelete() {
+
     }
   }
 }
 </script>
 <style lang="scss">
+  .set-background{
+    background-color: #F2F3F6;
+    min-width: 900px;
+  }
+  .header{
+    width: 98%;
+    background-color: white;
+    border-radius: 4px;
+    margin: 15px auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    overflow: hidden;
+    padding: 0;
+  }
+  .one-hao{
+    height: calc(100vh - 80px);
+    background-color: #F2F3F6;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .two-hao {
+      height: 96%;
+      width: 98%;
+      overflow: auto;
+      border-radius:4px;
+      .tab-line {
+        width: 100%;
+        display: inline-block;
+        padding-left: 15%;
+        margin-bottom: 5%;
+        color: #606266;
+        i {
+          margin-left: 5%;
+          color: rgb(64, 158, 255);
+        }
+      }
+      .icon-display {
+        display: none;
+      }
+      .is-current .icon-display {
+        display: inline-block;
+      }
+      .is-current {
+        color: rgb(64, 158, 255);
+        background-color: #f0f7ff;
+      }
+    }
+  }
+  .aside{
+    width: 12.9% !important;
+    overflow-x: scroll;
+    margin: 0 0 1.5% 0;
+    padding-top: 1.5%;
+    background-color: white;
+    border-radius: 7px;
+    cursor: default !important;
+  }
+  .combine-table{
+    background-color: white;
+    border-radius: 4px;
+    width: 82.7%;
+    margin: 0 0 1.5% 1.5%;
+    flex: 0 1 auto !important;
+    .table-main{
+      display: flex;
+      align-items: center;
+    }
+    .table-title {
+      color: #606266;
+      font-size: 20px;
+      font-weight: bold;
+      margin-right: 20px;
+    }
+    .table-id {
+      color: #909399;
+      font-size: 14px;
+    }
+    .el-col {
+      display: flex;
+      align-items: center;
+    }
+  }
+  .el-popover {
+    min-width: 100px !important;
+  }
+  // .edit-cancel {
+  //   display: flex;
+  //   justify-content: space-around;
+  // }
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+  }
   .abc .el-tabs__nav-wrap::after {
     background-color:#FFFFFF !important;
   }