添加/编辑/删除用户

src/views/system_manage/depart_manage/components/ModifyUserDialog.vue

@@ -14,7 +14,7 @@ const props = defineProps({
     departArr:Array,
     roleArr:Array
 })
-const emit = defineEmits(["closeDia"],["save"])
+const emit = defineEmits(["closeDia","submitForm"])
 
 //用户表单原始信息
 const baseForm = {
@@ -37,17 +37,23 @@ const baseForm = {
 }
 let userForm = reactive({})
 let hasEmployeeNo = ref(false)
+let formShow = ref(false) //控制表单暂缓加载,直接加载弹窗弹出会卡顿
+let type = ref('add')
 watch(()=>props.isShow,(newval)=>{
-    //初始化userForm
-    Object.assign(userForm,baseForm) 
-    //清除表单校验
-    formRef.value?.resetFields()
-    if(newval&&props.type==='edit'){
+    if(newval){
+        //工号一旦填写了就不允许更改
+        hasEmployeeNo.value = props.type==='add'?false:!!props.userInfo.EmployeeId
         setUserForm()
+        type.value = props.type
+    }else{
+        //清除表单校验
+        formRef.value?.resetFields()
+        Object.assign(userForm,baseForm)
+        hasEmployeeNo.value = false
     }
-    hasEmployeeNo.value = props.type==='add'?false:!!props.userInfo.EmployeeId
+
 })
-//编辑用户信息时,设置userForm的值
+//设置userForm的值
 async function setUserForm(){
     const {
             AdminId,AdminName,Password,EmployeeId,Authority,Position,RealName,RoleId,Enabled,Email,
@@ -55,17 +61,10 @@ async function setUserForm(){
         } = props.userInfo
     
     let departArr = [];
-    departArr.push(DepartmentId)
+    DepartmentId?departArr.push(DepartmentId):''
     GroupId?departArr.push(GroupId):''
     TeamId ?departArr.push(TeamId):''
 
-    let ResearchGroupIds = []
-    const res = await departInterence.getResearchGroupByAdminId({AdminId})
-    if(res.Ret===200&&res.Data){
-        res.Data.forEach(item=>{
-            ResearchGroupIds.push(item.research_group_id)
-        })
-    }
     
     Object.assign(
         userForm, 
@@ -75,22 +74,38 @@ async function setUserForm(){
             pwd:Password||'',
             employeeNumber:EmployeeId||'',
             name:RealName||'',
-            depart:departArr,
+            depart:departArr.length?departArr:'',
             role:RoleId||'',
             province:Province||'',
             city:City||'',
             post:Position||'',
             mobile:Mobile||'',
-            auth:Authority,
-            status:Enabled,
-            direct:changeResearchGroupIdsToDirect(ResearchGroupIds,'tag_id'),
-            email:Email,
+            auth:Authority||0,
+            status:Enabled||1,
+            direct:'',
+            email:Email||'',
             areacode:TelAreaCode||'86'
         }
     )
+    console.log('setform')
+    if(props.type==='add') return 
+    let ResearchGroupIds = []
+    const res = await departInterence.getResearchGroupByAdminId({AdminId})
+    if(res.Ret===200&&res.Data){
+        res.Data.forEach(item=>{
+            ResearchGroupIds.push(item.research_group_id)
+            userForm.direct = changeResearchGroupIdsToDirect(ResearchGroupIds,'tag_id')
+        })
+    }
+}
+function roleChange(value){
+    if([2,6,18].includes(value)) return 
+    formRef.value?.clearValidate(['city'])
+}
+function selectRegion(data){
+    userForm.province = data.province.value;
+    userForm.city = data.city.value =='市'?'':data.city.value;
 }
-function roleChange(){}
-function selectRegion(){}
 //表单校验
 let formRef = ref(null)
 const formRules = reactive({
@@ -99,7 +114,7 @@ const formRules = reactive({
         if(value===''){
             callback(new Error('请输入新密码'))
         }
-        if(!checkPassWord(value)){
+        if(!checkPassWord(value||'')){
             callback(new Error('密码要求8位及以上，包含数字、大写字母、小写字母、特殊字符中的三个类型'))
         }else{
             callback()
@@ -109,9 +124,9 @@ const formRules = reactive({
     mobile:[{ validator: (rule, value, callback) => {
         if (value === ''&&!userForm.email) {
             callback(new Error('手机号码和邮箱至少填一个'));
-        }else if(value&&userForm.areacode==='86'&&!isMobileNo(value)) {
+        }else if(value&&userForm.areacode==='86'&&!isMobileNo(value||'')) {
             callback(new Error('请输入正确的手机号格式'));
-        } else if(userForm.areacode!=='86'&&isNaN(value.trim())){
+        } else if(userForm.areacode!=='86'&&isNaN(value?.trim())){
             callback(new Error('请输入正确的手机号格式'));
         }else {
             callback();
@@ -150,8 +165,8 @@ async function handleSubmitForm(){
         return
     }
     
-    //通过
-    emit("save",{
+    //通过校验
+    emit("submitForm",{
         type:props.type,
         userForm
     })
@@ -183,48 +198,53 @@ function getResearchGroupByKeyword(GroupId,keyWord = "research_group_id"){
     return answer.map((i) => i[keyWord]).reverse();
 }
 
+
+function DiaOpened(){
+    nextTick(()=>{
+        //console.log("表单加载")
+        formShow.value = true
+    })
+}
 </script>
 
 <template>
     <el-dialog
         :model-value="props.isShow"
         :close-on-click-modal="false"
+        :modal-append-to-body="false"
         width="886px"
+        @opened="DiaOpened"
         @close="emit('closeDia')"
         center>
         <template #header style="display:flex;align-items:center;">
             <img :src="type==='add'?$icon.add:$icon.edit"
                 style="color:#fff;width:16px;height:16px;margin-right:5px;">
-            <span style="font-size:16px;">{{props.type==='add'?'添加用户':'编辑用户'}}</span>
+            <span style="font-size:16px;">{{type==='add'?'添加用户':'编辑用户'}}</span>
         </template>
-        <div class="form-content">
-            <el-form label-width="100px" class="user-form"
+        <div class="form-content" v-loading="!formShow">
+            <el-form label-width="100px" class="user-form" v-if="formShow"
                 :hide-required-asterisk="true"
                 ref="formRef"
                 :model="userForm"
                 :rules="formRules" 
             >
                 <el-form-item label="登录账号" prop="account">
-                    <el-input v-model="userForm.account" placeholder="建议使用邮箱前缀或者手机号码" clearable>
-                    </el-input>
+                    <el-input v-model="userForm.account" placeholder="建议使用邮箱前缀或者手机号码" clearable />
                 </el-form-item>
-                <el-form-item label="登录密码" prop="pwd" v-if="props.type==='add'">
-                    <el-input v-model.trim="userForm.pwd" placeholder="6-12位数字与字母的组合" 
-                        :type="props.type==='add' ? 'text' : 'password' " clearable></el-input>
+                <el-form-item label="登录密码" prop="pwd" v-if="type==='add'">
+                    <el-input v-model.trim="userForm.pwd" placeholder="6-12位数字与字母的组合" type="password" clearable />
                 </el-form-item>
                 <el-form-item label="姓名" prop="name">
-                    <el-input v-model="userForm.name" placeholder="请输入用户名称"  clearable>
-                    </el-input>
+                    <el-input v-model="userForm.name" placeholder="请输入用户名称"  clearable />
                 </el-form-item>
                 <el-form-item label="手机号码" prop="mobile" class="mobile-input-item">
-                    <el-input v-model.trim="userForm.mobile" placeholder="请输入手机号码" clearable class="mobile-input">
-                    </el-input>
+                    <el-input v-model.trim="userForm.mobile" placeholder="请输入手机号码" clearable class="mobile-input" />
                     <el-select v-model="userForm.areacode" class="mobile-select" placeholder="请选择">
                         <el-option v-for="item in areaCode" :key="item.Value"
                             :label="item.Name" :value="item.Value" />
                     </el-select>
                 </el-form-item>
-                <el-form-item label="所属部门" prop="depart" v-if="props.type==='add'">
+                <el-form-item label="所属部门" prop="depart" v-if="type==='add'">
                     <el-cascader :options="departArr" 
                         :props="{
                             value:'DepartmentId',
@@ -237,10 +257,10 @@ function getResearchGroupByKeyword(GroupId,keyWord = "research_group_id"){
                     </el-cascader>
                 </el-form-item>
                 <el-form-item label="邮箱" prop="email">
-                    <el-input v-model="userForm.email" placeholder="请输入邮箱"></el-input>
+                    <el-input v-model="userForm.email" placeholder="请输入邮箱" />
                 </el-form-item>
                 <el-form-item label="工号" prop="employeeNumber">
-                    <el-input :disabled="hasEmployeeNo" v-model="userForm.employeeNumber" placeholder="请输入工号"></el-input>
+                    <el-input :disabled="hasEmployeeNo" v-model="userForm.employeeNumber" placeholder="请输入工号" />
                 </el-form-item>
                 <el-form-item label="分配角色" prop="role">
                     <el-select v-model="userForm.role" placeholder="分配角色" @change="roleChange">
@@ -261,8 +281,7 @@ function getResearchGroupByKeyword(GroupId,keyWord = "research_group_id"){
                         clearable></el-cascader>
                 </el-form-item>
                 <el-form-item label="职务" prop="post">
-                    <el-input v-model="userForm.post" placeholder="请输入职务" clearable>
-                    </el-input>
+                    <el-input v-model="userForm.post" placeholder="请输入职务" clearable />
                 </el-form-item>
                 <el-form-item label="工作地点" prop="city"
                     :rules="[2,6,18].includes(userForm.role)?{ required: true, message: '工作地点不能为空', trigger: 'change' }:{}">
@@ -279,16 +298,20 @@ function getResearchGroupByKeyword(GroupId,keyWord = "research_group_id"){
                 </el-form-item>
             </el-form>
         </div>
-        <div class="btn-content">
-            <el-button type="primary" style="width:80px;margin-right:24px;" @click="handleSubmitForm">保存</el-button>
-            <el-button style="width:80px;" @click="emit('closeDia')">取消</el-button>
-        </div>
+        <template #footer>
+            <div class="btn-content">
+                <el-button type="primary" style="width:80px;margin-right:24px;" @click="handleSubmitForm">保存</el-button>
+                <el-button style="width:80px;" @click="emit('closeDia')">取消</el-button>
+            </div>
+        </template>
     </el-dialog>
+
 </template>
 
 <style scoped lang="scss">
 .el-dialog{
     .form-content{
+        min-height: 200px;
         .user-form{
             display: flex;
             flex-wrap: wrap;

src/views/system_manage/depart_manage/departManage.vue

@@ -23,6 +23,7 @@ const {
         openResetPassDialog,openMoveDepartDialog,
         getResearchGroup,researchGroup,
         isModifyUserShow,modifyUserType,userInfo,openUserDialog,
+        modifyUser,delUser
     } = useDepartTable()
 
 const defaultProp = {label:'DepartmentName',children:'Child'}
@@ -231,7 +232,7 @@ getRoles()
         :areaCode="areaCode"
         :departArr="departArr"
         :roleArr="roleArr"
-        @save="isModifyUserShow = false"
+        @submitForm="modifyUser"
         @closeDia="isModifyUserShow = false"
     />
 </template>

src/views/system_manage/depart_manage/hooks/use-depart.js

@@ -1,6 +1,8 @@
 //部门管理 hook
 import { ref, reactive } from 'vue'
+import http from '@/api/http'
 import { departInterence } from '@/api/api.js';
+import { ElMessage, ElMessageBox } from 'element-plus'
 
 export function useDepart(){
     //选择的部门
@@ -62,6 +64,7 @@ export function useDepart(){
             }
         })
     }
+
     //用户表格事件
     function useDepartTable(){
         let isShowUserdtl = ref(false)
@@ -80,9 +83,72 @@ export function useDepart(){
         //打开移动分组弹窗
         function openMoveDepartDialog(){}
         //添加编辑用户
-        function modifyUser(){}
+        function modifyUser(data){
+            const {type,userForm} = data
+            const {direct} = userForm
+            const ResearchGroupIds = direct.length?direct.map(i=>i[i.length-1]):[]
+            //将userForm转为接口的形式
+            const params = {
+                AdminName: userForm.account,
+                Password: new http.Base64().encode(userForm.pwd),
+                EmployeeId:userForm.employeeNumber.replaceAll(' ',''),
+                Authority: userForm.auth,
+                DepartmentId: Number(userForm.depart[0]),
+                GroupId:userForm.depart[1] ? Number(userForm.depart[1]) : 0,
+                TeamId:userForm.depart[2] ? Number(userForm.depart[2]) : 0,
+                Mobile: userForm.mobile,
+                Position: userForm.post,
+                RealName: userForm.name,
+                RoleId: Number(userForm.role),
+                Enabled:Number(userForm.status),
+                ResearchGroupIds:ResearchGroupIds.join(','),
+                Province:userForm.province,
+                City:userForm.city,
+                Email:userForm.email,
+                TelAreaCode:userForm.areacode,
+            }
+            if(type==='edit'){
+                params.AdminId = Number(userForm.admin_id)
+            }
+            const map = {
+                'add':addUser,
+                'edit':editUser
+            }
+            map[type]&&map[type](params)
+        }
+        function addUser(params){
+            departInterence.addUser(params).then(res => {
+                if(res.Ret === 200) {
+                    ElMessage.success('添加成功');
+                    getTableUser()
+                    isModifyUserShow.value = false
+                }
+            })
+        }
+        function editUser(params){
+            departInterence.editUser(params).then(res => {
+                if(res.Ret === 200) {
+                    ElMessage.success('编辑成功');
+                    getTableUser()
+                    isModifyUserShow.value = false
+                }
+            })
+        }
         //删除用户,前端按钮因产品要求隐藏,函数保留
-        function delUser(){}
+        function delUser(data){
+            ElMessageBox.confirm(`是否确认删除用户【${data.AdminName}】`,'提示',{
+                type:'warning'
+            }).then(() => {
+                departInterence.delUser({
+                    AdminId:data.AdminId
+                }).then(res => {
+                    if(res.Ret === 200) {
+                        ElMessage.success('删除成功')
+                        getTableUser()
+                    }
+                })
+            }).catch(() => {});
+        }
         //重置用户密码
         function resetUserPassWord(){}
         //移动用户分组