CRM项目前端复用样式并解析线索信息并在校验完成后提交信息跟踪------CRM项目

旧约Alatus

已于 2024-03-01 21:28:14 修改

阅读量974

点赞数 15

分类专栏： CRM项目前端 # VUE框架文章标签： vue.js elementui javascript 前端前端框架 vue ajax

于 2024-02-29 23:32:56 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/136368483

版权

前端同时被 3 个专栏收录

334 篇文章 2 订阅

订阅专栏

VUE框架

250 篇文章 0 订阅

订阅专栏

CRM项目

142 篇文章 0 订阅

订阅专栏

<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="yearIncome">
      <el-input v-model="clueQuery.yearIncome"/>
    </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="success" 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'},
          ],
          yearIncome: [
            { 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("编辑成功","success");
                      this.$router.back();
                  }
                  else{
                      messageTip("编辑失败","error");
                  }
              });
            }
            // 新增
            else{
              doPost("/api/clue/add",formData).then(resp => {
                  if(resp.data.code === 200){
                      messageTip("提交成功","success");
                      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;
            }
          }
        })
      },
      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="yearIncome">

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

</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="success" 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'},

],

yearIncome: [

{ 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("编辑成功","success");

this.$router.back();

}

else{

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

}

});

}

// 新增

else{

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

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

messageTip("提交成功","success");

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;

}

}

})

},

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-button type="primary" class="btn" @click="addClue()">导入线索</el-button>
    <el-button type="success" class="btn" @click="importExcel()">导入线索(Excel)</el-button>
    <el-button type="danger" class="btn" @click="batchDel()">批量删除</el-button>
    <el-table
      :data="clueList"
      style="width: 100%"
      @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="33%"/>
    <el-table-column type="index" label="序号" width="60%"/>
    <el-table-column property="ownerDO.name" label="负责人" width="120" />
    <el-table-column property="activityDO.name" label="所属活动"/>
    <el-table-column label="姓名">
      
      <template #default="scope">
        <a href="javascript:" @click="view(scope.row.id)">{{ scope.row.fullName }}</a>
      </template>
    </el-table-column>
    <el-table-column property="appellationDO.typeValue" label="称呼"/>
    <el-table-column property="phone" label="手机" width="120"/>
    <el-table-column property="weixin" label="微信" width="120"/>
    <el-table-column property="needLoanDO.typeValue" label="是否贷款"/>
    <el-table-column property="intentionStateDO.typeValue" label="意向状态"/>
    <el-table-column property="intentionProductDO.name" label="意向产品"/>
    <el-table-column property="stateDO.typeValue" label="线索状态"/>
    <el-table-column property="sourceDO.typeValue" label="线索来源"/>
    <el-table-column property="nextContactTime" label="下次联系时间" width="165"/>
    <el-table-column label="操作" width="230">
      <template #default="scope">
        <el-button type="primary" @click="view(scope.row.id)">详情</el-button>
        <el-button type="success" @click="edit(scope.row.id)">编辑</el-button>
        <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="parent">
        <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pageSize"
            :total="total"
            @prev-click="toPage"
            @next-click="toPage"
            @current-change="toPage"
        />
    </div>

  
  <el-dialog v-model="importExcelDialogVisible" title="导入线索Excel" width="55%" center draggable>
    <el-upload
    ref="uploadRef"
    method="post"
    :http-request="uploadFile"
    :auto-upload="false"
  >
    <template #trigger>
      <el-button type="primary">选择Excel文件</el-button>
    </template>
    仅支持后缀名为.xls或.xlxs的文件

    <template #tip>
      <div class="fileTip">
        <div>重要提示：</div>
      <ul>
        <li>上传仅支持后缀名为.xls或.xlsx的文件；</li>
        <li>给定Excel文件的第一行将视为字段名；</li>
        <li>请确认您的文件大小不超过50MB；</li>
        <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式；</li>
        <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式；</li>
      </ul>
      </div>
    </template>
  </el-upload>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="importExcelDialogVisible = false">关 闭</el-button>
        <el-button class="ml-3" type="success" @click="submitUpload">上 传</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { doGet, doPost, doDelete } from '../http/httpRequest.js';
