tt/vue3-element-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 代码统一风格格式化

Browse Source 
Former-commit-id: 5d0a75e41127c57c663eb2617b1ce66d039f4c29
This commit is contained in:
郝先瑞
2022-05-08 13:06:12 +08:00
parent 77a71db326
commit eab11687aa
137 changed files with 10635 additions and 10635 deletions
Download Patch File Download Diff File Expand all files Collapse all files

598
src/views/system/client/index.vue
View File

@@ -1,17 +1,17 @@
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: 'client'
name: 'client'
};
</script>
<script setup lang="ts">
import {
listClientPages,
getClientFormDetial,
addClient,
updateClient,
deleteClients
listClientPages,
getClientFormDetial,
addClient,
updateClient,
deleteClients
} from '@/api/system/client';
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
import { onMounted, reactive, getCurrentInstance, ref, toRefs } from 'vue';
@@ -22,349 +22,349 @@ const { proxy }: any = getCurrentInstance();
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
const state = reactive({
loading: true,
// 选中ID数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
queryParams: {
pageNum: 1,
pageSize: 10
} as ClientQueryParam,
clientList: [] as ClientItem[],
total: 0,
dialog: {
title: '',
visible: false,
type: 'create'
},
formData: {} as ClientFormData,
rules: {
clientId: [{ required: true, message: '客户端ID不能为空', trigger: 'blur' }]
},
authorizedGrantTypesOptions: [] as Option[],
checkedAuthorizedGrantTypes: [] as string[]
loading: true,
// 选中ID数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
queryParams: {
pageNum: 1,
pageSize: 10
} as ClientQueryParam,
clientList: [] as ClientItem[],
total: 0,
dialog: {
title: '',
visible: false,
type: 'create'
},
formData: {} as ClientFormData,
rules: {
clientId: [{ required: true, message: '客户端ID不能为空', trigger: 'blur' }]
},
authorizedGrantTypesOptions: [] as Option[],
checkedAuthorizedGrantTypes: [] as string[]
});
const {
loading,
ids,
multiple,
queryParams,
clientList,
total,
dialog,
formData,
rules,
authorizedGrantTypesOptions,
checkedAuthorizedGrantTypes
loading,
ids,
multiple,
queryParams,
clientList,
total,
dialog,
formData,
rules,
authorizedGrantTypesOptions,
checkedAuthorizedGrantTypes
} = toRefs(state);
function handleQuery() {
listClientPages(state.queryParams).then(({ data }) => {
state.clientList = data.list;
state.total = data.total;
state.loading = false;
});
listClientPages(state.queryParams).then(({ data }) => {
state.clientList = data.list;
state.total = data.total;
state.loading = false;
});
}
function resetQuery() {
queryFormRef.value.resetFields();
handleQuery();
queryFormRef.value.resetFields();
handleQuery();
}
function handleSelectionChange(selection: any) {
state.ids = selection.map((item: any) => item.clientId);
state.single = selection.length !== 1;
state.multiple = !selection.length;
state.ids = selection.map((item: any) => item.clientId);
state.single = selection.length !== 1;
state.multiple = !selection.length;
}
function handleAdd() {
proxy.$listDictsByCode('grant_type').then((response: any) => {
state.authorizedGrantTypesOptions = response.data;
});
proxy.$listDictsByCode('grant_type').then((response: any) => {
state.authorizedGrantTypesOptions = response.data;
});
state.dialog = {
title: '添加客户端',
visible: true,
type: 'create'
};
state.dialog = {
title: '添加客户端',
visible: true,
type: 'create'
};
}
function handleUpdate(row: any) {
state.dialog = {
title: '修改客户端',
visible: true,
type: 'edit'
};
const clientId = row.clientId || ids;
state.dialog = {
title: '修改客户端',
visible: true,
type: 'edit'
};
const clientId = row.clientId || ids;
proxy.$listDictsByCode('grant_type').then((res: any) => {
state.authorizedGrantTypesOptions = res.data;
proxy.$listDictsByCode('grant_type').then((res: any) => {
state.authorizedGrantTypesOptions = res.data;
getClientFormDetial(clientId).then(({ data }) => {
state.formData = data;
state.checkedAuthorizedGrantTypes = data.authorizedGrantTypes?.split(',');
});
});
getClientFormDetial(clientId).then(({ data }) => {
state.formData = data;
state.checkedAuthorizedGrantTypes = data.authorizedGrantTypes?.split(',');
});
});
}
function submitForm() {
dataFormRef.value.validate((isvalid: boolean) => {
if (isvalid) {
state.formData.authorizedGrantTypes =
state.checkedAuthorizedGrantTypes.join(',');
if (state.dialog.type == 'edit') {
updateClient(state.formData.clientId, state.formData).then(() => {
ElMessage.success('修改成功');
state.dialog.visible = false;
cancel();
handleQuery();
});
} else {
addClient(state.formData).then(() => {
ElMessage.success('新增成功');
cancel();
handleQuery();
});
}
}
});
dataFormRef.value.validate((isvalid: boolean) => {
if (isvalid) {
state.formData.authorizedGrantTypes =
state.checkedAuthorizedGrantTypes.join(',');
if (state.dialog.type == 'edit') {
updateClient(state.formData.clientId, state.formData).then(() => {
ElMessage.success('修改成功');
state.dialog.visible = false;
cancel();
handleQuery();
});
} else {
addClient(state.formData).then(() => {
ElMessage.success('新增成功');
cancel();
handleQuery();
});
}
}
});
}
function resetForm() {
dataFormRef.value.resetFields();
state.checkedAuthorizedGrantTypes = [];
dataFormRef.value.resetFields();
state.checkedAuthorizedGrantTypes = [];
}
function cancel() {
resetForm();
state.dialog.visible = false;
resetForm();
state.dialog.visible = false;
}
function handleDelete(row: any) {
const clientIds = [row.clientId || ids].join(',');
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteClients(clientIds).then(() => {
ElMessage.success('删除成功');
handleQuery();
});
})
.catch(() => ElMessage.info('已取消删除'));
const clientIds = [row.clientId || ids].join(',');
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteClients(clientIds).then(() => {
ElMessage.success('删除成功');
handleQuery();
});
})
.catch(() => ElMessage.info('已取消删除'));
}
onMounted(() => {
handleQuery();
handleQuery();
});
</script>
<template>
<div class="app-container">
<!-- 搜索表单 -->
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item>
<el-button type="success" :icon="Plus" @click="handleAdd"
>新增</el-button
>
<el-button
type="danger"
:icon="Delete"
:disabled="multiple"
@click="handleDelete"
>删除</el-button
>
</el-form-item>
<div class="app-container">
<!-- 搜索表单 -->
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item>
<el-button type="success" :icon="Plus" @click="handleAdd"
>新增</el-button
>
<el-button
type="danger"
:icon="Delete"
:disabled="multiple"
@click="handleDelete"
>删除</el-button
>
</el-form-item>
<el-form-item prop="clientId">
<el-input
v-model="queryParams.clientId"
placeholder="输入客户端ID"
clearable
style="width: 240px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item prop="clientId">
<el-input
v-model="queryParams.clientId"
placeholder="输入客户端ID"
clearable
style="width: 240px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery"
>搜索</el-button
>
<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery"
>搜索</el-button
>
<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- 数据表格 -->
<el-table
v-loading="loading"
:data="clientList"
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" type="index" width="55" align="center" />
<el-table-column label="客户端ID" prop="clientId" width="200" />
<el-table-column label="客户端密钥" prop="clientSecret" width="100" />
<el-table-column label="域" width="100" prop="scope" />
<el-table-column label="自动放行" prop="autoapprove" width="100" />
<el-table-column label="授权方式" prop="authorizedGrantTypes" />
<el-table-column
label="认证令牌时效(单位：秒)"
width="200"
prop="accessTokenValidity"
/>
<el-table-column
label="刷新令牌时效(单位：秒)"
width="200"
prop="refreshTokenValidity"
/>
<el-table-column label="操作" align="center" width="120">
<template #default="scope">
<el-button
type="primary"
:icon="Edit"
circle
plain
@click.stop="handleUpdate(scope.row)"
/>
<el-button
type="danger"
:icon="Delete"
circle
plain
@click.stop="handleDelete(scope.row)"
/>
</template>
</el-table-column>
</el-table>
<!-- 数据表格 -->
<el-table
v-loading="loading"
:data="clientList"
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" type="index" width="55" align="center" />
<el-table-column label="客户端ID" prop="clientId" width="200" />
<el-table-column label="客户端密钥" prop="clientSecret" width="100" />
<el-table-column label="域" width="100" prop="scope" />
<el-table-column label="自动放行" prop="autoapprove" width="100" />
<el-table-column label="授权方式" prop="authorizedGrantTypes" />
<el-table-column
label="认证令牌时效(单位：秒)"
width="200"
prop="accessTokenValidity"
/>
<el-table-column
label="刷新令牌时效(单位：秒)"
width="200"
prop="refreshTokenValidity"
/>
<el-table-column label="操作" align="center" width="120">
<template #default="scope">
<el-button
type="primary"
:icon="Edit"
circle
plain
@click.stop="handleUpdate(scope.row)"
/>
<el-button
type="danger"
:icon="Delete"
circle
plain
@click.stop="handleDelete(scope.row)"
/>
</template>
</el-table-column>
</el-table>
<!-- 分页工具条 -->
<pagination
v-if="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="handleQuery"
/>
<!-- 分页工具条 -->
<pagination
v-if="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="handleQuery"
/>
<!-- 表单弹窗 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="700px">
<el-form
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="100px"
>
<el-row>
<el-col :span="12">
<el-form-item label="客户端ID" prop="clientId">
<el-input
v-model="formData.clientId"
placeholder="请输入客户端ID"
/>
</el-form-item>
</el-col>
<!-- 表单弹窗 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="700px">
<el-form
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="100px"
>
<el-row>
<el-col :span="12">
<el-form-item label="客户端ID" prop="clientId">
<el-input
v-model="formData.clientId"
placeholder="请输入客户端ID"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="客户端密钥" prop="clientSecret">
<el-input
v-model="formData.clientSecret"
placeholder="请输入客户端密钥"
/>
</el-form-item>
</el-col>
</el-row>
<el-col :span="12">
<el-form-item label="客户端密钥" prop="clientSecret">
<el-input
v-model="formData.clientSecret"
placeholder="请输入客户端密钥"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="域" prop="scope">
<el-input v-model="formData.scope" placeholder="请输入域" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="自动放行" prop="autoapprove">
<el-radio-group v-model="formData.autoapprove">
<el-radio label="true">是</el-radio>
<el-radio label="false">否</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="域" prop="scope">
<el-input v-model="formData.scope" placeholder="请输入域" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="自动放行" prop="autoapprove">
<el-radio-group v-model="formData.autoapprove">
<el-radio label="true">是</el-radio>
<el-radio label="false">否</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="授权方式" prop="authorizedGrantTypes">
<el-checkbox-group v-model="checkedAuthorizedGrantTypes">
<el-checkbox
v-for="item in authorizedGrantTypesOptions"
:key="item.value"
:label="item.value"
>{{ item.label }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="授权方式" prop="authorizedGrantTypes">
<el-checkbox-group v-model="checkedAuthorizedGrantTypes">
<el-checkbox
v-for="item in authorizedGrantTypesOptions"
:key="item.value"
:label="item.value"
>{{ item.label }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-row>
<el-col :span="12">
<el-form-item label="认证令牌时效" prop="accessTokenValidity">
<el-input
v-model="formData.accessTokenValidity"
placeholder="请输入认证令牌时效"
/>
</el-form-item>
</el-col>
<el-row>
<el-col :span="12">
<el-form-item label="认证令牌时效" prop="accessTokenValidity">
<el-input
v-model="formData.accessTokenValidity"
placeholder="请输入认证令牌时效"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="刷新令牌时效" prop="refreshTokenValidity">
<el-input
v-model="formData.refreshTokenValidity"
placeholder="请输入刷新令牌时效"
/>
</el-form-item>
</el-col>
</el-row>
<el-col :span="12">
<el-form-item label="刷新令牌时效" prop="refreshTokenValidity">
<el-input
v-model="formData.refreshTokenValidity"
placeholder="请输入刷新令牌时效"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="回调地址" prop="webServerRedirectUri">
<el-input
v-model="formData.webServerRedirectUri"
placeholder="请输入回调地址"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="权限" prop="authorities">
<el-input
v-model="formData.authorities"
placeholder="请输入权限"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="扩展信息" prop="additionalInformation">
<el-input
v-model="formData.additionalInformation"
type="textarea"
placeholder="JSON格式"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-row>
<el-col :span="12">
<el-form-item label="回调地址" prop="webServerRedirectUri">
<el-input
v-model="formData.webServerRedirectUri"
placeholder="请输入回调地址"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="权限" prop="authorities">
<el-input
v-model="formData.authorities"
placeholder="请输入权限"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="扩展信息" prop="additionalInformation">
<el-input
v-model="formData.additionalInformation"
type="textarea"
placeholder="JSON格式"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm"> 确定 </el-button>
<el-button @click="cancel"> 取消 </el-button>
</div>
</template>
</el-dialog>
</div>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm"> 确定 </el-button>
<el-button @click="cancel"> 取消 </el-button>
</div>
</template>
</el-dialog>
</div>
</template>

510
src/views/system/dept/index.vue
View File

@@ -1,7 +1,7 @@
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: 'dept'
name: 'dept'
};
</script>
@@ -11,23 +11,23 @@ import { onMounted, reactive, ref, toRefs } from 'vue';
// API依赖
import {
getDeptDetail,
deleteDept,
updateDept,
addDept,
listSelectDepartments,
listTableDepartments
getDeptDetail,
deleteDept,
updateDept,
addDept,
listSelectDepartments,
listTableDepartments
} from '@/api/system/dept';
// 组件依赖
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
import {
DeptFormData,
DeptItem,
DeptQueryParam,
Dialog,
Option
DeptFormData,
DeptItem,
DeptQueryParam,
Dialog,
Option
} from '@/types';
// DOM元素的引用声明定义
@@ -35,134 +35,134 @@ const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
const state = reactive({
// 选中ID数组
ids: [] as number[],
// 非单个禁用
single: true,
loading: true,
// 表格树数据
deptList: [] as DeptItem[],
// 部门下拉选项
deptOptions: [] as Option[],
// 弹窗属性
dialog: { visible: false } as Dialog,
// 查询参数
queryParams: {} as DeptQueryParam,
// 表单数据
formData: {
sort: 1,
status: 1
} as DeptFormData,
// 表单参数校验
rules: {
parentId: [
{ required: true, message: '上级部门不能为空', trigger: 'blur' }
],
name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
sort: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }]
}
// 选中ID数组
ids: [] as number[],
// 非单个禁用
single: true,
loading: true,
// 表格树数据
deptList: [] as DeptItem[],
// 部门下拉选项
deptOptions: [] as Option[],
// 弹窗属性
dialog: { visible: false } as Dialog,
// 查询参数
queryParams: {} as DeptQueryParam,
// 表单数据
formData: {
sort: 1,
status: 1
} as DeptFormData,
// 表单参数校验
rules: {
parentId: [
{ required: true, message: '上级部门不能为空', trigger: 'blur' }
],
name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
sort: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }]
}
});
const {
single,
loading,
deptList,
deptOptions,
queryParams,
formData,
rules,
dialog
single,
loading,
deptList,
deptOptions,
queryParams,
formData,
rules,
dialog
} = toRefs(state);
/**
* 部门查询
*/
function handleQuery() {
state.loading = true;
listTableDepartments(state.queryParams).then(({ data }) => {
state.deptList = data;
state.loading = false;
});
state.loading = true;
listTableDepartments(state.queryParams).then(({ data }) => {
state.deptList = data;
state.loading = false;
});
}
/**
* 重置查询
*/
function resetQuery() {
queryFormRef.value.resetFields();
handleQuery();
queryFormRef.value.resetFields();
handleQuery();
}
function handleSelectionChange(selection: any) {
state.ids = selection.map((item: any) => item.id);
state.single = selection.length === 0;
state.ids = selection.map((item: any) => item.id);
state.single = selection.length === 0;
}
/**
* 加载部门下拉数据源
*/
async function loadDeptData() {
const deptOptions: any[] = [];
listSelectDepartments().then(response => {
const rootDeptOption = {
value: '0',
label: '顶级部门',
children: response.data
};
deptOptions.push(rootDeptOption);
state.deptOptions = deptOptions;
});
const deptOptions: any[] = [];
listSelectDepartments().then(response => {
const rootDeptOption = {
value: '0',
label: '顶级部门',
children: response.data
};
deptOptions.push(rootDeptOption);
state.deptOptions = deptOptions;
});
}
/**
* 添加部门
*/
function handleAdd(row: any) {
loadDeptData();
state.formData.id = undefined;
state.formData.parentId = row.id;
state.dialog = {
title: '添加部门',
visible: true
};
loadDeptData();
state.formData.id = undefined;
state.formData.parentId = row.id;
state.dialog = {
title: '添加部门',
visible: true
};
}
/**
* 修改部门
*/
async function handleUpdate(row: any) {
await loadDeptData();
const deptId = row.id || state.ids;
state.dialog = {
title: '修改部门',
visible: true
};
getDeptDetail(deptId).then((response: any) => {
state.formData = response.data;
});
await loadDeptData();
const deptId = row.id || state.ids;
state.dialog = {
title: '修改部门',
visible: true
};
getDeptDetail(deptId).then((response: any) => {
state.formData = response.data;
});
}
/**
* 部门表单提交
*/
function submitForm() {
dataFormRef.value.validate((valid: any) => {
if (valid) {
if (state.formData.id) {
updateDept(state.formData.id, state.formData).then(() => {
ElMessage.success('修改成功');
cancel();
handleQuery();
});
} else {
addDept(state.formData).then(() => {
ElMessage.success('新增成功');
cancel();
handleQuery();
});
}
}
});
dataFormRef.value.validate((valid: any) => {
if (valid) {
if (state.formData.id) {
updateDept(state.formData.id, state.formData).then(() => {
ElMessage.success('修改成功');
cancel();
handleQuery();
});
} else {
addDept(state.formData).then(() => {
ElMessage.success('新增成功');
cancel();
handleQuery();
});
}
}
});
}
/**
@@ -171,181 +171,181 @@ function submitForm() {
* @param row
*/
function handleDelete(row: any) {
const ids = [row.id || state.ids].join(',');
ElMessageBox.confirm(`确认删除已选中的数据项?`, '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteDept(ids)
.then(() => {
handleQuery();
ElMessage.success('删除成功');
})
.catch(() => {
console.log(`删除失败`);
});
})
.catch(() => ElMessage.info('已取消删除'));
const ids = [row.id || state.ids].join(',');
ElMessageBox.confirm(`确认删除已选中的数据项?`, '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteDept(ids)
.then(() => {
handleQuery();
ElMessage.success('删除成功');
})
.catch(() => {
console.log(`删除失败`);
});
})
.catch(() => ElMessage.info('已取消删除'));
}
/**
* 取消/关闭弹窗
**/
function cancel() {
dataFormRef.value.resetFields();
state.dialog.visible = false;
dataFormRef.value.resetFields();
state.dialog.visible = false;
}
onMounted(() => {
handleQuery();
handleQuery();
});
</script>
<template>
<div class="app-container">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item>
<el-button type="success" :icon="Plus" @click="handleAdd"
>新增</el-button
>
<el-button
type="danger"
:icon="Delete"
:disabled="single"
@click="handleDelete"
>删除
</el-button>
</el-form-item>
<div class="app-container">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item>
<el-button type="success" :icon="Plus" @click="handleAdd"
>新增</el-button
>
<el-button
type="danger"
:icon="Delete"
:disabled="single"
@click="handleDelete"
>删除
</el-button>
</el-form-item>
<el-form-item prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入部门名称"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入部门名称"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item prop="status">
<el-select
v-model="queryParams.status"
placeholder="部门状态"
clearable
>
<el-option :value="1" label="正常" />
<el-option :value="0" label="禁用" />
</el-select>
</el-form-item>
<el-form-item>
<el-button
class="filter-item"
type="primary"
:icon="Search"
@click="handleQuery"
>
搜索
</el-button>
<el-button :icon="Refresh" @click="resetQuery"> 重置 </el-button>
</el-form-item>
</el-form>
<el-form-item prop="status">
<el-select
v-model="queryParams.status"
placeholder="部门状态"
clearable
>
<el-option :value="1" label="正常" />
<el-option :value="0" label="禁用" />
</el-select>
</el-form-item>
<el-form-item>
<el-button
class="filter-item"
type="primary"
:icon="Search"
@click="handleQuery"
>
搜索
</el-button>
<el-button :icon="Refresh" @click="resetQuery"> 重置 </el-button>
</el-form-item>
</el-form>
<el-table
v-loading="loading"
:data="deptList"
row-key="id"
default-expand-all
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column prop="name" label="部门名称" />
<el-table-column prop="status" label="状态" width="100">
<template #default="scope">
<el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
<el-tag v-else type="info">禁用</el-tag>
</template>
</el-table-column>
<el-table
v-loading="loading"
:data="deptList"
row-key="id"
default-expand-all
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column prop="name" label="部门名称" />
<el-table-column prop="status" label="状态" width="100">
<template #default="scope">
<el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
<el-tag v-else type="info">禁用</el-tag>
</template>
</el-table-column>
<el-table-column prop="sort" label="显示排序" width="200" />
<el-table-column prop="sort" label="显示排序" width="200" />
<el-table-column label="操作" align="center" width="150">
<template #default="scope">
<el-button
type="primary"
:icon="Edit"
circle
plain
@click.stop="handleUpdate(scope.row)"
>
</el-button>
<el-button
type="success"
:icon="Plus"
circle
plain
@click.stop="handleAdd(scope.row)"
>
</el-button>
<el-table-column label="操作" align="center" width="150">
<template #default="scope">
<el-button
type="primary"
:icon="Edit"
circle
plain
@click.stop="handleUpdate(scope.row)"
>
</el-button>
<el-button
type="success"
:icon="Plus"
circle
plain
@click.stop="handleAdd(scope.row)"
>
</el-button>
<el-button
type="danger"
:icon="Delete"
circle
plain
@click.stop="handleDelete(scope.row)"
>
</el-button>
</template>
</el-table-column>
</el-table>
<el-button
type="danger"
:icon="Delete"
circle
plain
@click.stop="handleDelete(scope.row)"
>
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 添加或修改部门对话框 -->
<el-dialog
:title="dialog.title"
v-model="dialog.visible"
width="600px"
@closed="cancel"
>
<el-form
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="80px"
>
<el-form-item label="上级部门" prop="parentId">
<el-tree-select
v-model="formData.parentId"
placeholder="选择上级部门"
:data="deptOptions"
filterable
check-strictly
/>
</el-form-item>
<el-form-item label="部门名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入部门名称" />
</el-form-item>
<el-form-item label="显示排序" prop="sort">
<el-input-number
v-model="formData.sort"
controls-position="right"
style="width: 100px"
:min="0"
/>
</el-form-item>
<el-form-item label="部门状态">
<el-radio-group v-model="formData.status">
<el-radio :label="1">正常</el-radio>
<el-radio :label="0">禁用</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<!-- 添加或修改部门对话框 -->
<el-dialog
:title="dialog.title"
v-model="dialog.visible"
width="600px"
@closed="cancel"
>
<el-form
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="80px"
>
<el-form-item label="上级部门" prop="parentId">
<el-tree-select
v-model="formData.parentId"
placeholder="选择上级部门"
:data="deptOptions"
filterable
check-strictly
/>
</el-form-item>
<el-form-item label="部门名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入部门名称" />
</el-form-item>
<el-form-item label="显示排序" prop="sort">
<el-input-number
v-model="formData.sort"
controls-position="right"
style="width: 100px"
:min="0"
/>
</el-form-item>
<el-form-item label="部门状态">
<el-radio-group v-model="formData.status">
<el-radio :label="1">正常</el-radio>
<el-radio :label="0">禁用</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm"> 确 定 </el-button>
<el-button @click="cancel"> 取 消 </el-button>
</div>
</template>
</el-dialog>
</div>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm"> 确 定 </el-button>
<el-button @click="cancel"> 取 消 </el-button>
</div>
</template>
</el-dialog>
</div>
</template>

