增加图片验证码和登录日志 权限管理优化

石广澎

2024-01-02 0cd1631ceaa93e6483908fd692d2cb693b85324b

 admin-web/src/views/systemManger/server/user/edit.vue

@@ -1,5 +1,5 @@
<template>
  <win-sm :title="setting.title" @close="close" :width="'800px'">
  <win-sm :title="setting.title" @close="close" :width="'800px'" :loading="loading">
    <el-alert
      style="margin-bottom: 10px"
      title="温馨提示：用户初始密码为123456"
@@ -13,17 +13,18 @@
      </el-form-item>
      <el-form-item label="部门" prop="sysDeptId">
        <el-select v-model="formData.sysDeptId">
            <el-option v-for="(item,index) in deptmentOptions" :key="index" :label="item.name" :value="item.id"></el-option>
          <el-option v-for="(item,index) in deptmentOptions" :key="index" :label="item.name"
                     :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="人员姓名" prop="userName">
        <el-input v-model="formData.userName" clearable maxlength="20" show-word-limit style="width: 250px"/>
      </el-form-item>
      <el-form-item label="员工编号" prop="userCode">
      <el-form-item label="登录名" prop="userCode">
        <el-input v-model="formData.userCode" clearable maxlength="20" show-word-limit style="width: 250px"/>
      </el-form-item>
      <el-form-item label="手机号" prop="userPhone">
        <el-input  v-model="formData.userPhone" clearable maxlength="20" show-word-limit
        <el-input v-model="formData.userPhone" clearable maxlength="20" show-word-limit
                  style="width: 250px"/>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
