feat(process): 搜索功能

api/process.js

@@ -2,8 +2,23 @@ import request from '@/utils/request.js'
 import upload from '@/utils/upload'
 
 const preUrl = '/clientServices.do?iscrypt=1'
+
+// 获取流程 宫格 列表
+export function getProcessList(staffId, unitId) {
+	return request({
+		url: preUrl,
+		method: 'post',
+		data: {
+			serviceId: 'bpm_20150319001GetFlowList',
+			params: {
+				staffId: staffId,
+				unitid: unitId
+			}
+		}
+	})
+}
 //获取用户所有流程
-export function getUserAllProcess({ staffId, page, pageNum }) {
+export function getUserAllProcess({ staffId, page, pageNum, queryParams }) {
 	return request({
 		url: preUrl,
 		method: 'post',
@@ -12,7 +27,8 @@ export function getUserAllProcess({ staffId, page, pageNum }) {
 			params: {
 				staffId,
 				page,
-				pageNum
+				pageNum,
+				queryParams,
 			}
 		}
 	})
@@ -30,7 +46,8 @@ export function getUserProcessed(params) {
 				page: params.page,
 				pageNum: params.pageNum,
 				modelId: params.modelId, //流程类型
-				control: params.control //流程控制方式 0 手写 1 引擎
+				control: params.control, //流程控制方式 0 手写 1 引擎
+				queryParams: params.queryParams,
 			}
 		}
 	})
@@ -48,7 +65,8 @@ export function getUserProcess(params) {
 				page: params.page,
 				pageNum: params.pageNum,
 				modelId: params.modelId, //流程类型
-				control: params.control //流程控制方式 0 手写 1 引擎
+				control: params.control, //流程控制方式 0 手写 1 引擎
+				queryParams: params.queryParams,
 			}
 		}
 	})
@@ -66,7 +84,8 @@ export function getUserProcessing(params) {
 				page: params.page,
 				pageNum: params.pageNum,
 				modelId: params.modelId, //流程类型
-				control: params.control //流程控制方式 0 手写 1 引擎
+				control: params.control, //流程控制方式 0 手写 1 引擎
+				queryParams: params.queryParams,
 			}
 		}
 	})
@@ -194,4 +213,13 @@ export function uploadSignatureBoardImg(userId, filePath, elementID) {
     	}
     }
   })
+}
+
+// 上传附件
+export function uploadFile(data) {
+	return upload({
+    url: '/MiniAppUploadFileAction.do',
+    name: data.name,
+    filePath: data.filePath
+  })
 }

api/work.js

@@ -86,7 +86,7 @@ export function submitProcessForm(user, process, fileIds) {
 		}
 	})
 }
