feat(promotion/task): 促销管理-任务管理

src/api/common/region.js

@@ -4,6 +4,8 @@ import request from '@/utils/request'
 export const getProCityAPI = (params) => {
   return request({
     url: '/system/site/query/region',
-    params
+    params: {
+      provinceNum: params.provinceId,
+    }
   })
 }
\ No newline at end of file

src/views/promotion/task/index.vue

@@ -4,76 +4,64 @@
       <!-- 查询表单 -->
       <el-form :model="queryParams"
         inline
-        label-width="auto">
-        <el-row>
-          <el-col :span="6">
-            <el-form-item label="选择日期"
-              prop="date">
-              <el-date-picker v-model="queryParams.date"
-                type="daterange"
-                :clearable="false"
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-                :shortcuts="pickerOptions"
-                @change="queryChangeFn('date')" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="任务状态"
-              prop="taskStatus">
-              <el-radio-group v-model="queryParams.taskStatus">
-                <el-radio-button v-for="item in taskStatusList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value" />
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-        </el-row>
+        label-width="68px">
+        <el-form-item label="选择日期"
+          prop="date">
+          <el-date-picker v-model="queryParams.date"
+            type="daterange"
+            :clearable="false"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :shortcuts="pickerOptions" />
+        </el-form-item>
+        <el-form-item label="任务状态"
+          prop="taskStatus">
+          <el-radio-group v-model="queryParams.taskStatus">
+            <el-radio-button v-for="item in taskStatusList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value" />
+          </el-radio-group>
+        </el-form-item>
         <!-- 省市 -->
         <el-row>
-          <el-col :span="6">
-            <el-form-item label="区域查询"
-              prop="region">
-              <el-radio-group v-model="queryParams.region">
-                <el-radio-button label="全国"
-                  value="全国" />
-                <el-radio-button label="省"
-                  value="省" />
-                <el-radio-button label="省-市"
-                  value="省-市" />
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="省份"
-              prop="province">
-              <el-select v-model="queryParams.province"
-                placeholder="请选择省"
-                @change="getCityList">
-                <el-option v-for="item in provinceList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value" />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="城市"
-              prop="city">
-              <el-select v-model="queryParams.city"
-                placeholder="请选择市">
-                <el-option v-for="item in cityList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value" />
-              </el-select>
-            </el-form-item>
-          </el-col>
+          <el-form-item label="区域查询"
+            prop="region">
+            <el-radio-group v-model="queryParams.region">
+              <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>
         <el-row>
-          
           <el-form-item label="战区查询"
             prop="zone">
             <el-select v-model="queryParams.zoneId"
@@ -102,6 +90,19 @@
         </el-row>
       </el-form>
       <!-- 数据表格 -->
+      <el-table :data="tableList"
+        :cell-style="{ 'word-wrap': 'break-word', 'white-space': 'normal' }"
+        border
+        style="width: 100%"
+        show-overflow-tooltip>
+        <el-table-column v-for="item in columns"
+          :key="item.label"
+          :prop="item.prop"
+          :label="item.label"
+          :width="item.width"
+          :formatter="formatter"
+          :fixed="item.fixed" />
+      </el-table>
     </div>
   </div>
 </template>
@@ -110,6 +111,7 @@
 import { reactive } from 'vue'
 import { useDatePickerOptions } from '@/hooks'
 import { getWarZoneListAPI, getChargeListAPI, getTaskListAPI, getProCityAPI } from '@/api'
+import { parseTime } from '@/utils'
 
 
 const { pickerOptions, last7Date } = useDatePickerOptions(0)
@@ -117,13 +119,13 @@ const queryParams = reactive({
   date: last7Date,
   taskStatus: 'SUBMITTED',
   region: '全国',
-  province: '',
-  city: '',
+  provinceId: undefined,
+  cityId: undefined,
   zoneId: undefined,
   managerId: undefined,
   storeName: undefined,
   page: 1,
-  pageSize: 10
+  pageSize: 20
 })
 
 // 任务状态
@@ -146,14 +148,19 @@ const taskStatusList = ref([
 const provinceList = ref([])
 const cityList = ref([])
 const getProCity = async () => {
-  const { data } = await getProCityAPI()
-  console.log(data)
-  provinceList.value = data.map(item => {
-    return {
+  const { data } = await getProCityAPI(queryParams)
+  if (queryParams.provinceId) {
+    queryParams.cityId = undefined
+    cityList.value = data.map(item => ({
       label: item.name,
       value: item.num
-    }
-  })
+    }))
+  } else {
+    provinceList.value = data.map(item => ({
+      label: item.name,
+      value: item.num
+    }))
+  }
 }
 getProCity()
 
@@ -185,19 +192,130 @@ getManagerList()
 
 // 任务列表
 const tableList = ref([])
+const columns = ref([
+  {
+    label: 'ID',
+    prop: 'id',
+    width: 90,
+    fixed: true
+  },
+  {
+    label: '姓名',
+    prop: 'temporaryName',
+    width: 90,
+    fixed: true
+  },
+  {
+    label: '上报日期',
+    prop: 'createDate',
+    width: 120,
+    fixed: true
+  },
+  {
+    label: '省份',
+    prop: 'province',
+    width: 100
+  },
+  {
+    label: '城市',
+    prop: 'city',
+    width: 100
+  },
+  {
+    label: '经销商',
+    prop: 'dealerName',
+    width: 250
+  },
+  {
+    label: '门店',
+    prop: 'storeName',
+    width: 250
+  },
+  {
+    label: '活动模式',
+    prop: 'activityPattern',
+    width: 100
+  },
+  {
+    label: '上班卡',
+    prop: 'clockDto.clockInTime', // 拼接地址  clockInAddress, 经纬度 clockInCoordinates
+    width: 300
+  },
+  {
+    label: '午休下班卡',
+    prop: 'clockDto.noonClockOutTime', // 拼接地址  noonClockOutAddress, 经纬度 noonClockOutCoordinates
+    width: 300
+  },
+  {
+    label: '午休上班卡',
+    prop: 'clockDto.noonClockInTime', // 拼接地址  noonClockInAddress, 经纬度 noonClockInCoordinates
+    width: 300
+  },
+  {
+    label: '下班卡',
+    prop: 'clockDto.clockOutTime', // 拼接地址  clockOutAddress, 经纬度 clockOutCoordinates
+    width: 300
+  },
+  {
+    label: '推广图片',
+    prop: ''
+  },
+  {
+    label: '打卡照片',
+    prop: ''
+  },
+  {
+    label: '战区',
+    prop: 'deptQcOrgName',
+    width: 150
+  },
+  {
+    label: '城市经理',
+    prop: 'approveName',
+    width: 120
+  },
+  {
+    label: '操作',
+    prop: ''
+  },
+])
 const getTaskList = async () => {
-  const { data } = await getTaskListAPI(queryParams)
-  tableList.value = data.map(item => {
-    return {
-      label: item.taskName,
-      value: item.taskId
-    }
-  })
+  const { data: { records } } = await getTaskListAPI(queryParams)
+  tableList.value = records
 }
 getTaskList()
+const formatter = (row, columns, value) => {
+  // 判断有值再转换
+  if (columns.property === 'clockDto.clockInTime' && value) {
+    return parseTime(value, '{h}:{i}') + '\n' + row['clockDto']['clockInAddress']
+  } else if (columns.property === 'clockDto.noonClockOutTime' && value) {
+    return parseTime(value, '{h}:{i}') + '\n' + row['clockDto']['noonClockOutAddress']
+  } else if (columns.property === 'clockDto.noonClockInTime' && value) {
+    return parseTime(value, '{h}:{i}') + '\n' + row['clockDto']['noonClockInAddress']
+  } else if (columns.property === 'clockDto.clockOutTime' && value) {
+    return parseTime(value, '{h}:{i}') + '\n' + row['clockDto']['clockOutAddress']
+  }
+  return value
+}
 
 </script>
 
 
 <style scoped
-  lang="scss"></style>
\ No newline at end of file
+  lang="scss">
+  ::v-deep(.el-form-item) {
+    width: 350px !important;
+  }
+
+  /* 单元格支持 \n 换行 */
+  .container .el-table ::v-deep(.cell) {
+    /* white-space: pre-line; */
+    /* 强制显示 2 行，超出的省略号 */
+    /* overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical; */
+
+  }
+</style>
\ No newline at end of file