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>