settle_down_web/src/views/customerManagement/numberManagement/addCustomer.vue

<template>
  <div>
    <el-form ref="form" :model="form" style="width: 100%;padding: 5px" :rules="rules">
      <el-row>
        <el-col style="padding-bottom: 10px">
          <span class="card_title">基本信息</span>
          <el-card shadow="always" style="padding: 15px 5px 5px 15px">
            <el-row>
              <el-col v-if="isView" :span="3" class="col-txt"><span><span class="red-asterisk" />小区-分期</span></el-col>
              <el-col v-if="isView" :span="9" class="col-input">
                <el-form-item prop="findids">
                  <el-cascader
                    ref="findids"
                    v-model="form.findids"
                    class="full"
                    :append-to-body="false"
                    :options="options"
                    clearable
                    disabled
                    @change="handleChange"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="3" class="col-txt"><span>选房日</span></el-col>
              <el-col :span="9" class="col-input">
                <el-form-item>
                  <el-date-picker
                    v-model="form.roomSelectionDate"
                    popper-class="statistic_base"
                    type="datetime"
                    placeholder="年月日"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3" class="col-txt"><span><span class="red-asterisk">*</span>批次号</span></el-col>
              <el-col :span="9" class="col-input">
                <el-form-item prop="batchNumber">
                  <el-input v-model="form.batchNumber" />
                </el-form-item>
              </el-col>
              <el-col :span="3" class="col-txt"><span><span class="red-asterisk">*</span>选房号</span></el-col>
              <el-col :span="9" class="col-input">
                <el-form-item prop="roomSelectionNumber">
                  <el-input v-model="form.roomSelectionNumber" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <!-- 特殊表单 -->
              <div v-for="(item, index) in form.dynamicItem" :key="index">
                <el-row style="margin-top: 10px">
                  <el-col :span="2" class="col-txt"><span><span class="red-asterisk">*</span>购房人{{ index + 1 }}</span></el-col>
                  <el-col :span="4" class="col-input">
                    <el-form-item :prop="'dynamicItem.' + index + '.name'">
                      <el-input
                        v-model="item.name"
                        placeholder="请填写姓名"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="4" class="col-input">
                    <el-form-item
                      :prop="'dynamicItem.' + index + '.identityCard'"
                      :rules="rules.identityCard"
                    >
                      <el-input
                        v-model="item.identityCard"
                        placeholder="请填写身份证号"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="4" class="col-input">
                    <el-form-item
                      :prop="'dynamicItem.' + index + '.phone'"
                      :rules="rules.phone"
                    >
                      <el-input
                        v-model="item.phone"
                        placeholder="请填写手机号"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col v-if="index !== 0" :span="6" class="col-input">
                    <el-form-item :prop="'dynamicItem.' + index + '.relationship'">
                      <el-select
                        v-model="item.relationship"
                        placeholder="与1的关系"
                        filterable
                        clearable
                        :popper-append-to-body="false"
                        popper-class="statistic_base"
                      >
                        <el-option
                          v-for="relationship in dc_data.RELATIONSHIP"
                          :key="relationship.value"
                          :label="relationship.label"
                          :value="relationship.value"
                          :popper-append-to-body="false"
                          popper-class="statistic_base"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="2" class="col-input">
                    <el-button v-if="index !== 0" type="danger" size="mini" @click="deleteItem(item, index)">-</el-button>
                  </el-col>
                </el-row>
              </div>
            </el-row>
            <el-row>
              <el-col :span="2" class="col-txt">
                <el-button size="small" type="text" @click="addItem">+继续添加</el-button>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-form>
    <div style="text-align: right">
      <el-button @click="cancel">取 消</el-button>
      <el-button v-if="!isView" :loading="addLoading" type="primary" @click="confirmSubmit()">提 交</el-button>
    </div>

  </div>
</template>

<script>
import Base from '@/views/base/base'
import BaseData from '@/views/base/baseData'

