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 | 435 +++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 335 insertions(+), 100 deletions(-)
diff --git a/src/views/onlineEducation/systemManage/user/components/userDialog.vue b/src/views/onlineEducation/systemManage/user/components/userDialog.vue
index 2c8a5a8..3337214 100644
--- a/src/views/onlineEducation/systemManage/user/components/userDialog.vue
+++ b/src/views/onlineEducation/systemManage/user/components/userDialog.vue
@@ -5,13 +5,21 @@
: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 !== '修改密码'">
<el-input v-model.trim="state.form.username" :disabled="state.title =='编辑' || state.title =='查看'" placeholder="请输入用户名" ></el-input>
</el-form-item>
<el-form-item label="名称:" prop="name" v-if="state.title !== '修改密码'">
- <el-input v-model.trim="state.form.name" :disabled="state.title =='编辑' || state.title =='查看'" placeholder="请输入公司、部门或者车间岗位名"></el-input>
+ <el-input v-model.trim="state.form.name" :disabled="disabled" placeholder="请输入公司、部门或者车间岗位名"></el-input>
+ </el-form-item>
+ <el-form-item label="性别:" prop="sex" v-if="state.title !== '修改密码'">
+ <el-radio-group v-model="state.form.sex" :disabled="disabled">
+ <el-radio :label="0">男</el-radio>
+ <el-radio :label="1">女</el-radio>
+ </el-radio-group>
</el-form-item>
<el-form-item label="密码:" prop="password" v-if="state.title == '新增' || state.title == '修改密码'">
<el-input v-model.trim="state.form.password" type="password" show-password placeholder="请输入密码"></el-input>
@@ -22,24 +30,39 @@
<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">
- <el-radio :label="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-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 !== '修改密码'">
+ <el-form-item label="所属企业:" prop="companyName" v-if="state.title !== '修改密码' && showCompany">
<el-select
- v-model="state.form.companyName"
- @change="selectValue"
- style="width: 45%"
- v-loadMore="loadMore"
- class="m-2"
- placeholder="请选择所属企业"
- popper-class="more_select_dropdown"
+ 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"
@@ -48,22 +71,41 @@
:value="item.name"
/>
</el-select>
- <el-select
- v-if="state.form.userType === 2 || state.form.userType === 3 "
- v-model="state.form.userName"
- @change="selectValueUser"
- style="width: 45%;margin-left: 10px"
- class="m-2"
- placeholder="请选择所属上级账号"
- popper-class="more_select_dropdown"
- >
- <el-option
- v-for="item in state.userList"
- :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>
+<!-- <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 !='查看'">
@@ -76,22 +118,27 @@
</div>
</template>
<script setup>
-import {reactive, ref, toRefs, defineEmits, nextTick} from 'vue'
+import {reactive, ref, toRefs, defineEmits, nextTick, onMounted} from 'vue'
import { View } from "@element-plus/icons-vue";
+import scorllSelect from '@/components/scrollSelect/index.vue'
import {ElMessage} from "element-plus";
import {verifyPhone, verifyPwd, verifyUsername} from "../../../../../utils/validate";
import { checkUserName, checkPhone } from "@/api/login"
-import {getUserById} from "@/api/onlineEducation/user"
+import {addUser, editUser, getUserById, resetPwd} from "@/api/onlineEducation/user"
import {Base64} from "js-base64"
import {resetUserPwd} from "../../../../../api/sysUsers";
import {getInstitutionDetail} from "@/api/backManage/insitution";
import {getCompany} from "@/api/onlineEducation/company";
import {get} from "@vueuse/core";
-import {getUser} from "@/api/system/user";
+import {getUser} from "@/api/onlineEducation/user";
+import {debounce} from "@/utils";
+import Cookies from "js-cookie";
const emit = defineEmits(["getList"]);
const dialogVisible = ref(false)
const superRef = ref(null)
+const scrollRef = ref(null)
+
const equalToPassword = (rule, value, callback) => {
if (state.form.password !== value) {
@@ -124,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: '',
@@ -134,96 +213,169 @@
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: [],
+ userList: [
+
+ ],
+ keyword:'',
+
pageNum: 1,
- pageSize: 10
+ pageSize: 10,
+ cloading:false,
+ totlePage: 0,
+ userParam: {},
+ isAdmin: false,
+ currentUserType: null
})
+const UisMounted = ref(false);
+onMounted(() => {
+ UisMounted.value = true;
+});
+const showCompany = ref(false)
+const showChild = ref(false)
const disabled = ref(false);
+const userInfo = ref()
const openDialog = async (type, value) => {
- await getCompanyList('open')
- await getUserList()
+ userInfo.value = JSON.parse(Cookies.get('userInfo'))
+ console.log("userInfo",userInfo.value)
+ state.currentUserType = userInfo.value.userType
+ if(state.currentUserType === 0){
+ state.isAdmin = true;
+ }else {
+ state.isAdmin = false;
+ state.form.companyId = userInfo.value.companyId;
+ state.form.companyName = userInfo.value.companyName;
+ }
+
+ 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 === 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 = '无上级账号'
+ }
+ }
}
}
if(type == 'pwd'){
state.form.id = value.id
}
dialogVisible.value = true
+ if(type === 'edit' && state.form && (state.form.userType === 2||state.form.userType === 3)){
+ await nextTick(() => {
+ doGetUser()
+ })
+ }
}
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)
- }
-}
-const getUserList = async () => {
- const queryParams = {
- userType: state.form.userType
- }
- const res = await getUser(queryParams)
- if (res.code == 200) {
- debugger
- } else {
- ElMessage.warning(res.message)
- }
-}
+ }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();
if(valid){
+ if((state.form.userType ===1 && state.form.companyId ===null) || ((state.form.userType ===2 ||state.form.userType ===3) && (state.form.parentId ===null ||state.form.companyId===null))){
+ ElMessage.warning('请选择所属父级账号')
+ return;
+ }
if(state.title == '新增'){
const {confirmPassword,id,...data} = state.form
data.password = Base64.encode(data.password)
- const res = await addMonitor(data)
+ const res = await addUser(data)
if(res.code == 200){
ElMessage.success(res.message)
emit('getList')
- state.form.userType = 0
- superRef.value.clearValidate();
- superRef.value.resetFields();
+ handleClose()
dialogVisible.value = false;
}else{
ElMessage.warning(res.message)
@@ -231,14 +383,11 @@
}else if(state.title == '编辑'){
const {confirmPassword,...data} = state.form
data.password = Base64.encode(data.password)
- const res = await editMonitor(data)
+ const res = await editUser(data)
if(res.code == 200){
ElMessage.success(res.message)
emit('getList')
- state.form.userType = 0
- superRef.value.clearValidate();
- superRef.value.resetFields();
- dialogVisible.value = false;
+ handleClose()
}else{
ElMessage.warning(res.message)
}
@@ -246,54 +395,140 @@
const {id,password} = state.form
const data = {id,password}
data.password = Base64.encode(data.password)
- const res = await resetUserPwd(data)
+ const res = await resetPwd(data)
if(res.code == 200){
ElMessage.success(res.message)
emit('getList')
- superRef.value.clearValidate();
- superRef.value.resetFields();
- dialogVisible.value = false;
+ handleClose()
}else{
ElMessage.warning(res.message)
}
}
}
}
+const doGetUser = () => {
+ const param = {
+ userType: state.form.userType-1,
+ companyId: state.form.companyId,
+ }
+ scrollRef.value.getList(param,'change');
+}
+const changeType = async (val) => {
+ state.companyList = [];
+ if(state.isAdmin && val !=0){
+ await getCompanyList("")
+ }
+ state.form.parentId = null;
+ state.form.parentName = '';
+ 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: 2,
+ companyId: state.form.companyId,
+ }
+ 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 = () => {
- state.form.userType = 0
+ state.form = {
+ id: null,
+ name: '',
+ phone: '',
+ password: '',
+ confirmPassword: '',
+ username: '',
+ userType: null,
+ sex: 0,
+ companyId: null,
+ parentId: null
+ }
+ showCompany.value = false;
+ showChild.value = false;
+ state.userList = [];
+ state.companyList = [];
+ state.pageNum = 1;
+ state.pageSize = 10;
superRef.value.clearValidate();
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;
+ state.form.parentName = null;
state.companyList.forEach(item => {
if(item.name === val){
state.form.companyId = item.id
}
})
}
-const selectValueUser = (val) => {
- state.userList.forEach(item => {
- if(item.name === val){
- state.form.parentId = item.id
- }
- })
+const getSelectUser = (val) => {
+ console.log("valllllllll",val)
+ state.form.parentId = val;
}
+
defineExpose({
openDialog
});
--
Gitblit v1.9.2