dvcp_v2_webapp/packages/extra/AppAddressBook/components/Add.vue

<template>
  <ai-detail>
    <template slot="title">
      <ai-title :title="id ? '编辑成员' : '添加成员'" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
      </ai-title>
    </template>
    <template slot="content">  
      <el-form ref="form" :model="form" label-width="110px" label-position="right">
      <ai-card title="个人信息">
        <template #content>
          <div class="ai-form">
            <el-form-item label="姓名" prop="name" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
              <el-input size="small" placeholder="请输入姓名" show-word-limit v-model="form.name" :maxlength="10"></el-input>
            </el-form-item>
            <el-form-item label="账号" prop="id" :rules="[{ required: true, message: '请输入账号', trigger: 'blur' }]">
              <el-input size="small" :disabled="!!id" show-word-limit :maxlength="30" placeholder="成员唯一标识，设定以后不支持修改" v-model="form.id"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile" :rules="[{ required: true, validator: validatorPhone, trigger: 'blur' }]">
              <el-input size="small" placeholder="请输入手机号" show-word-limit :maxlength="11" v-model="form.mobile"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
              <el-radio-group v-model="form.gender">
                <el-radio label="1">男</el-radio>
                <el-radio label="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="座机" prop="telephone">
              <el-input size="small" placeholder="请输入座机" v-model="form.telephone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input size="small" placeholder="请输入邮箱" v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="地址" style="width: 100%;" prop="address">
              <el-input size="small" style="width: 100%;" show-word-limit :maxlength="30" placeholder="请输入地址" v-model="form.address"></el-input>
            </el-form-item>
          </div>
        </template>
      </ai-card>
      <ai-card title="组织信息">
        <template #content>
          <el-form-item label="部门" prop="departmentName" style="width: 100%;" :rules="[{ required: true, message: '请选择部门', trigger: 'change' }]">
            <el-input size="small" placeholder="请选择..." disabled v-model="form.departmentName">
              <ai-wechat-selecter slot="append" isStrictly :instance="instance" @change="onChange" v-model="department" isChooseUnit>
                <el-button type="info">选择</el-button>
              </ai-wechat-selecter>
            </el-input>
          </el-form-item>
          <el-form-item label="标签" style="width: 100%;" prop="tags">
            <el-select size="small" v-model="form.tagIds" multiple placeholder="请选择标签">
              <el-option
                v-for="item in tagsList"
                :key="item.id"
                :label="item.tagname"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="职务" prop="position">
            <el-input size="small" placeholder="请输入职务" v-model="form.position"></el-input>
          </el-form-item>
        </template>
      </ai-card>
      </el-form>
    </template>
    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">提交</el-button>
    </template>
  </ai-detail>
</template>

<script>
  export default {
    name: 'Add',

    props: {
      instance: Function,
      dict: Object,
      params: Object
    },

    data () {
      const validatorPhone = function (rule, value, callback) {
        if (value === '') {
          callback(new Error('请输入手机号'))
        } else if (!/^1\d{10}$/.test(value)) {
          callback(new Error('手机号格式错误'))
        } else {
          callback()
        }
      }
      return {
        info: {},
        department: [],
        validatorPhone: validatorPhone,
        form: {
          position: '',
          name: '',
          email: '',
          telephone: '',
          gender: '',
          mobile: '',
          departmentName: '',
          departmentIds: [],
          tagIds: [],
          id: ''
        },
        id: '',
        tagsList: []
      }
    },

    created () {
      this.getTags()

      if (this.params && this.params.departmentId && !this.params.id) {
        this.department = [{
          id: String(this.params.departmentId),
          name: this.params.departmentName
        }]
        this.form.departmentIds = [this.params.departmentId]
        this.form.departmentName = this.params.departmentName
      }

      if (this.params && this.params.id) {
        this.id = this.params.id
        this.getInfo(this.params.id)
      }
    },

    methods: {
      getInfo (id) {
        this.instance.post(`/app/wxcp/wxuser/queryDetailById?id=${id}`).then(res => {
          if (res.code === 0) {
            const departmentNames = res.data.departmentNames.split(',')
            this.department = res.data.departmentIdsStr.split(',').map((item, index) => {
              return {
                name: departmentNames[index],
                id: item
              }
            })
            this.form = {
              ...res.data,
              departmentName: res.data.departmentNames,
              tagIds: res.data.tags.map(v => v.id),
              departmentIds: res.data.departmentIdsStr.split(',')
            }
          }
        })
      },

      onChange (e) {
        if (e.length) {
          this.form.departmentIds = e.map(v => v.id)
          this.form.departmentName = e.map(v => v.name).join(',')
        } else {
          this.form.departmentIds = ''
          this.form.departmentName = ''
        }
      },

      getTags () {
        this.instance.post(`/app/wxcp/wxtag/listAll`).then(res => {
          if (res.code == 0) {
            this.tagsList = res.data
          }
        })
      },

      onClose () {
        this.form.explain = ''
      },

      confirm () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            const api = this.id ? '/app/wxcp/wxuser/update' : '/app/wxcp/wxuser/add'
            this.instance.post(api, {
              ...this.form
            }).then(res => {
              if (res.code == 0) {
                this.$message.success('提交成功')
                setTimeout(() => {
                  this.cancel(true)
                }, 600)
              }
            })
          }
        })
      },

      cancel (isRefresh) {
        this.$emit('change', {
          type: 'list',
          isRefresh: !!isRefresh
        })
      }
    }
  }
</script>

<style scoped lang="scss">
</style>