Skip to content

W
wangxiaolu-sfa-ui
提交 a3b7893e authored 作者: lidongxu's avatar lidongxu
浏览文件
操作

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

同上
上级 734977aa
隐藏空白字符变更
内嵌 并排
正在显示 包含 154 行增加 和 11 行删除
src/api/promotion/task.js
浏览文件 @ a3b7893e
......@@ -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
浏览文件 @ a3b7893e
......@@ -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
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论