lanan-system-vue/src/views/base/customer/CustomerMainForm.vue

<template>
  <div>
    <!-- 对话框(添加 / 修改) -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%" v-dialogDrag append-to-body>
      <el-form size="small" ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading"
               label-width="100px">
        <el-collapse v-model="activeNames" >
          <!--客户基本信息面板-->
          <el-collapse-item title="客户基本信息" name="1">
            <el-row :gutter="2">
              <el-col :span="11">
                <el-form-item label="客户名称" prop="cusName">
                  <el-input v-model="formData.cusName" placeholder="请输入客户名称"/>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="客户类型" prop="typeCode">
                  <el-select v-model="formData.typeCode" placeholder="请选择客户类型">
                    <el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_CUS_TYPE)"
                               :key="dict.value" :label="dict.label" :value="dict.value"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="2">
              <el-col :span="11">
                <el-form-item v-if="formData.typeCode !=='03'" label="身份证号" prop="idCard">
                  <el-input v-model="formData.idCard" placeholder="请输入客户身份证号"/>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item v-if="formData.typeCode !=='03'" label="性别" prop="sex">
                  <el-radio-group v-model="formData.sex">
                    <el-radio v-for="dict in sexDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">
                      {{ dict.label }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="2">
              <el-col :span="11">
                <el-form-item v-if="formData.typeCode !=='03'" label="生日" prop="birthday">
                  <el-date-picker
                    v-model="formData.birthday"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="联系方式" prop="phoneNumber">
                  <el-input v-model="formData.phoneNumber" placeholder="请输入客户联系方式"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="2">
              <el-col :span="11">
                <el-form-item label="客户来源" prop="dataFrom">
                  <el-select v-model="formData.dataFrom" placeholder="请选择客户来源">
                    <el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_CUS_DATA_FROM)"
                               :key="dict.value" :label="dict.label" :value="dict.value"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="注册方式" prop="inviterType">
                  <el-select v-model="formData.inviterType" placeholder="请选择注册方式">
                    <el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_SIGN_TYPE)"
                               :key="dict.value" :label="dict.label" :value="dict.value"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <el-form-item label="联系地址" prop="address">
                  <el-input type="textarea" v-model="formData.address" placeholder="请输入客户联系地址"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <!--服务内容折叠面板面板-->
          <el-collapse-item v-if="formData.typeCode=='03'" title="服务内容" name="2">
            <el-table
              :data="formData.itemList"
              border
              size="small"
              style="width: 100%">
              <el-table-column
                prop="serContent"
                align="left"
                width="180">
                <template slot="header">
                  <i style="color: #409EFF;cursor:pointer" class="el-icon-circle-plus-outline" @click="addItem"/>
                  服务内容
                </template>
                <template v-slot="scope">
                  <el-select v-model="scope.row.serContent" placeholder="请选择服务内容">
                    <el-option v-for="dict in cusBusiTypeDictDatas"
                               :key="dict.value" :label="dict.label" :value="dict.value"/>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                prop="serTimeStart"
                align="center"
                label="开始日期">
                <template v-slot="scope">
                  <el-date-picker
                    v-model="scope.row.serTimeStart"
                    type="date"
                    placeholder="选择服务开始日期">
                  </el-date-picker>
                </template>
              </el-table-column>
              <el-table-column
                prop="serTimeEnd"
                align="center"
                label="结束日期">
                <template v-slot="scope">
                  <el-date-picker
                    v-model="scope.row.serTimeEnd"
                    type="date"
                    placeholder="选择服务结束日期">
                  </el-date-picker>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                width="100"
                label="操作">
                <template v-slot="scope">
                  <el-button v-if="formData.itemList.length>1" size="mini" type="text" icon="el-icon-delete" @click="deleteItem(scope.$index, formData.itemList)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-collapse-item>
          <!--附件-->
<!--          <el-collapse-item title="附件" name="3">-->
<!--            <el-row>-->
<!--              <el-col>-->
<!--                <el-form-item label="身份证照片">-->
<!--                  <ImageUpload v-model="formData.idCardImage"/>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
<!--            </el-row>-->
<!--          </el-collapse-item>-->
        </el-collapse>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as CustomerMainApi from '@/api/base/customer';
