refactor: 使用 table 进行列表显示
This commit is contained in:
parent
c13c93afad
commit
b14333bfd1
@ -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>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user