RMYY_CallCenter_UI/CallCenterWe.../RMYY/src/views/callScreen/components/AddOrEditCus...

<template>
  <div v-loading="loading">
    <el-row :gutter="5">
      <el-col :span="20">

        <el-form
          ref="ruleForm"
          :model="ruleForm"
          label-width="100px"
          style="font-size: 14px"
          class="order_form">
          <el-row>
            <el-col :span="6">
              <el-form-item label="客户名称" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入客户名称" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="电话" prop="telphone">
                <el-input v-model="ruleForm.telphone" placeholder="请输入客户电话" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="ruleForm.sex">
                  <el-radio label="男">男</el-radio>
                  <el-radio label="女">女</el-radio>
                </el-radio-group>
              </el-form-item>

            </el-col>
            <el-col :span="6">
              <el-form-item label="身份证号" prop="idcard">
                <el-input v-model="ruleForm.idcard" placeholder="请输入身份证号" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6">
              <el-form-item label="客户住址" prop="adddress">
                <el-input v-model="ruleForm.adddress" type="textarea" placeholder="请输入客户住址" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" @click="submitForm">保存</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { addOrEditCustomerList, getCustomerList } from '@/api/customerManagement/customerList'
import { validateTel } from '@/utils/validate'
import { mapGetters } from 'vuex'
export default {
  name: 'AddOrEditCustomer',
  props: {
    callinNum: {
      type: String,
      default: ''
    }
  },

  data() {
    var phoneNumbersinput = (rule, value, callback) => {
      if (value !== '') { // 不为空的时候进行验证
        validateTel(value) ? callback() : callback(new Error('联系电话格式错误'))
      } else { // 为空的时候就直接放过去（这里一定要写，不然既不报错也不会往下走【应该和router的next()相同】）
        callback()
      }
    }
    return {
      rowid: 0,
      ruleForm: {
        id: 0, // 客户id
        name: '', // 客户名称
        telphone: '', // 客户电话
        sex: '', // 性别
        idcard: '', // 身份证号
        adddress: '' // 客户住址
      },
      loading: false,
      isButton: true
    }
  },
  computed: {
    ...mapGetters(['screenState'])
  },
  watch: {
    screenState: function() {
      if (this.screenState && this.callinNum) {
        this.getList()
      }
    }
  },
  created() {
    if (this.callinNum) {
      this.getList()
      this.ruleForm.telphone = this.callinNum
    }
  },

  methods: {
    submitForm() {
      this.$emit('fromChild', this.ruleForm.cusName)
      console.log(this.ruleForm)
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true
          const data = {
            id: this.rowid,
            name: this.ruleForm.name, // 客户名称 string
            telphone: this.ruleForm.telphone, // 客户电话 string
            sex: this.ruleForm.sex, // 客户性别 string
            idcard: this.ruleForm.idcard, // 身份证号 string
            adddress: this.ruleForm.adddress // 客户住址 string
          }
          // 添加
          if (!this.rowid) {
            addOrEditCustomerList(data)
              .then((response) => {
                this.loading = false
                if (response.state.toLowerCase() === 'success') {
                  this.$message({
                    message: '恭喜你，添加成功！',
                    type: 'success',
                    duration: 1000
                  })
                  this.$bus.$emit('eventName', this.ruleForm)
                } else {
                  this.$message({
                    message: '添加失败，该客户已存在！',
                    type: 'success',
                    duration: 1000
                  })
                }
              })
              .catch((response) => {
                this.loading = false
              })
            return
          }
          // 编辑
          addOrEditCustomerList(data)
            .then((response) => {
              this.loading = false
              if (response.state.toLowerCase() === 'success') {
                this.$message({
                  message: '恭喜你，客户信息编辑成功！',
                  type: 'success',
                  duration: 1000
                })
                this.$bus.$emit('eventName', this.ruleForm)
              }
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          this.$message({
            type: 'error',
            message: '请输入有效的必填项信息!',
            offset: 50,
            duration: 1000
          })
          return false
        }
      })
    },
    // 获取详情
    getList() {
      return new Promise((resolve) => {
        const params = {
          pageindex: 1, // int 第几页
          pagesize: 99, // int 每页几条信息
          telephone: this.callinNum.toString() // 联系电话
        }
        getCustomerList(params).then((response) => {
          this.loading = false
          if (response.state.toLowerCase() === 'success') {
            const res = response.rows[0]
            console.log(res)
            if (res) {
              this.rowid = res.F_CustomerId
              this.ruleForm.name = res.F_CustomerName // 客户名称
              this.ruleForm.telphone = res.F_Telephone // 客户电话
              this.ruleForm.sex = res.F_Sex // 性别
              this.ruleForm.idcard = res.F_IdCard // 身份证号
              this.ruleForm.adddress = res.F_Address // 客户住址
              this.$emit('cus-info-list', res)
              this.$bus.$emit('eventName', this.ruleForm)
            }
          }
        })
        resolve()
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
	.order_form {
		.form_select {
			width: 100%;
		}

		.form_date {
			width: 100%;
		}
	}
</style>