接单列表添加搜索和筛选

pages/order/components/filterQuery.vue

@@ -0,0 +1,560 @@
+<template>
+	<view>
+		<u-popup :show="showFilter" mode="bottom" closeable @close="handleClose" @open="handleOpen">
+			<scroll-view scroll-y :style="{ height: mapHeight }" @touchmove.stop="() => {}">
+				<view class="filterQuery" :style="{ height : mapHeight }">
+						<view class="query_wrap">
+							<view class="title">
+								发单日期
+							</view>
+							<view class="dept_wrap form_input_pointer_events" @click="handleShowJtimePickerPopup">
+								<u--input v-model="createTimeTxt" disabled style='pointer-events: none !important'
+									disabledColor="#ffffff" placeholder="点击选择" border="none">
+								</u--input>
+								<u-icon slot="right" name="arrow-right"></u-icon>
+							</view>
+				
+							<view class="title">
+								机构部门
+							</view>
+							<view class="dept_wrap form_input_pointer_events" @click="handleShowDept">
+								<u--input v-model="value.deptName" disabled style='pointer-events: none !important'
+									disabledColor="#ffffff" placeholder="点击选择" border="none">
+								</u--input>
+								<u-icon slot="right" name="arrow-right"></u-icon>
+							</view>
+				
+							<view class="title">
+								状态
+							</view>
+							<view class="dept_wrap form_input_pointer_events">
+								<ld-select :list="dicts.crmFormStatusDict" label-key="dictLabel" value-key="dictValue"
+									placeholder="请选择" v-model="value.status" :border="false" clearable></ld-select>
+								<u-icon slot="right" name="arrow-right"></u-icon>
+							</view>
+				
+							<view class="title">
+								阶段
+							</view>
+							<view class="dept_wrap form_input_pointer_events">
+								<ld-select :list="dicts.crmFormStateDict" label-key="dictLabel" value-key="dictValue"
+									placeholder="请选择" v-model="value.state" :border="false" clearable></ld-select>
+								<u-icon slot="right" name="arrow-right"></u-icon>
+							</view>
+				
+							<view class="title">
+								接单人
+							</view>
+							<view class="person_wrap">
+								<view class="person_item" v-for="(item,index) in identificationUserInfos" :key="item.userId">
+									<view class="person_top">
+										<u-avatar :src="$avatar(item.avatar)" size="40px"></u-avatar>
+									</view>
+									<view class="person_bottom">
+										{{item.nickName}}
+									</view>
+								</view>
+								<view class="person_item more_item" @click="handleShowIdentificationUser">
+									<view class="person_top">
+										<image src="/static/case/icon-more.png" mode="" class="more"></image>
+									</view>
+									<view class="person_bottom">
+										更多
+									</view>
+								</view>
+							</view>
+
+							<view class="title">
+								发单人
+							</view>
+							<view class="person_wrap">
+								<view class="person_item" v-for="(item,index) in createByUserInfos" :key="item.userId">
+									<view class="person_top">
+										<u-avatar :src="$avatar(item.avatar)" size="40px"></u-avatar>
+									</view>
+									<view class="person_bottom">
+										{{item.nickName}}
+									</view>
+								</view>
+								<view class="person_item more_item" @click="handleShowCreateByUser">
+									<view class="person_top">
+										<image src="/static/case/icon-more.png" mode="" class="more"></image>
+									</view>
+									<view class="person_bottom">
+										更多
+									</view>
+								</view>
+							</view>
+
+							<view class="title">
+								物品
+							</view>
+							<view class="search_input">
+								<u--input clearable prefixIcon="search" v-model="value.item"
+									placeholder="请输入物品名字"></u--input>
+							</view>
+				
+							<view class="title">
+								品牌
+							</view>
+							<view class="search_input">
+								<u--input clearable prefixIcon="search" v-model="value.brand" placeholder="请输入品牌名字"></u--input>
+							</view>
+				
+							<view class="title">
+								电话
+							</view>
+							<view class="search_input">
+								<u--input clearable prefixIcon="search" v-model="value.phone"
+									placeholder="请输入电话"></u--input>
+							</view>
+
+							<view class="title">
+								标签
+							</view>
+							<view class="option_list">
+								<ld-select :list="clueTagGroupVoList" label-key="name" value-key="id" placeholder="请选择标签"
+									v-model="value.allTagList" multiple clearable></ld-select>
+							</view>
+				
+						</view>
+						<u-tabbar :fixed="true" inactiveColor="#ffffff" class="case_tabbar" :placeholder="true"
+							:safeAreaInsetBottom="true">
+							<u-tabbar-item text="重置" :customStyle="{backgroundColor : '#fff'}" class="uTabbarItem close_btn"
+								@click="handleReset"></u-tabbar-item>
+							<u-tabbar-item text="确定" :customStyle="{backgroundColor : '#4c8afe'}" class="uTabbarItem"
+								@click="handleEnter"></u-tabbar-item>
+						</u-tabbar>
+				
+						<ba-tree-picker :selectParent="false" v-if="identificationUserListData.length > 0" ref="identificationUser" :multiple="false"
+							border title="接单人" :localdata="identificationUserListData" valueKey="id" textKey="label" childrenKey="children"
+							:selectedValues="value.identification" @select-change="identificationUserSeletchang" />
+				
+						<ba-tree-picker :selectParent="false" v-if="createByUserListData.length > 0" ref="createByUser" :multiple="false"
+							border title="发单人" :localdata="createByUserListData" valueKey="id" textKey="label" childrenKey="children"
+							:selectedValues="value.createBy" @select-change="createByUserSeletchang" />
+				
+						<ba-tree-picker :selectParent="true" v-if="deptList.length > 0" ref="dept" :multiple='false'
+							@select-change="deptSeletchang" border title="机构部门" :localdata="deptList" valueKey="deptId"
+							textKey="deptName" childrenKey="children" :selectedValues="value.deptId"
+							:personNames="value.deptName" />
+				
+						<jtimePickerPopup :isShowShortTimeList="true" shortTimeTitle="快捷时间" :shortTimeList="shortTimeList"
+							:isShowSeletTimeTitle="true" seletTimeTitle="时间选择" cancelText="取消" confirmText="确认"
+							:endSelectMonth="-1" :endSelectDay="-1" beginTimePlaceHolder='开始时间' endTimePlaceHolder="结束时间"
+							:isDateTypeRange="true" :isShowSelectedTimeEcho="true" @confirm="getSelectTime"
+							ref="jtimePickerPopup">
+						</jtimePickerPopup>
+				
+					</view>
+			</scroll-view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	import {
+		filterCustomerManager,
+		handleTree
+	} from '@/utils/util';
+	import jtimePickerPopup from '@/uni_modules/jtime-picker-popup/components/JTimePicker/JTimePicker.vue';
+	export default {
+		components: {
+			jtimePickerPopup
+		},
+		props: {
+			value: {
+				type: Object,
+			},
+			mapHeight: {
+				type: String,
+			},
+			dicts: {
+				type: Object
+			},
+		},
+		emits: ["getList"],
+		data() {
+			return {
+
+				statusDict: [{
+						dictLabel: '待处理',
+						dictValue: '1'
+					},
+					{
+						dictLabel: '进行中',
+						dictValue: '2'
+					},
+					{
+						dictLabel: '已完成',
+						dictValue: '3'
+					},
+					{
+						dictLabel: '已取消',
+						dictValue: '4'
+					},
+				],
+				
+				stateDict: [{
+						dictLabel: '初始阶段',
+						dictValue: '1'
+					},
+					{
+						dictLabel: '处理阶段',
+						dictValue: '2'
+					},
+					{
+						dictLabel: '完成阶段',
+						dictValue: '3'
+					},
+				],
+
+
+				showFilter: false,
+
+				dictCascadeData: [],
+
+				identificationUserListData: [], // 接单人列表 
+				createByUserListData: [], // 发单人列表 
+
+				deptList: [],
+
+				dateRange: [], // 日期范围
+
+				shortTimeList: [{
+						unit: 'day',
+						key: '全部',
+						value: 0
+					},
+					{
+						unit: 'day',
+						key: '今天',
+						value: 1
+					},
+					{
+						unit: 'day',
+						key: '昨天',
+						value: -1
+					},
+					{
+						unit: 'day',
+						key: '近3天',
+						value: 3
+					},
+					{
+						unit: 'day',
+						key: '近7天',
+						value: 7
+					},
+					{
+						unit: 'day',
+						key: '近15天',
+						value: 15
+					},
+					{
+						unit: 'month',
+						key: '本月',
+						value: 1
+					},
+					{
+						unit: 'month',
+						key: '上月',
+						value: -1
+					},
+				],
+
+				createTimeTxt: null,
+
+				identificationUserInfos: [], // 接单人用户信息
+				createByUserInfos: [], // 发单人用户信息
+
+				clueTagGroupVoList: [],
+
+				defaultRegion: ['广东省', '广州市', '番禺区'],
+
+				sortParams: [{
+					value: 1,
+					text: '企业名称'
+				}, {
+					value: 2,
+					text: '项目名称'
+				}, {
+					value: 3,
+					text: '项目状态'
+				}, {
+					value: 4,
+					text: '项目等级'
+				}, {
+					value: 5,
+					text: '省市区'
+				}, {
+					value: 6,
+					text: '委托日期'
+				}, {
+					value: 7,
+					text: '创建日期'
+				}, {
+					value: 8,
+					text: '跟进时间'
+				}]
+			}
+		},
+		mounted() {
+			this.handleInitTag();
+		},
+		methods: {
+			handleOpen(){
+				if(this.createTimeTxt === null){
+					this.$refs.jtimePickerPopup.handleInit();
+				}
+			},
+
+			getSelectTime(timeValue) {
+				this.value.sendDateStart = timeValue.beginTime;
+				this.value.sendDateEnd = timeValue.endTime;
+				if (this.value.sendDateStart && this.value.sendDateEnd) {
+					this.createTimeTxt = this.value.sendDateStart + "至" + this.value.sendDateEnd;
+				} else {
+					this.createTimeTxt = "";
+				}
+			},
+			deptSeletchang(ids, names) {
+				this.value.deptId = ids[0];
+				this.value.deptName = names[0];
+			},
+			handleShowJtimePickerPopup() {
+				this.$refs.jtimePickerPopup.pickerShow();
+			},
+			handleShowDept() {
+				this.$refs.dept._show();
+			},
+
+
+			identificationUserSeletchang(ids, names) {
+				this.value.identification = ids[0];
+				if (ids.length > 0) {
+					// 暂时只做单向
+					uni.$u.api.getUserByUserIds({
+						userIds: ids.join(",")
+					}).then(res => {
+						const {
+							data
+						} = res;
+						this.identificationUserInfos = data;
+					})
+				} else {
+					this.identificationUserInfos = [];
+				}
+			},
+			createByUserSeletchang(ids, names) {
+				this.value.createBy = ids[0];
+				if (ids.length > 0) {
+					// 暂时只做单向
+					uni.$u.api.getUserByUserIds({
+						userIds: ids.join(",")
+					}).then(res => {
+						const {
+							data
+						} = res;
+						this.createByUserInfos = data;
+					})
+				} else {
+					this.createByUserInfos = [];
+				}
+			},
+			handleShowIdentificationUser() {
+				this.$refs.identificationUser._show();
+			},
+			handleShowCreateByUser() {
+				this.$refs.createByUser._show();
+			},
+			handleInitTag() {
+				uni.$u.api.selectAllDeptList({
+					isDept: 2
+				}).then(({
+					data
+				}) => {
+					this.deptList = handleTree(data, 'deptId');
+				});
+
+				// 获取接单人
+				uni.$u.api.getDeptOwner({ excludeDeptIds : [100,369,378,356] }).then(res => {
+					this.identificationUserListData = filterCustomerManager(res.data);
+				});
+				
+				// 获取发单人
+				uni.$u.api.getDeptCustomerByOrg({ deptId : 369 }).then(res => {
+					this.createByUserListData = filterCustomerManager(res.data);
+				});
+
+				// 获取所有标签
+				uni.$u.api.getClueTagGroupVoList({ tagGroupApplication : '2' }).then(({
+					data
+				}) => {
+					this.clueTagGroupVoList = data.reduce((acc, cur) => {
+						return acc.concat(cur.clueTagDataList);
+					}, []);
+				});
+			},
+			handleClose() {
+				this.showFilter = false;
+			},
+			handleClickTag(item, attr) {
+				if (item.isCheck) {
+					const index = this.value[attr].findIndex(v => v == item.dictValue);
+					this.value[attr].splice(index, 1);
+				} else {
+					this.value[attr].push(item.dictValue);
+				}
+			},
+			handleReset() {
+				this.value.sendDateStart = undefined;
+				this.value.sendDateEnd = undefined;
+				this.value.deptId = undefined;
+				this.value.deptName = undefined;
+				this.value.status = '';
+				this.value.state = '';
+				this.value.identification = undefined;
+				this.value.createBy = undefined;
+				this.value.item = '';
+				this.value.phone = '';
+				this.value.allTagList = [];
+				this.createTimeTxt = null;
+				this.identificationUserInfos = [];
+				this.createByUserInfos = [];
+			},
+			handleEnter() {
+				this.$emit("getList");
+				this.showFilter = false;
+			},
+			handleChangeSort(sort) {
+				this.value.sort = sort;
+			},
+			handleChangeSortField(value) {
+				this.value.sortField = value;
+			},
+			show() {
+				this.showFilter = true;
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.filterQuery {
+		padding: 20px;
+		box-sizing: border-box;
+		overflow: scroll;
+
+		.dept_wrap {
+			border: 2px solid #ddd;
+			display: flex;
+			padding: 10rpx 20rpx;
+			border-radius: 6rpx;
+			margin-bottom: 20rpx;
+		}
+
+		.pick_regions_wrap {}
+
+		.person_wrap {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			margin-bottom: 15px;
+
+			.person_item {
+				width: 10%;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				margin-bottom: 10px;
+
+				.person_top {
+					width: 40px;
+					height: 40px;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+
+				.person_bottom {
+					margin-top: 5px;
+					font-size: 12px;
+					color: #202020;
+				}
+			}
+
+			.more_item {
+				.more {
+					width: 28px;
+					height: 28px;
+				}
+
+				.person_bottom {
+					color: #4c8afe;
+					font-size: 12px;
+					margin-top: 0px;
+				}
+			}
+		}
+
+		.search_input {
+			border: 1px solid #ddd;
+			border-radius: 4px;
+			overflow: hidden;
+			margin-bottom: 15px;
+		}
+
+		.query_wrap {
+			.title {
+				font-size: 18px;
+				color: #202020;
+				margin-bottom: 10px;
+			}
+
+			.option_list {
+				display: flex;
+				flex-wrap: wrap;
+				margin-bottom: 15px;
+
+				.option_item {
+					width: calc(33.33% - 10px);
+					margin-right: 10px;
+					margin-bottom: 10px;
+
+					::v-deep .u-tag__text {
+						margin: auto;
+						font-size: 14px;
+					}
+
+					&:nth-child(6n) {
+						margin-right: 0px;
+					}
+				}
+			}
+
+			.follow_option_list {
+				.option_item {
+					::v-deep .u-tag__text {
+						font-size: 12px;
+					}
+				}
+			}
+		}
+	}
+
+	.case_tabbar {
+		.uTabbarItem {
+			::v-deep .u-tabbar-item__text {
+				font-size: 18px;
+			}
+		}
+
+		.close_btn {
+			::v-deep .u-tabbar-item__text {
+				font-size: 18px;
+				color: #606060 !important;
+			}
+		}
+	}
+</style>

pages/order/components/orderCenter.vue

@@ -1,46 +1,64 @@
 <template>
 	<view class="order_center_wrap">
-		<view class="order_item" v-for="item in listData" :key="item.id" @click="handleToDetail(item)">
-			<view class="order_top">
-				<view class="top_left">{{item.item}}</view>
-				<view class="top_right">
-					<text :class="getStatusClass(item.status)">{{getStatusText(item.status)}}</text>
-				</view>
+
+		<view class="queryParams_wrap">
+			<view class="search">
+				<u--input clearable prefixIcon="search" v-model="queryParams.phone" shape="circle" clearable
+					@blur="handleKeyword" @clear="handleKeywordClear" placeholder="请输入电话"></u--input>
+			</view>
+			<view class="query">
+				<view style="margin-right: 10rpx;" @click="handleshowFilter">筛选</view>
+				<u-icon name="arrow-down-fill" color="#aaa" size="10"></u-icon>
 			</view>
-			<view class="order_info">
-				<view class="telPhone">
-					<view class="phone">
-						<text>电话: </text>
-						<show-real-text :real="item.phone" :type='type'
-							:style="{ color : item.repetitionOperationName ? 'red' : 'black' }"></show-real-text>
+		</view>
+
+
+		<view class="order_item_wrap">
+			<view class="order_item" v-for="item in listData" :key="item.id" @click="handleToDetail(item)">
+				<view class="order_top">
+					<view class="top_left">{{item.item}}</view>
+					<view class="top_right">
+						<text :class="getStatusClass(item.status)">{{getStatusText(item.status)}}</text>
 					</view>
-					<view class="copy_btn" @click.stop="handleCopy(item)" v-if="type != '1'">复制</view>
 				</view>
-				<view class="info">
-					<view class="createUser" style="margin-right: 20px;">发单人:
-						{{ item.createNickName ? item.createNickName : "-" }}</view>
-					<view class="orgName">机构: {{ item.orgName ? item.orgName : "-" }}</view>
-				</view>
-				<view class="info">
-					<view class="sendDate" style="margin-right: 20px;">发单日期: {{ item.sendDate ? item.sendDate : "-" }}
+				<view class="order_info">
+					<view class="telPhone">
+						<view class="phone">
+							<text>电话: </text>
+							<show-real-text :real="item.phone" :type='type'
+								:style="{ color : item.repetitionOperationName ? 'red' : 'black' }"></show-real-text>
+						</view>
+						<view class="copy_btn" @click.stop="handleCopy(item)" v-if="type != '1'">复制</view>
 					</view>
-				</view>
-				<view class="info">
-					<view class="owner">所属人 {{ item.clueOwnerName ? item.clueOwnerName : "-" }}</view>
-					<view class="operation" style="margin-right: 20px;">运营人
-						{{ item.clueOperationName ? item.clueOperationName : "-" }}</view>
-				</view>
-			</view>
-			<view class="clue_state_wrap">
-				<view class="clue_state">
-					<view class="state_wrap">
-						<view class="label">阶段:</view>{{crm_form_state(item.state)}}
+					<view class="info">
+						<view class="createUser" style="margin-right: 20px;">发单人:
+							{{ item.createNickName ? item.createNickName : "-" }}
+						</view>
+						<view class="orgName">机构: {{ item.orgName ? item.orgName : "-" }}</view>
+					</view>
+					<view class="info">
+						<view class="sendDate" style="margin-right: 20px;">发单日期:
+							{{ item.sendDate ? item.sendDate : "-" }}
+						</view>
 					</view>
-					<view class="clueTag">
-						<view class="label">标签:</view>
-						<u-tag :text="tag.name" plain plainFill borderColor="#fff" size="mini"
-							v-for="(tag) in item.tags" :key="tag.id" style="margin-right: 10px;"
-							:bgColor="tag.color" color="#fff"></u-tag>
+					<view class="info">
+						<view class="owner">所属人 {{ item.clueOwnerName ? item.clueOwnerName : "-" }}</view>
+						<view class="operation" style="margin-right: 20px;">运营人
+							{{ item.clueOperationName ? item.clueOperationName : "-" }}
+						</view>
+					</view>
+				</view>
+				<view class="clue_state_wrap">
+					<view class="clue_state">
+						<view class="state_wrap">
+							<view class="label">阶段:</view>{{crm_form_state(item.state)}}
+						</view>
+						<view class="clueTag">
+							<view class="label">标签:</view>
+							<u-tag :text="tag.name" plain plainFill borderColor="#fff" size="mini"
+								v-for="(tag) in item.tags" :key="tag.id" style="margin-right: 10px;"
+								:bgColor="tag.color" color="#fff"></u-tag>
+						</view>
 					</view>
 				</view>
 			</view>
@@ -50,12 +68,18 @@
 		<u-loadmore :status="loadStatus" v-if="listData.length > 0" />
 		<!-- 空状态 -->
 		<show-emtry v-if="listData.length === 0"></show-emtry>
+
+		<filter-query ref="filter" v-model="queryParams" @getList="resetData" :mapHeight="mapHeight"
+			:dicts="dicts"></filter-query>
 	</view>
 </template>
 
 <script>
 	import pullUpRefresh from "@/utils/pullUpRefresh";
-	import { selectDictLabel } from "@/utils/util";
+	import {
+		selectDictLabel
+	} from "@/utils/util";
+	import filterQuery from "./filterQuery.vue";
 	export default {
 		mixins: [pullUpRefresh],
 		props: {
@@ -68,19 +92,46 @@
 				required: true
 			}
 		},
+		components: {
+			filterQuery,
+		},
 		data() {
 			return {
 				// 可以添加特定于接单中心的参数
 				queryParams: {
+					sendDateStart: '',
+					sendDateEnd: '',
+					type: '2',
+					item: undefined,
+					phone: undefined,
+					deptId: undefined,
+					state: undefined,
+					status: undefined,
+					allTagList: [],
+					identification: undefined,
+					createBy: undefined,
 					pageNum: 1,
 					pageSize: 10,
 				},
+
+				mapHeight: "0px"
 			}
 		},
 		methods: {
+			handleKeyword() {
+				this.resetData();
+			},
+			handleKeywordClear() {
+				// 组件有bug 清空后的值还是存在
+				this.queryParams.phone = "";
+				this.resetData();
+			},
+			handleshowFilter() {
+				this.$refs.filter.show();
+			},
 			// 字典翻译
 			crm_form_state(state) {
-				return selectDictLabel(this.dicts.crmFormStateDicts, state);
+				return selectDictLabel(this.dicts.crmFormStateDict, state);
 			},
 			getStatusText(status) {
 				const statusMap = {
@@ -138,15 +189,56 @@
 		},
 		mounted() {
 			this.resetData();
-		}
+			// 根据路由名称设置类型
+			this.queryParams.type = this.type;
+			uni.getSystemInfo({
+				success: (e) => {
+					const {
+						windowTop,
+						windowBottom,
+						windowHeight
+					} = e;
+					this.mapHeight = windowHeight + 'px';
+				}
+			});
+		},
 	}
 </script>
 
 <style lang="scss" scoped>
 	.order_center_wrap {
-		padding: 20px;
 		box-sizing: border-box;
 		min-height: 100vh;
+
+		.queryParams_wrap {
+			display: flex;
+			background: #fff;
+			padding: 14px 0;
+
+
+			.query,
+			.search {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-size: 16px;
+				font-weight: 700;
+				color: #202020;
+			}
+
+			.query {
+				flex: 1;
+			}
+
+			.search {
+				flex: 2;
+				padding-left: 20px;
+			}
+		}
+	}
+
+	.order_item_wrap {
+		padding: 20px 20px;
 	}
 
 	.order_item {
@@ -214,20 +306,23 @@
 	.empty_wrap {
 		margin-top: 100px;
 	}
-	
+
 	.clue_state_wrap {
 		font-size: 14px;
 		background: #f8f9fb;
 		padding: 10px;
 		color: #9b9aa2;
 		overflow: hidden;
-		.state_wrap{
+
+		.state_wrap {
 			display: flex;
 			margin-bottom: 10px;
 		}
-		.label{
+
+		.label {
 			flex: 0 0 40px !important;
 		}
+
 		.clueTag {
 			display: flex;
 		}

pages/order/components/sort.vue

@@ -0,0 +1,149 @@
+<template>
+	<view>
+		<u-popup :show="showSort" mode="bottom" closeable @close="handleClose">
+			<scroll-view scroll-y :style="{ height: mapHeight }" @touchmove.stop="() => {}">
+			<view class="sort_wrap" :style="{ height : mapHeight }">
+				<view class="sort_way">
+					<view class="title">
+						排序方式
+					</view>
+					<view class="option_item" @click="handleChangeSort('asc')"
+						:class="{ active : value.sort == 'asc' }">
+						<text>正序排序</text>
+						<u-icon name="checkbox-mark" color="#4c8afe"></u-icon>
+					</view>
+					<view class="option_item" @click="handleChangeSort('desc')"
+						:class="{ active : value.sort == 'desc' }">
+						<text>倒序排序</text>
+						<u-icon name="checkbox-mark" color="#4c8afe"></u-icon>
+					</view>
+					<view class="title" style="margin-top: 30rpx;">
+						排序属性
+					</view>
+					<view class="option_item" v-for="(item,index) in sortParams" :key="index" 
+					@click="handleChangeSortField(item.value)" :class="{ active : value.sortField == item.value }">
+						<text>{{item.text}}</text>
+						<u-icon name="checkbox-mark" color="#4c8afe"></u-icon>
+					</view>
+				</view>
+				<u-tabbar :fixed="true" inactiveColor="#ffffff" class="case_tabbar" :placeholder="true"
+					:safeAreaInsetBottom="true">
+					<u-tabbar-item text="重置" :customStyle="{backgroundColor : '#fff'}"
+						class="uTabbarItem close_btn" @click="handleReset"></u-tabbar-item>
+					<u-tabbar-item text="确定" :customStyle="{backgroundColor : '#4c8afe'}"
+						class="uTabbarItem" @click="handleEnter"></u-tabbar-item>
+				</u-tabbar>
+			</view>
+			</scroll-view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			value: {
+				type: Object,
+			},
+			mapHeight : {
+				type : String,
+			},
+		},
+		emits : ["getList"],
+		data() {
+			return {
+				showSort: false,
+				sortParams: [{
+					value: 1,
+					text: '创建时间'
+				}, {
+					value: 2,
+					text: '分配时间'
+				},{
+					value: 3,
+					text: '跟进时间'
+				}]
+			}
+		},
+		mounted(){
+		},
+		methods: {
+			handleClose(){
+				this.showSort = false;
+			},
+			handleReset(){
+				this.value.sort = undefined;
+				this.value.sortField = undefined;
+			},
+			handleEnter(){
+				this.$emit("getList");
+				this.showSort = false;
+			},
+			handleChangeSort(sort) {
+				this.value.sort = sort;
+			},
+			handleChangeSortField(value){
+				this.value.sortField = value;
+			},
+			show() {
+				this.showSort = true;
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.sort_wrap {
+	  padding: 20px;
+	  box-sizing: border-box;
+	  overflow: scroll;
+	
+	  .title {
+	    font-size: 18px;
+	    color: #202020;
+	  }
+	
+	  .option_item {
+	    display: flex;
+	    justify-content: space-between;
+	    align-items: center;
+	    font-size: 15px;
+	    padding: 18px 0;
+	    border-bottom: 1px solid #eeeef2;
+	    color: #606060;
+	    &:last-child{
+	      border: none;
+	    }
+	  }
+	
+	  .active {
+	    color:#4c8afe;
+	
+	    ::v-deep & .u-icon__icon {
+	      display: block;
+	    }
+	  }
+	
+	  ::v-deep .u-icon__icon {
+	    display: none;
+	    font-weight: bold !important;
+	    font-size: 19px !important;
+	  }
+	}
+
+
+	.case_tabbar {
+		.uTabbarItem {
+			::v-deep .u-tabbar-item__text {
+				font-size: 18px;
+			}
+		}
+
+		.close_btn {
+			::v-deep .u-tabbar-item__text {
+				font-size: 18px;
+				color: #606060 !important;
+			}
+		}
+	}
+</style>

pages/order/index.vue

@@ -58,7 +58,10 @@
 					}
 				],
 				dicts : {
-					crmFormStateDicts : [],
+					crmFormStatusDict : [],
+					crmFormCategoryDict : [],
+					crmFormStateDict : [],
+					crmFormTacticDict : [],
 				}
 			}
 		},
@@ -74,7 +77,16 @@
 				}
 			});
 			this.$getDicts('crm_follow_status').then(res => {
-				this.dicts.crmFormStateDicts = res;
+				this.dicts.crmFormStatusDict = res;
+			});
+			this.$getDicts('crm_form_category').then(res => {
+				this.dicts.crmFormCategoryDict = res;
+			});
+			this.$getDicts('crm_form_state').then(res => {
+				this.dicts.crmFormStateDict = res;
+			});
+			this.$getDicts('crm_form_tactic').then(res => {
+				this.dicts.crmFormTacticDict = res;
 			});
 		},
 		methods: {