Skip to content

D
dsk-operate-sys-cscec
Commit c8c1d75a authored by tyn's avatar tyn
Browse files
Options

查询过滤工具函数添加

parent 1feb3eb0
Hide whitespace changes
Inline Side-by-side
Showing with 252 additions and 25 deletions
dsk-operate-ui/src/assets/styles/el-search-form-public.scss
View file @ c8c1d75a
......@@ -70,6 +70,9 @@
.el-range__close-icon {
line-height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.el-range-separator {
......
dsk-operate-ui/src/components/DskTableHeaderSetting/index.vue
View file @ c8c1d75a
<template>
<div class="dsk-table-header-setting" @click="showHeaderSetting = !showHeaderSetting">
<div class="dsk-table-header-setting" @click="showHeaderSetting">
<svg-icons :icon-class="'table-header-setting-icon'" :class-name="'table-header-setting-icon'"></svg-icons>
<div class="table-header-setting-text">表头设置</div>
<transition appear name="head" mode="out-in">
......
dsk-operate-ui/src/components/TableListCom/index.vue
View file @ c8c1d75a
......@@ -4,7 +4,7 @@
<el-table v-if="tableDataTotal>0" class="fixed-table" :class="headerFixed ? 'headerFixed':''" v-loading="tableLoading" :data="tableData"
element-loading-text="Loading" ref="tableRef" border fit highlight-current-row :default-sort="defaultSort?defaultSort:{}"
@sort-change="sortChange" @selection-change="selectionChange" :cell-class-name="cellClassName" :cell-style="cellStyle" :height="height"
:maxHeight="maxHeight">
:maxHeight="maxHeight" v-sticky-header="stickyHeader">
<el-table-column type="selection" :width="needSelection.width ? needSelection.width : '38px'" v-if="needSelection.flag"
:fixed="needSelection.fixed" :align="needSelection.align" :show-overflow-tooltip="needSelection.showOverflowTooltip">
</el-table-column>
......@@ -26,7 +26,8 @@
<!-- 普通列 -->
<el-table-column v-else :key="item.uid ? item.uid : index" :label="item.label" :prop="item.prop" :width="item.width"
:min-width="item.minWidth" :align="item.align?item.align:'left'" :fixed="item.fixed"
:sortable="item.sortable ?item.sortable=='custom'? 'custom':true : false" :resizable="false">
:sortable="item.sortable ?item.sortable=='custom'? 'custom':true : false" :resizable="false"
:show-overflow-tooltip="item.showOverflowTooltip">
<template v-if="item.children&&item.children.length">
<el-table-column v-for="(cld, i) in item.children" :key="i" :prop="cld.prop" :label="cld.label" :width="cld.width" :resizable="false">
<template slot-scope="cldscope">
......@@ -108,7 +109,8 @@ export default {
type: Object,
default: () => ({
offsetBottom: '0px',
offsetTop: "0px"
offsetTop: "0px",
show: false
})
},
headerFixed: {
......@@ -214,19 +216,120 @@ export default {
text-overflow: ellipsis;
overflow: hidden;
}
.pagination-box {
display: flex;
align-items: center;
justify-content: flex-end;
}
.el-table th.gutter {
display: table-cell !important;
}
// .el-table th.gutter {
// display: table-cell !important;
// }
.el-table--border th.gutter:last-of-type {
display: block !important;
padding-right: 16px;
}
.el-table__body-wrapper::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.el-scrollbar-warp::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.el-table {
.cell {
height: 21px;
&.el-tooltip {
height: 21px;
}
}
}
}
::v-deep .el-table__body tr.current-row > td.el-table__cell {
background-color: #ffffff;
}
/*::v-deep .el-table__fixed{
height: calc(100% - 16px) !important;
}*/
::v-deep .el-table__row {
&:nth-child(even) {
background-color: #f9fcff;
.more {
background: #f8fbff;
span {
color: #0081ff;
}
}
}
&:nth-child(odd) {
.more {
span {
color: #0081ff;
}
}
}
}
.table-item {
::v-deep .el-table td.el-table__cell {
border-bottom: 0;
}
}
::v-deep .el-table th.el-table__cell.is-leaf,
::v-deep .el-table td.el-table__cell {
border-bottom: 1px solid #e6eaf1;
}
::v-deep .el-table--border .el-table__cell {
border-right: 1px solid #e6eaf1;
}
::v-deep .el-table__body tr.hover-row.current-row > td,
::v-deep .el-table__body tr.hover-row.el-table__row--striped.current-row > td,
::v-deep .el-table__body tr.hover-row.el-table__row--striped > td,
::v-deep .el-table__body tr.hover-row > td {
background-color: #dcebff !important;
.more {
background: #dcebff;
}
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #dcebff;
}
::v-deep .fixed-table {
overflow: visible;
}
::v-deep .el-table__header-wrapper {
position: sticky;
top: 0;
z-index: 9;
}
::v-deep .el-table__fixed-header-wrapper {
position: sticky;
z-index: 9;
top: 0;
}
.headerFixed {
::v-deep .el-table__header-wrapper {
position: sticky;
top: 80px;
z-index: 9;
}
::v-deep .el-table__fixed-header-wrapper {
position: sticky;
z-index: 9;
top: 80px;
}
}
::v-deep .el-table__fixed {
overflow-x: clip;
overflow-y: clip;
}
}
</style>
dsk-operate-ui/src/utils/index.js
View file @ c8c1d75a
......@@ -587,6 +587,43 @@ export function hasDuplicates(arr, mapKey = null) {
}
}
/**
* 表单查询条件过滤
* @param {Object} params
*/
export function queryConditionFiltering(params) {
try {
if (Object.prototype.toString.call(params) != "[object Object]") throw new Error("传入查询条件不是一个对象");
const _temp = JSON.parse(JSON.stringify(params));
const keys = Object.keys(_temp);;
const len = keys.length;
const result = {};
for (let index = 0; index < len; index++) {
const key = keys[index];
if (_temp.hasOwnProperty(key)) {
// 数组内部不处理 外部处理
if (_temp[key] instanceof Array) {
result[key] = _temp[key];
continue;
}
// 如果是对象 递归处理
if (Object.prototype.toString.call(_temp[key]) == "[object Object]") {
result[key] = queryConditionFiltering(_temp[key]);
continue;
}
// 过滤无效值 0为有效数据
if (_temp[key] || _temp[key] == "0") {
result[key] = _temp[key];
continue;
}
}
}
return result;
} catch (error) {
console.warn(error);
}
}
// 甲方详情左侧菜单映射
export const detailSideBar = new Map([
// 企业速览
......
dsk-operate-ui/src/views/consultingOrgManagement/components/ProjectList/index.vue
View file @ c8c1d75a
......@@ -50,7 +50,7 @@
<!-- 查询重置 -->
<div class="consulting-search-form-btn">
<el-button type="primary" @click="searchForm" class="search-btn">查询</el-button>
<el-button type="primary" @click="searchForm(true)" class="search-btn">查询</el-button>
<el-button @click="resetForm" class="reset-btn">重置</el-button>
</div>
......@@ -102,6 +102,7 @@ import DskTableHeaderSetting from "@/components/DskTableHeaderSetting";
import TableListCom from "@/components/TableListCom";
import Skeleton from "@/components/Skeleton";
import { getConsultingOrgProjectListWithSearchApi } from "@/api/consultingOrgManagement";
import { queryConditionFiltering } from "@/utils";
import { v4 } from 'uuid';
export default {
name: "cooperationDeskAccountProject",
......@@ -114,35 +115,53 @@ export default {
data() {
return {
form: {
// 项目名称
projectName: "",
consultingAgency: "",
ownerName: "",
undertakingUnit: "",
// 咨询机构名称
advisoryBodyName: "",
// 业主单位
ownerUnit: "",
// 承接项目单位
undertakeProjectUnit: "",
// 项目创建开始时间
projectStartTime: "",
// 项目创建开始结束时间
projectEndTime: "",
// 组件时间用值
projectCreateTime: [],
prjectType: "",
engineeringCategory: "",
engineeringCategoryDeatil: "",
contractAmount: []
// 项目承接类型
projectUndertakeType: "",
// 工程基础大类
engineeringFoundationCategory: "",
// 工程类别明细
engineeringCategoryDetail: "",
// 组件合同金额区间
contractAmount: [],
// 最小合同金额
minContractAmount: "",
// 最大合同金额
maxContractAmount: ""
},
tableLoading: false,
// 列表表头
formColum: [
{ label: '序号', type: "index", lock: true, fixed: true, uid: v4() },
{ label: '项目列表', prop: 'projectName', width: "220px", lock: true, slot: true, uid: v4() },
{ label: '序号', prop: "staticSerialNumber", type: "index", lock: true, fixed: false, uid: v4() },
{ label: '项目列表', prop: 'projectName', width: "220px", lock: true, fixed: false, slot: true, uid: v4(), showOverflowTooltip: true },
{ label: '项目编码', prop: 'projectCode', width: "121px", uid: v4() },
{ label: '省市', prop: 'provinceName', width: "100px", uid: v4() },
{ label: '项目承接类型', prop: 'isinvestproject', width: "100px", uid: v4() },
{ label: '工程基础大类', prop: 'projectType1', width: "100px", uid: v4() },
{ label: '工程类别明细', prop: 'projectType', width: "100px", uid: v4() },
{ label: '工程基础大类', prop: 'projectType1', minWidth: "100px", uid: v4() },
{ label: '工程类别明细', prop: 'projectType', minWidth: "100px", uid: v4() },
{ label: '项目负责人姓名', prop: 'projectLeader', width: "110px", uid: v4() },
{ label: '项目负责人专业', prop: 'projectLeaderMajor', width: "110px", uid: v4() },
{ label: '项目负责人联系电话', prop: 'projectLeaderPhone', width: "135px", uid: v4() },
{ label: '合同金额（元）', prop: 'contractOrigValue', width: "110px", align: "right", uid: v4() },
{ label: '业主单位', prop: 'ownerName', slot: true, uid: v4() },
{ label: '业主单位', prop: 'ownerName', slot: true, uid: v4(), width: "185px", showOverflowTooltip: true },
{ label: '项目承接单位', prop: 'contractOrgName', width: "196px", slot: true, uid: v4() },
{ label: '咨询机构名称', prop: 'advisoryBodyName', width: "172px", slot: true, uid: v4() },
{ label: '创建时间', prop: 'loadTime', width: "172px", uid: v4() },
],
fixedPropsKey: ["staticSerialNumber", "projectName"],
queryParams: {
pageSize: 50,
pageNum: 1
......@@ -186,7 +205,10 @@ export default {
},
//可访问data属性
created() {
this.getList();
this.init();
},
beforeDestroy() {
this.removeScrollXListen();
},
//计算集
computed: {
......@@ -194,18 +216,52 @@ export default {
},
//方法集
methods: {
searchForm() {
async init() {
try {
await this.getList(this.queryParams);
} catch (error) {
}
},
// 创建最终查询条件
mergeCondition() {
const _queryParams = JSON.parse(JSON.stringify(this.queryParams));
// 过滤条件
const _form = queryConditionFiltering(this.form);
// 处理时间
if (_form?.projectCreateTime?.length) {
_form.projectStartTime = _form?.projectCreateTime[0];
_form.projectEndTime = _form?.projectCreateTime[1];
}
// 处理合同金额
if (_form?.contractAmount?.length) {
_form.minContractAmount = _form?.contractAmount[0];
_form.maxContractAmount = _form?.contractAmount[1];
}
delete _form.contractAmount;
delete _form.projectCreateTime;
return { ..._queryParams, ..._form };
},
searchForm(defaultPage = false) {
// 查询按钮从第一页查询
if (defaultPage) {
this.queryParams.pageNum = 1;
this.queryParams.pageSize = 50;
}
this.getList(this.mergeCondition());
},
resetForm() {
const defaultValue = this.$options.data.call(this);
this.form = defaultValue.form;
this.queryParams = defaultValue.queryParams;
this.getList(this.queryParams);
},
async getList() {
async getList(params) {
try {
this.tableLoading = true;
const result = await getConsultingOrgProjectListWithSearchApi(this.queryParams);
const result = await getConsultingOrgProjectListWithSearchApi(params);
if (result.code == 200) {
this.tableDataList = result.rows ? result.rows : [];
this.total = result.total ? result.total : 0;
......@@ -218,9 +274,11 @@ export default {
} finally {
this.tableLoading = false;
await this.$nextTick();
this.$refs.tableContainer.$refs.tableRef.doLayout();
this.total ? this.$refs.tableContainer.$refs.tableRef.doLayout() : null;
this.listenScrollX();
}
},
// 表头设置变化
async settingChange(use) {
try {
this.formColum = use;
......@@ -229,7 +287,33 @@ export default {
}
},
handleCurrentChange(page) {
this.queryParams.pageNum = page;
this.searchForm();
},
async listenScrollX() {
try {
await this.$nextTick();
const scrollContainer = document.querySelector(".el-table__body-wrapper");
if (scrollContainer) {
scrollContainer.removeEventListener("scroll", this.listenHandler, false);
scrollContainer.addEventListener("scroll", this.listenHandler, false);
}
} catch (error) {
}
},
removeScrollXListen() {
const scrollContainer = document.querySelector(".el-table__body-wrapper");
if (scrollContainer) {
scrollContainer.removeEventListener("scroll", this.listenHandler, false);
}
},
listenHandler(e) {
const { target } = e;
if (target) {
const flag = target.scrollLeft > 0 ? true : false;
this.formColum.forEach(item => this.fixedPropsKey.includes(item.prop) ? item.fixed = flag : null);
}
}
},
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment