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

<template>
  <div>
    <el-form ref="form" v-loading="addLoading" :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 :span="3" class="col-txt"><span>小区-分期</span></el-col>
              <el-col :span="9" class="col-input">
                <el-form-item>
                  <el-cascader
                    ref="findids"
                    v-model="form.findids"
                    class="full"
                    :append-to-body="false"
                    :options="options"
                    clearable
                    @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 prop="">
                  <el-date-picker
                    v-model="form.roomSelectionDate"
                    type="date"
                    placeholder="年月日"
                    value-format="yyyy-MM-dd"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3" class="col-txt"><span>批次号</span></el-col>
              <el-col :span="9" class="col-input">
                <el-form-item prop="companyId">
                  <el-input v-model="form.batchNumber" />
                </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 prop="companyId">
                  <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>购房人{{ 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'">
                      <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'">
                      <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
                        :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 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() {
        return {
            dc_key: ['RELATIONSHIP'],
            form: {
                dynamicItem: [
                    {
                        id: '',
                        customerManagementId: '',
                        name: '',
                        identityCard: '',
                        phone: '',
                        relationship: ''
                    }
                ]
            },
            rules: {

            },
            addLoading: false,
            options: []
        }
    },
    mounted() {
        this.getTreeSelectData()
    },
    methods: {
        initData(data) {
            this.initDict(this.dc_key).then(res => {
                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.form.dynamicItem = []
                const json = JSON.parse(res.data.buyerJson)
                if (json) {
                    json.forEach(item => {
                        const data = {
                            name: item.name,
                            identityCard: item.identityCard,
                            phone: item.phone,
                            relationship: item.relationship
                        }
                        this.form.dynamicItem.push(data)
                    })
                }
            })
        },
        confirmSubmit: function() {
            const _this = this
            this.$refs.form.validate(valid => {
                if (valid) {
                    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)
                    console.log('postData', postData)
                    this.baseRequest(soaUrl, postData).then(res => {
                        if (res.data.code == '200') {
                            _this.$message({
                                message: '新增成功',
                                type: 'success'
                            })
                            _this.cancel()
                        } else {
                            _this.$message({
                                message: res.msg,
                                type: 'warning'
                            })
                        }
                    }).catch(err => {
                        _this.$message({
                            message: err,
                            type: 'warning'
                        })
                    })
                } 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>

</style>