物联设备增加批次查询条件,表格内部增加竖向滚动条

This commit is contained in:
曹磊 2026-04-24 17:49:09 +08:00
parent 214e6c8134
commit ef55e801ee
3 changed files with 42 additions and 21 deletions

View File

@ -4,13 +4,19 @@
<a-form ref="formRef" :model="queryParam" :label-col="labelCol"
:wrapper-col="wrapperCol">
<a-row :gutter="24">
<a-col :lg="6">
<a-col :lg="5">
<a-form-item name="batchNo">
<template #label><span title="设备批次">设备批次</span></template>
<a-input v-model:value="queryParam.batchNo" placeholder="请输入设备批次" allow-clear />
</a-form-item>
</a-col>
<a-col :lg="5">
<a-form-item name="nuName">
<template #label><span title="区域名称">区域名称</span></template>
<a-input v-model:value="queryParam.nuName" placeholder="请输入区域名称" allow-clear />
</a-form-item>
</a-col>
<a-col :lg="6">
<a-col :lg="5">
<a-form-item name="dimension">
<template #label><span title="设备维度">设备维度</span></template>
<a-select v-model:value="queryParam.dimension" placeholder="请选择设备维度" allow-clear>
@ -19,19 +25,17 @@
</a-select>
</a-form-item>
</a-col>
<a-col :lg="6">
<a-col :lg="5">
<a-form-item name="deviceType">
<template #label><span title="设备类型">设备类型</span></template>
<j-dict-select-tag v-model:value="queryParam.deviceType" :showLabel="false" dictCode="tplink_device_type" placeholder="请选择设备类型" allow-clear />
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-col :lg="4">
<span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
<a-col :lg="6">
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset"
style="margin-left: 8px">重置</a-button>
</a-col>
</span>
</a-col>
</a-row>

View File

@ -5,6 +5,12 @@
<a-form ref="formRef" :model="queryParam" :label-col="labelCol"
:wrapper-col="wrapperCol">
<a-row :gutter="24">
<a-col :lg="6">
<a-form-item name="batchNo">
<template #label><span title="设备批次">设备批次</span></template>
<a-input v-model:value="queryParam.batchNo" placeholder="请输入设备批次" allow-clear />
</a-form-item>
</a-col>
<a-col :lg="6">
<a-form-item name="dimension">
<template #label><span title="设备维度">设备维度</span></template>
@ -35,24 +41,23 @@
</a-form>
</div>
<!--引用表格-->
<BasicTable @register="registerTable">
<!--插槽:table标题-->
<template #tableTitle>
</template>
<!--操作栏-->
<template #action="{ record }">
<TableAction :actions="getTableAction(record)"/>
</template>
<template v-slot:bodyCell="{ column, record, index, text }">
</template>
</BasicTable>
<div class="container-height">
<BasicTable @register="registerTable" >
<!--操作栏-->
<template #action="{ record }">
<TableAction :actions="getTableAction(record)"/>
</template>
<template v-slot:bodyCell="{ column, record, index, text }">
</template>
</BasicTable>
</div>
<!-- 表单区域 -->
<DevicePreviewFormModal ref="formDrawer" @success="handleSuccess" />
</div>
</template>
<script lang="ts" name="iotManager-areaList" setup>
import {ref, reactive, defineExpose, nextTick, createVNode} from 'vue';
import {ref, reactive, defineExpose, nextTick, createVNode, computed} from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { previewColumns } from '../../manager.data';
@ -63,6 +68,7 @@ import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectT
import {Modal} from "ant-design-vue";
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
import {useMethods} from "@/hooks/system/useMethods";
import {useResponsive} from "@/hooks/web/useResponsive";
const { handleExportXls} = useMethods();
const formRef = ref();
@ -70,16 +76,23 @@ const queryParam = reactive<any>({});
const formDrawer = ref();
const orgCode = ref<any>('');
const userStore = useUserStore();
const { screenEnum, screenWidth } = useResponsive();
//
const scrollY = computed(() => {
// 1600px使 71vh使 66.5vh
return screenWidth.value >= screenEnum.XXL ? '60.8vh' : '58.5vh';
});
//table
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
tableProps: {
title: '设备清单',
api: previewList,
columns: previewColumns,
canResize: false,
useSearchForm: false,
showIndexColumn: true,
showTableSetting: false,
immediate: false,
scroll: { y: scrollY.value },
pagination: {
current: 1,
pageSize: 15,
@ -174,6 +187,10 @@ defineExpose({
<style lang="less" scoped>
.container-height {
height: 57vh;
}
.jeecg-basic-table-form-container {
padding: 0;
.table-page-search-submitButtons {

View File

@ -4,7 +4,7 @@ import {FormSchema} from '/@/components/Table';
//列表数据
export const columns: BasicColumn[] = [
{
title: '批次',
title: '设备批次',
align: "center",
dataIndex: 'batchNo',
},
@ -79,7 +79,7 @@ export const columns: BasicColumn[] = [
//列表数据
export const previewColumns: BasicColumn[] = [
{
title: '批次',
title: '设备批次',
align: "center",
dataIndex: 'batchNo',
},