Otsuka-APP/pages/work/BusinessApproval/index.vue

<template>
    <view class="container">
        <MBCard>
            <uni-forms ref="baseForm" :modelValue="queryParams">
                <uni-forms-item label="支付方式">
                    <DictSelect v-model="queryParams.isPayNow" dict="dazhong_paytype" @change="handleQuery"/>
                </uni-forms-item>
                <uni-forms-item label="生产单位">
                    <ProductionUnit v-model="queryParams.companyId" @change="handleQuery"/>
                </uni-forms-item>
            </uni-forms>
        </MBCard>

        <MBLoading v-if="loading"/>
        <view v-else>
            <ListItem :items="tableData"/>
            <MBPagination
                v-if="total > 0"
                v-model:limit="paging.pageSize"
                v-model:page="paging.pageNum"
                :total="total"
                @pagination="handleQuery"
            />
        </view>
        <!--        <uni-card-->
        <!--            v-for="(contract, index) in filteredContracts"-->
        <!--            :key="contract.saleid"-->
        <!--            :class="index % 2 === 0 ? 'card-even' : 'card-odd'"-->
        <!--            :title="contract.usernames"-->
        <!--            @click="gotoDetail(contract)"-->
        <!--        >-->
        <!--            <uni-row class="demo-uni-row">-->
        <!--                <uni-col :span="12">-->
        <!--                    <view class="demo-uni-col dark">生产单位: {{ contract.companyName }}</view>-->
        <!--                </uni-col>-->
        <!--                <uni-col :span="12">-->
        <!--                    <view class="demo-uni-col light">合同编号: {{ contract.contractcode }}</view>-->
        <!--                </uni-col>-->
        <!--            </uni-row>-->
        <!--            <uni-row class="demo-uni-row">-->
        <!--                <uni-col :span="12">-->
        <!--                    <view class="demo-uni-col dark">制单日期: {{ formatDate(contract.adddate) }}</view>-->
        <!--                </uni-col>-->
        <!--                <uni-col :span="12">-->
        <!--                    <view class="demo-uni-col light">订单金额: {{ contract.contractmoney.toFixed(2) }}</view>-->
        <!--                </uni-col>-->
        <!--            </uni-row>-->
        <!--            <uni-row class="demo-uni-row">-->
        <!--                <uni-col :span="12">-->
        <!--                    <view class="demo-uni-col dark">状态: {{ contract.stateText }}</view>-->
        <!--                </uni-col>-->
        <!--                <uni-col :span="12">-->
        <!--                    <view class="demo-uni-col light">区域: {{ contract.areaName }}</view>-->
        <!--                </uni-col>-->
        <!--            </uni-row>-->
        <!--        </uni-card>-->
        <!--        </view>-->
    </view>
</template>

<script setup>

import {computed, getCurrentInstance, onMounted, ref} from "vue"
import {contractData} from "./data.js"
import UniForms from "../../../uni_modules/uni-forms/components/uni-forms/uni-forms.vue";
import UniFormsItem from "../../../uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue";
import DictSelect from "../../../components/DictSelect/DictSelect.vue";
import ProductionUnit from "../../../components/ProductionUnit/ProductionUnit.vue";
import MBCard from "../../../components/MB/MBCard.vue";
import {mangerList} from "../../../api/BusinessApproval";
import MBPagination from "../../../components/MB/MBPagination.vue";
import MBLoading from "../../../components/MB/MBLoading.vue";
import ListItem from "./ListItem.vue";

const {proxy} = getCurrentInstance()


const queryParams = ref({
    state: '1',
    isPayNow: '',
    companyId: ''
})
const loading = ref(true)
const total = ref(0)
const paging = ref({
    pageNum: 1,
    pageSize: 10,
    isAsc: 'descending',
    orderByColumn: 'adddate'
})
const tableData = ref([])

const handleQuery = async () => {
    loading.value = true
    const data = await mangerList(queryParams.value, paging.value)
    total.value = data.total
    tableData.value = data.rows
    loading.value = false
}

onMounted(async () => {
    await handleQuery()
})


// ===========================================================================================

// 表单数据
const baseFormData = ref({})
const paymentValue = ref('')
const companyValue = ref(0)

// 筛选选项
const paymentOptions = ref([
    {value: 0, text: "全部支付方式"},
    {value: 1, text: "账期支付"},
    {value: 2, text: "预付款"}
])

const companyOptions = ref([
    {value: 0, text: "全部生产单位"},
    {value: 1, text: "浙江大冢制药有限公司"},
    {value: 2, text: "广东大冢制药有限公司"}
])

// 合同数据
const contracts = ref([])

// 过滤后的合同数据
const filteredContracts = computed(() => {
    let result = contracts.value

    // 根据生产单位筛选
    if (companyValue.value === 1) {
        result = result.filter(contract => contract.companyName.includes('浙江'))
    } else if (companyValue.value === 2) {
        result = result.filter(contract => contract.companyName.includes('广东'))
    }

    // 可以根据支付方式添加更多筛选逻辑

    return result
})

// 初始化数据
onMounted(() => {
    contracts.value = contractData.rows
})

// 格式化日期
function formatDate(dateString) {
    if (!dateString) return '未知日期'
    return dateString.split(' ')[0]
}

// 筛选合同
function filterContracts(e) {
    console.log("筛选条件变化:", e)
    // 计算属性会自动更新，无需额外操作
}

// 跳转到详情页
function gotoDetail(contract) {
    console.log("查看合同详情:", contract)
    // proxy.$tab.navigateTo('/pages/work/yonghu/detail')
    // proxy.$tab.navigateTo(`/pages/work/yonghu/detail?saleid=${contract.saleid}`)
    proxy.$tab.navigateTo('/pages/work/BusinessApproval/OrderDetail')
}
</script>

<style lang="scss" scoped>
.container {
    padding: 10px;
    background-color: #f5f7fa;
    min-height: 100vh;
}

.example {
    padding: 10px;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

:deep(.uni-section .uni-section-header) {
    padding: 0;
}

:deep(.uni-card) {
    padding: 0 !important;
    margin: 10px 0 !important;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

:deep(.uni-card__content) {
    padding: 12px !important;
}

.demo-uni-row {
    padding: 5px 0;
    font-size: 14px;
}

.demo-uni-col {
    padding: 2px 0;

    &.dark {
        color: #333;
        font-weight: 500;
    }

    &.light {
        color: #666;
    }
}

.card-even {
    border-left: 4px solid #2979ff;
}

.card-odd {
    border-left: 4px solid #19be6b;
}

.no-data {
    text-align: center;
    padding: 40px 0;
    color: #999;
    font-size: 16px;
}
</style>