@@ -54,7 +55,7 @@
        <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="checkedList" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="(r,i) in roleOptions" :label="r.role_id" :key="r.role_id">{{r.role_name}}</el-checkbox>
          <el-checkbox v-for="(r,i) in roleOptions" :label="r.role_id" :key="r.role_id">{{ r.role_name }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
@@ -74,231 +75,244 @@
import {departmentListAll} from "@/api/system/deptment";

export default {
        components: {winSm, myButton},
        props: {
            // setting 中须至少包含控制dialog显示或隐藏的属性,其余属性可拓展
            // 将添加/修改的大量数据及逻辑从列表页面中分离出来,避免列表页面代码过多,审查困难
            // 若此页面须回传数据至父页面,可在引用组件时添加事件,本页面使用this.$emit('事件名',参数1,参数2...)回传数据
            setting: {
                type: Object,
                default: () => {
                }
            }
        },
        data() {
            return {
                deptmentOptions:[],
                checkAll: false,
                checkedList: [],
                roleList: [
                    {'id': 1, label: '王涵1'},
                    {'id': 2, label: '王涵2'}
                ],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    roleName: undefined,
                    roleKey: undefined,
                    status: undefined,
                    orgId: 1
                },
                roleOptions: [],// 选择项
                roleCheckStrictly: true,
                defaultProps: {
                    children: 'childList',
                    label: 'name',
                },
                formData: {
                    sysDeptId:'',
                    userName: '',
                    userCode: '',
                    userPhone: '',
                    sex: 1,
                    status: 1,
                    remark: '',
                    seq: null,
                },
                rules: {
                    sysDeptId: [
                        {required: true, message: '请选择部门', trigger: 'change'}
                    ],
                    userName: [
                        {required: true, message: '请输入人员姓名', trigger: 'blur'}
                    ],
                    userCode: [
                        {required: true, message: '请输入员工编号', trigger: 'blur'}
                    ],
                    userPhone: [
                        {required: true, message: '请输入手机号', trigger: 'blur'}
                    ],
                    sex: [
                        {required: true, message: '请选择性别', trigger: 'change'}
                    ],
                    seq: [
                        {required: true, message: '请输入顺序号', trigger: 'blur'}
                    ],
                }
            }
        },
        created() {
            this.getInfo()
            this.getAllRole()
            this.getDeptmentOptions()
        },
        methods: {
            // 获取所有角色
            getAllRole() {
              // const user = this.$store.getters.userInfo
              // this.data_scope = 1
              // if (user.lv == 1) {
              //   this.data_scope = 1
              // }
              // if (user.lv == 2) {
              //   this.data_scope = 2
              // }
              // if (user.lv == 3) {
              //   this.data_scope = 3
              // }
              this.data_scope = 1
              role.listRoleByDataScope({dataScope: this.data_scope}).then(response => {
                  if (response) {
                    this.roleOptions = response;
                  } else {
                    this.roleOptions = [];
                  }
                        this.loading = false;
                    }
                );
            },
            getDeptmentOptions(){
                departmentListAll({tenantId:this.setting.tenantId}).then(res=>{
                    this.deptmentOptions = res
                })
            },
            handleCheckAllChange(val) {
                if (val) {
                    this.checkedList = this.roleOptions.map(x => {
                        return x.role_id
                    })
                } else {
                    this.checkedList = []
                }
            },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.roleOptions.length;
            },
            getInfo() {
                this.title = this.setting.title
                if (this.setting.id != null) {
                    // 查询数据
                    user.getUser({id: this.setting.id}).then(res => {
                        const data = res.data
                        this.formData = Object.assign(this.formData, data)
                        if (this.formData.projectStart != null && this.formData.projectStart > 0) {
                            this.formData.projectStart = DateFormatter.LongToDateTime(this.formData.projectStart)
                        }
                        if (this.formData.projectEnd != null && this.formData.projectEnd > 0) {
                            this.formData.projectEnd = DateFormatter.LongToDateTime(this.formData.projectEnd)
                        }
                        this.checkedList = res.list.map(x => {
                            return x.role_id
                        })
                        if (res.list.length == this.roleOptions.length) {
                            this.handleCheckedCitiesChange(res.list)
                        }
                    })
                }
            },
            close() {
                this.formData = {
                    projectName: '',
                    projectSubName: '',
                    projectCode: '',
                    projectContact: '',
                    projectTel: '',
                    projectEmail: '',
                    projectStart: null,
                    projectEnd: null,
                    projectDesc: '',
                    status: 1
                },
                    this.$emit('close')
            },
            save() {

                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        const params = Object.assign({}, this.formData)
                        params.roleList = this.checkedList
                        // 区域id
                        params.tenantId = this.setting.tenantId
                        params.tenantCode = this.setting.tenantCode
                        if (params.ctiStatus == 0) {
                            params.agentJid = ''
                            params.workgroupJid = ''
                            params.clientNumber = ''
                            params.clientPwd = ''
                        }
                        if (params.projectStart != null && params.projectEnd != null) {
                            params.projectStart = DateFormatter.DateToLong(params.projectStart)
                            params.projectEnd = DateFormatter.DateToLong(params.projectEnd)
                            if (params.projectStart >= params.projectEnd) {
                                this.$message.error('服务结束时间不能小于或者等于服务开始时间')
                                return
                            }
                        }
                        if ((params.projectStart == null && params.projectEnd != null) || (params.projectStart != null && params.projectEnd == null)) {
                            this.$message.error('服务开始时间和服务结束时间必须成对出现')
                            return
                        }
                        if (params.id) {
                            user.upd(params).then(res => {
                                if (res) {
                                    this.$message.success('保存成功！')
                                    this.close()
                                    this.$emit('search')
                                } else {
                                    this.$message.error('保存失败')
                                }
                            })
                        } else {
                            user.add(params).then(res => {
                                if (res) {
                                    this.$message.success('保存成功！')
                                    this.close()
                                    this.$emit('search')
                                } else {
                                    this.$message.error('保存失败')
                                }
                            })
                        }
                    } else {
                        this.$message.error('校验未通过，请检查。')
                    }
                })
            },
            getWorkgroupsAll(){
                callCenter.getWorkgroupsAll().then(res => {
                    this.workgroups = res.workgroups
                })
            },
            getWorkgroupAgents(workgroupName){
                this.formData.agentJid = ''
                this.formData.clientNumber = ''
                this.formData.clientPwd = ''
                this.agentExtendEntiry.agentId = ''
                this.formData.workgroupJid = this.workgroup.workgroupJID
                callCenter.getWorkgroupAgents(workgroupName).then(res => {
                    this.agents = res.agents
                })
            },
            onClickAgent(agent){
                this.formData.agentJid = agent.agentExtendEntiry.agentId
                this.formData.clientNumber = agent.agentExtendEntiry.ccClientNumber
                this.formData.clientPwd = agent.agentExtendEntiry.ccClientPWD
            }
        }
  components: {winSm, myButton},
  props: {
    // setting 中须至少包含控制dialog显示或隐藏的属性,其余属性可拓展
    // 将添加/修改的大量数据及逻辑从列表页面中分离出来,避免列表页面代码过多,审查困难
    // 若此页面须回传数据至父页面,可在引用组件时添加事件,本页面使用this.$emit('事件名',参数1,参数2...)回传数据
    setting: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    // 参数1: rule 对象, 是校验规则, 一般不用
    // 参数2: value 校验项的数据
    // 参数3: callback 回调函数, 决定是否校验通过
    const checkedListCheck = (rule, value, callback) => {
      if (this.checkedList.length < 1) {
        callback(new Error('至少选择一个'))
      } else {
        callback()
      }
    }
    return {
      deptmentOptions: [],
      loading: true,
      checkAll: false,
      checkedList: [],
      roleList: [
        {'id': 1, label: '王涵1'},
        {'id': 2, label: '王涵2'}
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roleName: undefined,
        roleKey: undefined,
        status: undefined,
        orgId: 1
      },
      roleOptions: [],// 选择项
      roleCheckStrictly: true,
      defaultProps: {
        children: 'childList',
        label: 'name',
      },
      formData: {
        sysDeptId: '',
        userName: '',
        userCode: '',
        userPhone: '',
        sex: 1,
        status: 1,
        remark: '',
        seq: null,
      },
      rules: {
        sysDeptId: [
          {required: true, message: '请选择部门', trigger: 'change'}
        ],
        userName: [
          {required: true, message: '请输入人员姓名', trigger: 'blur'}
        ],
        userCode: [
          {required: true, message: '请输入登录名', trigger: 'blur'}
        ],
        userPhone: [
          {required: true, message: '请输入手机号', trigger: 'blur'}
        ],
        sex: [
          {required: true, message: '请选择性别', trigger: 'change'}
        ],
        seq: [
          {required: true, message: '请输入顺序号', trigger: 'blur'}
        ],
        // 角色配置的验证
        roleSetting: [
          {validator: checkedListCheck, required: true, trigger: 'blur'},
        ],
      }
    }
  },
  async created() {
    this.title = this.setting.title
    if (this.setting.id != null) {
      await this.getInfo()
    }

    await this.getAllRole()
    await this.getDeptmentOptions()
    this.loading = false
  },
  methods: {
    // 获取所有角色
    async getAllRole() {
      this.data_scope = this.$store.getters.userInfo ? this.$store.getters.userInfo.lv : ''
      await role.listRoleByDataScope({dataScope: this.setting.data_scope}).then(response => {
          if (response) {
            this.roleOptions = response;
          } else {
            this.roleOptions = [];
          }
          this.loading = false;
        }
      );
    },
    async getDeptmentOptions() {
      await departmentListAll({tenantId: this.setting.tenantId}).then(res => {
        this.deptmentOptions = res
      })
    },
    handleCheckAllChange(val) {
      if (val) {
        this.checkedList = this.roleOptions.map(x => {
          return x.role_id
        })
      } else {
        this.checkedList = []
      }
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.roleOptions.length;
    },
    async getInfo() {
      this.title = this.setting.title
      // 查询数据
      await user.getUser({id: this.setting.id}).then(res => {
        const data = res.data
        this.formData = Object.assign(this.formData, data)
        if (this.formData.projectStart != null && this.formData.projectStart > 0) {
          this.formData.projectStart = DateFormatter.LongToDateTime(this.formData.projectStart)
        }
        if (this.formData.projectEnd != null && this.formData.projectEnd > 0) {
          this.formData.projectEnd = DateFormatter.LongToDateTime(this.formData.projectEnd)
        }
        this.checkedList = res.list.map(x => {
          return x.role_id
        })
        if (res.list.length == this.roleOptions.length) {
          this.handleCheckedCitiesChange(res.list)
        }
      })
    },
    close() {
      this.formData = {
        sysDeptId: '',
        userName: '',
        userCode: '',
        userPhone: '',
        sex: 1,
        status: 1,
        remark: '',
        seq: null,
      }
      this.$emit('close')
    },
    save() {

      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const params = Object.assign({}, this.formData)
          params.roleList = this.checkedList
          // 区域id
          params.tenantId = this.setting.tenantId
          params.tenantCode = this.setting.tenantCode
          if (params.ctiStatus == 0) {
            params.agentJid = ''
            params.workgroupJid = ''
            params.clientNumber = ''
            params.clientPwd = ''
          }
          if (params.projectStart != null && params.projectEnd != null) {
            params.projectStart = DateFormatter.DateToLong(params.projectStart)
            params.projectEnd = DateFormatter.DateToLong(params.projectEnd)
            if (params.projectStart >= params.projectEnd) {
              this.$message.error('服务结束时间不能小于或者等于服务开始时间')
              return
            }
          }
          if ((params.projectStart == null && params.projectEnd != null) || (params.projectStart != null && params.projectEnd == null)) {
            this.$message.error('服务开始时间和服务结束时间必须成对出现')
            return
          }
          if (this.loading) return;
          this.loading = true
          if (params.id) {
            user.upd(params).then(res => {
              this.loading = false
              if (res) {
                this.$message.success('保存成功！')
                this.close()
                this.$emit('search')
              } else {
                this.$message.error('保存失败')
              }
            }).catch(() => {
              this.loading = false
            })
          } else {
            user.add(params).then(res => {
              this.loading = false
              if (res) {
                this.$message.success('保存成功！')
                this.close()
                this.$emit('search')
              } else {
                this.$message.error('保存失败')
              }
            }).catch(() => {
              this.loading = false
            })
          }
        } else {
          this.$message.error('校验未通过，请检查。')
        }
      })
    },
    getWorkgroupsAll() {
      callCenter.getWorkgroupsAll().then(res => {
        this.workgroups = res.workgroups
      })
    },
    getWorkgroupAgents(workgroupName) {
      this.formData.agentJid = ''
      this.formData.clientNumber = ''
      this.formData.clientPwd = ''
      this.agentExtendEntiry.agentId = ''
      this.formData.workgroupJid = this.workgroup.workgroupJID
      callCenter.getWorkgroupAgents(workgroupName).then(res => {
        this.agents = res.agents
      })
    },
    onClickAgent(agent) {
      this.formData.agentJid = agent.agentExtendEntiry.agentId
      this.formData.clientNumber = agent.agentExtendEntiry.ccClientNumber
      this.formData.clientPwd = agent.agentExtendEntiry.ccClientPWD
    }
  }
}
</script>