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.
769 lines
22 KiB
769 lines
22 KiB
<template> |
|
<div> |
|
<div class="table-header table-div"> |
|
<ListLayout :table-columns="tableColumns"> |
|
<div slot="search" ref="searchHeight" style="margin-top: 5px"> |
|
<!--这里放顶部搜索--> |
|
<!-- 搜索部分开始 --> |
|
<el-form |
|
label-width="90px" |
|
:inline="true" |
|
:model="page" |
|
class="search-form" |
|
:size="$store.getters.size" |
|
> |
|
<el-form-item> |
|
<!-- <el-input v-model="page.params.companyId" placeholder="公司" clearable @keyup.enter.native="getByPage" /> --> |
|
<el-select |
|
v-model="page.params.companyId" |
|
clearable |
|
filterable |
|
remote |
|
reserve-keyword |
|
placeholder="企业名称" |
|
:remote-method="companyRemoteMethod" |
|
@keyup.enter.native="getByPage" |
|
> |
|
<el-option |
|
v-for="item in queryCompanyList" |
|
:key="item.id" |
|
:label="item.name" |
|
:value="item.id" |
|
/> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item> |
|
<el-select |
|
v-model="page.params.matchMark" |
|
placeholder="匹配方式" |
|
clearable |
|
> |
|
<el-option value="MATCH_DAY" label="按日匹配" /> |
|
<!-- <el-option value="MATCH_MONTH" label="按月匹配" /> |
|
<el-option value="MATCH_AMOUNT" label="按金额匹配" /> --> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item> |
|
<el-select |
|
v-model="page.params.enableMark" |
|
placeholder="启用标识" |
|
clearable |
|
> |
|
<el-option value="1" label="启用" /> |
|
<el-option value="0" label="禁用" /> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item> |
|
<el-select |
|
v-model="page.params.overMark" |
|
placeholder="结束标识" |
|
clearable |
|
> |
|
<el-option value="0" label="匹配开始" /> |
|
<el-option value="1" label="匹配完成" /> |
|
<el-option value="2" label="匹配停止" /> |
|
</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 |
|
style="width: 100%" |
|
:size="$store.getters.size" |
|
@sort-change="sortHandler" |
|
@selection-change="handleSelectionChange" |
|
> |
|
<!-- <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" |
|
:align="item.align" |
|
: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="操作" |
|
align="center" |
|
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-menu> |
|
</el-dropdown> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<!-- 列表结束 --> |
|
|
|
<!-- 分页组件开始 --> |
|
<div class="page-div"> |
|
<el-pagination |
|
:current-page="page.currentPage" |
|
:page-sizes="[10, 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-dialog |
|
v-el-drag-dialog |
|
title="添加" |
|
:visible.sync="addDialog" |
|
width="55%" |
|
> |
|
<OilCompanyMatchAdd @getByPage="getByPage" @closeDialog="closeDialog" /> |
|
</el-dialog> |
|
|
|
<!-- 导出弹窗 --> |
|
<el-dialog |
|
v-el-drag-dialog |
|
title="导出" |
|
:visible.sync="outPutDialog" |
|
width="55%" |
|
> |
|
<OilCompanyMatchOutput |
|
@getByPage="getByPage" |
|
@closeDialog="closeDialog" |
|
/> |
|
</el-dialog> |
|
|
|
<!-- 导入弹窗 --> |
|
<el-dialog |
|
v-el-drag-dialog |
|
title="导入" |
|
:visible.sync="importDialog" |
|
width="55%" |
|
> |
|
<OilCompanyMatchImport |
|
@getByPage="getByPage" |
|
@closeDialog="closeDialog" |
|
/> |
|
</el-dialog> |
|
|
|
<!-- 修改弹窗 --> |
|
<el-dialog |
|
v-el-drag-dialog |
|
title="修改" |
|
:visible.sync="updateDialog" |
|
width="55%" |
|
> |
|
<OilCompanyMatchUpdate |
|
v-if="updateDialog" |
|
:oil-company-match="oilCompanyMatch" |
|
@getByPage="getByPage" |
|
@closeDialog="closeDialog" |
|
/> |
|
</el-dialog> |
|
|
|
<!-- 详情抽屉 --> |
|
<el-drawer |
|
title="详情" |
|
class="table-detail-drawer" |
|
:visible.sync="showTableDrawer" |
|
size="55%" |
|
direction="ltr" |
|
:withHeader="false" |
|
> |
|
<general-details |
|
title="详情" |
|
isHeader="true" |
|
@close="showTableDrawer=false" |
|
:sourceData="oilCompanyMatch" |
|
:mappingData="mappingData" |
|
v-if="showTableDrawer" > |
|
</general-details> |
|
<!-- <OilCompanyMatchInfo :oil-company-match="oilCompanyMatch" /> --> |
|
</el-drawer> |
|
</div> |
|
</div> |
|
</template> |
|
<script> |
|
import oilCompanyMatchApi from "@/api/finance/oilCompanyMatch"; |
|
import OilCompanyMatchAdd from "./OilCompanyMatchAdd"; |
|
import OilCompanyMatchUpdate from "./OilCompanyMatchUpdate"; |
|
import OilCompanyMatchInfo from "./OilCompanyMatchInfo"; |
|
import OilCompanyMatchImport from "./OilCompanyMatchImport"; |
|
import OilCompanyMatchOutput from "./OilCompanyMatchOutput"; |
|
import oilCompanyInfoApi from "@/api/user/oilCompanyInfo"; |
|
import { mapGetters } from "vuex"; |
|
export default { |
|
components: { |
|
OilCompanyMatchAdd, |
|
OilCompanyMatchUpdate, |
|
OilCompanyMatchInfo, |
|
OilCompanyMatchImport, |
|
OilCompanyMatchOutput, |
|
}, |
|
data() { |
|
return { |
|
mappingData:[ |
|
{ |
|
carTitle:'基础信息', |
|
carItems:[ |
|
{ |
|
label:'id主键', |
|
value:'id' |
|
}, |
|
{ |
|
label:'公司id', |
|
value:'companyId' |
|
}, |
|
{ |
|
label:'匹配额度', |
|
value:'matchAmount', |
|
remark:'该额度为企业匹配单日额度上限', |
|
}, |
|
{ |
|
label:'匹配方式', |
|
value:'matchMark', |
|
remark:'MATCH_DAY：按日匹配 MATCH_MONTH：按月匹配 MATCH_AMOUNT：按金额匹配', |
|
}, |
|
{ |
|
label:'优先级', |
|
value:'matchPriority', |
|
remark:'1-20', |
|
}, |
|
{ |
|
label:'开始时间', |
|
value:'startTime', |
|
}, |
|
{ |
|
label:'结束时间', |
|
value:'endTime', |
|
}, |
|
{ |
|
label:'累计匹配轮数', |
|
value:'matchCount', |
|
}, |
|
{ |
|
label:'累计匹配金额', |
|
value:'totalAmount', |
|
}, |
|
{ |
|
label:'乐观锁', |
|
value:'version', |
|
}, |
|
{ |
|
label:'结束标识', |
|
value:'overMark', |
|
remark:'1：已完成 0：匹配中 2：主动停止', |
|
}, |
|
{ |
|
label:'结束人', |
|
value:'overUser', |
|
}, |
|
{ |
|
label:'实际匹配结束时间', |
|
value:'overTime', |
|
}, |
|
{ |
|
label:'主动结束匹配说明', |
|
value:'overRemark', |
|
}, |
|
{ |
|
label:'备注说明', |
|
value:'remark', |
|
}, |
|
{ |
|
label:'启用标识', |
|
remark:'1启用，0禁用，默认1', |
|
value:'enableMark', |
|
}, |
|
{ |
|
label:'删除标识', |
|
remark:'1删除，0未删除', |
|
value:'deleteMark', |
|
}, |
|
{ |
|
label:'启用禁用人', |
|
value:'enableUser', |
|
}, |
|
{ |
|
label:'启用禁用时间', |
|
value:'deleteTime', |
|
}, |
|
{ |
|
label:'创建人编号', |
|
value:'createUser', |
|
}, |
|
{ |
|
label:'创建时间', |
|
value:'createTime', |
|
}, |
|
{ |
|
label:'创建来源', |
|
value:'createSource', |
|
}, |
|
{ |
|
label:'修改人编号', |
|
value:'updateUser', |
|
}, |
|
{ |
|
label:'修改时间', |
|
value:'updateTime', |
|
} |
|
] |
|
} |
|
], |
|
multipleSelection: [], // 选择表格数据集合 |
|
importDialog: false, // 导入弹窗 |
|
outPutDialog: false, // 导出弹窗 |
|
showTableDrawer: false, |
|
queryCompanyList: [], // 企业列表 |
|
page: { |
|
pageSize: 10, // 每页显示条数 |
|
currentPage: 1, // 默认页 |
|
params: {}, // 查询参数 |
|
sorted: {}, |
|
columns: [], |
|
}, |
|
tableHeight: 0, |
|
filters: this.$options.filters, |
|
dataPage: { |
|
// 分页显示page |
|
pageSize: 10, // 每页显示条数 |
|
currentPage: 1, // 默认页 |
|
params: { |
|
// 查询参数 |
|
}, |
|
sorted: {}, |
|
}, |
|
tableColumns: [ |
|
{ |
|
prop: "id", |
|
label: "编号", |
|
show: true, |
|
render: (row, column, cell) => { |
|
return cell; |
|
}, |
|
}, |
|
{ |
|
prop: "companyName", |
|
label: "公司", |
|
show: true, |
|
render: (row, column, cell) => { |
|
return cell; |
|
}, |
|
}, |
|
{ |
|
prop: "matchAmount", |
|
label: "日匹配额度", |
|
show: true, |
|
render: (row, column, cell) => { |
|
return cell; |
|
}, |
|
}, |
|
{ |
|
prop: "matchMark", |
|
label: "匹配方式", |
|
show: true, |
|
render: (row, column, cell) => { |
|
if (cell === "MATCH_DAY") { |
|
return "按日匹配"; |
|
} |
|
if (cell === "MATCH_MONTH") { |
|
return "按月匹配"; |
|
} |
|
if (cell === "MATCH_AMOUNT") { |
|
return "按金额匹配"; |
|
} |
|
return cell; |
|
}, |
|
}, |
|
// { |
|
// prop: "matchPriority", |
|
// label: "优先级，1-20", |
|
// show: true, |
|
// render: (row, column, cell) => { |
|
// return cell; |
|
// }, |
|
// }, |
|
{ |
|
prop: "startTime", |
|
label: "开始时间", |
|
show: true, |
|
render: (row, column, cell) => { |
|
return cell; |
|
}, |
|
}, |
|
{ |
|
prop: "endTime", |
|
label: "结束时间", |
|
show: true, |
|
render: (row, column, cell) => { |
|
return cell; |
|
}, |
|
}, |
|
{ |
|
prop: "matchCount", |
|
label: "累计匹配轮数", |
|
show: true, |
|
render: (row, column, cell) => { |
|
return cell; |
|
}, |
|
}, |
|
{ |
|
prop: "totalAmount", |
|
label: "累计匹配金额", |
|
show: true, |
|
render: (row, column, cell) => { |
|
return cell; |
|
}, |
|
}, |
|
// { prop: 'version', label: '乐观锁', show: true, render: (row, column, cell) => { |
|
// return cell |
|
// } }, |
|
// { prop: 'overMark', label: '结束标识1：已完成0：匹配中2：主动停止', show: true, render: (row, column, cell) => { |
|
// return cell |
|
// } }, |
|
// { prop: 'overUser', label: '结束人', show: true, render: (row, column, cell) => { |
|
// return cell |
|
// } }, |
|
// { prop: 'overTime', label: '实际匹配结束时间', show: true, render: (row, column, cell) => { |
|
// return cell |
|
// } }, |
|
// { prop: 'overRemark', label: '主动结束匹配说明', show: true, render: (row, column, cell) => { |
|
// return cell |
|
// } }, |
|
// { prop: 'remark', label: '备注说明', show: true, render: (row, column, cell) => { |
|
// return cell |
|
// } }, |
|
{ |
|
prop: "enableMark", |
|
label: "启用标识", |
|
show: true, |
|
render: (row, column, cell) => { |
|
// return cell |
|
return ( |
|
<el-switch |
|
v-model={row.enableMark} |
|
active-value={1} |
|
inactive-value={0} |
|
on-change={() => this.globalEnable(row)} |
|
></el-switch> |
|
); |
|
}, |
|
}, |
|
{ |
|
prop: "overMark", |
|
label: "结束标识", |
|
show: true, |
|
render: (row, column, cell) => { |
|
if (cell === 0) { |
|
return "匹配开始"; |
|
} |
|
if (cell === 1) { |
|
return "匹配完成"; |
|
} |
|
if (cell === 2) { |
|
return "匹配停止"; |
|
} |
|
return cell; |
|
}, |
|
}, |
|
// { prop: 'deleteMark', label: '删除标识，1删除，0未删除', show: true, render: (row, column, cell) => { |
|
// return cell |
|
// } }, |
|
// { prop: 'enableUser', label: '启用禁用人', show: true, render: (row, column, cell) => { |
|
// return cell |
|
// } }, |
|
// { prop: 'enableTime', label: '启用禁用时间', show: true, render: (row, column, cell) => { |
|
// return cell |
|
// } }, |
|
// { prop: 'deleteUser', label: '启用禁用人', show: true, render: (row, column, cell) => { |
|
// return cell |
|
// } } |
|
// { prop: 'deleteTime', label: '启用禁用时间', show: true, render: (row, column, cell) => { |
|
// return cell |
|
// } }, |
|
// { prop: 'createUser', label: '创建人编号', show: true, render: (row, column, cell) => { |
|
// return cell |
|
// } }, |
|
// { prop: 'createTime', label: '创建时间', show: true, render: (row, column, cell) => { |
|
// return cell |
|
// } }, |
|
// { prop: 'createSource', label: '创建来源', show: true, render: (row, column, cell) => { |
|
// return cell |
|
// } }, |
|
// { prop: 'updateUser', label: '修改人编号', show: true, render: (row, column, cell) => { |
|
// return cell |
|
// } }, |
|
// { prop: 'updateTime', label: '修改时间', show: true, render: (row, column, cell) => { |
|
// return cell |
|
// } }, |
|
// { prop: 'updateSource', label: '修改来源', show: true, render: (row, column, cell) => { |
|
// return cell |
|
// } } |
|
], |
|
addDialog: false, // 添加弹窗 |
|
updateDialog: false, // 修改弹窗 |
|
oilCompanyMatch: {}, |
|
}; |
|
}, |
|
computed: { |
|
...mapGetters(["sysUserList"]), |
|
}, |
|
created() { |
|
this.getByPage(); |
|
// 增加监听事件，窗口变化时得到高度。 |
|
this.getHeight(); |
|
window.addEventListener("resize", this.getHeight, false); |
|
}, |
|
methods: { |
|
globalEnable(row) { |
|
console.log("row.id：" + row.id); |
|
console.log("row.enableMark：" + row.enableMark); |
|
const oilCompanyMatch = {}; |
|
oilCompanyMatch.id = row.id; |
|
oilCompanyMatch.enableMark = row.enableMark; |
|
if (row.enableMark === 1) { |
|
this.$confirm("确认启用?", "提示", { type: "success" }) |
|
.then(() => { |
|
console.log("oilCompanyMatch：" + JSON.stringify(oilCompanyMatch)); |
|
oilCompanyMatchApi.globalEnable(oilCompanyMatch).then((res) => { |
|
this.$message.success(res.msg); |
|
this.getByPage(); |
|
}); |
|
}) |
|
.catch(() => { |
|
row.enableMark = 0; |
|
}); |
|
} else { |
|
this.$confirm("确认禁用?", "提示", { type: "warning" }) |
|
.then(() => { |
|
console.log("oilCompanyMatch：" + JSON.stringify(oilCompanyMatch)); |
|
oilCompanyMatchApi.globalEnable(oilCompanyMatch).then((res) => { |
|
this.$message.success(res.msg); |
|
this.getByPage(); |
|
}); |
|
}) |
|
.catch(() => { |
|
row.enableMark = 1; |
|
}); |
|
} |
|
}, |
|
companyRemoteMethod(value) { |
|
// 远程搜索企业 |
|
if (value) { |
|
oilCompanyInfoApi.getLikeByNameSuccess({ 'name': value }).then((res) => { |
|
this.queryCompanyList = res.data; |
|
}); |
|
} |
|
}, |
|
indexMethod(index) { |
|
return (index + 1) * 1; |
|
}, |
|
handleSelectionChange(val) { |
|
// 选择表格数据 |
|
this.multipleSelection = val; |
|
}, |
|
toForbid() { |
|
// 禁用 |
|
if (!this.multipleSelection || this.multipleSelection.length < 1) { |
|
this.$message.error("请选择需要操作的数据"); |
|
return; |
|
} |
|
}, |
|
toStartUsing() { |
|
// 启用 |
|
if (!this.multipleSelection || this.multipleSelection.length < 1) { |
|
this.$message.error("请选择需要操作的数据"); |
|
return; |
|
} |
|
}, |
|
toImport() { |
|
// 导入 |
|
this.importDialog = true; |
|
}, |
|
toOutPut() { |
|
// 导出 |
|
this.outPutDialog = true; |
|
}, |
|
handleDetail(id) { |
|
// 查看行 详情 |
|
oilCompanyMatchApi.get(id).then((res) => { |
|
this.oilCompanyMatch = res.data; |
|
this.showTableDrawer = true; |
|
}); |
|
}, |
|
getHeight() { |
|
setTimeout(() => { |
|
this.sHeight = this.$refs.searchHeight.offsetHeight; |
|
let fixedHeaderHeight = |
|
document.querySelector(".fixed-header").clientHeight; |
|
let elPaginationHeight = |
|
document.querySelector(".el-pagination").clientHeight; |
|
this.tableHeight = |
|
document.documentElement.clientHeight - |
|
this.sHeight - |
|
fixedHeaderHeight - |
|
elPaginationHeight - |
|
160; |
|
}, 350); |
|
}, |
|
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.oilCompanyMatch = {}; |
|
this.addDialog = true; |
|
}, |
|
toUpdate(id) { |
|
// 跳转到更新 |
|
oilCompanyMatchApi.get(id).then((res) => { |
|
this.oilCompanyMatch = res.data; |
|
this.updateDialog = true; |
|
}); |
|
}, |
|
toDelete(id) { |
|
// 删除 |
|
this.$confirm("确定删除?", "提示", { type: "error" }).then(() => { |
|
oilCompanyMatchApi.deleteById(id).then((res) => { |
|
this.$message.success(res.msg); |
|
this.getByPage(); |
|
}); |
|
}); |
|
}, |
|
getByPage() { |
|
// 分页查询 |
|
this.addDialog = false; |
|
oilCompanyMatchApi.getByPage(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; |
|
}, |
|
}, |
|
}; |
|
</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>
|
|
|