我们发布啦

admin/src/views/systemSetting/administratorAuthority/adminList/edit.vue

@@ -0,0 +1,180 @@
+<template>
+  <div>
+    <el-form ref="pram" :model="pram" :rules="rules" label-width="100px">
+      <el-form-item label="管理员账号" prop="account">
+        <el-input v-model="pram.account" placeholder="管理员账号" />
+      </el-form-item>
+      <el-form-item label="管理员密码" prop="pwd">
+        <el-input
+          v-model="pram.pwd"
+          placeholder="管理员密码,不更改可以不填写"
+          clearable
+          @input="handlerPwdInput"
+          @clear="handlerPwdInput"
+        />
+      </el-form-item>
+      <el-form-item v-if="pram.pwd" label="确认密码" prop="repwd">
+        <el-input v-model="pram.repwd" placeholder="确认密码" clearable />
+      </el-form-item>
+      <el-form-item label="管理员姓名" prop="realName">
+        <el-input v-model="pram.realName" placeholder="管理员姓名" />
+      </el-form-item>
+      <el-form-item label="管理员身份" prop="roles">
+        <el-select v-model="pram.roles" placeholder="身份" clearable multiple>
+          <el-option
+            v-for="item,index in roleList.list"
+            :key="index"
+            :label="item.roleName"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="状态">
+        <el-switch v-model="pram.status" :active-value="true" :inactive-value="false" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handlerSubmit('pram')">{{ isCreate===0?'確定':'更新' }}</el-button>
+        <el-button @click="close">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import * as constants from '@/utils/constants.js'
+import * as roleApi from '@/api/role.js'
+import * as systemAdminApi from '@/api/systemadmin.js'
+export default {
+  // name: "edit"
+  components: { },
+  props: {
+    isCreate: {
+      type: Number,
+      required: true
+    },
+    editData: {
+      type: Object,
+      default: () => {
+        return { rules: [] }
+      }
+    }
+  },
+  data() {
+    const validatePass = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请再次输入密码'))
+      } else if (value !== this.pram.pwd) {
+        callback(new Error('两次输入密码不一致!'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      constants,
+      pram: {
+        account: null,
+        level: null,
+        pwd: null,
+        repwd: null,
+        realName: null,
+        roles: null,
+        status: null,
+        id: null
+      },
+      roleList: [],
+      rules: {
+        account: [{ required: true, message: '请填管理员账号', trigger: ['blur', 'change'] }],
+        // level: null,
+        pwd: [{ required: true, message: '请填管理员密码', trigger: ['blur', 'change'] }],
+        repwd: [{ required: true, message: '确认密码密码', validator: validatePass, trigger: ['blur', 'change'] }],
+        realName: [{ required: true, message: '管理员姓名', trigger: ['blur', 'change'] }],
+        roles: [{ required: true, message: '管理员身份', trigger: ['blur', 'change'] }]
+      }
+    }
+  },
+  mounted() {
+    this.initEditData()
+    this.handleGetRoleList()
+  },
+  methods: {
+    close() {
+      this.$emit('hideEditDialog')
+    },
+    handleGetRoleList() {
+      const _pram = {
+        page: 1,
+        limit: constants.page.limit[4]
+      }
+      roleApi.getRoleList(_pram).then(data => {
+        this.roleList = data
+      })
+    },
+    initEditData() {
+      if (this.isCreate !== 1) return
+      const { account, realName, roles, level, status, id } = this.editData
+      this.pram.account = account
+      this.pram.realName = realName
+      const _roles = []
+      if (roles.length > 0 && !roles.includes(',')) {
+        _roles.push(Number.parseInt(roles))
+      } else {
+        _roles.push(...roles.split(',').map(item => Number.parseInt(item)))
+      }
+      this.pram.roles = _roles
+      this.pram.status = status
+      this.pram.id = id
+      this.rules.pwd = []
+      this.rules.repwd = []
+    },
+    handlerSubmit(form) {
+      this.$refs[form].validate(valid => {
+        if (!valid) return
+        if (this.isCreate === 0) {
+          this.handlerSave()
+        } else {
+          this.handlerEdit()
+        }
+      })
+    },
+    handlerSave() {
+      systemAdminApi.adminAdd(this.pram).then(data => {
+        this.$message.success('创建管理员成功')
+        this.$emit('hideEditDialog')
+      })
+    },
+    handlerEdit() {
+      this.pram.roles = this.pram.roles.join(',')
+      systemAdminApi.adminUpdate(this.pram).then(data => {
+        this.$message.success('更新管理员成功')
+        this.$emit('hideEditDialog')
+      })
+    },
+    rulesSelect(selectKeys) {
+      this.pram.rules = selectKeys
+    },
+    handlerPwdInput(val) {
+      if (!val) {
+        this.rules.pwd = []
+        this.rules.repwd = []
+        return
+      }
+      this.rules.pwd = [
+        { required: true, message: '请填管理员密码', trigger: ['blur', 'change'] },
+        { min: 6, max: 20, message: '长度6-20个字符', trigger: ['blur', 'change'] }]
+      this.rules.repwd = [{ required: true, message: '两次输入密码不一致', validator: (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('两次输入密码不一致!'))
+        } else if (value !== this.pram.pwd) {
+          callback(new Error('两次输入密码不一致!'))
+        } else {
+          callback()
+        }
+      }, trigger: ['blur', 'change'] }]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

admin/src/views/systemSetting/administratorAuthority/adminList/index.vue

@@ -0,0 +1,220 @@
+<template>
+  <div class="divBox">
+    <el-card class="box-card">
+      <el-form inline size="small">
+        <el-form-item>
+          <el-select v-model="listPram.realName" placeholder="身份" clearable class="selWidth">
+            <el-option
+              v-for="item in roleList.list"
+              :key="item.id"
+              :label="item.roleName"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-select v-model="listPram.isDel" placeholder="删除状态" clearable class="selWidth">
+            <el-option
+              v-for="item in constants.deletedOrNormal"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-select v-model="listPram.status" placeholder="状态" clearable class="selWidth">
+            <el-option
+              v-for="item in constants.roleListStatus"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-input v-model="listPram.roleName" placeholder="姓名或者账号" clearable class="selWidth"/>
+        </el-form-item>
+        <el-form-item>
+          <el-button size="mini" type="primary" @click.native="handleGetAdminList">查询</el-button>
+        </el-form-item>
+      </el-form>
+      <el-form inline>
+        <el-form-item>
+          <el-button size="mini" type="primary" @click="handlerOpenEdit(0)">添加管理员</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table :data="listData.list" size="mini">
+        <el-table-column label="姓名" prop="realName" />
+        <el-table-column label="账号" prop="account" />
+        <el-table-column label="身份" prop="realName">
+          <template slot-scope="scope">
+          <span v-for="item in roleList.list" :key="item.id">
+            <el-tag v-if="scope.row.roles.includes(item.id)" type="info">{{ item.roleName }}</el-tag>
+            <!--              <span>{{ scope.row }}</span>-->
+          </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="最后登录时间" prop="lastTime">
+          <template slot-scope="scope">
+            <span>{{ scope.row.lastTime | filterEmpty }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="最后登录IP" prop="lastIp">
+          <template slot-scope="scope">
+            <span>{{ scope.row.lastIp | filterEmpty }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" prop="status" width="100">
+          <template slot-scope="scope">
+            <span>{{ scope.row.status | filterShowOrHide }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="删除标记" prop="status" width="100">
+          <template slot-scope="scope">
+            <span>{{ scope.row.isDel | filterYesOrNo }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <template v-if="scope.row.isDel">
+              <span>-</span>
+            </template>
+            <template v-else>
+              <el-button type="text" size="mini" @click="handlerOpenEdit(1,scope.row)">编辑</el-button>
+              <el-button type="text" size="mini" @click="handlerOpenDel(scope.row)">删除</el-button>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        :current-page="listPram.page"
+        :page-sizes="constants.page.limit"
+        :layout="constants.page.layout"
+        :total="listData.total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </el-card>
+    <el-dialog
+      :visible.sync="editDialogConfig.visible"
+      :title="editDialogConfig.isCreate === 0? '创建身份':'编辑身份'"
+      destroy-on-close
+      :close-on-click-modal="false"
+    >
+      <edit
+        v-if="editDialogConfig.visible"
+        :is-create="editDialogConfig.isCreate"
+        :edit-data="editDialogConfig.editData"
+        @hideEditDialog="hideEditDialog"
+      />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as systemAdminApi from '@/api/systemadmin.js'
+import * as roleApi from '@/api/role.js'
+import * as constants from '@/utils/constants.js'
+import edit from './edit'
+export default {
+  // name: "index"
+  components: { edit },
+  data() {
+    return {
+      constants,
+      listData: { list: [] },
+      listPram: {
+        account: null,
+        addTime: null,
+        isDel: null, // false=正常，true=已删除，数据库逻辑删除
+        lastIp: null,
+        lastTime: null,
+        level: null,
+        loginCount: null,
+        realName: null,
+        roles: null,
+        status: null,
+        page: 1,
+        limit: constants.page.limit[1]
+      },
+      roleList: [],
+      menuList: [],
+      editDialogConfig: {
+        visible: false,
+        isCreate: 0, // 0=创建，1=编辑
+        editData: {}
+      }
+    }
+  },
+  mounted() {
+    this.handleGetAdminList()
+    this.handleGetRoleList()
+  },
+  methods: {
+    handleSizeChange(val) {
+      this.listPram.limit = val
+      this.handleGetRoleList(this.listPram)
+    },
+    handleCurrentChange(val) {
+      this.listPram.page = val
+      this.handleGetRoleList(this.listPram)
+    },
+    handleGetRoleList() {
+      const _pram = {
+        page: 1,
+        limit: constants.page.limit[4]
+      }
+      roleApi.getRoleList(_pram).then(data => {
+        this.roleList = data
+      })
+    },
+    handlerOpenDel(rowData) {
+      this.$confirm('确认删除当前数据').then(() => {
+        const _pram = { id: rowData.id, isDel: 1, roles: Array.of(rowData.roles) }
+        systemAdminApi.adminUpdate(_pram).then(data => {
+          this.$message.success('删除数据成功')
+          this.handleGetAdminList()
+        })
+      })
+    },
+    handleGetAdminList() {
+      systemAdminApi.adminList(this.listPram).then(data => {
+        this.listData = data
+        // this.handlerGetMenuList()
+      })
+    },
+    handlerOpenEdit(isCreate, editDate) {
+      this.editDialogConfig.editData = editDate
+      this.editDialogConfig.isCreate = isCreate
+      this.editDialogConfig.visible = true
+    },
+    handlerGetMenuList() { // 获取菜单全部数据后做menu翻译使用
+      systemAdminApi.listCategroy({ page: 1, limit: 999, type: 5 }).then(data => {
+        this.menuList = data.list
+        this.listData.list.forEach(item => {
+          const _muneText = []
+          const menuids = item.rules.split(',')
+          menuids.map(muid => {
+            this.menuList.filter(menu => {
+              if (menu.id == muid) {
+                _muneText.push(menu.name)
+              }
+            })
+          })
+          item.rulesView = _muneText.join(',')
+          this.$set(item, 'rulesViews', item.rulesView)
+        })
+      })
+    },
+    hideEditDialog() {
+      this.editDialogConfig.visible = false
+      this.handleGetAdminList()
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

admin/src/views/systemSetting/administratorAuthority/identityManager/edit.vue

@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <el-form ref="pram" :model="pram" label-width="100px">
+      <el-form-item label="身份名称" prop="roleName" :rules="[{required:true,message:'请填写身份名称', trigger:['blur','change']}]">
+        <el-input v-model="pram.roleName" placeholder="身份名称" />
+      </el-form-item>
+      <el-form-item label="状态">
+        <el-switch v-model="pram.status" :active-value="true" :inactive-value="false" />
+      </el-form-item>
+      <el-form-item label="权限">
+        <category-list
+          :biztype="constants.categoryType[4]"
+          :select-model="true"
+          :row-select="pram.rules"
+          :select-model-keys="editData.rules"
+          @rulesSelect="rulesSelect"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handlerSubmit('pram')">{{ isCreate===0?'確定':'更新' }}</el-button>
+        <el-button @click="close">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import categoryList from '@/components/Category/list'
+import * as constants from '@/utils/constants.js'
+import * as roleApi from '@/api/role.js'
+export default {
+  // name: "edit"
+  components: { categoryList },
+  props: {
+    isCreate: {
+      type: Number,
+      required: true
+    },
+    editData: {
+      type: Object,
+      default: () => {
+        return { rules: [] }
+      }
+    }
+  },
+  data() {
+    return {
+      constants,
+      pram: {
+        level: 0,
+        roleName: null,
+        rules: [],
+        status: null,
+        id: null
+      }
+    }
+  },
+  mounted() {
+    this.initEditData()
+  },
+  methods: {
+    close() {
+      this.$emit('hideEditDialog')
+    },
+    initEditData() {
+      if (this.isCreate !== 1) return
+      const { level, roleName, rules, status, id } = this.editData
+      this.pram.rules = rules
+      this.pram.level = level
+      this.pram.roleName = roleName
+      this.pram.status = status
+      this.pram.id = id
+    },
+    handlerSubmit(form) {
+      this.$refs[form].validate(valid => {
+        if (!valid) return
+        if (this.isCreate === 0) {
+          this.handlerSave()
+        } else {
+          this.handlerEdit()
+        }
+      })
+    },
+    handlerSave() {
+      roleApi.addRole(this.pram).then(data => {
+        this.$message.success('创建身份成功')
+        this.$emit('hideEditDialog')
+      })
+    },
+    handlerEdit() {
+      roleApi.updateRole(this.pram).then(data => {
+        this.$message.success('更新身份成功')
+        this.$emit('hideEditDialog')
+      })
+    },
+    rulesSelect(selectKeys) {
+      // let _ids = []
+      // select.map(item => {
+      //   _ids.push(item.id)
+      // })
+      // this.pram.rules = _ids.join(',')
+      this.pram.rules = selectKeys
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

admin/src/views/systemSetting/administratorAuthority/identityManager/index.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="divBox">
+    <el-card class="box-card">
+      <el-form inline size="small">
+        <el-form-item>
+          <el-select v-model="listPram.status" placeholder="状态" clearable class="selWidth">
+            <el-option
+              v-for="item in constants.roleListStatus"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-input v-model="listPram.roleName" placeholder="请输入身份昵称" clearable class="selWidth"/>
+        </el-form-item>
+        <el-form-item>
+          <el-button size="mini" type="primary" @click.native="handleGetRoleList">查询</el-button>
+        </el-form-item>
+      </el-form>
+      <el-form inline>
+        <el-form-item>
+          <el-button size="mini" type="primary" @click="handlerOpenEdit(0)">添加身份</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table :data="listData.list" size="mini">
+        <el-table-column label="身份昵称" prop="roleName" min-width="130"/>
+        <el-table-column label="权限" show-overflow-tooltip min-width="350">
+          <template slot-scope="scope">
+            {{ scope.row.rulesView | filterEmpty }}
+          </template>
+        </el-table-column>
+        <!--<el-table-column label="level" prop="level" />-->
+        <el-table-column label="状态" prop="status">
+          <template slot-scope="scope">
+            <span>{{ scope.row.status | filterShowOrHide }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间" prop="createTime" min-width="150"/>
+        <el-table-column label="更新时间" prop="updateTime" min-width="150"/>
+        <el-table-column label="操作" min-width="130" fixed="right">
+          <template slot-scope="scope">
+            <el-button size="small" type="text" @click="handlerOpenEdit(1,scope.row)">编辑</el-button>
+            <el-button size="small" type="text" @click="handlerOpenDel(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        :current-page="listPram.page"
+        :page-sizes="constants.page.limit"
+        :layout="constants.page.layout"
+        :total="listData.total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </el-card>
+    <el-dialog
+      :visible.sync="editDialogConfig.visible"
+      :title="editDialogConfig.isCreate === 0? '创建身份':'编辑身份'"
+      destroy-on-close
+      :close-on-click-modal="false"
+    >
+      <edit
+        v-if="editDialogConfig.visible"
+        :is-create="editDialogConfig.isCreate"
+        :edit-data="editDialogConfig.editData"
+        @hideEditDialog="hideEditDialog"
+      />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as roleApi from '@/api/role.js'
+import * as categroyApi from '@/api/categoryApi.js'
+import * as constants from '@/utils/constants.js'
+import edit from './edit'
+export default {
+  // name: "index"
+  components: { edit },
+  data() {
+    return {
+      constants,
+      listData: { list: [] },
+      listPram: {
+        createTime: null,
+        updateTime: null,
+        level: null,
+        page: 1,
+        limit: constants.page.limit[1],
+        roleName: null,
+        rules: null,
+        status: null
+      },
+      menuList: [],
+      editDialogConfig: {
+        visible: false,
+        isCreate: 0, // 0=创建，1=编辑
+        editData: {}
+      }
+    }
+  },
+  mounted() {
+    this.handleGetRoleList()
+  },
+  methods: {
+    handlerOpenDel(rowData) {
+      this.$confirm('确认删除当前数据').then(() => {
+        roleApi.delRole(rowData).then(data => {
+          this.$message.success('删除数据成功')
+          this.handleGetRoleList()
+        })
+      })
+    },
+    handleGetRoleList() {
+      roleApi.getRoleList(this.listPram).then(data => {
+        this.listData = data
+        this.handlerGetMenuList()
+      })
+    },
+    handlerOpenEdit(isCreate, editDate) {
+      if (isCreate === 1) { editDate.rules = editDate.rules.split(',') }
+
+      this.editDialogConfig.editData = editDate
+      this.editDialogConfig.isCreate = isCreate
+      this.editDialogConfig.visible = true
+    },
+    handlerGetMenuList() { // 获取菜单全部数据后做menu翻译使用
+      categroyApi.listCategroy({ page: 1, limit: 999, type: 5 }).then(data => {
+        this.menuList = data.list
+        this.listData.list.forEach(item => {
+          const _muneText = []
+          const menuids = item.rules.split(',')
+          menuids.map(muid => {
+            this.menuList.filter(menu => {
+              if (menu.id == muid) {
+                _muneText.push(menu.name)
+              }
+            })
+          })
+          item.rulesView = _muneText.join(',')
+          this.$set(item, 'rulesViews', item.rulesView)
+        })
+      })
+    },
+    hideEditDialog() {
+      this.editDialogConfig.visible = false
+      this.handleGetRoleList()
+    },
+    handleSizeChange(val) {
+      this.listPram.limit = val
+      this.handleGetRoleList(this.listPram)
+    },
+    handleCurrentChange(val) {
+      this.listPram.page = val
+      this.handleGetRoleList(this.listPram)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

admin/src/views/systemSetting/administratorAuthority/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <router-view />
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="sass" scoped>
+
+</style>

admin/src/views/systemSetting/administratorAuthority/permissionRules/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="divBox">
+    <!--<el-card shadow style="max-width: 500px;" class="mr20">-->
+      <!--<div slot="header" class="clearfix">-->
+        <!--<span>前端路由</span>-->
+      <!--</div>-->
+      <!--<div v-for="item,index in asyncRoutes">-->
+        <!--<template v-if="!item.hidden">-->
+          <!--<span v-if="item.meta">{{ item.meta.title }}{{ item.path }}</span>-->
+          <!--&lt;!&ndash;            <span>name:{{ item.name }}</span>&ndash;&gt;-->
+          <!--&lt;!&ndash;            <span>path:{{ item.path }}</span>&ndash;&gt;-->
+          <!--<template v-if="item.children">-->
+            <!--<div v-for="item1,iindex in item.children" class="ml20">-->
+              <!--<span v-if="item1.meta">{{ item1.meta.title }}</span>-->
+              <!--&lt;!&ndash;                <span>name:{{ item1.name }}</span>&ndash;&gt;-->
+              <!--&lt;!&ndash;                <span>path:{{ item1.path }}</span>&ndash;&gt;-->
+              <!--<span>allPath:{{ item.path }}/{{ item1.path }}</span>-->
+              <!--<template v-if="item1.children">-->
+                <!--<div v-for="item2,index2 in item1.children" class="ml20">-->
+                  <!--<span v-if="item2.meta">{{ item2.meta.title }}</span>-->
+                  <!--&lt;!&ndash;                    <span>name:{{ item2.name }}</span>&ndash;&gt;-->
+                  <!--&lt;!&ndash;                    <span>path:{{ item2.path }}</span>&ndash;&gt;-->
+                  <!--<span>allPath:{{ item.path }}/{{ item1.path }}/{{ item2.path }}</span>-->
+                <!--</div>-->
+              <!--</template>-->
+            <!--</div>-->
+          <!--</template>-->
+        <!--</template>-->
+      <!--</div>-->
+    <!--</el-card>-->
+    <category-list :biztype="constants.categoryType[4]" />
+  </div>
+</template>
+
+<script>
+import { asyncRoutes, constantRoutes } from '@/router'
+import * as categoryApi from '@/api/categoryApi.js'
+import categoryList from '@/components/Category/list'
+import * as constants from '@/utils/constants.js'
+export default {
+  // name: "index"
+  components: { categoryList },
+  data() {
+    return {
+      asyncRoutes,
+      constants
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    handleTreeCheckChange(data, checked, indateminate) {
+      console.log(data, checked, indateminate)
+    },
+    categoryAdd(pram) {
+      const _pram = {
+        extra: pram.extra,
+        name: pram.name,
+        pid: pram.pid,
+        sort: pram.sort,
+        status: pram.status,
+        type: pram.type,
+        url: pram.url
+      }
+      categoryApi.addCategroy(_pram).then(data => {
+        this.$message.success('添加菜单成功')
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .routerView{
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+  }
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+  }
+</style>