feat: 列表多选

src/mocp/components/global-page-swiper-item/global-page-swiper-item.vue

 <template>
     <!-- 配合global-page-swiper实现左右滑动 -->
-    <view class="content">
+    <view class="mocp-content">
         <z-paging
             :auto="auto"
             :refresher-enabled="refresherEnabled"
@@ -171,6 +171,7 @@ const getDataList = computed({
     }
 })
 defineExpose({
+    getDataList,
     reload: () => {
         paging.value?.reload()
     },
@@ -179,10 +180,20 @@ defineExpose({
     }
 })
 </script>
-
-<style>
+<script>
+export default {
+    options: {
+        styleIsolation: 'shared'
+    }
+}
+</script>
+<style lang="scss" scoped>
 /* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
-.content {
+.mocp-content {
     height: 100%;
+    //多选框
+    :deep(.u-checkbox__icon-wrap) {
+        min-width: 18px;
+    }
 }
 </style>

src/mocp/components/global-page-swiper/global-page-swiper.vue

@@ -65,7 +65,16 @@
                     :transformData="transformData"
                 >
                     <template #="{ dataList }">
-                        <template v-for="(item, index) in dataList" :key="index">
+                        <up-checkbox-group v-model="chooseValue" v-if="chooseDataType == 'checkbox'">
+                            <template v-for="(item, index) in dataList" :key="index">
+                                <up-checkbox :name="index" v-if="chooseDataType == 'checkbox'">
+                                    <template #label>
+                                        <slot :item="item" :index="index"></slot>
+                                    </template>
+                                </up-checkbox>
+                            </template>
+                        </up-checkbox-group>
+                        <template v-for="(item, index) in dataList" :key="index" v-else>
                             <slot :item="item" :index="index"></slot>
                         </template>
                     </template>
@@ -85,11 +94,11 @@
 </template>
 
 <script setup>
-import { computed, nextTick, onUnmounted, ref } from 'vue'
+import { computed, nextTick, onUnmounted, ref, watch } from 'vue'
 
 // 获取屏幕边界到安全区域距离
 const { safeAreaInsets } = uni.getSystemInfoSync()
-const es = defineEmits(['handleLeftClick', 'handleRightClick', 'handleFooterClick'])
+const es = defineEmits(['handleLeftClick', 'handleRightClick', 'handleFooterClick', 'handleChooseData'])
 const ps = defineProps({
     background: {
         type: String,
@@ -213,6 +222,19 @@ const ps = defineProps({
         type: Boolean,
         default: true
     },
+    //选择数据的类型'checkbox' | 'radio'
+    chooseDataType: {
+        type: String,
+        default: ''
+    },
+    mapFieldName: {
+        type: String,
+        default: ''
+    },
+    mapFieldSplit: {
+        type: String,
+        default: ','
+    },
     //查询参数
     params: {
         type: Object,
@@ -284,6 +306,16 @@ const getStyle = computed(() => {
     }
     return style
 })
+//监听选择
+const chooseValue = ref([])
+watch(chooseValue, (value) => {
+    let data = value.map((index) => pagingArr.value[current.value]?.getDataList[index])
+    if (ps.mapFieldName) {
+        data = data.map((v) => v[ps.mapFieldName]).join(ps.mapFieldSplit)
+    }
+    console.log(data)
+    es('handleChooseData', data)
+})
 const current = ref(ps.current)
 // tabs通知swiper切换
 const tabsChange = (item) => {

src/mocp/components/global-page/global-page.vue

@@ -47,8 +47,19 @@
         </template>
         <!-- 滚动内容 -->
         <view class="mocp-content" :style="getStyle">
-            <template v-for="(item, index) in getDataList" :key="index" v-if="isDataList || localData">
-                <slot :item="item" :index="index"></slot>
+            <template v-if="isDataList || localData">
+                <up-checkbox-group v-model="chooseValue" v-if="chooseDataType == 'checkbox'">
+                    <template v-for="(item, index) in getDataList" :key="index">
+                        <up-checkbox :name="index" v-if="chooseDataType == 'checkbox'">
+                            <template #label>
+                                <slot :item="item" :index="index"></slot>
+                            </template>
+                        </up-checkbox>
+                    </template>
+                </up-checkbox-group>
+                <template v-for="(item, index) in getDataList" :key="index" v-else>
+                    <slot :item="item" :index="index"></slot>
+                </template>
             </template>
             <slot v-else></slot>
         </view>
@@ -65,10 +76,10 @@
 </template>
 <script setup>
 import { filterEmptyValues } from 'mocp/utils/tool'
-import { computed, nextTick, onUnmounted, ref } from 'vue'
+import { computed, nextTick, onUnmounted, ref, watch } from 'vue'
 
 const dataList = ref([])
-const es = defineEmits(['query', 'handleLeftClick', 'handleRightClick', 'handleFooterClick'])
+const es = defineEmits(['query', 'handleLeftClick', 'handleRightClick', 'handleFooterClick', 'handleChooseData'])
 const paging = ref()
 const ps = defineProps({
     background: {
@@ -183,6 +194,19 @@ const ps = defineProps({
         type: Boolean,
         default: false
     },
+    //选择数据的类型'checkbox' | 'radio'
+    chooseDataType: {
+        type: String,
+        default: ''
+    },
+    mapFieldName: {
+        type: String,
+        default: ''
+    },
+    mapFieldSplit: {
+        type: String,
+        default: ','
+    },
     //查询参数
     params: {
         type: Object,
@@ -267,6 +291,15 @@ const scroll = () => {
     }, 500)
     // #endif
 }
+//监听选择
+const chooseValue = ref([])
+watch(chooseValue, (value) => {
+    let data = value.map((index) => getDataList.value[index])
+    if (ps.mapFieldName) {
+        data = data.map((v) => v[ps.mapFieldName]).join(ps.mapFieldSplit)
+    }
+    es('handleChooseData', data)
+})
 // 获取屏幕边界到安全区域距离
 const { safeAreaInsets } = uni.getSystemInfoSync()
 //列表加载
@@ -391,6 +424,10 @@ export default {
             }
         }
     }
+    //多选框
+    :deep(.u-checkbox__icon-wrap) {
+        min-width: 18px;
+    }
 }
 
 .cancel {

src/pages/modules/mocp/panel/my-toDo/components/appraisal-record-list.vue

@@ -12,7 +12,7 @@
             auto
         >
             <template #default="{ item }">
-                <view v-for="item in dataList" :key="item.id" class="item" @tap="goDetails(item)">
+                <view class="item" @tap="goDetails(item)">
                     <view class="item-title">
                         <view class="desc">
                             <custom-state :value="item.status == 1 ? 'OPEN' : 'CLOSE'"></custom-state>