import { messageTip, messageConfirm } from '../util/util.js';
export default {
    name : "clueView",
    inject : ["reload"],
    data(){
        return {
            // 分页大小
            pageSize : 0,
            // 总分页
            total : 0,
            // 线索列表
            clueList : [{
                ownerDO : {},
                activityDO : {},
                appellationDO : {},
                needLoanDO : {},
                intentionStateDO : {},
                intentionProductDO : {},
                stateDO : {},
                sourceDO : {}
            }],
            // 已选择的线索
            selectedIds : {},
            // Excel弹出框控制
            importExcelDialogVisible : false
        }
    },
    mounted(){
        this.getData(1);
    },
    methods : {
        // 勾选或者取消勾选触发
        handleSelectionChange(selectionItems){
            this.selectedIds = [];
            // 将已经勾选的数据传给我们
            selectionItems.forEach(data => {
                this.selectedIds.push(data.id);
            });
        },
        // 批量删除
        batchDel(){
          if(!this.selectedIds.length){
                messageTip("请选择要删除的数据","warning");
                return;
            }
            messageConfirm("注意:删除后不可恢复","您确定要删除?").then(() => {
                let ids = this.selectedIds.join(",");
                doDelete("/api/clue/batchDel",{ids : ids}).then(resp => {
                    if(resp.data.code === 200){
                        messageTip("批量删除成功","success");
                        this.reload();
                    }
                    else{
                        messageTip("批量删除失败:"+resp.data.msg,"error");
                    }
                });
            }).catch(() => {
              messageTip("已取消批量删除","warning");
            });
        },
        // 删除
        del(id){
          messageConfirm("注意:删除后不可恢复","您确定要删除?").then(() => {
                doDelete("/api/clue/delete/"+id,{}).then(resp => {
                    if(resp.data.code === 200){
                        messageTip("删除成功","success");
                        this.reload();
                    }
                    else{
                        messageTip("删除失败:"+resp.data.msg,"error");
                    }
                });
            }).catch(() => {
              messageTip("已取消删除","warning");
            });
        },
        // 真正的http上传文件
        uploadFile(file){
          let fileObj = file.file;
          let formData = new FormData();
          formData.append('file',fileObj);
          doPost("/api/clue/importExcel",formData).then(resp => {
            console.log(resp)
            if(resp.data.code === 200){
              messageTip("录入成功","success");
              this.$refs.uploadRef.clearFiles();
              this.reload();
            }
            else{
              messageTip("录入失败","error");
            }
          });
        },
        // 发起表单提交
        submitUpload(){
          this.$refs.uploadRef.submit();
        },
        // 点击提交Excel按钮触发
        importExcel(){
          this.importExcelDialogVisible = true;
        },
        // 自动传参
        toPage(current){
            // 把当前页作为current传递给获取数据方法,就可以实现分页查询了
            this.getData(current);
        },
        // 获取分页信息
        getData(current){
            //获取数据,查询用户列表数据
            doGet("api/clues",{
                // 当前查询第几页
                current : current
            }).then(resp => {
                if(resp.data.code === 200){
                    this.clueList = resp.data.data.list;
                    this.total = resp.data.data.total;
                    this.pageSize = resp.data.data.pageSize;
                }
                else{
                  messageTip("网络错误","error");
                }
            });
        },
        // 修改
        edit(id){
          this.$router.push("/dashboard/clue/edit/" + id);
        },
        // 详情页
        view(id){
          this.$router.push("/dashboard/clue/detail/" + id);
        },
        // 新增线索
        addClue(){
          this.$router.push("/dashboard/clue/add");
        }
    }
}
</script>

<style scoped>
.fileTip{
  padding-top: 3%;
}
</style>
<template>

<el-button type="primary" class="btn" @click="addClue()">导入线索</el-button>

<el-button type="success" class="btn" @click="importExcel()">导入线索(Excel)</el-button>

<el-button type="danger" class="btn" @click="batchDel()">批量删除</el-button>

<el-table

:data="clueList"

style="width: 100%"

@selection-change="handleSelectionChange">

<el-table-column type="selection" width="33%"/>

<el-table-column type="index" label="序号" width="60%"/>

<el-table-column property="ownerDO.name" label="负责人" width="120" />

<el-table-column property="activityDO.name" label="所属活动"/>

<el-table-column label="姓名">



<template #default="scope">

<a href="javascript:" @click="view(scope.row.id)">{{ scope.row.fullName }}</a>

</template>

</el-table-column>

<el-table-column property="appellationDO.typeValue" label="称呼"/>

<el-table-column property="phone" label="手机" width="120"/>

<el-table-column property="weixin" label="微信" width="120"/>

<el-table-column property="needLoanDO.typeValue" label="是否贷款"/>

<el-table-column property="intentionStateDO.typeValue" label="意向状态"/>

<el-table-column property="intentionProductDO.name" label="意向产品"/>

<el-table-column property="stateDO.typeValue" label="线索状态"/>

<el-table-column property="sourceDO.typeValue" label="线索来源"/>

<el-table-column property="nextContactTime" label="下次联系时间" width="165"/>

<el-table-column label="操作" width="230">

<template #default="scope">

<el-button type="primary" @click="view(scope.row.id)">详情</el-button>

<el-button type="success" @click="edit(scope.row.id)">编辑</el-button>

<el-button type="danger" @click="del(scope.row.id)">删除</el-button>

</template>

</el-table-column>

</el-table>

<div class="parent">

<el-pagination

background

layout="prev, pager, next"

:page-size="pageSize"

:total="total"

@prev-click="toPage"

@next-click="toPage"

@current-change="toPage"

/>

</div>



<el-dialog v-model="importExcelDialogVisible" title="导入线索Excel" width="55%" center draggable>

<el-upload

ref="uploadRef"

method="post"

:http-request="uploadFile"

:auto-upload="false"

>

<template #trigger>

<el-button type="primary">选择Excel文件</el-button>

</template>

仅支持后缀名为.xls或.xlxs的文件

<template #tip>

<div class="fileTip">

<div>重要提示：</div>

<ul>

<li>上传仅支持后缀名为.xls或.xlsx的文件；</li>

<li>给定Excel文件的第一行将视为字段名；</li>

<li>请确认您的文件大小不超过50MB；</li>

<li>日期值以文本形式保存，必须符合yyyy-MM-dd格式；</li>

<li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式；</li>

</ul>

</div>

</template>

</el-upload>

<template #footer>

<span class="dialog-footer">

<el-button @click="importExcelDialogVisible = false">关闭</el-button>

<el-button class="ml-3" type="success" @click="submitUpload">上传</el-button>

</span>

</template>

</el-dialog>

</template>

<script>

import { doGet, doPost, doDelete } from '../http/httpRequest.js';

import { messageTip, messageConfirm } from '../util/util.js';

export default {

name : "clueView",

inject : ["reload"],

data(){

return {

// 分页大小

pageSize : 0,

// 总分页

total : 0,

// 线索列表

clueList : [{

ownerDO : {},

activityDO : {},

appellationDO : {},

needLoanDO : {},

intentionStateDO : {},

intentionProductDO : {},

stateDO : {},

sourceDO : {}

}],

// 已选择的线索

selectedIds : {},

// Excel弹出框控制

importExcelDialogVisible : false

}

},

mounted(){

this.getData(1);

},

methods : {

// 勾选或者取消勾选触发

handleSelectionChange(selectionItems){

this.selectedIds = [];

// 将已经勾选的数据传给我们

selectionItems.forEach(data => {

this.selectedIds.push(data.id);

});

},

// 批量删除

batchDel(){

if(!this.selectedIds.length){

messageTip("请选择要删除的数据","warning");

return;

}

messageConfirm("注意:删除后不可恢复","您确定要删除?").then(() => {

let ids = this.selectedIds.join(",");

doDelete("/api/clue/batchDel",{ids : ids}).then(resp => {

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

messageTip("批量删除成功","success");

this.reload();

}

else{

messageTip("批量删除失败:"+resp.data.msg,"error");

}

});

}).catch(() => {

messageTip("已取消批量删除","warning");

});

},

// 删除

del(id){

messageConfirm("注意:删除后不可恢复","您确定要删除?").then(() => {

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

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

messageTip("删除成功","success");

this.reload();

}

else{

messageTip("删除失败:"+resp.data.msg,"error");

}

});

}).catch(() => {

messageTip("已取消删除","warning");

});

},

// 真正的http上传文件

uploadFile(file){

let fileObj = file.file;

let formData = new FormData();

formData.append('file',fileObj);

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

console.log(resp)

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

messageTip("录入成功","success");

this.$refs.uploadRef.clearFiles();

this.reload();

}

else{

messageTip("录入失败","error");

}

});

},

// 发起表单提交

submitUpload(){

this.$refs.uploadRef.submit();

},

// 点击提交Excel按钮触发

importExcel(){

this.importExcelDialogVisible = true;

},

// 自动传参

toPage(current){

// 把当前页作为current传递给获取数据方法,就可以实现分页查询了

this.getData(current);

},

// 获取分页信息

getData(current){

//获取数据,查询用户列表数据

doGet("api/clues",{

// 当前查询第几页

current : current

}).then(resp => {

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

this.clueList = resp.data.data.list;

this.total = resp.data.data.total;

this.pageSize = resp.data.data.pageSize;

}

else{

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

}

});

},

// 修改

edit(id){

this.$router.push("/dashboard/clue/edit/" + id);

},

// 详情页

view(id){

this.$router.push("/dashboard/clue/detail/" + id);

},

// 新增线索

addClue(){

this.$router.push("/dashboard/clue/add");

}

}

}

</script>

<style scoped>

.fileTip{

padding-top: 3%;

}

</style>

import { createRouter,createWebHistory } from "vue-router";

const router = createRouter({
    // 路由历史
    history:createWebHistory(),
    // 配置路由,可以配置多个路由
    routes:[
        {
            //路由路径
            path:"/",
            //对应路径的页面
            component:() => import('../view/login.vue')
        },
        {
            //路由路径
            path:"/dashboard",
            //对应路径的页面
            component:() => import('../view/dashboard.vue'),
            // 子路由
            children : [
                {
                    // 子路由的path开始不能有/
                    path:"user",
                    //对应路径的页面
                    component:() => import('../view/userView.vue'),
                },
                {
                    // 子路由路径
                    path:"user/detail/:id",
                    //路由路径所展示的页面
                    component : () => import('../view/userDetail.vue')
                },
                {
                    path:"activity",
                    component : () => import('../view/activityView.vue')
                },
                {
                    path:"activity/add",
                    component : () => import('../view/activityRecordView.vue')
                },
                {
                    path:"activity/edit/:id",
                    component : () => import('../view/activityRecordView.vue')
                },
                {
                    path:"activity/detail/:id",
                    component : () => import('../view/activityDetail.vue')
                },
                {
                    path:"clue",
                    component : () => import('../view/clueView.vue')
                },
                {
                    path:"clue/add",
                    component : () => import('../view/clueRecordView.vue')
                },
                {
                    path:"clue/edit/:id",
                    component : () => import('../view/clueRecordView.vue')
                },
                {
                    path:"clue/detail/:id",
                    component : () => import('../view/clueDetailView.vue')
                }
            ]
        }
    ]
});

export default router;
import { createRouter,createWebHistory } from "vue-router";

const router = createRouter({

// 路由历史

history:createWebHistory(),

// 配置路由,可以配置多个路由

routes:[

{

//路由路径

path:"/",

//对应路径的页面

component:() => import('../view/login.vue')

},

{

//路由路径

path:"/dashboard",

//对应路径的页面

component:() => import('../view/dashboard.vue'),

// 子路由

children : [

{

// 子路由的path开始不能有/

path:"user",

//对应路径的页面

component:() => import('../view/userView.vue'),

},

{

// 子路由路径

path:"user/detail/:id",

//路由路径所展示的页面

component : () => import('../view/userDetail.vue')

},

{

path:"activity",

component : () => import('../view/activityView.vue')

},

{

path:"activity/add",

component : () => import('../view/activityRecordView.vue')

},

{

path:"activity/edit/:id",

component : () => import('../view/activityRecordView.vue')

},

{

path:"activity/detail/:id",

component : () => import('../view/activityDetail.vue')

},

{

path:"clue",

component : () => import('../view/clueView.vue')

},

{

path:"clue/add",

component : () => import('../view/clueRecordView.vue')

},

{

path:"clue/edit/:id",

component : () => import('../view/clueRecordView.vue')

},

{

path:"clue/detail/:id",

component : () => import('../view/clueDetailView.vue')

}

]

}

]

});

export default router;

<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.yearIncome}}&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="success" @click="convertCustomer" v-if="clueDetail.state !== -1">转换客户</el-button>
      <el-button type="success" 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("提交成功","success");
                        this.reload();
                    }
                    else{
                        messageTip("提交失败","error");
                    }
                });
            }
            else{
                messageTip("请输入完整的信息","warning");
            }
        }
    },
    data(){
        return {
            clueRemark : {},
            clueRemarkRules : {},
            clueDetail : {
                ownerDO : {},
                activityDO : {},
                appellationDO : {},
                needLoanDO : {},
                intentionStateDO : {},
                intentionProductDO : {},
                stateDO : {},
                sourceDO  : {}
            },
        }
    }
}
</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}} </div>

</el-form-item>

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

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

</el-form-item>

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

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

</el-form-item>

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

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

</el-form-item>

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

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

</el-form-item>

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

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

</el-form-item>

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

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

</el-form-item>

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

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

</el-form-item>

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

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

</el-form-item>

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

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

</el-form-item>

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

<div class="detail">{{clueDetail.yearIncome}} </div>

</el-form-item>

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

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

</el-form-item>

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

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

</el-form-item>

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

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

</el-form-item>

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

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

</el-form-item>

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

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

</el-form-item>

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

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

</el-form-item>

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

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

</el-form-item>

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

<div class="detail">{{clueDetail.nextContactTime}} </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="success" @click="convertCustomer" v-if="clueDetail.state !== -1">转换客户</el-button>

<el-button type="success" 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("提交成功","success");

this.reload();

}

else{

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

}

});

}

else{

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

}

}

},

data(){

return {

clueRemark : {},

clueRemarkRules : {},

clueDetail : {

ownerDO : {},

activityDO : {},

appellationDO : {},

needLoanDO : {},

intentionStateDO : {},

intentionProductDO : {},

stateDO : {},

sourceDO : {}

},

}

}

}

</script>

<style scoped>

</style>

<template>
    
    <router-view></router-view>
</template>

<script>
export default {
    name : "App",
}  
</script>

<style>
.parent{
  position:relative;
}
.child{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}
.el-pagination{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}
.el-pagination{
    margin-top: 3%;
}
.el-table{
    margin-top: 3%;
}
.detail{
    background-color: azure;
    width: 100%;
    padding-left: 1%;
}
</style>
<template>



<router-view></router-view>

</template>

<script>

export default {

name : "App",

}

</script>

<style>

.parent{

position:relative;

}

.child{

position:absolute;

left:50%;

transform:translateX(-50%);

}

.el-pagination{

position:absolute;

left:50%;

transform:translateX(-50%);

}

.el-pagination{

margin-top: 3%;

}

.el-table{

margin-top: 3%;

}

.detail{

background-color: azure;

width: 100%;

padding-left: 1%;

}

</style>