feat: 新增右滑

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

@@ -65,6 +65,18 @@
                         </up-checkbox>
                     </template>
                 </up-checkbox-group>
+                <up-swipe-action v-else-if="getShowActions">
+                    <template v-for="(item, index) in dataList" :key="index">
+                        <up-swipe-action-item
+                            closeOnClick
+                            :threshold="50"
+                            @click="(action) => handleAction(action, item, index)"
+                            :options="getActionOptions"
+                        >
+                            <slot :item="item" :index="index"></slot>
+                        </up-swipe-action-item>
+                    </template>
+                </up-swipe-action>
                 <template v-for="(item, index) in dataList" :key="index" v-else>
                     <slot :item="item" :index="index"></slot>
                 </template>
@@ -80,14 +92,24 @@
         </template>
         <!-- 消息提醒 -->
         <up-toast ref="uToastRef"></up-toast>
+        <up-modal
+            :width="250"
+            content="确认删除吗？"
+            :show="showConfirm"
+            showCancelButton
+            closeOnClickOverlay
+            @confirm="handleConfirm"
+            @cancel="showConfirm = false"
+            @close="showConfirm = false"
+        ></up-modal>
     </z-paging>
 </template>
 <script setup>
 import { filterEmptyValues } from 'mocp/utils/tool'
-import { computed, nextTick, onUnmounted, ref, watch } from 'vue'
+import { computed, nextTick, onUnmounted, reactive, ref, watch } from 'vue'
 
 const dataList = ref([])
