批改

zhouwx

2024-08-05 4f6cdee3d3a9967b6955aacc354bf557430c0643

 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
});