<template><template> <el-button type="primary" class="btn">导入线索</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> <!--导入线索Excel的弹窗(对话框)--> <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 : "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>
</el-table><el-button type="primary" class="btn">导入线索</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-dialog v-model="importExcelDialogVisible" title="导入线索Excel" width="55%" center draggable><el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" @prev-click="toPage" @next-click="toPage" @current-change="toPage" /> </div>
<el-upload ref="uploadRef" method="post" :http-request="uploadFile" :auto-upload="false"
</el-upload><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-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><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>
本文转载自: https://blog.csdn.net/2201_75960169/article/details/136340428
版权归原作者 旧约Alatus 所有, 如有侵权,请联系我们删除。
版权归原作者 旧约Alatus 所有, 如有侵权,请联系我们删除。