打卡功能优化

This commit is contained in:
xiezhijun
2021-04-09 19:59:54 +08:00
parent 329a7029b0
commit 1789e77786
7 changed files with 376 additions and 41 deletions

View File

@ -36,9 +36,9 @@ export function updateWxUserLog(data) {
}
// 删除微信用户记录
export function delWxUserLog(openid) {
export function delWxUserLog(id) {
return request({
url: '/custom/wxUserLog/' + openid,
url: '/custom/wxUserLog/' + id,
method: 'delete'
})
}
@ -51,3 +51,12 @@ export function exportWxUserLog(query) {
params: query
})
}
// 根据ID查询打卡日志详情
export function getPunchLogDetail(id) {
return request({
url: '/custom/wxUserLog/getPunchLogDetail/' + id,
method: 'get',
params: {}
})
}

View File

@ -0,0 +1,186 @@
<template>
<el-dialog
:visible.sync="visible"
:title="title"
append-to-body
@closed="onClosed"
width="1000px"
>
<div style="margin-top: -20px;">
<div
style="float: right; "
>
<!--<el-button
type="primary"
plain
>评分</el-button
>-->
</div>
<!-- 打卡信息详情 -->
<div>
<h3>基础信息</h3>
<TableDetailMessage :data="punchLogDetail"></TableDetailMessage>
<h3>图片信息</h3>
<div style="height: 400px; overflow: auto">
<div>
<h4>早餐</h4>
<div>
<el-image v-for="(item, index) in punchLog.imagesUrl.breakfastImages" title="点击大图预览" :key="index"
style="width: 300px; height: 380px"
:src="item"
:preview-src-list="imageUrl">
</el-image>
</div>
</div>
<div>
<h4>午餐</h4>
<div>
<el-image v-for="(item, index) in punchLog.imagesUrl.lunchImages" title="点击大图预览" :key="index"
style="width: 300px; height: 400px"
:src="item"
:preview-src-list="imageUrl">
</el-image>
</div>
</div>
<div>
<h4>晚餐</h4>
<div>
<el-image v-for="(item, index) in punchLog.imagesUrl.dinnerImages" title="点击大图预览" :key="index"
style="width: 300px; height: 400px"
:src="item"
:preview-src-list="imageUrl">
</el-image>
</div>
</div>
<div>
<h4>加餐</h4>
<div>
<el-image v-for="(item, index) in punchLog.imagesUrl.extraMealImages" title="点击大图预览" :key="index"
style="width: 300px; height: 400px"
:src="item"
:preview-src-list="imageUrl">
</el-image>
</div>
</div>
<div>
<h4>体型对比照</h4>
<div>
<el-image v-for="(item, index) in punchLog.imagesUrl.bodyImages" title="点击大图预览" :key="index"
style="width: 300px; height: 400px"
:src="item"
:preview-src-list="imageUrl">
</el-image>
</div>
</div>
</div>
</div>
</div>
</el-dialog>
</template>
<script>
import {
getPunchLogDetail
} from "@/api/custom/wxUserLog";
import TableDetailMessage from "@/components/TableDetailMessage";
export default {
name: "PunchLogDetail",
components: {
TableDetailMessage
},
data() {
return {
visible: false,
title: "",
data: null,
punchLog: null,
imageUrl: [],
punchLogDetail: [],
//打卡详情的标题,按竖显示
punchTitleData: [
["姓名", "体重(斤)","饮水量(ml)"],
["睡觉时间", "起床时间","运动锻炼"],
["情绪","按食谱进食","食谱外食物"],
["熬夜失眠", "起床排便","是否便秘"]
],
//打卡详情的属性名称,与标题对应,按竖显示
punchValueData: [
["customerName","weight","water"],
["sleepTime", "wakeupTime","sport"],
["emotion", "diet","slyEatFood"],
["insomnia","defecation", "constipation"]
],
};
},
methods: {
// 自定义列背景色
columnStyle({ row, column, rowIndex, columnIndex }) {
if (columnIndex % 2 === 0) {
//第三第四列的背景色就改变了2和3都是列数的下标
return "background:#f3f6fc;font-weight:bold";
} else {
return "background:#ffffff;";
}
},
// 自定义备注列背景色
remarkColumnStyle({ row, column, rowIndex, columnIndex }) {
if (columnIndex % 2 === 0) {
//第三第四列的背景色就改变了2和3都是列数的下标
return "background:#f3f6fc;font-weight:bold";
} else {
return "background:#ffffff;";
}
},
showDialog(data) {
this.data = data;
this.title = `${data.customerName}`+" "+`${data.logTime}」打卡记录`;
this.getPunchLogById();
},
getPunchLogById() {
getPunchLogDetail(this.data.id).then((res) => {
if (res.code == 200) {
this.visible = true;
this.punchLog = res.data;
res.data.sport = res.data.sport === "Y" ? "是" : "否";
res.data.diet = res.data.diet === "Y" ? "是" : "否";
res.data.insomnia = res.data.insomnia === "Y" ? "是" : "否";
res.data.defecation = res.data.defecation === "Y" ? "是" : "否";
res.data.constipation = res.data.constipation === "Y" ? "是" : "否";
for (let i = 0; i < this.punchTitleData.length; i++) {
this.punchLogDetail.push({
attr_name_one: this.punchTitleData[i][0],
value_one: res.data[this.punchValueData[i][0]],
attr_name_two: this.punchTitleData[i][1],
value_two: res.data[this.punchValueData[i][1]],
attr_name_three: this.punchTitleData[i][2],
value_three: res.data[this.punchValueData[i][2]],
});
}
let imageUrl = [];
imageUrl = imageUrl.concat(res.data.imagesUrl.breakfastImages);
imageUrl = imageUrl.concat(res.data.imagesUrl.lunchImages);
imageUrl = imageUrl.concat(res.data.imagesUrl.dinnerImages);
imageUrl = imageUrl.concat(res.data.imagesUrl.extraMealImages);
imageUrl = imageUrl.concat(res.data.imagesUrl.bodyImages);
this.imageUrl = imageUrl;
}
});
},
onClosed() {
this.data = null;
this.punchLog = null,
this.punchLogDetail = []
}
},
};
</script>
<style lang="scss" scoped>
</style>

