zgty-mas-m/pages/app/democontract/index.vue

<template>
  <view class="app-container">
    <!-- 搜索工作栏 -->
    <view class="search-section">
      <u-search
        placeholder="请输入合同名称"
        v-model="queryParams.name"
        :show-action="true"
        action-text="搜索"
        @custom="handleQuery"
        @search="handleQuery"
      ></u-search>
      
      <!-- 高级搜索 -->
      <view class="advanced-search" v-if="showAdvanced">
        <u-form :model="queryParams" label-width="120rpx">
          <u-form-item label="合同编号">
            <u-input v-model="queryParams.code" placeholder="请输入合同编号" />
          </u-form-item>
          <u-form-item label="合同金额">
            <u-input v-model="queryParams.amount" placeholder="请输入合同金额" type="number" />
          </u-form-item>
        </u-form>
      </view>
      
      <view class="search-toggle">
        <u-button type="info" size="small" @click="showAdvanced = !showAdvanced">
          {{ showAdvanced ? '收起' : '高级搜索' }}
        </u-button>
      </view>
    </view>

    <!-- 操作工具栏 -->
    <view class="action-bar">
      <u-button type="primary" icon="plus" text="新增" @click="openForm('create')"></u-button>
    </view>

    <!-- 列表 -->
    <u-list @scrolltolower="scrolltolower">
      <u-list-item v-for="item in list" :key="item.id">
        <u-cell :title="item.name" :label="item.code">
          <template #value>
            <view class="item-info">
              <text class="info-text">状态: {{ getStatusText(item.status) }}</text>
              <text class="info-text">金额: ¥{{ item.amount || 0 }}</text>
              <text class="info-text" v-if="item.signDate">签订: {{ sheep.$helper.timeFormat(item.signDate, 'yyyy-mm-dd') }}</text>
            </view>
          </template>
          <template #right-icon>
            <view class="action-buttons">
              <u-button type="primary" size="mini" @click="openForm('update', item.id)">编辑</u-button>
              <u-button type="error" size="mini" @click="handleDelete(item.id)">删除</u-button>
            </view>
          </template>
        </u-cell>
      </u-list-item>
      <u-loadmore :status="status" />
    </u-list>
  </view>
</template>

<script setup>
import sheep from '@/sheep'
import { ref, reactive, onMounted } from 'vue'
import DemoContractApi from '@/sheep/api/infra/democontract'
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'

const loading = ref(false)
const total = ref(0)
const list = ref([])
const showAdvanced = ref(false)
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  code: '',
  name: '',
  status: '',
  signDate: [],
  startDate: [],
  endDate: [],
  amount: '',
  remark: '',
  postId: ''
})
const status = ref('loadmore')

const getList = async () => {
  loading.value = true
  status.value = 'loading'
  try {
    const { data } = await DemoContractApi.getDemoContractPage(queryParams)
    if (queryParams.pageNo === 1) {
      list.value = data.list
    } else {
      list.value = list.value.concat(data.list)
    }
    total.value = data.total
    if (list.value.length >= total.value) {
      status.value = 'nomore'
    } else {
      status.value = 'loadmore'
    }
  } finally {
    loading.value = false
    uni.stopPullDownRefresh()
  }
}

const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

const openForm = (type, id) => {
  let url = `/pages/app/democontract/form?type=${type}`
  if (id) {
    url += `&id=${id}`
  }
  uni.navigateTo({ url })
}

const handleDelete = async (id) => {
  const [err, res] = await uni.showModal({
    title: '提示',
    content: '确定要删除吗？'
  })
  if (res && res.confirm) {
    await DemoContractApi.deleteDemoContract(id)
    uni.showToast({ title: '删除成功' })
    handleQuery() // 重新加载列表
  }
}

const getStatusText = (status) => {
  // 根据实际状态值进行映射，这里需要根据字典或枚举值调整
  const statusMap = {
    0: '草稿',
    1: '审核中',
    2: '已通过',
    3: '已拒绝'
  }
  return statusMap[status] || '未知'
}

const scrolltolower = () => {
  if (status.value === 'loadmore') {
    queryParams.pageNo++
    getList()
  }
}

onMounted(() => {
  getList()
})

onPullDownRefresh(() => {
  handleQuery()
})

onReachBottom(() => {
  scrolltolower()
})
</script>

<style lang="scss" scoped>
.search-wrap {
  padding: 20rpx;
  background: #fff;
}
.action-bar {
  padding: 20rpx;
}
.list-wrap {
  .list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    background: #fff;
    border-bottom: 1rpx solid #eee;
  }
  .item-title {
    font-size: 30rpx;
    font-weight: bold;
  }
  .item-desc {
    font-size: 26rpx;
    color: #999;
    margin-top: 10rpx;
  }
}
</style>