From 1b9fea7d4af68d8f933b2dc42bf6084b9646f64c Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期二, 04 三月 2025 08:39:55 +0800 Subject: [PATCH] 修改作业等级名称 --- src/views/system/department/component/deptDialog.vue | 138 ++++++++++++++++++++++++++++++++++----------- 1 files changed, 103 insertions(+), 35 deletions(-) diff --git a/src/views/system/department/component/deptDialog.vue b/src/views/system/department/component/deptDialog.vue index efd3285..3fc46fe 100644 --- a/src/views/system/department/component/deptDialog.vue +++ b/src/views/system/department/component/deptDialog.vue @@ -1,21 +1,38 @@ <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-cascader :options="deptData" :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }" placeholder="请选择部门" clearable class="w100" v-model="departmentForm.parentDepId"> </el-cascader> + <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" + :label="item.name" + :value="item.id" + ></el-option> + </el-select> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-if="departmentForm.depLevel !== 1"> + <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-input v-model="departmentForm.depName" placeholder="请输入部门名称" clearable></el-input> + <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="部门描述"> - <el-input v-model="departmentForm.depInfo" type="textarea" placeholder="请输入部门描述" maxlength="150"></el-input> + <el-input v-model="departmentForm.depInfo" class="input-add" type="textarea" placeholder="请输入部门描述" maxlength="150"></el-input> </el-form-item> </el-col> </el-row> @@ -23,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> @@ -32,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; @@ -47,10 +64,17 @@ isShowDialog: boolean; departmentForm: { depName: string; + depCode: string; depInfo: string; - parentDepId: string; + parentDepId: null | number + depLevel:null | number }; deptData: Array<TableDataRow>; + depLevelList: Array<Type> +} +interface Type{ + id:number; + name:string } export default defineComponent({ @@ -61,10 +85,37 @@ isShowDialog: false, departmentForm: { depName: '', - parentDepId: '', - depInfo: '' + depCode: '', + parentDepId: null, + depInfo: '', + depLevel:null, }, - deptData: [] // 部门数据 + deptData: [], // 部门数据 + depLevelList: [ + {id:1,name:'公司'}, + {id:2,name:'事业部'}, + {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: []) => { @@ -74,7 +125,9 @@ state.title = '新增部门'; state.departmentForm = { depName: '', - parentDepId: '', + depCode: '', + parentDepId: null, + depLevel:null, depInfo: '' }; } else { @@ -91,40 +144,53 @@ 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 === '新增部门') { + if(state.departmentForm.depLevel == 1){ + state.departmentForm.parentDepId = null + } + 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 { + if(state.departmentForm.depLevel == 1){ + state.departmentForm.parentDepId = null + } + 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 = () => {}; @@ -133,6 +199,8 @@ initTableData(); }); return { + ruleFormRef, + rules, openDialog, closeDialog, onCancel, -- Gitblit v1.9.2