Skip to content

W
wangxiaolu-sfa-ui
提交 a50fd001 authored 作者: lidongxu's avatar lidongxu
浏览文件
操作

feat(promotion): 促销计划下属任务删除功能_集成 eventBus 功能

同上
上级 d22dd92c
隐藏空白字符变更
内嵌 并排
正在显示 包含 236 行增加 和 140 行删除
package.json
浏览文件 @ a50fd001
...@@ -31,6 +31,7 @@ ...@@ -31,6 +31,7 @@
"js-cookie": "3.0.5", "js-cookie": "3.0.5",
"jsencrypt": "3.3.2", "jsencrypt": "3.3.2",
"lib-flexible": "^0.3.2", "lib-flexible": "^0.3.2",
"mitt": "^3.0.1",
"nprogress": "0.2.0", "nprogress": "0.2.0",
"pinia": "2.1.7", "pinia": "2.1.7",
"splitpanes": "3.1.5", "splitpanes": "3.1.5",
......
src/main.js
浏览文件 @ a50fd001
...@@ -16,11 +16,13 @@ import '@/assets/styles/index.scss' ...@@ -16,11 +16,13 @@ import '@/assets/styles/index.scss'
/****************** 插件 ******************/ /****************** 插件 ******************/
import Cookies from 'js-cookie' import Cookies from 'js-cookie'
import 'virtual:svg-icons-register' // svg 图标 import 'virtual:svg-icons-register' // svg 图标
import { download } from '@/utils/request'
import SvgIcon from '@/components/SvgIcon' import SvgIcon from '@/components/SvgIcon'
import elementIcons from '@/components/SvgIcon/svgicon' import elementIcons from '@/components/SvgIcon/svgicon'
import { useDict } from '@/utils/dict'
import { parseTime, resetForm, addDateRange, handleTree, selectDictLabel, selectDictLabels, isMobile } from '@/utils' import { parseTime, resetForm, addDateRange, handleTree, selectDictLabel, selectDictLabels, isMobile } from '@/utils'
import { download } from '@/utils/request'
import { useDict } from '@/utils/dict'
import eventBus from '@/utils/eventBus'
/****************** 移动端 ******************/ /****************** 移动端 ******************/
import registerMobile from "@/mobile/main.js" import registerMobile from "@/mobile/main.js"
...@@ -63,7 +65,7 @@ const app = createApp(App) ...@@ -63,7 +65,7 @@ const app = createApp(App)
// 注册移动端内容 // 注册移动端内容
registerMobile(app) registerMobile(app)
// 全局方法 // 全局方法属性
app.config.globalProperties.useDict = useDict app.config.globalProperties.useDict = useDict
app.config.globalProperties.download = download app.config.globalProperties.download = download
app.config.globalProperties.parseTime = parseTime app.config.globalProperties.parseTime = parseTime
...@@ -73,6 +75,7 @@ app.config.globalProperties.addDateRange = addDateRange ...@@ -73,6 +75,7 @@ app.config.globalProperties.addDateRange = addDateRange
app.config.globalProperties.selectDictLabel = selectDictLabel app.config.globalProperties.selectDictLabel = selectDictLabel
app.config.globalProperties.selectDictLabels = selectDictLabels app.config.globalProperties.selectDictLabels = selectDictLabels
app.config.globalProperties.isMobile = isMobile app.config.globalProperties.isMobile = isMobile
app.config.globalProperties.eventBus = eventBus
// 全局组件 // 全局组件
app.component('svg-icon', SvgIcon) app.component('svg-icon', SvgIcon)
......
src/mobile/views/promotion/plan/detail/index.vue
浏览文件 @ a50fd001
...@@ -81,57 +81,20 @@ ...@@ -81,57 +81,20 @@
</van-cell> </van-cell>
</van-cell-group> </van-cell-group>
<!-- 任务列表 --> <!-- 任务列表 -->
<van-list v-model:loading="loading" <TaskList :planList="planList"
:finished="finished" :planDetail="planDetail" @refresh="refresh"/>
:immediate-check="false"
finished-text="没有更多了"
@load="onLoad">
<van-cell-group inset
v-if="planList?.length > 0">
<van-cell v-for="item in planList"
:key="item.id">
<template #title>
<p>{{ item.temporaryName }}</p>
<p>参考地址：{{ item.province + item.city + item.addr }}</p>
</template>
<template #label>
<div class="item"
v-for="o in item.photoList">
<template v-if="o.list">
<p class="black_title">{{ o.title }}：</p>
<div class="image-wrap">
<div class="small-item"
v-for="obj, index in o.list">
<van-image :src="obj.photoUrl"
@click="previewImage(o.list, index)" />
<p>{{ obj.title }}</p>
<p>{{ obj.time }}</p>
</div>
</div>
</template>
</div>
</template>
</van-cell>
</van-cell-group>
</van-list>
<!-- 图片预览 -->
<van-image-preview v-model:show="show"
:images="images"
:start-position="startIndex"
@change="onChange">
<template v-slot:index>第{{ index + 1 }}张</template>
</van-image-preview>
</div> </div>
</template> </template>
<script setup> <script setup>
import { getPlanDetailAPI, createExamine } from '@/api' import { getPlanDetailAPI, createExamine } from '@/api'
import { parseTime } from '@/utils'
import userStore from '@/store/modules/user' import userStore from '@/store/modules/user'
import { parseTime } from '@/utils'
import { getPromotionActiveStatus } from '@/dicts' import { getPromotionActiveStatus } from '@/dicts'
import TaskList from './taskList.vue'
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
const isCityManager = ref(userStore().promotionIdentity) const isCityManager = userStore().promotionIdentity
// 获取路由路径上的 id 参数 // 获取路由路径上的 id 参数
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
...@@ -253,38 +216,19 @@ const clickExamine = async () => { ...@@ -253,38 +216,19 @@ const clickExamine = async () => {
}) })
} }
const loading = ref(false)
const finished = ref(false)
const onLoad = () => {
loading.value = true
setTimeout(() => {
loading.value = false
finished.value = true
}, 1000)
}
const clickBack = () => { const clickBack = () => {
router.back() router.back()
} }
const show = ref(false) const refresh = () => {
const images = ref([]) getPlanDetail()
const index = ref(0)
const startIndex = ref(0)
const previewImage = (list, ind) => {
show.value = true
startIndex.value = ind
images.value = list.map(o => o.photoUrl)
}
const onChange = (ind) => {
index.value = ind
} }
</script> </script>
<style scoped <style scoped
lang="scss"> lang="scss">
.mobile-container { .mobile-container {
background: #f5f5f5; background: #f5f5f5;
min-height: 100vh; min-height: 100vh;
...@@ -321,73 +265,5 @@ const onChange = (ind) => { ...@@ -321,73 +265,5 @@ const onChange = (ind) => {
} }
} }
/* 任务列表 */
.van-list {
margin-top: 20px;
overflow: hidden;
.van-cell-group {
margin: 0 20px;
width: 100%;
/* 每个上报人组 */
::v-deep(.van-cell) {
width: calc(100% - 40px);
.van-cell__title {
width: 100%;
.van-cell__label {
/* 每个照片组（推广试吃，推荐成交） */
.item {
margin-top: 20px;
/* 横向图片容器 */
.image-wrap {
/* 强制内容在一行 */
white-space: nowrap;
overflow: scroll;
overflow-y: hidden;
.small-item {
width: 125px;
text-align: center;
display: inline-block;
.van-image {
height: 135px;
}
p {
display: block;
}
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
.van-image {
display: inline-block;
margin: 0 10px;
}
}
}
}
}
&:nth-child(n+2) {
margin-top: 20px;
}
}
}
}
} }
</style> </style>
\ No newline at end of file
src/mobile/views/promotion/plan/detail/taskList.vue 0 → 100644
浏览文件 @ a50fd001
<template>
<!-- 任务列表 -->
<van-list v-model:loading="loading"
:finished="finished"
:immediate-check="false"
finished-text="没有更多了"
@load="onLoad">
<van-cell-group inset
v-if="planList?.length > 0">
<van-cell v-for="item, index in planList"
:key="item.id">
<template #title>
<p class="cell-info">
<span>{{ item.temporaryName }}</span>
<van-button class="delete-btn"
type="danger"
v-if="showDelete(planDetail)"
@click="deleteView(item, index)">删除</van-button>
</p>
<p>参考地址：{{ item.province + item.city + item.addr }}</p>
</template>
<template #label>
<div class="item"
v-for="o in item.photoList">
<template v-if="o.list">
<p class="black_title">{{ o.title }}：</p>
<div class="image-wrap">
<div class="small-item"
v-for="obj, index in o.list">
<van-image :src="obj.photoUrl"
@click="previewImage(o.list, index)" />
<p>{{ obj.title }}</p>
<p>{{ obj.time }}</p>
</div>
</div>
</template>
</div>
</template>
</van-cell>
</van-cell-group>
</van-list>
<!-- 图片预览 -->
<van-image-preview v-model:show="show"
:images="images"
:start-position="startIndex"
@change="onChange">
<template v-slot:index>第{{ index + 1 }}张</template>
</van-image-preview>
</template>
<script setup>
import { parseTime } from '@/utils'
import { deletePromotionSystemAPI } from '@/api'
const { proxy } = getCurrentInstance()
const props = defineProps({
planDetail: {
type: Object,
default: () => ({})
},
planList: {
type: Array,
default: () => []
}
})
const emits = defineEmits(['refresh'])
// 加载更多-刷新列表
const loading = ref(false)
const finished = ref(false)
const onLoad = () => {
loading.value = true
setTimeout(() => {
loading.value = false
finished.value = true
}, 1000)
}
// 图片预览
const show = ref(false)
const images = ref([])
const index = ref(0)
const startIndex = ref(0)
const previewImage = (list, ind) => {
show.value = true
startIndex.value = ind
images.value = list.map(o => o.photoUrl)
}
const onChange = (ind) => {
index.value = ind
}
// 删除计划
// 是否展示删除按钮
const showDelete = (row) => {
// 上报日期不是当月则隐藏按钮
// const date = parseTime(row.date, '{y}-{m}')
// const currentDate = parseTime(new Date(), '{y}-{m}')
// return date === currentDate
return true
}
// 点击删除
const deleteView = (item, index) => {
// 确认是否删除
proxy.$modal.confirm('确认删除该记录吗？').then(async () => {
// 删除
await deletePromotionSystemAPI(item.id)
proxy.$modal.msgSuccess('删除成功')
props.planList.splice(index, 1)
emits('refresh')
proxy.eventBus.emit('delPromotionTaskEvent')
})
}
</script>
<style scoped
lang="scss">
/* 任务列表 */
.van-list {
margin-top: 20px;
overflow: hidden;
.van-cell-group {
margin: 0 20px;
background-color: transparent;
/* 每个上报人组 */
::v-deep(.van-cell) {
width: 100%;
margin-top: 20px;
.van-cell__title {
width: 100%;
.cell-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
.delete-btn {
height: 30px;
}
}
.van-cell__label {
/* 每个照片组（推广试吃，推荐成交） */
.item {
margin-top: 20px;
/* 横向图片容器 */
.image-wrap {
/* 强制内容在一行 */
white-space: nowrap;
overflow: scroll;
overflow-y: hidden;
.small-item {
width: 125px;
text-align: center;
display: inline-block;
.van-image {
height: 135px;
}
p {
display: block;
}
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
.van-image {
display: inline-block;
margin: 0 10px;
}
}
}
}
}
&:nth-child(n+2) {
margin-top: 20px;
}
}
}
}
</style>
\ No newline at end of file
src/mobile/views/promotion/plan/index/index.vue
浏览文件 @ a50fd001
...@@ -90,7 +90,7 @@ import { parseTime } from '@/utils' ...@@ -90,7 +90,7 @@ import { parseTime } from '@/utils'
import { checkPlanExpire } from '@/hooks' import { checkPlanExpire } from '@/hooks'
import { getPromotionActiveStatus } from '@/dicts' import { getPromotionActiveStatus } from '@/dicts'
import { getPlanListAPI, deletePlanAPI, batchUpdatePlanAPI, getChargeListAPI } from '@/api' import { getPlanListAPI, deletePlanAPI, batchUpdatePlanAPI, getChargeListAPI } from '@/api'
import PlanSearch from './plan-search.vue' import PlanSearch from './planSearch.vue'
import PickerBelong from '../components/PickerBelong' import PickerBelong from '../components/PickerBelong'
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
...@@ -146,7 +146,6 @@ const getEmployeeList = async () => { ...@@ -146,7 +146,6 @@ const getEmployeeList = async () => {
}) })
} }
const getPlanList = async () => { const getPlanList = async () => {
// 搜索条件改变/刷新时，页码重置为 1 // 搜索条件改变/刷新时，页码重置为 1
!loading.value && (query.pageNum = 1) !loading.value && (query.pageNum = 1)
...@@ -301,6 +300,19 @@ const cancelActionBar = () => { ...@@ -301,6 +300,19 @@ const cancelActionBar = () => {
item.checked = false item.checked = false
}) })
} }
// 订阅删除促销任务事件
onMounted(() => {
// 订阅事件
proxy.eventBus.on('delPromotionTaskEvent', () => {
planList.value = []
getPlanList()
});
});
onUnmounted(() => {
// 取消订阅事件
proxy.eventBus.off('delPromotionTaskEvent');
})
</script> </script>
<style scoped <style scoped
......
src/utils/eventBus.js 0 → 100644
浏览文件 @ a50fd001
import mitt from 'mitt';
// 创建 EventBus 实例
const eventBus = mitt();
export default eventBus;
\ No newline at end of file
src/utils/url.js
浏览文件 @ a50fd001
...@@ -9,5 +9,5 @@ export function getQueryString(name) { ...@@ -9,5 +9,5 @@ export function getQueryString(name) {
queryObj[key] = value queryObj[key] = value
}) })
}) })
return decodeURIComponent(queryObj[name]) || null return queryObj[name] || null
} }
\ No newline at end of file
src/views/promotion/task/index.vue
浏览文件 @ a50fd001
...@@ -347,7 +347,7 @@ const columns = ref([ ...@@ -347,7 +347,7 @@ const columns = ref([
// 删除任务列表 // 删除任务列表
const deleteView = async (row) => { const deleteView = async (row) => {
await ElMessageBox.confirm('确认删除吗?', '提示', { await ElMessageBox.confirm('确认删除该记录吗?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论