<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> <!--导入线索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 : "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"); } }); }, // 新增线索 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>
<!--导入线索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 : "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");
}
});
},
// 新增线索
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') } ] } ] }); 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')
}
]
}
]
});
export default router;
<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> <el-form-item> <el-button type="primary" @click="addClueSubmit">提 交</el-button> <el-button type="success" plain @click="goBack">返 回</el-button> </el-form-item> </el-form> </template> <script> export default { name : "clueRecordView", data(){ return { // 线索表单对象 clueQuery : {}, // 所属人下拉选项 ownerOptions : [{}] } } } </script> <style> </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>
<el-form-item>
<el-button type="primary" @click="addClueSubmit">提 交</el-button>
<el-button type="success" plain @click="goBack">返 回</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
name : "clueRecordView",
data(){
return {
// 线索表单对象
clueQuery : {},
// 所属人下拉选项
ownerOptions : [{}]
}
}
}
</script>
<style>
</style>
6243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
