客户档案加上打卡记录以及体重趋势图

stdiet-ui/src/components/PunchLog/CustomerPunchLog/index.vue

@@ -0,0 +1,190 @@
+<template>
+  <el-drawer
+    :title="title"
+    :close-on-press-escape="false"
+    :visible.sync="visible"
+    @closed="handleOnClosed"
+    size="45%"
+  >
+    <div class="app-container punchLog_drawer_wrapper">
+      <div class="header">
+        <section>
+          <el-button icon="el-icon-view" size="mini" @click="showPunchLogChart()"
+            >体重趋势图
+          </el-button>
+        </section>
+        <section>
+          <el-button
+            icon="el-icon-refresh"
+            size="mini"
+            @click="getList"
+            circle
+          />
+        </section>
+      </div>
+
+      <el-table :data="punchLogList" v-loading="planLoading" height="80%">
+        <el-table-column label="打卡日期" align="center"  prop="logTime"/>
+        <el-table-column label="体重(斤)" align="center"  prop="weight"/>
+        <el-table-column label="饮水量(ml)" align="center"  prop="water"/>
+        <el-table-column label="营养师" align="center" prop="nutritionist" />
+        <el-table-column label="售后" align="center" prop="afterNutritionist" />
+        <el-table-column label="操作" align="center" width="160">
+          <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
+              type="text"
+              icon="el-icon-delete"
+              v-hasPermi="['custom:wxUserLog:remove']"
+              @click="handleOnDelete(scope.row)"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+    </div>
+    <!-- 详情 -->
+    <PunchLogDetail ref="punchLogDetailRef"></PunchLogDetail>
+    <!-- 编辑 -->
+    <PunchLogEdit ref="punchLogEditRef"></PunchLogEdit>
+    <!-- 体重趋势图 -->
+    <PunchLogChart ref="punchLogChartRef"></PunchLogChart>
+  </el-drawer>
+</template>
+<script>
+import {
+  addWxUserLog,
+  delWxUserLog,
+  exportWxUserLog,
+  getWxUserLog,
+  listWxUserLog,
+  updateWxUserLog,
+} from "@/api/custom/wxUserLog";
+import PunchLogDetail from "@/components/PunchLog/PunchLogDetail";
+import PunchLogEdit from "@/components/PunchLog/PunchLogEdit";
+import PunchLogChart from "@/components/PunchLog/PunchLogChart";
+import dayjs from "dayjs";
+export default {
+  name: "CustomerPunchLog",
+  components: {
+    PunchLogDetail,PunchLogEdit,PunchLogChart
+  },
+  data() {
+    return {
+      open: false,
+      visible: false,
+      title: "",
+      planLoading: false,
+      data: null,
+      punchLogList: [],
+      total: 0,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        customerId: null
+      },
+    };
+  },
+  methods: {
+    showDrawer(data) {
+      // console.log(data);
+      this.data = data;
+      if (this.data == undefined || this.data == null) {
+        return;     
+      }
+      this.punchLogList = [];
+      this.total = 0;
+      this.visible = true;
+      this.title = `「${this.data.name}」打卡记录`;
+      this.getList();
+    },
+    getList() {
+      this.planLoading = true;
+      this.queryParams.customerId = this.data.id;
+      listWxUserLog(this.queryParams).then((response) => {
+        if(response.code == 200){
+          this.punchLogList = response.rows;
+          this.total = response.total;
+        }
+        this.planLoading = false;
+      });
+    },
+    reset() {
+      
+    },
+    handleOnClosed(){
+      this.data = null
+    },
+    showPunchLogDetail(data){
+        this.$refs.punchLogDetailRef.showDialog(data);
+    },
+    showPunchLogChart(){
+        this.$refs.punchLogChartRef.showDialog(this.data);
+    },
+    handleUpdate(data){
+        this.$refs.punchLogEditRef.showDialog(data, () => {
+          this.getList();
+        });
+    },
+    /** 删除按钮操作 */
+    handleOnDelete(row) {
+      const ids = row.id;
+      this.$confirm(
+        '是否确定删除该用户' + row.logTime + '的打卡记录?',
+        "警告",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(function () {
+          return delWxUserLog(ids);
+        })
+        .then(() => {
+          this.getList();
+          this.msgSuccess("删除成功");
+        })
+        .catch(function () {});
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+/deep/ :focus {
+  outline: 0;
+}
+
+.punchLog_drawer_wrapper {
+  height: calc(100vh - 77px);
+
+  .header {
+    margin-bottom: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+</style>

stdiet-ui/src/components/PunchLog/PunchLogChart/index.vue

@@ -0,0 +1,89 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    :title="title"
+    append-to-body
+    @closed="onClosed"
+    width="1000px"
+  >
+    <div id="container">
+        <LineCharts v-if="visible" :chartOption="punchLogChartOption"></LineCharts>
+    </div>  
+  </el-dialog>
+</template>
+<script>
+import {
+  getAllPunchLogByCustomerId
+} from "@/api/custom/wxUserLog";
+import LineCharts from "@/components/Highcharts/LineCharts";
+
+export default {
+  name: "PunchLogChart",
+  components: {
+      LineCharts
+  },
+  data() {
+    return {
+      visible: false,
+      title: "",
+      data: null,
+      punchLogChartOption:{
+        imageFileName: "体重趋势图",
+        yAxisTitle: "体重(斤)",
+        seriesName: "体重趋势(斤)",
+        xAxisData: [],
+        seriesData: []
+      },
+      punchLogList:[],
+      queryParams:{
+         customerId: null
+      }
+    };
+  },
+  methods: {
+    showDialog(data) {
+      this.data = data;
+      this.title = `「${data.name}」体重趋势图`;
+      this.queryParams.customerId = data.id;
+      this.punchLogChartOption.imageFileName = data.name + "体重趋势图"
+      this.getAllPunchLogByCustomerId();
+     
+    },
+    getAllPunchLogByCustomerId() {
+        getAllPunchLogByCustomerId(this.queryParams).then((res) => {
+          if (res.code == 200) {
+            this.punchLogList = res.data;
+            this.dealPunchLogList(res.data);
+            this.visible = true;
+          }
+        });
+    },
+    dealPunchLogList(data){
+        let xAxisData = [];
+        let seriesData = [];
+        if(data && data.length > 0){
+            data.forEach((element,index) => {
+              xAxisData.push(element.logTime);
+              seriesData.push(element.weight);
+              if(index == data.length-1){
+                 this.punchLogChartOption.xAxisData = xAxisData;
+                 this.punchLogChartOption.seriesData = seriesData;
+              }
+            });
+        }else{
+            this.punchLogChartOption.xAxisData = xAxisData;
+            this.punchLogChartOption.seriesData = seriesData;
+        }
+    },
+    onClosed() {
+      this.data = null;
+      this.punchLog = null;
+      this.punchLogList = [];
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

stdiet-ui/src/components/PunchLog/PunchLogDetail/index.vue

@@ -27,7 +27,7 @@
             <TableDetailMessage :data="punchLogDetail"></TableDetailMessage>
             <h3>二、图片信息</h3>
             <div style="height: 400px; overflow: auto">
-              <div>
+              <div v-if="punchLog != null && punchLog.imagesUrl.breakfastImages.length > 0">
                 <h4>早餐</h4>
                 <div>
                   <el-image v-for="(item, index) in punchLog.imagesUrl.breakfastImages" title="点击大图预览" :key="index"
@@ -37,7 +37,7 @@
                   </el-image>
                 </div>
               </div>
-              <div>
+              <div v-if="punchLog != null && punchLog.imagesUrl.lunchImages.length > 0">
                 <h4>午餐</h4>
                 <div>
                   <el-image v-for="(item, index) in punchLog.imagesUrl.lunchImages" title="点击大图预览" :key="index"
@@ -47,7 +47,7 @@
                   </el-image>
                 </div>
               </div>
-              <div>
+              <div v-if="punchLog != null && punchLog.imagesUrl.dinnerImages.length > 0">
                 <h4>晚餐</h4>
                 <div>
                   <el-image v-for="(item, index) in punchLog.imagesUrl.dinnerImages" title="点击大图预览" :key="index"
@@ -57,7 +57,7 @@
                   </el-image>
                 </div>
               </div>
-              <div>
+              <div  v-if="punchLog != null && punchLog.imagesUrl.extraMealImages.length > 0">
                 <h4>加餐</h4>
                 <div>
                   <el-image v-for="(item, index) in punchLog.imagesUrl.extraMealImages" title="点击大图预览" :key="index"
@@ -67,7 +67,7 @@
                   </el-image>
                 </div>
               </div>
-              <div>
+              <div v-if="punchLog != null && punchLog.imagesUrl.bodyImages.length > 0">
                 <h4>体型对比照</h4>
                 <div>
                   <el-image v-for="(item, index) in punchLog.imagesUrl.bodyImages" title="点击大图预览" :key="index"
@@ -105,7 +105,7 @@ export default {
       punchTitleData: [
         ["姓名", "体重(斤)","饮水量(ml)"],
         ["睡觉时间", "起床时间","运动锻炼"],
-        ["情绪","按食谱进食","食谱外食物"],
+        ["情绪","按食谱进食","其他食物"],
         ["熬夜失眠", "起床排便","是否便秘"]
       ],
       //打卡详情的属性名称，与标题对应，按竖显示
@@ -175,6 +175,7 @@ export default {
     onClosed() {
       this.data = null;
       this.punchLog = null,
+      this.imageUrl = [],
       this.punchLogDetail = []
     }
   },

stdiet-ui/src/components/PunchLog/PunchLogEdit/index.vue

@@ -0,0 +1,271 @@
+<template>
+  <!-- 修改打卡记录基础信息对话框 -->
+    <el-dialog :title="title" :visible.sync="visible" width="600px" append-to-body>
+      <el-row :gutter="15">
+        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+          
+          <el-col :span="12">
+            <el-form-item label="体重" prop="weight">
+              <el-input v-model="form.weight" placeholder="请输入体重" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="打卡日期" prop="logTime">
+              <el-date-picker
+                clearable
+                size="small"
+                style="width: 192px;"
+                v-model="form.logTime"
+                type="date"
+                value-format="yyyy-MM-dd"
+                placeholder="选择打卡时间"
+                :picker-options="logTimePickerOptions"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="睡觉时间" prop="sleepTime">
+              <el-time-select
+                clearable
+                size="small"
+                style="width: 192px"
+                v-model="form.sleepTime"
+                :picker-options="{
+                  start: '00:00',
+                  step: '00:15',
+                  end: '23:45',
+                }"
+                placeholder="选择睡觉时间"
+              >
+              </el-time-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="起床时间" prop="wakeupTime">
+              <el-time-select
+                clearable
+                size="small"
+                style="width: 192px"
+                v-model="form.wakeupTime"
+                :picker-options="{
+                  start: '00:00',
+                  step: '00:15',
+                  end: '23:45',
+                }"
+                placeholder="选择睡觉时间"
+              >
+              </el-time-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="运动锻炼" prop="sport">
+              <el-select v-model="form.sport" placeholder="请选择运动情况">
+                <el-option
+                  v-for="dict in yesNoOptions"
+                  :key="dict.dictValue"
+                  :label="dict.dictLabel"
+                  :value="dict.dictValue"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="按食谱" prop="diet">
+              <el-select v-model="form.diet" placeholder="请选择饮食情况">
+                <el-option
+                  v-for="dict in yesNoOptions"
+                  :key="dict.dictValue"
+                  :label="dict.dictLabel"
+                  :value="dict.dictValue"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="熬夜失眠" prop="insomnia">
+              <el-select v-model="form.insomnia" placeholder="请选择熬夜失眠">
+                <el-option
+                  v-for="dict in yesNoOptions"
+                  :key="dict.dictValue"
+                  :label="dict.dictLabel"
+                  :value="dict.dictValue"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="起床排便" prop="defecation">
+              <el-select v-model="form.defecation" placeholder="请选择排便情况">
+                <el-option
+                  v-for="dict in yesNoOptions"
+                  :key="dict.dictValue"
+                  :label="dict.dictLabel"
+                  :value="dict.dictValue"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="便秘" prop="constipation">
+              <el-select v-model="form.constipation" placeholder="请选择便秘情况">
+                <el-option
+                  v-for="dict in yesNoOptions"
+                  :key="dict.dictValue"
+                  :label="dict.dictLabel"
+                  :value="dict.dictValue"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="饮水量" prop="water">
+              <el-input v-model="form.water" style="width: 192px" placeholder="请输入饮水量" />
+            </el-form-item>
+          </el-col>
+          <el-col>
+            <el-form-item label="情绪" prop="emotion">
+              <el-input
+                v-model="form.emotion"
+                type="textarea"
+                placeholder="请输入情绪"
+              />
+            </el-form-item>
+          </el-col>
+           
+           <el-col>
+            <el-form-item label="其他食物" prop="slyEatFood">
+              <el-input
+                v-model="form.slyEatFood"
+                type="textarea"
+                placeholder="请输入其他食物"
+              />
+            </el-form-item>
+          </el-col>
+        </el-form>
+      </el-row>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+</template>
+<script>
+import {
+  getWxUserLog,updateWxUserLog
+} from "@/api/custom/wxUserLog";
+import dayjs from "dayjs";
+
+export default {
+  name: "PunchLogEdit",
+  components: {
+      
+  },
+  data() {
+    return {
+      visible: false,
+      title: "",
+      punchLog: null,
+      form: {},
+      rules:{
+        weight: [
+          { required: true, message: "体重不能为空", trigger: "blur" },
+          {
+            required: true,
+            trigger: "blur",
+            pattern: /^(([^0][0-9]+|0)\.([0-9]{1,2})$)|^([^0][0-9]+|0)$/,
+            message: "体重格式不正确",
+          },
+        ],
+        water: [
+            { required: true, message: "饮水量不能为空", trigger: "blur" },
+            {
+                required: true,
+                trigger: "blur",
+                pattern: /^([^0][0-9]+|0)$/,
+                message: "饮水量格式不正确",
+            }
+        ],
+        logTime: [
+            { required: true, message: "打卡时间不能为空", trigger: "blur" },
+        ]
+      },
+      logTimePickerOptions: {
+        disabledDate(time) {
+          return time.getTime() > dayjs()
+        },
+      },
+      yesNoOptions: [],
+      callback: null
+    };
+  },
+  created(){
+        this.getDicts("sys_yes_no").then((response) => {
+            this.yesNoOptions = response.data;
+        });
+  },
+  methods: {
+    showDialog(data, callback) {
+      this.punchLog = data;
+      this.callback = callback;
+      this.title = `修改「${data.customerName}`+" "+`${data.logTime}」打卡记录`;
+      this.getWxUserLog();
+    },
+    getWxUserLog() {
+        this.reset();
+        getWxUserLog(this.punchLog.id).then((response) => {
+            if (response.code == 200) {
+                this.form = response.data;
+                this.visible = true;
+            }
+        });
+    },
+    reset(){
+        this.form = {
+            id: null,
+            weight: null,
+            sleepTime: null,
+            wakeupTime: null,
+            sport: null,
+            diet: null,
+            insomnia: null,
+            defecation: null,
+            water: null,
+            logTime: null,
+            constipation: null,
+            emotion: null,
+            slyEatFood: null
+
+      };
+      this.resetForm("form");
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateWxUserLog(this.form).then((response) => {
+              if (response.code === 200) {
+                this.msgSuccess("修改成功");
+                this.visible = false;
+                this.callback && this.callback();
+              }
+            });
+          }
+        }
+      });
+    },
+    onClosed() {
+      this.form = null;
+      this.punchLog = null
+    },
+    cancel(){
+        this.visible = false
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>