列表选择

src/views/form/business-model/index.vue

@@ -11,7 +11,7 @@
           <CzrButton type="import" title="Excel导入" />
           <CzrButton type="import" title="文本导入" />
           <CzrButton type="add" title="新增" @click="onAdd" />
-          <CzrButton type="del" title="清空已选" />
+          <CzrButton type="del" title="清空全部" @click="onClear" />
         </div>
       </template>
       <template #fieldOut>
@@ -38,27 +38,35 @@
         <CzrTable
           v-loading="state.query.loading"
           ref="ref_cusTable"
-          :data="state.query.result.data"
+          :data="tableDataCpt"
           :head="state.query.head"
-          :total="state.query.result.total"
+          :total="state.allSelected.size"
           :page="state.query.page.pageNum"
           :pageSize="state.query.page.pageSize"
           @handlePage="onPage"
         >
           <template #caozuo-column-value="{ scope }">
             <div class="__czr-table-operations">
-              <CzrButton type="table" title="归档" />
+              <CzrButton
+                type="table-del"
+                @click="state.allSelected.delete(scope.row.id)"
+              />
             </div>
           </template>
         </CzrTable>
       </template>
     </CzrContent>
-    <listCom v-model:show="state.list.show" :transfer="state.list.transfer" />
+    <listCom
+      v-model:show="state.list.show"
+      :transfer="state.list.transfer"
+      @refresh="onGetList"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import {
+  computed,
   getCurrentInstance,
   onBeforeMount,
   onMounted,
@@ -66,6 +74,7 @@ import {
   ref,
 } from 'vue'
 import listCom from './list.vue'
+import { ElMessageBox } from 'element-plus'
 
 const emit = defineEmits([])
 const props = defineProps({})
@@ -96,8 +105,8 @@ const state: any = reactive({
       total: 0,
       data: [],
     },
-    selected: [],
   },
+  allSelected: new Map(),
   list: {
     show: false,
     transfer: {},
@@ -106,50 +115,24 @@ const state: any = reactive({
     formItem: null,
   },
 })
-const onPage = (pageNum, pageSize) => {
-  state.query.page = {
-    pageNum: pageNum,
-    pageSize: pageSize,
-  }
-  const params = {
-    pageNum: state.query.page.pageNum,
-    pageSize: state.query.page.pageSize,
-  }
+const tableDataCpt = computed(() => {
+  let arr = [...Array.from(state.allSelected.values())]
   //  添加表单参数
   for (const [k, v] of Object.entries(state.query.formReal)) {
     if (proxy.$czrUtil.isValue(v)) {
-      params[k] = v
+      arr = arr.filter((d: any) => d[k].includes(v))
     }
   }
-  state.query.loading = true
-  setTimeout(() => {
-    state.query.result.total = 100
-    const arr: any = []
-    for (let i = 1; i <= params.pageSize; i++) {
-      // const n = (params.pageNum - 1) * params.pageSize + i
-      // arr.push({
-      //   id: i + '',
-      //   p1: '文件' + n + '.md',
-      // })
-    }
-    state.query.result.data = arr
-    // setTimeout(() => {
-    //   state.query.selected = [arr[1], arr[5]]
-    // })
-    state.query.loading = false
-  }, 1000)
-  // state.query.loading = true
-  // listRuleLogisticsDataSubscribeInfo(params).then(res => {
-  //   if (res.code == 200) {
-  //     state.query.result.total = res.total
-  //     state.query.result.data = res.rows
-  //     state.query.loading = false
-  //   } else {
-  //     ElMessage.error(res.msg)
-  //   }
-  // }).catch(() => {
-  //   state.query.loading = false
-  // })
+  return arr.slice(
+    (state.query.page.pageNum - 1) * state.query.page.pageSize,
+    state.query.page.pageNum * state.query.page.pageSize,
+  )
+})
+const onPage = (pageNum, pageSize) => {
+  state.query.page = {
+    pageNum: pageNum,
+    pageSize: pageSize,
+  }
 }
 const onSearch = () => {
   state.query.formReal = JSON.parse(JSON.stringify(state.query.form))
@@ -164,15 +147,19 @@ const onReset = () => {
   onSearch()
 }
 const onAdd = () => {
-  const map = new Map()
-  state.query.selected.forEach((v) => {
-    map.set(v.id, v)
-  })
   state.list.transfer = {
-    selectedMap: map,
+    allSelected: state.allSelected,
   }
   state.list.show = true
 }
+const onGetList = (map) => {
+  state.allSelected = new Map(map)
+}
+const onClear = () => {
+  ElMessageBox.confirm('请确认是否清空全部数据？', '提示').then(() => {
+    state.allSelected.clear()
+  })
+}
 onBeforeMount(() => {
   // ⼆级⻚⾯需要通过监听 getFormIframeData 事件，获取表单中⼼⼀级⻚⾯传递过来的数据。
   // formItem 表单项配置数据，该数据在⼆级⻚⾯回传数据给⼀级⻚⾯时需要原封不动传回 Object