feat: 五个模块加入更多搜索条件100%，弹窗样式还未调整 0%

src/views/approve/components/approvedItem.vue

@@ -4,25 +4,74 @@
 		<!-- 搜索条件 -->
 		<div class="search-box">
 			<div class="search-segment" style="flex: 1 1 0%">
-				<el-input v-model="input3" placeholder="流程名称">
+				<el-input v-model="processName" placeholder="流程名称">
 					<template #append>
-						<el-button :icon="Search" />
+						<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" />
+					<el-button :icon="Refresh" @click="resetSearch('external')" />
 				</el-tooltip>
 			</div>
 			<div class="search-segment">
-				<el-button :icon="Filter" />
+				<el-popover placement="right" :width="320" trigger="click" popper-class="popover-search">
+					<template #reference>
+						<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>
 		</div>
 		<!-- 内容值 -->
 		<div v-infinite-scroll="load" :infinite-scroll-disabled="disabledInfinite" class="flow-list-box">
 			<div
-				v-for="(i) in satelliteList"
+				v-for="i in satelliteList"
 				:key="i.instanceId"
 				class="item-box"
 				:class="[i.instanceId === taskProcessInfo.currentTaskRow.instanceId ? 'item-box-choosed' : '']"
@@ -34,14 +83,12 @@
 						<el-text tag="b">{{ i.processName }}</el-text>
 						<el-tag v-if="currentTaskType === 'pendingApproval'">待审批</el-tag>
 						<template v-else>
-							<el-tag>
-								<template v-if="i.instanceState === 0">审批中</template>
-								<template v-if="i.instanceState === 1">审批通过</template>
-								<template v-if="i.instanceState === 2">审批拒绝</template>
-								<template v-if="i.instanceState === 3">撤销审批</template>
-								<template v-if="i.instanceState === 4">超时结束</template>
-								<template v-if="i.instanceState === 5">强制终止</template>
-							</el-tag>
+							<el-tag v-if="i.instanceState === 0">审批中</el-tag>
+							<el-tag v-if="i.instanceState === 1" type="success">审批通过</el-tag>
+							<el-tag v-if="i.instanceState === 2" type="danger">审批拒绝</el-tag>
+							<el-tag v-if="i.instanceState === 3">撤销审批</el-tag>
+							<el-tag v-if="i.instanceState === 4" type="danger">超时结束</el-tag>
+							<el-tag v-if="i.instanceState === 5" type="danger">强制终止</el-tag>
 						</template>
 					</div>
 					<!--操作类容-->
@@ -50,7 +97,7 @@
 					<div class="footer">
 						<!-- 头像 -->
 						<div class="initiator">
-							<FlowNodeAvatar id="1" />
+							<FlowNodeAvatar :name="'等待后台补充用户'" />
 						</div>
 						<!-- 时间 -->
 						<div class="begin-time">提交于 {{ i.createTime }}</div>
@@ -90,9 +137,43 @@ const props = defineProps({
 	}
 })
 
+/***
+ * 待审批：发起人 流程分组 最小提交时间 最大提交时间
+ * 我的申请：流程分组 流程状态 最小提交时间 最大提交时间 最小完成时间 最大完成时间
+ * 我收到的：发起人 流程分组 流程状态 最小提交时间 最大提交时间 最小完成时间 最大完成时间
+ * 已审批：发起人 流程分组 流程状态 最小提交时间 最大提交时间 最小完成时间 最大完成时间
+ */
+const options = [
+	{
+		value: 'Option1',
+		label: 'Option1'
+	},
+	{
+		value: 'Option2',
+		label: 'Option2'
+	},
+	{
+		value: 'Option3',
+		label: 'Option3'
+	},
+	{
+		value: 'Option4',
+		label: 'Option4'
+	},
+	{
+		value: 'Option5',
+		label: 'Option5'
+	}
+]
+const value = ref(null)
+const value1 = ref(null)
+const value2 = ref(null)
+const value3 = ref(null)
+const value4 = ref(null)
+
 // store值
 const taskProcessInfo = useTaskProcessStore()
-const input3 = ref('')
+const processName = ref('') // 流程名称
 // 下拉滚动属性值 start
 const loading = ref(false) // loading
 const totalNumber = ref(0) // 总条数
@@ -128,16 +209,22 @@ const getPagedSatellites = async () => {
 	try {
 		let responseData = {}
 		const { currentTaskType } = props
+		const params = {
+			...condition,
+			data: {
+				processName: processName.value
+			}
+		}
 		if (currentTaskType === 'pendingApproval') {
-			responseData = await processTaskPagePendingApprovalApi(condition)
+			responseData = await processTaskPagePendingApprovalApi(params)
 		} else if (currentTaskType === 'myApplication') {
-			responseData = await processTaskPageMyApplicationApi(condition)
+			responseData = await processTaskPageMyApplicationApi(params)
 		} else if (currentTaskType === 'myReceived') {
-			responseData = await processTaskPageMyReceivedApi(condition)
+			responseData = await processTaskPageMyReceivedApi(params)
 		} else if (currentTaskType === 'pendingClaim') {
-			responseData = await processTaskPagePendingClaimApi(condition)
+			responseData = await processTaskPagePendingClaimApi(params)
 		} else if (currentTaskType === 'approved') {
-			responseData = await processTaskPageApprovedApi(condition)
+			responseData = await processTaskPageApprovedApi(params)
 		}
 		const { records, total, pages } = responseData
 		records.forEach(item => {
@@ -161,6 +248,18 @@ const getTaskDetail = item => {
 	taskProcessInfo.setCurrentTaskRow(item)
 }
 
+/**
+ * 重置搜索
+ * @param type external：重置输入框
+ * clear: 重置内部的值
+ */
+const resetSearch = type => {
+	if (type === 'external') {
+		processName.value = ''
+		init()
+	}
+}
+
 onMounted(() => {
 	taskProcessInfo.setCurrentTaskRow({})
 })