-const es = defineEmits(['handleQuery', 'handleLeftClick', 'handleRightClick', 'handleFooterClick', 'handleChooseData'])
+const es = defineEmits(['handleQuery', 'handleLeftClick', 'handleRightClick', 'handleFooterClick', 'handleChooseData', 'handleDelete'])
 const paging = ref()
 const ps = defineProps({
     showEmpty: {
@@ -276,8 +298,46 @@ const ps = defineProps({
     pageSize: {
         type: Number,
         default: 10
+    },
+    //右滑操作菜单
+    showDelete: {
+        type: Boolean,
+        default: false
     }
 })
+//右滑动操作菜单
+const showConfirm = ref(false)
+const actionItem = reactive({
+    item: null,
+    index: null
+})
+const getShowActions = computed(() => {
+    return ps.showDelete
+})
+const handleConfirm = () => {
+    showConfirm.value = false
+    es('handleDelete', actionItem.item, actionItem.index)
+}
+const handleAction = (action, item, index) => {
+    if (getActionOptions.value[action['index']].name == 'delete') {
+        showConfirm.value = true
+        actionItem.item = item
+        actionItem.index = index
+    }
+}
+const getActionOptions = computed(() => {
+    const actions = []
+    if (ps.showDelete) {
+        actions.push({
+            text: '移除',
+            name: 'delete',
+            style: {
+                backgroundColor: '#f53f3f'
+            }
+        })
+    }
+    return actions
+})
 // z-page样式
 const getPagingStyle = computed(() => {
     return {
@@ -387,6 +447,7 @@ const openToast = (params) => {
         uToastRef.value?.show(params)
     })
 }
+
 uni.$on('useMessage', (params) => openToast(params))
 onUnmounted(() => {
     uni.$off('useMessage', openToast)
@@ -447,6 +508,20 @@ export default {
     :deep(.u-checkbox__icon-wrap) {
         min-width: 18px;
     }
+    //右滑动菜单
+    :deep(.u-swipe-action-item):has(.item) {
+        border-radius: 12rpx;
+        margin-bottom: 16rpx;
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+    :deep(.u-swipe-action-item__right) {
+        top: 1px;
+        bottom: 1px;
+        right: 1px;
+        border-radius: 0 12rpx 12rpx 0;
+    }
 }
 .cancel {
     font-size: 28rpx;

src/pages/modules/mocp/panel/my-toDo/components/WindDamageManagement.vue

@@ -19,19 +19,6 @@
         >
             <template #default="{ item }">
                 <template v-for="option in item.basicInfoList" :key="option.id">
-                    <up-swipe-action>
-                        <up-swipe-action-item
-                            @click="handleDelete(item)"
-                            :options="[
-                                {
-                                    text: '移除',
-                                    style: {
-                                        backgroundColor: '#f53f3f'
-                                    }
-                                }
-                            ]"
-                        ></up-swipe-action-item>
-                    </up-swipe-action>
                     <view class="item" @tap="goDetails(item, option)">
                         <view class="item-title">
                             <view class="left">
@@ -129,10 +116,6 @@ const goDetails = (data, option) => {
     windDamageManagementStore.setState('weatherSource', data.weatherSource)
     uni.$mocpJump.navigateTo(taskList[option.taskType].url)
 }
-//删除
-const handleDelete = (data) => {
-    console.log(data)
-}
 const handleQuery = ({ res }) => {
     myToDoStore.setState('windDamageManagementNum', myToDoStore.countWindDamageManagementNum(res.data))
 }

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

@@ -16,19 +16,6 @@
             auto
         >
             <template #default="{ item }">
-                <up-swipe-action>
-                    <up-swipe-action-item
-                        @click="handleDelete(item)"
-                        :options="[
-                            {
-                                text: '移除',
-                                style: {
-                                    backgroundColor: '#f53f3f'
-                                }
-                            }
-                        ]"
-                    ></up-swipe-action-item>
-                </up-swipe-action>
                 <view class="item" @tap="goDetails(item)">
                     <view class="item-title">
                         <view class="desc">
@@ -68,10 +55,6 @@ const goDetails = (data) => {
         id: data.id
     })
 }
-//删除
-const handleDelete = (data) => {
-    console.log(data)
-}
 const handleQuery = ({ res }) => {
     myToDoStore.setState('appraisalRecordNum', parseInt(res.total) || 0)
 }

src/pages/modules/mocp/panel/my-toDo/components/assign-work-list.vue

@@ -16,19 +16,6 @@
             auto
         >
             <template #default="{ item }">
-                <up-swipe-action>
-                    <up-swipe-action-item
-                        @click="handleDelete(item)"
-                        :options="[
-                            {
-                                text: '移除',
-                                style: {
-                                    backgroundColor: '#f53f3f'
-                                }
-                            }
-                        ]"
-                    ></up-swipe-action-item>
-                </up-swipe-action>
                 <view class="item" @tap="goDetails(item)">
                     <view class="item-title">
                         <view class="left">
@@ -80,10 +67,6 @@ const ps = defineProps({
 const goDetails = (data) => {
     uni.$mocpJump.navigateTo('/panel/assign-work/details', { id: data.id })
 }
-//删除
-const handleDelete = (data) => {
-    console.log(data)
-}
 const handleQuery = ({ res }) => {
     myToDoStore.setState('assignWorkNum', parseInt(res.data.total) || 0)
 }

src/pages/modules/mocp/panel/my-toDo/components/move-decision-list.vue

@@ -13,19 +13,6 @@
             auto
         >
             <template #default="{ item }">
-                <up-swipe-action>
-                    <up-swipe-action-item
-                        @click="handleDelete(item)"
-                        :options="[
-                            {
-                                text: '移除',
-                                style: {
-                                    backgroundColor: '#f53f3f'
-                                }
-                            }
-                        ]"
-                    ></up-swipe-action-item>
-                </up-swipe-action>
                 <view class="item" @tap="goDetails(item)">
                     <view class="item-title">
                         <view class="left">
@@ -76,10 +63,6 @@ const goDetails = (data) => {
         moveDecisionStore.setState('details', data)
     })
 }
-//删除
-const handleDelete = (data) => {
-    console.log(data)
-}
 const handleQuery = ({ res }) => {
     myToDoStore.setState('moveDecisionNum', parseInt(res.data.total) || 0)
 }

src/pages/modules/mocp/panel/my-toDo/components/technology-evaluation-list.vue

@@ -13,19 +13,6 @@
             auto
         >
             <template #default="{ item }">
-                <up-swipe-action>
-                    <up-swipe-action-item
-                        @click="handleDelete(item)"
-                        :options="[
-                            {
-                                text: '移除',
-                                style: {
-                                    backgroundColor: '#f53f3f'
-                                }
-                            }
-                        ]"
-                    ></up-swipe-action-item>
-                </up-swipe-action>
                 <view class="item" @tap="goDetails(item)">
                     <view class="item-title">
                         <view class="left">
@@ -82,10 +69,6 @@ const goDetails = (data) => {
         technologyEvaluationStore.setState('details', data)
     })
 }
-//删除
-const handleDelete = (data) => {
-    console.log(data)
-}
 const handleQuery = ({ res }) => {
     myToDoStore.setState('technologyEvaluationNum', parseInt(res.data.total) || 0)
 }

src/pages/modules/mocp/panel/my-toDo/index.vue

@@ -49,17 +49,11 @@ const confirm = () => {
 }
 </script>
 <style lang="scss">
-.item {
-    margin-bottom: 0;
-}
 .u-swipe-action {
     margin-bottom: 16rpx;
 }
 </style>
 <style lang="scss" scoped>
-.item:last-child {
-    margin-bottom: 0;
-}
 :deep(.u-collapse-item) {
     margin-bottom: 16rpx;
     .u-cell__body {

src/static/mocp/css/list.scss

+:deep(.u-swipe-action-item) {
+    border-radius: 12rpx;
+    margin-bottom: 16rpx;
+    &:last-child {
+        margin-bottom: 0;
+    }
+    .item {
+        margin-bottom: 0;
+    }
+}
 .item {
     padding: 24rpx;
-    margin-bottom: 16rpx;
     border-radius: 12rpx;
     background: linear-gradient(#e6eeff, #ffffff, #ffffff);
+    margin-bottom: 16rpx;
+    &:last-child {
+        margin-bottom: 0;
+    }
     &-title {
         display: flex;
         align-items: center;