style(bg): 列表页筛选区域标签和输入控件添加悬浮提示

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
wsm
2026-07-31 09:53:20 +08:00
co-authored by Claude Opus 4.7
parent ad753b53e5
commit 950e17e549
4 changed files with 123 additions and 62 deletions
@@ -5,49 +5,71 @@
<a-form ref="formRef" @keyup.enter="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-row :gutter="24" class="search-form-row">
<a-col :xl="4" :lg="6" :md="8" :sm="12">
<a-form-item label="表单编号" name="formNo">
<JInput v-model:value="queryParam.formNo" type="like" placeholder="请输入表单编号" allow-clear trim @update:value="searchQuery" />
<a-form-item name="formNo">
<template #label>
<a-tooltip title="支持模糊查询">表单编号</a-tooltip>
</template>
<a-tooltip title="支持模糊查询"><JInput v-model:value="queryParam.formNo" type="like" placeholder="请输入表单编号" allow-clear trim @update:value="searchQuery" /></a-tooltip>
</a-form-item>
</a-col>
<a-col :xl="4" :lg="6" :md="8" :sm="12">
<a-form-item label="定点联系所领导" name="contactLeader">
<DeptRoleUserSelectDropDown
v-model:value="queryParam.contactLeader"
:deptId="PARTY_COMMITTEE_DEPT_ID"
:roleId="CHARGE_LEADER_ROLE_ID"
placeholder="请选择定点联系所领导"
allow-clear
style="width: 100%"
@change="searchQuery"
/>
<a-form-item name="contactLeader">
<template #label>
<a-tooltip title="按所党委分管所领导筛选">定点联系所领导</a-tooltip>
</template>
<a-tooltip title="按所党委分管所领导筛选">
<DeptRoleUserSelectDropDown
v-model:value="queryParam.contactLeader"
:deptId="PARTY_COMMITTEE_DEPT_ID"
:roleId="CHARGE_LEADER_ROLE_ID"
placeholder="请选择"
allow-clear
style="width: 100%"
@change="searchQuery"
/>
</a-tooltip>
</a-form-item>
</a-col>
<a-col :xl="4" :lg="6" :md="8" :sm="12">
<a-form-item label="联系单位(部门)" name="contactDept">
<SzSelectDept v-model:value="queryParam.contactDept" placeholder="请选择联系单位" allow-clear style="width: 100%" @change="searchQuery" />
<a-form-item name="contactDept">
<template #label>
<a-tooltip title="按联系单位筛选">联系单位(部门)</a-tooltip>
</template>
<a-tooltip title="按联系单位筛选"><SzSelectDept v-model:value="queryParam.contactDept" placeholder="请选择" allow-clear style="width: 100%" @change="searchQuery" /></a-tooltip>
</a-form-item>
</a-col>
<a-col :xl="4" :lg="6" :md="8" :sm="12">
<a-form-item label="主办部门" name="hostDept">
<SzSelectDept v-model:value="queryParam.hostDept" placeholder="请选择主办部门" allow-clear style="width: 100%" @change="searchQuery" />
<a-form-item name="hostDept">
<template #label>
<a-tooltip title="按主办部门筛选">主办部门</a-tooltip>
</template>
<a-tooltip title="按主办部门筛选"><SzSelectDept v-model:value="queryParam.hostDept" placeholder="请选择" allow-clear style="width: 100%" @change="searchQuery" /></a-tooltip>
</a-form-item>
</a-col>
<a-col v-if="toggleSearchStatus" :xl="4" :lg="6" :md="8" :sm="12">
<a-form-item label="相关分管所领导" name="relatedLeader">
<DeptRoleUserSelectDropDown
v-model:value="queryParam.relatedLeader"
:deptId="PARTY_COMMITTEE_DEPT_ID"
:roleId="CHARGE_LEADER_ROLE_ID"
placeholder="请选择相关分管所领导"
allow-clear
style="width: 100%"
@change="searchQuery"
/>
<a-form-item name="relatedLeader">
<template #label>
<a-tooltip title="按相关分管所领导筛选">相关分管所领导</a-tooltip>
</template>
<a-tooltip title="按相关分管所领导筛选">
<DeptRoleUserSelectDropDown
v-model:value="queryParam.relatedLeader"
:deptId="PARTY_COMMITTEE_DEPT_ID"
:roleId="CHARGE_LEADER_ROLE_ID"
placeholder="请选择"
allow-clear
style="width: 100%"
@change="searchQuery"
/>
</a-tooltip>
</a-form-item>
</a-col>
<a-col v-if="toggleSearchStatus" :xl="4" :lg="6" :md="8" :sm="12">
<a-form-item label="协办部门" name="coDept">
<SzSelectDept v-model:value="queryParam.coDept" placeholder="请选择协办部门" allow-clear style="width: 100%" @change="searchQuery" />
<a-form-item name="coDept">
<template #label>
<a-tooltip title="按协办部门筛选">协办部门</a-tooltip>
</template>
<a-tooltip title="按协办部门筛选"><SzSelectDept v-model:value="queryParam.coDept" placeholder="请选择" allow-clear style="width: 100%" @change="searchQuery" /></a-tooltip>
</a-form-item>
</a-col>
<a-col :xl="4" :lg="6" :md="8" :sm="12">
@@ -576,14 +598,14 @@ import { showImportValidationErrors } from '/@/utils/helper/importError';
}
const labelCol = reactive({
xs: 24,
sm: 4,
xl: 6,
xxl: 8,
xs: { span: 24 },
sm: { span: 10 },
xl: { span: 10 },
xxl: { span: 10 },
});
const wrapperCol = reactive({
xs: 24,
sm: 20,
xs: { span: 24 },
sm: { span: 14 },
});
async function handleDownloadTemplate() {