Files
dispacth_zhongpin/src/views/finance/oilCompanyMatch/OilCompanyMatchList.vue
2023-04-26 18:12:25 +08:00

774 lines
22 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<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-drawer
title="添加"
class="table-detail-drawer"
:visible.sync="addDialog"
direction="ltr"
size="60%"
>
<OilCompanyMatchAdd @getByPage="getByPage" @closeDialog="closeDialog" />
</el-drawer>
<!-- 导出弹窗 -->
<el-dialog
v-el-drag-dialog
title="导出"
:visible.sync="outPutDialog"
width="60%"
>
<OilCompanyMatchOutput
@getByPage="getByPage"
@closeDialog="closeDialog"
/>
</el-dialog>
<!-- 导入弹窗 -->
<el-dialog
v-el-drag-dialog
title="导入"
:visible.sync="importDialog"
width="60%"
>
<OilCompanyMatchImport
@getByPage="getByPage"
@closeDialog="closeDialog"
/>
</el-dialog>
<!-- 修改抽屉 -->
<el-drawer
title="修改"
class="table-detail-drawer"
:visible.sync="updateDialog"
direction="ltr"
size="60%"
>
<OilCompanyMatchUpdate
v-if="updateDialog"
:oil-company-match="oilCompanyMatch"
@getByPage="getByPage"
@closeDialog="closeDialog"
/>
</el-drawer>
<!-- 详情抽屉 -->
<el-drawer
title="详情"
class="table-detail-drawer"
:visible.sync="showTableDrawer"
size="60%"
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>