by2025/SmartParks_uniapp
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

预警

Browse Source
This commit is contained in:
liyuanchao
2025-08-13 17:31:09 +08:00
parent cffe8b855b
commit 1500a4a99e
8 changed files with 589 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

371
pages/sys/workbench/order/order.vue
View File

@@ -1,25 +1,61 @@
<template>
<view class="order-container">
<view class="order-container" @click="handleOutsideClick">
<view class="filter">
<view class="filter-btn" @click="togglePopup">工单类型
<image class="filter-img" src="/static/ic_down_arrow_g.png" />
</view>
<view class="filter-btn">工单状态
<image class="filter-img" src="/static/ic_down_arrow_g.png" />
</view>
<view class="filter-btn">处理人
<!-- 工单类型按钮 -->
<view class="filter-btn" @click.stop="togglePopup('type')">
{{ !selectedFilters.type ||selectedFilters.type.orderTypeName === '全部' ? '工单类型' : selectedFilters.type.orderTypeName }}
<image class="filter-img" src="/static/ic_down_arrow_g.png" />
<view v-if="activePopup === 'type'" class="dropdown">
<view class="dropdown-triangle"></view>
<view class="dropdown-list">
<view v-for="(item, index) in typeList" :key="index" class="dropdown-item"
@click.stop="selectFilter('type', item)">
{{ item.orderTypeName }}
</view>
</view>
</view>
</view>
<!-- 工单状态按钮 -->
<view v-if="activeTab == 1" class="filter-btn" @click.stop="togglePopup('status')">
{{ !selectedFilters.status || selectedFilters.status === '全部' ? '工单状态' : selectedFilters.status }}
<image class="filter-img" src="/static/ic_down_arrow_g.png" />
<view v-if="activePopup === 'status'" class="dropdown">
<view class="dropdown-triangle"></view>
<view class="dropdown-list">
<view v-for="(item, index) in statusList" :key="index" class="dropdown-item"
@click.stop="selectFilter('status', item.name)">
{{ item.name }}
</view>
</view>
</view>
</view>
<!-- 处理人按钮 -->
<view class="filter-btn" @click.stop="togglePopup('handler')">
{{ !selectedFilters.handler || selectedFilters.handler === '全部' ? '处理人' : selectedFilters.handler }}
<image class="filter-img" src="/static/ic_down_arrow_g.png" />
<view v-if="activePopup === 'handler'" class="dropdown">
<view class="dropdown-triangle"></view>
<view class="dropdown-list">
<view v-for="(item, index) in handlerList" :key="index" class="dropdown-item"
@click.stop="selectFilter('handler', item.name)">
{{ item.name }}
</view>
</view>
</view>
</view>
</view>
<!-- tab栏 -->
<view class="order-tabs">
<view v-for="(tab, idx) in tabs" :key="idx" :class="['order-tab', {active: idx === activeTab}]"
<view v-for="(tab, idx) in tabs" :key="idx" :class="['order-tab', { active: idx === activeTab }]"
@click="changeTab(idx)">
{{ tab }}
<view v-if="idx === activeTab" class="tab-underline"></view>
</view>
</view>
<!-- 列表区 -->
<scroll-view scroll-y class="order-list" @scroll="handleScroll">
<view v-for="(item, idx) in list" :key="idx" class="order-card" @click="goDetail(item)">
@@ -33,33 +69,18 @@
<view class="order-info">工单名称：{{ item.orderName }}</view>
<view class="order-info">工单类型：{{ item.typeName }}</view>
<view class="order-info">创建时间：{{ item.createTime }}</view>
<view class="order-info">有 效 期：{{ item.createTime }}-{{item.planCompleTime}}</view>
<view v-if="item.statusText === '已结束'" class="order-eval-btn eval-btn-right">服务评价</view>
<view class="order-info">
有 效 期：{{ item.createTime }}-{{ item.planCompleTime }}
</view>
<view v-if="item.statusText === '已结束'" class="order-eval-btn eval-btn-right">
服务评价
</view>
</view>
</scroll-view>
<!-- 悬浮新增按钮 -->
<image v-if="false" src="/static/ic_my_repair_02.png"
:class="['order-add-btn-fixed', { 'hide': isAddBtnHidden }]" @click="addOrder" />
<!-- 工单类型弹窗 -->
<u-popup v-model="showPopup" mode="bottom">
<view class="popup-content">
<view class="popup-header">
<text @click="closePopup">取消</text>
<text>选择工单类型</text>
<text @click="confirmSelection">确定</text>
</view>
<view class="popup-body">
<u-cell-group>
<u-cell title="全部" @click="selectType('全部')"></u-cell>
<u-cell title="报修" @click="selectType('报修')"></u-cell>
<u-cell title="投诉" @click="selectType('投诉')"></u-cell>
</u-cell-group>
</view>
</view>
</u-popup>
<image v-if="false" src="/static/ic_my_repair_02.png" :class="['order-add-btn-fixed', { hide: isAddBtnHidden }]"
@click="addOrder" />
</view>
</template>
@@ -67,27 +88,37 @@
export default {
data() {
return {
tabs: ['待办', '全部'],
activeTab: 1,
tabs: ["待办", "全部"],
activeTab: 0,
tabData: [
[],
[]
], // 每个tab的数据
tabLoaded: [false, false], // 每个tab是否已加载
],
tabLoaded: [false, false],
loading: false,
lastScrollTop: 0,
isAddBtnHidden: false,
showPopup: false,
selectedType: ''
}
activePopup: null, // 当前显示哪个弹窗，null表示都关闭
selectedFilters: {
type: null,
status: null,
handler: null,
},
typeList: [{
'orderTypeName': '全部'
}],
statusList: [],
handlerList: [],
};
},
computed: {
list() {
return this.tabData[this.activeTab];
}
},
},
created() {
this.loadTabData(this.activeTab); // 初始化加载当前tab数据
this.loadTabData(this.activeTab);
this.loadFilterData();
},
methods: {
goBack() {
@@ -95,22 +126,13 @@
},
addOrder() {
uni.navigateTo({
url: '/pages/sys/workbench/order/addOrder'
url: "/pages/sys/workbench/order/addOrder",
});
},
handleScroll(e) {
const scrollTop = e.detail.scrollTop;
// 为了避免过于频繁的触发，可以设置一个阈值
if (Math.abs(scrollTop - this.lastScrollTop) < 20) {
return;
}
if (scrollTop > this.lastScrollTop && scrollTop > 50) {
// 向下滚动，隐藏按钮
this.isAddBtnHidden = true;
} else {
// 向上滚动，显示按钮
this.isAddBtnHidden = false;
}
if (Math.abs(scrollTop - this.lastScrollTop) < 20) return;
this.isAddBtnHidden = scrollTop > this.lastScrollTop && scrollTop > 50;
this.lastScrollTop = scrollTop;
},
async changeTab(idx) {
@@ -121,69 +143,126 @@
},
async loadTabData(idx) {
this.loading = true;
// 模拟接口请求，不同tab返回不同mock数据
let params = {}
if (idx === 0) {
params = {}
let params = {};
if (this.selectedFilters.type && this.selectedFilters.type.id) {
params.type = this.selectedFilters.type.id
}
let data = [];
let res = await this.$u.api.getOrderList(params);
if (res.code == '200') {
data = res.rows
if (res.code == "200") {
this.$set(this.tabData, idx, res.rows);
}
this.$set(this.tabData, idx, data);
this.$set(this.tabLoaded, idx, true);
this.loading = false;
},
getStatusLabel(status) {
const statusMap = {
0: '创建工单',
1: '已接单',
2: '已接单',
3: '处理中',
4: '已完成'
0: "创建工单",
1: "已接单",
2: "已接单",
3: "处理中",
4: "已完成",
};
return statusMap[status] || '';
return statusMap[status] || "";
},
getStatusColor(status) {
const statusMap = {
0: 'orange',
1: 'doing',
2: 'doing',
3: 'doing',
4: 'done'
0: "orange",
1: "doing",
2: "doing",
3: "doing",
4: "done",
};
return statusMap[status] || '';
return statusMap[status] || "";
},
goDetail(item) {
// 将item对象转换为JSON字符串并进行编码，然后通过URL参数传递
const itemStr = encodeURIComponent(JSON.stringify(item));
uni.navigateTo({
url: '/pages/sys/workbench/order/orderDetail?item=' + itemStr
url: "/pages/sys/workbench/order/orderDetail?item=" + itemStr,
});
},
togglePopup() {
this.showPopup = !this.showPopup;
},
selectType(type) {
this.selectedType = type;
},
closePopup() {
this.showPopup = false;
},
confirmSelection() {
if (this.selectedType) {
// 处理确认逻辑，例如更新筛选条件
console.log('Selected type:', this.selectedType);
togglePopup(name) {
if (this.activePopup === name) {
this.activePopup = null;
} else {
this.activePopup = name;
}
this.showPopup = false;
}
}
}
},
selectFilter(name, value) {
this.selectedFilters[name] = value;
this.activePopup = null;
this.loadTabData(this.activeTab)
},
handleOutsideClick() {
if (this.activePopup !== null) {
this.activePopup = null;
}
},
async loadFilterData() {
// 工单类型
let resType = await this.$u.api.getOrdersType();
if (resType.code === 200) {
this.typeList = [...this.typeList, ...resType.rows];
}
this.statusList = [{
name: "全部"
},
{
name: "创建工单"
},
{
name: "已接单"
},
{
name: "处理中"
},
{
name: "已完成"
},
];
// 处理人
try {
let resHandler = await this.$u.api.getHandlers();
if (resHandler.code === "200" && Array.isArray(resHandler.data)) {
this.handlerList = resHandler.data;
} else {
this.handlerList = [{
name: "全部"
},
{
name: "张三"
},
{
name: "李四"
},
{
name: "王五"
},
];
}
} catch {
this.handlerList = [{
name: "全部"
},
{
name: "张三"
},
{
name: "李四"
},
{
name: "王五"
},
];
}
},
},
};
</script>
<style scoped>
@@ -204,16 +283,18 @@
}
.filter-btn {
padding: 15rpx 22rpx 15rpx 22rpx;
background: #F7F7F7;
padding: 15rpx 22rpx;
background: #f7f7f7;
border-radius: 25rpx;
height: 58rpx;
color: #9A9A9A;
color: #9a9a9a;
font-size: 28rpx;
display: flex;
justify-content: center;
align-items: center;
margin-right: 24rpx;
position: relative;
cursor: pointer;
}
.filter-img {
@@ -222,6 +303,54 @@
margin-left: 8rpx;
}
.dropdown {
position: absolute;
top: calc(100% + 10rpx);
left: 50%;
transform: translateX(-50%);
background: #fff;
border-radius: 12rpx;
box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
z-index: 999;
width: 200rpx;
}
/* 三角 */
.dropdown-triangle {
position: absolute;
top: -10rpx;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 10rpx solid transparent;
border-right: 10rpx solid transparent;
border-bottom: 10rpx solid #fff;
filter: drop-shadow(0 1rpx 1rpx rgba(0, 0, 0, 0.05));
z-index: 1000;
}
.dropdown-list {
display: flex;
flex-direction: column;
}
.dropdown-item {
padding: 20rpx;
font-size: 28rpx;
color: #333;
border-bottom: 1rpx solid #eee;
text-align: center;
}
.dropdown-item:last-child {
border-bottom: none;
}
.dropdown-item:hover {
background: #f5f5f5;
}
.order-tabs {
display: flex;
align-items: center;
@@ -230,7 +359,6 @@
height: 80rpx;
border-bottom: 1px solid #f0f0f0;
flex-shrink: 0;
/* 防止被压缩 */
}
.order-tab {
@@ -241,19 +369,18 @@
position: relative;
font-weight: 500;
padding: 0 0 10rpx 0;
/* tab点击事件 */
cursor: pointer;
}
.order-tab.active {
color: #2186FF;
color: #2186ff;
font-weight: bold;
}
.tab-underline {
width: 60rpx;
height: 6rpx;
background: #2186FF;
background: #2186ff;
border-radius: 3rpx;
margin: 0 auto;
margin-top: 8rpx;
@@ -263,13 +390,9 @@
margin: 32rpx 0 0 0;
padding: 0 24rpx;
flex: 1;
/* 占据所有剩余空间 */
overflow-y: auto;
/* 内容超出时，开启垂直滚动 */
padding-bottom: 30rpx;
/* 为底部按钮留出空间 */
height: calc(100vh - 80rpx - 32rpx);
/* 减去tab栏高度和margin-top */
}
.order-card {
@@ -281,8 +404,6 @@
padding-bottom: 32rpx;
}
.order-row {
display: flex;
align-items: center;
@@ -295,7 +416,7 @@
.order-no {
font-size: 24rpx;
color: #0B0B0B;
color: #0b0b0b;
font-weight: 500;
}
@@ -305,22 +426,22 @@
}
.order-line-image {
margin: left 29rpx;
margin-left: 29rpx;
margin-right: 39rpx;
height: 2rpx;
margin-bottom: 29rpx;
}
.order-status.orange {
color: #F3AB44;
color: #f3ab44;
}
.order-status.doing {
color: #00C9AA;
color: #00c9aa;
}
.order-status.done {
color: #8A8A8A;
color: #8a8a8a;
}
.order-info {
@@ -344,26 +465,4 @@
.order-add-btn-fixed.hide {
transform: translateX(200%);
}
.popup-content {
background-color: #fff;
width: 100%;
}
.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx;
border-bottom: 1px solid #f0f0f0;
}
.popup-header text {
color: #2186FF;
font-size: 30rpx;
}
.popup-body {
padding: 20rpx;
}
</style>