jiangping
2025-06-09 663dbe4ddca1fa409e6acbc1f77d924c161b0c39
company/src/components/system/user/OperaUserWindow.vue
@@ -7,44 +7,32 @@
    @confirm="confirm"
  >
    <el-form :model="form" ref="form" :rules="rules">
      <el-form-item label="用户名" prop="username" required>
        <el-input v-model="form.username" placeholder="请输入用户名" v-trim maxlength="50"/>
      <el-form-item label="账号" prop="username" required>
        <el-input v-model="form.username" placeholder="请输入" v-trim maxlength="50"/>
      </el-form-item>
      <el-form-item label="姓名" prop="realname" required>
        <el-input v-model="form.realname" placeholder="请输入姓名" v-trim maxlength="50"/>
      <el-form-item label="名称" prop="realname" required>
        <el-input v-model="form.realname" placeholder="请输入" v-trim maxlength="50"/>
      </el-form-item>
      <el-form-item label="性别" prop="sex" required>
        <el-radio-group v-model="form.sex">
          <el-radio label="1">男</el-radio>
          <el-radio label="0">女</el-radio>
        </el-radio-group>
      <el-form-item label="联系方式" prop="mobile">
        <el-input v-model="form.mobile" placeholder="请输入" v-trim maxlength="11"/>
      </el-form-item>
      <el-form-item label="头像" prop="avatar" required>
        <el-radio-group v-model="form.avatar" class="form-item-avatar">
          <el-radio label="https://dmtest.ahapp.net/preselectfile/man.png" border><img src="https://dmtest.ahapp.net/preselectfile/man.png" alt=""></el-radio>
          <el-radio label="https://dmtest.ahapp.net/preselectfile/woman.png" border><img src="https://dmtest.ahapp.net/preselectfile/woman.png" alt=""></el-radio>
        </el-radio-group>
      <el-form-item label="验证码" prop="captcha">
        <div style="width: 100%; display: flex; align-items: center;">
          <el-input v-model="form.captcha" maxlength="11" type="number" style="flex: 1;" placeholder="请输入" v-trim/>
          <el-button type="primary" style="flex-shrink: 0; margin-left: 15px;" @click="send" v-if="num === 0">发送验证码</el-button>
          <el-button type="primary" style="flex-shrink: 0; margin-left: 15px;" v-else>{{num}}s</el-button>
        </div>
      </el-form-item>
      <el-form-item v-if="form.id == null" label="初始密码" prop="password" required>
        <el-input v-model="form.password" type="password" placeholder="请输入初始密码" maxlength="30" show-password/>
      <el-form-item label="部门" prop="departmentId">
        <el-cascader
          :options="organization"
          v-model="form.departmentId"
          placeholder="请选择"
          :props="{ label: 'name', value: 'id', children: 'childList', checkStrictly: true }"
          clearable />
      </el-form-item>
            <el-form-item label="所属部门" prop="departmentId" required>
        <DepartmentSelect v-model="form.departmentId" placeholder="请选择用户所属部门" :inline="false" clearable/>
      </el-form-item>
      <el-form-item label="岗位" prop="positionId">
        <PositionSelect v-model="form.positionIds" placeholder="请选择用户所在岗位" :inline="false" :multiple="true" clearable/>
      </el-form-item>
      <el-form-item label="工号" prop="empNo">
        <el-input v-model="form.empNo" placeholder="请输入工号" v-trim maxlength="50"/>
      </el-form-item>
      <el-form-item label="手机号码" prop="mobile">
        <el-input v-model="form.mobile" placeholder="请输入手机号码" v-trim maxlength="11"/>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email" placeholder="请输入邮箱" v-trim maxlength="200"/>
      </el-form-item>
      <el-form-item label="生日" prop="birthday">
        <el-date-picker v-model="form.birthday" value-format="yyyy-MM-dd" placeholder="请选择用户生日"/>
      <el-form-item label="抄送文件邮箱" prop="email">
        <el-input v-model="form.email" placeholder="请输入" v-trim />
      </el-form-item>
    </el-form>
  </GlobalWindow>