View File

@ -7,7 +7,7 @@
v-show="showSearch"
label-width="68px"
>
<el-form-item label="微信应用" prop="appid">
<!--<el-form-item label="微信应用" prop="appid">
<el-select
v-model="queryParams.appid"
placeholder="请选择微信应用"
@ -21,7 +21,7 @@
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
</el-form-item>-->
<el-form-item label="客户信息" prop="phone">
<el-input
v-model="queryParams.phone"
@ -41,6 +41,17 @@
/>
</el-select>
</el-form-item>
<el-form-item label="售后" prop="afterNutritionistId">
<el-select v-model="queryParams.afterNutritionistId" clearable filterable placeholder="请选择">
<el-option
v-for="dict in afterSaleIdOptions.slice(1)"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="parseInt(dict.dictValue)"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button
type="cyan"
@ -109,32 +120,16 @@
:data="wxUserLogList"
@selection-change="handleSelectionChange"
>
<el-table-column label="用户头像" align="center" prop="avatarUrl">
<!--<el-table-column label="用户头像" align="center" prop="avatarUrl">
<template slot-scope="scope">
<el-image
:src="scope.row.avatarUrl"
style="width: 32px; height: 32px; border-radius: 50%"
/>
</template>
</el-table-column>
</el-table-column>-->
<!-- <el-table-column type="selection" width="55" align="center" />-->
<!-- <el-table-column label="微信openid" align="center" prop="openid" />-->
<el-table-column label="当天体重" align="center" prop="weight">
<template slot-scope="scope">
<span>{{ `${scope.row.weight}` }}</span>
</template>
</el-table-column>
<el-table-column
label="微信应用"
align="center"
prop="appid"
width="120"
:formatter="appidFormat"
/>
<el-table-column label="姓名" align="center" prop="customerName" />
<el-table-column label="手机号" align="center" prop="phone" width="180" />
<el-table-column label="营养师" align="center" prop="nutritionist" />
<el-table-column
label="打卡日期"
align="center"
@ -145,15 +140,31 @@
<span>{{ parseTime(scope.row.logTime, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<el-table-column label="姓名" align="center" prop="customerName" />
<el-table-column label="当天体重" align="center" prop="weight">
<template slot-scope="scope">
<span>{{ `${scope.row.weight}` }}</span>
</template>
</el-table-column>
<!--<el-table-column
label="微信应用"
align="center"
prop="appid"
width="120"
:formatter="appidFormat"
/>-->
<!--<el-table-column label="手机号" align="center" prop="phone" width="180" />-->
<el-table-column label="营养师" align="center" prop="nutritionist" />
<el-table-column label="售后" align="center" prop="afterNutritionist" />
<el-table-column
label="睡觉时间"
align="center"
prop="sleepTime"
width="120"
>
<!-- <template slot-scope="scope">-->
<!-- <span>{{ parseTime(scope.row.sleepTime, '{y}-{m}-{d}') }}</span>-->
<!-- </template>-->
</el-table-column>
<el-table-column
label="起床时间"
@ -161,9 +172,6 @@
prop="wakeupTime"
width="120"
>
<!-- <template slot-scope="scope">-->
<!-- <span>{{ parseTime(scope.row.wakeupTime, '{y}-{m}-{d}') }}</span>-->
<!-- </template>-->
</el-table-column>
<el-table-column
label="运动锻炼"
@ -171,12 +179,33 @@
prop="sport"
:formatter="sportFormat"
/>
<el-table-column
label="情绪"
align="center"
prop="emotion"
width="160"
>
<template slot-scope="scope">
<AutoHideMessage :maxLength="4" :data="scope.row.emotion"></AutoHideMessage>
</template>
</el-table-column>
<el-table-column
label="按食谱"
align="center"
prop="diet"
:formatter="dietFormat"
/>
<el-table-column
label="其他食物"
align="center"
prop="slyEatFood"
width="160"
>
<template slot-scope="scope">
<AutoHideMessage :maxLength="4" :data="scope.row.slyEatFood"></AutoHideMessage>
</template>
</el-table-column>
<el-table-column
label="熬夜失眠"
align="center"
@ -189,6 +218,12 @@
prop="defecation"
:formatter="defecationFormat"
/>
<el-table-column
label="便秘"
align="center"
prop="constipation"
:formatter="constipationFormat"
/>
<el-table-column label="饮水量" align="center" prop="water">
<template slot-scope="scope">
<span>{{ `${scope.row.water} ml` }}</span>
@ -201,13 +236,20 @@
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="showPunchLogDetail(scope.row)"
v-hasPermi="['custom:wxUserLog:query']"
>详情
</el-button>
<!--<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['custom:wxUserLog:edit']"
>修改
</el-button>
</el-button>-->
<el-button
size="mini"
type="text"
@ -357,6 +399,8 @@
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
<PunchLogDetail ref="punchLogDetailRef"></PunchLogDetail>
</div>
</template>
@ -370,7 +414,8 @@ import {
updateWxUserLog,
} from "@/api/custom/wxUserLog";
import { mapGetters } from "vuex";
import PunchLogDetail from "@/components/PunchLog/PunchLogDetail";
import AutoHideMessage from "@/components/AutoHideMessage";
export default {
name: "WxUserLog",
data() {
@ -409,7 +454,8 @@ export default {
pageSize: 10,
appid: null,
phone: null,
nutritionistId: null
nutritionistId: null,
afterNutritionistId: null
},
// 表单参数
form: {},
@ -422,6 +468,9 @@ export default {
},
};
},
components:{
PunchLogDetail,AutoHideMessage
},
created() {
this.getList();
this.getDicts("cus_wx_app").then((response) => {
@ -478,6 +527,10 @@ export default {
defecationFormat(row, column) {
return this.selectDictLabel(this.defecationOptions, row.defecation);
},
// 便秘情况字典翻译
constipationFormat(row, column) {
return this.selectDictLabel(this.defecationOptions, row.constipation);
},
// 取消按钮
cancel() {
this.open = false;
@ -590,6 +643,9 @@ export default {
})
.catch(function () {});
},
showPunchLogDetail(data){
this.$refs.punchLogDetailRef.showDialog(data);
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;