You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
647 lines
18 KiB
647 lines
18 KiB
<template> |
|
<div> |
|
<div class="table-header table-div el-scrollbar"> |
|
<ListLayout :table-columns="tableColumns"> |
|
<div slot="search" style="margin-top: 5px"> |
|
<!--这里放顶部搜索--> |
|
<!-- 搜索部分开始 --> |
|
<el-form |
|
label-width="90px" |
|
:inline="true" |
|
:model="page" |
|
class="search-form" |
|
:size="$store.getters.size" |
|
> |
|
<el-form-item> |
|
<el-select |
|
v-model="page.params.id" |
|
clearable |
|
filterable |
|
remote |
|
reserve-keyword |
|
placeholder="编码/手机/昵称" |
|
:remote-method="userRemoteMethod" |
|
@keyup.enter.native="getByPage" |
|
> |
|
<el-option |
|
v-for="item in userList" |
|
:key="item.id" |
|
:label=" |
|
item.phone + |
|
'(' + |
|
(item.nickName ? item.nickName + '-' : '') + |
|
item.userCode + |
|
')' |
|
" |
|
:value="item.id" |
|
/> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item> |
|
<el-select |
|
v-model="page.params.globalEnable" |
|
placeholder="全局禁用启用" |
|
clearable |
|
@keyup.enter.native="getByPage" |
|
> |
|
<el-option label="禁用" :value="0" /> |
|
<el-option label="启用" :value="1" /> |
|
</el-select> |
|
</el-form-item> |
|
|
|
<el-form-item> |
|
<el-select |
|
v-model="page.params.userSource" |
|
placeholder="用户系统来源" |
|
clearable |
|
@keyup.enter.native="getByPage" |
|
> |
|
<el-option label="运营管理系统" value="OIL_OMS_WEB" /> |
|
<el-option label="小程序" value="MINI_APP" /> |
|
<el-option label="中品小程序" value="OIL_MINI_ZP" /> |
|
<el-option label="调度运营管理系统" value="OIL_DISPATCH_WEB" /> |
|
</el-select> |
|
</el-form-item> |
|
</el-form> |
|
<!-- 搜索部分结束 --> |
|
</div> |
|
|
|
<el-row slot="button-group" style="margin-top: 5px"> |
|
<el-col :span="16" class="tal"> |
|
<el-button |
|
class="group-item" |
|
:size="$store.getters.size" |
|
type="primary" |
|
@click="toAdd" |
|
><svg-icon icon-class="iconxinzeng" /> 添加</el-button |
|
> |
|
</el-col> |
|
<el-col :span="8"> |
|
<el-button |
|
type="primary" |
|
:size="$store.getters.size" |
|
icon="el-icon-search" |
|
@click="search" |
|
>查询</el-button |
|
> |
|
<el-button |
|
type="info" |
|
:size="$store.getters.size" |
|
icon="el-icon-refresh" |
|
@click="page.params = {}" |
|
>重置</el-button |
|
> |
|
</el-col> |
|
</el-row> |
|
|
|
<div slot="table"> |
|
<!--这里放表格和分页--> |
|
<!-- 列表开始 --> |
|
<el-table |
|
:max-height="tableHeight" |
|
:data="dataPage.list" |
|
fit |
|
stripe |
|
style="width: 100%" |
|
:size="$store.getters.size" |
|
@sort-change="sortHandler" |
|
> |
|
<!-- <el-table-column type="selection" width="55" /> --> |
|
<el-table-column label="序号" type="index" :index="indexMethod" /> |
|
<template v-for="(item, index) in tableColumns"> |
|
<el-table-column |
|
v-if="item.show" |
|
:key="index" |
|
:fixed="item.fixed" |
|
:show-overflow-tooltip="true" |
|
:min-width="item.minWidth" |
|
:width="item.width" |
|
:prop="item.prop" |
|
:sortable="item.sortable" |
|
:label="item.label" |
|
:formatter="item.render" |
|
/> |
|
</template> |
|
|
|
<el-table-column fixed="right" label="操作" width="150px"> |
|
<template slot-scope="scope"> |
|
<el-button |
|
:size="$store.getters.size" |
|
type="text" |
|
@click="handleDetail(scope.row.id)" |
|
><svg-icon icon-class="iconxiangqing1" /> 操作</el-button |
|
> |
|
<el-dropdown> |
|
<el-button type="text"> |
|
更多<i class="el-icon-arrow-down el-icon--right" /> |
|
</el-button> |
|
<el-dropdown-menu slot="dropdown"> |
|
<el-dropdown-item @click.native="toUpdate(scope.row.id)"> |
|
<el-button :size="$store.getters.size" type="text" |
|
><svg-icon icon-class="iconicon-" /> 编辑</el-button |
|
> |
|
</el-dropdown-item> |
|
<el-dropdown-item |
|
@click.native="toUpdatePwd(scope.row.userCode)" |
|
> |
|
<el-button :size="$store.getters.size" type="text" |
|
><svg-icon icon-class="iconicon-" /> 修改密码</el-button |
|
> |
|
</el-dropdown-item> |
|
</el-dropdown-menu> |
|
</el-dropdown> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<!-- 列表结束 --> |
|
|
|
<!-- 分页组件开始 --> |
|
<div class="page-div"> |
|
<el-pagination |
|
:current-page="page.currentPage" |
|
:page-sizes="[15, 20, 30]" |
|
:page-size="page.pageSize" |
|
layout="total, sizes, prev, pager, next, jumper" |
|
:total="page.totalCount" |
|
@size-change="handleSizeChange" |
|
@current-change="handleCurrentChange" |
|
/> |
|
</div> |
|
<!-- 分页组件结束 --> |
|
</div> |
|
</ListLayout> |
|
|
|
<!-- 修改密码抽屉 --> |
|
<el-drawer |
|
title="修改密码" |
|
class="table-detail-drawer" |
|
:visible.sync="updatePwdDialog" |
|
direction="ltr" |
|
size="55%" |
|
> |
|
<div style="padding: 20px;"> |
|
<el-form |
|
ref="form" |
|
:model="updatePwd" |
|
:rules="rules" |
|
label-width="100px" |
|
> |
|
<el-form-item label="新密码" prop="encryptPsw"> |
|
<el-input v-model="updatePwd.encryptPsw" style="width: 50%" /> |
|
</el-form-item> |
|
</el-form> |
|
<div style="text-align: right"> |
|
<el-button @click="updatePwdDialog = false;">取消</el-button> |
|
<el-button type="primary" @click="updatePwdSubmit">提交</el-button> |
|
</div> |
|
</div>> |
|
</el-drawer> |
|
|
|
<!-- 添加抽屉 --> |
|
<el-drawer |
|
title="添加" |
|
class="table-detail-drawer" |
|
:visible.sync="addDialog" |
|
direction="ltr" |
|
size="55%" |
|
> |
|
<SysCustomerInfoAdd @getByPage="getByPage" @closeDialog="closeDialog" /> |
|
</el-drawer> |
|
|
|
|
|
<!-- 导出弹窗 --> |
|
<el-dialog |
|
v-el-drag-dialog |
|
title="导出" |
|
:visible.sync="outPutDialog" |
|
width="55%" |
|
> |
|
<SysCustomerInfoOutput |
|
@getByPage="getByPage" |
|
@closeDialog="closeDialog" |
|
/> |
|
</el-dialog> |
|
|
|
<!-- 导入弹窗 --> |
|
<el-dialog |
|
v-el-drag-dialog |
|
title="导入" |
|
:visible.sync="importDialog" |
|
width="55%" |
|
> |
|
<SysCustomerInfoImport |
|
@getByPage="getByPage" |
|
@closeDialog="closeDialog" |
|
/> |
|
</el-dialog> |
|
|
|
<!-- 修改抽屉 --> |
|
<el-drawer |
|
title="修改" |
|
class="table-detail-drawer" |
|
:visible.sync="updateDialog" |
|
direction="ltr" |
|
size="55%" |
|
> |
|
<SysCustomerInfoUpdate |
|
v-if="updateDialog" |
|
:sys-customer-info="sysCustomerInfo" |
|
@getByPage="getByPage" |
|
@closeDialog="closeDialog" |
|
/> |
|
</el-drawer> |
|
|
|
|
|
<!-- 详情抽屉 --> |
|
<el-drawer |
|
title="详情" |
|
class="table-detail-drawer" |
|
:visible.sync="showTableDrawer" |
|
direction="ltr" |
|
size="80%" |
|
> |
|
<SysCustomerInfoInfo |
|
v-if="showTableDrawer" |
|
:sys-customer-info="sysCustomerInfo" |
|
@closedialogs="closeDialogs" |
|
/> |
|
</el-drawer> |
|
<!-- 添加基础信息 --> |
|
<el-dialog |
|
v-el-drag-dialog |
|
destroy-on-close |
|
title="添加" |
|
:visible.sync="addInfoDialog" |
|
width="55%" |
|
> |
|
<OilCustomerInfoAdd |
|
:sys-customer-info="sysCustomerInfo" |
|
@getByPage="getByPage" |
|
@closeDialog="closeDialog" |
|
/> |
|
</el-dialog> |
|
<!-- 修改基础信息 --> |
|
<el-dialog |
|
v-el-drag-dialog |
|
destroy-on-close |
|
title="修改" |
|
:visible.sync="updateInfoDialog" |
|
width="55%" |
|
> |
|
<OilCustomerInfoUpdate |
|
:oil-customer-info="oilCustomerInfo" |
|
@getByPage="getByPage" |
|
@closeDialog="closeDialog" |
|
/> |
|
</el-dialog> |
|
</div> |
|
</div> |
|
</template> |
|
<script> |
|
import sysCustomerInfoApi from "@/api/user/sysCustomerInfo"; |
|
import oilCustomerInfoApi from "@/api/user/oilCustomerInfo"; |
|
|
|
import sysSecurityUserPswApi from "@/api/user/sysSecurityUserPsw"; |
|
import md5 from "js-md5"; |
|
import oilCompanyInfoApi from "@/api/user/oilCompanyInfo"; |
|
|
|
import SysCustomerInfoAdd from "./SysCustomerInfoAdd"; |
|
import SysCustomerInfoUpdate from "./SysCustomerInfoUpdate"; |
|
import SysCustomerInfoInfo from "./SysCustomerInfoInfo"; |
|
import SysCustomerInfoImport from "./SysCustomerInfoImport"; |
|
import SysCustomerInfoOutput from "./SysCustomerInfoOutput"; |
|
import OilCustomerInfoAdd from "../info/OilCustomerInfoAdd"; |
|
import OilCustomerInfoUpdate from "../info/OilCustomerInfoUpdate"; |
|
|
|
import { mapGetters } from "vuex"; |
|
export default { |
|
components: { |
|
OilCustomerInfoAdd, |
|
OilCustomerInfoUpdate, |
|
SysCustomerInfoAdd, |
|
SysCustomerInfoUpdate, |
|
SysCustomerInfoInfo, |
|
SysCustomerInfoImport, |
|
SysCustomerInfoOutput, |
|
}, |
|
data() { |
|
return { |
|
oilCustomerInfo: {}, |
|
addInfoDialog: false, // 添加基础信息 |
|
updateInfoDialog: false, // 修改基础信息 |
|
userList: [], |
|
rules: { |
|
encryptPsw: [ |
|
{ required: true, message: "请输入新密码", trigger: "blur" }, |
|
{ |
|
min: 6, |
|
max: 16, |
|
message: "长度在 6 到 16 个字符", |
|
trigger: "blur", |
|
}, |
|
], |
|
}, |
|
updatePwdDialog: false, // 修改密码弹窗 |
|
importDialog: false, // 导入弹窗 |
|
outPutDialog: false, // 导出弹窗 |
|
showTableDrawer: false, |
|
page: { |
|
pageSize: 15, // 每页显示条数 |
|
currentPage: 1, // 默认页 |
|
params: {}, // 查询参数 |
|
sorted: { |
|
createTime: "desc", |
|
}, |
|
columns: [], |
|
}, |
|
updatePwd: { |
|
userCode: undefined, |
|
encryptPsw: undefined, |
|
pswType: "LOGIN_PSW", |
|
}, |
|
tableHeight: document.documentElement.clientHeight - 300 - 60, |
|
filters: this.$options.filters, |
|
dataPage: { |
|
// 分页显示page |
|
pageSize: 10, // 每页显示条数 |
|
currentPage: 1, // 默认页 |
|
params: { |
|
// 查询参数 |
|
}, |
|
sorted: {}, |
|
}, |
|
queryCompanyList: [], // 企业列表 |
|
tableColumns: [ |
|
{ |
|
minWidth: 180, |
|
label: "用户", |
|
show: true, |
|
render: (row, column, cell) => { |
|
return ( |
|
<div> |
|
<div> |
|
{row.userName || row.nickName} |
|
<span |
|
v-show={!row.userName && !row.nickName} |
|
style="color: #909399;font-style:italic;font-size=12px;" |
|
> |
|
未设置 |
|
</span> |
|
--{row.userCode}{" "} |
|
</div> |
|
<div>{row.phone}</div> |
|
</div> |
|
); |
|
}, |
|
}, |
|
{ |
|
prop: "plateNumber", |
|
minWidth: 150, |
|
label: "车牌号", |
|
show: true, |
|
render: (row, column, cell) => { |
|
return ( |
|
<div> |
|
<div> |
|
个： {row.plateNumber} |
|
<span |
|
v-show={!row.plateNumber} |
|
style="color: #909399;font-style:italic;font-size=12px;" |
|
> |
|
未设置 |
|
</span> |
|
</div> |
|
</div> |
|
); |
|
}, |
|
}, |
|
// { |
|
// prop: "balance", |
|
// label: "个人账户", |
|
// minWidth: 150, |
|
// show: true, |
|
// render: (row, column, cell) => { |
|
// return cell || 0; |
|
// }, |
|
// }, |
|
{ |
|
prop: "globalEnable", |
|
minWidth: 120, |
|
label: "禁用启用", |
|
show: true, |
|
render: (row, column, cell) => { |
|
return ( |
|
<el-switch |
|
v-model={row.globalEnable} |
|
active-color="#13ce66" |
|
inactive-color="#ff4949" |
|
active-value={1} |
|
inactive-value={0} |
|
disabled |
|
></el-switch> |
|
); |
|
}, |
|
}, |
|
{ |
|
prop: "createTime", |
|
minWidth: 150, |
|
label: "创建时间", |
|
show: true, |
|
render: (row, column, cell) => { |
|
return cell; |
|
}, |
|
}, |
|
], |
|
addDialog: false, // 添加弹窗 |
|
updateDialog: false, // 修改弹窗 |
|
sysCustomerInfo: {}, |
|
}; |
|
}, |
|
computed: { |
|
...mapGetters(["sysUserList"]), |
|
}, |
|
created() { |
|
this.getByPage(); |
|
// 增加监听事件，窗口变化时得到高度。 |
|
window.addEventListener("resize", this.getHeight, false); |
|
}, |
|
watch:{ |
|
updatePwdDialog(n){ |
|
if(!n){ |
|
this.updatePwd.encryptPsw = '' |
|
} |
|
} |
|
}, |
|
methods: { |
|
closeDialogs() { |
|
// this.$res.drawer.closDrawer() |
|
this.showTableDrawer = false; |
|
this.search(); |
|
}, |
|
companyRemoteMethod(value) { |
|
// 远程搜索企业 |
|
if (value) { |
|
oilCompanyInfoApi.getLike(value).then((res) => { |
|
this.queryCompanyList = res.data; |
|
}); |
|
} |
|
}, |
|
toBaseInfo(row) { |
|
// 处理基础信息 |
|
// 查询是否包含基础信息 |
|
oilCustomerInfoApi.getByCustomerCode(row.userCode).then((res) => { |
|
if (res.data) { |
|
this.updateInfoDialog = true; |
|
this.oilCustomerInfo = res.data; |
|
} else { |
|
sysCustomerInfoApi.get(row.id).then((data) => { |
|
this.sysCustomerInfo = data.data; |
|
this.addInfoDialog = true; |
|
}); |
|
} |
|
}); |
|
}, |
|
userRemoteMethod(value) { |
|
// 远程搜索 |
|
if (value) { |
|
sysCustomerInfoApi.liekQuery(value).then((res) => { |
|
this.userList = res.data; |
|
}); |
|
} |
|
}, |
|
updatePwdSubmit() { |
|
// 修改密码提交 |
|
this.$refs["form"].validate((valid) => { |
|
if (valid) { |
|
const updatePwd = { ...this.updatePwd }; |
|
updatePwd.encryptPsw = md5(this.updatePwd.encryptPsw); |
|
sysSecurityUserPswApi.updatePsw(updatePwd).then((res) => { |
|
this.$message.success(res.msg); |
|
this.getByPage(); |
|
this.updatePwdDialog = false; |
|
this.updatePwd.encryptPsw = '' |
|
}); |
|
} |
|
}); |
|
}, |
|
toUpdatePwd(userCode) { |
|
// 修改密码弹窗 |
|
this.updatePwdDialog = true; |
|
this.updatePwd.userCode = userCode; |
|
}, |
|
indexMethod(index) { |
|
return (index + 1) * 1; |
|
}, |
|
toImport() { |
|
// 导入 |
|
this.importDialog = true; |
|
}, |
|
toOutPut() { |
|
// 导出 |
|
this.outPutDialog = true; |
|
}, |
|
handleDetail(id) { |
|
// 查看行 详情 |
|
sysCustomerInfoApi.get(id).then((res) => { |
|
this.sysCustomerInfo = res.data; |
|
this.showTableDrawer = true; |
|
}); |
|
}, |
|
getHeight() { |
|
// 获取浏览器高度并计算得到表格所用高度。 |
|
this.tableHeight = document.documentElement.clientHeight - 300 - 60; |
|
}, |
|
search() { |
|
// 搜索 |
|
this.page.currentPage = 1; |
|
this.getByPage(); |
|
}, |
|
toggleSearchAdvance() { |
|
this.searchAdvice = !this.searchAdvice; |
|
}, |
|
handleSizeChange(val) { |
|
this.page.pageSize = val; |
|
this.getByPage(); |
|
}, |
|
handleCurrentChange(val) { |
|
this.page.currentPage = val; |
|
this.getByPage(); |
|
}, |
|
sortHandler(column) { |
|
// 排序查询 |
|
console.log(column); |
|
const key = column.prop; |
|
const value = column.order; |
|
this.page.sorted = {}; |
|
this.page.sorted[key] = value; |
|
this.getByPage(); |
|
}, |
|
toAdd() { |
|
// 跳转到添加 |
|
this.sysCustomerInfo = {}; |
|
this.addDialog = true; |
|
}, |
|
toUpdate(id) { |
|
// 跳转到更新 |
|
sysCustomerInfoApi.get(id).then((res) => { |
|
this.sysCustomerInfo = res.data; |
|
this.updateDialog = true; |
|
}); |
|
}, |
|
toDelete(id) { |
|
// 删除 |
|
this.$confirm("确定删除?", "提示", { type: "error" }).then(() => { |
|
sysCustomerInfoApi.deleteById(id).then((res) => { |
|
this.$message.success(res.msg); |
|
this.getByPage(); |
|
}); |
|
}); |
|
}, |
|
getByPage() { |
|
// 分页查询 |
|
this.addDialog = false; |
|
sysCustomerInfoApi.getDispatchByPages(this.page).then((res) => { |
|
this.dataPage = res.data; |
|
this.page.totalCount = this.dataPage.totalCount; |
|
this.page.totalPage = this.dataPage.totalPage; |
|
}); |
|
}, |
|
closeDialog() { |
|
this.addDialog = false; |
|
this.updateDialog = false; |
|
this.updateInfoDialog = false; |
|
this.addInfoDialog = false; |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style scoped> |
|
.handle-button-group { |
|
margin-bottom: 10px; |
|
} |
|
.table-div { |
|
min-height: calc(100vh - 150px); |
|
max-height: calc(100vh - 110px); |
|
position: relative; |
|
overflow-y: scroll; |
|
margin-bottom: 20px; |
|
} |
|
.table-div >>> .header-container { |
|
/* position: sticky; |
|
top: 0rem; */ |
|
min-height: 152px; |
|
z-index: 4; |
|
background: #fff; |
|
} |
|
.table-div .el-table__footer-wrapper { |
|
position: fixed !important; |
|
} |
|
.page-div { |
|
/* position: fixed; */ |
|
background: #fff; |
|
bottom: 0rem; |
|
z-index: 4; |
|
min-width: 100%; |
|
} |
|
</style>
|
|
|