feat: EditPopover 注入 更多搜索

src/views/approve/components/approvedItem.vue

@@ -6,66 +6,64 @@
 			<div class="search-segment" style="flex: 1 1 0%">
 				<el-input v-model="processName" placeholder="流程名称">
 					<template #append>
-						<el-button :icon="Search" @click="init" />
+						<el-button icon="Search" @click="init" />
 					</template>
 				</el-input>
 			</div>
 			<div class="search-segment">
 				<el-tooltip effect="dark" content="重置" placement="top">
-					<el-button :icon="Refresh" @click="resetSearch('external')" />
+					<el-button icon="Refresh" @click="resetSearch('external')" />
 				</el-tooltip>
 			</div>
 			<div class="search-segment">
-				<el-popover placement="right" :width="320" trigger="click" popper-class="popover-search">
+				<EditPopover placement="right" :width="320" :showFooter="false" v-model:visible="searchMoreVisible">
 					<template #reference>
-						<el-button :icon="Filter" />
+						<el-button icon="Filter" />
 					</template>
-					<el-card>
-						<template #header>高级筛选</template>
-						<el-scrollbar max-height="400px">
-							<!-- 发起人 -->
-							<el-select v-if="currentTaskType !== 'myApplication'" v-model="value" placeholder="发起人" style="margin-bottom: 10px; width: 240px">
-								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-							</el-select>
-							<!-- 流程分组 -->
-							<el-select
-								v-if="currentTaskType !== 'pendingApproval'"
-								v-model="value1"
-								placeholder="流程分组"
-								style="margin-bottom: 10px; width: 240px"
-							>
-								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-							</el-select>
-							<!-- 流程状态 -->
-							<el-select v-model="value2" placeholder="流程状态" style="margin-bottom: 10px; width: 240px">
-								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-							</el-select>
-							<!-- 最小/大提交时间 -->
-							<el-date-picker
-								v-model="value3"
-								style="margin-bottom: 10px; width: 240px"
-								type="daterange"
-								start-placeholder="最小提交时间"
-								end-placeholder="最大提交时间"
-								:default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
-							/>
-							<!-- 最小/大完成时间 -->
-							<el-date-picker
-								v-if="currentTaskType !== 'pendingApproval'"
-								v-model="value4"
-								style="width: 240px"
-								type="daterange"
-								start-placeholder="最小完成时间"
-								end-placeholder="最大完成时间"
-								:default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
-							/>
-						</el-scrollbar>
-						<template #footer>
-							<el-button plain>重置</el-button>
-							<el-button type="primary" plain>检索</el-button>
-						</template>
-					</el-card>
-				</el-popover>
+					<div class="title">高级筛选</div>
+					<el-scrollbar max-height="400px">
+						<!-- 发起人 -->
+						<el-select v-if="currentTaskType !== 'myApplication'" v-model="value" placeholder="发起人" style="margin-bottom: 10px; width: 240px">
+							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+						</el-select>
+						<!-- 流程分组 -->
+						<el-select
+							v-if="currentTaskType !== 'pendingApproval'"
+							v-model="value1"
+							placeholder="流程分组"
+							style="margin-bottom: 10px; width: 240px"
+						>
+							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+						</el-select>
+						<!-- 流程状态 -->
+						<el-select v-model="value2" placeholder="流程状态" style="margin-bottom: 10px; width: 240px">
+							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+						</el-select>
+						<!-- 最小/大提交时间 -->
+						<el-date-picker
+							v-model="value3"
+							style="margin-bottom: 10px; width: 240px"
+							type="daterange"
+							start-placeholder="最小提交时间"
+							end-placeholder="最大提交时间"
+							:default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
+						/>
+						<!-- 最小/大完成时间 -->
+						<el-date-picker
+							v-if="currentTaskType !== 'pendingApproval'"
+							v-model="value4"
+							style="width: 240px"
+							type="daterange"
+							start-placeholder="最小完成时间"
+							end-placeholder="最大完成时间"
+							:default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
+						/>
+					</el-scrollbar>
+					<div class="footer">
+						<el-button plain @click="searchReset">重置</el-button>
+						<el-button type="primary" plain @click="searchSubmit">检索</el-button>
+					</div>
+				</EditPopover>
 			</div>
 		</div>
 		<!-- 内容值 -->
@@ -113,7 +111,8 @@
 <script setup>
 import useTaskProcessStore from '@/store/modules/taskProcess'
 import FlowNodeAvatar from '@/components/Flow/FlowNodeAvatar.vue'
-import { Search, Filter, Refresh } from '@element-plus/icons-vue'
+// import { Search, Filter, Refresh } from '@element-plus/icons-vue'
+import EditPopover from '@/components/EditPopover.vue'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import {
 	processTaskPagePendingApprovalApi,
@@ -170,6 +169,15 @@ const value1 = ref(null)
 const value2 = ref(null)
 const value3 = ref(null)
 const value4 = ref(null)
+const searchMoreVisible = ref(false)
+const searchReset = () => {
+	console.error('searchReset')
+	searchMoreVisible.value = false
+}
+const searchSubmit = () => {
+	console.error('searchSubmit')
+	searchMoreVisible.value = false
+}
 
 // store值
 const taskProcessInfo = useTaskProcessStore()