【UniAPP实现多标签排序】

UniAPP实现多标签排序

**简述：**列表数据存在两种标签：A标签和B标签。首先对A标签进行排序，再以A标签为基础对B标签进行排序。

A标签状态有：0：未开始、1：进行中、2：暂停。
**B标签状态有：0：正常、1：加急、2：特急。
**排序规则：A标签【进行中>暂停>未开始】、B标签【特急>加急>正常】。

预期效果：

进行中：特急—— 进行中：加急 ——进行中：正常

暂停：特急 ——暂停：加急—— 暂停：正常

未开始：特急—— 未开始：加急—— 未开始：正常

效果图

参考代码：

					//页面数据
					<view v-for="(item, index) in productData" :key="index">
							<div class="card-header">
								<view class="card-header">
									<!--工单状态-->
									<span style="float: left;">
										<b>工单状态:</b>
										<span v-if="item.reportState === 0" class="status pending">未开始</span>
										<span v-else-if="item.reportState === 1" class="status in-progress">进行中</span>
										<span v-else-if="item.reportState === 3" class="status completed">暂停</span>
									</span>
									<!--生产工单优先级-->
									<span style="float: center; margin-left: 30px;">
										<b>工单优先级:</b>
										<span v-if="item.statusLevel === 0" class="status stateZc">正常</span>
										<span v-else-if="item.statusLevel === 1" class="status stateJj">加急</span>
										<span v-else-if="item.statusLevel === 2" class="status stateTj">特急</span>
									</span>
								</view>
							</div>
					</view>		

                    //多标签数据排序
                    handleSearch() {
                            this.http.get("/api/Prd_PlanOrderList/gettask2", {
                            }).then((response) => {
                                //接口返回数据
                                this.productData = response.data;

                                //数据列表存在两种标签：A标签：项目状态【进行中、暂停、未开始】。B标签：项目优先级【正常、加急、特急】。
                                //1、首先根据项目状态进行排序，其次再以项目状态排序作为基础，对项目优先级进行排序。
                                this.productData = this.productData.slice().sort((a, b) => {
                                    // 工单状态优先级排序：进行中 -> 暂停 -> 未开始
                                    const reportStateOrder = {
                                        1: 1, // 进行中
                                        3: 2, // 暂停
                                        0: 3, // 未开始
                                    };
                                    const aStateOrder = reportStateOrder[a.reportState];
                                    const bStateOrder = reportStateOrder[b.reportState];

                                    if (aStateOrder !== bStateOrder) {
                                        return aStateOrder - bStateOrder;
                                    }

                                    // 在相同工单状态下，按优先级排序：特急 -> 加急 -> 正常
                                    const statusLevelOrder = {
                                        2: 1, // 特急
                                        1: 2, // 加急
                                        0: 3, // 正常
                                    };

                                    const aStatusOrder = statusLevelOrder[a.statusLevel];
                                    const bStatusOrder = statusLevelOrder[b.statusLevel];

                                    return aStatusOrder - bStatusOrder;
                                });
                            })
                        },