yexb
ef80aff151
- 更新 API 接口路径从 /steady/data-view/checksquare/* 到 /steady/checksquare/* - 修改校验任务状态枚举值 FAILED 为 FAIL 并更新相关处理逻辑 - 移除缺失率和最大连续缺失分钟数字段，简化数据完整性计算 - 添加新的创建结果面板组件 ChecksquareCreateResultPanel.vue - 调整创建对话框布局，采用两行搜索控件设计 - 更新任务表头部按钮文字为"新增"并调整搜索列配置为5列 - 修改详情面板显示开始时间和结束时间字段 - 重构工作台界面布局，使用 flex 布局替代 grid 布局 - 更新设备类型相关 API 接口和数据结构定义 - 添加设备类型字典常量并更新路由配置 - 优化搜索表单展开收起逻辑的计算方式 - 调整创建流程不再轮询获取任务详情，改为直接显示摘要信息 - 更新数据完整性格式化函数参数和调用方式 - 修改创建对话框样式类名和尺寸配置 - 添加设备类型管理相关的接口定义和实现方法
97 lines
3.3 KiB
Vue
97 lines
3.3 KiB
Vue
<template>
|
|
<div v-if='columns.length' class='card table-search'>
|
|
<el-form ref='formRef' :model='searchParam'>
|
|
<Grid ref='gridRef' :collapsed='collapsed' :gap='[20, 0]' :cols='searchCol'>
|
|
<GridItem v-for='(item, index) in columns' :key='item.prop' v-bind='getResponsive(item)' :index='index'>
|
|
<el-form-item>
|
|
<template #label>
|
|
<el-space :size='4'>
|
|
<span>{{ `${item.search?.label ?? item.label}` }}</span>
|
|
<el-tooltip v-if='item.search?.tooltip' effect='dark' :content='item.search?.tooltip' placement='top'>
|
|
<i :class="'iconfont icon-yiwen'"></i>
|
|
</el-tooltip>
|
|
</el-space>
|
|
<span> :</span>
|
|
</template>
|
|
<SearchFormItem :column='item' :search-param='searchParam' />
|
|
</el-form-item>
|
|
</GridItem>
|
|
<GridItem suffix>
|
|
<div class='operation'>
|
|
<el-button type='primary' :icon='Search' @click='search'> 搜索</el-button>
|
|
<el-button :icon='Delete' @click='reset'> 重置</el-button>
|
|
<el-button v-if='showCollapse' type='primary' link class='search-isOpen' @click='collapsed = !collapsed'>
|
|
{{ collapsed ? '展开' : '合并' }}
|
|
<el-icon class='el-icon--right'>
|
|
<component :is='collapsed ? ArrowDown : ArrowUp'></component>
|
|
</el-icon>
|
|
</el-button>
|
|
</div>
|
|
</GridItem>
|
|
</Grid>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
<script setup lang='ts' name='SearchForm'>
|
|
import type { ColumnProps } from '@/components/ProTable/interface'
|
|
import type { BreakPoint } from '@/components/Grid/interface'
|
|
import { Delete, Search, ArrowDown, ArrowUp } from '@element-plus/icons-vue'
|
|
import SearchFormItem from './components/SearchFormItem.vue'
|
|
import Grid from '@/components/Grid/index.vue'
|
|
import GridItem from '@/components/Grid/components/GridItem.vue'
|
|
|
|
|
|
interface ProTableProps {
|
|
columns?: ColumnProps[]; // 搜索配置列
|
|
searchParam?: {
|
|
[key: string]: any
|
|
}; // 搜索参数
|
|
searchCol: number | Record<BreakPoint, number>;
|
|
search: (params: any) => void; // 搜索方法
|
|
reset: (params: any) => void; // 重置方法
|
|
}
|
|
|
|
// 默认值
|
|
const props = withDefaults(defineProps<ProTableProps>(), {
|
|
columns: () => [],
|
|
searchParam: () => ({}),
|
|
})
|
|
|
|
// 获取响应式设置
|
|
const getResponsive = (item: ColumnProps) => {
|
|
return {
|
|
span: item.search?.span,
|
|
offset: item.search?.offset ?? 0,
|
|
xs: item.search?.xs,
|
|
sm: item.search?.sm,
|
|
md: item.search?.md,
|
|
lg: item.search?.lg,
|
|
xl: item.search?.xl,
|
|
}
|
|
}
|
|
|
|
// 是否默认折叠搜索项
|
|
const collapsed = ref(true)
|
|
|
|
// 获取响应式断点
|
|
const gridRef = ref()
|
|
const breakPoint = computed<BreakPoint>(() => gridRef.value?.breakPoint)
|
|
|
|
// 判断是否显示 展开/合并 按钮
|
|
const showCollapse = computed(() => {
|
|
let show = false
|
|
const searchColCount =
|
|
typeof props.searchCol !== 'number' ? props.searchCol[breakPoint.value] : props.searchCol
|
|
const firstRowSearchCols = Math.max(searchColCount - 1, 1)
|
|
|
|
props.columns.reduce((prev, current) => {
|
|
prev +=
|
|
(current.search![breakPoint.value]?.span ?? current.search?.span ?? 1) +
|
|
(current.search![breakPoint.value]?.offset ?? current.search?.offset ?? 0)
|
|
if (prev > firstRowSearchCols) show = true
|
|
return prev
|
|
}, 0)
|
|
return show
|
|
})
|
|
</script>
|