import ImageUpload from '@/components/ImageUpload';
import Editor from '@/components/Editor';
import {getDictDatas, DICT_TYPE} from '@/utils/dict'

export default {
  name: "CustomerMainForm",
  components: {
    ImageUpload,
    Editor,
  },
  data() {
    return {
      // 弹出层标题
      dialogTitle: "",
      // 是否显示弹出层
      dialogVisible: false,
      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
      formLoading: false,
      //折叠面板默认展开
      activeNames: ['1','2','3'],
      typeCode:"",
      // 表单参数
      formData: {
        id: undefined,
        userId: undefined,
        typeCode: '01',
        deptCode: undefined,
        cusName: undefined,
        phoneNumber: undefined,
        birthday: undefined,
        address: undefined,
        sex: 1,
        idCard: undefined,
        idCardImage: undefined,
        dataFrom: '08',
        nearDoTime: undefined,
        nearDoContent: undefined,
        inviter: undefined,
        inviterType: '01',
        status: undefined,
        itemList:[
          {
            serContent:'',
            serTimeStart:'',
            serTimeEnd:''
          }
        ],
      },
      // 表单校验
      formRules: {
        cusName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
        ],
        typeCode: [
          { required: true, message: '请选择客户类型', trigger: 'change' },
        ],
        phoneNumber: [
          { required: true, message: '请输入客户联系方式', trigger: 'blur' },
        ],
        dataFrom: [
          { required: true, message: '请选择客户来源', trigger: 'change' },
        ],
        inviterType: [
          { required: true, message: '请选择注册方式', trigger: 'change' },
        ],
      },
      // 性别数据字典
      sexDictDatas: getDictDatas(DICT_TYPE.DICT_SYS_USER_SEX),
      cusBusiTypeDictDatas: getDictDatas(DICT_TYPE.DICT_CUS_BUSI_TYPE)
    };
  },
  methods: {
    /**
     * 新增服务内容
     */
    addItem(){
      const item = {
        serContent:'',
        serTimeStart:'',
        serTimeEnd:''
      }
      this.formData.itemList.push(item)
    },
    /**
     * 移除服务内容
     */
    deleteItem(index, rows) {
      rows.splice(index, 1);
    },

    /** 打开弹窗 */
    async open(id,typeCode) {
      this.dialogVisible = true;
      this.typeCode = typeCode
      this.reset();
      // 修改时，设置数据
      if (id) {
        this.formLoading = true;
        try {
          const res = await CustomerMainApi.getCustomerMain(id);
          this.formData = res.data;
          this.dialogTitle = "修改客户信息";
        } finally {
          this.formLoading = false;
        }
      }
      this.dialogTitle = "新增客户";
    },
    /** 提交按钮 */
    async submitForm() {
      // 校验主表
      await this.$refs["formRef"].validate();
      this.formLoading = true;
      try {
        const data = this.formData;
        //如果客户类型不是政企客户，没有扩展表信息
        if(data.typeCode !== '03'){
          data.itemList = []
        }
        // 修改的提交
        if (data.id) {
          await CustomerMainApi.updateCustomerMain(data);
          this.$modal.msgSuccess("修改成功");
          this.dialogVisible = false;
          this.$emit('success');
          return;
        }
        // 添加的提交
        await CustomerMainApi.createCustomerMain(data);
        this.$modal.msgSuccess("新增成功");
        this.dialogVisible = false;
        this.$emit('success');
      } finally {
        this.formLoading = false;
      }
    },
    /** 表单重置 */
    reset() {
      this.formData = {
        id: undefined,
        userId: undefined,
        typeCode: this.typeCode,
        deptCode: undefined,
        cusName: undefined,
        phoneNumber: undefined,
        birthday: undefined,
        address: undefined,
        sex: 1,
        idCard: undefined,
        idCardImage: undefined,
        dataFrom: '08',
        nearDoTime: undefined,
        nearDoContent: undefined,
        inviter: undefined,
        inviterType: '01',
        status: undefined,
        itemList:[
          {
            serContent:'',
            serTimeStart:'',
            serTimeEnd:''
          }
        ],
      };
      this.resetForm("formRef");
    }
  }
};
</script>