JCSS / jcss-miniprogram

<template>
  <view class="page-container">
    <!-- 顶部固定区域 -->
    <up-sticky>
      <view class="header-wrap">
        <!-- 第一行：u-tabs 待办/已办切换  :scrollable="false"-->
        <up-tabs
            v-model="activeTab"
            :list="tabList"
            active-color="#1989fa"
            inactive-color="#666"
            font-size="30rpx"

            @change="handleTabChange"
        />

        <!-- 第二行：下拉框 + 搜索框 -->
        <view class="search-header">
          <!-- 左侧下拉框 -->
          <view class="select-wrap">
            <up-select
                v-model:current="selectedSortValue"
                :options="sortOptions"
                :showOptionsLabel="true"
                @select="handleSortChange"
                border="surround"
                :style="{ flex: 1 }"
            />
          </view>

          <!-- 右侧搜索框 -->
          <view class="search-input-wrap">
            <up-search
                v-model="searchValue"
                placeholder="请输入关键字"
                @search="handleSearch"
                bg-color="#f5f5f5"
                :clearabled="false"
                :show-action="true"
                actionText="搜索"
                :animation="true"
                @custom="handleSearch"
            />
          </view>
        </view>
      </view>
    </up-sticky>

    <!-- 列表容器 -->
    <z-paging
        ref="paging"
        v-model="orderList"
        @query="queryList"
        :auto-show-system-loading="true"

    >
    <template #empty>
      <view class="empty-view" style="padding: 100rpx 0; text-align: center; color: #999;">
        暂无工单数据
      </view>
    </template>

    <view class="common-card-list" slot="top">
      <!-- 待办工单卡片 -->
      <up-card
          v-if="activeTab === 0"
          :border="false"
          :foot-border-top="false"
          v-for="(item, index) in orderList"
          :key="`todo_${item.orderNo}_${index}`"
          :show-head="false"
          class="order-card"
      >
        <template #body>
          <view class="card-body">
            <view class="u-body-item u-flex">
              <view class="u-body-item-title">工单编号：</view>
              <view class="u-line-1 u-body-value">{{ item.orderNo || '-' }}</view>
            </view>
            <view class="u-body-item u-flex">
              <view class="u-body-item-title">工单位置：</view>
              <view class="u-line-1 u-body-value">{{ item.roadName || '-' }}</view>
            </view>
            <view class="u-body-item u-flex">
              <view class="u-body-item-title">工单名称：</view>
              <view class="u-line-1 u-body-value">{{ item.orderName || '未填写' }}</view>
            </view>
            <view class="u-body-item u-flex">
              <view class="u-body-item-title">情况描述：</view>
              <view class="u-line-1 u-body-value">{{ item.remark || '无' }}</view>
            </view>
            <view class="u-body-item u-flex">
              <view class="u-body-item-title">紧急程度：</view>
              <view class="u-line-1 u-body-value">
                <up-tag :type="getUrgencyType(item.urgencyLevel)">{{ item.urgencyLevel || '普通' }}</up-tag>
              </view>
            </view>
            <view class="u-body-item u-flex">
              <view class="u-body-item-title">提交时间：</view>
              <view class="u-line-1 u-body-value">{{ timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
            </view>
            <!-- 操作按钮行 -->
            <view class="u-body-item u-flex common-justify-between common-item-center mt-20">
              <up-button type="warning" size="mini" @click="handleReject(item)">回退</up-button>
              <up-button type="primary" size="mini" @click="handleProcess(item)">处理</up-button>
              <up-button type="info" size="mini" @click="handleDetail(item)">详情</up-button>
            </view>
          </view>
        </template>
      </up-card>

      <!-- 已办工单卡片 -->
      <up-card
          v-if="activeTab === 1"
          :border="false"
          :foot-border-top="false"
          v-for="(item, index) in orderList"
          :key="`done_${item.orderNo}_${index}`"
          :show-head="false"
          class="order-card"
      >
        <template #body>
          <view class="card-body">
            <view class="u-body-item u-flex">
              <view class="u-body-item-title">工单编号：</view>
              <view class="u-line-1 u-body-value">{{ item.orderNo || '-' }}</view>
            </view>
            <view class="u-body-item u-flex">
              <view class="u-body-item-title">工单位置：</view>
              <view class="u-line-1 u-body-value">{{ item.roadName || '-' }}</view>
            </view>
            <view class="u-body-item u-flex">
              <view class="u-body-item-title">工单名称：</view>
              <view class="u-line-1 u-body-value">{{ item.orderName || '未填写' }}</view>
            </view>
            <view class="u-body-item u-flex">
              <view class="u-body-item-title">情况描述：</view>
              <view class="u-line-1 u-body-value">{{ item.remark || '无' }}</view>
            </view>
            <view class="u-body-item u-flex common-justify-between common-item-center">
              <view class="u-flex">
                <view class="u-body-item-title">紧急程度：</view>
                <view class="u-line-1 u-body-value">
                  <up-tag :type="getUrgencyType(item.urgencyLevel)">{{ item.urgencyLevel || '普通' }}</up-tag>
                </view>
              </view>
              <up-button type="info" size="mini" @click="handleDetail(item)">工单详情</up-button>
            </view>
            <view class="u-body-item u-flex">
              <view class="u-body-item-title">提交时间：</view>
              <view class="u-line-1 u-body-value">{{ timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
            </view>
          </view>
        </template>
      </up-card>
    </view>
    </z-paging>

    <!-- 底部新增工单按钮（仅巡查员显示） -->
    <view v-if="isInspector" class="fixed-bottom-btn-wrap">
      <up-button type="primary" size="large" @click="handleAddOrder">
        新增工单
      </up-button>
    </view>

    <!-- 回退原因弹窗 -->
    <up-popup v-model="rejectPopupShow" mode="center" :close-on-click-overlay="false">
      <view class="reject-popup">
        <view class="popup-title">回退原因</view>
        <up-textarea
            v-model="rejectReason"
            placeholder="请输入回退原因（必填）"
            :required="true"
            maxlength="-1"
            rows="4"
            class="mt-20"
        />
        <view class="upload-wrap mt-20">
          <view class="upload-title">上传图片（选填）</view>
          <up-upload
              :action="uploadUrl"
              :file-list="rejectFileList"
              @after-read="handleAfterRead"
              @delete="handleDeleteFile"
              multiple
              max-count="3"
          />
        </view>
        <view class="popup-btn-wrap mt-40">
          <up-button type="default" size="medium" @click="rejectPopupShow = false" class="mr-20">取消</up-button>
          <up-button type="primary" size="medium" @click="confirmReject">确认提交</up-button>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { timeFormat } from '@/uni_modules/uview-plus';
// 假设从用户store获取角色信息
import { useUserStore } from '@/pinia/user';

// ========== 状态管理 ==========
const userStore = useUserStore();
// 标签页切换
const activeTab = ref(0); // 0-待办 1-已办
const tabList = ref([
  { name: '待办' },
  { name: '已办' }
]);
// 排序下拉框
const selectedSortValue = ref(1);
const sortOptions = ref([
  { name: '位置', id: 1 },
  { name: '名称', id: 2 },
  { name: '描述', id: 3 },
  { name: '编号', id: 4 },
]);
// 搜索
const searchValue = ref('');
// 分页
const paging = ref(null);
const orderList = ref([]);
// 角色控制（巡查员显示新增按钮）
const isInspector = computed(() => {
  // 假设用户角色字段为role，巡查员标识为inspector
  return userStore.userInfo.roles === 'yl_inspector';
});
// 回退弹窗相关
const rejectPopupShow = ref(false);
const rejectReason = ref('');
const rejectFileList = ref([]);
const currentRejectItem = ref(null);
// 上传地址（根据实际接口配置）
const uploadUrl = ref('https://xxx.com/upload');

// ========== 接口请求 ==========
// 待办工单接口
const getTodoOrderList = async (params) => {
  // 替换为实际待办工单接口
  const res = await uni.request({
    url: '/api/order/todo',
    method: 'POST',
    data: params
  });
  return res.data;
};

// 已办工单接口
const getDoneOrderList = async (params) => {
  // 替换为实际已办工单接口
  const res = await uni.request({
    url: '/api/order/done',
    method: 'POST',
    data: params
  });
  return res.data;
};

// 分页查询列表
const queryList = async (pageNo, pageSize) => {
  try {
    const apiParams = {
      searchContent: searchValue.value.trim() || '',
      pageNo,
      pageSize,
      type: selectedSortValue.value // 1-位置 2-工单名称 3-情况描述 4-工单编号
    };

    let res;
    if (activeTab.value === 0) {
      // 待办工单
      res = await getTodoOrderList(apiParams);
    } else {
      // 已办工单
      res = await getDoneOrderList(apiParams);
    }

    // 适配z-paging分页
    paging.value.complete(res.list, res.total);
  } catch (error) {
    console.error('加载工单失败：', error);
    paging.value?.complete(false);
    uni.showToast({ title: '加载失败，请重试', icon: 'none' });
  }
};

// ========== 事件处理 ==========
// 标签页切换
const handleTabChange = (index) => {
  activeTab.value = index;
  paging.value?.reload(); // 切换标签页刷新列表
};

// 排序变更
const handleSortChange = (val) => {
  selectedSortValue.value = val.id;
  searchValue.value = '';
  paging.value?.reload(); // 排序变更刷新列表
};

// 搜索
const handleSearch = (val) => {
  searchValue.value = val;
  paging.value?.reload(); // 搜索刷新列表
};

// 工单详情
const handleDetail = (item) => {
  uni.navigateTo({
    url: `/pages-sub/daily/quick-order/order-detail?id=${item.id}`
  });
};

// 待办-处理工单
const handleProcess = async (item) => {
  try {
    // 调用处理工单接口，获取跳转标识
    const res = await uni.request({
      url: '/api/order/process',
      method: 'POST',
      data: { orderId: item.id }
    });

    const { jumpType, jumpUrl } = res.data;
    // 根据返回标识跳转不同页面
    if (jumpType === 1) {
      uni.navigateTo({ url: jumpUrl });
    } else if (jumpType === 2) {
      uni.redirectTo({ url: jumpUrl });
    } else if (jumpType === 3) {
      uni.switchTab({ url: jumpUrl });
    }
  } catch (error) {
    console.error('处理工单失败：', error);
    uni.showToast({ title: '处理失败，请重试', icon: 'none' });
  }
};

// 待办-回退工单
const handleReject = (item) => {
  currentRejectItem.value = item;
  rejectReason.value = '';
  rejectFileList.value = [];
  rejectPopupShow.value = true;
};

// 确认回退工单
const confirmReject = async () => {
  if (!rejectReason.value.trim()) {
    uni.showToast({ title: '请填写回退原因', icon: 'none' });
    return;
  }

  try {
    // 调用回退工单接口
    await uni.request({
      url: '/api/order/reject',
      method: 'POST',
      data: {
        orderId: currentRejectItem.value.id,
        reason: rejectReason.value,
        fileUrls: rejectFileList.value.map(file => file.url)
      }
    });

    uni.showToast({ title: '回退成功', icon: 'success' });
    rejectPopupShow.value = false;
    paging.value?.reload(); // 刷新列表
  } catch (error) {
    console.error('回退工单失败：', error);
    uni.showToast({ title: '回退失败，请重试', icon: 'none' });
  }
};

// 新增工单
const handleAddOrder = () => {
  uni.navigateTo({
    url: '/pages-sub/daily/quick-order/add-order'
  });
};

// 紧急程度标签类型转换
const getUrgencyType = (level) => {
  switch (level) {
    case '紧急':
      return 'danger';
    case '重要':
      return 'warning';
    case '普通':
      return 'info';
    default:
      return 'default';
  }
};

// 上传图片-读取后
const handleAfterRead = (file) => {
  rejectFileList.value.push(file);
};

// 上传图片-删除
const handleDeleteFile = (index) => {
  rejectFileList.value.splice(index, 1);
};

// 页面初始化
onMounted(() => {
  // 初始化加载列表
  paging.value?.reload();
});
</script>

<style scoped lang="scss">
.page-container {
  min-height: 100vh;
  background-color: #f8f8f8;
}

// 顶部固定区域
.header-wrap {
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

// 搜索栏样式
.search-header {
  display: flex;
  align-items: center;
  padding: 20rpx;
  box-sizing: border-box;

  .select-wrap {
    width: 120rpx;
    margin-right: 20rpx;

    :deep(.u-select) {
      width: 100%;
      font-size: 28rpx;
    }

    :deep(.u-input__placeholder) {
      font-size: 28rpx;
    }
  }

  .search-input-wrap {
    flex: 1;
  }
}

// 工单卡片样式
.common-card-list {
  padding: 20rpx;
}

.order-card {
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
}

.card-body {
  padding: 20rpx;

  .u-body-item {
    margin-bottom: 16rpx;
    font-size: 28rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .u-body-item-title {
      color: #666;
      min-width: 120rpx;
    }

    .u-body-value {
      color: #333;
      flex: 1;
    }
  }

  .mt-20 {
    margin-top: 20rpx;
  }
}

// 公共flex样式
.u-flex {
  display: flex;
  align-items: center;
}

.common-justify-between {
  justify-content: space-between;
}

.common-item-center {
  align-items: center;
}

// 底部按钮
.fixed-bottom-btn-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

  :deep(.u-button) {
    width: 100%;
    height: 88rpx;
    font-size: 32rpx;
  }
}

// 回退弹窗样式
.reject-popup {
  width: 680rpx;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 12rpx;

  .popup-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }

  .upload-title {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 10rpx;
  }

  .popup-btn-wrap {
    display: flex;
    justify-content: flex-end;
  }
}
</style>