物联设备增加批次查询条件,表格内部增加竖向滚动条
This commit is contained in:
parent
214e6c8134
commit
ef55e801ee
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue