|
|
@@ -1,11 +1,12 @@
|
|
|
<script lang="ts" setup>
|
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
import type Node from 'element-plus/es/components/tree/src/model/node'
|
|
|
-import User from './components/User.vue'
|
|
|
import Group from './components/Group.vue'
|
|
|
+import User from './components/User.vue'
|
|
|
import { deleteGroupById, getGroupByList } from '@/api/system/groupApi'
|
|
|
import { getUserByPage } from '@/api/system/userApi'
|
|
|
-const { pagination, getParams, onSizeChange, onCurrentChange, onSortChange } = usePagination()
|
|
|
+import { packageTreeData } from '@/utils/tool'
|
|
|
+const { pagination, getParams, onSizeChange, onCurrentChange } = usePagination()
|
|
|
|
|
|
interface TreeNode {
|
|
|
label: string
|
|
|
@@ -25,26 +26,14 @@ const state = reactive({
|
|
|
},
|
|
|
})
|
|
|
|
|
|
-const leftTreeRef = ref()
|
|
|
+const menu = ref([])
|
|
|
const getGroupList = async () => {
|
|
|
const { data } = await getGroupByList()
|
|
|
- const children: TreeNode[] = []
|
|
|
- data.forEach((item: any) => {
|
|
|
- return children.push({
|
|
|
- label: item.modelTitle,
|
|
|
- groupId: item.groupId,
|
|
|
- isLeaf: true,
|
|
|
- })
|
|
|
- })
|
|
|
- state.groups = [
|
|
|
- {
|
|
|
- label: '模型库',
|
|
|
- isLeaf: false,
|
|
|
- groupId: -1,
|
|
|
- children,
|
|
|
- },
|
|
|
- ]
|
|
|
|
|
|
+ menu.value = packageTreeData({
|
|
|
+ data,
|
|
|
+ id: 'groupId',
|
|
|
+ })
|
|
|
if (data && data.length > 0) {
|
|
|
state.curGroupId = data[0].groupId
|
|
|
const res = await getUserByPage({ groupId: state.curGroupId })
|
|
|
@@ -75,10 +64,6 @@ function currentChange(page = 1) {
|
|
|
onCurrentChange(page).then(() => getUserList())
|
|
|
}
|
|
|
|
|
|
-onMounted(() => {
|
|
|
- getGroupList()
|
|
|
-})
|
|
|
-
|
|
|
const onTreeNodeClick = (node: TreeNode) => {
|
|
|
if (node.isLeaf) {
|
|
|
state.curGroupId = node.groupId
|
|
|
@@ -88,11 +73,11 @@ const onTreeNodeClick = (node: TreeNode) => {
|
|
|
|
|
|
const groupRef = ref()
|
|
|
const onGroupAdd = (data: any) => {
|
|
|
- groupRef.value.showAddModel()
|
|
|
+ groupRef.value.showAddModel(data)
|
|
|
}
|
|
|
|
|
|
const onGroupEdit = (data?: any) => {
|
|
|
- groupRef.value.showAddModel()
|
|
|
+ groupRef.value.showAddModel(data)
|
|
|
}
|
|
|
const onGroupDelete = (node: Node, data: any) => {
|
|
|
ElMessageBox.confirm(`确认删除「${data.label}」吗?`, '确认信息').then(async () => {
|
|
|
@@ -110,12 +95,14 @@ const onSearch = () => {
|
|
|
}
|
|
|
|
|
|
const accountTableRef = ref()
|
|
|
-const accountRef = ref()
|
|
|
|
|
|
-const onChangeStatus = (row: any) => { }
|
|
|
+const onChangeStatus = (row: any) => {
|
|
|
+ window.console.log(row)
|
|
|
+}
|
|
|
const onCommand = (command: string, row: any) => {
|
|
|
switch (command) {
|
|
|
case 'GrantGroupAdd':
|
|
|
+ window.console.log(row)
|
|
|
break
|
|
|
case 'GrantGroupEdit':
|
|
|
break
|
|
|
@@ -127,6 +114,17 @@ const onCommand = (command: string, row: any) => {
|
|
|
break
|
|
|
}
|
|
|
}
|
|
|
+const userRef = ref('userRef')
|
|
|
+const onUserEdit = (row: any) => {
|
|
|
+ window.console.log(row)
|
|
|
+}
|
|
|
+const onUserDelete = (row: any) => {
|
|
|
+ window.console.log(row)
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getGroupList()
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
@@ -136,7 +134,7 @@ const onCommand = (command: string, row: any) => {
|
|
|
<LayoutContainer left-side-width="300px" hide-left-side-toggle>
|
|
|
<template #leftSide>
|
|
|
<el-scrollbar class="tree">
|
|
|
- <ElTree ref="menuRef" :data="menu" default-expand-all>
|
|
|
+ <ElTree ref="menuRef" :data="menu" default-expand-all @node-click="onTreeNodeClick">
|
|
|
<template #default="{ node, data }">
|
|
|
<div class="custom-tree-node">
|
|
|
<div class="label" :title="node.label">
|
|
|
@@ -144,7 +142,7 @@ const onCommand = (command: string, row: any) => {
|
|
|
<svg-icon name="uim:box" />
|
|
|
</el-icon>
|
|
|
<div class="text">
|
|
|
- {{ data.label }}
|
|
|
+ {{ data.groupName }}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="actions">
|
|
|
@@ -192,81 +190,95 @@ const onCommand = (command: string, row: any) => {
|
|
|
</template>
|
|
|
</tool-bar>
|
|
|
|
|
|
- <el-table ref="accountTableRef" v-loading="state.loading" class="list-table" :data="state.userList" border stripe highlight-current-row height="100%">
|
|
|
+ <el-table ref="accountTableRef" v-loading="state.loading" class="list-table" :data="state.userList" border stripe highlight-current-row>
|
|
|
<el-table-column type="index" align="center" label="序号" width="70" />
|
|
|
|
|
|
- <el-table-column align="center" header-align="center" label="头像" width="50">
|
|
|
- <template #default="row">
|
|
|
+ <el-table-column align="center" header-align="center" label="头像" width="100">
|
|
|
+ <template #default="{ row }">
|
|
|
<el-avatar :size="30" :src="row.accountAvatar" />
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column align="center" width="100" label="账号">
|
|
|
- <template #default="row">
|
|
|
+ <template #default="{ row }">
|
|
|
<span>{{ row.accountName }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column align="center" width="100" label="姓名">
|
|
|
- <template #default="row">
|
|
|
+ <template #default="{ row }">
|
|
|
<span>{{ row.accountRealName }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column align="center" width="100" label="工号">
|
|
|
- <template #default="row">
|
|
|
+ <template #default="{ row }">
|
|
|
<span>{{ row.accountStaffNo }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column align="center" width="120" label="联系方式">
|
|
|
- <template #default="row">
|
|
|
+ <template #default="{ row }">
|
|
|
<span>{{ row.accountPhone }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column align="center" label="所在部门">
|
|
|
- <template #default="row">
|
|
|
+ <template #default="{ row }">
|
|
|
<span>{{ row.groupName }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column align="center" width="100" label="岗位">
|
|
|
- <template #default="row">
|
|
|
+ <template #default="{ row }">
|
|
|
<span>{{ row.positionName }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column align="center" label="状态" width="140">
|
|
|
- <template #default="row">
|
|
|
- <div v-if="row.isFixed !== 1">
|
|
|
- <el-switch v-model="scope.row.status" :loading="scope.row.loading" inline-prompt active-text="启用" inactive-text="禁用" :before-change="() => onChangeStatus(scope.row)" />
|
|
|
+ <template #default="scope">
|
|
|
+ <div v-if="scope.row.isFixed !== 1">
|
|
|
+ <el-switch v-model="scope.row.status" :loading="scope.row.loading" inline-prompt active-text="启用" inactive-text="禁用" @before-change="() => onChangeStatus(scope.row)" />
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
- <el-table-column label="操作" header-align="center" align="center" width="210">
|
|
|
- <template #default="row">
|
|
|
- <el-button size="mini" @click="onUserEdit(row)">修改</el-button>
|
|
|
- <el-button v-if="row.isFixed !== 1" size="mini" type="danger" @click="onUserDelete(row)">删除</el-button>
|
|
|
- <el-dropdown v-if="row.isFixed !== 1" @command="onCommand($event, row)">
|
|
|
+ <el-table-column label="操作" header-align="center" align="center" width="310">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button size="small" @click="onUserEdit(scope.row)">
|
|
|
+ 修改
|
|
|
+ </el-button>
|
|
|
+ <el-button v-if="scope.row.isFixed !== 1" size="small" type="danger" @click="onUserDelete(scope.row)">
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+ <el-dropdown v-if="scope.row.isFixed !== 1" @command="onCommand($event, scope.row)">
|
|
|
<el-button size="small">
|
|
|
更多操作
|
|
|
<el-icon class="el-icon--right">
|
|
|
<svg-icon name="i-ep:arrow-down" />
|
|
|
</el-icon>
|
|
|
</el-button>
|
|
|
- <template #dropdown>
|
|
|
+ <template #dropdown="{ row }">
|
|
|
<el-dropdown-menu>
|
|
|
- <template v-if="row.grantGroupId > 0">
|
|
|
- <el-dropdown-item command="GrantGroupEdit">编辑授权</el-dropdown-item>
|
|
|
- <el-dropdown-item command="GrantGroupDelete">解除授权</el-dropdown-item>
|
|
|
+ <template v-if="row && row.grantGroupId > 0">
|
|
|
+ <el-dropdown-item command="GrantGroupEdit">
|
|
|
+ 编辑授权
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item command="GrantGroupDelete">
|
|
|
+ 解除授权
|
|
|
+ </el-dropdown-item>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
- <el-dropdown-item command="GrantGroupAdd">添加授权</el-dropdown-item>
|
|
|
+ <el-dropdown-item command="GrantGroupAdd">
|
|
|
+ 添加授权
|
|
|
+ </el-dropdown-item>
|
|
|
</template>
|
|
|
- <el-dropdown-item command="ResetPwd">重置密码</el-dropdown-item>
|
|
|
- <el-dropdown-item command="Permit">权限配置</el-dropdown-item>
|
|
|
+ <el-dropdown-item command="ResetPwd">
|
|
|
+ 重置密码
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item command="Permit">
|
|
|
+ 权限配置
|
|
|
+ </el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</template>
|
|
|
</el-dropdown>
|
|
|
@@ -274,7 +286,6 @@ const onCommand = (command: string, row: any) => {
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
<el-pagination :current-page="pagination.page" :total="pagination.total" :page-size="pagination.size" :page-sizes="pagination.sizes" :layout="pagination.layout" :hide-on-single-page="false" class="pagination" background @current-change="currentChange" @size-change="sizeChange" />
|
|
|
-
|
|
|
</div>
|
|
|
</LayoutContainer>
|
|
|
</div>
|
|
|
@@ -380,12 +391,8 @@ const onCommand = (command: string, row: any) => {
|
|
|
|
|
|
:deep(.main) {
|
|
|
.main-container {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- padding: 0;
|
|
|
}
|
|
|
}
|
|
|
|