bonus-material-app/src/pages/integratedQuery/settleAccountsRecord/index.vue

<template>
    <div class="container">
        <div>
            <uni-datetime-picker
                v-model="queryForm.dateRange"
                type="daterange"
                :end="new Date().toISOString().split('T')[0]"
                @change="changeDate"
            />
            <div style="display: flex; align-items: center; margin-top: 6px; margin-bottom: 10px">
                <uni-easyinput v-model="queryForm.keyWord" placeholder="请输入内容"></uni-easyinput>
                <button
                    size="mini"
                    @click="handleQuery"
                    style="margin: 0 5px; background: #f09937; color: #fff"
                >
                    查询
                </button>
            </div>
        </div>

        <!-- 列表 -->
        <div>
            <div v-for="(item, index) in listData" :key="item.id" @click="handleEdit(item)">
                <uni-card is-shadow is-full spacing="0px" style="margin-bottom: 6px">
                    <div style="display: flex; align-items: flex-start">
                        <div style="margin-right: 6px">{{ index + 1 }}.</div>
                        <div>
                            <div>申请时间：{{ item.createTime }}</div>
                            <div>申请人：{{ item.createBy }}</div>
                            <div>租赁单位：{{ item.unitName }}</div>
                            <div>租赁工程：{{ item.projectName }}</div>
                            <div>租赁费用(元)：{{ item.phone }}</div>
                            <div>维修费用(元)：{{ item.phone }}</div>
                            <div>丢失费用(元)：{{ item.phone }}</div>
                            <div>报废费用(元)：{{ item.phone }}</div>
                            <div>减免费用(元)：{{ item.phone }}</div>
                            <div>结算费用(元)：{{ item.phone }}</div>
                            <div>
                                状态：
                                <span v-if="item.status == '2'" class="text-color-success"
                                    >已结算</span
                                >
                            </div>
                        </div>
                    </div>
                </uni-card>
            </div>
            <div class="no-data">
                {{ listData && listData.length == 0 ? '暂无数据' : '没有更多数据了~' }}
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { getSltRecordQueryList } from '@/services/integratedQuery'

// 查询表单
const queryForm = reactive({
    dateRange: [
        new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
        new Date().toISOString().split('T')[0],
    ],
    keyWord: '',
})

const selectValue = ref(0) // 单选框选中的值

// 列表数据
const listData: any = ref([])

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

// 获取列表数据
const getList = async () => {
    try {
        const params = {
            startDate: queryForm.dateRange[0],
            endDate: queryForm.dateRange[1],
            keyWord: queryForm.keyWord,
        }
        console.log('🚀 ~ getList ~ params:', params)
        const res = await getSltRecordQueryList(params)
        console.log('🚀 ~ getList ~ res:', res)
        listData.value = res.data
    } catch (error) {
        console.log('🚀 ~ getList ~ error', error)
    }
}

// 日期选择
const changeDate = () => {
    console.log('changeDate', queryForm.dateRange)
}

// 查询
const handleQuery = () => {
    console.log('🚀 ~ handleQuery ~ :', queryForm)
    getList()
}

// 单选框
const changeCheckbox = () => {
    console.log('🚀 ~ changeCheckbox ~ :', selectValue.value)
    getList()
}

// 编辑
const handleEdit = (item) => {
    console.log('🚀 ~ handleEdit ~ :', item)
    if (item.taskStatus == '0') {
        const params = item
        uni.navigateTo({
            url:
                '/pages/integratedQuery/receiveRecord/receiveRecordEdit?params=' +
                JSON.stringify(params),
        })
    }
}
</script>

<style scoped lang="scss">
page {
    background-color: #f7f8fa;
}
.container {
    padding: 8px;
    // 长文本换行
    white-space: normal;
    word-break: break-all;

    .text-color {
        color: #f56c6c;
    }
    .text-color-success {
        color: #67c23a;
    }
}
.no-data {
    text-align: center;
    color: #999;
    padding: 10px 0;
}
</style>