drp-ui/src/views/business/spd/cm/customersContact/index.vue

<template>
  <!-- <el-dialog :title="title" :visible.sync="open" width="1100px" append-to-body> -->
  <div id="CustomersContact" class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="auto"
      :disabled="this.operatingState == 'Browse'">
      <el-divider content-position="left">
        <dev style="width: 50px; height: 40px; font-size: 18px">基本信息</dev>
      </el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label="编码" prop="code">
            <el-input v-model="form.code" placeholder="系统自动生成编码" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别" prop="gander">
            <el-select v-model="form.gander" placeholder="">
              <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label"
                :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="所属客户" prop="customerName">
            <dr-popover-select v-model="form.customerName" title="客户" type="CUSTOMER_PARAM_ZT" :dataMapping="{
                  customer: 'id',
                  customerName: 'name',
                }" :source.sync="form" :disabled="true">
            </dr-popover-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系人分类" prop="contactClassification">
            <el-select v-model="form.contactClassification" placeholder="">
              <el-option v-for="dict in dict.type.mk_bo_contact_type" :key="dict.value" :label="dict.label"
                :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="生日" prop="birthday">
            <el-date-picker clearable v-model="form.birthday" type="date" value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="籍贯" prop="birthplace">
            <el-input v-model="form.birthplace" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="兴趣爱好" prop="hobby">
            <el-input v-model="form.hobby" placeholder="" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="状态" prop="state">
            <el-select v-model="form.state" placeholder="">
              <el-option v-for="dict in dict.type.mk_bo_contact_state" :key="dict.value" :label="dict.label"
                :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">
        <dev style="width: 50px; height: 40px; font-size: 18px">工作信息</dev>
      </el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label="上级联系人" prop="superiorContactName">
            <dr-popover-select v-model="form.superiorContactName" title="上级联系人" type="LINKMAN_PARAM" :dataMapping="{
                  superiorContact: 'id',
                  superiorContactName: 'name',
                }" :source.sync="form" :queryParams="additionalCondition">
            </dr-popover-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="任职科室" prop="section">
            <el-select v-model.trim="form.section" placeholder="" filterable>
              <el-option v-for="dict in dict.type.mk_bo_section" :key="dict.value" :label="dict.label"
                :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="职务" prop="position">
            <el-select v-model="form.position" placeholder="">
              <el-option v-for="dict in dict.type.mk_bo_position" :key="dict.value" :label="dict.label"
                :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="职称" prop="jobTitle">
            <el-select v-model="form.jobTitle" placeholder="">
              <el-option v-for="dict in dict.type.mk_bo_job_title" :key="dict.value" :label="dict.label"
                :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="决策力" prop="power">
            <el-select v-model="form.power" placeholder="">
              <el-option v-for="dict in dict.type.mk_bo_power" :key="dict.value" :label="dict.label"
                :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="支持度" prop="support">
            <el-select v-model="form.support" placeholder="">
              <el-option v-for="dict in dict.type.mk_bo_support" :key="dict.value" :label="dict.label"
                :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="擅长领域" prop="fieldExpertise">
            <el-select v-model="form.fieldExpertise" placeholder="">
              <el-option v-for="dict in dict.type.mk_bo_field_expertise" :key="dict.value" :label="dict.label"
                :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="关键决策人" prop="decisionMaker">
            <el-select v-model="form.decisionMaker" placeholder="">
              <el-option v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
        </el-col>
      </el-row>
      <el-divider content-position="left">
        <dev style="width: 50px; height: 40px; font-size: 18px">联系信息</dev>
      </el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label="联系电话" prop="telephone">
            <el-input v-model="form.telephone" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="微信" prop="mail">
            <el-input v-model="form.mail" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="家庭地址" prop="address">
            <el-input v-model="form.address" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="最佳拜访时间" prop="visitTime">
            <el-input v-model="form.visitTime" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="最佳拜访地点" prop="visitPlace">
            <el-input v-model="form.visitPlace" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
        </el-col>
      </el-row>
      <el-tabs v-model="activeName" v-if="this.operatingState != 'Insert'">
        <el-tab-pane label="学历信息" name="first">
          <EducationList :key="timer" :supForm="this.row" />
        </el-tab-pane>
        <el-tab-pane label="社会关系" name="second">
          <RelationshipList :key="timer" :supForm="this.row" />
        </el-tab-pane>
      </el-tabs>
      <div class="md-auditInfo">
        <el-divider content-position="left">
          <dev style="width: 50px; height: 40px; font-size: 18px">其它信息</dev>
        </el-divider>
        <el-row>
          <el-col :span="6">
            <el-form-item label="创建人">
              <el-input v-model="form.createByName" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间">
              <el-input v-model="form.createTime" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="修改人">
              <el-input v-model="form.updateByName" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="修改时间">
              <el-input v-model="form.updateTime" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" type="primary" @click="submitForm" v-if="this.operatingState != 'Browse'"
        :disabled="submitButtonEditStatus">确 定</el-button>
      <el-button size="mini" @click="cancel">取 消</el-button>
    </div>
  </div>
  <!-- </el-dialog> -->
