增加流量计页面

This commit is contained in:
zhangyue 2026-07-30 09:49:42 +08:00
parent 3183720b27
commit 87557febf4
2 changed files with 93 additions and 73 deletions

View File

@ -3,17 +3,16 @@
<!--查询区域--> <!--查询区域-->
<div class="jeecg-basic-table-form-container"> <div class="jeecg-basic-table-form-container">
<a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol"> <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-row :gutter="24"> <a-row :gutter="24"> </a-row>
</a-row>
</a-form> </a-form>
</div> </div>
<!--引用表格--> <!--引用表格-->
<BasicTable @register="registerTable" :rowSelection="rowSelection"> <BasicTable @register="registerTable" :rowSelection="rowSelection">
<!--插槽:table标题--> <!--插槽:table标题-->
<template #tableTitle> <template #tableTitle>
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button> <!-- <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>-->
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button> <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
<j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button> <!-- <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>-->
<a-dropdown v-if="selectedRowKeys.length > 0"> <a-dropdown v-if="selectedRowKeys.length > 0">
<template #overlay> <template #overlay>
<a-menu> <a-menu>
@ -30,18 +29,19 @@
</template> </template>
<!--操作栏--> <!--操作栏-->
<template #action="{ record }"> <template #action="{ record }">
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)"/> <!-- <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)"/> -->
<TableAction :actions="getDetailAction(record)" />
</template> </template>
<!--字段回显插槽--> <!--字段回显插槽-->
<template #htmlSlot="{text}"> <template #htmlSlot="{ text }">
<div v-html="text"></div> <div v-html="text"></div>
</template> </template>
<!--省市区字段回显插槽--> <!--省市区字段回显插槽-->
<template #pcaSlot="{text}"> <template #pcaSlot="{ text }">
{{ getAreaTextByCode(text) }} {{ getAreaTextByCode(text) }}
</template> </template>
<template #fileSlot="{text}"> <template #fileSlot="{ text }">
<span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span> <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
<a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载</a-button> <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载</a-button>
</template> </template>
</BasicTable> </BasicTable>
@ -57,7 +57,7 @@
import { columns } from './SurvHisdataFlowmeter.data'; import { columns } from './SurvHisdataFlowmeter.data';
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './SurvHisdataFlowmeter.api'; import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './SurvHisdataFlowmeter.api';
import { downloadFile } from '/@/utils/common/renderUtils'; import { downloadFile } from '/@/utils/common/renderUtils';
import SurvHisdataFlowmeterModal from './components/SurvHisdataFlowmeterModal.vue' import SurvHisdataFlowmeterModal from './components/SurvHisdataFlowmeterModal.vue';
const formRef = ref(); const formRef = ref();
const queryParam = reactive<any>({}); const queryParam = reactive<any>({});
@ -69,7 +69,7 @@
title: 'surv_hisdata_flowmeter', title: 'surv_hisdata_flowmeter',
api: list, api: list,
columns, columns,
canResize:false, canResize: false,
useSearchForm: false, useSearchForm: false,
actionColumn: { actionColumn: {
width: 120, width: 120,
@ -80,16 +80,17 @@
}, },
}, },
exportConfig: { exportConfig: {
name: "surv_hisdata_flowmeter", name: 'surv_hisdata_flowmeter',
url: getExportUrl, url: getExportUrl,
params: queryParam, params: queryParam,
}, },
importConfig: { importConfig: {
url: getImportUrl, url: getImportUrl,
success: handleSuccess success: handleSuccess,
}, },
}); });
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext; const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] =
tableContext;
const labelCol = reactive({ const labelCol = reactive({
xs: { span: 24 }, xs: { span: 24 },
sm: { span: 7 }, sm: { span: 7 },
@ -106,7 +107,7 @@
registerModal.value.disableSubmit = false; registerModal.value.disableSubmit = false;
registerModal.value.add(); registerModal.value.add();
} }
/** /**
* 编辑事件 * 编辑事件
*/ */
@ -114,7 +115,7 @@
registerModal.value.disableSubmit = false; registerModal.value.disableSubmit = false;
registerModal.value.edit(record); registerModal.value.edit(record);
} }
/** /**
* 详情 * 详情
*/ */
@ -122,28 +123,28 @@
registerModal.value.disableSubmit = true; registerModal.value.disableSubmit = true;
registerModal.value.edit(record); registerModal.value.edit(record);
} }
/** /**
* 删除事件 * 删除事件
*/ */
async function handleDelete(record) { async function handleDelete(record) {
await deleteOne({ id: record.id }, handleSuccess); await deleteOne({ id: record.id }, handleSuccess);
} }
/** /**
* 批量删除事件 * 批量删除事件
*/ */
async function batchHandleDelete() { async function batchHandleDelete() {
await batchDelete({ ids: selectedRowKeys.value }, handleSuccess); await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
} }
/** /**
* 成功回调 * 成功回调
*/ */
function handleSuccess() { function handleSuccess() {
(selectedRowKeys.value = []) && reload(); (selectedRowKeys.value = []) && reload();
} }
/** /**
* 操作栏 * 操作栏
*/ */
@ -155,7 +156,19 @@
}, },
]; ];
} }
/**
* 操作栏
*/
function getDetailAction(record) {
return [
{
label: '详情',
onClick: handleDetail.bind(null, record),
},
];
}
/** /**
* 下拉操作栏 * 下拉操作栏
*/ */
@ -164,14 +177,15 @@
{ {
label: '详情', label: '详情',
onClick: handleDetail.bind(null, record), onClick: handleDetail.bind(null, record),
}, { },
{
label: '删除', label: '删除',
popConfirm: { popConfirm: {
title: '是否确认删除', title: '是否确认删除',
confirm: handleDelete.bind(null, record), confirm: handleDelete.bind(null, record),
} },
} },
] ];
} }
/** /**
@ -180,7 +194,7 @@
function searchQuery() { function searchQuery() {
reload(); reload();
} }
/** /**
* 重置 * 重置
*/ */
@ -190,10 +204,6 @@
// //
reload(); reload();
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@ -203,14 +213,14 @@
margin-bottom: 24px; margin-bottom: 24px;
white-space: nowrap; white-space: nowrap;
} }
.query-group-cust{ .query-group-cust {
width: calc(50% - 15px); width: calc(50% - 15px);
min-width: 100px !important; min-width: 100px !important;
} }
.query-group-split-cust{ .query-group-split-cust {
width: 30px; width: 30px;
display: inline-block; display: inline-block;
text-align: center text-align: center;
} }
} }
</style> </style>

