0
0

CRM项目前端复用封装好的代码实现删除线索和批量删除线索------CRM项目

  1. <template>
  2.     <el-button type="primary" class="btn">导入线索</el-button>
  3.     <el-button type="success" class="btn" @click="importExcel()">导入线索(Excel)</el-button>
  4.     <el-button type="danger" class="btn" @click="batchDel()">批量删除</el-button>
  5.     <el-table
  6.       :data="clueList"
  7.       style="width: 100%"
  8.       @selection-change="handleSelectionChange">
  9.     <el-table-column type="selection" width="33%"/>
  10.     <el-table-column type="index" label="序号" width="60%"/>
  11.     <el-table-column property="ownerDO.name" label="负责人" width="120" />
  12.     <el-table-column property="activityDO.name" label="所属活动"/>
  13.     <el-table-column label="姓名">
  14.       <template #default="scope">
  15.         <a href="javascript:" @click="view(scope.row.id)">{{ scope.row.fullName }}</a>
  16.       </template>
  17.     </el-table-column>
  18.     <el-table-column property="appellationDO.typeValue" label="称呼"/>
  19.     <el-table-column property="phone" label="手机" width="120"/>
  20.     <el-table-column property="weixin" label="微信" width="120"/>
  21.     <el-table-column property="needLoanDO.typeValue" label="是否贷款"/>
  22.     <el-table-column property="intentionStateDO.typeValue" label="意向状态"/>
  23.     <el-table-column property="intentionProductDO.name" label="意向产品"/>
  24.     <el-table-column property="stateDO.typeValue" label="线索状态"/>
  25.     <el-table-column property="sourceDO.typeValue" label="线索来源"/>
  26.     <el-table-column property="nextContactTime" label="下次联系时间" width="165"/>
  27.     <el-table-column label="操作" width="230">
  28.       <template #default="scope">
  29.         <el-button type="primary" @click="view(scope.row.id)">详情</el-button>
  30.         <el-button type="success" @click="edit(scope.row.id)">编辑</el-button>
  31.         <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
  32.       </template>
  33.     </el-table-column>
  34.   </el-table>
  35.   <div class="parent">
  36.         <el-pagination
  37.             background
  38.             layout="prev, pager, next"
  39.             :page-size="pageSize"
  40.             :total="total"
  41.             @prev-click="toPage"
  42.             @next-click="toPage"
  43.             @current-change="toPage"
  44.         />
  45.     </div>
  47.   <!--导入线索Excel的弹窗（对话框）-->
  48.   <el-dialog v-model="importExcelDialogVisible" title="导入线索Excel" width="55%" center draggable>
  49.     <el-upload
  50.     ref="uploadRef"
  51.     method="post"
  52.     :http-request="uploadFile"
  53.     :auto-upload="false"
  54.   >
  55.     <template #trigger>
  56.       <el-button type="primary">选择Excel文件</el-button>
  57.     </template>
  58.     仅支持后缀名为.xls或.xlxs的文件
  60.     <template #tip>
  61.       <div class="fileTip">
  62.         <div>重要提示：</div>
  63.       <ul>
  64.         <li>上传仅支持后缀名为.xls或.xlsx的文件；</li>
  65.         <li>给定Excel文件的第一行将视为字段名；</li>
  66.         <li>请确认您的文件大小不超过50MB；</li>
  67.         <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式；</li>
  68.         <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式；</li>
  69.       </ul>
  70.       </div>
  71.     </template>
  72.   </el-upload>
  73.     <template #footer>
  74.       <span class="dialog-footer">
  75.         <el-button @click="importExcelDialogVisible = false">关 闭</el-button>
  76.         <el-button class="ml-3" type="success" @click="submitUpload">上 传</el-button>
  77.       </span>
  78.     </template>
  79.   </el-dialog>
  80. </template>
  82. <script>
  83. import { doGet, doPost, doDelete } from '../http/httpRequest.js';
  84. import { messageTip, messageConfirm } from '../util/util.js';
  85. export default {
  86.     name : "clubView",
  87.     inject : ["reload"],
  88.     data(){
  89.         return {
  90.             // 分页大小
  91.             pageSize : 0,
  92.             // 总分页
  93.             total : 0,
  94.             // 线索列表
  95.             clueList : [{
  96.                 ownerDO : {},
  97.                 activityDO : {},
  98.                 appellationDO : {},
  99.                 needLoanDO : {},
  100.                 intentionStateDO : {},
  101.                 intentionProductDO : {},
  102.                 stateDO : {},
  103.                 sourceDO : {}
  104.             }],
  105.             selectedIds : {},
  106.             // Excel弹出框控制
  107.             importExcelDialogVisible : false
  108.         }
  109.     },
  110.     mounted(){
  111.         this.getData(1);
  112.     },
  113.     methods : {
  114.         // 勾选或者取消勾选触发
  115.         handleSelectionChange(selectionItems){
  116.             this.selectedIds = [];
  117.             // 将已经勾选的数据传给我们
  118.             selectionItems.forEach(data => {
  119.                 this.selectedIds.push(data.id);
  120.             });
  121.         },
  122.         batchDel(){
  123.           if(!this.selectedIds.length){
  124.                 messageTip("请选择要删除的数据","warning");
  125.                 return;
  126.             }
  127.             messageConfirm("注意:删除后不可恢复","您确定要删除?").then(() => {
  128.                 let ids = this.selectedIds.join(",");
  129.                 doDelete("/api/club/batchDel",{ids : ids}).then(resp => {
  130.                     if(resp.data.code === 200){
  131.                         messageTip("批量删除成功","success");
  132.                         this.reload();
  133.                     }
  134.                     else{
  135.                         messageTip("批量删除失败:"+resp.data.msg,"error");
  136.                     }
  137.                 });
  138.             }).catch(() => {
  139.               messageTip("已取消批量删除","warning");
  140.             });
  141.         },
  142.         del(id){
  143.           messageConfirm("注意:删除后不可恢复","您确定要删除?").then(() => {
  144.                 doDelete("/api/club/delete/"+id,{}).then(resp => {
  145.                     if(resp.data.code === 200){
  146.                         messageTip("删除成功","success");
  147.                         this.reload();
  148.                     }
  149.                     else{
  150.                         messageTip("删除失败:"+resp.data.msg,"error");
  151.                     }
  152.                 });
  153.             }).catch(() => {
  154.               messageTip("已取消删除","warning");
  155.             });
  156.         },
  157.         // 真正的http上传文件
  158.         uploadFile(file){
  159.           let fileObj = file.file;
  160.           let formData = new FormData();
  161.           formData.append('file',fileObj);
  162.           doPost("/api/club/importExcel",formData).then(resp => {
  163.             console.log(resp)
  164.             if(resp.data.code === 200){
  165.               messageTip("录入成功","success");
  166.               this.$refs.uploadRef.clearFiles();
  167.               this.reload();
  168.             }
  169.             else{
  170.               messageTip("录入失败","error");
  171.             }
  172.           });
  173.         },
  174.         // 发起表单提交
  175.         submitUpload(){
  176.           this.$refs.uploadRef.submit();
  177.         },
  178.         // 点击提交Excel按钮触发
  179.         importExcel(){
  180.           this.importExcelDialogVisible = true;
  181.         },
  182.         // 自动传参
  183.         toPage(current){
  184.             // 把当前页作为current传递给获取数据方法,就可以实现分页查询了
  185.             this.getData(current);
  186.         },
  187.         // 获取分页信息
  188.         getData(current){
  189.             //获取数据,查询用户列表数据
  190.             doGet("api/clues",{
  191.                 // 当前查询第几页
  192.                 current : current
  193.             }).then(resp => {
  194.                 if(resp.data.code === 200){
  195.                     this.clueList = resp.data.data.list;
  196.                     this.total = resp.data.data.total;
  197.                     this.pageSize = resp.data.data.pageSize;
  198.                 }
  199.                 else{
  200.                   messageTip("网络错误","error");
  201.                 }
  202.             });
  203.         },
  204.     }
  205. }
  206. </script>
  208. <style scoped>
  209. .fileTip{
  210.   padding-top: 3%;
  211. }
  212. </style>
<template> 
  1. <el-button type="primary" class="btn">导入线索</el-button>
  3. <el-button type="success" class="btn" @click="importExcel()">导入线索(Excel)</el-button>
  5. <el-button type="danger" class="btn" @click="batchDel()">批量删除</el-button>
  7. <el-table
  9.   :data="clueList"
  11.   style="width: 100%"
  13.   @selection-change="handleSelectionChange">
  15. <el-table-column type="selection" width="33%"/>
  17. <el-table-column type="index" label="序号" width="60%"/>
  19. <el-table-column property="ownerDO.name" label="负责人" width="120" />
  21. <el-table-column property="activityDO.name" label="所属活动"/>
  23. <el-table-column label="姓名">
  25.   <template #default="scope">
  27.     <a href="javascript:" @click="view(scope.row.id)">{{ scope.row.fullName }}</a>
  29.   </template>
  31. </el-table-column>
  33. <el-table-column property="appellationDO.typeValue" label="称呼"/>
  35. <el-table-column property="phone" label="手机" width="120"/>
  37. <el-table-column property="weixin" label="微信" width="120"/>
  39. <el-table-column property="needLoanDO.typeValue" label="是否贷款"/>
  41. <el-table-column property="intentionStateDO.typeValue" label="意向状态"/>
  43. <el-table-column property="intentionProductDO.name" label="意向产品"/>
  45. <el-table-column property="stateDO.typeValue" label="线索状态"/>
  47. <el-table-column property="sourceDO.typeValue" label="线索来源"/>
  49. <el-table-column property="nextContactTime" label="下次联系时间" width="165"/>
  51. <el-table-column label="操作" width="230">
  53.   <template #default="scope">
  55.     <el-button type="primary" @click="view(scope.row.id)">详情</el-button>
  57.     <el-button type="success" @click="edit(scope.row.id)">编辑</el-button>
  59.     <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
  61.   </template>
  63. </el-table-column>
</el-table> 
  1.     <el-pagination
  3.         background
  5.         layout="prev, pager, next"
  7.         :page-size="pageSize"
  9.         :total="total"
  11.         @prev-click="toPage"
  13.         @next-click="toPage"
  15.         @current-change="toPage"
  17.     />
  19. </div>
<el-dialog v-model="importExcelDialogVisible" title="导入线索Excel" width="55%" center draggable> 
  1. <el-upload
  3. ref="uploadRef"
  5. method="post"
  7. :http-request="uploadFile"
  9. :auto-upload="false"
  1. <template #trigger>
  3.   <el-button type="primary">选择Excel文件</el-button>
  5. </template>
  7. 仅支持后缀名为.xls或.xlxs的文件
  9. <template #tip>
  11.   <div class="fileTip">
  13.     <div>重要提示：</div>
  15.   <ul>
  17.     <li>上传仅支持后缀名为.xls或.xlsx的文件；</li>
  19.     <li>给定Excel文件的第一行将视为字段名；</li>
  21.     <li>请确认您的文件大小不超过50MB；</li>
  23.     <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式；</li>
  25.     <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式；</li>
  27.   </ul>
  29.   </div>
  31. </template>
</el-upload> 
  1. <template #footer>
  3.   <span class="dialog-footer">
  5.     <el-button @click="importExcelDialogVisible = false">关 闭</el-button>
  7.     <el-button class="ml-3" type="success" @click="submitUpload">上 传</el-button>
  9.   </span>
  11. </template>
</el-dialog> </template> <script> import { doGet, doPost, doDelete } from '../http/httpRequest.js'; import { messageTip, messageConfirm } from '../util/util.js'; export default { name : "clubView", 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/club/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/club/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/club/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"); } }); }, } } </script> <style scoped> .fileTip{ padding-top: 3%; } </style>
标签： vue.js elementui javascript
本文转载自: https://blog.csdn.net/2201_75960169/article/details/136340428
版权归原作者 旧约Alatus 所有， 如有侵权，请联系我们删除。
登录后发布评论

“CRM项目前端复用封装好的代码实现删除线索和批量删除线索------CRM项目”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。