</template>

<script>
  import {
    listContact,
    getContact,
    delContact,
    addContact,
    updateContact
  } from "@/api/business/spd/bo/contact";
  // import EducationList from '../education/educationList.vue';
  // import RelationshipList from '../relationship/relationshipList.vue';

  export default {
    name: "CustomersContact",
    props: ['operatingState', 'row', 'disable', 'state', 'customersId', 'customersName', 'customersCode'],
    model: {
      prop: 'isAdd0',
      event: 'jugislist'
    },
    dicts: ['sys_user_sex', 'mk_bo_contact_state', 'mk_bo_section', 'mk_bo_position', 'mk_bo_job_title', 'mk_bo_power',
      'mk_bo_support', 'mk_bo_field_expertise', 'sys_yes_no', 'mk_bo_contact_type'
    ],
    components: {
      EducationList: () => import('../education/educationList.vue'),
      RelationshipList: () => import('../relationship/relationshipList.vue')
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 联系人管理表格数据
        contactList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          name: null,
          telephone: null,
          customerName: null,
        },
        // 表单参数
        form: {
          id: null,
          code: null,
          name: null,
          gander: null,
          customer: null,
          customer_name: null,
          customer_code: null,
          contact_classification: null,
          birthday: null,
          birthplace: null,
          hobby: null,
          state: null,
          superior_contact_name: null,
          superior_contact: null,
          section: null,
          position: null,
          job_title: null,
          power: null,
          support: null,
          field_expertise: null,
          decision_maker: null,
          telephone: null,
          mail: null,
          address: null,
          visit_time: null,
          visit_place: null,
          organization: null,
          organization_name: null,
          area: null,
          department: null,
          department_name: null,
          department_code: null,
          create_by: null,
          create_time: null,
          update_by: null,
          update_time: null,
          del_flag: null,
          bo_id: null,
          zt_id: null
        },
        // 表单校验
        rules: {
          name: [{
            required: true,
            message: "姓名不能为空",
            trigger: "blur"
          }],
          gander: [{
            required: true,
            message: "性别不能为空",
            trigger: "blur"
          }],
          customerName: [{
            required: true,
            message: "所属客户名称不能为空",
            trigger: "blur"
          }],
          state: [{
            required: true,
            message: "状态不能为空",
            trigger: "blur"
          }],
          section: [{
            required: true,
            message: "任职科室不能为空",
            trigger: "blur"
          }],
          position: [{
            required: true,
            message: "职务不能为空",
            trigger: "blur"
          }],
          jobTitle: [{
            required: true,
            message: "职称不能为空",
            trigger: "blur"
          }],
          power: [{
            required: true,
            message: "决策力不能为空",
            trigger: "blur"
          }],
          decisionMaker: [{
            required: true,
            message: "关键决策人不能为空",
            trigger: "blur"
          }],
          telephone: [{
              required: true,
              message: "联系电话不能为空",
              trigger: "blur"
            },
            {
              validator: function (rule, value, callback) {
                if (/^1[34578]\d{9}$/.test(value) == false) {
                  callback(new Error("手机号格式错误"));
                } else {
                  callback();
                }
              },
              trigger: "blur"
            }
          ],
        },
        //重新加载子组件参数
        timer: '',
        activeName: 'first',
        //确定按钮是否可点
        submitButtonEditStatus: false,
      };
    },
    created() {
      this.initialization();
    },
    methods: {
      // 初始化
      initialization() {
        // 客户数据赋值
        this.form.customer = this.customersId;
        this.form.customerCode = this.customersCode;
        this.form.customerName = this.customersName;
        if (this.operatingState == 'Browse') {
          this.handleBrowse(this.row);
        } else if (this.operatingState == 'Update') {
          this.handleUpdate(this.row);
        }
      },
      // 取消按钮
      cancel() {
        this.$emit('jugislist', false);
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.operatingState = "Update";
        const id = row.id || this.ids
        getContact(id).then(response => {
          this.form = response.data;
          this.timer = new Date().getTime();
        });
      },
      /** 查看按钮操作 */
      handleBrowse(row) {
        const id = row.id || this.ids
        getContact(id).then(response => {
          this.form = response.data;
          this.operatingState = "Browse";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.submitButtonEditStatus = true;
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateContact(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.submitButtonEditStatus = false;
                this.cancel();
                this.$parent.handleCheck(this.customersId);
              });
            } else {
              addContact(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.submitButtonEditStatus = false;
                this.cancel();
                this.$parent.handleCheck(this.customersId);
              });
            }
          } else {
            this.submitButtonEditStatus = false;
          }
        });
      },
      additionalCondition() {
        return {
          parame: {
            customer: this.form.customer ? this.form.customer : 'xxx'
          }
        }
      },
    }
  };

</script>