refactor: 使用 table 进行列表显示

pages/work/BusinessApproval/index.vue

@@ -5,9 +5,9 @@
     <view ref="targetRef" class="container">
         <MBCard>
             <uni-forms ref="baseForm" :modelValue="queryParams">
-<!--                <uni-forms-item label="支付方式">-->
+                <!--                <uni-forms-item label="支付方式">-->
-<!--                    <DictSelect v-model="queryParams.isPayNow" dict="dazhong_paytype" @change="handleQuery"/>-->
+                <!--                    <DictSelect v-model="queryParams.isPayNow" dict="dazhong_paytype" @change="handleQuery"/>-->
-<!--                </uni-forms-item>-->
+                <!--                </uni-forms-item>-->
                 <uni-forms-item label="货主">
                     <ProductionUnit v-model="queryParams.companyId" @change="handleQuery"/>
                 </uni-forms-item>
@@ -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="{
@@ -53,13 +79,13 @@
                 }"
                 :status="'no-more'"
             />
-<!--            <MBPagination-->
+            <!--            <MBPagination-->
-<!--                v-if="total > 0"-->
+            <!--                v-if="total > 0"-->
-<!--                v-model:limit="paging.pageSize"-->
+            <!--                v-model:limit="paging.pageSize"-->
-<!--                v-model:page="paging.pageNum"-->
+            <!--                v-model:page="paging.pageNum"-->
-<!--                :total="total"-->
+            <!--                :total="total"-->
-<!--                @pagination="handleQuery"-->
+            <!--                @pagination="handleQuery"-->
-<!--            />-->
+            <!--            />-->
         </view>
     </view>
 </template>
@@ -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 handleSelect = (payload) => {
-    const {checked, data} = payload
+//     const {checked, data} = payload
-    const id = data.saleid
+//     const id = data.saleid
-
+//
-    if (checked) {
+//     if (checked) {
-        if (!selected.value.includes(id)) {
+//         if (!selected.value.includes(id)) {
-            selected.value.push(id)
+//             selected.value.push(id)
-        }
+//         }
-    } else {
+//     } else {
-        selected.value = selected.value.filter(item => item !== id)
+//         selected.value = selected.value.filter(item => item !== id)
-    }
+//     }
-
+//
-    totalMoney.value = tableData.value.filter(item => selected.value.includes(item.saleid))
+//     totalMoney.value = tableData.value.filter(item => selected.value.includes(item.saleid))
-            .map(i => i.contractmoney)
+//             .map(i => i.contractmoney)
-            .reduce((a, b) => a + b, 0)
+//             .reduce((a, b) => a + b, 0)
-        ?? 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>