|
@@ -0,0 +1,137 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import {computed, ref} from "vue";
|
|
|
+import {
|
|
|
+ apiPermissions,
|
|
|
+ delCompanies, getApiListByCodeName,
|
|
|
+ getResourceWeb,
|
|
|
+ getSystemToken,
|
|
|
+ newCompanies
|
|
|
+} from "@/views/data-base/src/data-base-api";
|
|
|
+import {copyStrFunc} from "@/utils/public";
|
|
|
+import {SystemTokenType} from "@/views/data-base/src/daba-base-type";
|
|
|
+import {windowSizeStore} from "@/utils/store-public";
|
|
|
+import {useCompRef} from "@/utils/useCompRef";
|
|
|
+import {ElTree} from "element-plus";
|
|
|
+import XEUtils from "xe-utils";
|
|
|
+
|
|
|
+const dialog = ref(false)
|
|
|
+const data = ref({})
|
|
|
+const tokenList = ref<SystemTokenType[]>([])
|
|
|
+const treeRef = useCompRef(ElTree)
|
|
|
+const addName = ref('')
|
|
|
+const currentRow = ref<SystemTokenType>()
|
|
|
+
|
|
|
+const defaultProps = {
|
|
|
+ children: 'children',
|
|
|
+ label: 'node.name',
|
|
|
+}
|
|
|
+
|
|
|
+const height = computed(() => {
|
|
|
+ return windowSizeStore.value.h / 1.6
|
|
|
+})
|
|
|
+
|
|
|
+function childrenToElTree(children) {
|
|
|
+ XEUtils.arrayEach(children, (item) => {
|
|
|
+ item.id = item.node.id
|
|
|
+ if (item.children.length > 0) {
|
|
|
+ childrenToElTree(item.children)
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+async function openDialog() {
|
|
|
+ const res = await getResourceWeb()
|
|
|
+ const children = res.api.children
|
|
|
+ childrenToElTree(children)
|
|
|
+ data.value = children
|
|
|
+ tokenList.value = await getSystemToken()
|
|
|
+ dialog.value = true
|
|
|
+}
|
|
|
+
|
|
|
+function clickCopy(value) {
|
|
|
+ copyStrFunc(value)
|
|
|
+}
|
|
|
+
|
|
|
+function treeName(node, data) {
|
|
|
+ return data.node.name
|
|
|
+}
|
|
|
+
|
|
|
+function rowClick(row: SystemTokenType) {
|
|
|
+ getApiListByCodeName(row.codeName).then(res => {
|
|
|
+ treeRef.value!.setCheckedKeys(res)
|
|
|
+ currentRow.value = row
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const saveClick = async () => {
|
|
|
+ if (!currentRow.value.codeName) return
|
|
|
+ const temp = {
|
|
|
+ codeName: currentRow.value.codeName,
|
|
|
+ list: treeRef.value.getCheckedKeys()
|
|
|
+ }
|
|
|
+ console.log(temp)
|
|
|
+ const res = await apiPermissions(temp).catch(() => {
|
|
|
+ treeRef.value!.setCheckedKeys([], false)
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+async function addClick() {
|
|
|
+ const res = await newCompanies(addName.value)
|
|
|
+ addName.value = ''
|
|
|
+ tokenList.value.push(res)
|
|
|
+}
|
|
|
+
|
|
|
+async function delClick(row, $index) {
|
|
|
+ const res = await delCompanies(row.uuid);
|
|
|
+ if (res) {
|
|
|
+ tokenList.value.splice($index, 1);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+defineExpose({
|
|
|
+ openDialog
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <el-dialog v-model="dialog" title="用户管理" width="60%">
|
|
|
+ <div style="display: flex">
|
|
|
+ <div style="width: max-content">
|
|
|
+ <el-input v-model="addName" style="width: 120px;" maxlength="100"/>
|
|
|
+ <el-button @click="addClick">新增</el-button>
|
|
|
+ <el-table :data="tokenList"
|
|
|
+ @row-click="rowClick"
|
|
|
+ :height="height"
|
|
|
+ highlight-current-row>
|
|
|
+ <el-table-column label="名称" prop="name" width="120"/>
|
|
|
+ <el-table-column label="秘钥" prop="codeEncrypt" show-overflow-tooltip width="120"/>
|
|
|
+ <el-table-column>
|
|
|
+ <template #default="{row,$index}">
|
|
|
+ <el-button circle
|
|
|
+ class="iconfont icon-fuzhi"
|
|
|
+ type="info"
|
|
|
+ @click="clickCopy(row.codeEncrypt)"/>
|
|
|
+ <el-button icon="Delete" circle type="danger" @click="delClick(row , $index)"/>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div style="flex: 1; overflow: auto" :style="{height :height +'px'}">
|
|
|
+ <el-button @click="saveClick">保存</el-button>
|
|
|
+ <el-tree :data="data"
|
|
|
+ ref="treeRef"
|
|
|
+ :props="defaultProps"
|
|
|
+ show-checkbox
|
|
|
+ node-key="id">
|
|
|
+ <template #default="{ node, data }">
|
|
|
+ <span>{{ treeName(node, data) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+
|
|
|
+</style>
|