Merge remote-tracking branch 'origin/master'

src/components/EditPopover.vue

@@ -0,0 +1,111 @@
+<template>
+	<el-popover
+		v-bind="$attrs"
+		:trigger="$attrs.trigger || 'click'"
+		:width="$attrs.width || '240px'"
+		popper-class="le-edit-popper"
+		:visible="comp_visible"
+		@update:visible="visibleChange"
+	>
+		<template #reference>
+			<slot name="reference">
+				<el-button icon="Edit" />
+			</slot>
+		</template>
+		<div class="le-edit-popper_content-wrap">
+			<slot>
+				<div class="title">模拟标题</div>
+				<el-scrollbar max-height="400px">
+					<div class="content">
+						<div v-for="(_, i) of Array.from({ length: 40 })" :key="i">
+							我是内容 <br />
+							{{ i }}
+						</div>
+					</div>
+				</el-scrollbar>
+			</slot>
+			<div v-if="showFooter" class="footer">
+				<el-button @click="onCancel">{{ $t('le.btn.cancel') }}</el-button>
+				<el-button type="primary" style="margin-left: 8px" @click="onSubmit">{{ $t('le.btn.confirm') }}</el-button>
+			</div>
+		</div>
+	</el-popover>
+</template>
+<script setup name="LeEditPopover" lang="ts">
+defineOptions({ name: 'LeEditPopover' })
+import { computed, ref, watch } from 'vue'
+
+const emit = defineEmits(['update:visible', 'getCurRow'])
+const props = defineProps({
+	visible: {
+		type: Boolean,
+		default: null
+	},
+	showFooter: {
+		type: Boolean,
+		default: true
+	},
+	submit: {
+		type: Function,
+		default: () => console.warn('请添加 submit 进行确定')
+	},
+	cancel: {
+		type: Function
+	}
+})
+const localVisible = ref(false)
+const comp_visible = computed(() => {
+	if (typeof props.visible !== 'boolean') return localVisible.value
+	return props.visible
+})
+watch(
+	comp_visible,
+	(bool: boolean) => {
+		// 提示更新当前row数据
+		if (bool) {
+			emit('getCurRow')
+		}
+	},
+	{
+		immediate: true
+	}
+)
+const visibleChange = (visible: boolean) => {
+	emit('update:visible', visible)
+	localVisible.value = visible
+}
+const onCancel = () => {
+	if (props.cancel) props.cancel()
+	visibleChange(false)
+}
+const onSubmit = () => {
+	props.submit?.()
+	visibleChange(false)
+}
+</script>
+<style lang="scss">
+// le-edit-popper
+.#{$prefix}edit-popper {
+	&_content-wrap {
+		position: relative;
+		.title {
+			//border-bottom: 1px solid
+			//border-bottom: 1px solid var(--el-card-border-color);
+			border-bottom: 1px solid var(--el-border-color-light);
+			margin: -12px;
+			margin-bottom: 12px;
+			font-size: 15px;
+			padding: 10px 12px;
+			color: var(--el-text-color-primary);
+			font-weight: 500;
+			//margin-right: -12px;
+			//margin-left: - var(--el-popover-padding);
+			//margin-right: - var(--el-popover-padding);
+		}
+		.footer {
+			padding-top: 10px;
+			text-align: right;
+		}
+	}
+}
+</style>

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()