diagnosis.admin/src/views/diagnosis/HealthTracking.vue

<template>
  <div class="physical">
    <!-- 底部数据 -->
    <div class="data-show">
      <div style="margin-bottom:10px;" class="flex flex-row-between flex-col-center">
        <div>
          <el-button style="width:80px;" type="warning" size="mini" @click="back()">返回</el-button>
        </div>
        <div style="font-size:16px;font-weight:600;">健康跟踪记录</div>
        <div>
          <el-button style="width:80px;" type="primary" size="mini" @click="openPopup">新增</el-button>
        </div>
      </div>

      <div class="today-table">
        <el-table :data="tableData" stripe style="width: 100%" border height="100%">
          <!-- <el-table-column type="selection" width="55">
          </el-table-column>-->
          <el-table-column prop="id" label="序号" width="50" align="center"></el-table-column>
          <el-table-column prop="createTime" label="记录时间" width="150" align="center"></el-table-column>
          <el-table-column prop="recorder" label="记录人" width="100" align="center"></el-table-column>
          <el-table-column prop="content" label="记录内容" align="center">
            <template slot-scope="scope">
              <div class="ellipsis-line1">{{scope.row.content}}</div>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="find(scope)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="flex-vertical-center-r today-page">
        <el-pagination
          background
          layout=" prev, pager, next, jumper, total"
          :total="total"
          :page-size="limit"
          @current-change="sizeC($event)"
        ></el-pagination>
      </div>
    </div>

    <!-- 跟踪记录 添加 -->
    <popup
      :showDialog.sync="showPopup"
      width="40%"
      :showBtns="false"
      title="健康跟踪记录"
      :showBody="false"
      distanceTop="10vh"
    >
      <template slot="body">
        <div>
          <el-input
            :disabled="isDisable"
            v-model="content"
            type="textarea"
            placeholder="请输入健康跟踪内容"
            :autosize="{ minRows: 5, maxRows: 20}"
          ></el-input>
        </div>
        <div
          class="flex flex-col-center flex-row-center"
          style="margin-top:10px;"
          v-if="!isDisable"
        >
          <el-button size="small" type="primary" @click="sureSubmit">确定</el-button>
          <el-button size="small" @click="canclePopup">取消</el-button>
        </div>
      </template>
    </popup>
  </div>
</template>
<script>
import popup from "@/components/Propup";
import { getHealthTrack, addHealthTrack } from "@/api/diagnosis.js";

export default {
  components: {
    popup
  },
  data() {
    return {
      search_name: "",
      page: 1,
      limit: 10,
      total: 0,
      tableData: [],
      content: "",
      showPopup: false,
      isDisable: false
    };
  },
  created() {
    this.getHealthTrack();
  },
  methods: {
    canclePopup() {
      this.showPopup = false;
      this.content = "";
      this.isDisable = false;
    },
    openPopup() {
      this.showPopup = true;
      this.content = "";
      this.isDisable = false;
    },
    find(scope) {
      this.showPopup = true;
      this.content = scope.row.content;
      this.isDisable = true;
    },
    // 返回按钮点击
    back() {
      // this.$router.push({
      //     path: '/index/physical'
      // })
      this.$router.back();
    },
    sizeC(e) {
      this.page = e;
      this.getHealthTrack();
    },
    sureSubmit() {
      if (!this.content) {
        this.$message.error("内容不能为空");
        return;
      }
      this.addHealthTrack(this.$route.query.pid);
    },
    // 获取列表
    async getHealthTrack() {
      let res = await getHealthTrack({
        dentificationId: this.$route.query.pid,
        page: this.page,
        limit: this.limit
      });
      if (res.ResultCode == 0) {
        this.tableData = res.Data.Items;
        this.total = res.Data.TotalRecordCount;

        this.tableData.filter((item, index) => {
          if (this.page > 1) {
            return (item.id = (this.page - 1) * 10 + (index + 1));
          } else {
            return (item.id = index + 1);
          }
        });
      }
    },
    // 添加 记录
    async addHealthTrack(id) {
      let res = await addHealthTrack({
        dentificationId: id,
        content: this.content
      }).catch(err => {});
      if (res.ResultCode == 0) {
        this.$message({
          type: "success",
          message: "新增成功",
          showClose: true
        });
        this.canclePopup();

        this.getHealthTrack();
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";
@import "../../style/base.scss";

.data-show {
  margin-top: 5px;
  padding: 10px;
  background: #ffffff;
  border-radius: 5px;
  height: 77vh;

  .btns {
    margin-bottom: 30px;

    div {
      width: 74px;
      height: 36px;
      background: #9F643A;
      border-radius: 4px;

      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      cursor: pointer;
    }

    .bg-yellow {
      background: #ffae45;
      margin-left: 20px;
    }
  }

  .today-table {
    height: 82%;

    .operation {
      div {
        width: 60px;
        height: 24px;
        background: #9F643A;
        border-radius: 2px;
        cursor: pointer;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }

      .bg-yellow {
        background: #ffae45;
        margin-left: 15px;
      }
    }
  }
}

.table::v-deep .el-table .cell {
  text-align: center;
}
</style>

<style lang="scss" scoped>
@media screen and (min-width: 1681px) and (max-width: 1920px) {
  .data-show {
    height: 85vh;

    .today-table {
      height: 90%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 18px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 18px 0;
  }
}

@media screen and (min-width: 1601px) and (max-width: 1680px) {
  .data-show {
    height: 85vh;

    .today-table {
      height: 90%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 16px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 16px 0;
  }

  .today-table::v-deep .el-table td {
    padding: 16px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 18px 0;
  }
}

@media screen and (min-width: 1361px) and (max-width: 1600px) {
  .data-show {
    height: 78vh;

    .today-table {
      height: 85%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 5px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 5px 0;
  }
}

@media screen and(min-width:1281px) and (max-width: 1360px) {
  .data-show {
    height: 78vh;

    .today-table {
      height: 85%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 5px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 5px 0;
  }
}
</style>