406
src/views/system/dict/components/Dict.vue
View File

@@ -1,142 +1,142 @@
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: 'dict'
name: 'dict'
};
</script>
<template>
<div class="app-container">
<!-- 搜索表单 -->
<el-form ref="queryFormRef" :model="state.queryParams" :inline="true">
<el-form-item>
<el-button type="success" :icon="Plus" @click="handleAdd"
>新增</el-button
>
<el-button
type="danger"
:icon="Delete"
:disabled="state.multiple"
@click="handleDelete"
>删除
</el-button>
</el-form-item>
<div class="app-container">
<!-- 搜索表单 -->
<el-form ref="queryFormRef" :model="state.queryParams" :inline="true">
<el-form-item>
<el-button type="success" :icon="Plus" @click="handleAdd"
>新增</el-button
>
<el-button
type="danger"
:icon="Delete"
:disabled="state.multiple"
@click="handleDelete"
>删除
</el-button>
</el-form-item>
<el-form-item prop="name">
<el-input
v-model="state.queryParams.name"
placeholder="字典名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery()"
>搜索</el-button
>
<el-button :icon="Refresh" @click="resetQuery()">重置</el-button>
</el-form-item>
</el-form>
<el-form-item prop="name">
<el-input
v-model="state.queryParams.name"
placeholder="字典名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery()"
>搜索</el-button
>
<el-button :icon="Refresh" @click="resetQuery()">重置</el-button>
</el-form-item>
</el-form>
<!-- 数据表格 -->
<el-table
highlight-current-row
:data="dictList"
v-loading="loading"
@row-click="handleRowClick"
@selection-change="handleSelectionChange"
border
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="字典名称" prop="name" width="120" />
<el-table-column label="字典编码" prop="code" />
<el-table-column label="状态" align="center" width="80">
<template #default="scope">
<el-tag v-if="scope.row.status === 1" type="success">启用</el-tag>
<el-tag v-else type="info">禁用</el-tag>
</template>
</el-table-column>
<!-- 数据表格 -->
<el-table
highlight-current-row
:data="dictList"
v-loading="loading"
@row-click="handleRowClick"
@selection-change="handleSelectionChange"
border
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="字典名称" prop="name" width="120" />
<el-table-column label="字典编码" prop="code" />
<el-table-column label="状态" align="center" width="80">
<template #default="scope">
<el-tag v-if="scope.row.status === 1" type="success">启用</el-tag>
<el-tag v-else type="info">禁用</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="150">
<template #default="scope">
<el-button
type="primary"
:icon="Edit"
circle
plain
@click.stop="handleUpdate(scope.row)"
/>
<el-button
type="danger"
:icon="Delete"
circle
plain
@click.stop="handleDelete(scope.row)"
/>
</template>
</el-table-column>
</el-table>
<el-table-column label="操作" align="center" width="150">
<template #default="scope">
<el-button
type="primary"
:icon="Edit"
circle
plain
@click.stop="handleUpdate(scope.row)"
/>
<el-button
type="danger"
:icon="Delete"
circle
plain
@click.stop="handleDelete(scope.row)"
/>
</template>
</el-table-column>
</el-table>
<pagination
v-if="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="handleQuery"
/>
<pagination
v-if="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="handleQuery"
/>
<!-- 弹窗表单 -->
<el-dialog
:title="dialog.title"
v-model="dialog.visible"
width="500px"
@close="cancel"
>
<el-form
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="80px"
>
<el-form-item label="字典名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入字典名称" />
</el-form-item>
<el-form-item label="字典编码" prop="code">
<el-input v-model="formData.code" placeholder="请输入字典编码" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio :label="1">正常</el-radio>
<el-radio :label="0">停用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input
v-model="formData.remark"
type="textarea"
placeholder="请输入内容"
:autosize="{ minRows: 2, maxRows: 4 }"
/>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
<!-- 弹窗表单 -->
<el-dialog
:title="dialog.title"
v-model="dialog.visible"
width="500px"
@close="cancel"
>
<el-form
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="80px"
>
<el-form-item label="字典名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入字典名称" />
</el-form-item>
<el-form-item label="字典编码" prop="code">
<el-input v-model="formData.code" placeholder="请输入字典编码" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio :label="1">正常</el-radio>
<el-radio :label="0">停用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input
v-model="formData.remark"
type="textarea"
placeholder="请输入内容"
:autosize="{ minRows: 2, maxRows: 4 }"
/>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';
import {
listDictPages,
getDictFormDetail,
addDict,
updateDict,
deleteDict
listDictPages,
getDictFormDetail,
addDict,
updateDict,
deleteDict
} from '@/api/system/dict';
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
@@ -148,118 +148,118 @@ const dataFormRef = ref(ElForm);
const emit = defineEmits(['dictClick']);
const state = reactive({
loading: true,
// 选中ID数组
ids: [] as number[],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
queryParams: {
pageNum: 1,
pageSize: 10
} as DictQueryParam,
dictList: [] as Dict[],
total: 0,
dialog: { visible: false } as Dialog,
formData: {
status: 1
} as DictFormData,
rules: {
name: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
code: [{ required: true, message: '请输入字典编码', trigger: 'blur' }]
}
loading: true,
// 选中ID数组
ids: [] as number[],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
queryParams: {
pageNum: 1,
pageSize: 10
} as DictQueryParam,
dictList: [] as Dict[],
total: 0,
dialog: { visible: false } as Dialog,
formData: {
status: 1
} as DictFormData,
rules: {
name: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
code: [{ required: true, message: '请输入字典编码', trigger: 'blur' }]
}
});
const { total, dialog, loading, dictList, formData, rules, queryParams } =
toRefs(state);
toRefs(state);
function handleQuery() {
emit('dictClick', null);
state.loading = true;
listDictPages(state.queryParams).then(({ data }) => {
state.dictList = data.list;
state.total = data.total;
state.loading = false;
});
emit('dictClick', null);
state.loading = true;
listDictPages(state.queryParams).then(({ data }) => {
state.dictList = data.list;
state.total = data.total;
state.loading = false;
});
}
function resetQuery() {
queryFormRef.value.resetFields();
handleQuery();
queryFormRef.value.resetFields();
handleQuery();
}
function handleSelectionChange(selection: any) {
state.ids = selection.map((item: any) => item.id);
state.single = selection.length !== 1;
state.multiple = !selection.length;
state.ids = selection.map((item: any) => item.id);
state.single = selection.length !== 1;
state.multiple = !selection.length;
}
function handleAdd() {
state.dialog = {
title: '添加字典',
visible: true
};
state.dialog = {
title: '添加字典',
visible: true
};
}
function handleUpdate(row: any) {
state.dialog = {
title: '修改字典',
visible: true
};
const id = row.id || state.ids;
getDictFormDetail(id).then(({ data }) => {
state.formData = data;
});
state.dialog = {
title: '修改字典',
visible: true
};
const id = row.id || state.ids;
getDictFormDetail(id).then(({ data }) => {
state.formData = data;
});
}
function submitForm() {
dataFormRef.value.validate((isValid: boolean) => {
if (isValid) {
if (state.formData.id) {
updateDict(state.formData.id, state.formData).then(() => {
ElMessage.success('修改成功');
cancel();
handleQuery();
});
} else {
addDict(state.formData).then(() => {
ElMessage.success('新增成功');
cancel();
handleQuery();
});
}
}
});
dataFormRef.value.validate((isValid: boolean) => {
if (isValid) {
if (state.formData.id) {
updateDict(state.formData.id, state.formData).then(() => {
ElMessage.success('修改成功');
cancel();
handleQuery();
});
} else {
addDict(state.formData).then(() => {
ElMessage.success('新增成功');
cancel();
handleQuery();
});
}
}
});
}
function cancel() {
state.formData.id = undefined;
dataFormRef.value.resetFields();
state.dialog.visible = false;
state.formData.id = undefined;
dataFormRef.value.resetFields();
state.dialog.visible = false;
}
function handleDelete(row: any) {
const ids = [row.id || state.ids].join(',');
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteDict(ids).then(() => {
ElMessage.success('删除成功');
handleQuery();
});
})
.catch(() => ElMessage.info('已取消删除'));
const ids = [row.id || state.ids].join(',');
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteDict(ids).then(() => {
ElMessage.success('删除成功');
handleQuery();
});
})
.catch(() => ElMessage.info('已取消删除'));
}
function handleRowClick(row: any) {
emit('dictClick', row);
emit('dictClick', row);
}
onMounted(() => {
handleQuery();
handleQuery();
});
</script>

