139 lines
3.4 KiB
TypeScript
139 lines
3.4 KiB
TypeScript
import UserAPI from "@/api/system/user";
|
||
import type { UserForm } from "@/types/api";
|
||
import type { IModalConfig } from "@/components/DeviceSn/types";
|
||
import { deptArr, roleArr } from "./options";
|
||
|
||
const modalConfig: IModalConfig<UserForm> = {
|
||
permPrefix: "sys:user",
|
||
dialog: {
|
||
title: "新增用户",
|
||
width: 800,
|
||
draggable: true,
|
||
},
|
||
form: {
|
||
labelWidth: 100,
|
||
},
|
||
formAction: UserAPI.create,
|
||
beforeSubmit(data) {
|
||
console.warn("提交之前处理", data);
|
||
},
|
||
formItems: [
|
||
{
|
||
label: "用户名",
|
||
prop: "username",
|
||
rules: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
|
||
type: "input",
|
||
attrs: {
|
||
placeholder: "请输入用户名",
|
||
},
|
||
col: {
|
||
xs: 24,
|
||
sm: 12,
|
||
},
|
||
},
|
||
{
|
||
label: "用户昵称",
|
||
prop: "nickname",
|
||
rules: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
|
||
type: "input",
|
||
attrs: {
|
||
placeholder: "请输入用户昵称",
|
||
},
|
||
col: {
|
||
xs: 24,
|
||
sm: 12,
|
||
},
|
||
},
|
||
{
|
||
label: "所属部门",
|
||
prop: "deptId",
|
||
rules: [{ required: true, message: "所属部门不能为空", trigger: "change" }],
|
||
type: "tree-select",
|
||
attrs: {
|
||
placeholder: "请选择所属部门",
|
||
data: deptArr,
|
||
filterable: true,
|
||
"check-strictly": true,
|
||
"render-after-expand": false,
|
||
},
|
||
// async initFn(formItem) {
|
||
// // 注意:如果initFn函数不是箭头函数,this会指向此配置项对象,那么也就可以用this来替代形参formItem
|
||
// formItem.attrs.data = await DeptAPI.getOptions();
|
||
// },
|
||
},
|
||
{
|
||
type: "custom",
|
||
label: "性别",
|
||
prop: "gender",
|
||
initialValue: 1,
|
||
attrs: { style: { width: "100%" } },
|
||
},
|
||
{
|
||
label: "角色",
|
||
prop: "roleIds",
|
||
rules: [{ required: true, message: "用户角色不能为空", trigger: "change" }],
|
||
type: "select",
|
||
attrs: {
|
||
placeholder: "请选择",
|
||
multiple: true,
|
||
},
|
||
options: roleArr,
|
||
initialValue: [],
|
||
// async initFn(formItem) {
|
||
// formItem.options = await RoleAPI.getOptions();
|
||
// },
|
||
},
|
||
{
|
||
type: "input",
|
||
label: "手机号码",
|
||
prop: "mobile",
|
||
rules: [
|
||
{
|
||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
||
message: "请输入正确的手机号码",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
attrs: {
|
||
placeholder: "请输入手机号码",
|
||
maxlength: 11,
|
||
},
|
||
},
|
||
{
|
||
label: "邮箱",
|
||
prop: "email",
|
||
rules: [
|
||
{
|
||
pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
|
||
message: "请输入正确的邮箱地址",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
type: "input",
|
||
attrs: {
|
||
placeholder: "请输入邮箱",
|
||
maxlength: 50,
|
||
},
|
||
},
|
||
{
|
||
label: "状态",
|
||
prop: "status",
|
||
type: "radio",
|
||
options: [
|
||
{ label: "正常", value: 1 },
|
||
{ label: "禁用", value: 0 },
|
||
],
|
||
initialValue: 1,
|
||
},
|
||
{
|
||
type: "custom",
|
||
label: "二级弹窗",
|
||
prop: "openModal",
|
||
slotName: "openModal",
|
||
},
|
||
],
|
||
};
|
||
|
||
// 如果有异步数据会修改配置的，推荐用reactive包裹，而纯静态配置的可以直接导出
|
||
export default reactive(modalConfig);
|