feat(task): 完成打卡图片展示和人物列表中任务状态的作战室

src/api/promotion/task.js

@@ -77,4 +77,23 @@ export function deletePromotionSystemAPI(id) {
     url: `/activity/employee/core/delete/${id}`,
     method: 'DELETE'
   }) 
+}
+
+// 促销员打卡记录查询（上下班卡）
+export function getPromotionSystemAPI(id) {
+  return request({
+    baseURL: VITE_APP_PROMOTION,
+    url: `/temporary/clock/query/id`,
+    params: {
+      id
+    }
+  }) 
+}
+
+// 促销员活动记录查询（推广照片）
+export function getPromotionActivityAPI(id) {
+  return request({
+    baseURL: VITE_APP_PROMOTION,
+    url: `/activity/temporary/query/${id}`
+  })
 }
\ No newline at end of file

src/views/promotion/task/index.vue

@@ -105,9 +105,14 @@
           :formatter="formatter"
           :fixed="item.fixed" />
         <el-table-column label="操作"
-          width="150"
+          width="200"
           fixed="right">
           <template #default="scope">
+            <el-button type="primary"
+              @click="lookPhoto(scope.row)"
+              text>
+              查看照片
+            </el-button>
             <el-button type="danger"
               @click="deleteView(scope.row)"
               text>
@@ -116,6 +121,26 @@
           </template>
         </el-table-column>
       </el-table>
+      <!-- 照片查看弹窗 -->
+      <el-dialog :title="photoLookInfoObj.storeName"
+        v-model="photoDialogVisible"
+        width="60%">
+        <p>活动记录 ID :{{ photoLookInfoObj.id }}</p>
+        <p>活动时间 :{{ photoLookInfoObj.createDate }}</p>
+        <el-card v-for="obj in photoDialogList">
+          <template #header>{{ obj.title }}</template>
+          <div class="content">
+            <el-result :title="item.time"
+              :sub-title="item.title"
+              v-for="item in obj.list">
+              <template #icon>
+                <el-image :src="item.photoUrl"
+                  :preview-src-list="[item.photoUrl]" />
+              </template>
+            </el-result>
+          </div>
+        </el-card>
+      </el-dialog>
     </div>
   </div>
 </template>
@@ -123,7 +148,7 @@
 <script setup>
 import { reactive } from 'vue'
 import { useDatePickerOptions } from '@/hooks'
-import { getWarZoneListAPI, getChargeListAPI, getTaskListAPI, getProCityAPI, deletePromotionSystemAPI } from '@/api'
+import { getWarZoneListAPI, getChargeListAPI, getTaskListAPI, getProCityAPI, deletePromotionSystemAPI, getPromotionSystemAPI, getPromotionActivityAPI } from '@/api'
 import { parseTime } from '@/utils'
 import store from '@/store'
 import { ElMessage, ElMessageBox } from 'element-plus';
@@ -141,6 +166,9 @@ const queryParams = reactive({
   page: 1,
   pageSize: 20
 })
