From f1f40e9a28fafab5d884630b8900b11060ebe9fc Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期二, 31 十月 2023 08:53:35 +0800 Subject: [PATCH] 修改 --- src/views/system/user/component/userDialog.vue | 184 +++++++++++++++++++++++++++++++++++++++++++-- 1 files changed, 173 insertions(+), 11 deletions(-) diff --git a/src/views/system/user/component/userDialog.vue b/src/views/system/user/component/userDialog.vue index f3a0d93..12f8b32 100644 --- a/src/views/system/user/component/userDialog.vue +++ b/src/views/system/user/component/userDialog.vue @@ -36,6 +36,21 @@ <el-input v-model.trim="userForm.phone" placeholder="手机号" clearable></el-input> </el-form-item> </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="是否专家" prop="identityStatus"> + <el-radio-group v-model="userForm.identityStatus"> + <el-radio :label="0">是</el-radio> + <el-radio :label="1">否</el-radio> + </el-radio-group> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="userForm.identityStatus == 0"> + <el-form-item label="专家类型" prop="identityIds"> + <el-select v-model="userForm.identityIds" placeholder="专家类型" clearable class="w100" multiple> + <el-option v-for="item in expData" :key="item.id" :label="item.identity" :value="item.id"> </el-option> + </el-select> + </el-form-item> + </el-col> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-form-item label="证件类型" prop="idType"> <el-select v-model="userForm.idType" placeholder="证件类型" clearable class="w100"> @@ -48,6 +63,16 @@ <el-input v-model.trim="userForm.idSerial" placeholder="证件号码" clearable></el-input> </el-form-item> </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="userForm.identityStatus == 0"> + <el-form-item label="资质证书" prop=""> + <el-upload accept="image/*" :action="uploadUrl" :headers="header" method="post" :data="{module: 'accountPath'}" :on-success="handleAvatarSuccess" :on-exceed="showTip" :on-preview="handlePictureCardPreview" :limit='imgLimit' v-model:file-list="fileList" list-type="picture-card" :before-upload="picSize" :on-remove="handleRemove" :before-remove="beforeRemove"> + <el-icon><Plus /></el-icon> + <template #tip> + <div class="el-upload__tip">上传jpg/png图片尺寸小于5M,最多可上传1张</div> + </template> + </el-upload> + </el-form-item> + </el-col> </el-row> </el-form> <template #footer> @@ -57,6 +82,9 @@ </span> </template> </el-dialog> + <el-dialog v-model="dialogVisible"> + <el-image style="width: 100%; height: 100%" :src="dialogImageUrl"/> + </el-dialog> </div> </template> @@ -65,7 +93,13 @@ import { ElMessageBox, ElMessage } from 'element-plus'; import { userApi } from '/@/api/systemManage/user'; import {checkChineseName, verifyFullName, verifyIdCard, verifyPhone} from "/@/utils/toolsValidate"; - +import axios from 'axios'; +import Cookies from "js-cookie"; +import {useUserInfo} from "/@/stores/userInfo"; +import {storeToRefs} from "pinia"; +const userInfo = useUserInfo(); +const { userInfos } = storeToRefs(userInfo); +import type { UploadProps } from 'element-plus' // 定义接口来定义对象的类型 interface DeptData {} interface roleData {} @@ -78,16 +112,28 @@ roleIds: Array<any> depId: number | null; phone: string; + identityStatus:number|null; + identityIds: Array<any> pwd: string; idType: number | null; idSerial: string; + qualificationAttId: number | null; }; - userFormRules:{ - - }, + userFormRules:{}, departmentData: Array<DeptData>; roleData: Array<roleData>; + expData: Array<roleData>; isAdd:boolean + dialogVisible: Boolean, + dialogImageUrl: string | null, + fileList: Array<file>, + imgLimit: number, + uploadUrl: string, + isOverSize: boolean, + header:{} +} +interface file { + url: string; } export default defineComponent({ @@ -104,8 +150,11 @@ roleIds: [], // 关联角色 depId: null, // 部门 phone: '', // 手机号 + identityStatus: null, + identityIds: [], idType: 1, idSerial: '', + qualificationAttId: null }, userFormRules:{ name: [{ required: true, message: '请填写用户名', trigger: 'blur' }], @@ -113,19 +162,32 @@ roleIds: [{ required: true, message: '请选择用户角色', trigger: 'change' }], depId: [{ required: true, message: '请选择部门', trigger: 'change' }], phone: [{ required: true, message: '请填写手机号', trigger: 'blur' }], + identityStatus: [{ required: true, message: '请选择是否为专家', trigger: 'change' }], + identityIds: [{ required: true, message: '请选择专家类型', trigger: 'change' }], idType: [{ required: true, message: '请选择证件类型', trigger: 'blur' }], - idSerial: [{ required: true, message: '请填写证件号码', trigger: 'blur' }], pwd: [{ required: true, message: '请输入账户密码', trigger: 'blur' }], }, departmentData: [], // 部门数据 roleData: [], //角色数据 - isAdd: true + expData: [], + isAdd: true, + dialogImageUrl: null, + dialogVisible: false, + fileList: [], + imgLimit: 1, + uploadUrl: import.meta.env.VITE_API_URL + '/attachment/upload/detail', + isOverSize: false, + header: { + uid: Number(userInfos.value.uid), + tk: Cookies.get('token') + } }); // 打开弹窗 - const openDialog = (type: string, value: any, departmentList: [], roleList: []) => { + const openDialog = (type: string, value: any, departmentList: [], roleList: [],expList: []) => { state.isShowUserDialog = true; state.departmentData = departmentList; state.roleData = roleList; + state.expData = expList if (type === '新增') { state.title = '新增用户'; state.isAdd = true @@ -135,15 +197,19 @@ roleIds: [], depId: null, phone: '', + identityStatus: null, + identityIds: [], idType: 1, idSerial: '', - pwd: '' + pwd: '', + qualificationAttId: null }; } else { state.title = '修改用户'; state.isAdd = false state.userForm = JSON.parse(JSON.stringify(value)); state.userForm.roleIds = JSON.parse(JSON.stringify(value)).roles.map(i=>i.roleId) + state.userForm.identityIds = JSON.parse(JSON.stringify(value)).userIdentities.map(i=>i.userIdentityId) } }; @@ -167,13 +233,17 @@ }); return } - if(verifyIdCard(state.userForm.idSerial) == false){ + if(state.userForm.idSerial!=='' && verifyIdCard(state.userForm.idSerial) == false){ ElMessage({ type: 'warning', message: '请输入正确的证件号码', duration: 2000 }); return + } + if(state.userForm.identityStatus == 1){ + state.userForm.identityIds = [] + state.userForm.qualificationAttId = null } if (state.title === '新增用户') { let res = await userApi().addUser(state.userForm); @@ -192,8 +262,8 @@ }); } } else { - const {name, realName, roleIds, depId, phone, idType, idSerial,id } = state.userForm - const data = {name, realName, roleIds, depId, phone, idType, idSerial,id} + const {name, realName, roleIds, depId, phone, idType, idSerial, id, identityStatus, identityIds, qualificationAttId} = state.userForm + const data = {name, realName, roleIds, depId, phone, idType, idSerial,id, identityStatus, identityIds, qualificationAttId} let res = await userApi().modUser(data); if (res.data.code === 100) { ElMessage({ @@ -220,6 +290,93 @@ }; + // 图片上传 + const showTip =()=>{ + ElMessage({ + type: 'warning', + message: '超出文件上传数量' + }); + } + + const picSize = async (rawFile: any) => { + if(rawFile.size / 1024 / 1024 > 5){ + ElMessage({ + type: 'warning', + message: '文件大小不能超过5M。' + }); + return false + } + }; + + const handlePictureCardPreview = (uploadFile: { url: string }) => { + state.dialogImageUrl = uploadFile.url!; + state.dialogVisible = true; + }; + + const upload = async (params: any) => { + // const formData = new FormData(); + // formData.append('file', state.fileList[0].raw); + let reader = new FileReader(); + reader.readAsArrayBuffer(params.file); + + reader.onload = async () => { + axios.post(state.uploadUrl, reader.result, { + headers: { uid: Number(userInfos.value.uid),tk: Cookies.get('token') } + }).then(res => { + if(res.data.code === 100){ + console.log(res.data.data) + } + }); + }; + }; + + const handleAvatarSuccess: UploadProps['onSuccess'] = ( + res, + uploadFile + ) => { + if(res.code == 100){ + state.userForm.qualificationAttId = res.data.id + } + } + + // const beforeRemove = (file: {}, fileList: []) => { + // const result = new Promise((resolve, reject) => { + // if(!state.isOverSize){ + // ElMessageBox.confirm('此操作将删除该图片, 是否继续?', '提示', { + // confirmButtonText: '确定', + // cancelButtonText: '取消', + // type: 'warning' + // }) + // .then(() => { + // // console.log(state.workDetail.gbPath,'path') + // const list = JSON.parse(JSON.stringify(state.form.workDetail.gbPath)) + // fileList.map((item,index)=>{ + // if(item.uid === file.uid){ + // fileList.splice(index,1) + // state.form.workDetail.gbPath.splice(index,1) + // // 请求删除接口 + // deletePic(false,list[index]) + // } + // }) + // }) + // .catch(() => { + // reject(false); + // }); + // }else{ + // const list = JSON.parse(JSON.stringify(state.form.workDetail.gbPath)) + // fileList.map((item,index)=>{ + // if(item.uid === file.uid){ + // fileList.splice(index,1) + // state.form.workDetail.gbPath.splice(index,1) + // deletePic(true,list[index]) + // } + // }) + // state.isOverSize = false + // } + // }); + // return result; + // }; + // 页面加载时 onMounted(() => { @@ -227,6 +384,11 @@ return { userRef, openDialog, + picSize, + showTip, + handlePictureCardPreview, + upload, + handleAvatarSuccess, onSubmit, ...toRefs(state) }; -- Gitblit v1.9.2