486
src/views/system/dict/components/DictItem.vue
View File

@@ -1,300 +1,300 @@
<template>
<div class="app-container">
<!-- 搜索表单 -->
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item>
<el-button type="success" :icon="Plus" @click="handleAdd"
>新增</el-button
>
<el-button
type="danger"
:icon="Delete"
:disabled="multiple"
@click="handleDelete"
>删除</el-button
>
</el-form-item>
<el-form-item prop="name">
<el-input
v-model="queryParams.name"
placeholder="数据项名称"
clearable
/>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery"
>搜索</el-button
>
<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<div class="app-container">
<!-- 搜索表单 -->
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item>
<el-button type="success" :icon="Plus" @click="handleAdd"
>新增</el-button
>
<el-button
type="danger"
:icon="Delete"
:disabled="multiple"
@click="handleDelete"
>删除</el-button
>
</el-form-item>
<el-form-item prop="name">
<el-input
v-model="queryParams.name"
placeholder="数据项名称"
clearable
/>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery"
>搜索</el-button
>
<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- 数据表格 -->
<el-table
:data="dictItemList"
v-loading="loading"
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" min-width="5%" />
<el-table-column label="数据项名称" prop="name" />
<el-table-column label="数据项值" prop="value" />
<el-table-column label="状态" align="center">
<template #default="scope">
<el-tag v-if="scope.row.status === 1" type="success">启用</el-tag>
<el-tag v-else type="info">禁用</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
type="primary"
:icon="Edit"
circle
plain
@click.stop="handleUpdate(scope.row)"
/>
<el-button
type="danger"
:icon="Delete"
circle
plain
@click.stop="handleDelete(scope.row)"
/>
</template>
</el-table-column>
</el-table>
<!-- 数据表格 -->
<el-table
:data="dictItemList"
v-loading="loading"
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" min-width="5%" />
<el-table-column label="数据项名称" prop="name" />
<el-table-column label="数据项值" prop="value" />
<el-table-column label="状态" align="center">
<template #default="scope">
<el-tag v-if="scope.row.status === 1" type="success">启用</el-tag>
<el-tag v-else type="info">禁用</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
type="primary"
:icon="Edit"
circle
plain
@click.stop="handleUpdate(scope.row)"
/>
<el-button
type="danger"
:icon="Delete"
circle
plain
@click.stop="handleDelete(scope.row)"
/>
</template>
</el-table-column>
</el-table>
<pagination
v-if="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="handleQuery"
/>
<pagination
v-if="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="handleQuery"
/>
<!-- 表单弹窗 -->
<el-dialog
:title="dialog.title"
v-model="dialog.visible"
width="500px"
@close="cancel"
>
<el-form
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="100px"
>
<el-form-item label="字典名称"> </el-form-item>
<el-form-item label="字典项名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入字典项名称" />
</el-form-item>
<el-form-item label="字典项值" prop="value">
<el-input v-model="formData.value" placeholder="请输入字典项值" />
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number
v-model="formData.sort"
style="width: 80px"
controls-position="right"
:min="0"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio :label="1">正常</el-radio>
<el-radio :label="0">停用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" type="textarea"></el-input>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
<!-- 表单弹窗 -->
<el-dialog
:title="dialog.title"
v-model="dialog.visible"
width="500px"
@close="cancel"
>
<el-form
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="100px"
>
<el-form-item label="字典名称"> </el-form-item>
<el-form-item label="字典项名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入字典项名称" />
</el-form-item>
<el-form-item label="字典项值" prop="value">
<el-input v-model="formData.value" placeholder="请输入字典项值" />
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number
v-model="formData.sort"
style="width: 80px"
controls-position="right"
:min="0"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio :label="1">正常</el-radio>
<el-radio :label="0">停用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" type="textarea"></el-input>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, toRefs, watch } from 'vue';
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
import {
Dialog,
DictItem,
DictItemFormData,
DictItemQueryParam
Dialog,
DictItem,
DictItemFormData,
DictItemQueryParam
} from '@/types';
import {
listDictItemPages,
getDictItemDetail,
addDictItem,
updateDictItem,
deleteDictItem
listDictItemPages,
getDictItemDetail,
addDictItem,
updateDictItem,
deleteDictItem
} from '@/api/system/dict';
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
const props = defineProps({
dictCode: {
type: String,
default: () => {
return '';
}
},
dictName: {
type: String,
default: () => {
return '';
}
}
dictCode: {
type: String,
default: () => {
return '';
}
},
dictName: {
type: String,
default: () => {
return '';
}
}
});
watch(
() => props.dictCode,
value => {
state.queryParams.dictCode = value;
state.formData.dictCode = value;
handleQuery();
}
() => props.dictCode,
value => {
state.queryParams.dictCode = value;
state.formData.dictCode = value;
handleQuery();
}
);
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
const state = reactive({
loading: true,
// 选中ID数组
ids: [] as number[],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
total: 0,
queryParams: { pageNum: 1, pageSize: 10 } as DictItemQueryParam,
dictItemList: [] as DictItem[],
dialog: { visible: false } as Dialog,
formData: {
dictCode: props.dictCode,
dictName: props.dictName,
status: 1,
sort: 1
} as DictItemFormData,
rules: {
name: [{ required: true, message: '请输入字典项名称', trigger: 'blur' }],
value: [{ required: true, message: '请输入字典项值', trigger: 'blur' }]
},
localDictCode: props.dictCode,
localDictName: props.dictName
loading: true,
// 选中ID数组
ids: [] as number[],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
total: 0,
queryParams: { pageNum: 1, pageSize: 10 } as DictItemQueryParam,
dictItemList: [] as DictItem[],
dialog: { visible: false } as Dialog,
formData: {
dictCode: props.dictCode,
dictName: props.dictName,
status: 1,
sort: 1
} as DictItemFormData,
rules: {
name: [{ required: true, message: '请输入字典项名称', trigger: 'blur' }],
value: [{ required: true, message: '请输入字典项值', trigger: 'blur' }]
},
localDictCode: props.dictCode,
localDictName: props.dictName
});
const {
loading,
multiple,
queryParams,
dictItemList,
dialog,
formData,
rules,
total
loading,
multiple,
queryParams,
dictItemList,
dialog,
formData,
rules,
total
} = toRefs(state);
function handleQuery() {
if (state.queryParams.dictCode) {
state.loading = true;
listDictItemPages(state.queryParams).then(({ data }) => {
state.dictItemList = data.list;
state.total = data.total;
state.loading = false;
});
} else {
state.dictItemList = [];
state.total = 0;
state.queryParams.pageNum = 1;
state.loading = false;
}
if (state.queryParams.dictCode) {
state.loading = true;
listDictItemPages(state.queryParams).then(({ data }) => {
state.dictItemList = data.list;
state.total = data.total;
state.loading = false;
});
} else {
state.dictItemList = [];
state.total = 0;
state.queryParams.pageNum = 1;
state.loading = false;
}
}
function resetQuery() {
queryFormRef.value.resetFields();
handleQuery();
queryFormRef.value.resetFields();
handleQuery();
}
function handleSelectionChange(selection: any) {
state.ids = selection.map((item: any) => item.id);
state.single = selection.length !== 1;
state.multiple = !selection.length;
state.ids = selection.map((item: any) => item.id);
state.single = selection.length !== 1;
state.multiple = !selection.length;
}
function handleAdd() {
if (!state.formData.dictCode) {
ElMessage.warning('请选择字典后添加数据项');
return;
}
state.dialog = {
title: '添加字典项',
visible: true
};
if (!state.formData.dictCode) {
ElMessage.warning('请选择字典后添加数据项');
return;
}
state.dialog = {
title: '添加字典项',
visible: true
};
}
function handleUpdate(row: any) {
state.dialog = {
title: '修改字典项',
visible: true
};
const id = row.id || state.ids;
getDictItemDetail(id).then(({ data }) => {
state.formData = data;
});
state.dialog = {
title: '修改字典项',
visible: true
};
const id = row.id || state.ids;
getDictItemDetail(id).then(({ data }) => {
state.formData = data;
});
}
function submitForm() {
dataFormRef.value.validate((isValid: boolean) => {
if (isValid) {
if (state.formData.id) {
updateDictItem(state.formData.id, state.formData).then(() => {
ElMessage.success('修改成功');
cancel();
handleQuery();
});
} else {
addDictItem(state.formData).then(() => {
ElMessage.success('新增成功');
cancel();
handleQuery();
});
}
}
});
dataFormRef.value.validate((isValid: boolean) => {
if (isValid) {
if (state.formData.id) {
updateDictItem(state.formData.id, state.formData).then(() => {
ElMessage.success('修改成功');
cancel();
handleQuery();
});
} else {
addDictItem(state.formData).then(() => {
ElMessage.success('新增成功');
cancel();
handleQuery();
});
}
}
});
}
function cancel() {
state.dialog.visible = false;
state.formData.id = undefined;
dataFormRef.value.resetFields();
state.dialog.visible = false;
state.formData.id = undefined;
dataFormRef.value.resetFields();
}
function handleDelete(row: any) {
const ids = [row.id || state.ids].join(',');
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteDictItem(ids).then(() => {
ElMessage.success('删除成功');
handleQuery();
});
})
.catch(() => ElMessage.info('已取消删除'));
const ids = [row.id || state.ids].join(',');
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteDictItem(ids).then(() => {
ElMessage.success('删除成功');
handleQuery();
});
})
.catch(() => ElMessage.info('已取消删除'));
}
onMounted(() => {
handleQuery();
handleQuery();
});
</script>

