feat(mobile_views/promotion): 移动端_促销计划_完成搜索抽屉的搭建

package.json

@@ -30,6 +30,7 @@
     "js-beautify": "1.14.11",
     "js-cookie": "3.0.5",
     "jsencrypt": "3.3.2",
+    "lib-flexible": "^0.3.2",
     "nprogress": "0.2.0",
     "pinia": "2.1.7",
     "splitpanes": "3.1.5",

src/api/promotion/task.js

@@ -15,7 +15,7 @@ export const getWarZoneListAPI = () => {
   })
 }
 
-// 负责人列表
+// 归属人列表
 export const getChargeListAPI = () => {
   return request({
     baseURL: VITE_APP_PROMOTION,

src/main.js

@@ -5,6 +5,7 @@ import router from './router'
 import directive from './directive' // directive
 import './permission' // permission control
 import plugins from './plugins' // plugins
+import { isMobile } from '@/utils'
 
 /****************** 组件 ******************/
 import ElementPlus from 'element-plus'
@@ -54,6 +55,10 @@ import XLToolTip from '@/components/XLToolTip'
 import XlSelect from '@/components/XLSelect'
 // 开窗查询组件
 import OpenDialog from '@/components/OpenDialog'
+// 只有在移动端引入 flexible.js
+if (isMobile()) {
+  import('lib-flexible')
+}
 
 const app = createApp(App)
 

src/mobile_views/promotion/index.vue

 <template>
+  <div>
+    <van-nav-bar title="活动计划"
+      right-text="搜索"
+      @click-right="showSearch = true" />
+    <van-popup v-model:show="showSearch"
+      position="right"
+      :style="{ height: '100vh' }">
+      <!-- 快捷时间 -->
+      <van-field readonly
+        label="快捷时间"
+        placeholder="选择时间">
+        <template #input>
+          <van-button size="small"
+            type="primary"
+            v-for="item in pickerOptions"
+            @click.stop.self.prevent="pickerBtn(item)">{{ item.text }}</van-button>
+        </template>
+      </van-field>
+      <!-- 开始时间 -->
+      <van-field v-model="query.activityStartDate"
+        is-link
+        readonly
+        name="datePicker"
+        label="开始时间"
+        placeholder="点击选择时间"
+        @click="startShowPicker = true" />
+      <van-popup v-model:show="startShowPicker"
+        destroy-on-close
+        position="bottom"
+        teleport="body">
+        <van-date-picker v-model="activityStartDatePicker"
+          @confirm="onStartConfirm"
+          @cancel="startShowPicker = false" />
+      </van-popup>
+      <!-- 结束时间 -->
+      <van-field v-model="query.activityEndDate"
+        is-link
+        readonly
+        name="datePicker"
+        label="结束时间"
+        placeholder="点击选择时间"
+        @click="endShowPicker = true" />
+      <van-popup v-model:show="endShowPicker"
+        destroy-on-close
+        position="bottom"
+        teleport="body">
+        <van-date-picker v-model="activityEndDatePicker"
+          @confirm="onEndConfirm"
+          @cancel="endShowPicker = false" />
+      </van-popup>
+      <!-- 活动类型 -->
+      <van-field v-model="query.planStatus"
+        is-link
+        readonly
+        label="活动状态"
+        placeholder="选择活动状态"
+        @click="planStatusShowPicker = true">
+      </van-field>
+      <van-popup v-model:show="planStatusShowPicker"
+        destroy-on-close
+        teleport="body"
+        position="bottom">
+        <van-picker :model-value="planStatusStr"
+          :columns="planColumns"
+          @cancel="planStatusShowPicker = false"
+          @confirm="onPlanConfirm" />
+      </van-popup>
+      <!-- 归属人 -->
+      <van-field v-model="query.employeeId"
+        is-link
+        readonly
+        label="归属人"
+        placeholder="选择归属人"
+        @click="employeeIdShowPicker = true">
+      </van-field>
+      <van-popup v-model:show="employeeIdShowPicker"
+        destroy-on-close
+        teleport="body"
+        position="bottom">
+        <van-picker :model-value="planStatusStr"
+          :columns="employeeIdColumns"
+          @cancel="employeeIdShowPicker = false"
+          @confirm="onEmployeeConfirm" />
+      </van-popup>
+      <!-- 终端名 -->
+      <van-field v-model="query.storeNameLike"
+        label="终端名"
+        placeholder="请输入终端名" />
+    </van-popup>
+
+
+    <!-- 测试 url 参数用 -->
     <div>
       <p>{{ url }}</p>
       <button @click="copy">复制 URL</button>
-    <van-button type="primary">主要按钮</van-button>
-    <van-button type="success">成功按钮</van-button>
-    <van-button type="default">默认按钮</van-button>
-    <van-button type="danger">危险按钮</van-button>
-    <van-button type="warning">警告按钮</van-button>
+    </div>
   </div>
 </template>
 
 <script setup>
+import { parseTime } from '@/utils'
+import { useDatePickerOptions } from '@/hooks'
+import { getChargeListAPI } from '@/api'
+const { recentPickerOptions: pickerOptions, thisYearDate } = useDatePickerOptions(0)
+
+
 const url = ref('')
 url.value = window.location.href
 // 点击复制按钮复制字符串到剪切板
@@ -23,6 +117,101 @@ const copy = () => {
   document.body.removeChild(input);
   alert('复制成功');
 }
+
+// 搜索弹窗
+const showSearch = ref(false)
+// 搜索表单对象
+const query = reactive({
+  activityStartDate: '',
+  activityEndDate: '',
+  planStatus: '',
+  employeeId: '', // 归属人
+  storeNameLike: '', // 终端名
+})
+// 快捷时间
+const pickerBtn = (item) => {
+  let [startTime, endTime] = item.value()
+  // 判断不是空并且不是日期对象则转换成日期对象
+  if (startTime && !(startTime instanceof Date)) {
+    startTime = new Date(startTime)
+  }
+  if (endTime && !(endTime instanceof Date)) {
+    endTime = new Date(endTime)
+  }
+  query.activityStartDate = parseTime(startTime, '{y}-{m}-{d}')
+  query.activityEndDate = parseTime(endTime, '{y}-{m}-{d}')
+  // 更新两个数组格式时间
+  activityStartDatePicker[0] = startTime.getFullYear()
+  activityStartDatePicker[1] = startTime.getMonth() + 1
+  activityStartDatePicker[2] = startTime.getDate()
+  activityEndDatePicker[0] = endTime.getFullYear()
+  activityEndDatePicker[1] = endTime.getMonth() + 1
+  activityEndDatePicker[2] = endTime.getDate()
+}
+// 开始时间
+const startShowPicker = ref(false)
+const activityStartDatePicker = [new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()]
+const onStartConfirm = (val) => {
+  query.activityStartDate = val.selectedValues.join('-')
+  startShowPicker.value = false
+}
+// 结束时间
+const endShowPicker = ref(false)
+const activityEndDatePicker = [new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()]
+const onEndConfirm = (val) => {
+  query.activityEndDate = val.selectedValues.join('-')
+  endShowPicker.value = false
+}
+// 活动类型( 执行 EXECUTION ，未执行 NOT_EXECUTION)
+const planStatusShowPicker = ref(false)
+const planStatusStr = ref([])
+const planColumns = [
+  {
+    text: '未执行',
+    value: 'NOT_EXECUTION'
+  },
+  {
+    text: '执行中',
+    value: 'EXECUTION'
+  }
+]
+const onPlanConfirm = (val) => {
+  query.planStatus = val.selectedOptions[0].text
+  planStatusStr.value = val.selectedValues
+  planStatusShowPicker.value = false
+}
+// 归属人
+const employeeIdShowPicker = ref(false)
+const employeeIdStr = ref([])
+const employeeIdColumns = ref([
+
+])
+const getEmployeeList = async () => {
+  const res = await getChargeListAPI()
+  employeeIdColumns.value = res.data.map(item => {
+    return {
+      text: item.name,
+      value: item.id,
+      employeeNo: item.employeeNo,
+      deptQcName: item.deptQcName,
+      deptQcId: item.deptQcId
+    }
+  })
+}
+getEmployeeList()
+
+const onEmployeeConfirm = (val) => {
+  query.employeeId = val.selectedOptions[0].text
+  employeeIdStr.value = val.selectedValues
+  employeeIdShowPicker.value = false
+}
 </script>
 
-<style scoped></style>
+<style scoped
\ No newline at end of file
+  lang="scss">
+  ::v-deep(.van-field):first-of-type {
+    .van-cell__right-icon:first-of-type {
+      display: none;
+    }
+  }
+</style>
\ No newline at end of file

src/router/index.js

 import { createWebHashHistory, createRouter } from 'vue-router'
 /* Layout */
 import Layout from '@/layout'
-import { isMobile } from '@/utils/device'
+import { isMobile } from '@/utils'
 
 /**
  * Note: 路由配置项
@@ -24,9 +24,10 @@ import { isMobile } from '@/utils/device'
     activeMenu: '/system/user'      // 当路由设置了该属性，则会高亮相对应的侧边栏。
   }
  */
-
-// 公共路由
-export const constantRoutes = [
+// 使用的路由
+export let constantRoutes = []
+// PC端 公共路由
+export const constantPCRoutes = [
   {
     path: '/redirect',
     component: Layout,
@@ -81,17 +82,21 @@ export const constantRoutes = [
     ]
   }
 ]
-
-// 移动端 路由
-export const mobileRoutes = [
+// 移动端 公共路由
+export const constantMobileRoutes = [
+  {
+    path: '/',
+    redirect: '/promotion'
+  },
   {
     path: '/promotion',
     component: () => import('@/mobile_views/promotion/index'),
-    hidden: true
+    name: 'Index',
+    hidden: true,
   }
 ]
 
-// 动态路由，基于用户权限动态去加载
+// PC端 动态路由，基于用户权限动态去加载（一级的是靠网页里配置动态请求的，二级路由页面）
 export const dynamicRoutes = [
   {
     path: '/system/user-auth',
@@ -165,9 +170,11 @@ export const dynamicRoutes = [
   }
 ]
 
-// 判断移动端添加路由
+// 判断移动端设置路由
 if (isMobile()) {
-  constantRoutes.push(...mobileRoutes)
+  constantRoutes = constantMobileRoutes
+} else {
+  constantRoutes = constantPCRoutes
 }
 
 const router = createRouter({

src/utils/index.js

@@ -13,6 +13,7 @@ export * from './ruoyi'
 export * from './scroll-to'
 export * from './theme'
 export * from './validate'
+export * from './device'
 
 /**
  * @param {string} url