CRM项目前端优化页面效果使用已有的元素将已被转换的客户标注出来------CRM项目

最新推荐文章于 2024-10-08 17:48:41 发布

旧约Alatus

最新推荐文章于 2024-10-08 17:48:41 发布

阅读量915

点赞数 30

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

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

版权

前端同时被 3 个专栏收录

334 篇文章 2 订阅

订阅专栏

VUE框架

250 篇文章 0 订阅

订阅专栏

CRM项目

142 篇文章 0 订阅

订阅专栏

<template>
  <el-form
      ref="clueRemarkForm"
      :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>
  <el-table
      :data="clueRemarkList"
      style="width: 100%">
    <el-table-column type="index" label="序号" width="60"/>
    <el-table-column prop="noteWayDO.typeValue" label="跟踪方式"/>
    <el-table-column prop="noteContent" label="跟踪内容"/>
    <el-table-column property="createTime" label="跟踪时间"/>
    <el-table-column property="createByDO.name" label="跟踪人"/>
    <el-table-column property="editTime" label="编辑时间"/>
    <el-table-column property="editByDO.name" label="编辑人"/>
    <el-table-column label="操作">
      <template #default="scope">
        <a href="javascript:" @click="edit(scope.row.id,scope.$index)">编辑</a>
        &nbsp;
        <a href="javascript:" @click="del(scope.row.id)">删除</a>
      </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="dialogVisible" label-width="10%" :title="Title" width="55%" draggable>
    <el-form ref="clueRemarkRefForm" :model="clueRemarkEdit" :rules="clueRemarkRules">
        <el-form-item label="线索备注:" prop="noteContent">
          <el-input
            v-model="clueRemarkEdit.noteContent"
            :rows="8"
            type="textarea"
            placeholder="请输入活动备注"
          />
        </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="editSubmit()">
          确定
          </el-button>
      </div>
    </template>
    </el-dialog>
    
  <el-dialog v-model="convertCustomerDialogVisible" title="线索转换客户" width="55%" center>
    <el-form ref="convertCustomerRefForm" :model="customerQuery" label-width="110px" :rules="convertCustomerRules">
      <el-form-item label="意向产品" prop="product">
        <el-select v-model="customerQuery.product" placeholder="请选择" style="width: 100%;" @click="loadDicValue('product')">
          <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="客户描述" prop="description">
        <el-input
            v-model="customerQuery.description"
            :rows="8"
            type="textarea"
            placeholder="请输入客户描述"/>
      </el-form-item>
      <el-form-item label="下次跟踪时间" prop="nextContactTime">
        <el-date-picker
            v-model="customerQuery.nextContactTime"
            type="datetime"
            style="width: 100%;"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择下次跟踪时间"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="convertCustomerDialogVisible = false">关 闭</el-button>
        <el-button type="primary" @click="convertCustomerSubmit()">转 换</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { doGet, doPost, doDelete, doPut } from '../http/httpRequest';
import { messageTip, goBack, messageConfirm } from '../util/util';
export default {
    name : "clueDetail",
    inject : ["reload"],
    mounted(){
        this.loadClueDetail();
        this.getData(1);
    },
    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(){
          this.$refs.clueRemarkForm.validate((isValid) => {
            if(this.clueRemark.noteContent&&this.clueRemark.noteWay){
              doPost("/api/clue/remark/add", 
                  {
                      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");
            }
          });
      },
      //加载字典数据
      loadDicValue(typeCode) {
        doGet("/api/dicValue/" + typeCode, {}).then( resp => {
          if (resp.data.code === 200) {
            if(typeCode === 'noteWay'){
              this.noteWayOptions = resp.data.data;
            }
            else if(typeCode === 'product'){
              this.productOptions = resp.data.data;
            }
          }
          else{
            messageTip("网络错误","error");
          }
        });
      },
      // 提交转换客户
      convertCustomerSubmit(){
        this.$refs.convertCustomerRefForm.validate((isVaild) => {
          if(this.customerQuery.description&&this.customerQuery.product&&this.customerQuery.nextContactTime){
            doPost("/api/clue/customer",{
              clueId : this.clueDetail.id,
              product : this.customerQuery.product,
              description : this.customerQuery.description,
              nextContactTime : this.customerQuery.nextContactTime
            }).then(resp => {
              if(resp.data.code === 200){
                messageTip("客户转换成功","success");
                this.reload();
              }
              else{
                messageTip("客户转换失败","error");
              }
            });
          }
        });
      },
      // 删除线索备注
      del(id){
        messageConfirm("注意:删除后不可恢复","您确定要删除?").then(() => {
                doDelete("/api/clue/remark/delete/"+id,{}).then(resp => {
                    if(resp.data.code === 200){
                        messageTip("删除成功","success");
                        this.reload();
                    }
                    else{
                        messageTip("删除失败:"+resp.data.msg,"error");
                    }
                });
            }).catch(() => {
              messageTip("已取消删除","warning");
            });
      },
      convertCustomer(){
        this.convertCustomerDialogVisible = true;
      },
      // 自动传参
      toPage(current){
        // 把当前页作为current传递给获取数据方法,就可以实现分页查询了
        this.getData(current);
      },
        // 获取分页信息
      getData(current){
          //获取数据,查询用户列表数据
          doGet("/api/clue/remark/page",{
              // 当前查询第几页
              current : current,
              id : this.$route.params.id
          }).then(resp => {
              if(resp.data.code === 200){
                  this.clueRemarkList = resp.data.data.list;
                  console.log(this.clueRemarkList);
                  this.total = resp.data.data.total;
                  this.pageSize = resp.data.data.pageSize;
              }
              else{
                messageTip("网络错误","error");
              }
          });
      },
      edit(id,index){
        this.dialogVisible = true;
        this.clueRemarkEdit.noteContent = this.clueRemarkList[index].noteContent;
        this.clueRemarkEdit.id = id;
      },
      editSubmit(){
        this.$refs.clueRemarkRefForm.validate((isValid) => {
            if(isValid){
              doPut("/api/clue/remark/edit",{
                clueId : this.$route.params.id,
                id : this.clueRemarkEdit.id,
                noteContent : this.clueRemarkEdit.noteContent
              }).then(resp => {
                console.log(resp);
                if(resp.data.code === 200){
                  messageTip("修改成功","success");
                  this.reload();
                }
                else{
                  messageTip("修改失败","error");
                }
              })
            }
          });
      }
    },
    data(){
        return {
            // 提交线索备注对象
            clueRemark : {},
            // 展示的线索信息对象
            clueDetail : {
                state : 0,
                ownerDO : {},
                activityDO : {},
                appellationDO : {},
                needLoanDO : {},
                intentionStateDO : {},
                intentionProductDO : {},
                stateDO : {},
                sourceDO  : {}
            },
            // 定义客户对象
            customerQuery : {},
            // 定义用户弹窗
            convertCustomerDialogVisible : false,
            // 下拉选项
            noteWayOptions : [{}],
            // 产品下拉选项
            productOptions : [{}],
            //线索跟踪记录列表，初始值是空
            clueRemarkList : [{
              noteWayDO : {},
              createByDO : {},
              editByDO : {}
            }],
            total : 0,
            pageSize : 0,
            // 线索备注验证规则
            clueRemarkRules : {
              noteContent : [
                { required: true, message: '请输入线索备注', trigger: 'blur' },
                { min: 5, max: 255, message: '活动备注长度为5-255字符', trigger: 'blur' }
              ]
            },
            // 验证规则
            //定义线索转换为客户的验证规则
            convertCustomerRules : {
              product : [
                { required: true, message: '请选择意向产品', trigger: ['blur', 'change'] }
              ],
              description : [
                { required: true, message: '客户描述不能为空', trigger: 'blur' },
                { min: 5, max: 255, message: '客户描述长度为5-255个字符', trigger: 'blur' }
              ],
              nextContactTime : [
                { required: true, message: '请选择下次联系时间', trigger: 'blur' }
              ]
            },
            // 修改线索备注对象
            clueRemarkEdit : {},
            // 修改线索备注框对象
            dialogVisible : false
        }
    }
}
</script>

<style scoped>
</style>
<template>

<el-form

ref="clueRemarkForm"

: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>

<el-table

:data="clueRemarkList"

style="width: 100%">

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

<el-table-column prop="noteWayDO.typeValue" label="跟踪方式"/>

<el-table-column prop="noteContent" label="跟踪内容"/>

<el-table-column property="createTime" label="跟踪时间"/>

<el-table-column property="createByDO.name" label="跟踪人"/>

<el-table-column property="editTime" label="编辑时间"/>

<el-table-column property="editByDO.name" label="编辑人"/>

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

<template #default="scope">

<a href="javascript:" @click="edit(scope.row.id,scope.$index)">编辑</a>

 

<a href="javascript:" @click="del(scope.row.id)">删除</a>

</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="dialogVisible" label-width="10%" :title="Title" width="55%" draggable>

<el-form ref="clueRemarkRefForm" :model="clueRemarkEdit" :rules="clueRemarkRules">

<el-form-item label="线索备注:" prop="noteContent">

<el-input

v-model="clueRemarkEdit.noteContent"

:rows="8"

type="textarea"

placeholder="请输入活动备注"

/>

</el-form-item>

</el-form>

<template #footer>

<div class="dialog-footer">

<el-button @click="dialogVisible = false">取消</el-button>

<el-button type="primary" @click="editSubmit()">

确定

</el-button>

</div>

</template>

</el-dialog>



<el-dialog v-model="convertCustomerDialogVisible" title="线索转换客户" width="55%" center>

<el-form ref="convertCustomerRefForm" :model="customerQuery" label-width="110px" :rules="convertCustomerRules">

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

<el-select v-model="customerQuery.product" placeholder="请选择" style="width: 100%;" @click="loadDicValue('product')">

<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="客户描述" prop="description">

<el-input

v-model="customerQuery.description"

:rows="8"

type="textarea"

placeholder="请输入客户描述"/>

</el-form-item>

<el-form-item label="下次跟踪时间" prop="nextContactTime">

<el-date-picker

v-model="customerQuery.nextContactTime"

type="datetime"

style="width: 100%;"

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

placeholder="请选择下次跟踪时间"/>

</el-form-item>

</el-form>

<template #footer>

<span class="dialog-footer">

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

<el-button type="primary" @click="convertCustomerSubmit()">转换</el-button>

</span>

</template>

</el-dialog>

</template>

<script>

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

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

export default {

name : "clueDetail",

inject : ["reload"],

mounted(){

this.loadClueDetail();

this.getData(1);

},

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(){

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

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

doPost("/api/clue/remark/add",

{

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");

}

});

},

//加载字典数据

loadDicValue(typeCode) {

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

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

if(typeCode === 'noteWay'){

this.noteWayOptions = resp.data.data;

}

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

this.productOptions = resp.data.data;

}

}

else{

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

}

});

},

// 提交转换客户

convertCustomerSubmit(){

this.$refs.convertCustomerRefForm.validate((isVaild) => {

if(this.customerQuery.description&&this.customerQuery.product&&this.customerQuery.nextContactTime){

doPost("/api/clue/customer",{

clueId : this.clueDetail.id,

product : this.customerQuery.product,

description : this.customerQuery.description,

nextContactTime : this.customerQuery.nextContactTime

}).then(resp => {

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

messageTip("客户转换成功","success");

this.reload();

}

else{

messageTip("客户转换失败","error");

}

});

}

});

},

// 删除线索备注

del(id){

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

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

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

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

this.reload();

}

else{

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

}

});

}).catch(() => {

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

});

},

convertCustomer(){

this.convertCustomerDialogVisible = true;

},

// 自动传参

toPage(current){

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

this.getData(current);

},

// 获取分页信息

getData(current){

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

doGet("/api/clue/remark/page",{

// 当前查询第几页

current : current,

id : this.$route.params.id

}).then(resp => {

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

this.clueRemarkList = resp.data.data.list;

console.log(this.clueRemarkList);

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

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

}

else{

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

}

});

},

edit(id,index){

this.dialogVisible = true;

this.clueRemarkEdit.noteContent = this.clueRemarkList[index].noteContent;

this.clueRemarkEdit.id = id;

},

editSubmit(){

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

if(isValid){

doPut("/api/clue/remark/edit",{

clueId : this.$route.params.id,

id : this.clueRemarkEdit.id,

noteContent : this.clueRemarkEdit.noteContent

}).then(resp => {

console.log(resp);

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

messageTip("修改成功","success");

this.reload();

}

else{

messageTip("修改失败","error");

}

})

}

});

}

},

data(){

return {

// 提交线索备注对象

clueRemark : {},

// 展示的线索信息对象

clueDetail : {

state : 0,

ownerDO : {},

activityDO : {},

appellationDO : {},

needLoanDO : {},

intentionStateDO : {},

intentionProductDO : {},

stateDO : {},

sourceDO : {}

},

// 定义客户对象

customerQuery : {},

// 定义用户弹窗

convertCustomerDialogVisible : false,

// 下拉选项

noteWayOptions : [{}],

// 产品下拉选项

productOptions : [{}],

//线索跟踪记录列表，初始值是空

clueRemarkList : [{

noteWayDO : {},

createByDO : {},

editByDO : {}

}],

total : 0,

pageSize : 0,

// 线索备注验证规则

clueRemarkRules : {

noteContent : [

{ required: true, message: '请输入线索备注', trigger: 'blur' },

{ min: 5, max: 255, message: '活动备注长度为5-255字符', trigger: 'blur' }

]

},

// 验证规则

//定义线索转换为客户的验证规则

convertCustomerRules : {

product : [

{ required: true, message: '请选择意向产品', trigger: ['blur', 'change'] }

],

description : [

{ required: true, message: '客户描述不能为空', trigger: 'blur' },

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

],

nextContactTime : [

{ required: true, message: '请选择下次联系时间', trigger: 'blur' }

]

},

// 修改线索备注对象

clueRemarkEdit : {},

// 修改线索备注框对象

dialogVisible : false

}

}

}

</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 label="线索状态">
      <template #default="scope">
          <span style="background: lightgoldenrodyellow;" v-if="scope.row.state === -1">
            {{ scope.row.stateDO.typeValue }}
          </span>
          <span v-else>{{ scope.row.stateDO.typeValue }}</span>
      </template>
    </el-table-column>
    <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 label="线索状态">

<template #default="scope">

<span style="background: lightgoldenrodyellow;" v-if="scope.row.state === -1">

{{ scope.row.stateDO.typeValue }}

</span>

<span v-else>{{ scope.row.stateDO.typeValue }}</span>

</template>

</el-table-column>

<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>