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="20">
              <el-col :span="12">
                <el-form-item label="客户名称" prop="cusName">
                  <el-input v-model="formData.cusName" placeholder="请输入客户名称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <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="20">
              <el-col :span="12">
                <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="12">
                <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="dict.value" :label="dict.value">
                      {{ dict.label }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <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="12">
                <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="12">
                <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="12">
                <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="24">
                <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 @change="serviceChange(scope.row)" v-model="scope.row.systemCode" placeholder="请选择服务内容">
                    <el-option v-for="dict in serviceList" :key="dict.id" :label="dict.name" :value="dict.id" />
                  </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 v-if="formData.typeCode !== '03'" title="身份证件信息" name="3">
            <el-row>
              <el-col>
                <el-form-item>
                  <ImageUpload v-model="formData.idCardImage" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>

          <el-collapse-item v-if="formData.typeCode == '03'" title="政企客户资料" name="3">
            <el-row>
              <el-col>
                <el-form-item>
                  <FileUpload 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 { getServicePackageList } from "@/api/system/servicePackage";
import ImageUpload from '@/components/ImageUpload';
import FileUpload from '@/components/FileUpload';
import Editor from '@/components/Editor';
import { getDictDatas, DICT_TYPE } from '@/utils/dict'

export default {
  name: "CustomerMainForm",
  components: {
    ImageUpload,
    Editor,
    FileUpload
  },
  data() {
    return {
      // 弹出层标题
      dialogTitle: "",
      // 是否显示弹出层
      dialogVisible: false,
      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
      formLoading: false,
      //折叠面板默认展开
      activeNames: ['1', '2', '3'],
      //类型
      typeCode: "",
      //企业
      deptCode: undefined,
      //服务套餐列表
      serviceList: [],
      // 表单参数
      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: [
          {
            systemCode: '',
            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: {
    /**获取服务套餐精简信息*/
    getServiceList() {
      getServicePackageList().then(response => {
        this.serviceList = response.data;
      });
    },
    /**绑定事件*/
    serviceChange(row) {
      this.serviceList.map(item => {
        if (item.id == row.systemCode) {
          row.serContent = item.name
          return
        }
      })
    },
    /**
     * 新增服务内容
     */
    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();
      this.getServiceList()
      // 修改时，设置数据
      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 openAttn(row) {
      this.dialogVisible = true;
      this.typeCode = '04'
      this.deptCode = row.deptCode
      console.log(row)
      console.log(this.deptCode)
      this.reset();
      this.dialogTitle = row.cusName;
    },

    /** 提交按钮 */
    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: this.deptCode,
        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>