refactor: 使用 table 进行列表显示

This commit is contained in:
lonewolfyx 2026-03-06 14:21:17 +08:00
parent c13c93afad
commit b14333bfd1

View File

@ -45,7 +45,33 @@
<button class="mini-btn" size="mini" type="primary" @click="handleSubmit">审核</button>
</view>
</MBCard>
<ListItem v-if="tableData.length > 0" :items="tableData" @checkboxSelected="handleSelect"/>
<uni-table
v-if="tableData.length > 0"
ref="table"
:loading="loading"
border
emptyText="暂无更多数据"
stripe
type="selection"
@selection-change="selectionChange"
>
<uni-tr>
<uni-th align="center" width="50">序号</uni-th>
<uni-th align="center">商业公司</uni-th>
<uni-th align="center">货主</uni-th>
<uni-th align="center">合同编号</uni-th>
<uni-th align="center">订单金额</uni-th>
</uni-tr>
<uni-tr v-for="(item, index) in tableData" :key="index">
<uni-td align="center">{{ index + 1 }}</uni-td>
<uni-td>{{ item.businessCompany }}</uni-td>
<uni-td align="center">{{ item.companyName }}</uni-td>
<uni-td>{{ item.contractcode }}</uni-td>
<uni-td>{{ item.contractmoney.toFixed(2) }}</uni-td>
</uni-tr>
</uni-table>
<!-- <ListItem v-if="tableData.length > 0" :items="tableData" @checkboxSelected="handleSelect"/>-->
<uni-load-more
v-else
:contentText="{
@ -69,13 +95,10 @@
import {getCurrentInstance, onMounted, ref} from "vue"
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 {managerConfirm, managerRefuse, 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()
@ -96,6 +119,8 @@ const tableData = ref([])
const submitLoading = ref(false)
const handleQuery = async () => {
selected.value = []
totalMoney.value = 0
loading.value = true
const data = await mangerList(queryParams.value, paging.value)
total.value = data.total
@ -105,24 +130,24 @@ const handleQuery = async () => {
const selected = ref([])
const totalMoney = ref(0)
const handleSelect = (payload) => {
const {checked, data} = payload
const id = data.saleid
if (checked) {
if (!selected.value.includes(id)) {
selected.value.push(id)
}
} else {
selected.value = selected.value.filter(item => item !== id)
}
totalMoney.value = tableData.value.filter(item => selected.value.includes(item.saleid))
.map(i => i.contractmoney)
.reduce((a, b) => a + b, 0)
?? 0
}
// const handleSelect = (payload) => {
// const {checked, data} = payload
// const id = data.saleid
//
// if (checked) {
// if (!selected.value.includes(id)) {
// selected.value.push(id)
// }
// } else {
// selected.value = selected.value.filter(item => item !== id)
// }
//
// totalMoney.value = tableData.value.filter(item => selected.value.includes(item.saleid))
// .map(i => i.contractmoney)
// .reduce((a, b) => a + b, 0)
// ?? 0
//
// }
onMounted(async () => {
await handleQuery()
@ -160,5 +185,13 @@ const handleSubmit = async () => {
await handleQuery()
submitLoading.value = false
}
const selectionChange = (payload) => {
const indexSet = new Set(payload.detail.index)
const filterData = tableData.value.filter((_, i) => indexSet.has(i))
selected.value = filterData.map(item => item.saleid)
totalMoney.value = filterData.map(item => item.contractmoney).reduce((a, b) => a + b, 0) ?? 0
}
</script>