JCSS / jcss-miniprogram

<template>
  <view class="u-page">
    <!-- 顶部固定搜索栏 -->
    <up-sticky>
      <view class="search-header">
        <!-- 左侧下拉框：替换为uView Plus的Select组件 -->
        <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>
    </up-sticky>

    <!-- 列表容器 -->
    <z-paging
        ref="paging"
        v-model="orderList"
        @query="queryList"
        :top="100"
        :bottom="120"
    >
      <template #empty>
        <empty-view/>
      </template>

      <!-- 修复：新增列表容器，配置顶部内边距 -->
      <view class="order-list">
        <view class="order-card" v-for="item in orderList" :key="item.orderNo">
          <view class="order-item up-line-1">工单编号：{{ item.orderNo }}</view>
          <view class="order-item up-line-1">工单位置：{{ item.roadName || '未填写' }}</view>
          <view class="order-item up-line-1">工单名称：{{ item.orderName || '未填写' }}</view>
          <view class="order-item up-line-1">情况描述：{{ item.remark || '无' }}</view>
          <view class="order-footer">
            <view class="submit-time up-line-1">提交时间：{{ timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
            <up-button
                type="primary"
                size="mini"
                @click="handleDetail(item)"
                :style="{ width: '80px', height: '28px', fontSize: '14px', borderRadius: 4 }"
            >
              工单详情
            </up-button>
          </view>
        </view>
      </view>
    </z-paging>

    <!-- 修复：补充底部按钮样式层级 -->
    <view class="fixed-bottom-btn-wrap">
      <up-button type="primary" size="large" @click="handleAddOrder">
        新增工单
      </up-button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { workorderPage } from "@/api/quick-order/quick-order";
import { timeFormat } from '@/uni_modules/uview-plus';
// ========== 修复1：声明所有核心响应式变量 ==========
// 顶部/底部高度（rpx）
// 排序相关：适配up-select的格式
const selectedSortValue = ref(1);
// 1 位置 2 工单名称 3 情况描述 4 工单编号
const sortOptions = ref([
  {name: '位置', id: 1},
  {name: '名称', id: 2},
  {name: '描述', id: 3},
  {name: '编号', id: 4},
]);
// 分页相关（核心：声明orderList）
const pageNo = ref(1);
const pageSize = ref(10);
const paging = ref(null);
const orderList = ref([]); // 修复：新增列表变量
// 搜索相关
const searchValue = ref('');
// ========== 修复3：适配z-paging回调参数 ==========
const queryList = async (pageNo, pageSize) => {
  try {
    // 修复：z-paging的query回调参数是对象 {pageNo, pageSize}
    const apiParams = {
      searchContent: searchValue.value.trim() || '',
      pageNo: pageNo,
      pageSize: pageSize,
      type: selectedSortValue.value //  1 位置 2 工单名称 3 情况描述 4 工单编号
    };
    console.log('请求参数：', apiParams);
    const res = await workorderPage(apiParams);
    console.log('接口返回：', res);
    paging.value.complete(res.list);
  } catch (error) {
    console.error('加载失败：', error);
    paging.value?.complete(false);
    uni.showToast({title: '加载失败，请重试', icon: 'none'});
  }
};
// ========== 其他方法补充 ==========
const handleSortChange = (val) => {
  console.log('排序变更：', val);
  searchValue.value = ''
  selectedSortValue.value = val.id; // 更新选中值
  paging.value?.reload(); // 排序后刷新列表
};
const handleSearch = (val) => {
  console.log('搜索内容：', val);
  searchValue.value = val;
  paging.value?.reload(); // 搜索后刷新列表
};
const handleDetail = (item) => {
  console.log('工单详情：', item);
  uni.navigateTo({
    url: `/pages-sub/daily/quick-order/order-detail?id=${item.id}`
  });
};
const handleAddOrder = () => {
  uni.navigateTo({
    url: '/pages-sub/daily/quick-order/add-order'
  });
};
</script>

<style scoped lang="scss">


// 顶部搜索栏
.search-header {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  box-sizing: border-box;

  // 下拉选择框容器
  .select-wrap {
    width: 80px;
    color: #333;
    margin-right: 20rpx;
    // 适配up-select样式
    :deep(.u-select) {
      width: 100%;
      font-size: 28rpx;
    }

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

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

// 修复：列表容器样式（核心）
.order-list {
  padding: 120rpx 20rpx 20rpx; // 顶部内边距避开搜索栏
  box-sizing: border-box;
}

// 工单卡片样式
.order-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .order-item {
    font-size: 28rpx;
    color: #333;
    line-height: 48rpx;
    margin-bottom: 8rpx;
  }

  .order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .submit-time {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 26rpx;
      color: #666;
    }

  }
}

</style>