feat(add-edit): 促销计划移动端_新增编辑删除

src/api/promotion/plan.js

@@ -130,7 +130,7 @@ export function batchUpdatePlanAPI(data) {
   })
 }
 
-// mobile 端：查询计划详情（获取促销员打卡任务列表）
+// 查询计划详情（获取促销员打卡任务列表）
 export function getPlanDetailAPI(id) {
   return request({
     baseURL: VITE_APP_PROMOTION,

src/components/Mobile/PickerSearch.vue

+<template>
+  <div>
+    <van-popup v-model:show="innerShowPicker"
+      destroy-on-close
+      round
+      position="bottom"
+      @close="onPopupClose">
+      <van-picker 
+      :columns="columns"
+        :cancel-button-text="searchShow ? '' : '取消'"
+        @confirm="onConfirm">
+        <template #title>
+          <!-- 搜索框 -->
+          <van-search v-if="searchShow"
+            v-model="searchText"
+            :placeholder="placeholder"
+            shape="round"
+            @update:model-value="onSearch" />
+        </template>
+        <template #empty>
+          <van-empty image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
+            image-size="40"
+            description="暂无数据" />
+        </template>
+      </van-picker>
+    </van-popup>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  // 控制弹窗显示隐藏
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  // 选择器列数据
+  columns: {
+    type: Array,
+    default: () => []
+  },
+  // 占位提示文字
+  placeholder: {
+    type: String,
+    default: '请输入搜索内容'
+  },
+  // 搜索是否显示
+  searchShow: {
+    type: Boolean,
+    default: true
+  }
+});
+
+// 定义向外触发的事件
+const emit = defineEmits(['update:modelValue', 'confirm', 'search']);
+
+// 内部显示状态
+const innerShowPicker = ref(props.modelValue);
+// 搜索文本
+const searchText = ref('');
+
+// 监听 props 变化更新内部状态
+watch(() => props.modelValue, (newValue) => {
+  innerShowPicker.value = newValue;
+});
+
+// 弹窗关闭时触发
+const onPopupClose = () => {
+  searchText.value = '';
+  emit('update:modelValue', false);
+};
+
+/**
+ * 选择器确认事件处理函数
+ * @param values - 选中的值
+ * @param indexes - 选中项的索引
+ */
+const onConfirm = (values) => {
+  emit('confirm', values);
+  emit('update:modelValue', false);
+
+};
+
+/**
+ * 搜索事件处理函数
+ * @param values - 搜索的值
+ */
+const onSearch = (values) => {
+  emit('search', values);
+}
+</script>
+
+<style scoped>
+.van-search {
+  flex: 1;
+}
+
+::v-deep(.van-picker__confirm) {
+  width: 70px;
+}
+</style>
\ No newline at end of file

src/main.js

@@ -55,7 +55,11 @@ import XLToolTip from '@/components/XLToolTip'
 import XlSelect from '@/components/XLSelect'
 // 开窗查询组件
 import OpenDialog from '@/components/OpenDialog'
-// 只有在移动端引入 flexible.js
+
+// 移动端组件
+import PickerSearch from '@/components/Mobile/PickerSearch'
+
+// 只有在移动端引入
 if (isMobile()) {
   (function () {
     const docEl = document.documentElement;
@@ -102,6 +106,8 @@ app.component('BackToUp', BackToUp)
 app.component('XlToolTip', XLToolTip)
 app.component('XlSelect', XlSelect)
 app.component('OpenDialog', OpenDialog)
+// 移动端组件
+app.component('PickerSearch', PickerSearch)
 
 // 全局插件
 app.use(plugins)

src/mobile_views/index.vue

-<template>
-  <div>这里只是针对移动设备开放的页面</div>
-</template>
-
-<script setup>
- 
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file

src/mobile_views/promotion/promotion.vue → src/mobile_views/promotion/plan/index.vue

 <template>
   <div class="mobile-container">
     <van-nav-bar right-text="搜索"
+      left-text="新增计划"
+      @click-left="$router.push('/promotion_add')"
       @click-right="showSearch = true"
       placeholder
       fixed />
@@ -14,9 +16,9 @@
         finished-text="没有更多了"
         @load="onLoad">
         <van-cell-group inset>
-          <van-cell v-for="item in planList"
-            :key="item.id"
-            :title="item.storeName"
+          <van-swipe-cell v-for="item in planList"
+            :key="item.id">
+            <van-cell :title="item.storeName"
               :to="`/promotion_detail/${item.id}`">
               <template #label>
                 <p class="employee">{{ item.employeeName }}</p>
@@ -29,6 +31,17 @@
                 <p>{{ parseTime(item.date, '{y}-{m}-{d} (周{a})') }}</p>
               </template>
             </van-cell>
+            <template #right>
+              <van-button square
+                type="success"
+                text="编辑" 
+                @click="editPlan(item)"/>
+              <van-button square
+                type="danger"
+                text="删除"
+                @click="deletePlan(item)" />
+            </template>
+          </van-swipe-cell>
         </van-cell-group>
       </van-list>
     </van-pull-refresh>
@@ -152,8 +165,10 @@ defineOptions({
 })
 import { parseTime } from '@/utils'
 import { useDatePickerOptions } from '@/hooks'
-import { getChargeListAPI, getPlanListAPI } from '@/api'
+import { getChargeListAPI, getPlanListAPI, deletePlanAPI } from '@/api'
 import store from '@/store'
+import useUserStore from '@/store/modules/user'
+const { proxy } = getCurrentInstance();
 const { recentPickerOptions: pickerOptions, thisYearDate } = useDatePickerOptions(0)
 const router = useRouter()
 
@@ -355,6 +370,25 @@ const resetFn = () => {
   getPlanList()
 }
 
+// 编辑计划
+const editPlan = (row) => {
+  router.push(`/promotion_add/${row.id}`)
+}
+
+// 删除计划
+const deletePlan = (row) => {
+  proxy.$modal.confirm(`确认删除计划吗？`).then(async () => {
+    await deletePlanAPI({
+      planIds: [row.id],
+      employeeNo: useUserStore().getEmployeeNo
+    })
+    proxy.$modal.msgSuccess('删除成功')
+    // 找到 row 在数组里第几条删除
+    const index = planList.value.findIndex(item => item.id === row.id)
+    planList.value.splice(index, 1)
+  })
+}
+
 </script>
 
 <style scoped
@@ -421,4 +455,12 @@ const resetFn = () => {
   .van-search {
     width: 60%;
   }
+
+  ::v-deep(.van-swipe-cell__right) {
+    display: flex;
+
+    button {
+      height: 100%;
+    }
+  }
 </style>
\ No newline at end of file

src/router/index.js

@@ -95,22 +95,28 @@ export const constantMobileRoutes = [
   },
   {
     path: '/promotion',
-    component: () => import('@/mobile_views/promotion/promotion'),
-    name: 'Mobile_promotion', // 和组件内的名字保持一致
+    component: () => import('@/mobile_views/promotion/plan/index'),
+    name: 'Mobile_promotion',
     hidden: true,
     meta: { keepAlive: true } // 标记该路由需要缓存
   },
   {
-    path: '/promotion_detail/:id',
-    component: () => import('@/mobile_views/promotion/detail'),
+    path: '/promotion_detail/:id', // 促销计划详情页
+    component: () => import('@/mobile_views/promotion/plan/detail'),
     name: 'Detail', 
     hidden: true,
   },
   {
-    path: '/examine/:examineId',
-    component: () => import('@/mobile_views/examine'),
+    path: '/examine/:examineId', // 稽查任务页
+    component: () => import('@/mobile_views/promotion/examine'),
     name: 'Examine',
     hidden: true,
+  },
+  {
+    path: '/promotion_add/:planId?', // 新增促销计划页
+    component: () => import('@/mobile_views/promotion/plan/add-edit'),
+    name: 'AddAndEdit',
+    hidden: true,
   }
 ]
 

src/store/modules/user.js

@@ -98,9 +98,21 @@ export default defineStore(
       getPromotionIdentity(state) {
         return getPromotionRole(state.userInfo.privilegeId) === CITY_MANAGER
       },
+      // 获取员工工号，姓名，id
+      getEmployeeInfo(state) {
+        return {
+          operNo: state.userInfo.userName,
+          operName: state.userInfo.nickName,
+          operId: state.userInfo.userId
+        }
+      },
       // 获取员工工号
       getEmployeeNo(state) {
         return state.userInfo.userName
+      },
+      // 获取员工姓名
+      getEmployeeName(state) {
+        return state.userInfo.nickName
       }
     }
   })

src/utils/index.js

@@ -162,7 +162,7 @@ export function toggleClass(element, className) {
  * @param {boolean} immediate
  * @return {*}
  */
-export function debounce(func, wait, immediate) {
+export function debounce(func, wait = 500, immediate) {
   let timeout, args, context, timestamp, result
 
   const later = function () {
@@ -189,6 +189,7 @@ export function debounce(func, wait, immediate) {
     // 如果延时不存在，重新设定延时
     if (!timeout) timeout = setTimeout(later, wait)
     if (callNow) {
+      console.log(args, 'args')
       result = func.apply(context, args)
       context = args = null
     }

src/views/promotion/plan/index.vue

@@ -266,8 +266,8 @@
           inline>
           <el-row>
             <el-col :span="12">
-              <!-- 门店列表 -->
-              <el-form-item label="门店列表"
+              <!-- 选择门店 -->
+              <el-form-item label="选择门店"
                 prop="storeCode">
                 <el-select v-model="addOrEditPlanForm.storeCode"
                   placeholder="请选择门店"