-
+// 上传附件
 export function uploadFile(data) {
 	return upload({
     url: '/MiniAppUploadFileAction.do',

pages/process/index.vue

@@ -6,18 +6,37 @@
 				<uni-col :xs="6" :sm="4">
 					<view @click="openPopup" class="popup_button_container">
 						<text class="ygoa-icon icon-filter"></text>
-						<text class="button_text">{{ searchItem }}</text>
+						<text class="button_text">{{ candidates[searchItem] }}</text>
 					</view>
 				</uni-col>
-				<uni-col :xs="18" :sm="20">
-					<view class="search_bar">
-						<uni-search-bar @confirm="search" @cancel="searchCancel" @blur="searchOnBlur" clearButton="none" placeholder="搜索栏">
+				<view class="search_bar">
+					<!-- 输入框搜索 -->
+					<uni-col v-if="0 == searchItem" :xs="17" :sm="19">
+						<uni-search-bar @confirm="searchBarConfirm" @cancel="cancelSearch" @blur="searchBarOnBlur" clearButton="none" placeholder="搜索栏">
 							<template v-slot:searchIcon>
 								<uni-icons type="search" size="calc(30px + .5*(1rem - 16px))"></uni-icons>
 							</template>
 						</uni-search-bar>
-					</view>
-				</uni-col>
+					</uni-col>
+					<!-- 类型 下拉框搜索 -->
+					<uni-col v-else-if="1 == searchItem" :xs="18" :sm="20">
+						<picker class="picker_container" @change="bindPickerChange" :value="pickerItem" :range="pickerItems" range-key="modelName">
+							<view class="uni-input input_text">
+								{{ pickerItems[pickerItem].modelName }}
+							</view>
+						</picker>
+						<view @click="search(pickerItems[pickerItem].modelId)" class="picker_button_container">
+							<uni-icons type="search" size="calc(30px + .5*(1rem - 16px))"></uni-icons>
+							<text class="button_text">搜索</text>
+						</view>
+					</uni-col>
+					<!-- 时间范围搜索 -->
+					<uni-col v-else-if="2 == searchItem" :xs="18" :sm="20">
+						<view class="datetime_picker_container">
+							<uni-datetime-picker type="daterange" @change="datetimePickerChange" @clear="cancelSearch" :border="false"/>
+						</view>
+					</uni-col>
+				</view>
 			</uni-row>
 		</view>
 		<view class="segmented_control_container">
@@ -29,7 +48,7 @@
 		<view class="popup_container">
 			<uni-popup ref="searchItemPopup" type="bottom">
 				<uni-list>
-					<uni-list-item @click="clickSearchItem(item)" v-for="(item, index) in candidates" :key="index" clickable :title="item">
+					<uni-list-item @click="clickSearchItem(index)" v-for="(item, index) in candidates" :key="index" clickable :title="item">
 					</uni-list-item>
 				</uni-list>
 			</uni-popup>
@@ -43,7 +62,7 @@ import { onShow } from '@dcloudio/uni-app'
 import { reactive, ref, onMounted } from 'vue';
 import $tab from '@/plugins/tab.js'
 import $modal from '@/plugins/modal.js'
-import { getUserProcess, getUserProcessed, getUserProcessing, getUserAllProcess, cancelProcessFlow } from '@/api/process';
+import { getUserProcess, getUserProcessed, getUserProcessing, getUserAllProcess, cancelProcessFlow, getProcessList } from '@/api/process';
 import { useUserStore } from '@/store/user';
 
 onMounted(() => {
@@ -57,26 +76,11 @@ onShow(() => {
 	uni.$emit('showTabBarBadge')
 })
 const userStore = useUserStore();
-// 分段器选项
-const items = reactive(['我的', '待办', '在办', '办结'])
-// 分段器选项
-const current = ref(1)
-// 子组件
-const processListRef = ref(null)
-
-// 待办列表
-// const processes = ref([])
-// 分段器点击事件 调用子组件刷新数据
-function clickSegmentItem({ currentIndex }) {
-	// processes.value = [] // 清空列表数据
-	current.value = currentIndex // 更新分段器状态
-	processListRef.value.onClickItem() // 调用子组件刷新数据
-}
 
 // 搜索项
-const candidates = ref(['全局', '类型', '创建时间'])
+const candidates = ref(['发起者', '类型', '时间'])
 // 搜索栏选中项
-const searchItem = ref('全局')
+const searchItem = ref(0)
 // 搜索项弹出层
 const searchItemPopup = ref(null)
 // 打开搜索项弹出层
@@ -90,21 +94,84 @@ function closePopup() {
 // 选中搜索项
 function clickSearchItem(item) {
 	searchItem.value = item
+	if (item == 1 && pickerItems.value.length == 1) initPickerItems()
 	closePopup()
 }
+// 搜索参数
+const queryParams = ref({})
+// 输入框搜索栏
+function searchBarConfirm(e) {
+	console.log('searchBarConfirm: ',e);
+}
+// 输入框搜索栏失去焦点
+function searchBarOnBlur(queryParam) {
+	search(queryParam.value)
+}
+// 取消输入框搜索
+// function searchBarCancel() {
+// 	cancelSearch()
+// }
+// 下拉框搜索
+const pickerItems = ref([{modelId: '', modelName: '无'}])
+const pickerItem = ref(0)
+// 获取流程宫格数据
+function initPickerItems() {
+	const staffId = userStore.user.useId
+	const unitId = userStore.user.unitId
+	getProcessList(staffId, unitId).then(res => {
+		pickerItems.value = res.returnParams.fList.map(({modelId, modelName}) => {
+			return {modelId, modelName}
+		}) 
+		pickerItems.value.unshift({modelId: '', modelName: '无'})
+	})
+}
+// 搜索栏 下拉框选择项
+function bindPickerChange(e) {
+	pickerItem.value = e.detail.value
+	console.log('bindPickerChange: ',e);
+}
+// 时间选择器搜索
+// const datetimePickerRange = ref([])
+function datetimePickerChange(event) {
+	search(event)
+}
 // 搜索
-function search(e) {
-	// console.log('search', e)
+function search(queryParam) {
+	switch (searchItem.value) {
+		case 0: queryParams.value = {'name': queryParam}; break;
+		case 1: queryParams.value = {'modelId': queryParam}; break;
+		case 2: 
+			queryParams.value = {
+				'starttime': queryParam[0],
+				'endtime': queryParam[1]
+			}; 
+			break;
+	}
+	processListRef.value.onClickItem() // 调用子组件刷新数据
 }
 // 取消搜索
-function searchCancel() {
-	return
+function cancelSearch(){
+	queryParams.value = {}
+	processListRef.value.onClickItem() // 调用子组件刷新数据
 }
-// 搜索栏失去焦点
-function searchOnBlur(e) {
-	// console.log('searchOnBlur', e);
+
+// 分段器选项
+const items = reactive(['我的', '待办', '在办', '办结'])
+// 分段器选项
+const current = ref(1)
+// 子组件
+const processListRef = ref(null)
+
+// 待办列表
+// const processes = ref([])
+// 分段器点击事件 调用子组件刷新数据
+function clickSegmentItem({ currentIndex }) {
+	// processes.value = [] // 清空列表数据
+	current.value = currentIndex // 更新分段器状态
+	processListRef.value.onClickItem() // 调用子组件刷新数据
 }
 
+
 // 获取待办列表数据
 const point = ref(0)
 function getProcessData({ pageNo, pSize }, callback) {
@@ -114,7 +181,8 @@ function getProcessData({ pageNo, pSize }, callback) {
 		page: pageNo,
 		pageNum: pSize,
 		modelId: "",
-		control: 1
+		control: 1,
+		queryParams: queryParams.value
 	}
 	const requestMap = [
 		getUserAllProcess, // 我的
@@ -137,7 +205,8 @@ function getProcessPage({ pageNo, pSize }, callback) {
 		page: pageNo,
 		pageNum: pSize,
 		modelId: "",
-		control: 1
+		control: 1,
+		queryParams: queryParams.value
 	}
 	const requestMap = [
 		getUserAllProcess, // 我的
@@ -186,8 +255,9 @@ function handleToCancelProcess(process) {
 </script>
 
 <style lang="scss" scoped>
-@import url("@/static/font/ygoa/iconfont.css");
+// @import url("@/static/font/ygoa/iconfont.css");
 .search_container {
+	padding: 10px 0;
 	.popup_button_container {
 		display: flex;
 		justify-content: center;
@@ -195,7 +265,6 @@ function handleToCancelProcess(process) {
 		height: 36px;
 		line-height: 36px;
 		width: 100%;
-		padding: 8px 10px;
 		background-color: #f5f5f5;
 		text-align: center;
 		font-size: calc(16px + .5*(1rem - 16px));
@@ -204,6 +273,7 @@ function handleToCancelProcess(process) {
 			font-size: calc(16px + .5*(1rem - 16px));
 		}
 		.button_text {
+			font-size: calc(16px + .5*(1rem - 16px));
 			width: 64px;
 			margin-left: 4px;
 		}
@@ -211,7 +281,7 @@ function handleToCancelProcess(process) {
 
 	::v-deep .search_bar {
 		.uni-searchbar {
-			padding-left: 0;
+			padding: 0;
 			.uni-searchbar__box-search-input {
 				font-size: calc(14px + .5*(1rem - 16px)) !important;
 			}
@@ -219,6 +289,67 @@ function handleToCancelProcess(process) {
 				font-size: calc(14px + .5*(1rem - 16px)) !important;
 			}
 		}
+		.picker_container {
+			display: inline-block;
+			float: left;
+			background-color: #f8f8f8;
+			width: 70%;
+			height: 36px;
+			.input_text {
+				display: flex;
+				justify-content: center;
+				text-align: center;
+				background-color: #f8f8f8;
+				border: 1px solid #e5e5e5;
+				border-radius: 5px;
+				width: 100%;
+				height: 26px;
+				color: #000;
+				font-size: calc(14px + .5*(1rem - 16px)) !important;
+				line-height: 26px;
+				padding: 4px 8px 4px 0;
+			}
+		}
+		.picker_button_container {
+			display: inline-flex;
+			justify-content: center;
+			margin-left: 5px;
+			height: 36px;
+			line-height: 36px;
+			background-color: #f5f5f5;
+			text-align: center;
+			font-size: calc(16px + .5*(1rem - 16px));
+			width: 25%;
+			.button_text {
+				overflow: hidden;
+				font-size: calc(16px + .5*(1rem - 16px));
+				margin-left: 4px;
+			}
+		}
+		.datetime_picker_container {
+			.uni-date {
+				.uni-date-editor {
+					margin-right: 5px;
+					.uni-date-x {
+						background-color: #f8f8f8;
+						color: #000;
+						font-size: calc(14px + .5*(1rem - 16px));
+						.uni-icons {
+							font-size: calc(22px + .5*(1rem - 16px));
+						}
+						.uni-date__x-input {
+							font-size: calc(14px + .5*(1rem - 16px));
+						}
+					}
+					.uni-date__icon-clear {
+						.uni-icons {
+							font-size: calc(22px + .5*(1rem - 16px));
+							// color: #c0c4cc;
+						}
+					}
+				}
+			}
+		}
 	}
 }
 ::v-deep .segmented_control_container {