74
src/views/system/dict/index.vue
View File

@@ -1,33 +1,33 @@
<template>
<div class="app-container">
<el-row :gutter="10">
<el-col :span="12" :xs="24">
<el-card class="box-card">
<template #header>
<svg-icon color="#333" icon-class="education" />
字典列表
</template>
<!-- 字典列表子组件 -->
<dict @dictClick="handleDictClick" />
</el-card>
</el-col>
<div class="app-container">
<el-row :gutter="10">
<el-col :span="12" :xs="24">
<el-card class="box-card">
<template #header>
<svg-icon color="#333" icon-class="education" />
字典列表
</template>
<!-- 字典列表子组件 -->
<dict @dictClick="handleDictClick" />
</el-card>
</el-col>
<el-col :span="12" :xs="24">
<el-card class="box-card">
<template #header>
<svg-icon color="#333" icon-class="dict" />
<span style="margin: 0 5px">字典数据项</span>
<el-tag type="success" v-if="dictCode" size="small">{{
dictName
}}</el-tag>
<el-tag type="warning" v-else size="small">未选择字典</el-tag>
</template>
<!-- 字典项组件 -->
<dict-item :dictName="dictName" :dictCode="dictCode" />
</el-card>
</el-col>
</el-row>
</div>
<el-col :span="12" :xs="24">
<el-card class="box-card">
<template #header>
<svg-icon color="#333" icon-class="dict" />
<span style="margin: 0 5px">字典数据项</span>
<el-tag type="success" v-if="dictCode" size="small">{{
dictName
}}</el-tag>
<el-tag type="warning" v-else size="small">未选择字典</el-tag>
</template>
<!-- 字典项组件 -->
<dict-item :dictName="dictName" :dictCode="dictCode" />
</el-card>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
@@ -38,19 +38,19 @@ import DictItem from './components/DictItem.vue';
import { reactive, toRefs } from 'vue';
const state = reactive({
dictCode: '',
dictName: '' // 字典名称，用于字典项组件回显
dictCode: '',
dictName: '' // 字典名称，用于字典项组件回显
});
const { dictCode, dictName } = toRefs(state);
const handleDictClick = (dictRow: any) => {
if (dictRow) {
state.dictName = dictRow.name;
state.dictCode = dictRow.code;
} else {
state.dictName = '';
state.dictCode = '';
}
if (dictRow) {
state.dictName = dictRow.name;
state.dictCode = dictRow.code;
} else {
state.dictName = '';
state.dictCode = '';
}
};
</script>

686
src/views/system/menu/components/Menu.vue
View File

@@ -1,217 +1,217 @@
<template>
<div class="component-container">
<!-- 搜索表单 -->
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item>
<el-button type="success" :icon="Plus" @click="handleAdd"
>新增</el-button
>
</el-form-item>
<div class="component-container">
<!-- 搜索表单 -->
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item>
<el-button type="success" :icon="Plus" @click="handleAdd"
>新增</el-button
>
</el-form-item>
<el-form-item prop="name">
<el-input
v-model="queryParams.name"
placeholder="菜单名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery"
>搜索</el-button
>
<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-form-item prop="name">
<el-input
v-model="queryParams.name"
placeholder="菜单名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery"
>搜索</el-button
>
<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- 数据表格 -->
<el-table
v-loading="loading"
:data="menuList"
highlight-current-row
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
@row-click="handleRowClick"
row-key="id"
border
>
<el-table-column label="菜单名称">
<template #default="scope">
<svg-icon
color="#333"
:icon-class="scope.row.icon ? scope.row.icon : 'build'"
/>
{{ scope.row.name }}
</template>
</el-table-column>
<!-- 数据表格 -->
<el-table
v-loading="loading"
:data="menuList"
highlight-current-row
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
@row-click="handleRowClick"
row-key="id"
border
>
<el-table-column label="菜单名称">
<template #default="scope">
<svg-icon
color="#333"
:icon-class="scope.row.icon ? scope.row.icon : 'build'"
/>
{{ scope.row.name }}
</template>
</el-table-column>
<el-table-column label="状态" align="center" width="100">
<template #default="scope">
<el-tag v-if="scope.row.visible === 1" type="success">显示</el-tag>
<el-tag v-else type="info">隐藏</el-tag>
</template>
</el-table-column>
<el-table-column label="状态" align="center" width="100">
<template #default="scope">
<el-tag v-if="scope.row.visible === 1" type="success">显示</el-tag>
<el-tag v-else type="info">隐藏</el-tag>
</template>
</el-table-column>
<el-table-column label="排序" align="center" width="100" prop="sort">
</el-table-column>
<el-table-column label="排序" align="center" width="100" prop="sort">
</el-table-column>
<el-table-column label="操作" align="center" width="200">
<template #default="scope">
<el-button
type="success"
:icon="Plus"
circle
plain
@click.stop="handleAdd(scope.row)"
/>
<el-button
type="primary"
:icon="Edit"
circle
plain
@click.stop="handleUpdate(scope.row)"
/>
<el-button
type="danger"
:icon="Delete"
circle
plain
@click.stop="handleDelete(scope.row)"
/>
</template>
</el-table-column>
</el-table>
<el-table-column label="操作" align="center" width="200">
<template #default="scope">
<el-button
type="success"
:icon="Plus"
circle
plain
@click.stop="handleAdd(scope.row)"
/>
<el-button
type="primary"
:icon="Edit"
circle
plain
@click.stop="handleUpdate(scope.row)"
/>
<el-button
type="danger"
:icon="Delete"
circle
plain
@click.stop="handleDelete(scope.row)"
/>
</template>
</el-table-column>
</el-table>
<!-- 弹窗表单 -->
<el-dialog
:title="dialog.title"
v-model="dialog.visible"
@close="cancel"
width="750px"
>
<el-form
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="100px"
>
<el-form-item label="父级菜单" prop="parentId">
<el-tree-select
v-model="formData.parentId"
placeholder="选择上级菜单"
:data="menuOptions"
filterable
check-strictly
/>
</el-form-item>
<!-- 弹窗表单 -->
<el-dialog
:title="dialog.title"
v-model="dialog.visible"
@close="cancel"
width="750px"
>
<el-form
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="100px"
>
<el-form-item label="父级菜单" prop="parentId">
<el-tree-select
v-model="formData.parentId"
placeholder="选择上级菜单"
:data="menuOptions"
filterable
check-strictly
/>
</el-form-item>
<el-form-item label="菜单名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入菜单名称" />
</el-form-item>
<el-form-item label="菜单名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入菜单名称" />
</el-form-item>
<el-form-item label="菜单类型">
<el-radio-group
v-model="formData.type"
@change="handleMenuTypeChange"
>
<el-radio label="MENU">菜单</el-radio>
<el-radio label="CATALOG">目录</el-radio>
<el-radio label="EXTLINK">外链</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="菜单类型">
<el-radio-group
v-model="formData.type"
@change="handleMenuTypeChange"
>
<el-radio label="MENU">菜单</el-radio>
<el-radio label="CATALOG">目录</el-radio>
<el-radio label="EXTLINK">外链</el-radio>
</el-radio-group>
</el-form-item>
<!-- 路由路径(浏览器地址栏显示) -->
<el-form-item
v-if="formData.type == 'EXTLINK'"
label="外链地址"
prop="path"
>
<el-input v-model="formData.path" placeholder="请输入外链完整路径" />
</el-form-item>
<!-- 路由路径(浏览器地址栏显示) -->
<el-form-item
v-if="formData.type == 'EXTLINK'"
label="外链地址"
prop="path"
>
<el-input v-model="formData.path" placeholder="请输入外链完整路径" />
</el-form-item>
<el-form-item v-else label="路由路径" prop="path">
<el-input
v-if="formData.type == 'CATALOG'"
v-model="formData.path"
placeholder="/system (注意:目录以/开头)"
/>
<el-input v-else v-model="formData.path" placeholder="user" />
</el-form-item>
<el-form-item v-else label="路由路径" prop="path">
<el-input
v-if="formData.type == 'CATALOG'"
v-model="formData.path"
placeholder="/system (注意:目录以/开头)"
/>
<el-input v-else v-model="formData.path" placeholder="user" />
</el-form-item>
<!-- 组件页面完整路径 -->
<el-form-item
v-if="formData.type == 'MENU'"
label="组件路径"
prop="component"
>
<el-input
v-model="formData.component"
placeholder="system/user/index"
style="width: 95%"
>
<template v-if="formData.parentId != '0'" #prepend
>src/views/</template
>
<template v-if="formData.parentId != '0'" #append>.vue</template>
</el-input>
</el-form-item>
<!-- 组件页面完整路径 -->
<el-form-item
v-if="formData.type == 'MENU'"
label="组件路径"
prop="component"
>
<el-input
v-model="formData.component"
placeholder="system/user/index"
style="width: 95%"
>
<template v-if="formData.parentId != '0'" #prepend
>src/views/</template
>
<template v-if="formData.parentId != '0'" #append>.vue</template>
</el-input>
</el-form-item>
<el-form-item label="图标" prop="icon">
<el-popover
ref="popoverRef"
placement="bottom-start"
:width="570"
trigger="click"
>
<template #reference>
<el-input
v-model="formData.icon"
placeholder="点击选择图标"
readonly
@click="iconSelectVisible = true"
>
<template #prefix>
<svg-icon :icon-class="formData.icon" style="margin: auto" />
</template>
</el-input>
</template>
<el-form-item label="图标" prop="icon">
<el-popover
ref="popoverRef"
placement="bottom-start"
:width="570"
trigger="click"
>
<template #reference>
<el-input
v-model="formData.icon"
placeholder="点击选择图标"
readonly
@click="iconSelectVisible = true"
>
<template #prefix>
<svg-icon :icon-class="formData.icon" style="margin: auto" />
</template>
</el-input>
</template>
<icon-select @selected="selected" />
</el-popover>
</el-form-item>
<icon-select @selected="selected" />
</el-popover>
</el-form-item>
<el-form-item label="跳转路由">
<el-input
v-model="formData.redirect"
placeholder="跳转路由路径"
maxlength="50"
/>
</el-form-item>
<el-form-item label="跳转路由">
<el-input
v-model="formData.redirect"
placeholder="跳转路由路径"
maxlength="50"
/>
</el-form-item>
<el-form-item label="状态">
<el-radio-group v-model="formData.visible">
<el-radio :label="1">显示</el-radio>
<el-radio :label="0">隐藏</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="状态">
<el-radio-group v-model="formData.visible">
<el-radio :label="1">显示</el-radio>
<el-radio :label="0">隐藏</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number
v-model="formData.sort"
style="width: 100px"
controls-position="right"
:min="0"
/>
</el-form-item>
</el-form>
<el-form-item label="排序" prop="sort">
<el-input-number
v-model="formData.sort"
style="width: 100px"
controls-position="right"
:min="0"
/>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
@@ -221,20 +221,20 @@ import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
import { ElForm, ElMessage, ElMessageBox, ElPopover } from 'element-plus';
import {
Dialog,
Option,
MenuFormData,
MenuItem,
MenuQueryParam
Dialog,
Option,
MenuFormData,
MenuItem,
MenuQueryParam
} from '@/types';
// API 依赖
import {
listTableMenus,
getMenuDetail,
listSelectMenus,
addMenu,
deleteMenus,
updateMenu
listTableMenus,
getMenuDetail,
listSelectMenus,
addMenu,
deleteMenus,
updateMenu
} from '@/api/system/menu';
import SvgIcon from '@/components/SvgIcon/index.vue';
@@ -246,205 +246,205 @@ const dataFormRef = ref(ElForm);
const popoverRef = ref(ElPopover);
const state = reactive({
loading: true,
// 选中ID数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
queryParams: {} as MenuQueryParam,
menuList: [] as MenuItem[],
dialog: { visible: false } as Dialog,
formData: {
parentId: '0',
name: '',
visible: 1,
sort: 1,
component: 'Layout',
type: 'MENU'
} as MenuFormData,
rules: {
parentId: [{ required: true, message: '请选择顶级菜单', trigger: 'blur' }],
name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
type: [{ required: true, message: '请选择菜单类型', trigger: 'blur' }],
path: [{ required: true, message: '请输入路由路径', trigger: 'blur' }],
component: [
{ required: true, message: '请输入组件完整路径', trigger: 'blur' }
]
},
menuOptions: [] as Option[],
currentRow: undefined,
// Icon选择器显示状态
iconSelectVisible: false,
cacheData: {
menuType: '',
menuPath: ''
}
loading: true,
// 选中ID数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
queryParams: {} as MenuQueryParam,
menuList: [] as MenuItem[],
dialog: { visible: false } as Dialog,
formData: {
parentId: '0',
name: '',
visible: 1,
sort: 1,
component: 'Layout',
type: 'MENU'
} as MenuFormData,
rules: {
parentId: [{ required: true, message: '请选择顶级菜单', trigger: 'blur' }],
name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
type: [{ required: true, message: '请选择菜单类型', trigger: 'blur' }],
path: [{ required: true, message: '请输入路由路径', trigger: 'blur' }],
component: [
{ required: true, message: '请输入组件完整路径', trigger: 'blur' }
]
},
menuOptions: [] as Option[],
currentRow: undefined,
// Icon选择器显示状态
iconSelectVisible: false,
cacheData: {
menuType: '',
menuPath: ''
}
});
const {
loading,
queryParams,
menuList,
dialog,
formData,
rules,
menuOptions,
iconSelectVisible,
cacheData
loading,
queryParams,
menuList,
dialog,
formData,
rules,
menuOptions,
iconSelectVisible,
cacheData
} = toRefs(state);
/**
* 查询
*/
function handleQuery() {
// 重置父组件
emit('menuClick', null);
state.loading = true;
listTableMenus(state.queryParams).then(({ data }) => {
state.menuList = data;
state.loading = false;
});
// 重置父组件
emit('menuClick', null);
state.loading = true;
listTableMenus(state.queryParams).then(({ data }) => {
state.menuList = data;
state.loading = false;
});
}
/**
* 加载菜单下拉树
*/
async function loadMenuData() {
const menuOptions: any[] = [];
await listSelectMenus().then(({ data }) => {
const menuOption = { value: '0', label: '顶级菜单', children: data };
menuOptions.push(menuOption);
state.menuOptions = menuOptions;
});
const menuOptions: any[] = [];
await listSelectMenus().then(({ data }) => {
const menuOption = { value: '0', label: '顶级菜单', children: data };
menuOptions.push(menuOption);
state.menuOptions = menuOptions;
});
}
/**
* 重置查询
*/
function resetQuery() {
queryFormRef.value.resetFields();
handleQuery();
queryFormRef.value.resetFields();
handleQuery();
}
function handleRowClick(row: any) {
state.currentRow = JSON.parse(JSON.stringify(row));
emit('menuClick', row);
state.currentRow = JSON.parse(JSON.stringify(row));
emit('menuClick', row);
}
async function handleAdd(row: any) {
state.formData.id = undefined;
await loadMenuData();
state.dialog = {
title: '添加菜单',
visible: true
};
if (row.id) {
// 行点击新增
state.formData.id = undefined;
await loadMenuData();
state.dialog = {
title: '添加菜单',
visible: true
};
if (row.id) {
// 行点击新增
state.formData.parentId = row.id;
if (row.id == '0') {
state.formData.type = 'CATALOG';
} else {
state.formData.type = 'MENU';
}
} else {
// 工具栏新增
if (state.currentRow) {
state.formData.parentId = (state.currentRow as any).id;
state.formData.type = 'MENU';
} else {
state.formData.parentId = '0';
state.formData.type = 'CATALOG';
}
}
state.formData.parentId = row.id;
if (row.id == '0') {
state.formData.type = 'CATALOG';
} else {
state.formData.type = 'MENU';
}
} else {
// 工具栏新增
if (state.currentRow) {
state.formData.parentId = (state.currentRow as any).id;
state.formData.type = 'MENU';
} else {
state.formData.parentId = '0';
state.formData.type = 'CATALOG';
}
}
}
/**
* 修改弹窗
*/
async function handleUpdate(row: any) {
await loadMenuData();
state.dialog = {
title: '修改菜单',
visible: true
};
const id = row.id || state.ids;
getMenuDetail(id).then(({ data }) => {
state.formData = data;
cacheData.value.menuType = data.type;
cacheData.value.menuPath = data.path;
});
await loadMenuData();
state.dialog = {
title: '修改菜单',
visible: true
};
const id = row.id || state.ids;
getMenuDetail(id).then(({ data }) => {
state.formData = data;
cacheData.value.menuType = data.type;
cacheData.value.menuPath = data.path;
});
}
/**
* 菜单类型change事件
*/
function handleMenuTypeChange(val: any) {
if (val !== cacheData.value.menuType) {
formData.value.path = '';
} else {
formData.value.path = cacheData.value.menuPath;
}
if (val !== cacheData.value.menuType) {
formData.value.path = '';
} else {
formData.value.path = cacheData.value.menuPath;
}
}
/**
* 菜单提交
*/
function submitForm() {
dataFormRef.value.validate((isValid: boolean) => {
if (isValid) {
if (state.formData.id) {
updateMenu(state.formData.id, state.formData).then(() => {
ElMessage.success('修改成功');
cancel();
handleQuery();
});
} else {
addMenu(state.formData).then(() => {
ElMessage.success('新增成功');
cancel();
handleQuery();
});
}
}
});
dataFormRef.value.validate((isValid: boolean) => {
if (isValid) {
if (state.formData.id) {
updateMenu(state.formData.id, state.formData).then(() => {
ElMessage.success('修改成功');
cancel();
handleQuery();
});
} else {
addMenu(state.formData).then(() => {
ElMessage.success('新增成功');
cancel();
handleQuery();
});
}
}
});
}
function handleDelete(row: any) {
const ids = [row.id || state.ids].join(',');
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteMenus(ids).then(() => {
ElMessage.success('删除成功');
handleQuery();
});
})
.catch(() => ElMessage.info('已取消删除'));
const ids = [row.id || state.ids].join(',');
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteMenus(ids).then(() => {
ElMessage.success('删除成功');
handleQuery();
});
})
.catch(() => ElMessage.info('已取消删除'));
}
/**
* 取消关闭弹窗
*/
function cancel() {
dataFormRef.value.resetFields();
state.dialog.visible = false;
dataFormRef.value.resetFields();
state.dialog.visible = false;
}
/**
* 选择图标后事件
*/
function selected(name: string) {
state.formData.icon = name;
state.iconSelectVisible = false;
state.formData.icon = name;
state.iconSelectVisible = false;
}
onMounted(() => {
handleQuery();
handleQuery();
});
</script>

626
src/views/system/menu/components/Perm.vue
View File

