5 changed files with 276 additions and 342 deletions
@ -1,199 +1,181 @@ |
|||||
<template> |
<template> |
||||
<Dialog v-model="dialogVisible" :title="dialogTitle"> |
<Dialog v-model="dialogVisible" :title="dialogTitle"> |
||||
<el-form |
<el-form |
||||
ref="formRef" |
ref="formRef" |
||||
v-loading="formLoading" |
v-loading="formLoading" |
||||
:model="formData" |
:model="formData" |
||||
:rules="formRules" |
:rules="formRules" |
||||
label-width="150px" |
label-width="150px" |
||||
> |
> |
||||
<el-form-item label="上级部门" prop="parentId"> |
<el-form-item label="上级部门" prop="parentId"> |
||||
<el-tree-select |
<el-tree-select |
||||
v-model="formData.parentId" |
v-model="formData.parentId" |
||||
:data="deptTree" |
:data="deptTree" |
||||
:props="defaultProps" |
:props="defaultProps" |
||||
check-strictly |
check-strictly |
||||
default-expand-all |
default-expand-all |
||||
placeholder="请选择上级部门" |
placeholder="请选择上级部门" |
||||
value-key="deptId" |
value-key="deptId" |
||||
/> |
/> |
||||
</el-form-item> |
</el-form-item> |
||||
<el-form-item label="部门名称" prop="name"> |
<el-form-item label="部门名称" prop="name"> |
||||
<el-input v-model="formData.name" placeholder="请输入部门名称" /> |
<el-input v-model="formData.name" placeholder="请输入部门名称" /> |
||||
</el-form-item> |
</el-form-item> |
||||
<el-form-item label="显示排序" prop="sort"> |
<el-form-item label="显示排序" prop="sort"> |
||||
<el-input-number v-model="formData.sort" :min="0" controls-position="right" /> |
<el-input-number v-model="formData.sort" :min="0" controls-position="right" /> |
||||
</el-form-item> |
</el-form-item> |
||||
<el-form-item label="负责人" prop="leaderUserId"> |
<el-form-item label="负责人" prop="leaderUserId"> |
||||
<el-select v-model="formData.leaderUserId" clearable placeholder="请输入负责人"> |
<el-select v-model="formData.leaderUserId" clearable placeholder="请输入负责人"> |
||||
<el-option |
<el-option |
||||
v-for="item in userList" |
v-for="item in userList" |
||||
:key="item.id" |
:key="item.id" |
||||
:label="item.nickname" |
:label="item.nickname" |
||||
:value="item.id" |
:value="item.id" |
||||
/> |
/> |
||||
</el-select> |
</el-select> |
||||
</el-form-item> |
</el-form-item> |
||||
<el-form-item label="联系电话" prop="phone"> |
<el-form-item label="联系电话" prop="phone"> |
||||
<el-input v-model="formData.phone" maxlength="11" placeholder="请输入联系电话" /> |
<el-input v-model="formData.phone" maxlength="11" placeholder="请输入联系电话" /> |
||||
</el-form-item> |
</el-form-item> |
||||
<el-form-item label="邮箱" prop="email"> |
<el-form-item label="邮箱" prop="email"> |
||||
<el-input v-model="formData.email" maxlength="50" placeholder="请输入邮箱" /> |
<el-input v-model="formData.email" maxlength="50" placeholder="请输入邮箱" /> |
||||
</el-form-item> |
</el-form-item> |
||||
<el-form-item label="状态" prop="status"> |
<el-form-item label="状态" prop="status"> |
||||
<el-select v-model="formData.status" clearable placeholder="请选择状态"> |
<el-select v-model="formData.status" clearable placeholder="请选择状态"> |
||||
<el-option |
<el-option |
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)" |
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)" |
||||
:key="dict.value" |
:key="dict.value" |
||||
:label="dict.label" |
:label="dict.label" |
||||
:value="dict.value" |
:value="dict.value" |
||||
/> |
/> |
||||
</el-select> |
</el-select> |
||||
</el-form-item> |
</el-form-item> |
||||
|
|
||||
<el-form-item label="是否设备维修班组" prop="isDeviceClass"> |
<el-form-item label="班组类型" prop="classType">
<el-select v-model="formData.classType" clearable placeholder="请选择班组类型">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.REQUEST_APPLY)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item> |
||||
<el-select v-model="formData.isDeviceClass" clearable placeholder="请选择是否设备维修班组"> |
|
||||
<el-option |
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)" |
|
||||
:key="dict.value" |
|
||||
:label="dict.label" |
|
||||
:value="dict.value" |
|
||||
/> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
|
|
||||
<el-form-item label="是否模具维修班组" prop="isMoldClass"> |
|
||||
<el-select v-model="formData.isMoldClass" clearable placeholder="请选择是否模具维修班组"> |
</el-form> |
||||
<el-option |
<template #footer> |
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)" |
<el-button type="primary" @click="submitForm">确 定</el-button> |
||||
:key="dict.value" |
<el-button @click="dialogVisible = false">取 消</el-button> |
||||
:label="dict.label" |
</template> |
||||
:value="dict.value" |
</Dialog> |
||||
/> |
</template> |
||||
</el-select> |
<script lang="ts" setup> |
||||
</el-form-item> |
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' |
||||
</el-form> |
import { defaultProps, handleTree } from '@/utils/tree' |
||||
<template #footer> |
import * as DeptApi from '@/api/system/dept' |
||||
<el-button type="primary" @click="submitForm">确 定</el-button> |
import * as UserApi from '@/api/system/user' |
||||
<el-button @click="dialogVisible = false">取 消</el-button> |
import { CommonStatusEnum } from '@/utils/constants' |
||||
</template> |
|
||||
</Dialog> |
defineOptions({ name: 'SystemDeptForm' }) |
||||
</template> |
|
||||
<script lang="ts" setup> |
const { t } = useI18n() // 国际化 |
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' |
const message = useMessage() // 消息弹窗 |
||||
import { defaultProps, handleTree } from '@/utils/tree' |
|
||||
import * as DeptApi from '@/api/system/dept' |
const dialogVisible = ref(false) // 弹窗的是否展示 |
||||
import * as UserApi from '@/api/system/user' |
const dialogTitle = ref('') // 弹窗的标题 |
||||
import { CommonStatusEnum } from '@/utils/constants' |
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 |
||||
|
const formType = ref('') // 表单的类型：create - 新增；update - 修改 |
||||
defineOptions({ name: 'SystemDeptForm' }) |
const formData = ref({ |
||||
|
id: undefined, |
||||
const { t } = useI18n() // 国际化 |
title: '', |
||||
const message = useMessage() // 消息弹窗 |
parentId: undefined, |
||||
|
name: undefined, |
||||
const dialogVisible = ref(false) // 弹窗的是否展示 |
sort: undefined, |
||||
const dialogTitle = ref('') // 弹窗的标题 |
leaderUserId: undefined, |
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 |
phone: undefined, |
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改 |
email: undefined, |
||||
const formData = ref({ |
|
||||
id: undefined, |
|
||||
title: '', |
|
||||
parentId: undefined, |
|
||||
name: undefined, |
|
||||
sort: undefined, |
|
||||
leaderUserId: undefined, |
|
||||
phone: undefined, |
|
||||
email: undefined, |
|
||||
status: CommonStatusEnum.ENABLE, |
status: CommonStatusEnum.ENABLE, |
||||
isDeviceClass: CommonStatusEnum.DISABLE, |
classType: undefined, |
||||
isMoldClass: CommonStatusEnum.DISABLE, |
}) |
||||
}) |
const formRules = reactive({ |
||||
const formRules = reactive({ |
parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }], |
||||
parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }], |
name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }], |
||||
name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }], |
sort: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }], |
||||
sort: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }], |
email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }], |
||||
email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }], |
phone: [ |
||||
phone: [ |
{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' } |
||||
{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' } |
], |
||||
], |
status: [{ required: true, message: '状态不能为空', trigger: 'blur' }], |
||||
status: [{ required: true, message: '状态不能为空', trigger: 'blur' }] |
classType: [{ required: true, message: '状态不能为空', trigger: 'blur' }] |
||||
}) |
}) |
||||
const formRef = ref() // 表单 Ref |
const formRef = ref() // 表单 Ref |
||||
const deptTree = ref() // 树形结构 |
const deptTree = ref() // 树形结构 |
||||
const userList = ref<UserApi.UserVO[]>([]) // 用户列表 |
const userList = ref<UserApi.UserVO[]>([]) // 用户列表 |
||||
|
|
||||
/** 打开弹窗 */ |
/** 打开弹窗 */ |
||||
const open = async (type: string, id?: number) => { |
const open = async (type: string, id?: number) => { |
||||
dialogVisible.value = true |
dialogVisible.value = true |
||||
dialogTitle.value = t('action.' + type) |
dialogTitle.value = t('action.' + type) |
||||
formType.value = type |
formType.value = type |
||||
resetForm() |
resetForm() |
||||
// 修改时，设置数据 |
// 修改时，设置数据 |
||||
if (id) { |
if (id) { |
||||
formLoading.value = true |
formLoading.value = true |
||||
try { |
try { |
||||
formData.value = await DeptApi.getDept(id) |
formData.value = await DeptApi.getDept(id) |
||||
} finally { |
} finally { |
||||
formLoading.value = false |
formLoading.value = false |
||||
} |
} |
||||
} |
} |
||||
// 获得用户列表 |
// 获得用户列表 |
||||
userList.value = await UserApi.getSimpleUserList() |
userList.value = await UserApi.getSimpleUserList() |
||||
// 获得部门树 |
// 获得部门树 |
||||
await getTree() |
await getTree() |
||||
} |
} |
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 |
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 |
||||
|
|
||||
/** 提交表单 */ |
/** 提交表单 */ |
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调 |
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调 |
||||
const submitForm = async () => { |
const submitForm = async () => { |
||||
// 校验表单 |
// 校验表单 |
||||
if (!formRef) return |
if (!formRef) return |
||||
const valid = await formRef.value.validate() |
const valid = await formRef.value.validate() |
||||
if (!valid) return |
if (!valid) return |
||||
// 提交请求 |
// 提交请求 |
||||
formLoading.value = true |
formLoading.value = true |
||||
try { |
try { |
||||
const data = formData.value as unknown as DeptApi.DeptVO |
const data = formData.value as unknown as DeptApi.DeptVO |
||||
if (formType.value === 'create') { |
if (formType.value === 'create') { |
||||
await DeptApi.createDept(data) |
await DeptApi.createDept(data) |
||||
message.success(t('common.createSuccess')) |
message.success(t('common.createSuccess')) |
||||
} else { |
} else { |
||||
await DeptApi.updateDept(data) |
await DeptApi.updateDept(data) |
||||
message.success(t('common.updateSuccess')) |
message.success(t('common.updateSuccess')) |
||||
} |
} |
||||
dialogVisible.value = false |
dialogVisible.value = false |
||||
// 发送操作成功的事件 |
// 发送操作成功的事件 |
||||
emit('success') |
emit('success') |
||||
} finally { |
} finally { |
||||
formLoading.value = false |
formLoading.value = false |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
/** 重置表单 */ |
/** 重置表单 */ |
||||
const resetForm = () => { |
const resetForm = () => { |
||||
formData.value = { |
formData.value = { |
||||
id: undefined, |
id: undefined, |
||||
title: '', |
title: '', |
||||
parentId: undefined, |
parentId: undefined, |
||||
name: undefined, |
name: undefined, |
||||
sort: undefined, |
sort: undefined, |
||||
leaderUserId: undefined, |
leaderUserId: undefined, |
||||
phone: undefined, |
phone: undefined, |
||||
email: undefined, |
email: undefined, |
||||
status: CommonStatusEnum.ENABLE, |
status: CommonStatusEnum.ENABLE, |
||||
isDeviceClass: CommonStatusEnum.DISABLE, |
isDeviceClass: CommonStatusEnum.DISABLE, |
||||
isMoldClass: CommonStatusEnum.DISABLE, |
isMoldClass: CommonStatusEnum.DISABLE, |
||||
} |
} |
||||
formRef.value?.resetFields() |
formRef.value?.resetFields() |
||||
} |
} |
||||
|
|
||||
/** 获得部门树 */ |
/** 获得部门树 */ |
||||
const getTree = async () => { |
const getTree = async () => { |
||||
deptTree.value = [] |
deptTree.value = [] |
||||
const data = await DeptApi.getSimpleDeptList() |
const data = await DeptApi.getSimpleDeptList() |
||||
let dept: Tree = { id: 0, name: '顶级部门', children: [] } |
let dept: Tree = { id: 0, name: '顶级部门', children: [] } |
||||
dept.children = handleTree(data) |
dept.children = handleTree(data) |
||||
deptTree.value.push(dept) |
deptTree.value.push(dept) |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|||||
Loading…
Reference in new issue