na/erp-frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完成用户管理功能。

Browse Source
This commit is contained in:
c
2026-03-13 11:36:40 +08:00
parent e7ac6b5f62
commit 8628776104
13 changed files with 1066 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/common/config/constant.ts
View File

@@ -15,5 +15,8 @@ export const GATEWAY_TIMEOUT_URL = "/500";
export const TEST_URL = "/test";
export const TEST_NAME = "test";
export const PERMISSION_URL = "/systemset/permission";
export const PERMISSION_NAME = "permission";
// 移动端最大宽度
export const mobileMaxWidthMedia = "(max-width: 960px)";

79
src/common/languages/locales/zh-CN.ts
View File

@@ -23,6 +23,7 @@ export default {
SYS: "系统管理",
SYSUSER: "用户管理",
PERMISSION: "权限管理",
warehouse: "仓库管理",
warehouse_item: "物料总表",
@@ -51,18 +52,33 @@ export default {
repair_record: "维修记录",
systemset: "系统管理",
syschannel: "栏目管理",
syschannel: "权限管理",
key_account: "客户管理",
vendor: "供应商管理",
store: "仓库管理",
sysrecord: "日志列表",
sysrole: "角色管理",
sysuser: "用户管理",
},
_enum: {
outStockType: {
material: "物料",
finishedProduct: "成品",
},
permissionType: {
menu: "菜单",
tableTopButton: "表格顶部按钮",
tableOperateButton: "表格操作按钮",
statusButton: "状态栏按钮",
},
userType: {
normal: "普通用户",
admin: "系统管理员",
},
},
_common: {
yes: "是",
no: "否",
},
_prop: {
common: {
@@ -402,10 +418,36 @@ export default {
roleName: "角色名称",
roleType: "角色类型",
},
sysuser: {
loginName: "登录账号",
userName: "姓名",
password: "密码",
confirmPassword: "确认密码",
userType: "用户类型",
role: "角色",
roleNames: "角色",
},
permission: {
permissionName: "权限名称",
permissionI18n: "国际化键",
permissionType: "权限类型",
permissionCode: "权限编码",
pageLink: "页面路由",
viewLink: "组件路径",
eventName: "事件名称",
className: "样式类名",
iconName: "图标名称",
sort: "排序",
hidden: "是否隐藏",
parentId: "父级权限",
rootNode: "根节点",
selectParent: "选择父级",
},
},
},
_button: {
add: "新增",
addChild: "新增子级",
edit: "编辑",
remove: "删除",
batchRemove: "批量删除",
@@ -832,6 +874,32 @@ export default {
select_roleType: "请选择角色类型",
delete_message: "删除角色",
},
sysuser: {
input_loginName: "请输入登录账号",
input_userName: "请输入姓名",
input_password: "请输入密码",
input_password_edit: "不修改请留空",
input_confirmPassword: "请确认密码",
password_min_length: "密码长度不能少于6位",
password_not_match: "两次输入的密码不一致",
select_userType: "请选择用户类型",
select_role: "请选择角色",
delete_message: "删除用户",
},
permission: {
input_permissionName: "请输入权限名称",
input_permissionI18n: "请输入国际化键",
select_permissionType: "请选择权限类型",
input_permissionCode: "请输入权限编码",
input_pageLink: "请输入页面路由",
input_viewLink: "请输入组件路径",
input_eventName: "请输入事件名称",
input_className: "请输入样式类名",
input_iconName: "请输入图标名称",
input_sort: "请输入排序值",
input_parentId: "请输入父级权限ID，0表示根节点",
delete_message: "删除权限",
},
},
},
_title: {
@@ -961,6 +1029,15 @@ export default {
add: "添加角色",
edit: "编辑角色",
},
sysuser: {
add: "添加用户",
edit: "编辑用户",
},
permission: {
add: "添加权限",
addChild: "添加子权限",
edit: "编辑权限",
},
},
},
_tabNav: {

94
src/components/base/base-multi-select/BaseMultiSelect.vue Normal file
View File

@@ -0,0 +1,94 @@
<script lang="ts" setup>
import { get } from "@/common/http/request";
interface OptionData {
value: string | number;
label: string;
}
const props = defineProps({
name: {
type: String,
default: "value",
},
label: {
type: String,
default: "label",
},
url: {
type: String,
default: undefined,
},
data: {
type: Array as PropType<Array<Record<string, string | number>>>,
default: undefined,
},
placeholder: {
type: String,
default: "请选择",
},
disabled: {
type: Boolean,
default: false,
},
clearable: {
type: Boolean,
default: true,
},
collapseTags: {
type: Boolean,
default: true,
},
collapseTagsTooltip: {
type: Boolean,
default: true,
},
});
const optionData = ref<OptionData[]>([]);
const model = defineModel<(string | number)[]>({ required: true });
function pushOptionData(data: any[]) {
optionData.value = [];
for (const item of data) {
optionData.value.push({
value: props.name !== undefined ? item[props.name] : item["value"],
label: props.label !== undefined ? item[props.label] : item["label"],
});
}
}
const getData = async () => {
if (props.url !== undefined) {
const res = await get(props.url);
pushOptionData(res.data || []);
} else if (props.data !== undefined) {
pushOptionData(props.data);
}
};
onMounted(getData);
const getSelectedLabels = () => {
return optionData.value.filter(item => model.value?.includes(item.value)).map(item => item.label);
};
defineExpose({
getSelectedLabels,
refresh: getData,
});
</script>
<template>
<el-select
v-model="model"
multiple
:placeholder="placeholder"
:disabled="disabled"
:clearable="clearable"
:collapse-tags="collapseTags"
:collapse-tags-tooltip="collapseTagsTooltip"
style="width: 100%"
>
<el-option v-for="o in optionData" :key="o.value" :value="o.value" :label="o.label" />
</el-select>
</template>

11
src/router/routes/dynamic.ts
View File

@@ -39,7 +39,7 @@
*/
import { Compass } from "@element-plus/icons-vue";
import { HOME_URL, HOME_NAME, TEST_URL, TEST_NAME } from "@/common/config";
import { HOME_URL, HOME_NAME } from "@/common/config";
/**
* 扫描路由文件，获取默认暴露得路由信息
@@ -77,13 +77,4 @@ export const dynamicRoutes: RouterConfigRaw[] = [
tagProps: { type: "success" },
},
},
{
path: TEST_URL,
name: TEST_NAME,
component: "/systemset/vendor/form",
meta: {
title: "总表",
icon: "ep:Compass",
},
},
];

42
src/router/routes/dynamic/sys.ts
View File

@@ -1,22 +1,22 @@
import { Compass, Odometer } from "@element-plus/icons-vue";
import { $t } from "@/common/languages";
// import { Compass, Odometer } from "@element-plus/icons-vue";
// import { $t } from "@/common/languages";
export const sysRoutes: RouterConfigRaw = {
path: "/sys",
name: "sys",
meta: {
title: $t("{{ _route.SYS }}"),
icon: Odometer,
},
children: [
{
path: "/sys/sysuser",
name: "sysuser",
component: "/sys/sysuser/index",
meta: {
title: $t("{{ _route.SYSUSER }}"),
icon: Compass,
},
},
],
};
// export const sysRoutes: RouterConfigRaw = {
// path: "/sys",
// name: "sys",
// meta: {
// title: $t("{{ _route.SYS }}"),
// icon: Odometer,
// },
// children: [
// {
// path: "/sys/sysuser",
// name: "sysuser",
// component: "/sys/sysuser/index",
// meta: {
// title: $t("{{ _route.SYSUSER }}"),
// icon: Compass,
// },
// },
// ],
// };

40
src/views/sys/sysuser/FormView.vue
View File

@@ -1,40 +0,0 @@
<script lang="ts" setup>
import BaseSelect from "@/components/base/base-select/BaseSelect.vue";
const form = defineModel<Record<string, any>>();
const roleUrl = "/sys/role/getSysRoleSelectList";
</script>
<template>
<!-- <el-dialog> -->
<el-form label-position="left" label-width="auto" :model="form">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="登录名称"><el-input class="two-col-input" /></el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="用户名"><el-input class="two-col-input" /></el-form-item>
</el-col>
</el-row>
<el-row :gutter="20" class="password-box">
<el-col :span="12">
<el-form-item label="密码"><el-input class="two-col-input" type="password" /></el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="确认密码"><el-input class="two-col-input" type="password" /></el-form-item>
</el-col>
</el-row>
<el-row :gutter="20" class="password-box">
<el-col :span="12">
<el-form-item label="密码"><el-input class="two-col-input" type="password" /></el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="角色"><BaseSelect :url="roleUrl" name="roleId" label="roleName" /></el-form-item>
</el-col>
</el-row>
</el-form>
<!-- </el-dialog> -->
</template>
<style>
.two-col-input {
width: 500px;
}
</style>

121
src/views/sys/sysuser/SysUserView.vue Normal file
View File

@@ -0,0 +1,121 @@
<script lang="ts" setup>
import { get, post } from "@/common/http/request";
import DefaultToolButton from "@/components/base/default-tool-button/DefaultToolButton.vue";
import StatusSwitch from "@/components/base/base-switch/StatusSwitch.vue";
import UserFormDialog from "./UserFormDialog.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import DefaultStatusSwitchColumn from "@/components/base/default-column/DefaultStatusSwitchColumn.vue";
import DefaultOperateButtonColumn from "@/components/base/default-column/DefaultOperateButtonColumn.vue";
const url = "/api/sys/sysuser/getSysUserPage";
const menu = "sysuser";
const tableRef = ref();
const formDialogVisible = ref(false);
const isEdit = ref(false);
const currentRow = ref<Record<string, any>>({});
const searchers = [
{ name: "loginName", type: "text" as const, placeholder: "请输入账号" },
{ name: "userName", type: "text" as const, placeholder: "请输入姓名" },
];
const userTypeMap: Record<number, string> = {
0: "普通用户",
5: "系统管理员",
};
const getUserTypeLabel = (type: number) => userTypeMap[type] || "未知";
const addClick = () => {
isEdit.value = false;
currentRow.value = {
loginName: "",
userName: "",
passWord: "",
confirmPassword: "",
userType: 0,
roleIds: [],
status: 1,
};
formDialogVisible.value = true;
};
const editClick = (row: Record<string, any>) => {
isEdit.value = true;
currentRow.value = {
...row,
passWord: "",
confirmPassword: "",
roleIds: row.roleIds || [],
};
formDialogVisible.value = true;
};
const deleteClick = async (row: Record<string, any>) => {
try {
await ElMessageBox.confirm("确定要删除该用户吗？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
});
await post("/api/sys/sysuser/deleteSysUser", { id: row.id });
ElMessage.success("删除成功");
tableRef.value?.refresh();
} catch (error) {
// 用户取消删除
}
};
const handleStatusChange = async (row: Record<string, any>) => {
try {
await post("/api/sys/sysuser/setStatus", {
id: row.id,
status: row.status,
});
ElMessage.success("状态修改成功");
} catch (error) {
// 恢复原状态
row.status = row.status === 1 ? 0 : 1;
}
};
const handleSuccess = () => {
tableRef.value?.refresh();
};
const getDialogTitle = computed(() => (isEdit.value ? "编辑用户" : "新建用户"));
</script>
<template>
<BasePageableTable ref="tableRef" :url="url" :searchers="searchers">
<template #tool-button>
<DefaultToolButton :add-click="addClick" :menu="menu" />
</template>
<template #columns>
<el-table-column type="selection" width="40" />
<el-table-column label="账号" prop="loginName" min-width="120" />
<el-table-column label="姓名" prop="userName" min-width="120" />
<el-table-column label="角色" min-width="200" show-overflow-tooltip>
<template #default="{ row }">
{{ row.roleNames || "-" }}
</template>
</el-table-column>
<el-table-column label="用户类型" prop="userType" min-width="100">
<template #default="{ row }">
{{ getUserTypeLabel(row.userType) }}
</template>
</el-table-column>
<el-table-column label="创建时间" prop="createDate" min-width="160" />
<DefaultStatusSwitchColumn />
<DefaultOperateButtonColumn />
</template>
</BasePageableTable>
<UserFormDialog
v-model:visible="formDialogVisible"
v-model:is-edit="isEdit"
v-model:form-data="currentRow"
:title="getDialogTitle"
@success="handleSuccess"
/>
</template>

172
src/views/sys/sysuser/UserFormDialog.vue Normal file
View File

@@ -0,0 +1,172 @@
<script lang="ts" setup>
import { post, put, get } from "@/common/http/request";
import BaseMultiSelect from "@/components/base/base-multi-select/BaseMultiSelect.vue";
const props = defineProps({
title: {
type: String,
default: "",
},
});
const visible = defineModel<boolean>("visible", { required: true });
const isEdit = defineModel<boolean>("isEdit", { required: true });
const formData = defineModel<Record<string, any>>("formData", { required: true });
const emit = defineEmits(["success"]);
const roleUrl = "/api/sys/sysrole/getSysRoleSelectList";
const userTypeOptions = [
{ value: 0, label: "普通用户" },
{ value: 5, label: "系统管理员" },
];
const formRef = ref();
const loading = ref(false);
const passwordModified = ref(false);
const rules = {
loginName: [{ required: true, message: "请输入登录账号", trigger: "blur" }],
userName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
passWord: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ min: 6, message: "密码长度不能少于6位", trigger: "blur" },
],
confirmPassword: [
{ required: true, message: "请确认密码", trigger: "blur" },
{
validator: (rule: any, value: string, callback: Function) => {
if (value !== formData.value.passWord) {
callback(new Error("两次输入的密码不一致"));
} else {
callback();
}
},
trigger: "blur",
},
],
userType: [{ required: true, message: "请选择用户类型", trigger: "change" }],
roleIds: [{ required: true, message: "请选择角色", trigger: "change", type: "array" }],
};
const handlePasswordChange = () => {
if (isEdit.value) {
passwordModified.value = true;
}
};
const handleSubmit = async () => {
const valid = await formRef.value?.validate().catch(() => false);
if (!valid) return;
loading.value = true;
try {
const submitData = { ...formData.value };
// 编辑模式下，如果密码未修改，则不提交密码字段
if (isEdit.value && !passwordModified.value) {
delete submitData.passWord;
delete submitData.confirmPassword;
}
if (isEdit.value) {
await put(`/api/sys/sysuser/${submitData.id}`, submitData);
} else {
await post("/api/sys/sysuser", submitData);
}
ElMessage.success(isEdit.value ? "编辑成功" : "新建成功");
visible.value = false;
emit("success");
} finally {
loading.value = false;
}
};
const handleClose = () => {
formRef.value?.resetFields();
passwordModified.value = false;
};
const handleOpen = () => {
if (!isEdit.value) {
// 新建时重置密码相关状态
passwordModified.value = false;
}
};
</script>
<template>
<el-dialog
v-model="visible"
:title="title"
width="600px"
:close-on-click-modal="false"
@close="handleClose"
@open="handleOpen"
>
<el-form ref="formRef" :model="formData" :rules="rules" label-position="right" label-width="100px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="登录账号" prop="loginName">
<el-input v-model="formData.loginName" placeholder="请输入登录账号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="姓名" prop="userName">
<el-input v-model="formData.userName" placeholder="请输入姓名" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="密码" prop="passWord">
<el-input
v-model="formData.passWord"
type="password"
placeholder="请输入密码"
show-password
@input="handlePasswordChange"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="确认密码" prop="confirmPassword">
<el-input
v-model="formData.confirmPassword"
type="password"
placeholder="请确认密码"
show-password
@input="handlePasswordChange"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="用户类型" prop="userType">
<el-select v-model="formData.userType" placeholder="请选择用户类型" style="width: 100%">
<el-option v-for="item in userTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="角色" prop="roleIds">
<BaseMultiSelect
v-model="formData.roleIds"
:url="roleUrl"
name="roleId"
label="roleName"
placeholder="请选择角色"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" :loading="loading" @click="handleSubmit">确定</el-button>
</template>
</el-dialog>
</template>

34
src/views/sys/sysuser/index.vue
View File

@@ -1,34 +0,0 @@
<script lang="ts" setup>
import BasePageableTable from "@/components/base/base-pageable-table/BasePageableTable.vue";
import DefaultOperateButton from "@/components/base/default-operate-button/DefaultOperateButton.vue";
import DefaultToolButton from "@/components/base/default-tool-button/DefaultToolButton.vue";
import FormView from "./FormView.vue";
const url = "/api/user/getUserPage";
const menu = "sysuser";
const searchers = [{ name: "loginName", type: "text" as const, placeholder: "请输入登录名" }];
const addClick = () => {};
const editClick = () => {};
const delteClick = () => {};
</script>
<template>
<BasePageableTable :url="url" :searchers="searchers">
<template #tool-button>
<DefaultToolButton :add-click="addClick" :menu="menu" />
</template>
<template #columns>
<el-table-column prop="id" type="selection" width="40" />
<el-table-column label="登录账户" prop="loginName" />
<el-table-column label="用户名" prop="userName" />
<el-table-column label="集团" prop="contactPerson" />
<el-table-column label="登录次数" prop="loginCount" />
<el-table-column label="登陆时间" prop="loginDate" />
<el-table-column label="登录 IP" prop="loginIp" />
<el-table-column label="创建时间" prop="createDate" />
<el-table-column>
<DefaultOperateButton :edit-click="editClick" :delete-click="delteClick" :menu="menu" />
</el-table-column>
</template>
</BasePageableTable>
<FormView />
</template>

0
src/views/systemset/key_account/KeyAccountView.vue → src/views/systemset/key-account/KeyAccountView.vue
View File

286
src/views/systemset/permission/PermissionView.vue Normal file
View File

@@ -0,0 +1,286 @@
<script lang="ts" setup>
import DefaultToolButton from "@/components/base/default-tool-button/DefaultToolButton.vue";
import DefaultOperateButtonColumn from "@/components/base/default-column/DefaultOperateButtonColumn.vue";
import { usePage } from "@/composables/use-page";
import BaseForm from "@/components/base/base-form/BaseForm.vue";
import { $t } from "@/common/languages";
import type { FormInstance, FormRules } from "element-plus";
import { formatDate } from "@/common/utils/format-utils";
import TreeSidePageableTable from "@/components/base/treeside-pageable-table/TreeSidePageableTable.vue";
import DefaultStatusSwitchColumn from "@/components/base/default-column/DefaultStatusSwitchColumn.vue";
import StatusSwitch from "@/components/base/base-switch/StatusSwitch.vue";
/**
* 必须要的变量
*/
const getPageUrl = "/sys/syspermission/getSysPermissionPage";
const treeSideUrl = "/sys/syspermission/getPermissionTree";
const addUrl = "/sys/syspermission/addSysPermission";
const editUrl = "/sys/syspermission/updateSysPermission";
const removeUrl = "/sys/syspermission/deleteSysPermission";
const statusUrl = "/sys/syspermission/setStatus";
const searchers = [
{
name: "permissionName",
type: "text" as const,
placeholder: $t("_prop.systemset.permission.permissionName"),
},
];
const rules = reactive<FormRules>({
permissionName: [
{
required: true,
message: $t("_message.systemset.permission.input_permissionName"),
trigger: "blur",
},
],
permissionType: [
{
required: true,
message: $t("_message.systemset.permission.select_permissionType"),
trigger: "change",
},
],
sort: [
{
required: true,
message: $t("_message.systemset.permission.input_sort"),
trigger: "blur",
},
],
});
/**
* 权限类型枚举
*/
const permissionTypeOptions = [
{ code: 0, description: $t("_enum.permissionType.menu") },
{ code: 1, description: $t("_enum.permissionType.tableTopButton") },
{ code: 2, description: $t("_enum.permissionType.tableOperateButton") },
{ code: 3, description: $t("_enum.permissionType.statusButton") },
];
/**
* 基本不变通用变量
*/
const tableRef = ref<InstanceType<typeof TreeSidePageableTable> | null>(null);
const { useAdd, useEdit, useRemove, useGeneralPageRef } = usePage(tableRef);
const { title, visible, formType, form } = useGeneralPageRef();
/**
* 可以自定义的变量
*/
const add = () => {
form.value = {};
title.value = "_title.systemset.permission.add";
visible.value = true;
formType.value = false;
};
const edit = (row: any) => {
title.value = "_title.systemset.permission.edit";
form.value = { ...row };
visible.value = true;
formType.value = true;
};
const remove = (row: any) => {
useRemove(removeUrl, row.id, "_message.systemset.permission.delete_message");
};
const submit = (formData: any, formRef: FormInstance | undefined) => {
if (formRef !== undefined) {
formRef.validate(valid => {
if (valid) {
if (formType.value) useEdit(editUrl, formData, visible);
else useAdd(addUrl, formData, visible);
}
});
}
};
const topButtonClick = (eventName: string) => {
switch (eventName) {
case "add":
add();
break;
}
};
const operateButtonClick = (eventName: string, row: any) => {
switch (eventName) {
case "edit":
edit(row);
break;
case "remove":
remove(row);
break;
}
};
/**
* 权限类型格式化
*/
const formatPermissionType = (row: any) => {
const type = permissionTypeOptions.find(item => item.code === row.permissionType);
return type?.description || "";
};
</script>
<template>
<TreeSidePageableTable
:url="getPageUrl"
:searchers="searchers"
ref="tableRef"
:tree-side-url="treeSideUrl"
tree-side-param-name="parentId"
tree-side-node-name="id"
>
<template #tool-button>
<DefaultToolButton @top-button-click="topButtonClick" />
</template>
<template #columns>
<el-table-column :label="$t('_prop.systemset.permission.permissionName')" prop="permissionName" />
<el-table-column :label="$t('_prop.systemset.permission.permissionCode')" prop="permissionCode" />
<el-table-column
:label="$t('_prop.systemset.permission.permissionType')"
prop="permissionType"
:formatter="formatPermissionType"
/>
<el-table-column :label="$t('_prop.systemset.permission.pageLink')" prop="pageLink" />
<el-table-column :label="$t('_prop.systemset.permission.eventName')" prop="eventName" />
<el-table-column :label="$t('_prop.systemset.permission.iconName')" prop="iconName" />
<el-table-column :label="$t('_prop.systemset.permission.sort')" prop="sort" />
<el-table-column :label="$t('_prop.systemset.permission.hidden')" prop="hidden">
<template #default="{ row }">
<el-tag v-if="row.hidden" type="info" size="small">
{{ $t("_common.yes") }}
</el-tag>
<el-tag v-else type="success" size="small">
{{ $t("_common.no") }}
</el-tag>
</template>
</el-table-column>
<DefaultStatusSwitchColumn :url="statusUrl" />
<el-table-column :label="$t('_prop.common.createDate')" prop="createDate" :formatter="formatDate" />
<DefaultOperateButtonColumn @operate-button-click="operateButtonClick" />
</template>
</TreeSidePageableTable>
<BaseForm v-model:visible="visible" @submit="submit" v-model:form="form" :title="$t(title)" :rules="rules">
<template #form-items>
<el-form-item prop="id" v-if="false">
<el-input v-model="form.id" />
</el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item :label="$t('_prop.systemset.permission.permissionName')" prop="permissionName">
<el-input
v-model="form.permissionName"
:placeholder="$t('_message.systemset.permission.input_permissionName')"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('_prop.systemset.permission.permissionI18n')" prop="permissionI18n">
<el-input
v-model="form.permissionI18n"
:placeholder="$t('_message.systemset.permission.input_permissionI18n')"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item :label="$t('_prop.systemset.permission.permissionType')" prop="permissionType">
<el-select
v-model="form.permissionType"
:placeholder="$t('_message.systemset.permission.select_permissionType')"
style="width: 100%"
>
<el-option
v-for="item in permissionTypeOptions"
:key="item.code"
:label="item.description"
:value="item.code"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('_prop.systemset.permission.permissionCode')" prop="permissionCode">
<el-input
v-model="form.permissionCode"
:placeholder="$t('_message.systemset.permission.input_permissionCode')"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item :label="$t('_prop.systemset.permission.pageLink')" prop="pageLink">
<el-input v-model="form.pageLink" :placeholder="$t('_message.systemset.permission.input_pageLink')" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('_prop.systemset.permission.viewLink')" prop="viewLink">
<el-input v-model="form.viewLink" :placeholder="$t('_message.systemset.permission.input_viewLink')" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item :label="$t('_prop.systemset.permission.eventName')" prop="eventName">
<el-input v-model="form.eventName" :placeholder="$t('_message.systemset.permission.input_eventName')" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('_prop.systemset.permission.className')" prop="className">
<el-input v-model="form.className" :placeholder="$t('_message.systemset.permission.input_className')" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item :label="$t('_prop.systemset.permission.iconName')" prop="iconName">
<el-input v-model="form.iconName" :placeholder="$t('_message.systemset.permission.input_iconName')" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('_prop.systemset.permission.sort')" prop="sort">
<el-input-number
v-model="form.sort"
:min="0"
:placeholder="$t('_message.systemset.permission.input_sort')"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item :label="$t('_prop.common.status')" prop="status">
<StatusSwitch v-model="form.status" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('_prop.systemset.permission.hidden')" prop="hidden">
<el-switch v-model="form.hidden" :active-text="$t('_common.yes')" :inactive-text="$t('_common.no')" />
</el-form-item>
</el-col>
</el-row>
<el-form-item :label="$t('_prop.systemset.permission.parentId')" prop="parentId">
<el-input-number
v-model="form.parentId"
:min="0"
:placeholder="$t('_message.systemset.permission.input_parentId')"
style="width: 100%"
/>
</el-form-item>
</template>
</BaseForm>
</template>

4
src/views/systemset/sysrole/SysRoleView.vue
View File

@@ -21,7 +21,7 @@ const addUrl = "/sys/sysrole/addSysRole";
const editUrl = "/sys/sysrole/updateSysRole";
const removeUrl = "/sys/sysrole/deleteSysRole";
const statusUrl = "/sys/sysrole/setStatus";
const treeUrl = "/sys/syschannel/getSysChannelTree";
const treeUrl = "/sys/syspermission/getPermissionTree";
const searchers = [{ name: "roleName", type: "text" as const, placeholder: $t("_prop.systemset.sysrole.roleName") }];
const rules = reactive<FormRules>({
roleName: [{ required: true, message: $t("_message.systemset.sysrole.input_roleName"), trigger: "blur" }],
@@ -128,7 +128,7 @@ const operateButtonClick = (eventName: string, row: any) => {
</el-row>
<br />
<el-form-item style="max-height: 400px; overflow: auto">
<BaseTree ref="treeRef" :url="treeUrl" :show-checkbox="true" v-model="form.channelIds" />
<BaseTree ref="treeRef" :url="treeUrl" :show-checkbox="true" v-model="form.permissionIds" />
</el-form-item>
</template>
</BaseForm>

288
src/views/systemset/sysuser/SysUserView.vue Normal file
View File

@@ -0,0 +1,288 @@
<script lang="ts" setup>
import BasePageableTable from "@/components/base/base-pageable-table/BasePageableTable.vue";
import DefaultToolButton from "@/components/base/default-tool-button/DefaultToolButton.vue";
import DefaultOperateButtonColumn from "@/components/base/default-column/DefaultOperateButtonColumn.vue";
import { usePage } from "@/composables/use-page";
import BaseForm from "@/components/base/base-form/BaseForm.vue";
import { $t } from "@/common/languages";
import type { FormInstance, FormRules } from "element-plus";
import { formatDate } from "@/common/utils/format-utils";
import DefaultStatusSwitchColumn from "@/components/base/default-column/DefaultStatusSwitchColumn.vue";
import StatusSwitch from "@/components/base/base-switch/StatusSwitch.vue";
import BaseMultiSelect from "@/components/base/base-multi-select/BaseMultiSelect.vue";
/**
* 必须要的变量
*/
const getPageUrl = "/sys/sysuser/getSysUserPage";
const addUrl = "/sys/sysuser/addSysUser";
const editUrl = "/sys/sysuser/updateSysUser";
const removeUrl = "/sys/sysuser/deleteSysUser";
const statusUrl = "/sys/sysuser/setStatus";
const roleSelectUrl = "/sys/sysrole/getSysRoleSelectList";
const searchers = [
{ name: "loginName", type: "text" as const, placeholder: $t("_prop.systemset.sysuser.loginName") },
{ name: "userName", type: "text" as const, placeholder: $t("_prop.systemset.sysuser.userName") },
];
const rules = reactive<FormRules>({
loginName: [{ required: true, message: $t("_message.systemset.sysuser.input_loginName"), trigger: "blur" }],
userName: [{ required: true, message: $t("_message.systemset.sysuser.input_userName"), trigger: "blur" }],
passWord: [
{
required: true,
validator: (rule: any, value: any, callback: any) => {
// 编辑模式下密码为空表示不修改，允许通过
if (formType.value && !value) {
callback();
return;
}
// 新建模式下密码必填
if (!formType.value && !value) {
callback(new Error($t("_message.systemset.sysuser.input_password")));
return;
}
// 密码长度校验
if (value && value.length < 6) {
callback(new Error($t("_message.systemset.sysuser.password_min_length")));
return;
}
callback();
},
trigger: "blur",
},
],
confirmPassword: [
{
required: true,
validator: (rule: any, value: any, callback: any) => {
// 编辑模式下如果密码为空，确认密码也为空时允许通过
if (formType.value && !form.value.passWord && !value) {
callback();
return;
}
// 新建模式下确认密码必填
if (!formType.value && !value) {
callback(new Error($t("_message.systemset.sysuser.input_confirmPassword")));
return;
}
// 密码一致性校验
if (value !== form.value.passWord) {
callback(new Error($t("_message.systemset.sysuser.password_not_match")));
return;
}
callback();
},
trigger: "blur",
},
],
userType: [{ required: true, message: $t("_message.systemset.sysuser.select_userType"), trigger: "change" }],
roleIds: [
{ required: true, message: $t("_message.systemset.sysuser.select_role"), trigger: "change", type: "array" },
],
});
const userTypeOptions = [
{ code: 0, description: $t("_enum.userType.normal") },
{ code: 5, description: $t("_enum.userType.admin") },
];
/**
* 基本不变通用变量
*/
const tableRef = ref<InstanceType<typeof BasePageableTable> | null>(null);
const { useAdd, useEdit, useRemove, useGeneralPageRef } = usePage(tableRef);
const { title, visible, formType, form } = useGeneralPageRef();
const baseFormRef = ref<InstanceType<typeof BaseForm>>();
/**
* 可以自定义的变量
*/
const add = () => {
form.value = {
userType: 0,
roleIds: [],
status: 1,
};
title.value = "_title.systemset.sysuser.add";
visible.value = true;
formType.value = false;
};
const edit = (row: any) => {
title.value = "_title.systemset.sysuser.edit";
form.value = {
...row,
passWord: "",
confirmPassword: "",
roleIds: row.roleIds || [],
};
visible.value = true;
formType.value = true;
};
const remove = (row: any) => {
useRemove(removeUrl, row.id, "_message.systemset.sysuser.delete_message");
};
const submit = (formData: any, formRef: FormInstance | undefined) => {
if (formRef !== undefined) {
formRef.validate(valid => {
if (valid) {
const submitData = { ...formData };
// 编辑模式下，如果密码为空，则不提交密码字段
if (formType.value && !submitData.passWord) {
delete submitData.passWord;
delete submitData.confirmPassword;
}
if (formType.value) {
// 编辑模式：使用新的 DTO 格式 { id, dto }
const updateData = {
id: submitData.id,
dto: submitData,
};
useEdit(editUrl, updateData, visible);
} else {
useAdd(addUrl, submitData, visible);
}
}
});
}
};
const topButtonClick = (eventName: string) => {
switch (eventName) {
case "add":
add();
break;
}
};
const operateButtonClick = (eventName: string, row: any) => {
switch (eventName) {
case "edit":
edit(row);
break;
case "remove":
remove(row);
break;
}
};
const getUserTypeLabel = (type: number) => {
const option = userTypeOptions.find(item => item.code === type);
return option?.description || "-";
};
</script>
<template>
<BasePageableTable :url="getPageUrl" :searchers="searchers" ref="tableRef">
<template #tool-button>
<DefaultToolButton @top-button-click="topButtonClick" />
</template>
<template #columns>
<el-table-column :label="$t('_prop.systemset.sysuser.loginName')" prop="loginName" />
<el-table-column :label="$t('_prop.systemset.sysuser.userName')" prop="userName" />
<el-table-column :label="$t('_prop.systemset.sysuser.roleNames')" prop="roleNames" show-overflow-tooltip />
<el-table-column
:label="$t('_prop.systemset.sysuser.userType')"
prop="userType"
:formatter="(row: any) => getUserTypeLabel(row.userType)"
/>
<el-table-column :label="$t('_prop.common.createDate')" prop="createDate" :formatter="formatDate" />
<DefaultStatusSwitchColumn :url="statusUrl" />
<DefaultOperateButtonColumn @operate-button-click="operateButtonClick" />
</template>
</BasePageableTable>
<BaseForm
ref="baseFormRef"
v-model:visible="visible"
@submit="submit"
v-model:form="form"
:title="$t(title)"
:rules="rules"
>
<template #form-items>
<el-form-item prop="id" v-if="false"><el-input v-model="form.id" /></el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item :label="$t('_prop.systemset.sysuser.loginName')" prop="loginName">
<el-input v-model="form.loginName" :placeholder="$t('_message.systemset.sysuser.input_loginName')" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('_prop.systemset.sysuser.userName')" prop="userName">
<el-input v-model="form.userName" :placeholder="$t('_message.systemset.sysuser.input_userName')" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item :label="$t('_prop.systemset.sysuser.password')" prop="passWord">
<el-input
v-model="form.passWord"
type="password"
show-password
:placeholder="
formType
? $t('_message.systemset.sysuser.input_password_edit')
: $t('_message.systemset.sysuser.input_password')
"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('_prop.systemset.sysuser.confirmPassword')" prop="confirmPassword">
<el-input
v-model="form.confirmPassword"
type="password"
show-password
:placeholder="$t('_message.systemset.sysuser.input_confirmPassword')"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item :label="$t('_prop.systemset.sysuser.userType')" prop="userType">
<el-select
v-model="form.userType"
:placeholder="$t('_message.systemset.sysuser.select_userType')"
style="width: 100%"
>
<el-option
v-for="item in userTypeOptions"
:key="item.code"
:label="item.description"
:value="item.code"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('_prop.systemset.sysuser.role')" prop="roleIds">
<BaseMultiSelect
v-model="form.roleIds"
:url="roleSelectUrl"
name="roleId"
label="roleName"
:placeholder="$t('_message.systemset.sysuser.select_role')"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item :label="$t('_prop.common.status')" prop="status">
<StatusSwitch v-model="form.status" />
</el-form-item>
</el-col>
</el-row>
</template>
</BaseForm>
</template>