@@ -1,29 +1,29 @@
<script setup lang="ts">
import {
onMounted,
watch,
reactive,
ref,
getCurrentInstance,
toRefs
onMounted,
watch,
reactive,
ref,
getCurrentInstance,
toRefs
} from 'vue';
import {
listPermPages,
getPermFormDetail,
addPerm,
updatePerm,
deletePerms
listPermPages,
getPermFormDetail,
addPerm,
updatePerm,
deletePerms
} from '@/api/system/perm';
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
import {
Dialog,
PermFormData,
PermItem,
PermQueryParam,
Option
Dialog,
PermFormData,
PermItem,
PermQueryParam,
Option
} from '@/types';
const { proxy }: any = getCurrentInstance();
@@ -32,367 +32,367 @@ const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
const props = defineProps({
menuId: {
type: String,
default: () => {}
}
menuId: {
type: String,
default: () => {}
}
});
watch(
() => props.menuId,
value => {
state.queryParams.menuId = value;
handleQuery();
}
() => props.menuId,
value => {
state.queryParams.menuId = value;
handleQuery();
}
);
const state = reactive({
loading: true,
// 选中ID数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
queryParams: {
pageNum: 1,
pageSize: 10
} as PermQueryParam,
permList: [] as PermItem[],
total: 0,
dialog: {
visible: false
} as Dialog,
formData: {} as PermFormData,
rules: {
name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
perm: [{ required: true, message: '请输入权限标识', trigger: 'blur' }],
method: [{ required: true, message: '请选择请求方式', trigger: 'blur' }]
},
microServiceOptions: [] as Option[],
requestMethodOptions: [] as Option[],
urlPerm: {
requestMethod: '',
serviceName: '',
requestPath: ''
}
loading: true,
// 选中ID数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
queryParams: {
pageNum: 1,
pageSize: 10
} as PermQueryParam,
permList: [] as PermItem[],
total: 0,
dialog: {
visible: false
} as Dialog,
formData: {} as PermFormData,
rules: {
name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
perm: [{ required: true, message: '请输入权限标识', trigger: 'blur' }],
method: [{ required: true, message: '请选择请求方式', trigger: 'blur' }]
},
microServiceOptions: [] as Option[],
requestMethodOptions: [] as Option[],
urlPerm: {
requestMethod: '',
serviceName: '',
requestPath: ''
}
});
const {
loading,
multiple,
permList,
total,
dialog,
formData,
rules,
microServiceOptions,
requestMethodOptions,
urlPerm,
queryParams
loading,
multiple,
permList,
total,
dialog,
formData,
rules,
microServiceOptions,
requestMethodOptions,
urlPerm,
queryParams
} = toRefs(state);
function handleQuery() {
if (state.queryParams.menuId) {
state.loading = true;
listPermPages(state.queryParams).then(({ data }) => {
state.permList = data.list;
state.total = data.total;
state.loading = false;
});
} else {
state.loading = false;
state.permList = [];
state.total = 0;
state.queryParams.pageNum = 1;
}
if (state.queryParams.menuId) {
state.loading = true;
listPermPages(state.queryParams).then(({ data }) => {
state.permList = data.list;
state.total = data.total;
state.loading = false;
});
} else {
state.loading = false;
state.permList = [];
state.total = 0;
state.queryParams.pageNum = 1;
}
}
function resetQuery() {
queryFormRef.value.resetFields();
handleQuery();
queryFormRef.value.resetFields();
handleQuery();
}
function handleSelectionChange(selection: any) {
state.ids = selection.map((item: any) => item.id);
state.single = selection.length !== 1;
state.multiple = !selection.length;
state.ids = selection.map((item: any) => item.id);
state.single = selection.length !== 1;
state.multiple = !selection.length;
}
/**
* 加载字典数据
*/
function loadDictOptions() {
proxy.$listDictsByCode('micro_service').then((response: any) => {
state.microServiceOptions = response.data;
});
proxy.$listDictsByCode('micro_service').then((response: any) => {
state.microServiceOptions = response.data;
});
proxy.$listDictsByCode('request_method').then((response: any) => {
state.requestMethodOptions = response.data;
});
proxy.$listDictsByCode('request_method').then((response: any) => {
state.requestMethodOptions = response.data;
});
}
function handleAdd() {
loadDictOptions();
state.dialog = {
title: '添加权限',
visible: true
};
loadDictOptions();
state.dialog = {
title: '添加权限',
visible: true
};
}
function handleUpdate(row: any) {
loadDictOptions();
state.dialog = {
title: '修改权限',
visible: true
};
const id = row.id || state.ids;
getPermFormDetail(id).then(response => {
const { data } = response;
state.formData = data;
if (data && data.urlPerm) {
// GET:/youlai-admin/api/v1/users
const urlPermArr = data.urlPerm.split(':');
state.urlPerm.requestMethod = urlPermArr[0];
state.urlPerm.serviceName = urlPermArr[1].substring(
1,
urlPermArr[1].substring(1).indexOf('/') + 1
);
state.urlPerm.requestPath = urlPermArr[1].substring(
urlPermArr[1].substring(1).indexOf('/') + 1
);
}
});
loadDictOptions();
state.dialog = {
title: '修改权限',
visible: true
};
const id = row.id || state.ids;
getPermFormDetail(id).then(response => {
const { data } = response;
state.formData = data;
if (data && data.urlPerm) {
// GET:/youlai-admin/api/v1/users
const urlPermArr = data.urlPerm.split(':');
state.urlPerm.requestMethod = urlPermArr[0];
state.urlPerm.serviceName = urlPermArr[1].substring(
1,
urlPermArr[1].substring(1).indexOf('/') + 1
);
state.urlPerm.requestPath = urlPermArr[1].substring(
urlPermArr[1].substring(1).indexOf('/') + 1
);
}
});
}
function submitForm() {
dataFormRef.value.validate((isValid: any) => {
if (isValid) {
// 接口权限和按钮权限必填其一
if (!(state.urlPerm.requestPath || state.formData.btnPerm)) {
ElMessage.warning('请至少填写一种权限');
return false;
}
// 如果填写了URL权限，完整性校验
if (!state.urlPerm.requestPath) {
if (!state.urlPerm.requestMethod) {
ElMessage.warning('URL权限的请求方式不能为空');
return false;
}
if (!state.urlPerm.serviceName) {
ElMessage.warning('URL权限的所属服务不能为空');
return false;
}
state.formData.urlPerm =
state.urlPerm.requestMethod +
':/' +
state.urlPerm.serviceName +
state.urlPerm.requestPath;
}
dataFormRef.value.validate((isValid: any) => {
if (isValid) {
// 接口权限和按钮权限必填其一
if (!(state.urlPerm.requestPath || state.formData.btnPerm)) {
ElMessage.warning('请至少填写一种权限');
return false;
}
// 如果填写了URL权限，完整性校验
if (!state.urlPerm.requestPath) {
if (!state.urlPerm.requestMethod) {
ElMessage.warning('URL权限的请求方式不能为空');
return false;
}
if (!state.urlPerm.serviceName) {
ElMessage.warning('URL权限的所属服务不能为空');
return false;
}
state.formData.urlPerm =
state.urlPerm.requestMethod +
':/' +
state.urlPerm.serviceName +
state.urlPerm.requestPath;
}
state.formData.menuId = props.menuId;
if (state.formData.id) {
updatePerm(state.formData.id, state.formData).then(() => {
ElMessage.success('修改成功');
cancel();
handleQuery();
});
} else {
addPerm(state.formData).then(() => {
ElMessage.success('新增成功');
cancel();
handleQuery();
});
}
}
});
state.formData.menuId = props.menuId;
if (state.formData.id) {
updatePerm(state.formData.id, state.formData).then(() => {
ElMessage.success('修改成功');
cancel();
handleQuery();
});
} else {
addPerm(state.formData).then(() => {
ElMessage.success('新增成功');
cancel();
handleQuery();
});
}
}
});
}
/**
* 重置表单
*/
function resetForm() {
dataFormRef.value.resetFields();
dataFormRef.value.resetFields();
state.urlPerm = {
requestMethod: '',
serviceName: '',
requestPath: ''
};
state.urlPerm = {
requestMethod: '',
serviceName: '',
requestPath: ''
};
}
function cancel() {
resetForm();
state.dialog.visible = false;
resetForm();
state.dialog.visible = false;
}
function handleDelete(row: any) {
const ids = [row.id || state.ids].join(',');
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deletePerms(ids).then(() => {
ElMessage.success('删除成功');
handleQuery();
});
})
.catch(() => ElMessage.info('已取消删除'));
const ids = [row.id || state.ids].join(',');
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deletePerms(ids).then(() => {
ElMessage.success('删除成功');
handleQuery();
});
})
.catch(() => ElMessage.info('已取消删除'));
}
onMounted(() => {
handleQuery();
handleQuery();
});
</script>
<template>
<div claas="component-container">
<!-- 搜索表单 -->
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item>
<el-button
type="success"
:icon="Plus"
:disabled="!menuId"
@click="handleAdd"
>新增</el-button
>
<el-button
type="danger"
:icon="Delete"
:disabled="multiple"
@click="handleDelete"
>删除</el-button
>
</el-form-item>
<el-form-item prop="name">
<el-input
v-model="queryParams.name"
placeholder="权限名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery"
>搜索</el-button
>
<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<div claas="component-container">
<!-- 搜索表单 -->
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item>
<el-button
type="success"
:icon="Plus"
:disabled="!menuId"
@click="handleAdd"
>新增</el-button
>
<el-button
type="danger"
:icon="Delete"
:disabled="multiple"
@click="handleDelete"
>删除</el-button
>
</el-form-item>
<el-form-item prop="name">
<el-input
v-model="queryParams.name"
placeholder="权限名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery"
>搜索</el-button
>
<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- 数据表格 -->
<el-table
:data="permList"
v-loading="loading"
@selection-change="handleSelectionChange"
border
>
<el-table-column type="selection" width="40" align="center" />
<el-table-column label="权限名称" prop="name" width="150" />
<el-table-column label="URL权限" align="center">
<el-table-column prop="serviceName" label="所属服务" />
<el-table-column prop="requestMethod" label="请求方式" />
<el-table-column prop="requestPath" label="请求路径" />
</el-table-column>
<el-table-column label="按钮权限" prop="btnPerm" width="200" />
<el-table-column label="操作" align="center" width="150">
<template #default="scope">
<el-button
type="primary"
:icon="Edit"
circle
plain
@click="handleUpdate(scope.row)"
/>
<el-button
type="danger"
:icon="Delete"
circle
plain
@click="handleDelete(scope.row)"
/>
</template>
</el-table-column>
</el-table>
<!-- 数据表格 -->
<el-table
:data="permList"
v-loading="loading"
@selection-change="handleSelectionChange"
border
>
<el-table-column type="selection" width="40" align="center" />
<el-table-column label="权限名称" prop="name" width="150" />
<el-table-column label="URL权限" align="center">
<el-table-column prop="serviceName" label="所属服务" />
<el-table-column prop="requestMethod" label="请求方式" />
<el-table-column prop="requestPath" label="请求路径" />
</el-table-column>
<el-table-column label="按钮权限" prop="btnPerm" width="200" />
<el-table-column label="操作" align="center" width="150">
<template #default="scope">
<el-button
type="primary"
:icon="Edit"
circle
plain
@click="handleUpdate(scope.row)"
/>
<el-button
type="danger"
:icon="Delete"
circle
plain
@click="handleDelete(scope.row)"
/>
</template>
</el-table-column>
</el-table>
<!-- 分页工具条 -->
<pagination
v-if="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="handleQuery"
/>
<!-- 分页工具条 -->
<pagination
v-if="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="handleQuery"
/>
<!-- 表单弹窗 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="700px">
<el-form
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="120px"
>
<el-form-item label="权限名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入权限名称" />
</el-form-item>
<!-- 表单弹窗 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="700px">
<el-form
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="120px"
>
<el-form-item label="权限名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入权限名称" />
</el-form-item>
<el-form-item label="URL权限标识" prop="urlPerm">
<el-input placeholder="/api/v1/users" v-model="urlPerm.requestPath">
<template #prepend>
<el-select
v-model="urlPerm.serviceName"
style="width: 130px"
placeholder="所属服务"
clearable
>
<el-option
v-for="item in microServiceOptions"
:key="item.value"
:value="item.value"
:label="item.label"
/>
</el-select>
<el-form-item label="URL权限标识" prop="urlPerm">
<el-input placeholder="/api/v1/users" v-model="urlPerm.requestPath">
<template #prepend>
<el-select
v-model="urlPerm.serviceName"
style="width: 130px"
placeholder="所属服务"
clearable
>
<el-option
v-for="item in microServiceOptions"
:key="item.value"
:value="item.value"
:label="item.label"
/>
</el-select>
<el-select
v-model="urlPerm.requestMethod"
style="width: 120px; margin-left: 20px"
placeholder="请求方式"
clearable
>
<el-option
v-for="item in requestMethodOptions"
:key="item.value"
:value="item.value"
:label="item.label"
/>
</el-select>
</template>
</el-input>
<el-link v-show="urlPerm.requestMethod">
{{ urlPerm.requestMethod }}:/{{ urlPerm.serviceName
}}{{ urlPerm.requestPath }}
</el-link>
</el-form-item>
<el-select
v-model="urlPerm.requestMethod"
style="width: 120px; margin-left: 20px"
placeholder="请求方式"
clearable
>
<el-option
v-for="item in requestMethodOptions"
:key="item.value"
:value="item.value"
:label="item.label"
/>
</el-select>
</template>
</el-input>
<el-link v-show="urlPerm.requestMethod">
{{ urlPerm.requestMethod }}:/{{ urlPerm.serviceName
}}{{ urlPerm.requestPath }}
</el-link>
</el-form-item>
<el-form-item label="按钮权限标识" prop="btnPerm">
<el-input v-model="formData.btnPerm" placeholder="sys:user:add" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
<el-form-item label="按钮权限标识" prop="btnPerm">
<el-input v-model="formData.btnPerm" placeholder="sys:user:add" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<style lang="scss" scoped>
.component-container {
margin-bottom: 20px;
margin-bottom: 20px;
}
</style>

