gdxz/hospital-admin
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

6.30 提交 角色菜单

Browse Source
This commit is contained in:
zoujiandong 2023-06-30 14:58:22 +08:00
parent 4db41129a5
commit 616519e0f0
15 changed files with 595 additions and 398 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components.d.ts vendored
View File

@ -12,5 +12,6 @@ declare module '@vue/runtime-core' {
DeleteModal: typeof import('./src/components/DeleteModal.vue')['default'] DeleteModal: typeof import('./src/components/DeleteModal.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink'] RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView'] RouterView: typeof import('vue-router')['RouterView']
Upload: typeof import('./src/components/upload.vue')['default']
} }
} }

2
src/api/admin/login.js
View File

@ -24,7 +24,7 @@ export function getAppConfig() {
// 根据角色获取菜单 // 根据角色获取菜单
export function getUserMenuRole() { export function getUserMenuRole() {
return request({ return request({
url:'https://www.fastmock.site/mock/ebb1956b65d6078940cacb295a06be27/mock/menu',//'https://www.fastmock.site/mock/ebb1956b65d6078940cacb295a06be27/mock/menu', url:'/admin/role/menu',//'https://www.fastmock.site/mock/ebb1956b65d6078940cacb295a06be27/mock/menu', //
method: 'get' method: 'get'
}) })
} }

2
src/api/admin/menu.js
View File

@ -1,6 +1,6 @@
import request from '../../utils/request' import request from '../../utils/request'
const url = '/api/v1/menu'; const url = '/admin/menu';
export function getMenu(params) { export function getMenu(params) {
return request({ return request({

23
src/api/admin/role.js
View File

@ -1,6 +1,6 @@
import request from '../../utils/request'; import request from '../../utils/request';
const url = '/admin/role/list'; const url = '/admin/role';
export function getRole(params) { export function getRole(params) {
return request({ return request({
url, url,
@ -41,10 +41,23 @@ export function updateRoleScoped(data) {
}) })
} }
export function getRoleMenuTree(params, roleId) { export function getRoleMenuTree() {
return request({ return request({
url:`/api/v1/roleMenuTreeselect/${roleId}`, url:'/admin/menu',//"https://www.fastmock.site/mock/ebb1956b65d6078940cacb295a06be27/mock/menu", //'/admin/menu',
method: 'get', method: 'get'
params })
}
export function roleDetail(id) {
return request({
url: `${url}/${id}`,
method: 'get'
})
}
export function roleStatus(data,id) {
return request({
url: `/admin/role/status/${id}`,
method: 'put',
data
}) })
} }

2
src/api/admin/sys-user.js
View File

@ -1,6 +1,6 @@
import request from '../../utils/request'; import request from '../../utils/request';
const url = '/api/v1/sys-user'; const url = '/admin/user';
export function getUser(params) { export function getUser(params) {

25
src/components/DeleteModal.vue
View File

@ -1,8 +1,9 @@
<template> <template>
<a-modal v-model:visible="deleteVisible" :title="data.length > 1 ? '批量删除' : '删除'" title-align="start" @close="handleClose" width="400px"> <a-modal v-model:visible="deleteVisible" :title="data.length > 1 ? '批量删除' : '删除'" title-align="start" @close="handleClose" width="400px">
<a-form :model="data" :rules="rules" ref="modalFormRef" size="medium" label-align="left" auto-label-width> <a-form :model="data" :rules="rules" ref="modalFormRef" size="medium" label-align="left" auto-label-width>
<a-alert type="warning" style="margin-bottom: 16px;" v-if="data.length > 1">您正在批量删除，请确认删除数据是否正确</a-alert> <a-alert type="warning" style="margin-bottom: 16px;" v-if="data.length > 1">您正在批量删除，请确认删除数据是否正确？</a-alert>
<a-form-item label="摘要" label-col-flex="100px"> <a-alert type="warning" style="margin-bottom: 16px;" v-if="data.length == 1">您确定删除该条数据？</a-alert>
<!-- <a-form-item label="摘要" label-col-flex="100px">
<a-tag color="gray" style="padding: 0 0px; margin-right: 5px"> <a-tag color="gray" style="padding: 0 0px; margin-right: 5px">
<template #icon> <template #icon>
<a-tag color="arcoblue">数量</a-tag> <a-tag color="arcoblue">数量</a-tag>
@ -12,7 +13,7 @@
</a-form-item> </a-form-item>
<a-form-item field="deleteConfirmation" label="删除确认" label-col-flex="100px"> <a-form-item field="deleteConfirmation" label="删除确认" label-col-flex="100px">
<a-input v-model.trim="data.deleteConfirmation" placeholder="请输入 DELETE 以确认删除"></a-input> <a-input v-model.trim="data.deleteConfirmation" placeholder="请输入 DELETE 以确认删除"></a-input>
</a-form-item> </a-form-item> -->
</a-form> </a-form>
<template #footer> <template #footer>
<a-button @click="handleClose"><template #icon><icon-close /></template>取消</a-button> <a-button @click="handleClose"><template #icon><icon-close /></template>取消</a-button>
@ -30,7 +31,10 @@ const { proxy } = getCurrentInstance();
const props = defineProps({ const props = defineProps({
// 数组名称 // 数组名称
data: { data: {
type: Array, type: Object,
},
delType:{
type: String,
}, },
// 是否显示 // 是否显示
visible: { visible: {
@ -43,7 +47,7 @@ const props = defineProps({
}, },
}); });
const { data, visible, apiDelete } = toRefs(props); const { data, visible, apiDelete,delType} = toRefs(props);
const emits = defineEmits(['deleteVisibleChange']); const emits = defineEmits(['deleteVisibleChange']);
@ -88,11 +92,18 @@ watch(() => props.visible,(value) => {
const handleConfirm = () => { const handleConfirm = () => {
proxy.$refs.modalFormRef.validate((valid) => { proxy.$refs.modalFormRef.validate((valid) => {
if (!valid) { if (!valid) {
console.log(delType.value)
// Akiraka 20230210 请求接口 // Akiraka 20230210 请求接口
props.apiDelete({ ids: data.value }).then(response => { props.apiDelete({ [delType.value]: data.value }).then(response => {
// Akiraka 20230210 关闭弹窗 // Akiraka 20230210 关闭弹窗
deleteVisible.value = false; if(response.code==200){
Message.success("数据删除成功"); Message.success("数据删除成功");
}else{
proxy.$notification.error(response.message);
}
deleteVisible.value = false;
console.log(response)
}) })
} }
}) })

22
src/components/upload.vue Normal file
View File

@ -0,0 +1,22 @@
<template>
<a-upload action="/" :auto-upload="false" accept="image/png, image/jpeg" @before-upload="beforeUpload" @change="onChange" :fileList="file ? [file] : []" :show-file-list="false"/>
</template>
<script setup>
import { ref,getCurrentInstance,} from 'vue';
const { proxy } = getCurrentInstance();
const file = ref();
const beforeUpload = (file) => {
return new Promise((resolve, reject) => {
if(file.size>=10*1024*1024){
proxy.$notification.error("图片大小不能超过10M");
reject('cancel')
}else{
resolve(true)
}
});
};
const onChange = (_, currentFile) => {
console.log(currentFile);
};
</script>

4
src/layout/components/Menu/SubMenu.vue
View File

@ -7,13 +7,13 @@
<template #icon> <template #icon>
<component :is="menu.icon" v-if="menu.icon"/> <component :is="menu.icon" v-if="menu.icon"/>
</template> </template>
<template #title>{{ menu.title }}1</template> <template #title>{{ menu.menu_name }}</template>
<sub-menu :menuList="menu.children" /> <sub-menu :menuList="menu.children" />
</a-sub-menu> </a-sub-menu>
<a-menu-item <a-menu-item
v-if="menu.parent_id!=0 && isRouteParams(menu.path)" v-if="menu.parent_id!=0 && isRouteParams(menu.path)"
:key="menu.path" :key="menu.path"
>{{ menu.title }}2</a-menu-item> >{{ menu.menu_name }}</a-menu-item>
</template> </template>
</template> </template>
<script setup> <script setup>

5
src/router/index.js
View File

@ -44,6 +44,11 @@ const routes = [
}, },
] ]
}, },
{
path: '/upload',
name: 'upload',
component: () => import('../views/upload/index.vue'),
},
{ {
path: '/login', path: '/login',
name: 'login', name: 'login',

9
src/store/permission.js
View File

@ -19,23 +19,23 @@ export const usePermissionStore = defineStore('permisson', {
this.menuList = menus; this.menuList = menus;
}, },
GenerateRoutes(routeList) { GenerateRoutes(routeList) {
try {
const routes = []; const routes = [];
routeList.forEach((item) => { routeList.forEach((item) => {
const route = {}; const route = {};
route.path = item.path; route.path = item.path;
route.name = item.menu_name; route.name = item.menu_title;
if (item.parent_id==0) { if (item.parent_id==0) {
route.component = modules[`../views/index.vue`]; route.component = modules[`../views/index.vue`];
} else{ } else{
route.component = modules[`../views${item.component}.vue`] || modules['../views/error-page/888.vue']; route.component = modules[`../views${item.component}.vue`] || modules['../views/error-page/888.vue'];
} }
route.meta = { route.meta = {
title: item.title, title: item.menu_name,
permission: item.permission, permission: item.permission,
}; };
if (item.children) { if (item.children) {
route.children = this.GenerateRoutes(item.children); route.children = this.GenerateRoutes(item.children);
} }
@ -44,6 +44,9 @@ export const usePermissionStore = defineStore('permisson', {
}); });
return routes; return routes;
} catch (error) {
}
}, },
async getMenuRole() { async getMenuRole() {
const res = await getUserMenuRole(); const res = await getUserMenuRole();

141
src/views/admin/sys-menu/index.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<a-form :model="queryForm" ref="queryFormRef" layout="inline"> <!-- <a-form :model="queryForm" ref="queryFormRef" layout="inline">
<a-form-item field="title" label="菜单名称"> <a-form-item field="menu_title" label="菜单名称">
<a-input v-model="queryForm.title" placeholder="请输入菜单名称" @press-enter="handleQuery"/> <a-input v-model="queryForm.menu_title" placeholder="请输入菜单名称" @press-enter="handleQuery"/>
</a-form-item> </a-form-item>
<a-form-item field="visible" label="状态"> <a-form-item field="menu_status" label="状态">
<a-select v-model="queryForm.visible" placeholder="请选择菜单状态"> <a-select v-model="queryForm.menu_status" placeholder="请选择菜单状态">
<a-option value="1">显示</a-option> <a-option :value="1">显示</a-option>
<a-option value="0">隐藏</a-option> <a-option :value="0">隐藏</a-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
@ -18,7 +18,7 @@
</a-form-item> </a-form-item>
</a-form> </a-form>
<a-divider /> <a-divider /> -->
<!-- 动作 --> <!-- 动作 -->
<div class="action"> <div class="action">
@ -28,49 +28,49 @@
</div> </div>
<!-- 菜单管理列表 --> <!-- 菜单管理列表 -->
<a-table :columns="columns" :data="tableData" row-key="menuId" :pagination="false"> <a-table :columns="columns" :data="tableData" row-key="menu_id" :pagination="false">
<template #icon="{ record }"> <template #icon="{ record }">
<component :is="record.icon" :style="{ fontSize: '18px' }"></component> <component :is="record.icon" :style="{ fontSize: '18px' }"></component>
</template> </template>
<template #menutype="{ record }"> <template #menu_type="{ record }">
<a-tag color="purple" v-if="record.menuType === 'M'">目录</a-tag> <a-tag color="purple" v-if="record.menu_type == 1">模块</a-tag>
<a-tag color="orange" v-else-if="record.menuType === 'C'">菜单</a-tag> <a-tag color="orange" v-else-if="record.menu_type ==2">菜单</a-tag>
<a-tag color="blue" v-else-if="record.menuType === 'F'">按钮</a-tag> <a-tag color="blue" v-else-if="record.menu_type ==3">按钮</a-tag>
</template> </template>
<template #isFrame="{ record }"> <!-- <template #isFrame="{ record }">
<a-tag v-if="record.isFrame == '1'" color="green">内部</a-tag> <a-tag v-if="record.isFrame == '1'" color="green">内部</a-tag>
<a-tag v-else color="red">外部</a-tag> <a-tag v-else color="red">外部</a-tag>
</template> </template> -->
<template #visible="{ record }"> <template #menu_status="{ record }">
<a-tag v-if="record.visible == '0'" color="green">显示</a-tag> <a-tag v-if="record.menu_status == '0'" color="green">显示</a-tag>
<a-tag v-else color="red">隐藏</a-tag> <a-tag v-else color="red">隐藏</a-tag>
</template> </template>
<template #action="{ record }"> <template #action="{ record }">
<a-button v-has="'admin:sysMenu:add'" type="text" @click="handleAddMenu(record.menuId)">新增</a-button> <a-button type="text" @click="handleAddMenu(record.menuId)">新增</a-button>
<a-button v-has="'admin:sysMenu:edit'" type="text" @click="handleUpdate(record)">修改</a-button> <a-button type="text" @click="handleUpdate(record)">修改</a-button>
<a-button v-has="'admin:sysMenu:remove'" type="text" @click="() => { deleteVisible = true; deleteData = [record.menuId]; }">删除</a-button> <a-button type="text" @click="() => { deleteVisible = true; deleteData = [record.menu_id]; }">删除</a-button>
</template> </template>
</a-table> </a-table>
<!-- 菜单管理新增与提交弹窗 --> <!-- 菜单管理新增与提交弹窗 -->
<a-modal v-model:visible="modalVisible" :title="modalTitle" title-align="start" :width="800" modal-class="menu-modal" @before-ok="handleSubmit" @close="() => {$refs.modalFormRef.resetFields(); modalForm.menuId = null;}"> <a-modal v-model:visible="modalVisible" :title="modalTitle" title-align="start" :width="800" modal-class="menu-modal" @before-ok="handleSubmit" @close="() => {$refs.modalFormRef.resetFields(); modalForm.menuId = null;}">
<a-form :model="modalForm" :rules="modalRules" ref="modalFormRef" auto-label-width label-align="left"> <a-form :model="modalForm" :rules="modalRules" ref="modalFormRef" auto-label-width label-align="left">
<a-form-item field="menuType" label="菜单类型"> <a-form-item field="menu_type" label="菜单类型">
<a-radio-group v-model="modalForm.menuType"> <a-radio-group v-model="modalForm.menu_type">
<a-radio value="M">目录</a-radio> <a-radio :value='1'>模块</a-radio>
<a-radio value="C">菜单</a-radio> <a-radio :value='2'>菜单</a-radio>
<a-radio value="F">按钮</a-radio> <a-radio :value='3'>按钮</a-radio>
</a-radio-group> </a-radio-group>
</a-form-item> </a-form-item>
<a-row :gutter="24"> <a-row :gutter="24">
<a-col :span="12"> <a-col :span="12">
<a-form-item field="parentId" label="上级菜单"> <a-form-item field="parent_id" label="上级菜单">
<a-tree-select v-model="modalForm.parentId" :data="tableData" :field-names="{ key: 'menuId', icon: '_' }" :allow-search="true" :filter-tree-node="filterTreeNode" placeholder="请选择上级菜单"/> <a-tree-select v-model="modalForm.parent_id" :data="tableData" :field-names="{ key: 'menu_id', icon: '_' ,title:'menu_name'}" :allow-search="true" :filter-tree-node="filterTreeNode" placeholder="请选择上级菜单"/>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item field="title" label="菜单标题"> <a-form-item field="menu_name" label="菜单标题">
<a-input v-model="modalForm.title" placeholder="请输入菜单标题" /> <a-input v-model="modalForm.menu_name" placeholder="请输入菜单标题" />
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
@ -85,49 +85,50 @@
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item field="sort" label="显示排序"> <a-form-item field="order_num" label="显示排序">
<a-input-number v-model="modalForm.sort" mode="button" /> <a-input-number v-model="modalForm.order_num" mode="button" />
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="24"> <a-row :gutter="24">
<a-col :span="12" v-if="modalForm.menuType !== 'F'">
<a-form-item field="menuName" label="路由名称"> <a-col :span="12" v-if="modalForm.menu_type !== 3 && modalForm.menu_type">
<a-input v-model="modalForm.menuName" placeholder="请输入路由名称" /> <a-form-item field="menu_title" label="路由名称">
<a-input v-model="modalForm.menu_title" placeholder="请输入路由名称" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12" v-if="modalForm.menuType !== 'F'"> <a-col :span="12" v-if="modalForm.menu_type !== 3 && modalForm.menu_type">
<a-form-item field="component" label="组件名称"> <a-form-item field="component" label="组件名称">
<a-input v-model="modalForm.component" placeholder="请输入组件名称"/> <a-input v-model="modalForm.component" placeholder="请输入组件名称"/>
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="24"> <a-row :gutter="24">
<a-col :span="12" v-if="modalForm.menuType !== 'F'"> <a-col :span="12" v-if="modalForm.menu_type !== 3">
<a-form-item field="path" label="路由地址"> <a-form-item field="path" label="路由地址">
<a-input v-model="modalForm.path" placeholder="请输入路由地址" /> <a-input v-model="modalForm.path" placeholder="请输入路由地址" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12" v-if="modalForm.menuType === 'C' || modalForm.menuType === 'F'"> <!-- <a-col :span="12" v-if="modalForm.menuType === 'C' || modalForm.menuType === 'F'">
<a-form-item field="permission" label="权限标识"> <a-form-item field="permission" label="权限标识">
<a-input v-model="modalForm.permission" placeholder="请输入权限标识"/> <a-input v-model="modalForm.permission" placeholder="请输入权限标识"/>
</a-form-item> </a-form-item>
</a-col> </a-col> -->
</a-row> </a-row>
<a-form-item field="isFrame" label="是否外链" v-if="modalForm.menuType !== 'F'"> <!-- <a-form-item field="isFrame" label="是否外链" v-if="modalForm.menuType !== 'F'">
<a-radio-group v-model="modalForm.isFrame"> <a-radio-group v-model="modalForm.isFrame">
<a-radio value="0">是</a-radio> <a-radio value="0">是</a-radio>
<a-radio value="1">否</a-radio> <a-radio value="1">否</a-radio>
</a-radio-group> </a-radio-group>
</a-form-item> </a-form-item> -->
<a-form-item field="visible" label="菜单状态" v-if="modalForm.menuType !== 'F'"> <a-form-item field="menu_status" label="菜单状态" v-if="modalForm.menuType !== 'F'">
<a-radio-group v-model="modalForm.visible"> <a-radio-group v-model="modalForm.menu_status">
<a-radio value="0">显示</a-radio> <a-radio :value="0">显示</a-radio>
<a-radio value="1">隐藏</a-radio> <a-radio :value="1">隐藏</a-radio>
</a-radio-group> </a-radio-group>
</a-form-item> </a-form-item>
<a-form-item field="apis" label="API权限" v-if="modalForm.menuType !== 'M'"> <a-form-item field="api_ids" label="API权限" v-if="modalForm.menu_type !== 1 && modalForm.menu_type">
<a-transfer v-model:model-value="modalForm.apis" :data="transferData" :title="['未授权', '已授权']" show-search /> <a-transfer v-model:model-value="modalForm.api_ids" :data="transferData" :title="['未授权', '已授权']" show-search />
</a-form-item> </a-form-item>
</a-form> </a-form>
</a-modal> </a-modal>
@ -136,6 +137,7 @@
<DeleteModal <DeleteModal
:data="deleteData" :data="deleteData"
:visible="deleteVisible" :visible="deleteVisible"
:delType="'menu_ids'"
:apiDelete="removeMenu" :apiDelete="removeMenu"
@deleteVisibleChange="() => deleteVisible = false" @deleteVisibleChange="() => deleteVisible = false"
/> />
@ -190,15 +192,13 @@ function useQueryData() {
// 默认表单 // 默认表单
const modalForm = reactive({ const modalForm = reactive({
menuType: 'M', menu_type: '',
sort: 0, menu_status: 0,
isFrame: '1',
visible: '0',
}); });
// 表单校验 // 表单校验
const modalRules = { const modalRules = {
title: [{ required: true, message: '请输入菜单名称' }], menu_name: [{ required: true, message: '请输入菜单名称' }],
path: [{ required: true, message: '请输入菜单路由地址' }], path: [{ required: true, message: '请输入菜单路由地址' }],
component: [ component: [
{ required: true, message: '请输入菜单路由地址' }, { required: true, message: '请输入菜单路由地址' },
@ -209,7 +209,7 @@ const modalRules = {
// 监听事件 20220715 // 监听事件 20220715
watchEffect(() => { watchEffect(() => {
// 当菜单类型为目录时组件地址则为 Layout // 当菜单类型为目录时组件地址则为 Layout
if (modalForm.menuType == "M") { if (modalForm.menu_type == 1) {
modalForm.component = "Layout" modalForm.component = "Layout"
} else { } else {
// 当菜单类型设置为菜单时 如果为 Layout 则为空 // 当菜单类型设置为菜单时 如果为 Layout 则为空
@ -225,14 +225,14 @@ watchEffect(() => {
// Table // Table
const columns = [ const columns = [
{ title: '菜单名称', dataIndex: 'title',width: "220" }, { title: '菜单名称', dataIndex: 'menu_name',width: "220" },
// { title: '图标', dataIndex: 'icon', slotName: 'icon' }, // { title: '图标', dataIndex: 'icon', slotName: 'icon' },
{ title: '路由地址', dataIndex: 'path', width: "400" }, { title: '路由地址', dataIndex: 'path', width: "400" },
{ title: '组件地址', dataIndex: 'component', width: "300" }, { title: '组件地址', dataIndex: 'component', width: "300" },
{ title: '排序', dataIndex: 'sort', width: "80" }, // { title: '排序', dataIndex: 'sort', width: "80" },
{ title: '类型', dataIndex: 'menuType', slotName: 'menutype', width: "100" }, // { title: '类型', dataIndex: 'menuType', slotName: 'menutype', width: "100" },
{ title: '是否外联', dataIndex: 'isFrame', slotName: 'isFrame', width: "100" }, // { title: '是否外联', dataIndex: 'isFrame', slotName: 'isFrame', width: "100" },
{ title: '显示状态', dataIndex: 'visible', slotName: 'visible', width: "100" }, { title: '显示状态', dataIndex: 'menu_status', slotName: 'menu_status', width: "100" },
{ title: '操作', slotName: 'action' ,width: "220", fixed: "right" }, { title: '操作', slotName: 'action' ,width: "220", fixed: "right" },
]; ];
const tableData = ref([]); const tableData = ref([]);
@ -259,7 +259,7 @@ const filterTreeNode = (searchVal, nodeData) => {
// 修改菜单 // 修改菜单
const handleUpdate = async (record) => { const handleUpdate = async (record) => {
const res = await getMenuDetails(record.menuId); const res = await getMenuDetails(record.menu_id);
Object.assign(modalForm, res.data); Object.assign(modalForm, res.data);
modalTitle.value = '修改菜单'; modalTitle.value = '修改菜单';
@ -270,13 +270,21 @@ const handleUpdate = async (record) => {
const handleSubmit = (done) => { const handleSubmit = (done) => {
proxy.$refs.modalFormRef.validate(async (valid) => { proxy.$refs.modalFormRef.validate(async (valid) => {
if (!valid) { if (!valid) {
if (!modalForm.menuId) { if (!modalForm.menu_id) {
console.log("dasdasd",modalForm) console.log("dasdasd",modalForm)
const { success } = await addMenu(modalForm); const {code,message} = await addMenu(modalForm);
if (success) proxy.$message.success('新增成功'); if (code==200) {
proxy.$message.success('新增成功');
}else{
proxy.$message.error(message);
}
} else { } else {
const { success } = await updateMenu(modalForm, modalForm.menuId); const { code,message } = await updateMenu(modalForm, modalForm.menu_id);
if (success) proxy.$message.success('修改成功'); if (code==200) {
proxy.$message.success('修改成功');
}else{
proxy.$message.error(message);
}
} }
getSysMenuInfo(pager); getSysMenuInfo(pager);
done(); done();
@ -290,6 +298,7 @@ const handleSubmit = (done) => {
// 获取菜单信息 // 获取菜单信息
const getSysMenuInfo = async (params = {}) => { const getSysMenuInfo = async (params = {}) => {
const { code, data, msg } = await getMenu(params); const { code, data, msg } = await getMenu(params);
console.log(data);
if ( code == 200 ) { if ( code == 200 ) {
tableData.value = data; tableData.value = data;
} else { } else {
@ -324,13 +333,13 @@ const parseIconName = computed(() => {
onMounted(() => { onMounted(() => {
getSysMenuInfo(); getSysMenuInfo();
getSysApiInfo(); //getSysApiInfo();
}); });
</script> </script>
<style lang="scss"> <style lang="scss">
// 覆盖默认 select trigger 样式 /* 覆盖默认 select trigger 样式 */
.iconselect-trigger .arco-select-dropdown-list { .iconselect-trigger .arco-select-dropdown-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -340,7 +349,7 @@ onMounted(() => {
width: auto; width: auto;
} }
// 覆盖默认穿梭框样式 /* 覆盖默认穿梭框样式 */
.menu-modal { .menu-modal {
.arco-transfer-view { .arco-transfer-view {
height: 350px; height: 350px;

528
src/views/admin/sys-role/index.vue
View File

@ -1,22 +1,24 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<a-form :model="queryForm" ref="queryFormRef" layout="inline"> <a-form :model="queryForm" ref="queryFormRef" layout="inline">
<a-form-item field="roleName" label="角色名称"> <a-form-item field="role_name" label="角色名称">
<a-input v-model="queryForm.roleName" placeholder="请输入角色名称" @press-enter="handleQuery" /> <a-input v-model="queryForm.role_name" placeholder="请输入角色名称" @press-enter="handleQuery" />
</a-form-item> </a-form-item>
<a-form-item field="roleKey" label="权限字符"> <!-- <a-form-item field="roleKey" label="权限字符">
<a-input v-model="queryForm.roleKey" placeholder="请输入权限字符" @press-enter="handleQuery" /> <a-input v-model="queryForm.roleKey" placeholder="请输入权限字符" @press-enter="handleQuery" />
</a-form-item> </a-form-item> -->
<a-form-item field="status" label="状态"> <!-- <a-form-item field="status" label="状态">
<a-select v-model="queryForm.status" placeholder="请选择角色状态"> <a-select v-model="queryForm.role_status" placeholder="请选择角色状态">
<a-option :value="2">正常</a-option> <a-option :value="2">正常</a-option>
<a-option :value="1">停用</a-option> <a-option :value="1">停用</a-option>
</a-select> </a-select>
</a-form-item> </a-form-item> -->
<a-form-item> <a-form-item>
<a-space> <a-space>
<a-button type="primary" @click="handleQuery"><icon-search /> 搜索</a-button> <a-button type="primary" @click="handleQuery">
<a-button @click="handleResetQuery"><icon-loop /> 重置</a-button> <icon-search /> 搜索</a-button>
<a-button @click="handleResetQuery">
<icon-loop /> 重置</a-button>
</a-space> </a-space>
</a-form-item> </a-form-item>
</a-form> </a-form>
@ -25,52 +27,58 @@
<div class="action"> <div class="action">
<a-space> <a-space>
<a-button v-has="'admin:sysRole:add'" type="primary" @click="handleAdd"><icon-plus /> 新增</a-button> <a-button type="primary" @click="handleAdd">
<a-button v-has="'admin:sysRole:remove'" type="primary" status="danger" @click="() => { deleteVisible = true; }"><icon-delete /> 批量删除</a-button> <icon-plus /> 新增</a-button>
<a-button type="primary" status="warning" disabled><icon-download /> 导出</a-button> <a-button type="primary" status="danger" @click="() => { deleteVisible = true; }">
<icon-delete /> 批量删除</a-button>
<!-- <a-button type="primary" status="warning" disabled>
<icon-download /> 导出</a-button> -->
</a-space> </a-space>
</div> </div>
<a-table <a-table :columns="columns" :data="tableData"
:columns="columns" :pagination="{ 'show-total': true, 'show-jumper': true, 'show-page-size': true, total: pager.total, current: currentPage }"
:data="tableData" row-key="role_id" :row-selection="{ type: 'checkbox', showCheckedAll: true }"
:pagination="{ 'show-total': true, 'show-jumper': true, 'show-page-size': true, total: pager.count, current: currentPage }" @selection-change="(selection) => {deleteData = selection;}" @select="handleSelect"
row-key="roleId" @page-change="handlePageChange" @page-size-change="handlePageSizeChange">
:row-selection="{ type: 'checkbox', showCheckedAll: true }" <template #role_id="{record,rowIndex}">
@selection-change="(selection) => {deleteData = selection;}" <div>{{(rowIndex+1)+(pager.page-1)*10}}</div>
@select="handleSelect" </template>
@page-change="handlePageChange"
@page-size-change="handlePageSizeChange"
>
<template #status="{ record }"> <template #status="{ record }">
<a-tag v-if="record.status == 2" color="green">正常</a-tag> <a-space direction="vertical" size="large">
<a-tag v-else color="red">停用</a-tag> <a-switch v-model="record.role_status" :checked-value="1" :unchecked-value="2"
@change="handleChangeSwitch($event,record.role_id)" :disabled="record.is_admin==1" />
</a-space>
<!-- <a-tag v-if="record.status == 2" color="green">正常</a-tag>
<a-tag v-else color="red">停用</a-tag> -->
</template>
<template #is_admin="{ record }">
<a-tag v-if="record.is_admin == 0" color="green">否</a-tag>
<a-tag v-else color="red">是</a-tag>
</template> </template>
<template #createdAt="{ record }"> <template #createdAt="{ record }">
{{ parseTime(record.createdAt) }} {{ parseTime(record.createdAt) }}
</template> </template>
<template #action="{ record }"> <template #action="{ record }">
<a-space> <a-space>
<a-button v-has="'admin:sysRole:edit'" type="text" @click="handleUpdate(record)"><icon-edit /> 修改</a-button> <a-button type="text" @click="handleUpdate(record)">
<a-button v-has="'admin:sysRole:update'" type="text" @click="handleDataScope(record)"><icon-check-circle /> 数据权限 </a-button> <icon-edit /> 修改</a-button>
<a-button v-has="'admin:sysRole:remove'" type="text" @click="() => { deleteVisible = true; deleteData = [record.roleId]; }"><icon-check-circle /> 删除 </a-button> <!-- <a-button type="text" @click="handleDataScope(record)">
<icon-check-circle /> 数据权限 </a-button> -->
<a-button type="text" @click="() => { deleteVisible = true; deleteData = [record.role_id]; }">
<icon-check-circle /> 删除 </a-button>
</a-space> </a-space>
</template> </template>
</a-table> </a-table>
<!-- Role Modal --> <!-- Role Modal -->
<a-modal <a-modal v-model:visible="modalVisible" :title="title" title-align="start" @before-ok="handleBeforeOk"
v-model:visible="modalVisible" @close="handleCancel">
:title="title"
title-align="start"
@before-ok="handleBeforeOk"
@close="handleCancel"
>
<a-form :model="modalForm" :rules="rules" ref="modalFormRef"> <a-form :model="modalForm" :rules="rules" ref="modalFormRef">
<a-form-item field="roleName" label="角色名称"> <a-form-item field="role_name" label="角色名称">
<a-input v-model="modalForm.roleName" placeholder="请输入角色名称" /> <a-input v-model="modalForm.role_name" placeholder="请输入角色名称" />
</a-form-item> </a-form-item>
<a-form-item field="roleKey" label="权限字符"> <!-- <a-form-item field="roleKey" label="权限字符">
<a-input v-model="modalForm.roleKey" placeholder="请输入权限字符" /> <a-input v-model="modalForm.roleKey" placeholder="请输入权限字符" />
</a-form-item> </a-form-item>
<a-form-item field="roleSort" label="角色排序"> <a-form-item field="roleSort" label="角色排序">
@ -80,13 +88,20 @@
:default-value="0" :default-value="0"
:style="{ width: '150px' }" :style="{ width: '150px' }"
/> />
</a-form-item> </a-form-item> -->
<a-form-item field="status" label="状态"> <!-- <a-form-item field="status" label="状态">
<a-radio-group v-model="modalForm.status"> <a-radio-group v-model="modalForm.role_status">
<a-radio value="2">正常</a-radio> <a-radio :value="2">正常</a-radio>
<a-radio value="1">停用</a-radio> <a-radio :value="1">停用</a-radio>
</a-radio-group>
</a-form-item> -->
<a-form-item field="is_admin" label="是否是管理员">
<a-radio-group v-model="modalForm.is_admin">
<a-radio :value="0">否</a-radio>
<a-radio :value="1">是</a-radio>
</a-radio-group> </a-radio-group>
</a-form-item> </a-form-item>
<a-form-item label="权限设置"> <a-form-item label="权限设置">
<a-tree <a-tree
v-model:checked-keys="checkedKeys" v-model:checked-keys="checkedKeys"
@ -94,99 +109,114 @@
:check-strictly="false" :check-strictly="false"
:data="treeData" :data="treeData"
:default-expand-all="false" :default-expand-all="false"
:field-names="{ key: 'id', title: 'label' }" :field-names="{ key: 'menu_id', title: 'menu_name',icon: '_' }"
/> />
</a-form-item> </a-form-item>
<!--
<a-form-item field="remark" label="备注"> <a-form-item field="remark" label="备注">
<a-textarea v-model="modalForm.remark" placeholder="请输入备注内容" /> <a-textarea v-model="modalForm.remark" placeholder="请输入备注内容" />
</a-form-item> </a-form-item>
-->
</a-form> </a-form>
</a-modal> </a-modal>
<!-- DataScope Modal --> <!-- DataScope Modal -->
<a-modal <!-- <a-modal v-model:visible="scopedModalVisible" :title="title" title-align="start" @before-ok="handleScopeBeforeOk"
v-model:visible="scopedModalVisible" @close="handleCancel">
:title="title"
title-align="start"
@before-ok="handleScopeBeforeOk"
@close="handleCancel"
>
<a-form :model="scopeForm"> <a-form :model="scopeForm">
<a-form-item field="roleName" label="角色名称"> <a-form-item field="role_name" label="角色名称">
<a-input v-model="scopeForm.roleName" disabled /> <a-input v-model="scopeForm.role_name" disabled />
</a-form-item> </a-form-item>
<a-form-item field="roleKey" label="权限字符"> <a-form-item field="roleKey" label="权限字符">
<a-input v-model="scopeForm.roleKey" disabled /> <a-input v-model="scopeForm.roleKey" disabled />
</a-form-item> </a-form-item>
<a-form-item field="dataScope" label="权限范围"> <a-form-item field="dataScope" label="权限范围">
<a-select v-model="scopeForm.dataScope" placeholder="请选择权限范围"> <a-select v-model="scopeForm.dataScope" placeholder="请选择权限范围">
<a-option <a-option v-for="item in dataScopeOptions" :key="item.value" :value="item.value" :label="item.label" />
v-for="item in dataScopeOptions"
:key="item.value"
:value="item.value"
:label="item.label"
/>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-form> </a-form>
</a-modal> </a-modal> -->
<!-- Akiraka 20230223 删除与批量删除 开始 --> <!-- Akiraka 20230223 删除与批量删除 开始 -->
<DeleteModal <DeleteModal :data="deleteData" :visible="deleteVisible" :delType="'role_ids'" :apiDelete="removeRole"
:data="deleteData" @deleteVisibleChange="() => deleteVisible = false" />
:visible="deleteVisible"
:apiDelete="removeRole"
@deleteVisibleChange="() => deleteVisible = false"
/>
<!-- Akiraka 20230223 删除与批量删除 结束 --> <!-- Akiraka 20230223 删除与批量删除 结束 -->
</div> </div>
</template> </template>
<script setup> <script setup>
import { onMounted, reactive, ref, getCurrentInstance, nextTick, watch } from 'vue'; import {
import { getRole, addRole, updateRole, removeRole, updateRoleScoped, getRoleMenuTree } from '@/api/admin/role'; onMounted,
reactive,
ref,
getCurrentInstance,
nextTick,
watch
} from 'vue';
import {
getRole,
addRole,
updateRole,
removeRole,
updateRoleScoped,
getRoleMenuTree,
roleDetail,
roleStatus
} from '@/api/admin/role';
// Akiraka 20230210 删除数据 // Akiraka 20230210 删除数据
const deleteData = ref([]) const deleteData = ref([])
// Akiraka 20230210 删除对话框 // Akiraka 20230210 删除对话框
const deleteVisible = ref(false) const deleteVisible = ref(false)
// Akiraka 20230210 监听删除事件 // Akiraka 20230210 监听删除事件
watch(() => deleteVisible.value ,(value) => { watch(() => deleteVisible.value, (value) => {
if ( value == false ) { if (value == false) {
getRoleInfo({ ...pager, ...queryForm }); getRoleInfo({
...pager,
...queryForm
});
} }
}) })
const { proxy } = getCurrentInstance(); const {
proxy
} = getCurrentInstance();
const currentPage = ref(1); const currentPage = ref(1);
// Pager // Pager
const pager = { const pager = {
count: 0, total: 1,
pageIndex: 1, page: 1,
pageSize: 10, page_size: 10,
}; };
// Batch Delete List // Batch Delete List
const batchDeleteList = ref([]); const batchDeleteList = ref([]);
// Form // Form
const queryForm = reactive({}); const queryForm = reactive({});
const modalForm = reactive({ const modalForm = reactive({
sort: 0, sort: 0,
status: '2', role_status: '',
}); is_admin: ''
const scopeForm = reactive({}); });
const scopeForm = reactive({});
// rules // rules
const rules = { const rules = {
roleName: [{ required: true, message: '请输入角色名称' }], role_name: [{
roleKey: [{ required: true, message: '请输入权限字符' }], required: true,
}; message: '请输入角色名称'
}],
roleKey: [{
required: true,
message: '请输入权限字符'
}],
};
// ScopeOption // ScopeOption
const dataScopeOptions = [ const dataScopeOptions = [{
{
value: '1', value: '1',
label: '全部数据权限', label: '全部数据权限',
}, },
@ -206,122 +236,188 @@ const dataScopeOptions = [
value: '5', value: '5',
label: '仅本人数据权限', label: '仅本人数据权限',
}, },
]; ];
// Table Columns // Table Columns
const columns = [ const columns = [{
{ title: '编号', dataIndex: 'roleId' }, title: '编号',
{ title: '角色名称', dataIndex: 'roleName' }, dataIndex: 'role_id',
{ title: '权限字符', dataIndex: 'roleKey' }, slotName: 'role_id'
{ title: '排序', dataIndex: 'roleSort' }, },
{ title: '状态', dataIndex: 'status', slotName: 'status' }, {
{ title: '创建时间', dataIndex: 'createdAt', slotName: 'createdAt' }, title: '角色名称',
{ title: '操作', slotName: 'action', width: 250 }, dataIndex: 'role_name'
]; },
{
title: '状态',
dataIndex: 'role_status',
slotName: 'status'
},
{
title: '是否是管理员',
dataIndex: 'is_admin',
slotName: 'is_admin'
},
{
title: '创建时间',
dataIndex: 'created_at',
slotName: 'created_at'
},
{
title: '操作',
slotName: 'action',
width: 250
},
];
// Table Data; // Table Data;
const tableData = ref([]); const tableData = ref([]);
// Tree Data; // Tree Data;
const checkedKeys = ref([]); const checkedKeys = ref([]);
const treeData = ref([]); const treeData = ref([]);
// Modal // Modal
const modalVisible = ref(false); const modalVisible = ref(false);
const scopedModalVisible = ref(false); const scopedModalVisible = ref(false);
const title = ref('默认标题'); const title = ref('默认标题');
// Table Select // Table Select
const handleSelect = (rowKey) => { const handleSelect = (rowKeys,rowkey,record) => {
batchDeleteList.value = rowKey; console.log(rowKeys,rowkey);
}; batchDeleteList.value = rowKeys;
};
// 查询 // 查询
const handleQuery = async () => { const handleQuery = async () => {
const res = await getRole({ ...pager, ...queryForm }); const res = await getRole({
const { count, list, pageIndex, pageSize } = res.data; ...pager,
...queryForm
});
const {
total,
data,
page,
page_size
} = res.data;
tableData.value =data;
Object.assign(pager, {
total,
page,
page_size
});
};
tableData.value = list; // 重置查询
Object.assign(pager, { count, pageIndex, pageSize }); const handleResetQuery = () => {
};
// 重置查询
const handleResetQuery = () => {
proxy.$refs.queryFormRef.resetFields(); proxy.$refs.queryFormRef.resetFields();
getRoleInfo(queryForm); getRoleInfo(queryForm);
}; };
// 创建 // 创建
const handleAdd = () => { const handleAdd = () => {
modalVisible.value = true; modalVisible.value = true;
title.value = '创建角色'; title.value = '创建角色';
}; modalForm.is_admin='';
modalForm.role_status='';
};
// 修改角色 // 修改角色
const handleUpdate = async (record) => { const handleUpdate = async (record) => {
modalVisible.value = true; modalVisible.value = true;
title.value = '修改角色'; title.value = '修改角色';
const { code, data, message } = await roleDetail(record.role_id);
await nextTick(); if (code == 200) {
Object.assign(modalForm, record); Object.assign(modalForm, data);
checkedKeys.value = data.menu_ids;
} else {
proxy.$notification.error(message);
}
//await nextTick();
//Object.assign(modalForm, record);
// 显示勾选的菜单，checkedKeys 传入id数组即可 // 显示勾选的菜单，checkedKeys 传入id数组即可
const menuIdsChecked = []; // const menuIdsChecked = [];
record.sysMenu.forEach((item) => { // record.sysMenu.forEach((item) => {
menuIdsChecked.push(item.menuId); // menuIdsChecked.push(new String(item.menu_id));
}); // });
checkedKeys.value = menuIdsChecked; // checkedKeys.value = menuIdsChecked;
}; };
// 分配数据权限 // 分配数据权限
const handleDataScope = async (record) => { const handleDataScope = async (record) => {
scopedModalVisible.value = true; scopedModalVisible.value = true;
title.value = '分配数据权限'; title.value = '分配数据权限';
const { roleKey, roleName, dataScope, roleId } = record; const {
roleKey,
role_name,
dataScope,
roleId
} = record;
await nextTick(); await nextTick();
Object.assign(scopeForm, { roleKey, roleName, dataScope, roleId }); Object.assign(scopeForm, {
}; roleKey,
role_name,
dataScope,
roleId
});
};
/** /**
* 分页改变 * 分页改变
* @param {Number} [page] * @param {Number} [page]
*/ */
const handlePageChange = (page) => { const handlePageChange = (page) => {
pager.pageIndex = page; pager.page = page;
// 修改当前页码 // 修改当前页码
currentPage.value = page; currentPage.value = page;
getRoleInfo({ ...pager, ...queryForm }); getRoleInfo({
}; ...pager,
...queryForm
});
};
// 每页数据量 // 每页数据量
const handlePageSizeChange = (pageSize) => { const handlePageSizeChange = (page_size) => {
pager.pageSize = pageSize; pager.page_size = page_size;
getRoleInfo({ ...pager, ...queryForm }); getRoleInfo({
}; ...pager,
...queryForm
});
};
// 角色管理表单提交 // 角色管理表单提交
// 异步关闭表单需要使用 done() 回调函数 // 异步关闭表单需要使用 done() 回调函数
const handleBeforeOk = (done) => { const handleBeforeOk = (done) => {
proxy.$refs.modalFormRef.validate(async (valid) => { proxy.$refs.modalFormRef.validate(async (valid) => {
// 如果 valid 为空则数据校验通过 // 如果 valid 为空则数据校验通过
if (!valid) { if (!valid) {
modalForm.menuIds = checkedKeys.value; console.log(checkedKeys.value);
modalForm.menu_ids = checkedKeys.value;
let res; let res;
if (modalForm.roleId) { if (modalForm.role_id) {
const { code, msg } = await updateRole(modalForm, modalForm.roleId); const {
if (code == 200 ) { code,
message
} = await updateRole(modalForm, modalForm.role_id);
if (code == 200) {
proxy.$notification.success('更新成功'); proxy.$notification.success('更新成功');
} else { } else {
proxy.$notification.error(msg); proxy.$notification.error(message);
} }
} else { } else {
const { code, msg } = await addRole(modalForm); //modalForm.is_admin = modalForm.is_admin ? Number(modalForm.is_admin) : ''
if (code == 200 ) { console.log(modalForm);
const {
code,
message
} = await addRole(modalForm);
if (code == 200) {
proxy.$notification.success('新增成功'); proxy.$notification.success('新增成功');
} else { } else {
proxy.$notification.error(msg); proxy.$notification.error(message);
} }
} }
getRoleInfo(); getRoleInfo();
@ -331,56 +427,76 @@ const handleBeforeOk = (done) => {
done(false); done(false);
} }
}); });
}; };
// 数据权限表单提交 // 数据权限表单提交
const handleScopeBeforeOk = async (done) => { const handleScopeBeforeOk = async (done) => {
const res = await updateRoleScoped(scopeForm); const res = await updateRoleScoped(scopeForm);
proxy.$message.success(res.msg); proxy.$message.success(res.msg);
done(); done();
getRoleInfo(); getRoleInfo();
}; };
// 重置数据表单 // 重置数据表单
const handleCancel = () => { const handleCancel = () => {
modalVisible.value = false; modalVisible.value = false;
modalForm.roleId = null; modalForm.role_id = null;
scopeForm.roleId = null; scopeForm.role_id = null;
checkedKeys.value = []; checkedKeys.value = [];
proxy.$refs.modalFormRef.resetFields(); proxy.$refs.modalFormRef.resetFields();
}; };
//切换启用状态
// 获取角色信息 const handleChangeSwitch = async (value, id) => {
const getRoleInfo = async (params = { const { code, data, message } = await roleStatus({ role_status: value },id);
page:1, if (code == 200) {
role_name:'', value==1?proxy.$notification.success('启用成功'):proxy.$notification.success('禁用成功');
page_size:10
}) => {
const { data, code, msg } = await getRole(params);
if ( code == 200 ) {
tableData.value = data.list;
Object.assign(pager, { count: data.count, pageIndex: data.pageIndex, pageSize: data.pageSize });
} else { } else {
proxy.$notification.error(msg); proxy.$notification.error(message);
} }
};
// 获取角色菜单信息 }
const getRoleMenuTreeInfo = async () => { // 获取角色信息
const res = await getRoleMenuTree({}, 0); const getRoleInfo = async (params = {
treeData.value = res.data.menus; page: 1,
checkedKeys.value = res.data.checkedKeys; role_name: '',
}; page_size: 10
}) => {
const {
data,
code,
message
} = await getRole(params);
if (code == 200) {
onMounted(() => { tableData.value = data.data;
Object.assign(pager, {
total: data.total,
page: data.page,
page_size: data.page_size
});
} else {
proxy.$notification.error(message);
}
};
// 获取角色菜单信息
const getRoleMenuTreeInfo = async () => {
const res = await getRoleMenuTree();
treeData.value = res.data;
console.log(res.data)
};
onMounted(() => {
getRoleInfo(); getRoleInfo();
getRoleMenuTreeInfo(); getRoleMenuTreeInfo();
}); });
</script> </script>
<style setup> <style setup>
.action { .action {
margin-bottom: 12px; margin-bottom: 12px;
} }
</style> </style>

98
src/views/admin/sys-user/index.vue
View File

@ -6,26 +6,26 @@
<a-input v-model="queryForm.deptName" placeholder="请输入部门名称" @press-enter="handleQuery" /> <a-input v-model="queryForm.deptName" placeholder="请输入部门名称" @press-enter="handleQuery" />
</a-form-item> </a-form-item>
<a-form-item field="username" label="用户名称"> <a-form-item field="username" label="用户名称">
<a-input v-model="queryForm.username" placeholder="请输入用户名称" @press-enter="handleQuery" /> <a-input v-model="queryForm.nick_name" placeholder="请输入用户名称" @press-enter="handleQuery" />
</a-form-item> </a-form-item>
<a-form-item field="phone" label="手机号码"> <a-form-item field="phone" label="手机号码">
<a-input v-model="queryForm.phone" placeholder="请输入用户手机号" @press-enter="handleQuery" /> <a-input v-model="queryForm.phone" placeholder="请输入用户手机号" @press-enter="handleQuery" />
</a-form-item> </a-form-item>
<a-form-item field="status" label="用户状态"> <a-form-item field="role_status" label="用户状态">
<a-select <a-select
v-model="queryForm.status" v-model="queryForm.role_status"
placeholder="请选择用户状态" placeholder="请选择用户状态"
:style="{ width: '205px' }" :style="{ width: '205px' }"
> >
<a-option value="2">正常</a-option> <a-option :value="2">正常</a-option>
<a-option value="1">停用</a-option> <a-option :value="1">停用</a-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-divider direction="vertical" :style="{ height: '30px' }" /> <a-divider direction="vertical" :style="{ height: '30px' }" />
<a-form-item class="form-action"> <a-form-item class="form-action">
<a-space size="medium"> <a-space size="medium">
<a-button v-has="'admin:sysUser:query'" type="primary" @click="handleQuery"><icon-search /> 搜索</a-button> <a-button type="primary" @click="handleQuery"><icon-search /> 搜索</a-button>
<a-button @click="handleResetQuery"><icon-loop /> 重置</a-button> <a-button @click="handleResetQuery"><icon-loop /> 重置</a-button>
</a-space> </a-space>
</a-form-item> </a-form-item>
@ -43,8 +43,8 @@
<a-col :span="20"> <a-col :span="20">
<!-- Action --> <!-- Action -->
<a-space class="action"> <a-space class="action">
<a-button v-has="'admin:sysUser:add'" type="primary" @click="handleAdd" data-test="newUser"><icon-plus /> 新增</a-button> <a-button type="primary" @click="handleAdd" data-test="newUser"><icon-plus /> 新增</a-button>
<a-button v-has="'admin:sysUser:remove'" type="primary" status="danger" @click="() => { deleteVisible = true; }"><icon-delete /> 批量删除</a-button> <a-button type="primary" status="danger" @click="() => { deleteVisible = true; }"><icon-delete /> 批量删除</a-button>
</a-space> </a-space>
<!-- Table --> <!-- Table -->
@ -53,30 +53,33 @@
:data="tableData" :data="tableData"
:bordered="false" :bordered="false"
:row-selection="{ type: 'checkbox', showCheckedAll: true }" :row-selection="{ type: 'checkbox', showCheckedAll: true }"
:pagination="{ 'show-total': true, 'show-jumper': true, 'show-page-size': true, total: pager.count, current: currentPage }" :pagination="{ 'show-total': true, 'show-jumper': true, 'show-page-size': true, total: pager.total, current: currentPage }"
row-key="userId" row-key="user_id"
@selection-change="(selection) => {deleteData = selection;}" @selection-change="(selection) => {deleteData = selection;}"
@page-change="handlePageChange" @page-change="handlePageChange"
@page-size-change="handlePageSizeChange" @page-size-change="handlePageSizeChange"
> >
<template #dept="{ record }"> <template #role_name="{ record }">
{{ record.dept.deptName }} {{ record.role.role_name}}
</template> </template>
<template #status="{ record }"> <template #dept="{ record }">
{{ record.dept.dept_name }}
</template>
<template #role_status="{ record }">
<a-switch <a-switch
v-model="record.status" v-model="record.role_status"
checked-value="2" :checked-value="2"
unchecked-value="1" :unchecked-value="1"
@change="handleSwitchChange(record)" @change="handleSwitchChange(record)"
/> />
</template> </template>
<template #createdAt="{ record }"> <template #created_at="{ record }">
{{ parseTime(record.createdAt) }} {{ parseTime(record.created_at) }}
</template> </template>
<template #action="{ record }"> <template #action="{ record }">
<a-button v-has="'admin:sysUser:edit'" type="text" @click="handleUpdate(record)"><icon-edit /> 修改</a-button> <a-button type="text" @click="handleUpdate(record)"><icon-edit /> 修改</a-button>
<a-button v-has="'admin:sysUser:edit'" type="text" @click="() => { deleteVisible = true; deleteData = [record.userId]; }"><icon-delete /> 删除</a-button> <a-button type="text" @click="() => { deleteVisible = true; deleteData = [record.user_id]; }"><icon-delete /> 删除</a-button>
<a-button v-has="'admin:sysUser:resetPassword'" type="text" @click="handleReset(record.userId)"><icon-refresh /> 重置</a-button> <a-button type="text" @click="handleReset(record.user_id)"><icon-refresh /> 重置</a-button>
</template> </template>
</a-table> </a-table>
</a-col> </a-col>
@ -136,7 +139,7 @@
/> />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col v-if="!modalForm.userId" :span="12"> <a-col v-if="!modalForm.user_id" :span="12">
<a-form-item field="password" label="用户密码"> <a-form-item field="password" label="用户密码">
<a-input-password <a-input-password
v-model="modalForm.password" v-model="modalForm.password"
@ -259,9 +262,9 @@ const { currentPage, getSysPostInfo, getSysRoleInfo, getSysDeptTreeInfo, getSysU
// Pager // Pager
const pager = reactive({ const pager = reactive({
count: 0, total: 0,
pageIndex: 1, page: 1,
pageSize: 10 page_size: 10
}); });
// Reset Pwd // Reset Pwd
@ -342,9 +345,9 @@ function useResetPwd() {
const resetParams = {}; const resetParams = {};
// 重置 // 重置
const handleReset = (userId) => { const handleReset = (user_id) => {
resetPwdVisible.value = true; resetPwdVisible.value = true;
resetParams.userId = userId; resetParams.user_id = user_id;
}; };
// 重置用户密码 // 重置用户密码
@ -378,12 +381,12 @@ function useApiInfo() {
* @param {*} [params] * @param {*} [params]
*/ */
const getSysUserInfo = async (params = {}) => { const getSysUserInfo = async (params = {}) => {
const { data, code, msg } = await getUser(params); const { data, code, message } = await getUser(params);
if ( code == 200 ) { if ( code == 200 ) {
tableData.value = data.list; tableData.value = data.data;
Object.assign(pager, { count: data.count, pageIndex: data.pageIndex, pageSize: data.pageSize }); Object.assign(pager, { count: data.total, pageIndex: data.page, page_size: data.page_size });
} else { } else {
proxy.$notification.error(msg); proxy.$notification.error(message);
} }
}; };
@ -424,19 +427,20 @@ function useTableList() {
const columns = [ const columns = [
{ {
title: '编号', title: '编号',
dataIndex: 'userId', dataIndex: 'user_id',
}, },
{ {
title: '登录名', title: '角色',
dataIndex: 'username', dataIndex: 'role_name',
slotName: 'role_name',
}, },
{ {
title: '昵称', title: '昵称',
dataIndex: 'nickName', dataIndex: 'nick_name',
}, },
{ {
title: '部门', title: '部门',
dataIndex: 'deptName', dataIndex: 'dept_name',
slotName: 'dept', slotName: 'dept',
}, },
{ {
@ -445,13 +449,13 @@ function useTableList() {
}, },
{ {
title: '状态', title: '状态',
dataIndex: 'status', dataIndex: 'role_status',
slotName: 'status', slotName: 'role_status',
}, },
{ {
title: '创建时间', title: '创建时间',
dataIndex: 'createdAt', dataIndex: 'created_at',
slotName: 'createdAt', slotName: 'created_at',
}, },
{ {
title: '操作', title: '操作',
@ -467,7 +471,7 @@ function useTableList() {
* @param {Number} [page] * @param {Number} [page]
*/ */
const handlePageChange = (page) => { const handlePageChange = (page) => {
pager.pageIndex = page; pager.page = page;
// 修改当前页码 // 修改当前页码
currentPage.value = page; currentPage.value = page;
@ -475,8 +479,8 @@ function useTableList() {
}; };
// 每页数据量 // 每页数据量
const handlePageSizeChange = (pageSize) => { const handlePageSizeChange = (page_size) => {
pager.pageSize = pageSize; pager.page_size = page_size;
getSysUserInfo({ ...pager, ...queryForm }); getSysUserInfo({ ...pager, ...queryForm });
}; };
@ -489,7 +493,7 @@ function useTableList() {
} 用户？`, } 用户？`,
hideCancel: false, hideCancel: false,
onOk: async () => { onOk: async () => {
const params = { userId: record.userId, status: record.status }; const params = { user_id: record.user_id, status: record.status };
const res = await updateUserStatus(params); const res = await updateUserStatus(params);
proxy.$message.success(res.msg); proxy.$message.success(res.msg);
}, },
@ -535,7 +539,7 @@ function useModalOperate() {
const handleModalCancel = (formEl) => { const handleModalCancel = (formEl) => {
modalVisible.value = false; modalVisible.value = false;
resetForm(formEl); resetForm(formEl);
modalForm.userId = null; modalForm.user_id = null;
}; };
// 新增用户 // 新增用户
@ -563,7 +567,7 @@ function useModalOperate() {
const handleBeforeOk = (done) => { const handleBeforeOk = (done) => {
proxy.$refs.modalFormRef.validate(async (valid) => { proxy.$refs.modalFormRef.validate(async (valid) => {
if (!valid) { if (!valid) {
if (!modalForm.userId) { if (!modalForm.user_id) {
const { code, msg } = await addUser(modalForm); const { code, msg } = await addUser(modalForm);
if (code == 200 ) { if (code == 200 ) {
proxy.$notification.success('新增成功'); proxy.$notification.success('新增成功');
@ -571,7 +575,7 @@ function useModalOperate() {
proxy.$notification.error(msg); proxy.$notification.error(msg);
} }
} else { } else {
const { code, msg } = await updateUser(modalForm, modalForm.userId); const { code, msg } = await updateUser(modalForm, modalForm.user_id);
if (code == 200 ) { if (code == 200 ) {
proxy.$notification.success('更新成功'); proxy.$notification.success('更新成功');
} else { } else {

2
src/views/login/index.vue
View File

@ -125,7 +125,7 @@ const handleLogin = () => {
proxy.$refs.loginFormRef.validate(async (valid) => { proxy.$refs.loginFormRef.validate(async (valid) => {
if (!valid) { if (!valid) {
try { try {
const { code, data, msg } = await login(loginForm); const { code, data, message } = await login(loginForm);
if ( code == 200 ) { if ( code == 200 ) {
const {avatar,nick_name,token,user_id}=data; const {avatar,nick_name,token,user_id}=data;
const userInfo={ const userInfo={

13
src/views/upload/index.vue Normal file
View File

@ -0,0 +1,13 @@
<template>
<div>
<upload></upload>
</div>
</template>
<script>
</script>
<style scoped>
</style>