+const photoDialogVisible = ref(false)
+const photoDialogList = ref([])
+const photoLookInfoObj = ref({})
 
 // 城市经理状态为 true
 const cityManagerPrivilege = computed(() => {
@@ -258,6 +286,11 @@ const columns = ref([
     prop: 'activityPattern',
     width: 100
   },
+  {
+    label: '任务状态',
+    prop: 'approveStatus',
+    width: 150
+  },
   {
     label: '上班卡',
     prop: 'clockDto.clockInTime', // 拼接地址  clockInAddress, 经纬度 clockInCoordinates
@@ -278,14 +311,6 @@ const columns = ref([
     prop: 'clockDto.clockOutTime', // 拼接地址  clockOutAddress, 经纬度 clockOutCoordinates
     width: 300
   },
-  {
-    label: '推广图片',
-    prop: ''
-  },
-  {
-    label: '打卡照片',
-    prop: ''
-  },
   {
     label: '战区',
     prop: 'deptQcOrgName',
@@ -293,7 +318,7 @@ const columns = ref([
   },
   {
     label: '城市经理',
-    prop: 'approveName',
+    prop: 'manageName',
     width: 120
   }
 ])
@@ -311,6 +336,7 @@ const deleteView = async (row) => {
   ElMessage.success('删除成功')
 }
 
+// 获取任务列表
 const getTaskList = async () => {
   // 城市经理查自己，职能角色查所有（需要的是促销系统 id）
   if (cityManagerPrivilege.value) {
@@ -334,10 +360,90 @@ const formatter = (row, columns, 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']
+  } else if (columns.property === 'approveStatus' && value) {
+   const obj = {
+    SUBMITTED: '未审批',
+    APPROVED: '已审批'
+   }
+   return obj[value]
   }
   return value
 }
+// 查看照片
+const lookPhoto = async (row) => {
+  console.log(row)
+  photoDialogVisible.value = true
+  photoLookInfoObj.value = row
+  const result = await getPromotionActivityAPI(row.id)
+  const { tgcjPhotoInfos: tgcjPhotoInfosList, tghdPhotoInfos: tghdPhotoInfosList, tgscPhotoInfos: tgscPhotoInfosList } = result.data
+  if (tghdPhotoInfosList) {
+    var tgscPhotoInfos = [...tgscPhotoInfosList?.map(item => ({
+      time: parseTime(item.createTime, '{h}:{i}'),
+      photoUrl: item.photoUrl
+    }))]
+  }
+  if (tghdPhotoInfosList) {
+    var tghdPhotoInfos = [...tghdPhotoInfosList?.map(item => ({
+      time: parseTime(item.createTime, '{h}:{i}'),
+      photoUrl: item.photoUrl
+    }))]
+  }
+  if (tgcjPhotoInfosList) {
+    var tgcjPhotoInfos = [...tgcjPhotoInfosList?.map(item => ({
+      time: parseTime(item.createTime, '{h}:{i}'),
+      photoUrl: item.photoUrl
+    }))]
+  }
 
+  const res = await getPromotionSystemAPI(row.clockDto.id)
+  // 判断上班卡，午休下班卡，午休上班卡，下班卡是否有值，有则添加到数组中
+  // 数组是二维数组，第一到三是推广数据，第四个是打卡数据
+  const { clockInTime, noonClockOutTime, noonClockInTime, clockOutTime } = res.data
+  const clockList = []
+  if (clockInTime) {
+    clockList.push({
+      time: parseTime(clockInTime, '{h}:{i}'),
+      title: '上班卡',
+      photoUrl: res.data.clockInPhoto
+    })
+  }
+  if (noonClockOutTime) {
+    clockList.push({
+      time: parseTime(noonClockOutTime, '{h}:{i}'),
+      title: '午休下班卡',
+      photoUrl: res.data.noonClockOutPhoto
+    })
+  }
+  if (noonClockInTime) {
+    clockList.push({
+      time: parseTime(noonClockInTime, '{h}:{i}'),
+      title: '午休上班卡',
+      photoUrl: res.data.noonClockInPhoto
+    })
+  }
+  if (clockOutTime) {
+    clockList.push({
+      time: parseTime(clockOutTime, '{h}:{i}'),
+      title: '下班卡',
+      photoUrl: res.data.clockOutPhoto
+    })
+  }
+
+  // 组装数据
+  photoDialogList.value = [{
+    title: '推广试吃照片',
+    list: tgscPhotoInfos
+  }, {
+    title: '推广互动照片',
+    list: tghdPhotoInfos
+  }, {
+    title: '推广成交照片',
+    list: tgcjPhotoInfos
+  }, {
+    title: '考勤打卡照片',
+    list: clockList
+  }]
+}
 </script>
 
 
@@ -358,4 +464,20 @@ const formatter = (row, columns, value) => {
     -webkit-box-orient: vertical; */
 
   }
+
+  ::v-deep(.el-overlay) {
+    .content {
+      display: flex;
+
+      .el-result {
+        width: 350px;
+        height: 300px;
+
+        .el-image {
+          width: 180px;
+          height: 180px;
+        }
+      }
+    }
+  }
 </style>
\ No newline at end of file