View File

@ -3,8 +3,7 @@
<!--查询区域--> <!--查询区域-->
<div class="jeecg-basic-table-form-container"> <div class="jeecg-basic-table-form-container">
<a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol"> <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-row :gutter="24"> <a-row :gutter="24"> </a-row>
</a-row>
</a-form> </a-form>
</div> </div>
<!--引用表格--> <!--引用表格-->
@ -12,8 +11,8 @@
<!--插槽:table标题--> <!--插槽:table标题-->
<template #tableTitle> <template #tableTitle>
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button> <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button> <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
<j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button> <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
<a-dropdown v-if="selectedRowKeys.length > 0"> <a-dropdown v-if="selectedRowKeys.length > 0">
<template #overlay> <template #overlay>
<a-menu> <a-menu>
@ -30,18 +29,19 @@
</template> </template>
<!--操作栏--> <!--操作栏-->
<template #action="{ record }"> <template #action="{ record }">
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)"/> <!-- <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)"/> -->
<TableAction :actions="getDetailAction(record)" />
</template> </template>
<!--字段回显插槽--> <!--字段回显插槽-->
<template #htmlSlot="{text}"> <template #htmlSlot="{ text }">
<div v-html="text"></div> <div v-html="text"></div>
</template> </template>
<!--省市区字段回显插槽--> <!--省市区字段回显插槽-->
<template #pcaSlot="{text}"> <template #pcaSlot="{ text }">
{{ getAreaTextByCode(text) }} {{ getAreaTextByCode(text) }}
</template> </template>
<template #fileSlot="{text}"> <template #fileSlot="{ text }">
<span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span> <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
<a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载</a-button> <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载</a-button>
</template> </template>
</BasicTable> </BasicTable>
@ -57,7 +57,7 @@
import { columns } from './SurvTransdataFlowmeter.data'; import { columns } from './SurvTransdataFlowmeter.data';
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './SurvTransdataFlowmeter.api'; import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './SurvTransdataFlowmeter.api';
import { downloadFile } from '/@/utils/common/renderUtils'; import { downloadFile } from '/@/utils/common/renderUtils';
import SurvTransdataFlowmeterModal from './components/SurvTransdataFlowmeterModal.vue' import SurvTransdataFlowmeterModal from './components/SurvTransdataFlowmeterModal.vue';
const formRef = ref(); const formRef = ref();
const queryParam = reactive<any>({}); const queryParam = reactive<any>({});
@ -69,7 +69,7 @@
title: 'surv_transdata_flowmeter', title: 'surv_transdata_flowmeter',
api: list, api: list,
columns, columns,
canResize:false, canResize: false,
useSearchForm: false, useSearchForm: false,
actionColumn: { actionColumn: {
width: 120, width: 120,
@ -80,16 +80,17 @@
}, },
}, },
exportConfig: { exportConfig: {
name: "surv_transdata_flowmeter", name: 'surv_transdata_flowmeter',
url: getExportUrl, url: getExportUrl,
params: queryParam, params: queryParam,
}, },
importConfig: { importConfig: {
url: getImportUrl, url: getImportUrl,
success: handleSuccess success: handleSuccess,
}, },
}); });
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext; const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] =
tableContext;
const labelCol = reactive({ const labelCol = reactive({
xs: { span: 24 }, xs: { span: 24 },
sm: { span: 7 }, sm: { span: 7 },
@ -106,7 +107,7 @@
registerModal.value.disableSubmit = false; registerModal.value.disableSubmit = false;
registerModal.value.add(); registerModal.value.add();
} }
/** /**
* 编辑事件 * 编辑事件
*/ */
@ -114,7 +115,7 @@
registerModal.value.disableSubmit = false; registerModal.value.disableSubmit = false;
registerModal.value.edit(record); registerModal.value.edit(record);
} }
/** /**
* 详情 * 详情
*/ */
@ -122,28 +123,28 @@
registerModal.value.disableSubmit = true; registerModal.value.disableSubmit = true;
registerModal.value.edit(record); registerModal.value.edit(record);
} }
/** /**
* 删除事件 * 删除事件
*/ */
async function handleDelete(record) { async function handleDelete(record) {
await deleteOne({ id: record.id }, handleSuccess); await deleteOne({ id: record.id }, handleSuccess);
} }
/** /**
* 批量删除事件 * 批量删除事件
*/ */
async function batchHandleDelete() { async function batchHandleDelete() {
await batchDelete({ ids: selectedRowKeys.value }, handleSuccess); await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
} }
/** /**
* 成功回调 * 成功回调
*/ */
function handleSuccess() { function handleSuccess() {
(selectedRowKeys.value = []) && reload(); (selectedRowKeys.value = []) && reload();
} }
/** /**
* 操作栏 * 操作栏
*/ */
@ -155,7 +156,19 @@
}, },
]; ];
} }
/**
* 操作栏
*/
function getDetailAction(record) {
return [
{
label: '详情',
onClick: handleDetail.bind(null, record),
},
];
}
/** /**
* 下拉操作栏 * 下拉操作栏
*/ */
@ -164,14 +177,15 @@
{ {
label: '详情', label: '详情',
onClick: handleDetail.bind(null, record), onClick: handleDetail.bind(null, record),
}, { },
{
label: '删除', label: '删除',
popConfirm: { popConfirm: {
title: '是否确认删除', title: '是否确认删除',
confirm: handleDelete.bind(null, record), confirm: handleDelete.bind(null, record),
} },
} },
] ];
} }
/** /**
@ -180,7 +194,7 @@
function searchQuery() { function searchQuery() {
reload(); reload();
} }
/** /**
* 重置 * 重置
*/ */
@ -190,10 +204,6 @@
// //
reload(); reload();
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@ -203,14 +213,14 @@
margin-bottom: 24px; margin-bottom: 24px;
white-space: nowrap; white-space: nowrap;
} }
.query-group-cust{ .query-group-cust {
width: calc(50% - 15px); width: calc(50% - 15px);
min-width: 100px !important; min-width: 100px !important;
} }
.query-group-split-cust{ .query-group-split-cust {
width: 30px; width: 30px;
display: inline-block; display: inline-block;
text-align: center text-align: center;
} }
} }
</style> </style>