refactor(mobile/promotion): 促销移动端：批量修改归属人

src/mobile/directive/touch.js

@@ -2,21 +2,30 @@
 import { ref } from 'vue';
 
 const longPressDuration = ref(500); // 长按时间阈值，单位毫秒
-let start = null; // 记录触摸开始时间
-let cancel = null;
+let start = null; // 按下函数
+let move = null; // 移动函数
+let cancel = null; // 取消函数
+let isMove = false // 是否移动
 
 export default {
   beforeMount(el, binding) {
     let pressTimer = null;
 
     start = (e) => {
+      isMove = false;
+
       if (pressTimer === null) {
         pressTimer = setTimeout(() => {
-          binding.value();
+          // 长按定时器触发，先不执行函数，等待 touchend 判断坐标
+          !isMove && binding.value();
         }, longPressDuration.value);
       }
     };
 
+    move = (e) => {
+      isMove = true
+    }
+
     cancel = (e) => {
       if (pressTimer !== null) {
         clearTimeout(pressTimer);
@@ -25,13 +34,14 @@ export default {
     };
 
     el.addEventListener('touchstart', start);
+    el.addEventListener('touchmove', move)
     el.addEventListener('touchend', cancel);
     el.addEventListener('touchcancel', cancel);
   },
   unmounted(el) {
     el.removeEventListener('touchstart', start);
+    el.removeEventListener('touchmove', move)
     el.removeEventListener('touchend', cancel);
     el.removeEventListener('touchcancel', cancel);
   }
-
 };
\ No newline at end of file

src/mobile/views/promotion/plan/components/PickerBelong/index.vue

 <template>
-  <PickerSearch v-model:show="showEmployee"
+  <PickerSearch 
     :columns="showEmployeeList"
     placeholder="搜索归属人"
     @confirm="onEmployeeConfirm"
@@ -8,7 +8,11 @@
 
 <script setup>
 import { getChargeListAPI } from '@/api'
-// 选择归属人弹窗组件
+
+const emits = defineEmits(['confirm'])
+
+const showEmployeeList = ref([])
+
 // 归属人
 const allEmpolyeeList = ref([])
 const getEmployeeList = async () => {
@@ -22,20 +26,19 @@ const getEmployeeList = async () => {
       deptQcId: item.deptQcId
     }
   })
+  showEmployeeList.value = allEmpolyeeList.value
 }
 getEmployeeList()
 
 
 // 确定归属人
 const onEmployeeConfirm = (val) => {
-  props.query.employeeId = val.selectedOptions[0].value
-  showEmployee.value = false
-  emits('query')
+  emits('confirm', val)
 }
 
 // 搜索归属人
 const searchEmployee = (searchName) => {
-  showEmployeeList.value = allEmpolyeeList.filter(item => {
+  showEmployeeList.value = allEmpolyeeList.value.filter(item => {
     return item.text.includes(searchName)
   })
 }

src/mobile/views/promotion/plan/editing/index.vue

@@ -130,12 +130,14 @@
         </div>
       </van-form>
     </div>
+    <PickerBelong v-model:show="showEmployeePicker"
+      @confirm="confirmEmployee" />
     <PickerSearch v-model:show="showPicker"
       :columns="columns"
       :searchShow="showPickerSearch"
       @search="search"
       @cancel="showPicker = false"
-      @confirm="confirm"></PickerSearch>
+      @confirm="confirm" />
     <van-popup v-model:show="showInTimePicker"
       destroy-on-close
       position="bottom">
@@ -162,6 +164,7 @@
 import { getPlanStoreListAPI, getChargeListAPI, addPlanByWebAPI, getPlanDetailAPI, updatePlanByWebAPI } from '@/api'
 import userStore from '@/store/modules/user'
 import { parseTime } from '@/utils'
+import PickerBelong from '../components/PickerBelong'
 
 const myForm = ref({})
 const { proxy } = getCurrentInstance();
@@ -228,11 +231,13 @@ const onSubmit = async () => {
 }
 
 // 选择门店
-const selStoreName = () => {
+const selStoreName = async () => {
   isType.value = '门店'
   showPicker.value = true
+  await getStoreList()
   showPickerSearch.value = true
   searchPlaceholder.value = '搜索门店名称'
+
 }
 // 获取门店列表
 const getStoreList = async (storeName) => {
@@ -245,7 +250,6 @@ const getStoreList = async (storeName) => {
     storeAddr: item.storeAddr
   }))
 }
-getStoreList()
 
 // 活动日期
 const showCalendar = ref(false)
@@ -271,30 +275,11 @@ const selPattern = () => {
 }
 
 // 归属人
-const allBelongList = ref([]) // 所有归属人列表
+const showEmployeePicker = ref(false)
 const selEmployee = () => {
-  isType.value = '归属人'
-  showPicker.value = true
-  showPickerSearch.value = true
-  columns.value = allBelongList.value
-  getBelongList()
-}
-const getBelongList = async () => {
-  const res = await getChargeListAPI()
-  allBelongList.value = res.data.map(item => ({
-    text: item.name,
-    value: item.employeeNo,
-    id: item.id
-  }))
-  columns.value = allBelongList.value
-  // 判断如果是城市经理，则设置默认归属人为自己
-  if (isCityManager.value) {
-    form.employeeName = userStore().employeeName
-    form.employeeNo = userStore().employeeNo
-  }
+  showEmployeePicker.value = true
 }
 
-
 // 上班打卡时间
 const showInTimePicker = ref(false)
 const inTime = ref([]) // 选择器里的时间
@@ -357,12 +342,16 @@ const isType = ref('') // 0: 门店 1: 计划 2: 归属人
 const search = (value) => {
   if (isType.value === '门店') {
     getStoreList(value)
-  } else if (isType.value === '归属人') {
-    // 模糊搜索
-    columns.value = allBelongList.value.filter(item => item.text.includes(value))
   }
 }
 // 确认
+const confirmEmployee = (value) => {
+  const { selectedOptions } = value
+  form.employeeName = selectedOptions[0]?.text
+  form.employeeNo = selectedOptions[0]?.employeeNo
+  form.employeeId = selectedOptions[0]?.value
+  showEmployeePicker.value = false
+}
 const confirm = (value) => {
   if (isType.value === '门店') {
     const { selectedOptions } = value
@@ -372,11 +361,6 @@ const confirm = (value) => {
   } else if (isType.value === '计划') {
     const { selectedOptions } = value
     form.pattern = selectedOptions[0]?.text
-  } else if (isType.value === '归属人') {
-    const { selectedOptions } = value
-    form.employeeName = selectedOptions[0]?.text
-    form.employeeNo = selectedOptions[0]?.value
-    form.employeeId = selectedOptions[0]?.id
   }
   showPicker.value = false
 }

src/mobile/views/promotion/plan/index/index.vue

@@ -11,7 +11,7 @@
       :pull-distance="100"
       success-text="刷新成功"
       @refresh="onRefresh"
-      :class="{safe_bottom: showSelect}">
+      :class="{ safe_bottom: showSelect }">
       <van-list v-model:loading="loading"
         :finished="finished"
         :immediate-check="false"
@@ -64,11 +64,15 @@
     <van-action-bar v-show="showSelect">
       <span @click="showSelect = false">取消</span>
       <van-action-bar-button type="warning"
-        text="修改归属人" />
+        text="修改归属人"
+        @click="clickChangeBelong" />
       <van-action-bar-button type="danger"
         text="删除"
         @click="clickDelSome" />
     </van-action-bar>
+    <!-- 选择归属人 -->
+    <PickerBelong v-model:show="showPickerBelong"
+      @confirm="confirmPickerBelong" />
   </div>
 </template>
 
@@ -81,13 +85,15 @@ import userStore from '@/store/modules/user'
 import { parseTime } from '@/utils'
 import { checkPlanExpire } from '@/hooks'
 import { getPromotionActiveStatus } from '@/dicts'
-import { getPlanListAPI, deletePlanAPI } from '@/api'
+import { getPlanListAPI, deletePlanAPI, batchUpdatePlanAPI } from '@/api'
 import PlanSearch from './plan-search.vue'
+import PickerBelong from '../components/PickerBelong'
 
 const { proxy } = getCurrentInstance();
 const router = useRouter()
 const promotionIdentity = computed(() => userStore().promotionIdentity)
 const employeeNo = computed(() => userStore().employeeNo)
+const employeeName = computed(() => userStore().employeeName)
 
 // 搜索弹窗
 const showSearch = ref(false)
@@ -113,8 +119,6 @@ const planColumns = [
   }
 ]
 
-
-
 const getPlanList = async () => {
   // 搜索条件改变/刷新时，页码重置为 1
   !loading.value && (query.pageNum = 1)
@@ -165,7 +169,6 @@ const querySearch = () => {
 
 // 编辑计划
 const editPlan = (row) => {
-  console.log(123)
   if (!checkPlanExpire(row)) {
     return proxy.$modal.msgWarning('无法编辑，已执行或之前计划')
   }
@@ -226,6 +229,36 @@ const clickDelSome = () => {
     onRefresh()
   })
 }
+
+// 选择归属人
+const showPickerBelong = ref(false)
+const clickChangeBelong = () => {
+  const ids = planList.value.filter(item => item.checked).map(item => item.id)
+  if (ids.length === 0) {
+    return proxy.$modal.msgWarning('请选择要修改归属人的计划')
+  }
+  for (let i = 0; i < ids.length; i++) {
+    const item = planList.value.find(o => o.id === ids[i])
+    if (!checkPlanExpire(item)) {
+      return proxy.$modal.msgWarning('无法修改，已执行或之前计划')
+    }
+  }
+  showPickerBelong.value = true
+}
+const confirmPickerBelong = async (val) => {
+  showPickerBelong.value = false
+  showSelect.value = false
+  // 调用后台接口批量修改归属人
+  // 循环判断计划是否含有以前和执行中的
+  await batchUpdatePlanAPI({
+    employeeId: val.selectedOptions[0]?.value, // 选择的归属人 id
+    operName: employeeName.value,
+    planIds: planList.value.filter(item => item.checked).map(item => item.id)
+  })
+
+  proxy.$modal.msgSuccess('修改成功')
+  onRefresh()
+}
 </script>
 
 <style scoped
@@ -234,9 +267,10 @@ const clickDelSome = () => {
     background: #f5f5f5;
     min-height: 100vh;
 
-    .van-pull-refresh{
+    .van-pull-refresh {
+
       /* 并列选择身上的类名 */
-      &.safe_bottom{
+      &.safe_bottom {
         padding-bottom: 50px;
       }
     }

src/mobile/views/promotion/plan/index/plan-search.vue

@@ -43,7 +43,7 @@
     </van-popup>
 
     <!-- 归属人 -->
-    <van-field :model-value="showEmployeeList.find(o => o.value === query.employeeId)?.text"
+    <van-field :modelValue="query.employeeName"
       is-link
       readonly
       label="归属人"
@@ -75,7 +75,6 @@ import userStore from '@/store/modules/user'
 import PickerBelong from '../components/PickerBelong'
 
 const promotionIdentity = computed(() => userStore().promotionIdentity)
-const employeeNo = computed(() => userStore().employeeNo)
 
 const { recentPickerOptions: pickerOptions } = useDatePickerOptions()
 
@@ -146,7 +145,8 @@ const showEmployee = ref(false)
 
 // 确定归属人
 const onEmployeeConfirm = (val) => {
-  props.query.employeeId = val.selectedOptions[0].value
+  props.query.employeeName = val.selectedOptions[0]?.text
+  props.query.employeeId = val.selectedOptions[0]?.value
   showEmployee.value = false
   emits('query')
 }
@@ -163,7 +163,10 @@ const resetFn = () => {
   props.query.activityStartDate = ''
   props.query.activityEndDate = ''
   props.query.planStatus = undefined
-  !promotionIdentity.value && (props.query.employeeId = undefined)
+  if (!promotionIdentity.value) {
+    props.query.employeeName = undefined
+    props.query.employeeId = undefined 
+  }
   props.query.storeNameLike = undefined
   emits('query')
 }