CRM项目前端线索详情页完成与线索提交修改的细节微调------CRM项目

<template>
  <el-form
      ref="clueRemarkRefForm"
      :model="clueRemark"
      label-width="110px"
      :rules="clueRemarkRules"
      style="max-width: 95%;">

    <el-form-item label="负责人">
      <div class="detail">{{clueDetail.ownerDO.name}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="所属活动">
      <div class="detail">{{clueDetail.activityDO.name}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="姓名">
      <div class="detail">{{clueDetail.fullName}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="称呼">
      <div class="detail">{{clueDetail.appellationDO.typeValue}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="手机">
      <div class="detail">{{clueDetail.phone}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="微信">
      <div class="detail">{{clueDetail.weixin}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="QQ">
      <div class="detail">{{clueDetail.qq}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="邮箱">
      <div class="detail">{{clueDetail.email}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="年龄">
      <div class="detail">{{clueDetail.age}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="职业">
      <div class="detail">{{clueDetail.job}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="年收入">
      <div class="detail">{{clueDetail.yearIn***e}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="住址">
      <div class="detail">{{clueDetail.address}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="贷款">
      <div class="detail">{{clueDetail.needLoanDO.typeValue}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="意向状态">
      <div class="detail">{{clueDetail.intentionStateDO.typeValue}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="意向产品">
      <div class="detail">{{clueDetail.intentionProductDO.name}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="线索状态">
      <div class="detail">{{clueDetail.stateDO.typeValue}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="线索来源">
      <div class="detail">{{clueDetail.sourceDO.typeValue}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="线索描述">
      <div class="detail">{{clueDetail.description}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="下次联系时间">
      <div class="detail">{{clueDetail.nextContactTime}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="填写跟踪记录" prop="noteContent">
      <el-input
          v-model="clueRemark.noteContent"
          :rows="8"
          type="textarea"/>
    </el-form-item>
    <el-form-item label="跟踪方式" prop="noteWay">
      <el-select
          v-model="clueRemark.noteWay"
          placeholder="请选择跟踪方式"
          style="width: 100%"
          @click="loadDicValue('noteWay')"
          clearable>
        <el-option
            v-for="item in noteWayOptions"
            :key="item.id"
            :label="item.typeValue"
            :value="item.id"/>
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="clueRemarkSubmit">提 交</el-button>
      <el-button type="su***ess" @click="convertCustomer" v-if="clueDetail.state !== -1">转换客户</el-button>
      <el-button type="su***ess" plain @click="goBack">返 回</el-button>
    </el-form-item>
  </el-form>

</template>

<script>
import { doGet } from '../http/httpRequest';
import { messageTip, goBack } from '../util/util';
export default {
    name : "clueDetail",
    inject : ["reload"],
    mounted(){
        this.loadClueDetail();
    },
    methods : {
      goBack,
      loadClueDetail(){
          let id = this.$route.params.id;
          doGet("/api/clue/"+id,{}).then(resp => {
              if(resp.data.code === 200){
                  this.clueDetail = resp.data.data;
              }
              else{
                  messageTip("网络异常","error");
              }
          });
      },
      // 提交线索跟踪记录
      clueRemarkSubmit(){
          if(this.clueRemark.noteContent&&this.clueRemark.noteWay){
              doPost("/api/clue/remark", 
                  {
                      clueId : this.clueDetail.id,
                      noteContent : this.clueRemark.noteContent,
                      noteWay : this.clueRemark.noteWay
                  }
              ).then(resp => {
                  if(resp.data.code === 200){
                      messageTip("提交成功","su***ess");
                      this.reload();
                  }
                  else{
                      messageTip("提交失败","error");
                  }
              });
          }
          else{
              messageTip("请输入完整的信息","warning");
          }
      },
      //加载字典数据
      loadDicValue(typeCode) {
        doGet("/api/dicValue/" + typeCode, {}).then( resp => {
          if (resp.data.code === 200) {
            this.noteWayOptions = resp.data.data;
          }
          else{
            messageTip("网络错误","error");
          }
        });
      }
    },
    data(){
        return {
            clueRemark : {},
            clueRemarkRules : {},
            clueDetail : {
                ownerDO : {},
                activityDO : {},
                appellationDO : {},
                needLoanDO : {},
                intentionStateDO : {},
                intentionProductDO : {},
                stateDO : {},
                sourceDO  : {}
            },
            noteWayOptions : [{}]
        }
    }
}
</script>

<style scoped>
</style>

<template>

  <el-form

      ref="clueRemarkRefForm"

      :model="clueRemark"

      label-width="110px"

      :rules="clueRemarkRules"

      style="max-width: 95%;">

    <el-form-item label="负责人">

      <div class="detail">{{clueDetail.ownerDO.name}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="所属活动">

      <div class="detail">{{clueDetail.activityDO.name}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="姓名">

      <div class="detail">{{clueDetail.fullName}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="称呼">

      <div class="detail">{{clueDetail.appellationDO.typeValue}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="手机">

      <div class="detail">{{clueDetail.phone}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="微信">

      <div class="detail">{{clueDetail.weixin}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="QQ">

      <div class="detail">{{clueDetail.qq}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="邮箱">

      <div class="detail">{{clueDetail.email}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="年龄">

      <div class="detail">{{clueDetail.age}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="职业">

      <div class="detail">{{clueDetail.job}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="年收入">

      <div class="detail">{{clueDetail.yearIn***e}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="住址">

      <div class="detail">{{clueDetail.address}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="贷款">

      <div class="detail">{{clueDetail.needLoanDO.typeValue}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="意向状态">

      <div class="detail">{{clueDetail.intentionStateDO.typeValue}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="意向产品">

      <div class="detail">{{clueDetail.intentionProductDO.name}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="线索状态">

      <div class="detail">{{clueDetail.stateDO.typeValue}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="线索来源">

      <div class="detail">{{clueDetail.sourceDO.typeValue}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="线索描述">

      <div class="detail">{{clueDetail.description}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="下次联系时间">

      <div class="detail">{{clueDetail.nextContactTime}}&nbsp;</div>

    </el-form-item>

    <el-form-item label="填写跟踪记录" prop="noteContent">

      <el-input

          v-model="clueRemark.noteContent"

          :rows="8"

          type="textarea"/>

    </el-form-item>

    <el-form-item label="跟踪方式" prop="noteWay">

      <el-select

          v-model="clueRemark.noteWay"

          placeholder="请选择跟踪方式"

          style="width: 100%"

          @click="loadDicValue('noteWay')"

          clearable>

        <el-option

            v-for="item in noteWayOptions"

            :key="item.id"

            :label="item.typeValue"

            :value="item.id"/>

      </el-select>

    </el-form-item>

    <el-form-item>

      <el-button type="primary" @click="clueRemarkSubmit">提 交</el-button>

      <el-button type="su***ess" @click="convertCustomer" v-if="clueDetail.state !== -1">转换客户</el-button>

      <el-button type="su***ess" plain @click="goBack">返 回</el-button>

    </el-form-item>

  </el-form>

</template>

<script>

import { doGet } from '../http/httpRequest';

import { messageTip, goBack } from '../util/util';

export default {

    name : "clueDetail",

    inject : ["reload"],

    mounted(){

        this.loadClueDetail();

    },

    methods : {

      goBack,

      loadClueDetail(){

          let id = this.$route.params.id;

          doGet("/api/clue/"+id,{}).then(resp => {

              if(resp.data.code === 200){

                  this.clueDetail = resp.data.data;

              }

              else{

                  messageTip("网络异常","error");

              }

          });

      },

      // 提交线索跟踪记录

      clueRemarkSubmit(){

          if(this.clueRemark.noteContent&&this.clueRemark.noteWay){

              doPost("/api/clue/remark",

                  {

                      clueId : this.clueDetail.id,

                      noteContent : this.clueRemark.noteContent,

                      noteWay : this.clueRemark.noteWay

                  }

              ).then(resp => {

                  if(resp.data.code === 200){

                      messageTip("提交成功","su***ess");

                      this.reload();

                  }

                  else{

                      messageTip("提交失败","error");

                  }

              });

          }

          else{

              messageTip("请输入完整的信息","warning");

          }

      },

      //加载字典数据

      loadDicValue(typeCode) {

        doGet("/api/dicValue/" + typeCode, {}).then( resp => {

          if (resp.data.code === 200) {

            this.noteWayOptions = resp.data.data;

          }

          else{

            messageTip("网络错误","error");

          }

        });

      }

    },

    data(){

        return {

            clueRemark : {},

            clueRemarkRules : {},

            clueDetail : {

                ownerDO : {},

                activityDO : {},

                appellationDO : {},

                needLoanDO : {},

                intentionStateDO : {},

                intentionProductDO : {},

                stateDO : {},

                sourceDO  : {}

            },

            noteWayOptions : [{}]

        }

    }

}

</script>

<style scoped>

</style>

<template>
    <el-form
      ref="clueRefForm"
      :model="clueQuery"
      :rules="clueRules"
      label-width="100px"
      style="max-width: 95%;">

    <el-form-item label="负责人">
      <el-select
          v-model="clueQuery.ownerId"
          placeholder="请选择负责人"
          style="width: 100%"
          clearable
          disabled>
        <el-option
            v-for="item in ownerOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
      </el-select>
    </el-form-item>

    <el-form-item label="所属活动">
      <el-select
          v-model="clueQuery.activityId"
          placeholder="请选择所属活动"
          style="width: 100%"
          clearable>
        <el-option
            v-for="item in activityOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
      </el-select>
    </el-form-item>

    <el-form-item label="姓名" prop="fullName">
      <el-input v-model="clueQuery.fullName"/>
    </el-form-item>

    <el-form-item label="称呼">
      <el-select
          v-model="clueQuery.appellation"
          placeholder="请选择称呼"
          style="width: 100%"
          clearable>
        <el-option
            v-for="item in appellationOptions"
            :key="item.id"
            :label="item.typeValue"
            :value="item.id"/>
      </el-select>
    </el-form-item>

    <el-form-item label="手机" v-if="clueQuery.id > 0"><!--此时是编辑-->
      <el-input v-model="clueQuery.phone" disabled/>
    </el-form-item>

    <el-form-item label="手机" prop="phone" v-else><!--此时是录入-->
      <el-input v-model="clueQuery.phone"/>
    </el-form-item>

    <el-form-item label="微信">
      <el-input v-model="clueQuery.weixin"/>
    </el-form-item>

    <el-form-item label="QQ" prop="qq">
      <el-input v-model="clueQuery.qq"/>
    </el-form-item>

    <el-form-item label="邮箱" prop="email">
      <el-input v-model="clueQuery.email"/>
    </el-form-item>

    <el-form-item label="年龄" prop="age">
      <el-input v-model="clueQuery.age"/>
    </el-form-item>

    <el-form-item label="职业">
      <el-input v-model="clueQuery.job"/>
    </el-form-item>

    <el-form-item label="年收入" prop="yearIn***e">
      <el-input v-model="clueQuery.yearIn***e"/>
    </el-form-item>

    <el-form-item label="住址">
      <el-input v-model="clueQuery.address"/>
    </el-form-item>

    <el-form-item label="贷款">
      <el-select
          v-model="clueQuery.needLoan"
          placeholder="请选择是否需要贷款"
          style="width: 100%"
          clearable>
        <el-option
            v-for="item in needLoanOptions"
            :key="item.id"
            :label="item.typeValue"
            :value="item.id"/>
      </el-select>
    </el-form-item>

    <el-form-item label="意向状态">
      <el-select
          v-model="clueQuery.intentionState"
          placeholder="请选择意向状态"
          style="width: 100%"
          clearable>
        <el-option
            v-for="item in intentionStateOptions"
            :key="item.id"
            :label="item.typeValue"
            :value="item.id"/>
      </el-select>
    </el-form-item>

    <el-form-item label="意向产品">
      <el-select
          v-model="clueQuery.intentionProduct"
          placeholder="请选择意向产品"
          style="width: 100%"
          clearable>
        <el-option
            v-for="item in productOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
      </el-select>
    </el-form-item>

    <el-form-item label="线索状态">
      <el-select
          v-model="clueQuery.state"
          placeholder="请选择线索状态"
          style="width: 100%"
          clearable>
        <el-option
            v-for="item in clueStateOptions"
            :key="item.id"
            :label="item.typeValue"
            :value="item.id"/>
      </el-select>
    </el-form-item>

    <el-form-item label="线索来源">
      <el-select
          v-model="clueQuery.source"
          placeholder="请选择线索来源"
          style="width: 100%"
          clearable>
        <el-option
            v-for="item in sourceOptions"
            :key="item.id"
            :label="item.typeValue"
            :value="item.id"/>
      </el-select>
    </el-form-item>

    <el-form-item label="线索描述" prop="description">
      <el-input
          v-model="clueQuery.description"
          :rows="5"
          type="textarea"
          placeholder="请输入线索描述"/>
    </el-form-item>

    <el-form-item label="下次联系时间">
      <el-date-picker
          v-model="clueQuery.nextContactTime"
          type="datetime"
          style="width: 100%;"
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择下次联系时间"/>
    </el-form-item>

    <div class="parent">
      <el-form-item class="child">
        <el-button type="primary" @click="addClueSubmit()">提 交</el-button>
        <el-button type="su***ess" plain @click="goBack">返 回</el-button>
      </el-form-item>
    </div>
  </el-form>
</template>

<script>
import { doGet, doPost, doPut } from "../http/httpRequest.js";
import { goBack, messageTip } from "../util/util";
export default {
    name : "clueRecordView",
    mounted(){
      this.loadDicValue('appellation');
      this.loadDicValue('needLoan');
      this.loadDicValue('intentionState');
      this.loadDicValue('clueState');
      this.loadDicValue('source');
      this.loadDicValue('activity');
      this.loadDicValue('product');
      this.loadLoginUser();
      //加载要编辑的数据（由于录入和编辑共用一个页面，所以要判断是编辑还是录入）
      this.loadClue();
      this.loadOwner();
    },
    data(){
      return {
        //线索表单对象，初始值是空
        clueQuery : {},
        //负责人的下拉选项
        ownerOptions : [{}],
        //市场活动的下拉选项数据，初始值是空
        activityOptions : [{}],
        //意向产品的下拉选项
        productOptions : [{}],
        appellationOptions : [{}],
        needLoanOptions : [{}],
        intentionStateOptions : [{}],
        clueStateOptions : [{}],
        sourceOptions : [{}],
        //录入线索验证规则
        clueRules : {
          phone : [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { pattern : /^1[3-9]\d{9}$/, message: '手机号码格式有误', trigger: 'blur'},
            { validator : this.checkPhone, trigger: 'blur'}
          ],
          fullName : [
            { min: 2, message: '姓名至少2个汉字', trigger: 'blur'},
            { pattern : /^[\u4e00-\u9fa5]{0,}$/, message: '姓名必须为中文汉字', trigger: 'blur'},
          ],
          qq : [
            { min: 5, message: 'QQ号至少为5位', trigger: 'blur'},
            { pattern : /^\d+$/, message: 'QQ号码必须为数字', trigger: 'blur'},
          ],
          email: [
            { pattern : /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '邮箱格式有误', trigger: 'blur'},
          ],
          age: [
            { pattern : /^\d+$/, message: '年龄必须为数字', trigger: 'blur'},
          ],
          yearIn***e: [
            { pattern : /^[0-9]+(\.[0-9]{2})?$/, message: '年收入必须是整数或者两位小数', trigger: 'blur'}
          ],
          description: [
            { min: 5, max: 255, message: '线索描述长度为5-255个字符', trigger: 'blur'},
          ],
        },
      }
    },
    methods : {
      goBack,
      loadLoginUser(){
        // 获取用户名
        doGet("/api/login/info",{}).then((resp) => {
          let user = resp.data.data;
          this.clueQuery.ownerId = user.id;
        });
      },
      // 提交表单
      addClueSubmit(){
        this.$refs.clueRefForm.validate((isValid) => {
          if(isValid){
            let formData = new FormData();
            for(let field in this.clueQuery){
              // 校验字段是否有值
              if(this.clueQuery[field]){
                formData.append(field,this.clueQuery[field]);
              }
            }
            // 编辑
            if(this.clueQuery.id > 0){
              doPut("/api/clue/edit",formData).then(resp => {
                  if(resp.data.code === 200){
                      messageTip("编辑成功","su***ess");
                      this.$router.back();
                  }
                  else{
                      messageTip("编辑失败","error");
                  }
              });
            }
            // 新增
            else{
              doPost("/api/clue/add",formData).then(resp => {
                  if(resp.data.code === 200){
                      messageTip("提交成功","su***ess");
                      this.$router.back();
                  }
                  else{
                      messageTip("提交失败","error");
                  }
              });
            }
          }
        })
      },
      // 加载活动负责人
      loadOwner(){
        doGet("/api/user/activityOwner",{}).then(resp => {
          if(resp.data.code === 200){
            this.ownerOptions = resp.data.data;
          }
          else{
            messageTip("网络错误","error");
          }
        });
      },
      //加载字典数据
      loadDicValue(typeCode) {
        doGet("/api/dicValue/" + typeCode, {}).then( resp => {
          if (resp.data.code === 200) {
            if (typeCode === 'appellation') {
              this.appellationOptions = resp.data.data;
            }else if (typeCode === 'needLoan') {
              this.needLoanOptions = resp.data.data;
            }else if (typeCode === 'intentionState') {
              this.intentionStateOptions = resp.data.data;
            }else if (typeCode === 'clueState') {
              this.clueStateOptions = resp.data.data;
            }else if (typeCode === 'source') {
              this.sourceOptions = resp.data.data;
            }else if (typeCode === 'activity') {
              this.activityOptions = resp.data.data;
            }else if (typeCode === 'product') {
              this.productOptions = resp.data.data;
            }
          }
          else{
            messageTip("网络错误","error");
          }
        });
      },
      checkPhone(rule,value,callback){
        let phone = value;
        if(phone){
          doGet("/api/clue/phone"+phone,{}).then(resp => {
            if(resp.data.code === 500){
              return callback(new Error('该手机号已被录入'));
            }
            else{
              // 验证通过调用callback继续走
              return callback();
            }
          })
        }
      },
      loadClue(){
        let id = this.$route.params.id;
            if(id){
                doGet("/api/clue/"+id,{}).then(resp => {
                  if(resp.data.code === 200){
                    this.clueQuery = resp.data.data;
                  }
                  else{
                    messageTip("网络错误","error");
                  }
                });
            }
      }
    }
}
</script>

<style scoped>

</style>

<template>

    <el-form

      ref="clueRefForm"

      :model="clueQuery"

      :rules="clueRules"

      label-width="100px"

      style="max-width: 95%;">

    <el-form-item label="负责人">

      <el-select

          v-model="clueQuery.ownerId"

          placeholder="请选择负责人"

          style="width: 100%"

          clearable

          disabled>

        <el-option

            v-for="item in ownerOptions"

            :key="item.id"

            :label="item.name"

            :value="item.id"/>

      </el-select>

    </el-form-item>

    <el-form-item label="所属活动">

      <el-select

          v-model="clueQuery.activityId"

          placeholder="请选择所属活动"

          style="width: 100%"

          clearable>

        <el-option

            v-for="item in activityOptions"

            :key="item.id"

            :label="item.name"

            :value="item.id"/>

      </el-select>

    </el-form-item>

    <el-form-item label="姓名" prop="fullName">

      <el-input v-model="clueQuery.fullName"/>

    </el-form-item>

    <el-form-item label="称呼">

      <el-select

          v-model="clueQuery.appellation"

          placeholder="请选择称呼"

          style="width: 100%"

          clearable>

        <el-option

            v-for="item in appellationOptions"

            :key="item.id"

            :label="item.typeValue"

            :value="item.id"/>

      </el-select>

    </el-form-item>

    <el-form-item label="手机" v-if="clueQuery.id > 0"><!--此时是编辑-->

      <el-input v-model="clueQuery.phone" disabled/>

    </el-form-item>

    <el-form-item label="手机" prop="phone" v-else><!--此时是录入-->

      <el-input v-model="clueQuery.phone"/>

    </el-form-item>

    <el-form-item label="微信">

      <el-input v-model="clueQuery.weixin"/>

    </el-form-item>

    <el-form-item label="QQ" prop="qq">

      <el-input v-model="clueQuery.qq"/>

    </el-form-item>

    <el-form-item label="邮箱" prop="email">

      <el-input v-model="clueQuery.email"/>

    </el-form-item>

    <el-form-item label="年龄" prop="age">

      <el-input v-model="clueQuery.age"/>

    </el-form-item>

    <el-form-item label="职业">

      <el-input v-model="clueQuery.job"/>

    </el-form-item>

    <el-form-item label="年收入" prop="yearIn***e">

      <el-input v-model="clueQuery.yearIn***e"/>

    </el-form-item>

    <el-form-item label="住址">

      <el-input v-model="clueQuery.address"/>

    </el-form-item>

    <el-form-item label="贷款">

      <el-select

          v-model="clueQuery.needLoan"

          placeholder="请选择是否需要贷款"

          style="width: 100%"

          clearable>

        <el-option

            v-for="item in needLoanOptions"

            :key="item.id"

            :label="item.typeValue"

            :value="item.id"/>

      </el-select>

    </el-form-item>

    <el-form-item label="意向状态">

      <el-select

          v-model="clueQuery.intentionState"

          placeholder="请选择意向状态"

          style="width: 100%"

          clearable>

        <el-option

            v-for="item in intentionStateOptions"

            :key="item.id"

            :label="item.typeValue"

            :value="item.id"/>

      </el-select>

    </el-form-item>

    <el-form-item label="意向产品">

      <el-select

          v-model="clueQuery.intentionProduct"

          placeholder="请选择意向产品"

          style="width: 100%"

          clearable>

        <el-option

            v-for="item in productOptions"

            :key="item.id"

            :label="item.name"

            :value="item.id"/>

      </el-select>

    </el-form-item>

    <el-form-item label="线索状态">

      <el-select

          v-model="clueQuery.state"

          placeholder="请选择线索状态"

          style="width: 100%"

          clearable>

        <el-option

            v-for="item in clueStateOptions"

            :key="item.id"

            :label="item.typeValue"

            :value="item.id"/>

      </el-select>

    </el-form-item>

    <el-form-item label="线索来源">

      <el-select

          v-model="clueQuery.source"

          placeholder="请选择线索来源"

          style="width: 100%"

          clearable>

        <el-option

            v-for="item in sourceOptions"

            :key="item.id"

            :label="item.typeValue"

            :value="item.id"/>

      </el-select>

    </el-form-item>

    <el-form-item label="线索描述" prop="description">

      <el-input

          v-model="clueQuery.description"

          :rows="5"

          type="textarea"

          placeholder="请输入线索描述"/>

    </el-form-item>

    <el-form-item label="下次联系时间">

      <el-date-picker

          v-model="clueQuery.nextContactTime"

          type="datetime"

          style="width: 100%;"

          value-format="YYYY-MM-DD HH:mm:ss"

          placeholder="请选择下次联系时间"/>

    </el-form-item>

    <div class="parent">

      <el-form-item class="child">

        <el-button type="primary" @click="addClueSubmit()">提 交</el-button>

        <el-button type="su***ess" plain @click="goBack">返 回</el-button>

      </el-form-item>

    </div>

  </el-form>

</template>

<script>

import { doGet, doPost, doPut } from "../http/httpRequest.js";

import { goBack, messageTip } from "../util/util";

export default {

    name : "clueRecordView",

    mounted(){

      this.loadDicValue('appellation');

      this.loadDicValue('needLoan');

      this.loadDicValue('intentionState');

      this.loadDicValue('clueState');

      this.loadDicValue('source');

      this.loadDicValue('activity');

      this.loadDicValue('product');

      this.loadLoginUser();

      //加载要编辑的数据（由于录入和编辑共用一个页面，所以要判断是编辑还是录入）

      this.loadClue();

      this.loadOwner();

    },

    data(){

      return {

        //线索表单对象，初始值是空

        clueQuery : {},

        //负责人的下拉选项

        ownerOptions : [{}],

        //市场活动的下拉选项数据，初始值是空

        activityOptions : [{}],

        //意向产品的下拉选项

        productOptions : [{}],

        appellationOptions : [{}],

        needLoanOptions : [{}],

        intentionStateOptions : [{}],

        clueStateOptions : [{}],

        sourceOptions : [{}],

        //录入线索验证规则

        clueRules : {

          phone : [

            { required: true, message: '请输入手机号码', trigger: 'blur' },

            { pattern : /^1[3-9]\d{9}$/, message: '手机号码格式有误', trigger: 'blur'},

            { validator : this.checkPhone, trigger: 'blur'}

          ],

          fullName : [

            { min: 2, message: '姓名至少2个汉字', trigger: 'blur'},

            { pattern : /^[\u4e00-\u9fa5]{0,}$/, message: '姓名必须为中文汉字', trigger: 'blur'},

          ],

          qq : [

            { min: 5, message: 'QQ号至少为5位', trigger: 'blur'},

            { pattern : /^\d+$/, message: 'QQ号码必须为数字', trigger: 'blur'},

          ],

          email: [

            { pattern : /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '邮箱格式有误', trigger: 'blur'},

          ],

          age: [

            { pattern : /^\d+$/, message: '年龄必须为数字', trigger: 'blur'},

          ],

          yearIn***e: [

            { pattern : /^[0-9]+(\.[0-9]{2})?$/, message: '年收入必须是整数或者两位小数', trigger: 'blur'}

          ],

          description: [

            { min: 5, max: 255, message: '线索描述长度为5-255个字符', trigger: 'blur'},

          ],

        },

      }

    },

    methods : {

      goBack,

      loadLoginUser(){

        // 获取用户名

        doGet("/api/login/info",{}).then((resp) => {

          let user = resp.data.data;

          this.clueQuery.ownerId = user.id;

        });

      },

      // 提交表单

      addClueSubmit(){

        this.$refs.clueRefForm.validate((isValid) => {

          if(isValid){

            let formData = new FormData();

            for(let field in this.clueQuery){

              // 校验字段是否有值

              if(this.clueQuery[field]){

                formData.append(field,this.clueQuery[field]);

              }

            }

            // 编辑

            if(this.clueQuery.id > 0){

              doPut("/api/clue/edit",formData).then(resp => {

                  if(resp.data.code === 200){

                      messageTip("编辑成功","su***ess");

                      this.$router.back();

                  }

                  else{

                      messageTip("编辑失败","error");

                  }

              });

            }

            // 新增

            else{

              doPost("/api/clue/add",formData).then(resp => {

                  if(resp.data.code === 200){

                      messageTip("提交成功","su***ess");

                      this.$router.back();

                  }

                  else{

                      messageTip("提交失败","error");

                  }

              });

            }

          }

        })

      },

      // 加载活动负责人

      loadOwner(){

        doGet("/api/user/activityOwner",{}).then(resp => {

          if(resp.data.code === 200){

            this.ownerOptions = resp.data.data;

          }

          else{

            messageTip("网络错误","error");

          }

        });

      },

      //加载字典数据

      loadDicValue(typeCode) {

        doGet("/api/dicValue/" + typeCode, {}).then( resp => {

          if (resp.data.code === 200) {

            if (typeCode === 'appellation') {

              this.appellationOptions = resp.data.data;

            }else if (typeCode === 'needLoan') {

              this.needLoanOptions = resp.data.data;

            }else if (typeCode === 'intentionState') {

              this.intentionStateOptions = resp.data.data;

            }else if (typeCode === 'clueState') {

              this.clueStateOptions = resp.data.data;

            }else if (typeCode === 'source') {

              this.sourceOptions = resp.data.data;

            }else if (typeCode === 'activity') {

              this.activityOptions = resp.data.data;

            }else if (typeCode === 'product') {

              this.productOptions = resp.data.data;

            }

          }

          else{

            messageTip("网络错误","error");

          }

        });

      },

      checkPhone(rule,value,callback){

        let phone = value;

        if(phone){

          doGet("/api/clue/phone"+phone,{}).then(resp => {

            if(resp.data.code === 500){

              return callback(new Error('该手机号已被录入'));

            }

            else{

              // 验证通过调用callback继续走

              return callback();

            }

          })

        }

      },

      loadClue(){

        let id = this.$route.params.id;

            if(id){

                doGet("/api/clue/"+id,{}).then(resp => {

                  if(resp.data.code === 200){

                    this.clueQuery = resp.data.data;

                  }

                  else{

                    messageTip("网络错误","error");

                  }

                });

            }

      }

    }

}

</script>

<style scoped>

</style>