RZGY/src/renderer/components/ManagePluseRecord.vue

<template>
  <div class="main_right_height">
    <div>
      <el-row>
        <el-col :span="1">&nbsp;</el-col>
        <el-col :span="22">
          <div style="display: flex">
            <i
              class="el-icon-arrow-left"
              style="cursor: pointer; line-height: 1.5"
              @click="goBack()"
            ></i>
            <span class="musicTitle">脉搏测试记录</span>
          </div>

          <el-divider></el-divider>
        </el-col>
        <el-col :span="1">&nbsp;</el-col>
      </el-row>
    </div>
    <div>
      <el-row style="margin-top: 15px; margin-bottom: 15px">
        <el-col :span="1">&nbsp;</el-col>
        <el-col :span="16">
          <div style="display: flex">
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="timeChange"
            >
            </el-date-picker>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <!-- <el-input
              placeholder="请输入搜索内容"
              v-model="nameSearch"
              class="input-with"
            >
              <el-button
                slot="append"
                @click="searchEle"
                icon="el-icon-search"
              ></el-button>
            </el-input> -->
          </div>
        </el-col>
        <el-col :span="6" style="text-align: right; margin-top: 5px">
          <el-button
            size="small"
            @click="download(1, 1)"
            class="xl_d_button"
            :disabled="!(multipleSelection.length > 0 && disableFlag)"
          >
            批量下载</el-button
          >
          <el-button
            size="small"
            :disabled="!(tableData.length > 0 && disableFlag)"
            @click="download(1, 2)"
            class="xl_d_button"
          >
            全部下载</el-button
          >
        </el-col>
        <el-col :span="1">&nbsp;</el-col>
      </el-row>
    </div>
    <div>
      <el-row>
        <el-col :span="1"> &nbsp;</el-col>
        <el-col :span="22">
          <el-table
            :data="tableData"
            border
            :header-cell-style="{ background: head_style }"
            @selection-change="handleSelectionChange"
            style="width: 100%"
          >
            <el-table-column
              type="selection"
              align="center"
              width="55"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="type"
              label="类型"
              :formatter="typeFormatter"
            >
            </el-table-column>
            <el-table-column
              prop="testDate"
              align="center "
              label="测试时间"
            ></el-table-column>

            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  class="xl_d_button"
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  >查看测试记录</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="1"> &nbsp;</el-col>
      </el-row>
    </div>
    <p align="center" style='margin-bottom:40px'>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-size="pageSize"
        layout="total,  prev, pager, next, jumper"
        :total="totolSize"
      >
      </el-pagination>
    </p>
  </div>
</template>
<script>
import axios from "axios";
import jsFileDownload from "js-file-download";
export default {
  data() {
    return {
      value1: "",
      startDate: "",
      endDate: "",
      head_style: "#f5f7fa",
      identifier: "",
      startDate: "",
      endDate: "",
      pageNum: 1,
      pageSize: 10,
      totolSize: 10,
      nameSearch: "",
      tableData: [],
      multipleSelection: [],
      disableFlag: true,
    };
  },
  mounted() {
    this.identifier = this.$route.query.identifier;
    this.queryEle();
  },
  methods: {
    searchEle() {
      this.pageNum = 1;
      this.queryEle();
    },
    queryEle() {
      let that = this;
      that.$http.post(
        `v1/recordPhy/find`,
        {
          pageNum: that.pageNum,
          pageSize: that.pageSize,
          startDate: that.startDate,
          endDate: that.endDate,
          type: 1,
          filaName: "",
          identifier: that.identifier,
        },
        (res) => {
          if (res.data.code == 200) {
            that.tableData = res.data.data.content;
            that.totolSize = res.data.data.totalElements;
            // this.$message.success("保存成功");
          } else {
            this.$message.error("访问服务器失败！");
          }
        }
      );
    },
    timeChange(val) {
      if (val === null) {
        this.startDate = "";
        this.endDate = "";
      } else {
        this.startDate = this.fomatterDate(this.value1[0]);
        this.endDate = this.fomatterDate(this.value1[1]);
      }
      this.pageNum=1;
      this.queryEle();
    },
    fomatterDate(val) {
      var date = new Date(val);
      let year = date.getFullYear();
      let month = this.fomatterM(date.getMonth() + 1);
      let currentDay = this.fomatterM(date.getDate());
      return year + "年" + month + "月" + currentDay + "日";
    },
    fomatterM(val) {
      // if (val < 10) {
      //   return "0" + val;
      // } else {
      //   return val + "";
      // }
      return val;
    },
    //批量下载
    download(val, value) {
      this.disableFlag = false;
      //获取数组集合
      let idArr = [];
      for (let i = 0; i < this.multipleSelection.length; i++) {
        idArr.push(this.multipleSelection[i].id);
      }
      this.batchDownloadOriginal(val, value, idArr);
    },
    //批量下载(原始数据)
    batchDownloadOriginal(val, value, idArr) {
      let that = this;
      let arr = [];
      //原始数据批量下载路径
      let path = `v1/record/download/source`;
      if (val === 2) {
        path = `v1/record/download`;
      }
      if ((val === 1 && value === 1) || (val === 2 && value === 1)) {
        arr = idArr;
      } else {
        arr = [];
      }
      // let path = `record/download`;
      let baseUrl = sessionStorage.getItem("baseUrl");
      // window.location.href = `${baseUrl}${path}?ids=${arr}&flag=1`;

      axios({
        method: "post",
        url: `${baseUrl}v1/recordPhy/download`,
        timeout: 600000, // 请求超时时间，数据量多后台响应慢的情况可以调大点，没生效的话可能是vue.config.js里的配置影响了
        responseType: "blob", // 返回类型为数据流
        data: {
          ids: arr,
          flag: 1,
        }, // 需要传参的话，在这传
      }).then((res) => {
        that.disableFlag = true;
        if (res && res.data) {
          // console.log(decodeURIComponent(res.headers["filename"]))
          // 调用js-file-download下载文件，第一个参数是数据流，第二个参数是文件名，我这后端返回时把文件名放到响应的header的filename字段中，所以用这种方式取出
          jsFileDownload(res.data, decodeURIComponent(res.headers["filename"]));
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.queryEle();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.queryEle();

      // this.pageNum = val;
      // this.queryList();
    },
    handleEdit(index, row) {
      this.$router.push({
        path: "/menu/managePluseRecordDetail",
        query: { id: row.id },
      });
    },
    handleDelete(index, row) {},
    goBack() {
      this.$router.go(-1);
    },
    //格式化类型
    typeFormatter(val) {
      if (val.type === "3") {
        return "脑电";
      }
      if (val.type === "1") {
        return "脉搏";
      }
      return "";
    },
    //格式化时间格式
    // timeFormatter(val) {
    //   var s = new Date(val.testDate).toLocaleString();
    //   return s;
    // },
  },
};
</script>
<style scoped>
.main_right_height {
  height: 95vh !important;
  display: block !important;
  overflow-y: auto !important;
}
.xl_d_button,
.xl_d_button:hover,
.xl_d_button:focus {
  background: rgb(87, 172, 187);
  opacity: 1;
  /* border-radius: 18px; */
  /* font-size: 14px; */
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
}
.input-with {
  width: 220px;
}
.xl_d_button.is-disabled,
.xl_d_button.is-disabled:focus,
.xl_d_button.is-disabled:hover {
  color: #c0c4cc;
  cursor: not-allowed;
  background-image: none;
  background-color: rgb(87, 172, 187);
  border-color: #ebeef5;
}
</style>