190 lines
3.8 KiB
Vue
190 lines
3.8 KiB
Vue
<template>
|
|
<div class="w-full h-full flex flex-col body_one">
|
|
<WqSearch
|
|
@search-finish="onSearchFinish"
|
|
@reset="onReset"
|
|
ref="searchRef"
|
|
/>
|
|
|
|
<BasicTable
|
|
ref="tableRef"
|
|
:enableEllipsis="true"
|
|
:scrollX="tableScrollX"
|
|
:scrollY="tableScrollY"
|
|
:columns="columns"
|
|
:list-url="getWqPageList"
|
|
>
|
|
</BasicTable>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, onMounted, nextTick } from 'vue';
|
|
import dayjs from 'dayjs';
|
|
import WqSearch from './WqSearch.vue';
|
|
import BasicTable from '@/components/BasicTable/index.vue';
|
|
import { getWqPageList } from '@/api/DataQueryMenuModule';
|
|
import { calcTableScrollY } from '@/utils/index';
|
|
|
|
const tableRef = ref();
|
|
const tableScrollY = ref<string | number>(0);
|
|
const currentSearchParams = ref<any>({});
|
|
|
|
|
|
|
|
const columns = ref<any[]>([
|
|
{
|
|
key: 'stnm',
|
|
title: '测站名称',
|
|
dataIndex: 'stnm',
|
|
visible: true,
|
|
width: 150,
|
|
ellipsis: true
|
|
},
|
|
{
|
|
key: 'stcd',
|
|
title: '水质站站码',
|
|
dataIndex: 'stcd',
|
|
visible: true,
|
|
width: 180,
|
|
fixed: 'left',
|
|
ellipsis: true
|
|
},
|
|
|
|
{
|
|
key: 'sttpName',
|
|
title: '测站类型',
|
|
dataIndex: 'sttpName',
|
|
visible: true,
|
|
width: 120,
|
|
ellipsis: true
|
|
},
|
|
|
|
{
|
|
key: 'baseName',
|
|
title: '水电基地',
|
|
dataIndex: 'baseName',
|
|
visible: true,
|
|
width: 120,
|
|
ellipsis: true
|
|
},
|
|
{
|
|
key: 'ennm',
|
|
title: '所属电站',
|
|
dataIndex: 'ennm',
|
|
visible: true,
|
|
width: 150,
|
|
ellipsis: true
|
|
},
|
|
|
|
{
|
|
key: 'dtinTypeName',
|
|
title: '类别',
|
|
dataIndex: 'dtinTypeName',
|
|
visible: true,
|
|
width: 100,
|
|
ellipsis: true
|
|
},
|
|
{
|
|
key: 'wwqtgName',
|
|
title: '水质要求',
|
|
dataIndex: 'wwqtgName',
|
|
visible: true,
|
|
width: 100,
|
|
ellipsis: true
|
|
},
|
|
{
|
|
key: 'mwayName',
|
|
title: '监测方式',
|
|
dataIndex: 'mwayName',
|
|
visible: true,
|
|
width: 100,
|
|
ellipsis: true
|
|
},
|
|
{
|
|
key: 'jcdt',
|
|
title: '建成日期',
|
|
dataIndex: 'jcdt',
|
|
visible: true,
|
|
width: 110,
|
|
customRender: ({ text }) => {
|
|
if (!text || text === '-') return '-';
|
|
const date = dayjs(text);
|
|
return date.isValid() ? date.format('YYYY-MM-DD') : '-';
|
|
}
|
|
},
|
|
{
|
|
key: 'stlc',
|
|
title: '站址',
|
|
dataIndex: 'stlc',
|
|
visible: true,
|
|
ellipsis: true
|
|
},
|
|
{
|
|
key: 'action',
|
|
title: '操作',
|
|
dataIndex: 'action',
|
|
fixed: 'right',
|
|
width: 120
|
|
}
|
|
]);
|
|
|
|
const tableScrollX = computed(() =>
|
|
Math.max(
|
|
columns.value.reduce(
|
|
(sum: number, col: any) => sum + (col.width || 180),
|
|
0
|
|
),
|
|
600
|
|
)
|
|
);
|
|
|
|
const buildSearchParams = (values: any) => {
|
|
return {
|
|
logic: 'and',
|
|
filters: [
|
|
values.rstcd
|
|
? { field: 'rstcd', operator: 'eq', dataType: 'string', value: values.rstcd }
|
|
: null,
|
|
values.baseId !== 'all' && values.baseId != null
|
|
? { field: 'baseId', operator: 'eq', dataType: 'string', value: values.baseId }
|
|
: null,
|
|
values.stnm
|
|
? { field: 'stnm', operator: 'contains', dataType: 'string', value: values.stnm }
|
|
: null,
|
|
values.sttp
|
|
? { field: 'sttp', operator: 'eq', dataType: 'string', value: values.sttp }
|
|
: null
|
|
].filter(Boolean)
|
|
};
|
|
};
|
|
|
|
const onSearchFinish = (values: any) => {
|
|
currentSearchParams.value = values;
|
|
initTable(values);
|
|
};
|
|
|
|
const onReset = (values: any) => {
|
|
currentSearchParams.value = values;
|
|
initTable(values);
|
|
};
|
|
|
|
const initTable = (values: any) => {
|
|
const params = buildSearchParams(values);
|
|
tableRef.value.getList(params);
|
|
};
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
tableScrollY.value = calcTableScrollY(tableRef.value);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.body_one {
|
|
position: relative;
|
|
z-index: 900;
|
|
pointer-events: all;
|
|
}
|
|
</style>
|