opms_frontend/src/views/base/distributor/components/EditContact.vue

<template>
  <!-- 新建联系人弹窗 -->
  <el-dialog append-to-body :title="title" :visible.sync="contactVisible" @close="contactClose">
    <el-form ref="contactForm" :model="contactForm" :rules="contactRules">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="联系人姓名" prop="name">
            <el-input v-model="contactForm.name" placeholder="请输入联系人姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="尊称" prop="honorific">
            <el-radio-group v-model="contactForm.honorific">
              <el-radio label="未知">未知</el-radio>
              <el-radio label="女士">女士</el-radio>
              <el-radio label="先生">先生</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="职位" prop="post">
            <el-input v-model="contactForm.post" placeholder="请输入职位" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="contactForm.phone" maxlength="11" placeholder="请输入手机号码" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="电子邮箱" prop="mail">
            <el-input v-model="contactForm.mail" placeholder="请输入电子邮箱" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="微信" prop="wechat">
            <el-input v-model="contactForm.wechat" placeholder="请输入微信" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="负责区域/业务线" prop="territory">
            <el-input v-model="contactForm.territory" placeholder="请输入负责区域/业务线" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer">
      <el-button v-show="contactForm.id" type="primary" @click="contactEdit">保存</el-button>
      <el-button v-show="!contactForm.id" type="primary" @click="contactSave">保存</el-button>
      <el-button @click="contactVisible = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import to from 'await-to-js'
  import distrApi from '@/api/base/distr'

  export default {
    props: {
      distId: {
        type: Number,
        default: () => 0,
      },
    },
    data() {
      var validateTel = (rule, value, callback) => {
        const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
        if (value === '') {
          // callback(new Error('请输入手机号码'))
          callback()
        } else if (!reg.test(value)) {
          callback(new Error('请输入正确手机号码'))
        } else {
          callback()
        }
      }
      var validatemail = (rule, value, callback) => {
        const reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/
        if (!value) {
          callback()
        } else if (!reg.test(value)) {
          callback(new Error('请输入正确邮箱'))
        } else {
          callback()
        }
      }
      return {
        title: '新增联系人',
        contactVisible: false,
        contactForm: {
          id: null,
          name: '', //联系人名字
          honorific: '未知',
          phone: '', //电话
          wechat: '', //微信
          mail: '', //邮箱
          post: '', //部门
          territory: '', //负责区域、业务线
        },
        contactRules: {
          name: [{ required: true, trigger: 'blur', message: '请输入联系人姓名' }],
          territory: [{ required: true, trigger: 'blur', message: '请输入负责区域/业务线' }],
          honorific: [{ trigger: 'blur', message: '请选择尊称' }],
          post: [{ trigger: 'blur', message: '请输入部门名称' }],
          wechat: [{ trigger: 'blur', message: '请输入微信号' }],
          phone: [{ trigger: 'blur', validator: validateTel }],
          mail: [{ trigger: 'blur', validator: validatemail }],
        },
      }
    },
    methods: {
      open(row = null) {
        if (row) {
          this.contactForm = { ...row }
        }
        this.contactVisible = true
      },
      // 联系人新建
      async contactSave() {
        this.$refs.contactForm.validate(async (valid) => {
          if (valid) {
            if (!this.contactForm.wechat && !this.contactForm.telephone) {
              this.$message.warning('电话和微信二者必须填写其一。')
              return
            }
            let params = { ...this.contactForm, distId: this.distId }
            console.log(params)
            const [err, res] = await to(distrApi.addContact(params))
            if (err) return
            if (res.code == 200) {
              this.$message.success('新建联系人成功')
              this.contactVisible = false
              this.$emit('initData')
            }
          }
        })
      },
      // 联系人编辑
      async contactEdit() {
        this.$refs.contactForm.validate(async (valid) => {
          if (valid) {
            if (!this.contactForm.wechat && !this.contactForm.telephone) {
              this.$message.warning('电话和微信二者必须填写其一。')
              return
            }
            let params = { ...this.contactForm, distId: this.distId }
            console.log(params)
            const [err, res] = await to(distrApi.updateContact(params))
            if (err) return
            if (res.code == 200) {
              this.$message.success('更新联系人成功')
              this.contactVisible = false
              this.$emit('initData')
            }
          }
        })
      },
      contactClose() {
        this.$refs['contactForm'].resetFields()
      },
    },
  }
</script>

<style></style>