JCSS / jcss-miniprogram

  <template>

    <view class="page-container">

      <!-- 顶部固定搜索栏 -->
      <up-sticky>
        <view class="search-header">

          <!-- 左侧下拉框：替换为uView Plus的Select组件 -->

          <view class="select-wrap common-text-color">

            <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"

          :auto-show-system-loading="true"

      >

        <template #empty>
          <empty-view/>
        </template>
  

        <view class="common-card-list" style=" padding-top: 100rpx;">
          <up-card
              :border="false"
              :foot-border-top="false"
              v-for="(item,index) in orderList"
              :key="`${item.orderNo}_${index}`"
              :show-head="false"
          >
  
            <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.lonLatAddress || '-' }}</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-item-center common-justify-between">
                  <view class="u-body-item-title u-body-value">提交时间：{{ timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
                  <view class="">
                    <up-button
                        type="primary"
                        size="mini"
                        @click="handleDetail(item)"
  
                    >
                      工单详情
                    </up-button>
                  </view>
  
                </view>
              </view>
            </template>
          </up-card>

        </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 } from 'vue';

  import { workorderPage } from "@/api/quick-order/quick-order";
  import { timeFormat } from '@/uni_modules/uview-plus';

  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 paging = ref(null);
  const orderList = ref([]); // 修复：新增列表变量
  // 搜索相关
  const searchValue = ref('');

  // ========== 适配z-paging回调参数 ==========

  const queryList = async (pageNo, pageSize) => {

    try {

      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: 60px;

      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;

    }
  }
  

  
  </style>