@@ -56,7 +44,8 @@
import DepartmentSelect from '@/components/common/DepartmentSelect'
import PositionSelect from '@/components/common/PositionSelect'
import { checkMobile, checkEmail } from '@/utils/form'
import { sendSms } from '@/api/business/smsEmail'
import { tree } from '@/api/business/companyDepartment'
export default {
  name: 'OperaUserWindow',
  extends: BaseOpera,
@@ -68,16 +57,14 @@
        id: null,
        username: '', // 用户名
        realname: '', // 姓名
        empNo: '', // 工号
        departmentId: null, //  所属部门ID
        positionIds: [], //  所属岗位ID集
        avatar: '/avatar/man.png', // 头像
        password: '', // 密码
        mobile: '', // 手机号码
        email: '', // 邮箱
        sex: '1', // 性别
        birthday: '' // 生日
        email: '',
        captcha: '',
        departmentId: ''
      },
      num: 0,
      timer: null,
      organization: [],
      // 验证规则
      rules: {
        username: [
@@ -86,28 +73,91 @@
        realname: [
          { required: true, message: '请输入姓名' }
        ],
        password: [
          { required: true, message: '请输入密码' }
        mobile: [
          { required: true, validator: checkMobile }
        ],
        departmentId: [
          { required: true, message: '请选择部门' }
        ],
        avatar: [
          { required: true, message: '请选择用户头像' }
        ],
        sex: [
          { required: true, message: '请选择用户性别' }
        ],
        mobile: [
          { required: true, validator: checkMobile }
        ],
        email: [
          { validator: checkEmail }
          { required: true, message: '请输入邮箱' }
        ]
      }
    }
  },
  methods: {
    __confirmCreate () {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return
        }
        let obj = JSON.parse(JSON.stringify(this.form))
        obj.departmentId = obj.departmentId[obj.departmentId.length - 1]
        // 调用新建接口
        this.isWorking = true
        this.api.create(obj)
          .then(() => {
            this.visible = false
            this.$tip.apiSuccess('新建成功')
            this.$emit('success')
          })
          .catch(e => {
            this.$tip.apiFailed(e)
          })
          .finally(() => {
            this.isWorking = false
          })
      })
    },
    __confirmEdit () {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return
        }
        let obj = JSON.parse(JSON.stringify(this.form))
        obj.departmentId = obj.departmentId[obj.departmentId.length - 1]
        // 调用新建接口
        this.isWorking = true
        this.api.updateById(obj)
          .then(() => {
            this.visible = false
            this.$tip.apiSuccess('修改成功')
            this.$emit('success')
          })
          .catch(e => {
            this.$tip.apiFailed(e)
          })
          .finally(() => {
            this.isWorking = false
          })
      })
    },
    send() {
      if (!this.form.mobile) {
        this.$message.warning('请输入手机号')
        return
      }
      sendSms({ phone: this.form.mobile })
        .then(res => {
          this.num = 60
          this.setTime()
        })
    },
    getTree() {
      tree()
        .then(records => {
          this.organization = records
        })
    },
    setTime() {
      this.timer = setInterval(() => {
        this.num -= 1
        if (this.num === 0) {
          clearInterval(this.timer)
          this.num = 0
        }
      }, 1000)
    },
    /**
     * @title 窗口标题
     * @target 编辑的用户对象
@@ -115,13 +165,16 @@
    open (title, target) {
      this.title = title
      this.visible = true
      this.getTree()
      clearInterval(this.timer)
      this.num = 0
      // 新建
      if (target == null) {
        this.$nextTick(() => {
          this.$refs.form.resetFields()
          this.form.id = null
          this.form.departmentId = null
          this.form.positionIds = []
          // this.form.departmentId = null
          // this.form.positionIds = []
        })
        return
      }
@@ -130,8 +183,8 @@
        for (const key in this.form) {
          this.form[key] = target[key]
        }
        this.form.departmentId = target.department == null ? null : target.department.id
        this.form.positionIds = target.positions == null ? [] : target.positions.map(p => p.id)
        // this.form.departmentId = target.department == null ? null : target.department.id
        // this.form.positionIds = target.positions == null ? [] : target.positions.map(p => p.id)
      })
    }
  },