Skip to content

M
mocp-uniapp
Commit aeade295 by pangchong
Options

feat: 新增右滑

parent 9a74632b
Showing with 91 additions and 94 deletions
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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment