From 4f6cdee3d3a9967b6955aacc354bf557430c0643 Mon Sep 17 00:00:00 2001 From: zhouwx <1175765986@qq.com> Date: 星期一, 05 八月 2024 17:05:16 +0800 Subject: [PATCH] 批改 --- src/views/onlineEducation/systemManage/user/components/userDialog.vue | 343 +++++++++++++++++++++++++++++++++++++++++--------------- 1 files changed, 251 insertions(+), 92 deletions(-) diff --git a/src/views/onlineEducation/systemManage/user/components/userDialog.vue b/src/views/onlineEducation/systemManage/user/components/userDialog.vue index 71dd1e2..3337214 100644 --- a/src/views/onlineEducation/systemManage/user/components/userDialog.vue +++ b/src/views/onlineEducation/systemManage/user/components/userDialog.vue @@ -5,6 +5,8 @@ :title="state.title" width="700px" :before-close="handleClose" + :close-on-press-escape="false" + :close-on-click-modal="false" > <el-form :model="state.form" size="default" ref="superRef" :rules="state.formRules" label-width="150px" > <el-form-item label="用户名:" prop="username" v-if="state.title !== '修改密码'"> @@ -28,47 +30,82 @@ <el-form-item label="手机号:" prop="phone" v-if="state.title !== '修改密码'" > <el-input v-model.trim="state.form.phone" :maxlength="11" :disabled="disabled" placeholder="请输入手机号"></el-input> </el-form-item> - <el-form-item label="用户类型:" v-if="state.title !== '修改密码'"> - <el-radio-group v-model="state.form.userType" :disabled="disabled" @change="changeType"> - <el-radio :label="0" v-if="state.isAdmin">管理员</el-radio> - <el-radio :label="1">企业级</el-radio> - <el-radio :label="2">部门级</el-radio> - <el-radio :label="3">车间(岗位)级</el-radio> - <el-radio :label="4">其他</el-radio> + <el-form-item label="用户类型:" v-if="state.title !== '修改密码'" prop="userType"> + <el-radio-group v-model="state.form.userType" :disabled="disabled" @change="changeType" v-if="state.title == '新增'"> + <el-radio :label="0" v-if="state.currentUserType == 0">管理员</el-radio> + <el-radio :label="1" v-if="state.currentUserType == 0 ">企业级</el-radio> + <el-radio :label="2" v-if="state.currentUserType == 1 ">部门级</el-radio> + <el-radio :label="3" v-if="!state.isAdmin">车间(岗位)级</el-radio> + <el-radio :label="4" v-if="state.currentUserType == 0">其他</el-radio> </el-radio-group> + <span v-else-if="state.title == '查看'">{{state.currentUserType === 0 ? '管理员' : state.currentUserType === 1 ? '企业级' : state.currentUserType === 2 ? '部门级' : state.currentUserType === 3 ? '车间级' :'其他'}}</span> + <span v-else-if="state.title == '编辑'">{{state.form.userType === 0 ? '管理员' : state.form.userType === 1 ? '企业级' : state.form.userType === 2 ? '部门级' : state.form.userType === 3 ? '车间级' :'其他'}}</span> + <!-- <el-radio-group v-model="state.form.userType" :disabled="disabled" @change="changeType" v-else-if="state.title == '编辑'">--> +<!-- <el-radio :label="0" v-if="state.currentUserType == 0">管理员</el-radio>--> +<!-- <el-radio :label="1" >企业级</el-radio>--> +<!-- <el-radio :label="2" >部门级</el-radio>--> +<!-- <el-radio :label="3" >车间(岗位)级</el-radio>--> +<!-- <el-radio :label="4" >其他</el-radio>--> +<!-- </el-radio-group>--> </el-form-item> - <el-form-item label="选择所属父级账号:" prop="companyId" v-if="state.title !== '修改密码' && state.form.userType !== 0"> - <el-select - v-if="state.isAdmin" - v-model="state.form.companyName" - @change="selectValue" - style="width: 45%" - v-loadMore="loadMore" - class="m-2" - placeholder="请选择所属企业" - popper-class="more_select_dropdown" - > - <el-option - v-for="item in state.companyList" - :key="item.id" - :label="item.name" - :value="item.name" - /> - </el-select> + <el-form-item label="所属企业:" prop="companyName" v-if="state.title !== '修改密码' && showCompany"> + <el-select + clearable + v-if="state.isAdmin" + v-model="state.form.companyName" + filterable + :disabled="disabled || state.title =='编辑'" + remote + @change="selectValue" + reserve-keyword + placeholder="请输入企业名称" + remote-show-suffix + :remote-method="getCompanyList" + :loading="loading" + style="width: 240px" + > + <el-option + v-for="item in state.companyList" + :key="item.id" + :label="item.name" + :value="item.name" + /> + </el-select> <el-input v-else disabled style="width: 45%" v-model="state.form.companyName"></el-input> - <scorllSelect - ref="scrollRef" - v-if="UisMounted && (state.form.userType === 2 || state.form.userType === 3)" - v-model="state.form.parentName" - @getval = "getSelectUser" - placeholder="请选择" - clearable - style="width: 45%;margin-left: 10px" - filterable - remote - searchKey="name" - :methods="getUser"> - </scorllSelect> +<!-- <el-select--> +<!-- v-if="state.isAdmin"--> +<!-- v-model="state.form.companyName"--> +<!-- @change="selectValue"--> +<!-- style="width: 45%"--> +<!-- v-loadMore="loadMore"--> +<!-- class="m-2"--> +<!-- placeholder="请选择所属企业"--> +<!-- popper-class="more_select_dropdown"--> +<!-- >--> +<!-- <el-option--> +<!-- v-for="item in state.companyList"--> +<!-- :key="item.id"--> +<!-- :label="item.name"--> +<!-- :value="item.name"--> +<!-- />--> +<!-- </el-select>--> + + + </el-form-item> + <el-form-item label="所属上级账号:" prop="companyName" v-if="showChild"> + <scorllSelect + :disabled="disabled || state.title =='编辑'" + ref="scrollRef" + v-model="state.form.parentName" + @getval = "getSelectUser" + placeholder="请选择" + clearable + style="width: 45%;" + filterable + remote + searchKey="username" + :methods="getUser"> + </scorllSelect> </el-form-item> </el-form> <template #footer v-if="state.title !='查看'"> @@ -134,6 +171,38 @@ } } } +const startUsername = ref(''); +const validateUsername = (rule, value, callback)=>{ + if(value === ''){ + callback(new Error('请输入用户名')) + }else if(state.title == '编辑' && value == startUsername.value){ + callback() + }else{ + if(!verifyUsername(value)){ + callback(new Error('用户名须使用字母或数字,长度在5-16之间')) + }else{ + let param = {} + if(state.title=='新增/注册') { + param = { + username:value + } + }else if(state.title=='编辑'){ + param = { + username:value, + id: state.registerForm.id + } + } + callback() + // checkUserName(param).then((res)=>{ + // if(res.data == false){ + // callback(new Error('用户名已被占用,请更换其他用户名')) + // }else{ + // callback() + // } + // }) + } + } +} const state = reactive({ title: '', @@ -144,17 +213,19 @@ password: '', confirmPassword: '', username: '', - userType: 0, + userType: null, sex: 0, companyId: null, parentId: null }, formRules:{ name: [{ required: true, message: '请输入公司、部门或者车间岗位名称', trigger: 'blur' }], - username: [{ required: true, message: '请输入用户名', trigger: 'blur' }], + companyName: [{ required: true, message: '请选择上级企业', trigger: 'blur' }], + username: [{ required: true, trigger: "blur", validator: validateUsername }], password: [{ required: true, validator: validatePwd, trigger: 'blur' }], confirmPassword: [{ required: true, validator: equalToPassword, trigger: 'blur' }], phone: [{ required: true, validator: validateUserPhone, trigger: 'blur' }], + userType: [{ required: true, message: '请选择用户类型', trigger: 'blur' }], }, companyList: [], userList: [ @@ -167,7 +238,8 @@ cloading:false, totlePage: 0, userParam: {}, - isAdmin: false + isAdmin: false, + currentUserType: null }) const UisMounted = ref(false); @@ -175,31 +247,44 @@ UisMounted.value = true; }); - +const showCompany = ref(false) +const showChild = ref(false) const disabled = ref(false); +const userInfo = ref() const openDialog = async (type, value) => { - const userInfo = JSON.parse(Cookies.get('userInfo')) - console.log("userInfo",userInfo) - if(userInfo.userType === 0){ + userInfo.value = JSON.parse(Cookies.get('userInfo')) + console.log("userInfo",userInfo.value) + state.currentUserType = userInfo.value.userType + if(state.currentUserType === 0){ state.isAdmin = true; - state.form.userType = 0; }else { state.isAdmin = false; - state.form.companyId = userInfo.companyId; - state.form.companyName = userInfo.companyName; - state.form.userType = 1; + state.form.companyId = userInfo.value.companyId; + state.form.companyName = userInfo.value.companyName; } - await getCompanyList('open') + if(type !== 'view' && type !== 'pwd'){ + // if(state.isAdmin){ + // await getCompanyList("") + // } + } state.title = type === 'add' ? '新增' : type ==='edit' ? '编辑' : type ==='pwd' ? '修改密码' : '查看' ; if(type === 'edit' || type === 'view') { + startUsername.value = value.username if( type === 'view'){ disabled.value = true; } const res = await getUserById(value.id); if(res.code === 200){ state.form = res.data - if(res.data.userType === 2|| res.data.userType === 3){ + if(res.data.userType === 3){ + showCompany.value = true; + showChild.value = true + }else if(res.data.userType === 2 || res.data.userType === 1 || res.data.userType === 4){ + showCompany.value = true; + showChild.value = false; + } + if(res.data.userType === 3){ if(!res.data.parentId){ state.form.parentId = '' state.form.parentName = '无上级账号' @@ -219,31 +304,62 @@ } const finshed = ref(false) -const getCompanyList = async (type)=>{ - if (type === 'open' && state.pageNum !== 1) { - } else { +const loading = ref(false) + +const getCompanyList = async (val)=>{ + if(val != ""){ + loading.value = true; const queryParams = { - pageNum: state.pageNum, - pageSize: state.pageSize, + name: val } const res = await getCompany(queryParams) if (res.code == 200) { - if (res.data.pageNum === state.pageNum) { - finshed.value = false; - if (state.pageNum == 1) { - state.companyList = res.data.list - } else { - state.companyList = state.companyList.concat(res.data.list) - } - } else { - finshed.value = true; - } + loading.value = false; + state.companyList = res.data.list } else { ElMessage.warning(res.message) } - console.log("state.companyList",state.companyList) + }else { + loading.value = true; + const queryParams = { + pageNum: 1, + pageSize: 10 + } + const res = await getCompany(queryParams) + if (res.code == 200) { + loading.value = false; + state.companyList = res.data.list + + } else { + ElMessage.warning(res.message) + } } + + // if (type === 'open' && state.pageNum !== 1) { + // } else { + // const queryParams = { + // pageNum: state.pageNum, + // pageSize: state.pageSize, + // } + // const res = await getCompany(queryParams) + // if (res.code == 200) { + // if (res.data.pageNum === state.pageNum) { + // finshed.value = false; + // if (state.pageNum == 1) { + // state.companyList = res.data.list + // } else { + // state.companyList = state.companyList.concat(res.data.list) + // } + // } else { + // finshed.value = true; + // } + // + // } else { + // ElMessage.warning(res.message) + // } + // console.log("state.companyList",state.companyList) + // } } const onSubmit = async () => { const valid = await superRef.value.validate(); @@ -297,20 +413,68 @@ } scrollRef.value.getList(param,'change'); } -const changeType = () => { - if(state.isAdmin){ - state.form.companyId = null; - state.form.companyName = ''; +const changeType = async (val) => { + state.companyList = []; + if(state.isAdmin && val !=0){ + await getCompanyList("") } state.form.parentId = null; state.form.parentName = ''; - if(state.form.userType === 2 || state.form.userType === 3 ){ + state.form.companyId = null; + state.form.companyName = ''; + //当前是管理员级用户 + if(state.currentUserType === 0){ + if(state.form.userType === 0){ + showCompany.value = false; + showChild.value = false; + }else { + showCompany.value = true; + showChild.value = false; + } + } + //当前是企业级/其他用户选择部门 + if((state.currentUserType === 1 && state.form.userType === 2) || (state.currentUserType === 4 && state.form.userType === 2)){ + state.form.parentId = userInfo.value.id; + state.form.companyName = userInfo.value.companyName + state.form.companyId = userInfo.value.companyId; + showChild.value = false; + showCompany.value = true; + + } //当前是企业级/其他用户选择车间 + else if((state.currentUserType === 1 && state.form.userType === 3) || (state.currentUserType === 4 && state.form.userType === 3)){ + state.form.companyName = userInfo.value.companyName + state.form.companyId = userInfo.value.companyId; + showCompany.value = true; + showChild.value = true; const param = { - userType: state.form.userType-1, + userType: 2, companyId: state.form.companyId, } - scrollRef.value.getList(param,'change'); + nextTick(() => { + scrollRef.value.getList(param,'change'); + }) } + //当前是部门级选择车间 + if((state.currentUserType === 2 && state.form.userType === 3)){ + state.form.parentId = userInfo.value.id; + state.form.companyName = userInfo.value.companyName + state.form.companyId = userInfo.value.companyId; + showCompany.value = true; + showChild.value = false; + } + // if(state.isAdmin){ + // state.form.companyId = null; + // state.form.companyName = ''; + // } + // state.form.parentId = null; + // state.form.parentName = ''; + // if(state.form.userType === 2 || state.form.userType === 3 ){ + // const param = { + // userType: state.form.userType-1, + // companyId: state.form.companyId, + // } + // scrollRef.value.getList(param,'change'); + // } } const handleClose = () => { @@ -321,11 +485,13 @@ password: '', confirmPassword: '', username: '', - userType: 0, + userType: null, sex: 0, companyId: null, parentId: null } + showCompany.value = false; + showChild.value = false; state.userList = []; state.companyList = []; state.pageNum = 1; @@ -334,16 +500,16 @@ superRef.value.resetFields() dialogVisible.value = false; } -//触底函数 -const loadMore = () => { - console.log(' 触底了'); - // 防抖处理 - setTimeout(() => { - if (finshed.value) return //值为true,则代表没有数据了 - state.pageNum += 1 - getCompanyList('') - }, 500) -} +// //触底函数 +// const loadMore = () => { +// console.log(' 触底了'); +// // 防抖处理 +// setTimeout(() => { +// if (finshed.value) return //值为true,则代表没有数据了 +// state.pageNum += 1 +// getCompanyList('') +// }, 500) +// } const selectValue = (val) => { state.form.parentId = null; @@ -351,13 +517,6 @@ state.companyList.forEach(item => { if(item.name === val){ state.form.companyId = item.id - if(state.form.userType === 2 || state.form.userType === 3 ){ - const param = { - userType: state.form.userType-1, - companyId: state.form.companyId, - } - scrollRef.value.getList(param,'change'); - } } }) } -- Gitblit v1.9.2