From df39b348c7743e3275aca6053a46c2d63efc5bfb Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期五, 24 三月 2023 10:30:25 +0800
Subject: [PATCH] 修改部门管理
---
src/views/system/department/component/deptDialog.vue | 98 +++++++++++++++++++++++++++++++++---------------
1 files changed, 67 insertions(+), 31 deletions(-)
diff --git a/src/views/system/department/component/deptDialog.vue b/src/views/system/department/component/deptDialog.vue
index 5ea28a3..cb69709 100644
--- a/src/views/system/department/component/deptDialog.vue
+++ b/src/views/system/department/component/deptDialog.vue
@@ -1,11 +1,11 @@
<template>
<div class="system-add-dept-container">
<el-dialog :title="title" v-model="isShowDialog" width="600px">
- <el-form :model="departmentForm" size="default" label-width="90px">
+ <el-form ref="ruleFormRef" :model="departmentForm" :rules="rules" size="default" label-width="90px">
<el-row :gutter="35">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
- <el-form-item label="部门等级">
- <el-select v-model="departmentForm.depLevel" placeholder="请输入部门等级" class="input-add" clearable>
+ <el-form-item label="部门等级" prop="depLevel">
+ <el-select v-model="departmentForm.depLevel" placeholder="请选择部门等级" class="input-add" clearable>
<el-option
v-for="item in depLevelList"
:key="item.id"
@@ -16,14 +16,19 @@
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
- <el-form-item label="上级部门">
+ <el-form-item label="上级部门" prop="parentDepId">
<el-cascader :options="deptData" class="input-add" :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }" placeholder="请选择部门" clearable v-model="departmentForm.parentDepId"> </el-cascader>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
- <el-form-item label="部门名称">
+ <el-form-item label="部门名称" prop="depName">
<el-input v-model="departmentForm.depName" class="input-add" placeholder="请输入部门名称" clearable></el-input>
</el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+ <el-form-item label="部门编号" prop="depCode">
+ <el-input v-model="departmentForm.depCode" class="input-add" placeholder="请输入部门编号" clearable></el-input>
+ </el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="部门描述">
@@ -35,7 +40,7 @@
<template #footer>
<span class="dialog-footer">
<el-button @click="onCancel" size="default">取 消</el-button>
- <el-button type="primary" v-throttle @click="onSubmit" size="default">确 定</el-button>
+ <el-button type="primary" v-throttle @click="onSubmit(ruleFormRef)" size="default">确 定</el-button>
</span>
</template>
</el-dialog>
@@ -44,9 +49,9 @@
<script lang="ts">
import { ElMessage } from 'element-plus';
-import { reactive, toRefs, onMounted, defineComponent } from 'vue';
+import { ref, reactive, toRefs, onMounted, defineComponent } from 'vue';
import { departmentApi } from '/@/api/systemManage/department';
-
+import type { FormInstance, FormRules } from 'element-plus'
// 定义接口来定义对象的类型
interface TableDataRow {
name: string;
@@ -59,12 +64,13 @@
isShowDialog: boolean;
departmentForm: {
depName: string;
+ depCode: string;
depInfo: string;
parentDepId: string;
depLevel:null | number
};
deptData: Array<TableDataRow>;
- depLevelList: Array<Type>;
+ depLevelList: Array<Type>
}
interface Type{
id:number;
@@ -79,6 +85,7 @@
isShowDialog: false,
departmentForm: {
depName: '',
+ depCode: '',
parentDepId: '',
depInfo: '',
depLevel:null,
@@ -90,7 +97,26 @@
{id:3,name:'车间'},
] // 部门数据
});
-
+ const checkCode = (rule: any, value: any, callback: any) => {
+ if (!value) {
+ return callback(new Error('请输入部门编号'))
+ }
+ setTimeout(() => {
+ const regex = /^[a-zA-Z0-9]+$/
+ if (regex.test(value)) {
+ callback()
+ } else {
+ callback(new Error('部门编号只能有英文字母和数字构成'))
+ }
+ }, 1000)
+ }
+ const ruleFormRef = ref<FormInstance>()
+ const rules = reactive<FormRules>({
+ depName: [{ required: true, message: '请填写部门名称', trigger: 'blur' }],
+ parentDepId: [{ required: true, message: '请选择上级部门', trigger: 'blur' }],
+ depLevel: [{ required: true, message: '请选择部门等级', trigger: 'blur' }],
+ depCode: [{ required: true, validator: checkCode, trigger: 'blur' }]
+ });
// 打开弹窗
const openDialog = (type: string, value: any, departmentList: []) => {
state.isShowDialog = true;
@@ -99,6 +125,7 @@
state.title = '新增部门';
state.departmentForm = {
depName: '',
+ depCode: '',
parentDepId: '',
depLevel:null,
depInfo: ''
@@ -117,40 +144,47 @@
closeDialog();
};
// 新增
- const onSubmit = async () => {
- if (state.title === '新增部门') {
- let res = await departmentApi().addDepartment(state.departmentForm);
- if (res.data.code === '200') {
+ const onSubmit = async (formEl: FormInstance | undefined) => {
+ if (!formEl) return
+ await formEl.validate(async (valid, fields) => {
+ if (valid) {
+ if (state.title === '新增部门') {
+ let res = await departmentApi().addDepartment(state.departmentForm);
+ if (res.data.code === '200') {
ElMessage({
- type: 'success',
- message: '部门新增成功',
- duration: 2000
+ type: 'success',
+ message: '部门新增成功',
+ duration: 2000
});
closeDialog();
context.emit('getDepartmentList');
- } else {
+ } else {
ElMessage({
- type: 'warning',
- message: res.data.msg
+ type: 'warning',
+ message: res.data.msg
});
- }
- } else {
- let res = await departmentApi().modDepartment(state.departmentForm);
- if (res.data.code === '200') {
+ }
+ } else {
+ let res = await departmentApi().modDepartment(state.departmentForm);
+ if (res.data.code === '200') {
ElMessage({
- type: 'success',
- message: '部门修改成功',
- duration: 2000
+ type: 'success',
+ message: '部门修改成功',
+ duration: 2000
});
closeDialog();
context.emit('getDepartmentList');
- } else {
+ } else {
ElMessage({
- type: 'warning',
- message: res.data.msg
+ type: 'warning',
+ message: res.data.msg
});
+ }
}
- }
+ } else {
+ console.log('error submit!', fields)
+ }
+ })
};
// 初始化部门数据
const initTableData = () => {};
@@ -159,6 +193,8 @@
initTableData();
});
return {
+ ruleFormRef,
+ rules,
openDialog,
closeDialog,
onCancel,
--
Gitblit v1.9.2