export default {
    name: 'AddCustomer',
    components: { },
    mixins: [Base, BaseData],
    data() {
        var checkPhone = (rule, value, callback) => { // 手机号验证
            console.log(rule)
            if (rule.field === 'dynamicItem.0.phone') {
                if (!value) {
                    return callback(new Error('手机号不能为空'))
                } else {
                    const reg = /^1[3456789]\d{9}$/
                    if (reg.test(value)) {
                        callback()
                    } else {
                        return callback(new Error('请输入正确的手机号'))
                    }
                }
            }
            callback()
        }
        return {
            dc_key: ['RELATIONSHIP'],
            form: {
                dynamicItem: [
                    {
                        id: '',
                        customerManagementId: '',
                        name: '',
                        identityCard: '',
                        phone: '',
                        relationship: ''
                    }
                ]
            },
            rules: {
                // findids: [{ required: true, message: '请选择小区-分期', trigger: 'change' }],
                roomSelectionDate: [{ required: true, message: '请输入选房日', trigger: 'change' }],
                batchNumber: [{ required: true, message: '请输入批次号', trigger: 'blur' }],
                roomSelectionNumber: [{ required: true, message: '请输入选房号', trigger: 'blur' }],
                phone: [
                    {
                        validator: checkPhone, trigger: 'blur'
                    }],
                identityCard: [
                    { required: true, message: '请输入身份证ID', trigger: 'blur' },
                    { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '身份证格式不正确' }
                ]
            },
            addLoading: false,
            options: [],
            isView: false
        }
    },
    mounted() {
        this.getTreeSelectData()
    },
    methods: {
        initData(data) {
            this.isView = data.isView
            this.initDict(this.dc_key).then(res => {
                if (data.id) {
                    this.getById(data.id)
                }
            })
        },
        handleChange(value) {

        },
        getById(val) {
            this.baseRequest('getById', { id: val }).then(res => {
                this.form = res.data
                this.form.findids = [res.data.groupId, res.data.discId]
                this.$set(this.form, 'dynamicItem', [])
                if (res.data.buyerJson) {
                    const json = JSON.parse(res.data.buyerJson)
                    json.forEach(item => {
                        const data = {
                            name: item.name,
                            identityCard: item.identityCard,
                            phone: item.phone,
                            relationship: item.relationship,
                            orderNum: item.orderNum
                        }
                        this.form.dynamicItem.push(data)
                    })
                } else {
                    this.addItem()
                }
            })
        },
        confirmSubmit: function() {
            const _this = this
            // if (!_this.form.findids[0]) {
            //     this.$message({
            //         message: '请选择小区',
            //         type: 'warning'
            //     })
            //     return
            // }
            // if (!_this.form.findids[1]) {
            //     this.$message({
            //         message: '请选择分期',
            //         type: 'warning'
            //     })
            //     return
            // }
            this.$refs.form.validate(valid => {
                if (valid) {
                    _this.addLoading = true
                    let soaUrl = 'add'
                    if (_this.form.id) {
                        soaUrl = 'edit'
                    }
                    const extraData = {
                        // groupId: _this.form.findids[0],
                        // discId: _this.form.findids[1],
                        buyerJson: JSON.stringify(_this.form.dynamicItem)
                    }
                    const postData = Object.assign({}, _this.form, extraData)
                    this.baseRequest(soaUrl, postData).then(res => {
                        if (res.data.code == '200') {
                            _this.$message({
                                message: '新增成功',
                                type: 'success'
                            })
                            _this.cancel()
                        } else {
                            _this.$message({
                                message: res.data.msg,
                                type: 'warning'
                            })
                        }
                        _this.addLoading = false
                    }).catch(err => {
                        _this.$message({
                            message: err,
                            type: 'warning'
                        })
                        _this.addLoading = false
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        cancel() {
            this.$emit('cancel')
        },
        getTreeSelectData: function() {
            this.baseInfoRequest('getTreeData3', {}).then((res) => {
                this.options = res.data.data
            }).catch(() => {
            })
        },
        addItem(length) {
            this.form.dynamicItem.push({
                id: '',
                customerManagementId: '',
                name: '',
                identityCard: '',
                phone: '',
                relationship: ''
            })
        },
        // 删除方法
        deleteItem(item, index) {
            this.form.dynamicItem.splice(index, 1)
        },
        baseRequest(opUrl, postData) {
            return this.$channel.globeRequest('CustomerManagementController', opUrl, postData, 'project')
        },
        baseInfoRequest: function(opUrl, postData) {
            return this.$channel.baseRequest('ParkInfoController', opUrl, postData, 'User')
        }

    }
}
</script>

<style scoped>
.red-asterisk {
    color: red;
}
</style>