// 程序入口,相当于main方法 // 这里从vue下导入了一个createApp方法\函数 import { createApp } from 'vue' // 从Element-Plus导入该组件 import ElementPlus from 'element-plus' // 导入了我们默认的app组件 import App from './App.vue' // 导入ElementPlus的中文包 import zhCn from 'element-plus/es/locale/lang/zh-cn'; import 'element-plus/dist/index.css' import router from "./router/router.js" import * as ElementPlusIconsVue from '@element-plus/icons-vue'; import { doGet } from './http/httpRequest.js'; // 利用上面导入的createApp函数创建一个vue应用 // 并将app挂载到这个#app这个ID下 let app = createApp(App); // 把所有的图标以component的形式注册上去 for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) } // el是绑定的页面dom元素,可以直接操作dom // binding是对象,内涵属性,value就是传递过来的值 app.directive('hasDelPermission',(el,binding)=>{ doGet("/api/login/info",{}).then(resp => { let permissionList = resp.data.data.permissionList; let flag = false; for(let key in permissionList){ if(permissionList[key] === binding.value){ flag = true; break; } } if(!flag){ // 没有权限,就隐藏这个元素 // el.style.display = 'none'; // 删除元素节点 el.parentNode && el.parentNode.removeChild(el); } }); // if(!hasPermission(binding.value)){ // // 没有权限,就隐藏这个元素 // el.style.display = 'none'; // } // else{ // el.style.display = 'block'; // } // // 这里是异步请求了,前后拿不到... // function hasPermission(permission){ // doGet("/api/login/info",{}).then(resp => { // let permissionList = resp.data.data.permissionList; // for(let key in permissionList){ // if(permissionList[key] === permission){ // return true; // } // } // return false; // }); // } }); app.use(ElementPlus,{locale: zhCn,}).use(router).mount('#app')
// 程序入口,相当于main方法
// 这里从vue下导入了一个createApp方法\函数
import { createApp } from 'vue'
// 从Element-Plus导入该组件
import ElementPlus from 'element-plus'
// 导入了我们默认的app组件
import App from './App.vue'
// 导入ElementPlus的中文包
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import 'element-plus/dist/index.css'
import router from "./router/router.js"
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import { doGet } from './http/httpRequest.js';
// 利用上面导入的createApp函数创建一个vue应用
// 并将app挂载到这个#app这个ID下
let app = createApp(App);
// 把所有的图标以component的形式注册上去
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
// el是绑定的页面dom元素,可以直接操作dom
// binding是对象,内涵属性,value就是传递过来的值
app.directive('hasDelPermission',(el,binding)=>{
doGet("/api/login/info",{}).then(resp => {
let permissionList = resp.data.data.permissionList;
let flag = false;
for(let key in permissionList){
if(permissionList[key] === binding.value){
flag = true;
break;
}
}
if(!flag){
// 没有权限,就隐藏这个元素
// el.style.display = 'none';
// 删除元素节点
el.parentNode && el.parentNode.removeChild(el);
}
});
// if(!hasPermission(binding.value)){
// // 没有权限,就隐藏这个元素
// el.style.display = 'none';
// }
// else{
// el.style.display = 'block';
// }
// // 这里是异步请求了,前后拿不到...
// function hasPermission(permission){
// doGet("/api/login/info",{}).then(resp => {
// let permissionList = resp.data.data.permissionList;
// for(let key in permissionList){
// if(permissionList[key] === permission){
// return true;
// }
// }
// return false;
// });
// }
});
app.use(ElementPlus,{locale: zhCn,}).use(router).mount('#app')
<template> <el-button type="primary" @click="addUser()" v-hasDelPermission="'user:add'">新增用户</el-button> <el-button type="danger" @click="batchDel()" v-hasDelPermission="'user:delete'">批量删除</el-button> <el-table :data="userList" style="width: 100%" @selection-change="handleSelectionChange" > <!-- 复选框 --> <el-table-column type="selection" width="33%" /> <el-table-column type="index" label="序号" width="52%" /> <el-table-column prop="loginAct" label="账号" width="90%" show-overflow-tooltip /> <el-table-column property="name" label="姓名" width="75%" show-overflow-tooltip /> <el-table-column property="phone" label="联系电话" show-overflow-tooltip /> <el-table-column property="email" label="邮箱" show-overflow-tooltip /> <el-table-column property="createTime" label="创建时间" show-overflow-tooltip /> <el-table-column label="操作" show-overflow-tooltip> <template #default="scope"> <el-button type="primary" @click="view(scope.row.id)" v-hasDelPermission="'user:view'">详情</el-button> <el-button type="success" @click="edit(scope.row.id)" v-hasDelPermission="'user:edit'">编辑</el-button> <el-button type="danger" @click="del(scope.row.id)" v-hasDelPermission="'user:delete'">删除</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="dialogVisible" label-width="10%" :title="Title" width="55%" draggable> <el-form ref="userRefForm" :model="newUser" :rules="userRules"> <el-form-item label="账号:" prop="loginAct"> <el-input v-model="newUser.loginAct"/> </el-form-item> <el-form-item label="密码:" v-if="newUser.id"> <el-input v-model="newUser.loginPwd" type="password" placeholder="密码默认不可见,可在此修改" show-password /> </el-form-item> <el-form-item label="密码:" prop="loginPwd" v-else> <el-input v-model="newUser.loginPwd" type="password" show-password /> </el-form-item> <el-form-item label="姓名:" prop="name"> <el-input v-model="newUser.name"/> </el-form-item> <el-form-item label="联系电话:" prop="phone"> <el-input v-model="newUser.phone"/> </el-form-item> <el-form-item label="邮箱:" prop="email"> <el-input v-model="newUser.email" type="email"/> </el-form-item> <el-form-item label="账号未过期:" prop="accountNoExpired"> <el-select v-model="newUser.accountNoExpired" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </el-form-item> <el-form-item label="密码未过期:" prop="credentialsNoExpired"> <el-select v-model="newUser.credentialsNoExpired" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </el-form-item> <el-form-item label="账号未锁定:" prop="accountNoLocked"> <el-select v-model="newUser.accountNoLocked" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </el-form-item> <el-form-item label="账号是否启用:" prop="accountEnabled"> <el-select v-model="newUser.accountEnabled" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </el-form-item> </el-form> <template #footer> <div class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="submit()"> 确定 </el-button> </div> </template> </el-dialog> </template> <script> import { doGet, doPost, doPut, doDelete } from '../http/httpRequest'; import { messageTip, messageConfirm } from '../util/util'; export default { name:"userView", inject : ['reload'], data(){ return { userList : [], pageSize : 0, total : 0, dialogVisible : false, newUser : {}, // 标题 Title : "", selectedIds : [], // 下拉选项 options : [ { label : "是", value : 1 }, { label : "否", value : 0 } ], userRules : { // 定义用户验证规则 loginAct : [ { required: true, message: '登录账号不能为空', trigger: 'blur' }, { min: 3, max: 32, message: '登录账号长度范围为3-32个字符', trigger: 'blur' } ], loginPwd : [ { required: true, message: '登录密码不能为空', trigger: 'blur' }, { min: 6, max: 16, message: '登录密码长度为6-16位', trigger: 'blur' } ], name : [ { required: true, message: '姓名不能为空', trigger: 'blur' }, { pattern : /^[\u4e00-\u9fa5]{0,}$/, message: '姓名必须是中文汉字', trigger: 'blur'} ], phone : [ { required: true, message: '手机号码不能为空', trigger: 'blur' }, { pattern : /^1[3-9]\d{9}$/, message: '手机号码格式有误', trigger: 'blur'} ], email : [ { required: true, message: '邮箱不能为空', trigger: 'blur' }, { pattern : /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '邮箱格式有误', trigger: 'blur'} ], accountNoExpired : [ { required: true, message: '请选择账号是否未过期', trigger: 'blur' } ], credentialsNoExpired : [ { required: true, message: '请选择密码是否未过期', trigger: 'blur' } ], accountNoLocked : [ { required: true, message: '请选择账号是否未未锁定', trigger: 'blur' } ], accountEnabled : [ { required: true, message: '请选择账号是否可用', trigger: 'blur' } ] } } }, 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/user/batchDel",{ids : ids}).then(resp => { if(resp.data.code === 200){ messageTip("批量删除成功","success"); this.reload(); } else{ messageTip("批量删除失败:"+resp.data.msg,"error"); } }); }).catch(() => { messageTip("已取消批量删除","warning"); }); }, submit(){ this.$refs.userRefForm.validate((isValid) => { if(isValid){ let formData = new FormData(); for(let field in this.newUser){ if(this.newUser[field]){ formData.append(field,this.newUser[field]); } } if(this.newUser.id){ doPut("/api/user/edit",formData).then(resp => { if(resp.data.code === 200){ messageTip("修改成功","success"); this.dialogVisible = false; this.reload(); } else{ messageTip("修改失败","error"); } }); } else{ doPost("/api/user/add",formData).then(resp => { if(resp.data.code === 200){ messageTip("提交成功","success"); this.dialogVisible = false; this.reload(); } else{ messageTip("提交失败","error"); } }); } } }); }, // 自动传参 toPage(current){ // 把当前页作为current传递给获取数据方法,就可以实现分页查询了 this.getData(current); }, getData(current){ //获取数据,查询用户列表数据 doGet("api/users",{ // 当前查询第几页 current : current }).then(resp => { if(resp.data.code === 200){ this.userList = resp.data.data.list; this.total = resp.data.data.total; this.pageSize = resp.data.data.pageSize; } else{ messageTip("网络错误","error"); } }); }, view(id){ // $route是获取当前路由的属性信息,不要和router搞混了 this.$router.push("/dashboard/user/detail/"+id); }, edit(id){ this.Title = "修改用户信息"; // $router是调用路由对象的方法,如push跳转等 this.dialogVisible = true; this.loadUser(id); }, loadUser(id){ doGet("/api/user/" + id,{}).then(resp => { if(resp.data.code === 200){ this.newUser = resp.data.data; this.newUser.loginPwd = ""; } else{ messageTip("网络错误","error"); } }); }, del(id){ messageConfirm("注意:删除后不可恢复","您确定要删除?").then(() => { // 点击确定按钮 doDelete("/api/user/del/" + id,{}).then(resp => { if(resp.data.code === 200){ messageTip('删除成功','success'); this.reload(); } else{ messageTip('删除失败:'+resp.data.msg,'error'); } }); }).catch(() => { // 点击取消按钮 messageTip("已取消删除",'warning'); }); }, addUser(){ this.newUser = {}; this.dialogVisible = true; this.Title = "新增用户"; } } } </script> <style> </style>
<template>
<el-button type="primary" @click="addUser()" v-hasDelPermission="'user:add'">新增用户</el-button>
<el-button type="danger" @click="batchDel()" v-hasDelPermission="'user:delete'">批量删除</el-button>
<el-table
:data="userList"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<!-- 复选框 -->
<el-table-column type="selection" width="33%" />
<el-table-column type="index" label="序号" width="52%" />
<el-table-column prop="loginAct" label="账号" width="90%" show-overflow-tooltip />
<el-table-column property="name" label="姓名" width="75%" show-overflow-tooltip />
<el-table-column property="phone" label="联系电话" show-overflow-tooltip />
<el-table-column property="email" label="邮箱" show-overflow-tooltip />
<el-table-column property="createTime" label="创建时间" show-overflow-tooltip />
<el-table-column label="操作" show-overflow-tooltip>
<template #default="scope">
<el-button type="primary" @click="view(scope.row.id)" v-hasDelPermission="'user:view'">详情</el-button>
<el-button type="success" @click="edit(scope.row.id)" v-hasDelPermission="'user:edit'">编辑</el-button>
<el-button type="danger" @click="del(scope.row.id)" v-hasDelPermission="'user:delete'">删除</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="dialogVisible" label-width="10%" :title="Title" width="55%" draggable>
<el-form ref="userRefForm" :model="newUser" :rules="userRules">
<el-form-item label="账号:" prop="loginAct">
<el-input v-model="newUser.loginAct"/>
</el-form-item>
<el-form-item label="密码:" v-if="newUser.id">
<el-input
v-model="newUser.loginPwd"
type="password"
placeholder="密码默认不可见,可在此修改"
show-password
/>
</el-form-item>
<el-form-item label="密码:" prop="loginPwd" v-else>
<el-input
v-model="newUser.loginPwd"
type="password"
show-password
/>
</el-form-item>
<el-form-item label="姓名:" prop="name">
<el-input v-model="newUser.name"/>
</el-form-item>
<el-form-item label="联系电话:" prop="phone">
<el-input v-model="newUser.phone"/>
</el-form-item>
<el-form-item label="邮箱:" prop="email">
<el-input v-model="newUser.email" type="email"/>
</el-form-item>
<el-form-item label="账号未过期:" prop="accountNoExpired">
<el-select v-model="newUser.accountNoExpired" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="密码未过期:" prop="credentialsNoExpired">
<el-select v-model="newUser.credentialsNoExpired" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="账号未锁定:" prop="accountNoLocked">
<el-select v-model="newUser.accountNoLocked" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="账号是否启用:" prop="accountEnabled">
<el-select v-model="newUser.accountEnabled" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submit()">
确定
</el-button>
</div>
</template>
</el-dialog>
</template>
<script>
import { doGet, doPost, doPut, doDelete } from '../http/httpRequest';
import { messageTip, messageConfirm } from '../util/util';
export default {
name:"userView",
inject : ['reload'],
data(){
return {
userList : [],
pageSize : 0,
total : 0,
dialogVisible : false,
newUser : {},
// 标题
Title : "",
selectedIds : [],
// 下拉选项
options : [
{ label : "是", value : 1 },
{ label : "否", value : 0 }
],
userRules : {
// 定义用户验证规则
loginAct : [
{ required: true, message: '登录账号不能为空', trigger: 'blur' },
{ min: 3, max: 32, message: '登录账号长度范围为3-32个字符', trigger: 'blur' }
],
loginPwd : [
{ required: true, message: '登录密码不能为空', trigger: 'blur' },
{ min: 6, max: 16, message: '登录密码长度为6-16位', trigger: 'blur' }
],
name : [
{ required: true, message: '姓名不能为空', trigger: 'blur' },
{ pattern : /^[\u4e00-\u9fa5]{0,}$/, message: '姓名必须是中文汉字', trigger: 'blur'}
],
phone : [
{ required: true, message: '手机号码不能为空', trigger: 'blur' },
{ pattern : /^1[3-9]\d{9}$/, message: '手机号码格式有误', trigger: 'blur'}
],
email : [
{ required: true, message: '邮箱不能为空', trigger: 'blur' },
{ pattern : /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '邮箱格式有误', trigger: 'blur'}
],
accountNoExpired : [
{ required: true, message: '请选择账号是否未过期', trigger: 'blur' }
],
credentialsNoExpired : [
{ required: true, message: '请选择密码是否未过期', trigger: 'blur' }
],
accountNoLocked : [
{ required: true, message: '请选择账号是否未未锁定', trigger: 'blur' }
],
accountEnabled : [
{ required: true, message: '请选择账号是否可用', trigger: 'blur' }
]
}
}
},
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/user/batchDel",{ids : ids}).then(resp => {
if(resp.data.code === 200){
messageTip("批量删除成功","success");
this.reload();
}
else{
messageTip("批量删除失败:"+resp.data.msg,"error");
}
});
}).catch(() => {
messageTip("已取消批量删除","warning");
});
},
submit(){
this.$refs.userRefForm.validate((isValid) => {
if(isValid){
let formData = new FormData();
for(let field in this.newUser){
if(this.newUser[field]){
formData.append(field,this.newUser[field]);
}
}
if(this.newUser.id){
doPut("/api/user/edit",formData).then(resp => {
if(resp.data.code === 200){
messageTip("修改成功","success");
this.dialogVisible = false;
this.reload();
}
else{
messageTip("修改失败","error");
}
});
}
else{
doPost("/api/user/add",formData).then(resp => {
if(resp.data.code === 200){
messageTip("提交成功","success");
this.dialogVisible = false;
this.reload();
}
else{
messageTip("提交失败","error");
}
});
}
}
});
},
// 自动传参
toPage(current){
// 把当前页作为current传递给获取数据方法,就可以实现分页查询了
this.getData(current);
},
getData(current){
//获取数据,查询用户列表数据
doGet("api/users",{
// 当前查询第几页
current : current
}).then(resp => {
if(resp.data.code === 200){
this.userList = resp.data.data.list;
this.total = resp.data.data.total;
this.pageSize = resp.data.data.pageSize;
}
else{
messageTip("网络错误","error");
}
});
},
view(id){
// $route是获取当前路由的属性信息,不要和router搞混了
this.$router.push("/dashboard/user/detail/"+id);
},
edit(id){
this.Title = "修改用户信息";
// $router是调用路由对象的方法,如push跳转等
this.dialogVisible = true;
this.loadUser(id);
},
loadUser(id){
doGet("/api/user/" + id,{}).then(resp => {
if(resp.data.code === 200){
this.newUser = resp.data.data;
this.newUser.loginPwd = "";
}
else{
messageTip("网络错误","error");
}
});
},
del(id){
messageConfirm("注意:删除后不可恢复","您确定要删除?").then(() => {
// 点击确定按钮
doDelete("/api/user/del/" + id,{}).then(resp => {
if(resp.data.code === 200){
messageTip('删除成功','success');
this.reload();
}
else{
messageTip('删除失败:'+resp.data.msg,'error');
}
});
}).catch(() => {
// 点击取消按钮
messageTip("已取消删除",'warning');
});
},
addUser(){
this.newUser = {};
this.dialogVisible = true;
this.Title = "新增用户";
}
}
}
</script>
<style>
</style>
<template> <el-button type="primary" class="btn" @click="addClue()" v-hasDelPermission="'clue:add'">导入线索</el-button> <el-button type="success" class="btn" @click="importExcel()" v-hasDelPermission="'clue:import'">导入线索(Excel)</el-button> <el-button type="danger" class="btn" @click="batchDel()" v-hasDelPermission="'clue:delete'">批量删除</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)" v-hasDelPermission="'clue:view'">详情</el-button> <el-button type="success" @click="edit(scope.row.id)" v-hasDelPermission="'clue:edit'">编辑</el-button> <el-button type="danger" @click="del(scope.row.id)" v-hasDelPermission="'clue:delete'">删除</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 => { 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()" v-hasDelPermission="'clue:add'">导入线索</el-button>
<el-button type="success" class="btn" @click="importExcel()" v-hasDelPermission="'clue:import'">导入线索(Excel)</el-button>
<el-button type="danger" class="btn" @click="batchDel()" v-hasDelPermission="'clue:delete'">批量删除</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)" v-hasDelPermission="'clue:view'">详情</el-button>
<el-button type="success" @click="edit(scope.row.id)" v-hasDelPermission="'clue:edit'">编辑</el-button>
<el-button type="danger" @click="del(scope.row.id)" v-hasDelPermission="'clue:delete'">删除</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 => {
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>