liukangdong
2024-05-13 6bf26cf68e5188affb9f3fe3694456638769007e
admin/src/components/business/OperaMemberWindow.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,155 @@
<template>
    <GlobalWindow
        :title="title"
        width="60%"
        :visible.sync="visible"
        :confirm-working="isWorking"
        @confirm="confirm"
    >
        <el-form :model="form" ref="form" :rules="rules">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name" placeholder="请输入姓名" v-trim/>
            </el-form-item>
            <el-form-item label="所属组织" prop="companyId">
              <el-cascader
                  v-model="form.company"
                  :options="department"
                  @change="handleChangeCompany"
                  :show-all-levels="false"
                  clearable
                  :props="departprops"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="form.phone" placeholder="请输入手机号" v-trim/>
              <div style="color: #F56C6C;font-size: 12px">(注:员工手机号将作为平台登录账号,初始密码为系统默认密码配置项)</div>
            </el-form-item>
            <el-form-item label="身份证号" prop="idcardNo" v-if="form.id ==null">
                <el-input v-model="form.idcardNo" placeholder="请输入身份证号" v-trim/>
            </el-form-item>
            <el-form-item label="修改身份证号" prop="idcardNoNew" v-if="form.id !=null">
                <el-input v-model="form.idcardNoNew" placeholder="可修改身份证号" v-trim/>
              <div style="font-size: 12px" v-if="form.id !=null">
                ï¼ˆæ³¨ï¼šå½“前身份证号为<span style="color: #F56C6C">【{{form.idcardDecode}}】</span>,如需修改,请在输入栏填写新的身份证号!)
              </div>
            </el-form-item>
            <el-form-item label="工号" prop="code">
                <el-input v-model="form.code" placeholder="请输入员工工号" v-trim/>
            </el-form-item>
          <el-form-item label="人脸照片" prop="faceImgFull" >
            <UploadAvatarImage
                :file="{ 'imgurlfull': form.faceImgFull, 'imgurl': form.faceImg }"
                :uploadData="uploadData"
                @uploadSuccess="uploadAvatarSuccess"
                @uploadEnd="isUploading = false"
                @uploadBegin="isUploading = true"
            />
          </el-form-item>
</el-form>
</GlobalWindow>
</template>
<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalWindow from '@/components/common/GlobalWindow'
import UploadAvatarImage from '@/components/common/UploadAvatarImage'
import {checkMobile, validIdCardNo, validIdCardNoNew} from '@/utils/form'
export default {
  name: 'OperaCompanyWindow',
  extends: BaseOpera,
  components: { GlobalWindow, UploadAvatarImage },
  data () {
    return {
      uploadData: {
        folder: 'member'
      },
      departprops: {
        label: 'name',
        value: 'id',
        checkStrictly: true
      },
      department: [],
      // è¡¨å•数据
      form: {
        id: null,
        name: '',
        type: '',
        company: [],
        code: '',
        idcardNo: '',
        idcardNoNew: '',
        linkName: '',
        idcardDecode: '',
        companyId: null,
        idcardType: 0,
        phone: '',
        faceImg: '',
        faceImgFull: ''
      },
      // éªŒè¯è§„则
      rules: {
        name: [{ required: true, message: '请输入员工姓名', trigger: 'blur' }],
        phone: [{ required: true, validator: checkMobile, trigger: 'blur' }],
        companyId: [{ required: true, message: '请选择所属组织' }],
        idcardNo: [{ required: true, validator: validIdCardNo, message: '请输入身份证号', trigger: 'blur' }],
        idcardNoNew: [{ required: false, validator: validIdCardNoNew, trigger: 'blur' }]
      }
    }
  },
  created () {
    this.config({
      api: '/business/member.js',
      'field.id': 'id'
    })
  },
  methods: {
    handleChangeCompany (value) {
      if (this.form.company && this.form.company.length > 1) {
        this.form.companyId = this.form.company[this.form.company.length - 1]
      }
    },
    /**
     * æ‰“开窗口
     * @title çª—口标题
     * @target ç¼–辑的对象
     */
    open (title, target, depart) {
      this.title = title
      this.department = depart
      this.visible = true
      // æ–°å»º
      if (target == null) {
        this.$nextTick(() => {
          this.$refs.form.resetFields()
          this.form[this.configData['field.id']] = null
          this.form.company = []
        })
        return
      }
      // ç¼–辑
      var that = this
      this.$nextTick(() => {
        for (const key in this.form) {
          this.form[key] = target[key]
          this.form.idcardNo = ''
        }
        this.form.company =[]
        if (target.companyId && target.companyPath) {
          var array = target.companyPath.split('/')
          array.forEach(item => {
            if (item && item != null && item != '') {
              that.form.company.push(parseInt(item))
            }
          })
        }
        console.log(that.form.company)
      })
    },
    // ä¸Šä¼ å›¾ç‰‡
    uploadAvatarSuccess (file) {
      this.form.faceImg = file.imgurl
      this.form.faceImgFull = file.imgurlfull
    }
  }
}
</script>