zhouwx
2024-07-16 7ff622307191ded044715b19ea32e2b88a057554
src/views/onlineEducation/systemManage/user/components/userDialog.vue
@@ -31,30 +31,50 @@
        <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-radio :label="1" v-if="state.isAdmin">企业级</el-radio>
            <el-radio :label="2" v-if="!state.isAdmin">部门级</el-radio>
            <el-radio :label="3" v-if="!state.isAdmin">车间(岗位)级</el-radio>
            <el-radio :label="4" v-if="state.isAdmin">其他</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 !== '修改密码' && state.form.userType !== 0">
          <el-select
              v-if="state.isAdmin"
              v-model="state.form.companyName"
              filterable
              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-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-input v-else disabled style="width: 45%" v-model="state.form.companyName"></el-input>
            <scorllSelect
                :disabled="disabled"
@@ -135,6 +155,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: '',
@@ -152,7 +204,8 @@
  },
  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' }],
@@ -192,10 +245,13 @@
  }
  if(type !== 'view' && type !== 'pwd'){
    await getCompanyList('open')
    if(state.isAdmin){
      // await getCompanyList('open')
    }
  }
  state.title = type === 'add' ? '新增' : type ==='edit' ? '编辑' : type ==='pwd' ? '修改密码' : '查看' ;
  if(type === 'edit' || type === 'view') {
    startUsername.value = value.username
    if( type === 'view'){
      disabled.value = true;
    }
@@ -222,31 +278,47 @@
}
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)
  }
  // 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();
@@ -301,6 +373,7 @@
  scrollRef.value.getList(param,'change');
}
const changeType = () => {
  state.companyList = [];
  if(state.isAdmin){
    state.form.companyId = null;
    state.form.companyName = '';
@@ -337,16 +410,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;