@arkxos/arkos-system 0.1.0

package/src/views/menu/menu.vue

@@ -0,0 +1,883 @@
+<template>
+  <div class="page-container">
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane
+        v-for="subsystem in subsystemList"
+        :key="subsystem.id"
+        :label="subsystem.name"
+        :name="subsystem.id"
+      />
+    </el-tabs>
+    <el-container>
+      <el-aside width="250px" class="page-aside" v-drag v-collapse>
+        <div class="title">
+          <div class="title-content">菜单</div>
+          <div class="title-button">
+            <div
+              v-if="(subsystemList.find(item => item.id === activeName) || {}).type !== '1'"
+              class="button-list"
+            >
+              <div class="button-item">
+                <ac-icon
+                  iconId="018dca412c4e207388f7"
+                  :style="'cursor: pointer;color: ' + (treeCheck ? 'rgb(0,133,246)' : '#999') + ';font-size: 18px;'"
+                  :title="treeCheck ? '导入模式' : '导出模式'"
+                  @click.stop="changeMode"
+                />
+              </div>
+              <div class="button-item">
+                <ac-icon
+                  iconId="018ece4f749ec5911772"
+                  style="cursor: pointer;color: rgb(0,133,246); font-size: 18px;"
+                  title="导出菜单"
+                  @click.stop="handleExport"
+                />
+              </div>
+              <div class="button-item">
+                <el-upload
+                  action=""
+                  :http-request="handleImport"
+                  :show-file-list="false"
+                  accept=".dat"
+                >
+                  <ac-icon
+                    iconId="018ece4f70fcf0627f81"
+                    style="cursor: pointer;color: rgb(0,133,246); font-size: 18px;"
+                    title="导入菜单"
+                  />
+                </el-upload>
+              </div>
+            </div>
+            <span class="title-button-box" @click="addMenu({})">
+              <el-tooltip placement="bottom" content="新增菜单">
+                <ac-icon iconId="018dc9c3efed46e8b927" size="18" />
+              </el-tooltip>
+            </span>
+          </div>
+        </div>
+        <el-row>
+          <el-input
+            placeholder="菜单搜索"
+            v-model="filterText"
+            style="margin-right: 10px"
+          ></el-input>
+        </el-row>
+        <el-row class="page-aside-grow">
+          <el-tree
+            ref="tree"
+            v-loading="menuLoading"
+            element-loading-text="数据加载中..."
+            class="tree"
+            :data="treeData"
+            node-key="id"
+            :props="treeProps"
+            :highlight-current="true"
+            :default-expanded-keys="treeExpand"
+            :expand-on-click-node="true"
+            @node-click="nodeClick"
+            :filter-node-method="filterNode"
+            :show-checkbox="treeCheck"
+          >
+            <template v-slot="{ data }">
+              <div class="node-item">
+                <span class="node-label" :title="data.text"><span>{{data.text}}</span></span>
+                <div class="node-button">
+                  <el-dropdown trigger="hover" placement="bottom-start">
+                    <span class="node-button-item">
+                      <ac-icon iconId="018dca6283a1e534a046" @click.stop />
+                    </span>
+                    <template #dropdown>
+                      <el-dropdown-menu>
+                        <el-dropdown-item @click="addMenu(data.data)">
+                          <ac-icon iconId="018dc9c3efb74ac607cb" color="#67C23A" style="margin-right: 5px" />新增菜单
+                        </el-dropdown-item>
+                        <el-dropdown-item @click="editMenu(data.data)">
+                          <ac-icon iconId="018dca6db20c6a3aaf68" color="#0085f6" style="margin-right: 5px" />修改菜单
+                        </el-dropdown-item>
+                        <el-dropdown-item
+                          v-if="data.data.type === '页面' && data.data.pageId"
+                          @click="showRelation(data.data.pageId)"
+                        >
+                          <ac-icon iconId="018ece4f6d46159ee26e" color="#43CCF8" style="margin-right: 5px" />关系图谱
+                        </el-dropdown-item>
+                        <el-dropdown-item @click="moveMenu(data.data)">
+                          <ac-icon iconId="018dca444e0754edef13" color="#FF6600" style="margin-right: 5px" />移动菜单
+                        </el-dropdown-item>
+                        <el-dropdown-item @click="deleteMenu(data.data)">
+                          <ac-icon iconId="018dc9c3efd3a0502886" color="#F56C6C" style="margin-right: 5px" />删除菜单
+                        </el-dropdown-item>
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
+                </div>
+              </div>
+            </template>
+          </el-tree>
+        </el-row>
+      </el-aside>
+      <el-main v-if="formData.button">
+        <div class="right-main">
+          <el-form
+            ref="dataForm"
+            label-width="85px"
+            label-position="right"
+            :model="formData"
+            :rules="rules"
+          >
+            <el-row>
+              <el-col :span="4">
+                <el-form-item label="菜单名称" prop="name">
+                  <el-input v-model="formData.name" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="4">
+                <el-form-item label="菜单类型" prop="type">
+                  <ac-select
+                    v-if="(subsystemList.find(item => item.id === activeName) || {}).type === '1'"
+                    v-model="formData.type"
+                    options='菜单,目录'
+                  />
+                  <ac-select
+                    v-if="(subsystemList.find(item => item.id === activeName) || {}).type !== '1'"
+                    v-model="formData.type"
+                    options='目录,页面,挂接,外链,流程'
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="4">
+                <el-form-item label="上级菜单" prop="parentId">
+                  <ac-tree
+                    v-model="formData.parentId"
+                    dataUrl="/system/menu/queryTree"
+                    :query="{subsystemId: activeName}"
+                    :leafSelect="false"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="4">
+                <el-form-item label="排序" prop="ordinal">
+                  <ac-number v-model="formData.ordinal" :point="0" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="3">
+                <el-form-item label="默认显示" prop="defaultShow">
+                  <ac-dict-switch v-model="formData.defaultShow" dictCode="dictYesNo" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="3">
+                <el-form-item label="是否有效" prop="valid">
+                  <ac-dict-switch v-model="formData.valid" dictCode="dictYesNo" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="4" v-if="formData.type === '挂接'">
+                <el-form-item label="页面名称" prop="pageId">
+                  <ac-tree
+                    v-model="formData.pageId"
+                    dataUrl="/system/page/queryTree"
+                    :leafSelect="true"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="4" v-if="formData.type === '外链'">
+                <el-form-item label="打开方式" prop="linkOpenMode">
+                  <ac-select
+                    v-model="formData.linkOpenMode"
+                    :options='[{key: "1", value: "内嵌"},{key: "2", value: "新窗口"}]'
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="4" v-if="formData.type === '外链'">
+                <el-form-item label="外链来源" prop="linkSource">
+                  <ac-select
+                    v-model="formData.linkSource"
+                    :options='[{key: "1", value: "录入"},{key: "2", value: "脚本"}]'
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="14" v-if="formData.type === '外链' && formData.linkSource === '1'">
+                <el-form-item label="外链地址" prop="linkUrl">
+                  <el-input v-model="formData.linkUrl" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="14" v-if="formData.type === '外链' && formData.linkSource === '2'">
+                <el-form-item label="外链脚本" prop="linkScriptId">
+                  <ac-tree
+                    v-model="formData.linkScriptId"
+                    data-url="/system/scriptGroovy/queryTree"
+                    type-select="script"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="4" v-if="formData.type === '流程'">
+                <el-form-item label="流程名称" prop="flowId">
+                  <ac-remote-select
+                    v-model="formData.flowId"
+                    dataUrl="/system/flow/queryPage"
+                    :option="{id: formData.flowId, name: formData.flowName}"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="4" v-if="formData.type === '流程'">
+                <el-form-item label="保存后跳转" prop="flowJumpId">
+                  <ac-tree
+                    v-model="formData.flowJumpId"
+                    dataUrl="/system/menu/queryTree"
+                    :query="{subsystemId: activeName}"
+                    :leafSelect="false"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col
+                v-if="(formData.type === '页面' || formData.type === '挂接')
+                  && (subsystemList.find(item => item.id === activeName) || {}).type === '2'"
+                :span="4"
+              >
+                <el-form-item label="布局页面" prop="layoutPageId">
+                  <ac-tree
+                    v-model="formData.layoutPageId"
+                    dataUrl="/system/page/queryTree"
+                    :leafSelect="true"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col
+                v-if="(subsystemList.find(item => item.id === activeName) || {}).type === '2'"
+                :span="4"
+              >
+                <el-form-item label="路由页面" prop="onlyRoute">
+                  <ac-dict-switch v-model="formData.onlyRoute" dictCode="dictYesNo" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12" v-if="formData.type === '菜单'">
+                <el-form-item label="菜单路径" prop="vuePath">
+                  <el-input v-model="formData.vuePath" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12" v-if="formData.type === '菜单'">
+                <el-form-item label="数据地址" prop="url">
+                  <el-input v-model="formData.url" />
+                </el-form-item>
+              </el-col>
+              <el-col
+                :span="24"
+                v-if="currSubsystem
+                  && currSubsystem.type === '2'
+                  && formData.type === '页面'
+                  && shareUrl"
+              >
+                <el-form-item label="外链地址" prop="url">
+                  <el-input v-model="shareUrl" disabled />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+          <ac-edit-table
+            v-if="formData.type === '菜单'"
+            ref="editTable"
+            width="100%"
+            style="width: 100%"
+            tips="权限按钮"
+            :columns="privilegeColumns"
+            :rules="privilegeRules"
+            :dataList="formData.privilegeList"
+          ></ac-edit-table>
+          <PageEdit ref="page" v-if="formData.type === '页面'" :options="pageData" />
+        </div>
+        <div class="button-box">
+          <el-button
+            v-if="formData.id && formData.pageId"
+            type="success"
+            @click="showRelation(formData.pageId)"
+          >关系图谱</el-button>
+          <el-button
+            style="margin-left: 8px;"
+            type="primary"
+            :loading="editLoading"
+            @click="submitForm"
+          >提交</el-button>
+        </div>
+      </el-main>
+    </el-container>
+
+    <!--移动菜单-->
+    <el-dialog
+      v-model="moveVisible"
+      title="移动菜单"
+      width="500px"
+      :close-on-click-modal="false"
+      destroy-on-close
+      draggable
+    >
+      <el-form
+        ref="moveForm"
+        label-width="120px"
+        label-position="right"
+        :model="moveData"
+      >
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="菜单">
+              <ac-input
+                v-model="moveData.name"
+                :disabled="true"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="移动到" prop="parentId">
+              <ac-tree
+                v-model="moveData.parentId"
+                dataUrl="/system/menu/queryTree"
+                :query="{subsystemId: activeName}"
+                :leafSelect="false"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <el-button
+          size="default"
+          type="info"
+          @click="moveVisible=false"
+        >取消</el-button>
+        <el-button
+          type="primary"
+          size="default"
+          :loading="moveLoading"
+          @click="submitMoveForm"
+        >提交</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog
+      v-model="relationVisible"
+      class="no-padding"
+      title="关系图谱"
+      :close-on-click-modal="false"
+      destroy-on-close
+      fullscreen
+    >
+      <relation-page :pageId="relationPageId" />
+      <template #footer>
+        <el-button
+          size="default"
+          type="info"
+          @click="relationVisible=false"
+        >关闭</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, watch, nextTick, computed } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import api from '@/http/api';
+import RelationPage from '@/views/codeless/relationPage.vue';
+import PageEdit from '@/views/codeless/pageEdit.vue';
+
+const defaultFormData = ref({
+  id: '',
+  parentId: '0',
+  type: '页面',
+  name: '',
+  icon: '',
+  vuePath: '',
+  url: '',
+  defaultShow: '0',
+  valid: '1',
+  needPermit: '1',
+  ordinal: 1,
+  privilegeList: []
+});
+
+const activeName = ref('');
+const currSubsystem = ref(null);
+const subsystemList = ref([]);
+
+const filterText = ref('');
+const treeData = ref([]);
+const treeProps = ref({
+  children: 'children',
+  label: 'text'
+});
+const treeExpand = ref(['0']);
+const menuLoading = ref(true);
+
+const editLoading = ref(false);
+const formData = ref(defaultFormData.value);
+const rules = ref({
+  name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
+  type: [{ required: true, message: '请选择菜单类型', trigger: ['blur', 'change'] }],
+  valid: [{ required: true, message: '请选择是否有效', trigger: ['blur', 'change'] }],
+  ordinal: [
+    { required: true, message: '请输入排序', trigger: 'blur' },
+    { type: 'number', message: '排序必须为数字', trigger: 'blur' }]
+});
+const privilegeColumns = ref([
+  { prop: 'name', label: '名称', minWidth: 110 },
+  { prop: 'type', label: '类型', width: 80, type: 'select', options: '按钮,权限' },
+  { prop: 'buttonLevel', label: '按钮级别', width: 80, type: 'select', options: '表级,行级,全部', show: (data) => data['type'] === '按钮' },
+  {
+    prop: 'buttonClass',
+    label: '按钮样式',
+    width: 80,
+    type: 'select',
+    allowCreate: true,
+    options: () => {
+      return [
+        { key: 'primary', value: '蓝色' },
+        { key: 'success', value: '绿色' },
+        { key: 'warning', value: '黄色' },
+        { key: 'info', value: '灰色' },
+        { key: 'danger', value: '红色' },
+      ]
+    },
+    show: (data) => data['type'] === '按钮'
+  },
+  {
+    prop: 'buttonIcon',
+    label: '按钮图标',
+    width: 70,
+    type: 'icon-select',
+    allowCreate: true,
+    show: (data) => data['type'] === '按钮'
+  },
+  {
+    prop: 'buttonType',
+    label: '按钮类型',
+    width: 120,
+    type: 'select',
+    options: () => {
+      return [
+        { key: 'add', value: '新增' },
+        { key: 'addSub', value: '新增子项' },
+        { key: 'edit', value: '编辑' },
+        { key: 'delete', value: '删除' },
+        { key: 'ajax', value: 'Ajax提交' },
+        { key: 'downloadExcel', value: 'Excel下载' },
+        { key: 'importExcel', value: 'Excel导入' },
+        { key: 'open', value: '开启' },
+        { key: 'close', value: '关闭' },
+      ]
+    },
+    allowCreate: true,
+    show: (data) => data['type'] === '按钮'
+  },
+  {
+    prop: 'selectedMode',
+    label: '选择方式',
+    width: 110,
+    type: 'select',
+    options: () => {
+      return [
+        { key: '1', value: '不用选择' },
+        { key: '2', value: '单选(必选)' },
+        { key: '3', value: '多选(可选)' },
+        { key: '4', value: '多选(必选)' },
+      ]
+    },
+    show: (data) => data['type'] === '按钮'
+  },
+  { prop: 'dataSourUrl', label: '数据来源地址', minWidth: 120, show: (data) => data['type'] === '按钮' },
+  { prop: 'dataDestUrl', label: '数据目标地址', minWidth: 140, show: (data) => data['type'] === '按钮' },
+  { prop: 'clickTips', label: '点击提示', minWidth: 120, show: (data) => data['type'] === '按钮' },
+  { prop: 'ordinal', label: '排序', width: 80, type: 'number' },
+]);
+const privilegeRules = ref({
+  name: [{ required: true, message: '请输入按钮名称', trigger: 'blur' }],
+  type: [{ required: true, message: '请选择类型', trigger: ['blur', 'change'] }],
+  buttonLevel: [{ required: true, message: '请选择按钮级别', trigger: 'change' }],
+  buttonType: [{ required: true, message: '请选择按钮类型', trigger: 'change' }],
+  selectedMode: [{ required: true, message: '请选择选择方式', trigger: 'change' }],
+  ordinal: [
+    { required: true, message: '请输入排序', trigger: 'blur' },
+    { type: 'number', message: '排序必须为数字', trigger: 'blur' }]
+});
+
+const page = ref();
+const pageData = ref({});
+
+const tree = ref();
+const dataTable = ref();
+const dataForm = ref();
+const editTable = ref();
+
+const moveVisible = ref(false);
+const moveLoading = ref(false);
+const moveForm = ref();
+const moveData = ref({});
+
+const relationVisible = ref(false);
+const relationPageId = ref('');
+const treeCheck = ref(false);
+
+const changeMode = () => {
+  treeCheck.value = !treeCheck.value;
+  if (treeCheck.value) {
+    tree.value.setCheckedNodes([]);
+  }
+}
+
+const handleExport = () => {
+  const nodes = tree.value.getCheckedNodes(false, true);
+  if (!nodes || nodes.length === 0) {
+    ElMessage.error('请先选择菜单！');
+    return;
+  }
+  const data = nodes.map(item => item.id);
+  api.downloadFile('/system/menu/exportData', { ids: data }).then(res => api.saveFileLocal(res));
+};
+
+const handleImport = (file) => {
+  api.uploadFile('/system/menu/importData', { file: file.file }).then((res) => {
+    ElMessage.success(res.message);
+    loadTreeData(activeName.value);
+  });
+};
+
+const handleClick = (tab) => {
+  treeCheck.value = false;
+  activeName.value = tab.paneName;
+  currSubsystem.value = subsystemList.value.find(item => item.id === activeName.value);
+  formData.value = Object.assign({}, defaultFormData.value);
+  loadTreeData(activeName.value);
+};
+
+const filterNode = (value, data) => {
+  if (!value) return true;
+  return data.text.indexOf(value) >= 0;
+};
+
+const currNode = ref(null);
+const nodeClick = (data, treeNode) => {
+  if (currNode.value && currNode.value.id === data.id) {
+    treeNode.checked = !treeNode.checked;
+  } else {
+    treeNode.checked = true;
+  }
+
+  if (treeNode.checked) {
+    currNode.value = data;
+    editMenu(data);
+  } else {
+    tree.value.setCurrentKey(null);
+    editMenu({});
+  }
+};
+
+const addMenu = (data) => {
+  const type = (subsystemList.value.find(item => item.id === activeName.value) || {}).type;
+  if (type === '2') {
+    formData.value = Object.assign({},
+      { parentId: data.id || '', type: '页面', valid: '1', ordinal: 1 },
+      { button: { dataDestUrl: '/system/menu/save' } });
+    pageData.value = { type: '可视化' };
+  } else {
+    formData.value = Object.assign({},
+      { parentId: data.id || '', type: type === '1' ? '菜单' : '页面', valid: '1', ordinal: 1 },
+      { button: { dataDestUrl: '/system/menu/save' } });
+    pageData.value = { type: '' };
+  }
+  clearValidate();
+};
+
+const editMenu = (data) => {
+  pageData.value = {};
+  if (data.id) {
+    api.post('/system/menu/queryBy', { id: data.id }).then(res => {
+      formData.value = Object.assign({}, res.data, { button: { dataDestUrl: '/system/menu/save' } });
+      if (res.data.pageId) {
+        api.post('/system/page/queryBy', { id: res.data.pageId }).then(page => {
+          pageData.value = page.data;
+          clearValidate();
+        });
+      }
+      clearValidate();
+    }).catch(() => {});
+    clearValidate();
+  } else {
+    addMenu({});
+  }
+};
+
+const clearValidate = () => {
+  nextTick(() => {
+    dataForm.value && dataForm.value.clearValidate();
+    page.value && page.value.clearValidate();
+  });
+};
+
+const moveMenu = (data) => {
+  moveVisible.value = true;
+  moveData.value = { id: data.id, name: data.name, parentId: data.parentId };
+  moveForm.value && moveForm.value.resetFields();
+};
+
+const submitMoveForm = () => {
+  moveForm.value && moveForm.value.validate((valid) => {
+    if (valid) {
+      ElMessageBox.confirm('请确认是否提交？', '提示', { type: 'info' }).then(() => {
+        moveLoading.value = true;
+        const data = { id: moveData.value.id, parentId: moveData.value.parentId };
+        const url = '/system/menu/updateParentId';
+        api.post(url, data).then(res => {
+          ElMessage.success(res.message);
+          moveVisible.value = false;
+          moveLoading.value = false;
+          treeExpand.value.push(res.data.id || '0');
+          loadTreeData(activeName.value);
+        }).catch(() => {
+          moveLoading.value = false;
+        });
+      }).catch(() => {});
+    }
+  });
+};
+
+const deleteMenu = (data) => {
+  const url = '/system/menu/delete';
+  ElMessageBox.confirm('请确认是否删除【' + data.name + '】？', '提示', { type: 'warning' }).then(() => {
+    api.post(url, { id: data.id }).then(res => {
+      ElMessage.success(res.message);
+      treeExpand.value.push(data.parentId || '0');
+      loadTreeData(activeName.value);
+    });
+  }).catch(() => {});
+};
+
+const submitForm = async() => {
+  if (dataForm.value && !(await dataForm.value.validate())) return;
+  if (editTable.value && !(await editTable.value.validate())) return;
+  if (page.value && !(await page.value.validate())) return;
+
+  ElMessageBox.confirm('请确认是否提交？', '提示', { type: 'info' }).then(() => {
+    formData.value.subsystemId = activeName.value;
+    formData.value.privilegeList = editTable.value && editTable.value.getList() || [];
+    formData.value.page = page.value && page.value.getData() || {};
+    api.post(formData.value.button.dataDestUrl, formData.value).then(res => {
+      editMenu(res.data);
+      ElMessage.success(res.message);
+      editLoading.value = false;
+      treeExpand.value.push(res.data.id || '0');
+      loadTreeData(activeName.value);
+    }).catch(() => {
+      editLoading.value = false;
+    });
+  }).catch(() => {});
+};
+
+const loadTreeData = (subsystemId) => {
+  menuLoading.value = true;
+  api.post('/system/menu/queryTree', { subsystemId: subsystemId }).then(res => {
+    treeData.value = res.data.children || [];
+    menuLoading.value = false;
+  }).catch(() => {
+    menuLoading.value = false;
+  });
+
+  nextTick(() => {
+    dataTable.value && dataTable.value.refreshPage();
+  })
+};
+
+const loadSubsystem = () => {
+  api.post('/business/subsystem/list').then(res => {
+    if (res.code === '1') {
+      subsystemList.value = res.data || [];
+      if (subsystemList.value.length > 0) {
+        activeName.value = subsystemList.value[0].id;
+        loadTreeData(activeName.value);
+      }
+    }
+  });
+};
+
+const showRelation = (pageId) => {
+  relationPageId.value = pageId;
+  relationVisible.value = true;
+};
+
+const shareUrl = computed(() => {
+  if (!formData.value || !formData.value.id || !formData.value.pageId) return '';
+  return window.location.protocol + '//' + window.location.host + '/portal.html#/home' +
+    '/' + formData.value.id + '/' + formData.value.pageId
+});
+
+watch(() => filterText.value, (val) => {
+  tree.value.filter(val)
+});
+
+onMounted(() => {
+  loadSubsystem();
+});
+</script>
+
+<style lang="scss" scoped>
+.el-main {
+  padding: 0 !important;
+  display: flex;
+  flex-direction: column;
+}
+
+.right-main {
+  overflow: auto;
+  flex-grow: 1;
+  height: 1px;
+  display: flex;
+  flex-direction: column;
+
+  :deep(.table-box) {
+    flex-grow: 0!important;
+    height: unset!important;
+  }
+
+  :deep(.page-container) {
+    width: 100%!important;
+    height: unset!important;
+    padding: 0!important;
+
+    .page-relation {
+      min-height: 800px;
+    }
+  }
+}
+
+.button-box {
+  width: 100%;
+  text-align: right;
+  padding-top: 10px;
+}
+.title {
+  display: flex;
+  flex-direction: row;
+  margin-right: 10px;
+  height: 40px;
+  align-items: center;
+
+  .title-content {
+    flex-grow: 1;
+    font-size: 18px;
+  }
+  .title-button {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+  .title-button .button-list {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .button-item {
+      margin: 0 5px 0 5px;
+    }
+  }
+  .title-button .title-button-box {
+    height: 30px;
+    width: 40px;
+    border-radius: 5px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    cursor: pointer;
+  }
+
+  .title-button .title-button-box:hover {
+    background: #eaeaea;
+    border: none;
+  }
+
+  .title-button .title-button-box:focus-visible {
+    outline: unset;
+  }
+}
+
+.filter-box {
+  margin-right: 10px;
+}
+
+.tree :deep(.el-tree-node__content) {
+  height: 40px!important;
+}
+
+.page-aside-grow {
+  width: 100% !important;
+
+  :deep(.el-tree) {
+    display: flex;
+    flex-direction: column;
+    width: 1px !important;
+  }
+
+  :deep(.el-tree-node) {
+    display: flex;
+    flex-direction: column;
+    width: 100% !important;
+  }
+
+  :deep(.el-tree-node__content) {
+    display: flex;
+    flex-grow: 1;
+  }
+}
+:deep(.el-tree-node:not(.is-current):focus>.el-tree-node__content) {
+    background-color: unset!important;
+}
+:deep(.el-tree-node:focus>.el-tree-node__content) {
+    background-color: unset!important;
+}
+:deep(.el-tree-node:focus>.el-tree-node__content:hover) {
+    background-color: #f5f7fa!important;
+}
+:deep(.el-tree-node.is-current:focus>.el-tree-node__content) {
+    background-color: #ecf5ff!important;
+}
+.node-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+
+  .node-label {
+    flex-grow: 1;
+    width: 1px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: flex;
+
+    > span {
+      width: 100%;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+  .node-button {
+    margin-right: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .node-button .node-button-item {
+    height: 30px;
+    width: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 5px;
+  }
+  .node-button .node-button-item:focus-visible {
+    outline: unset;
+  }
+}
+.node-item:hover {
+  .node-button .node-button-item:hover {
+    background: #eaeaea;
+  }
+}
+</style>