refactor(task): 重构促销任务中省市区和促销计划中的提取出来_封装复用

src/dicts/index.js

@@ -30,4 +30,21 @@ export const PROMOTION_ACTIVITY_MODE_LIST = [
     label: '校园活动',
     value: '校园活动'
   }
+]
+
+
+// 促销任务状态
+export const PROMOTION_TASK_STATUS_LIST = [
+  {
+    label: '未审批',
+    value: 'SUBMITTED'
+  },
+  {
+    label: '已审批',
+    value: 'APPROVED'
+  },
+  {
+    label: '全部数据',
+    value: ''
+  }
 ]
\ No newline at end of file

src/views/promotion/components/SelectProvinceCity/index.vue

+<template>
+  <el-row>
+    <el-form-item label="区域查询"
+      prop="region">
+      <el-radio-group v-model="queryParams.region"
+        @change="changeRegion">
+        <el-radio-button label="全国"
+          value="全国" />
+        <el-radio-button label="省"
+          value="省" />
+        <el-radio-button label="省-市"
+          value="省-市" />
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="省份"
+      prop="provinceId"
+      v-show="queryParams.region !== '全国'">
+      <el-select v-model="queryParams.provinceId"
+        placeholder="请选择省"
+        @change="selProvince"
+        filterable
+        clearable>
+        <el-option v-for="item in provinceList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value" />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="城市"
+      prop="cityId"
+      v-show="queryParams.region === '省-市'">
+      <el-select v-model="queryParams.cityId"
+        placeholder="请选择市"
+        @change="selCity"
+        filterable
+        clearable>
+        <el-option v-for="item in cityList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value" />
+      </el-select>
+    </el-form-item>
+  </el-row>
+</template>
+
+<script setup>
+import { getProCityAPI } from '@/api'
+
+const props = defineProps({
+  queryParams: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const emits = defineEmits(["change"])
+
+const provinceList = ref([])
+const cityList = ref([])
+const getProCityList = async () => {
+  const { data } = await getProCityAPI(props.queryParams)
+  const list = data.map(item => ({
+    label: item.name,
+    value: item.num
+  }))
+  props.queryParams.provinceId ? (cityList.value = list) : (provinceList.value = list)
+}
+getProCityList()
+// 切换省市范围
+const changeRegion = async () => {
+  if (props.queryParams.region === '全国') {
+    props.queryParams.provinceId = ''
+    props.queryParams.provinceName = ''
+    props.queryParams.cityId = ''
+    props.queryParams.cityName = ''
+  } else if (props.queryParams.region === '省') {
+    props.queryParams.cityId = ''
+    props.queryParams.cityName = ''
+  }
+  emits('change')
+}
+// 选择省
+const selProvince = async () => {
+  // 设置省名
+  props.queryParams.provinceName = provinceList.value.find(item => item.value === props.queryParams.provinceId)?.label
+  // 重置城市
+  props.queryParams.cityId = ''
+  props.queryParams.cityName = ''
+  cityList.value = []
+  // 重新获取城市列表以及查询列表
+  getProCityList()
+  emits('change')
+}
+// 选择市
+const selCity = async () => {
+  // 设置市名
+  props.queryParams.cityName = cityList.value.find(item => item.value === props.queryParams.cityId)?.label
+  // 重新获取查询列表
+  emits('change')
+}
+</script>
\ No newline at end of file

src/views/promotion/plan/index.vue

@@ -32,48 +32,8 @@
           </el-form-item>
         </el-row>
         <!-- 省市 -->
-        <el-row>
-          <el-form-item label="区域查询"
-            prop="region">
-            <el-radio-group v-model="queryParams.region"
-              @change="changeRegion">
-              <el-radio-button label="全国"
-                value="全国" />
-              <el-radio-button label="省"
-                value="省" />
-              <el-radio-button label="省-市"
-                value="省-市" />
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="省份"
-            prop="provinceId"
-            v-show="queryParams.region !== '全国'">
-            <el-select v-model="queryParams.provinceId"
-              placeholder="请选择省"
-              @change="selProvince"
-              filterable
-              clearable>
-              <el-option v-for="item in provinceList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="城市"
-            prop="cityId"
-            v-show="queryParams.region === '省-市'">
-            <el-select v-model="queryParams.cityId"
-              placeholder="请选择市"
-              @change="selCity"
-              filterable
-              clearable>
-              <el-option v-for="item in cityList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-row>
+        <SelectProvinceCity :queryParams="queryParams"
+          @change="getPlanList" />
         <el-row>
           <el-form-item label="经销商"
             prop="dealerId">
@@ -142,11 +102,12 @@
 </template>
 
 <script setup>
-import { getProCityAPI, getDealerListAPI, getWarZoneListAPI, getChargeListAPI } from '@/api'
+import { getDealerListAPI, getWarZoneListAPI, getChargeListAPI } from '@/api'
 import { parseTime } from '@/utils'
 import userStore from '@/store/modules/user'
 import { useDatePickerOptions } from '@/hooks'
 import { PROMOTION_STATUS } from '@/dicts'
+import SelectProvinceCity from '../components/SelectProvinceCity'
 import EffectivePlan from './effectivePlan.vue'
 import InvalidPlan from './invalidPlan.vue'
 
@@ -178,51 +139,6 @@ const selActivityDate = () => {
 /************* 选择状态 *************/
 const taskStatusList = ref(Object.values(PROMOTION_STATUS))
 
-/************* 区域查询 *************/
-const provinceList = ref([])
-const cityList = ref([])
-const getProCityList = async () => {
-  const { data } = await getProCityAPI(queryParams)
-  const list = data.map(item => ({
-    label: item.name,
-    value: item.num
-  }))
-  queryParams.provinceId ? (cityList.value = list) : (provinceList.value = list)
-}
-getProCityList()
-// 切换省市范围
-const changeRegion = async () => {
-  if (queryParams.region === '全国') {
-    queryParams.provinceId = ''
-    queryParams.provinceName = ''
-    queryParams.cityId = ''
-    queryParams.cityName = ''
-  } else if (queryParams.region === '省') {
-    queryParams.cityId = ''
-    queryParams.cityName = ''
-  }
-  getPlanList()
-}
-// 选择省
-const selProvince = async () => {
-  // 设置省名
-  queryParams.provinceName = provinceList.value.find(item => item.value === queryParams.provinceId)?.label
-  // 重置城市
-  queryParams.cityId = ''
-  queryParams.cityName = ''
-  cityList.value = []
-  // 重新获取城市列表以及查询列表
-  getProCityList()
-  getPlanList()
-}
-// 选择市
-const selCity = async () => {
-  // 设置市名
-  queryParams.cityName = cityList.value.find(item => item.value === queryParams.cityId)?.label
-  // 重新获取查询列表
-  getPlanList()
-}
-
 /*************** 经销商 ***************/
 const dealerList = ref([])
 const getDealerList = async () => {
@@ -285,4 +201,11 @@ const getPlanList = () => {
   proxy.$refs.effectivePlan.getPlanList('resetPage')
   proxy.$refs.invalidPlan.getPlanList('resetPage')
 }
-</script>
+</script>
\ No newline at end of file
+
+<style scoped
+  lang="scss">
+  ::v-deep(.el-form-item) {
+    width: 350px !important;
+  }
+</style>
\ No newline at end of file

src/views/promotion/task/index.vue

@@ -27,43 +27,8 @@
           </el-radio-group>
         </el-form-item>
         <!-- 省市 -->
-        <el-row>
-          <el-form-item label="区域查询"
-            prop="region">
-            <el-radio-group v-model="queryParams.region"
-              @change="regionChange">
-              <el-radio-button label="全国"
-                value="全国" />
-              <el-radio-button label="省"
-                value="省" />
-              <el-radio-button label="省-市"
-                value="省-市" />
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="省份"
-            prop="province"
-            v-show="queryParams.region !== '全国'">
-            <el-select v-model="queryParams.provinceId"
-              placeholder="请选择省"
-              @change="getProCity">
-              <el-option v-for="item in provinceList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="城市"
-            prop="city"
-            v-show="queryParams.region === '省-市'">
-            <el-select v-model="queryParams.cityId"
-              placeholder="请选择市">
-              <el-option v-for="item in cityList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-row>
+        <SelectProvinceCity :queryParams="queryParams"
+          @change="getTaskList" />
         <el-row>
           <el-form-item label="战区"
             prop="zone">
@@ -104,7 +69,6 @@
       </el-form>
       <!-- 数据表格 -->
       <el-table :data="tableList"
-        :cell-style="{ 'word-wrap': 'break-word', 'white-space': 'normal' }"
         border
         style="width: 100%"
         show-overflow-tooltip>
@@ -164,19 +128,20 @@
 </template>
 
 <script setup>
-import { reactive } from 'vue'
 import { useDatePickerOptions } from '@/hooks'
 import { getWarZoneListAPI, getChargeListAPI, getTaskListAPI, getProCityAPI, deletePromotionSystemAPI, getPromotionSystemAPI, getPromotionActivityAPI } from '@/api'
 import { parseTime } from '@/utils'
-import store from '@/store'
+import { PROMOTION_TASK_STATUS_LIST } from '@/dicts'
 import userStore from '@/store/modules/user'
+import SelectProvinceCity from '../components/SelectProvinceCity'
 
-const { recentPickerOptions: pickerOptions, last7Date, todayDate } = useDatePickerOptions(0)
+const { recentPickerOptions: pickerOptions, todayDate } = useDatePickerOptions(0)
 
 // 城市经理状态为 true
 const isCityManager = userStore().promotionIdentity
 const empInfo = userStore().empInfo
 
+/****************** 任务搜索 ******************/
 const queryParams = reactive({
   taskStatus: '',
   region: '全国',
@@ -189,6 +154,11 @@ const queryParams = reactive({
   pageSize: 10,
   date: todayDate
 })
+
+
+const taskStatusList = ref(PROMOTION_TASK_STATUS_LIST)
+
+
 const photoDialogVisible = ref(false)
 const photoDialogList = ref([])
 const photoLookInfoObj = ref({})
@@ -196,22 +166,6 @@ const total = ref(0)
 
 
 
-// 任务状态
-const taskStatusList = ref([
-  {
-    label: '未审批',
-    value: 'SUBMITTED'
-  },
-  {
-    label: '已审批',
-    value: 'APPROVED'
-  },
-  {
-    label: '全部数据',
-    value: ''
-  }
-])
-
 // 区域查询
 const provinceList = ref([])
 const cityList = ref([])