74
src/views/system/menu/index.vue
View File

@@ -1,32 +1,32 @@
<template>
<div class="app-container">
<el-row :gutter="10">
<el-col :span="10" :xs="24">
<el-card class="box-card" shadow="always">
<template #header>
<svg-icon color="#333" icon-class="menu" />
菜单列表
</template>
<menu-table @menuClick="handleMenuClick" />
</el-card>
</el-col>
<el-col :span="14" :xs="24">
<el-card class="box-card" shadow="always">
<template #header>
<svg-icon color="#333" icon-class="perm" />
<span style="margin: 0 5px">权限列表</span>
<el-tag type="success" v-if="menuId" size="small">{{
menuName
}}</el-tag>
<el-tag type="warning" v-else size="small"
>请点击左侧菜单列表选择</el-tag
>
</template>
<perm-table :menuId="menuId" :menuName="menuName" />
</el-card>
</el-col>
</el-row>
</div>
<div class="app-container">
<el-row :gutter="10">
<el-col :span="10" :xs="24">
<el-card class="box-card" shadow="always">
<template #header>
<svg-icon color="#333" icon-class="menu" />
菜单列表
</template>
<menu-table @menuClick="handleMenuClick" />
</el-card>
</el-col>
<el-col :span="14" :xs="24">
<el-card class="box-card" shadow="always">
<template #header>
<svg-icon color="#333" icon-class="perm" />
<span style="margin: 0 5px">权限列表</span>
<el-tag type="success" v-if="menuId" size="small">{{
menuName
}}</el-tag>
<el-tag type="warning" v-else size="small"
>请点击左侧菜单列表选择</el-tag
>
</template>
<perm-table :menuId="menuId" :menuName="menuName" />
</el-card>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
@@ -37,20 +37,20 @@ import PermTable from './components/Perm.vue';
import { reactive, toRefs } from 'vue';
const state = reactive({
menuId: undefined,
menuName: ''
menuId: undefined,
menuName: ''
});
const { menuId, menuName } = toRefs(state);
function handleMenuClick(menuRow: any) {
if (menuRow) {
state.menuId = menuRow.id;
state.menuName = menuRow.name;
} else {
state.menuId = undefined;
state.menuName = '';
}
if (menuRow) {
state.menuId = menuRow.id;
state.menuName = menuRow.name;
} else {
state.menuId = undefined;
state.menuName = '';
}
}
</script>

134
src/views/system/role/components/Menu.vue
View File

@@ -1,7 +1,7 @@
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: 'cmenu'
name: 'cmenu'
};
</script>
@@ -15,114 +15,114 @@ import { Option } from '@/types';
const emit = defineEmits(['menuClick']);
const props = defineProps({
role: {
type: Object,
default: () => {}
}
role: {
type: Object,
default: () => {}
}
});
const menuRef = ref(ElTree); // 属性名必须和元素的ref属性值一致
watch(
() => props.role.id,
newVal => {
if (newVal) {
state.checkStrictly = true;
// 获取角色拥有的的菜单ID
listRoleMenuIds(newVal).then(({ data }) => {
menuRef.value.setCheckedKeys(data);
state.checkStrictly = false;
});
}
}
() => props.role.id,
newVal => {
if (newVal) {
state.checkStrictly = true;
// 获取角色拥有的的菜单ID
listRoleMenuIds(newVal).then(({ data }) => {
menuRef.value.setCheckedKeys(data);
state.checkStrictly = false;
});
}
}
);
const state = reactive({
expandedKeys: [], // 展开的节点
menuOptions: [] as Option[],
checkStrictly: false,
isExpandAll: true,
refreshTree: true
expandedKeys: [], // 展开的节点
menuOptions: [] as Option[],
checkStrictly: false,
isExpandAll: true,
refreshTree: true
});
const { expandedKeys, menuOptions, checkStrictly, isExpandAll, refreshTree } =
toRefs(state);
toRefs(state);
/**
* 加载菜单树
*/
async function loadMenuData() {
await listSelectMenus().then(({ data }) => {
state.menuOptions = data;
});
await listSelectMenus().then(({ data }) => {
state.menuOptions = data;
});
}
function handleNodeClick(node: any) {
emit('menuClick', node);
emit('menuClick', node);
}
/**
* 展开/收缩
*/
function toggleExpandAll() {
state.refreshTree = false;
state.isExpandAll = !state.isExpandAll;
nextTick(() => {
state.refreshTree = true;
});
state.refreshTree = false;
state.isExpandAll = !state.isExpandAll;
nextTick(() => {
state.refreshTree = true;
});
}
/**
* 保存角色菜单
*/
function handleSubmit() {
const checkedMenuIds = menuRef.value
.getCheckedNodes(false, true)
.map((node: any) => node.value);
updateRoleMenu(props.role.id, checkedMenuIds).then(() => {
ElMessage.success('提交成功');
});
const checkedMenuIds = menuRef.value
.getCheckedNodes(false, true)
.map((node: any) => node.value);
updateRoleMenu(props.role.id, checkedMenuIds).then(() => {
ElMessage.success('提交成功');
});
}
onMounted(() => {
loadMenuData();
loadMenuData();
});
</script>
<template>
<div class="app-container">
<el-row>
<el-col :span="12">
<el-button plain :icon="Switch" @click="toggleExpandAll"
>展开/折叠</el-button
>
</el-col>
<el-col :span="12" style="text-align: right">
<el-button type="primary" :icon="Position" @click="handleSubmit"
>提交</el-button
>
</el-col>
</el-row>
<div class="app-container">
<el-row>
<el-col :span="12">
<el-button plain :icon="Switch" @click="toggleExpandAll"
>展开/折叠</el-button
>
</el-col>
<el-col :span="12" style="text-align: right">
<el-button type="primary" :icon="Position" @click="handleSubmit"
>提交</el-button
>
</el-col>
</el-row>
<el-tree
class="menu-tree"
ref="menuRef"
v-if="refreshTree"
:default-expanded-keys="expandedKeys"
:default-expand-all="isExpandAll"
:data="menuOptions"
show-checkbox
node-key="value"
empty-text="加载菜单中..."
:check-strictly="checkStrictly"
highlight-current
@node-click="handleNodeClick"
/>
</div>
<el-tree
class="menu-tree"
ref="menuRef"
v-if="refreshTree"
:default-expanded-keys="expandedKeys"
:default-expand-all="isExpandAll"
:data="menuOptions"
show-checkbox
node-key="value"
empty-text="加载菜单中..."
:check-strictly="checkStrictly"
highlight-current
@node-click="handleNodeClick"
/>
</div>
</template>
<style lang="scss" scoped>
.menu-tree {
margin-top: 10px;
margin-top: 10px;
}
</style>

230
src/views/system/role/components/Perm.vue
View File

@@ -1,53 +1,53 @@
<template>
<div class="perm-container">
<div v-if="permissionOptions.length > 0">
<el-row>
<el-col :span="12">
<el-checkbox
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChange"
>全选
</el-checkbox>
</el-col>
<el-col :span="12" style="text-align: right">
<el-button type="primary" :icon="Position" @click="handleSubmit"
>提交</el-button
>
</el-col>
</el-row>
<div class="perm-container">
<div v-if="permissionOptions.length > 0">
<el-row>
<el-col :span="12">
<el-checkbox
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChange"
>全选
</el-checkbox>
</el-col>
<el-col :span="12" style="text-align: right">
<el-button type="primary" :icon="Position" @click="handleSubmit"
>提交</el-button
>
</el-col>
</el-row>
<el-row>
<el-col
:span="8"
v-for="item in permissionOptions"
style="margin-top: 20px"
:key="item.id"
>
<el-checkbox
border
v-model="item.checked"
:label="item.id"
:key="item.id"
@change="handleCheckedPermChange"
>
{{ item.name }}
</el-checkbox>
</el-col>
</el-row>
</div>
<div style="text-align: center" v-else>
<el-empty
:description="
!role
? '请选择角色'
: !menu
? '请选择菜单'
: '暂无数据，您可在【菜单管理】配置权限数据'
"
></el-empty>
</div>
</div>
<el-row>
<el-col
:span="8"
v-for="item in permissionOptions"
style="margin-top: 20px"
:key="item.id"
>
<el-checkbox
border
v-model="item.checked"
:label="item.id"
:key="item.id"
@change="handleCheckedPermChange"
>
{{ item.name }}
</el-checkbox>
</el-col>
</el-row>
</div>
<div style="text-align: center" v-else>
<el-empty
:description="
!role
? '请选择角色'
: !menu
? '请选择菜单'
: '暂无数据，您可在【菜单管理】配置权限数据'
"
></el-empty>
</div>
</div>
</template>
<script setup lang="ts">
@@ -59,104 +59,104 @@ import { Position } from '@element-plus/icons-vue';
import { PermQueryParam } from '@/types';
const props = defineProps({
role: {
type: Object,
default: () => {
return {};
}
},
menu: {
type: Object,
default: () => {
return {};
}
}
role: {
type: Object,
default: () => {
return {};
}
},
menu: {
type: Object,
default: () => {
return {};
}
}
});
watch(
() => props.menu.id,
value => {
if (value) {
loadData();
}
}
() => props.menu.id,
value => {
if (value) {
loadData();
}
}
);
const state = reactive({
loading: false,
permissionOptions: [] as Array<any>,
isIndeterminate: true,
checkAll: false,
checkedPerms: []
loading: false,
permissionOptions: [] as Array<any>,
isIndeterminate: true,
checkAll: false,
checkedPerms: []
});
const { permissionOptions, isIndeterminate, checkAll } = toRefs(state);
function handleCheckAllChange(checked: boolean) {
state.isIndeterminate = false;
if (checked) {
state.permissionOptions.map(item => (item.checked = true));
} else {
// 全不选
state.permissionOptions.map(item => (item.checked = false));
}
state.isIndeterminate = false;
if (checked) {
state.permissionOptions.map(item => (item.checked = true));
} else {
// 全不选
state.permissionOptions.map(item => (item.checked = false));
}
}
function handleCheckedPermChange() {
const checkedCount = state.permissionOptions.filter(
item => item.checked
).length;
state.checkAll = checkedCount === state.permissionOptions.length;
state.isIndeterminate =
checkedCount > 0 && checkedCount < state.permissionOptions.length;
const checkedCount = state.permissionOptions.filter(
item => item.checked
).length;
state.checkAll = checkedCount === state.permissionOptions.length;
state.isIndeterminate =
checkedCount > 0 && checkedCount < state.permissionOptions.length;
}
function loadData() {
if (!props.menu.id) {
resetData();
return false;
}
state.loading = true;
if (!props.menu.id) {
resetData();
return false;
}
state.loading = true;
const params = { menuId: props.menu.id } as PermQueryParam;
listPerms(params).then(({ data }) => {
state.permissionOptions = data;
listRolePerms(props.role.id, props.menu.id).then(response => {
const checkedPermIds = response.data;
state.permissionOptions.map((item: any) => {
if (checkedPermIds.includes(item.id)) {
item.checked = true;
} else {
state.checkAll = false;
}
});
state.loading = false;
});
});
const params = { menuId: props.menu.id } as PermQueryParam;
listPerms(params).then(({ data }) => {
state.permissionOptions = data;
listRolePerms(props.role.id, props.menu.id).then(response => {
const checkedPermIds = response.data;
state.permissionOptions.map((item: any) => {
if (checkedPermIds.includes(item.id)) {
item.checked = true;
} else {
state.checkAll = false;
}
});
state.loading = false;
});
});
}
function handleSubmit() {
const checkedPermIds = state.permissionOptions
.filter(item => item.checked)
.map(item => item.id);
saveRolePerms(props.role.id, props.menu.id, checkedPermIds).then(() => {
ElMessage.success('提交成功');
});
const checkedPermIds = state.permissionOptions
.filter(item => item.checked)
.map(item => item.id);
saveRolePerms(props.role.id, props.menu.id, checkedPermIds).then(() => {
ElMessage.success('提交成功');
});
}
function resetData() {
state.permissionOptions = [];
state.isIndeterminate = true;
state.checkAll = false;
state.permissionOptions = [];
state.isIndeterminate = true;
state.checkAll = false;
}
onMounted(() => {
loadData();
loadData();
});
</script>
<style scoped>
.perm-container {
width: 100%;
width: 100%;
}
</style>

412
src/views/system/role/components/Role.vue
View File

@@ -1,18 +1,18 @@
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: 'role'
name: 'role'
};
</script>
<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';
import {
listRolePages,
updateRole,
getRoleFormDetail,
addRole,
deleteRoles
listRolePages,
updateRole,
getRoleFormDetail,
addRole,
deleteRoles
} from '@/api/system/role';
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
@@ -23,255 +23,255 @@ const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm); // 属性名必须和元素的ref属性值一致
const state = reactive({
loading: true,
// 选中ID数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
queryParams: {
pageNum: 1,
pageSize: 10
} as RoleQueryParam,
roleList: [] as RoleItem[],
total: 0,
dialog: {
title: '',
visible: false
},
formData: {} as RoleFormData,
rules: {
name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }]
}
loading: true,
// 选中ID数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
queryParams: {
pageNum: 1,
pageSize: 10
} as RoleQueryParam,
roleList: [] as RoleItem[],
total: 0,
dialog: {
title: '',
visible: false
},
formData: {} as RoleFormData,
rules: {
name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }]
}
});
const {
loading,
multiple,
queryParams,
roleList,
total,
dialog,
formData,
rules
loading,
multiple,
queryParams,
roleList,
total,
dialog,
formData,
rules
} = toRefs(state);
function handleQuery() {
emit('roleClick', {});
state.loading = true;
listRolePages(state.queryParams).then(({ data }) => {
state.roleList = data.list;
state.total = data.total;
state.loading = false;
});
emit('roleClick', {});
state.loading = true;
listRolePages(state.queryParams).then(({ data }) => {
state.roleList = data.list;
state.total = data.total;
state.loading = false;
});
}
function resetQuery() {
queryFormRef.value.resetFields();
handleQuery();
queryFormRef.value.resetFields();
handleQuery();
}
function handleSelectionChange(selection: any) {
state.ids = selection.map((item: any) => item.id);
state.single = selection.length !== 1;
state.multiple = !selection.length;
state.ids = selection.map((item: any) => item.id);
state.single = selection.length !== 1;
state.multiple = !selection.length;
}
function handleRowClick(row: any) {
emit('roleClick', row);
emit('roleClick', row);
}
function handleAdd() {
state.dialog = {
title: '添加角色',
visible: true
};
state.dialog = {
title: '添加角色',
visible: true
};
}
function handleUpdate(row: any) {
state.dialog = {
title: '修改角色',
visible: true
};
const roleId = row.id || state.ids;
getRoleFormDetail(roleId).then(({ data }) => {
state.formData = data;
});
state.dialog = {
title: '修改角色',
visible: true
};
const roleId = row.id || state.ids;
getRoleFormDetail(roleId).then(({ data }) => {
state.formData = data;
});
}
function submitForm() {
dataFormRef.value.validate((valid: any) => {
if (valid) {
if (state.formData.id) {
updateRole(state.formData.id as any, state.formData).then(() => {
ElMessage.success('修改成功');
cancel();
handleQuery();
});
} else {
addRole(state.formData).then(() => {
ElMessage.success('新增成功');
cancel();
handleQuery();
});
}
}
});
dataFormRef.value.validate((valid: any) => {
if (valid) {
if (state.formData.id) {
updateRole(state.formData.id as any, state.formData).then(() => {
ElMessage.success('修改成功');
cancel();
handleQuery();
});
} else {
addRole(state.formData).then(() => {
ElMessage.success('新增成功');
cancel();
handleQuery();
});
}
}
});
}
/**
* 重置表单
*/
function cancel() {
state.dialog.visible = false;
dataFormRef.value.resetFields();
state.dialog.visible = false;
dataFormRef.value.resetFields();
}
function handleDelete(row: any) {
const ids = [row.id || state.ids].join(',');
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteRoles(ids).then(() => {
ElMessage.success('删除成功');
handleQuery();
});
})
.catch(() => ElMessage.info('已取消删除'));
const ids = [row.id || state.ids].join(',');
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteRoles(ids).then(() => {
ElMessage.success('删除成功');
handleQuery();
});
})
.catch(() => ElMessage.info('已取消删除'));
}
onMounted(() => {
handleQuery();
handleQuery();
});
</script>
<template>
<div class="app-container">
<!-- 搜索表单 -->
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item>
<el-button type="success" :icon="Plus" @click="handleAdd"
>新增</el-button
>
<el-button
type="danger"
:icon="Delete"
:disabled="multiple"
@click="handleDelete"
>删除</el-button
>
</el-form-item>
<div class="app-container">
<!-- 搜索表单 -->
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item>
<el-button type="success" :icon="Plus" @click="handleAdd"
>新增</el-button
>
<el-button
type="danger"
:icon="Delete"
:disabled="multiple"
@click="handleDelete"
>删除</el-button
>
</el-form-item>
<el-form-item prop="name">
<el-input
v-model="queryParams.name"
placeholder="角色名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item prop="name">
<el-input
v-model="queryParams.name"
placeholder="角色名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery"
>搜索</el-button
>
<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery"
>搜索</el-button
>
<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- 数据表格 -->
<el-table
ref="dataTableRef"
v-loading="loading"
:data="roleList"
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
highlight-current-row
border
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="角色名称" prop="name" />
<el-table-column label="角色编码" prop="code" />
<el-table-column label="操作" align="center" width="120">
<template #default="scope">
<el-button
type="primary"
:icon="Edit"
circle
plain
@click.stop="handleUpdate(scope.row)"
/>
<el-button
type="danger"
:icon="Delete"
circle
plain
@click.stop="handleDelete(scope.row)"
/>
</template>
</el-table-column>
</el-table>
<!-- 数据表格 -->
<el-table
ref="dataTableRef"
v-loading="loading"
:data="roleList"
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
highlight-current-row
border
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="角色名称" prop="name" />
<el-table-column label="角色编码" prop="code" />
<el-table-column label="操作" align="center" width="120">
<template #default="scope">
<el-button
type="primary"
:icon="Edit"
circle
plain
@click.stop="handleUpdate(scope.row)"
/>
<el-button
type="danger"
:icon="Delete"
circle
plain
@click.stop="handleDelete(scope.row)"
/>
</template>
</el-table-column>
</el-table>
<!-- 分页工具条 -->
<pagination
v-if="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="handleQuery"
/>
<!-- 分页工具条 -->
<pagination
v-if="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="handleQuery"
/>
<!-- 表单弹窗 -->
<el-dialog
:title="dialog.title"
v-model="dialog.visible"
@close="cancel"
width="450px"
>
<el-form
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="100px"
>
<el-form-item label="角色名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入角色名称" />
</el-form-item>
<!-- 表单弹窗 -->
<el-dialog
:title="dialog.title"
v-model="dialog.visible"
@close="cancel"
width="450px"
>
<el-form
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="100px"
>
<el-form-item label="角色名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入角色名称" />
</el-form-item>
<el-form-item label="角色编码" prop="code">
<el-input v-model="formData.code" placeholder="请输入角色编码" />
</el-form-item>
<el-form-item label="角色编码" prop="code">
<el-input v-model="formData.code" placeholder="请输入角色编码" />
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number
v-model="formData.sort"
controls-position="right"
:min="0"
style="width: 100px"
/>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number
v-model="formData.sort"
controls-position="right"
:min="0"
style="width: 100px"
/>
</el-form-item>
<el-form-item label="状态">
<el-radio-group v-model="formData.status">
<el-radio :label="1">正常</el-radio>
<el-radio :label="0">停用</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<el-form-item label="状态">
<el-radio-group v-model="formData.status">
<el-radio :label="1">正常</el-radio>
<el-radio :label="0">停用</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<style lang="scss" scoped></style>

174
src/views/system/role/index.vue
View File

@@ -1,61 +1,61 @@
<template>
<div class="app-container">
<el-row :gutter="10">
<el-col :span="10" :xs="24">
<el-card class="box-card" shadow="always">
<template #header>
<svg-icon color="#333" icon-class="role" />
角色列表
</template>
<Role ref="role" @roleClick="handleRoleClick" />
</el-card>
</el-col>
<div class="app-container">
<el-row :gutter="10">
<el-col :span="10" :xs="24">
<el-card class="box-card" shadow="always">
<template #header>
<svg-icon color="#333" icon-class="role" />
角色列表
</template>
<Role ref="role" @roleClick="handleRoleClick" />
</el-card>
</el-col>
<el-col :span="6" :xs="24">
<el-card class="box-card" shadow="always">
<template #header>
<svg-icon color="#333" icon-class="menu" />
<span style="margin: 0 5px">菜单分配</span>
<el-tag type="success" v-if="role.id">
<svg-icon color="green" icon-class="role" />
{{ role.name }}
</el-tag>
<el-tag type="warning" v-else size="small">请选择角色</el-tag>
</template>
<Menus ref="menu" @menuClick="handleMenuClick" :role="role" />
</el-card>
</el-col>
<el-col :span="6" :xs="24">
<el-card class="box-card" shadow="always">
<template #header>
<svg-icon color="#333" icon-class="menu" />
<span style="margin: 0 5px">菜单分配</span>
<el-tag type="success" v-if="role.id">
<svg-icon color="green" icon-class="role" />
{{ role.name }}
</el-tag>
<el-tag type="warning" v-else size="small">请选择角色</el-tag>
</template>
<Menus ref="menu" @menuClick="handleMenuClick" :role="role" />
</el-card>
</el-col>
<el-col :span="8" :xs="24">
<el-card class="box-card" shadow="always">
<template #header>
<svg-icon icon-class="perm" />
<span style="margin: 0 5px">权限分配</span>
<el-col :span="8" :xs="24">
<el-card class="box-card" shadow="always">
<template #header>
<svg-icon icon-class="perm" />
<span style="margin: 0 5px">权限分配</span>
<el-tag type="success" style="margin: 0 5px 0 0" v-if="role.id">
<svg-icon color="green" icon-class="role" />
{{ role.name }}
</el-tag>
<el-tag
type="warning"
style="margin: 0 5px 0 0"
v-else
size="small"
>
请选择角色</el-tag
>
<el-tag type="success" style="margin: 0 5px 0 0" v-if="role.id">
<svg-icon color="green" icon-class="role" />
{{ role.name }}
</el-tag>
<el-tag
type="warning"
style="margin: 0 5px 0 0"
v-else
size="small"
>
请选择角色</el-tag
>
<el-tag type="success" v-if="menu.id" size="small">
<svg-icon icon-class="menu" />
{{ menu.name }}
</el-tag>
<el-tag type="warning" v-else size="small"> 请选择菜单</el-tag>
</template>
<perm ref="perm" :menu="menu" :role="role" />
</el-card>
</el-col>
</el-row>
</div>
<el-tag type="success" v-if="menu.id" size="small">
<svg-icon icon-class="menu" />
{{ menu.name }}
</el-tag>
<el-tag type="warning" v-else size="small"> 请选择菜单</el-tag>
</template>
<perm ref="perm" :menu="menu" :role="role" />
</el-card>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
@@ -68,48 +68,48 @@ import Menus from './components/Menu.vue';
import Perm from './components/Perm.vue';
const state = reactive({
role: {
id: undefined,
name: ''
},
menu: {
id: undefined,
name: ''
}
role: {
id: undefined,
name: ''
},
menu: {
id: undefined,
name: ''
}
});
const { role, menu } = toRefs(state);
function handleRoleClick(roleRow: any) {
if (roleRow) {
state.role = {
id: roleRow.id,
name: roleRow.name
};
} else {
state.role = {
id: undefined,
name: ''
};
}
if (roleRow) {
state.role = {
id: roleRow.id,
name: roleRow.name
};
} else {
state.role = {
id: undefined,
name: ''
};
}
}
function handleMenuClick(menuRow: any) {
if (!state.role.id) {
ElMessage.warning('请选择角色');
return false;
}
if (menuRow) {
state.menu = {
id: menuRow.value,
name: menuRow.label
};
} else {
state.menu = {
id: undefined,
name: ''
};
}
if (!state.role.id) {
ElMessage.warning('请选择角色');
return false;
}
if (menuRow) {
state.menu = {
id: menuRow.value,
name: menuRow.label
};
} else {
state.menu = {
id: undefined,
name: ''
};
}
}
</script>

1268
src/views/system/user/index.vue
View File

File diff suppressed because it is too large Load Diff