罗湖附近网站建设公司全网搜索引擎

罗湖附近网站建设公司,全网搜索引擎,网站成品免费下载,推广普通话作文在现代管理系统中，复杂的数据查询功能是必不可少的。本文将深入探讨Vue 3中如何优雅地处理多种查询条件，包括时间范围选择、多字段筛选等，提升用户体验和代码可维护性。 技术难点分析 在信息公开管理系统中，复杂查询面临以下挑战： 多样化的查询条件：文本输入、下拉选择…在现代管理系统中，复杂的数据查询功能是必不可少的。本文将深入探讨Vue 3中如何优雅地处理多种查询条件，包括时间范围选择、多字段筛选等，提升用户体验和代码可维护性。技术难点分析在信息公开管理系统中，复杂查询面临以下挑战：多样化的查询条件：文本输入、下拉选择、时间范围、树形选择等多种控件组合时间范围处理：需要将时间范围转换为后台可识别的开始和结束时间条件重置功能：需要能够一键清空所有查询条件并重新加载数据查询状态管理：需要维护查询条件状态并在页面刷新后保持性能优化：避免不必要的重复查询请求实现效果通过合理的查询条件处理方案，我们可以实现：灵活多样的查询条件组合便捷的查询条件重置功能高效的时间范围处理机制一致的用户体验易于维护的代码结构示例演示以下是一个完整的示例，展示了如何在Vue 3中处理复杂查询条件：template div h2信息公开查询系统/h2 !-- 复杂查询表单 -- a-card complex-query-form ref="queryFormRef" :model="queryModel" :fields="queryFields" @search="handleSearch" @reset="handleReset" template #extra-buttons a-button @click="handleExport"导出数据/a-button a-button @click="handleAdvancedToggle" { { showAdvanced ? '收起' : '展开' }}高级查询 /a-button /template /complex-query-form /a-card !-- 查询结果 -- a-card a-table :data-source="tableData" :columns="columns" :loading="loading" :pagination="pagination" @change="handleTableChange" / /a-card /div /template script setup import { ref, reactive, onMounted } from 'vue'; import ComplexQueryForm from './ComplexQueryForm.vue'; // 查询表单引用 const queryFormRef = ref(); // 查询模型 const queryModel = reactive({ // 基础查询条件 keyword: '', status: '', type: '', dateRange: [], // 高级查询条件 department: '', priority: '', source: '', handler: '' }); // 查询字段配置 const queryFields = reactive([ // 基础查询字段 { key: 'keyword', label: '关键字', component: 'input', props: { placeholder: '请输入关键字' }, span: 6 }, { key: 'status', label: '状态', component: 'select', props: { placeholder: '请选择状态', options: [ { value: '', label: '全部' }, { value: '0', label: '待处理' }, { value: '1', label: '处理中' }, { value: '2', label: '已完成' } ] }, span: 6 }, { key: 'type', label: '类型', component: 'select', props: { placeholder: '请选择类型', options: [ { value: '', label: '全部' }, { value: 'complaint', label: '投诉' }, { value: 'praise', label: '表扬' }, { value: 'exposure', label: '曝光' } ] }, span: 6 }, { key: 'dateRange', label: '时间范围', component: 'range-picker', props: { placeholder: ['开始时间', '结束时间'] }, span: 6 }, // 高级查询字段 { key: 'department', label: '处理部门', component: 'tree-select', props: { placeholder: '请选择处理部门', treeData: [], showSearch: true }, span: 6, advanced: true }, { key: 'priority', label: '优先级', component: 'radio-group', props: { options: [ { value: '', label: '全部' }, { value: 'low', label: '低' }, { value: 'medium', label: '中' }, { value: 'high', label: '高' } ] }, span: 6, advanced: true }, { key: 'source', label: '来源', component: 'checkbox-group', props: { options: [ { value: 'web', label: '网页' }, { value: 'app', label: 'APP' }, { value: 'wechat', label: '微信' } ] }, span: 6, advanced: true }, { key: 'handler', label: '处理人', component: 'auto-complete', props: { placeholder: '请输入处理人', dataSource: [] }, span: 6, advanced: true } ]); // 表格数据 const tableData = ref([]); const loading = ref(false); // 分页配置 const pagination = reactive({ current: 1, pageSize: 10, total: 0, showSizeChanger: true, showQuickJumper: true, showTotal: (total) = `共 ${total} 条记录` }); // 是否显示高级查询 const showAdvanced = ref(false); // 处理查询 const handleSearch = async (formData) = { loading.value = true; try { // 处理查询参数 const params = { ...formData, pageNum: pagination.current, pageSize: pagination.pageSize }; // 特殊处理时间范围 if (formData.dateRange formData.dateRange.length === 2) { params.startTime = formData.dateRange[0].format('YYYY-MM-DD'); params.endTime = formData.dateRange[1].format('YYYY-MM-DD'); } delete params.dateRange; // 处理多选值 if (Array.isArray(formData.source)) { params.source = formData.source.join(','); } console.log('查询参数:', params); // 模拟API调用 // const response = await api.queryData(params); // tableData.value = response.data.list; // pagination.total = response.data.total; // 模拟数据 tableData.value = Array.from({ length: 5 }, (_, index) = ({ id: (pagination.current - 1) * pagination.pageSize + index + 1, title: `信息标题 ${index + 1}`, type: formData.type || 'complaint', status: formData.status || '0', createTime: '2023-06-01 12:00:00', handler: '张三' })); pagination.total = 45; } catch (error) { console.error('查询失败:', error); } finally { loading.value = false; } }; // 处理重置 const handleReset = () = { pagination.current = 1; handleSearch(queryModel); }; // 处理表格变化 const handleTableChange = (pag) = { pagination.current = pag.current; pagination.pageSize = pag.pageSize; handleSearch(queryFormRef.value?.getFormData() || queryModel); }; // 处理导出 const handleExport = () = { const formData = queryFormRef.value?.getFormData(); console.log('导出数据，查询条件:', formData); // 实际导出逻辑 }; // 处理高级查询切换 const handleAdvancedToggle = () = { showAdvanced.value = !showAdvanced.value; queryFormRef.value?.setAdvancedVisible(showAdvanced.value); }; // 表格列定义 const columns = reactive([ { title: '序号', dataIndex: 'id', key: 'id' }, { title: '标题', dataIndex: 'title', key: 'title' }, { title: '类型', dataIndex: 'type', key: 'type', customRender: ({ text }) = { const typeMap = { complaint: '投诉', praise: '表扬', exposure: '曝光' }; return typeMap[text] || text; } }, { title: '状态', dataIndex: 'status', key: 'status', customRender: ({ text }) = { const statusMap = { '0': '待处理', '1': '处理中', '2': '已完成' }; return statusMap[text] || text; } }, { title: '创建时间', dataIndex: 'createTime', key: 'createTime' }, { title: '处理人', dataIndex: 'handler', key: 'handler' } ]); // 组件挂载 onMounted(() = { handleSearch(queryModel); }); /script!-- ComplexQueryForm.vue -- template div a-form :model="formData" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" a-row :gutter="24" template v-for="field in visibleFields" :key="field.key" a-col v-bind="getFieldColProps(field)" a-form-item :label="field.label" :name="field.key" component :is="getFieldComponent(field)" v-model:value="formData[field.key]" v-bind="field.props" :placeholder="field.props?.placeholder" style="width: 100%" / /a-form-item /a-col /template /a-row a-row :gutter="24" a-col :span="24"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-375c595788.css">