RZGY/src/renderer/components/Evaluation.vue

<template>
  <div style="height: 100vh; overflow-y: auto !important; background: #ffffff">
    <!-- <el-button type="primary" size="small" round @click="goBack()">返回</el-button> -->
    <el-row>
      <el-col :span="1">
        <div>&nbsp;</div>
      </el-col>
      <el-col :span="10">
        <div>
          <el-input
            class="xl_input"
            placeholder="请输入测试内容"
            v-model="queryKeyword"
            prefix-icon="el-icon-search"
            @input="queryLikeWord"
            clearable
          >
          </el-input>
        </div>
      </el-col>
      <el-col :span="11">
        <div>&nbsp;</div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="1">
        <div>&nbsp;</div>
      </el-col>
      <el-col :span="22">
        <div class="my_tabs">
          <div
            class="tab_item"
            :class="{ is_active: 'first' == activeName }"
            @click="handleClick('first')"
          >
            全部量表
          </div>
          <div
            class="tab_item"
            v-for="item in scaleTypeList"
            :key="item.id"
            :class="{ is_active: item.ename == activeName }"
            @click="handleClick(item.ename)"
          >
            {{ item.name }}
          </div>
        </div>
      </el-col>
      <el-col :span="1">
        <div>&nbsp;</div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="1"> &nbsp; </el-col>
      <el-col :span="22">
        <div style="height: 70vh; overflow-y: auto !important">
          <div
            class="scale_item"
            v-for="(item, index) in scaleList"
            :key="index"
            @click="scaleDetail(item.flag)"
          >
            <img class="xl_img" :src="item.src" />
            <!-- <span>简明精神病量表</span> -->
            <div style="display: block">
              <span class="xl_title">{{ item.name }}</span>
              <span class="xl_content">
                {{ item.description }}
              </span>
              <div>
                <span class="xl_test">{{ item.testNum }}人测过</span>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row class="pagin_class">
      <el-col :span="24" style="text-align: center">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-size="pageSize"
          layout="total,  prev, pager, next, jumper"
          :total="totolSize"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      scaleTypeList: [],
      queryKeyword: "",
      totolSize: 6,
      pageNum: 1,
      pageSize: 6,
      activeName: "first",
      scaleList: [],
    };
  },
  mounted() {
    this.selectScaleType();

    //查询列表
    //this.queryList();
  },
  methods: {
    queryLikeWord() {
      this.pageNum = 1;
      this.queryList();
    },
    //查询量表分类接口
    selectScaleType() {
      let that = this;
      this.$http.get(`v1/category/getCategoryList`, {}, (res) => {
        that.scaleTypeList = res.data;
        that.queryList();
      });
    },
    //调用接口进行列表渲染
    queryList() {
      let that = this;
      //传输关键字
      //第几页
      //每页多少条
      //属于那种类型
      that.$http.post(
        `v1/scale/find`,
        {
          name: that.queryKeyword,
          pageNum: that.pageNum,
          pageSize: that.pageSize,
          //typeName: that.activeName,
          typeName: that.activeName === "first" ? "" : that.activeName,
          flag: "",
          role: 0,
        },
        (res) => {
          if (res.data.code == 200) {
            that.scaleList = res.data.data.content;
            for (let i = 0; i < that.scaleList.length; i++) {
              if (i % 3 === 1) {
                that.scaleList[i].src = require("../assets/newImage/xl1.png");
              } else if (i % 3 === 2) {
                that.scaleList[i].src = require("../assets/newImage/xl2.png");
              } else {
                that.scaleList[i].src = require("../assets/newImage/xl3.png");
              }
            }

            that.totolSize = res.data.data.totalElements;
          } else {
            this.$message.error("访问服务器失败！");
          }
        }
      );
    },
    goBack() {
      this.$router.go(-1);
    },
    handleClick(tab) {
      this.activeName = tab
      this.pageNum = 1;
      this.queryList();
      // console.log(this.activeName)
      // console.log(tab, event);
    },
    handleSizeChange(val) {
      this.queryList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.queryList();
    },
    //页面跳转
    scaleDetail(val) {
      this.$router.push({ path: "/menu/ScaleDetail" });
      //将scaleId存起来在测试页面取到ID,然后调用查询接口进行详细信息显示
      sessionStorage.setItem("scaleFlag", val);
    },
  },
};
</script>
<style scoped>
.mainTable-top {
  margin-top: 5%;
}
.mainTable-tab {
  cursor: pointer;
  margin-left: 100px;
  margin-right: 100px;
  border-radius: 5px;
  border: 1px solid #000000;
  text-align: center;
  height: 150px;
  margin-bottom: 100px;
}
.mainTable-tab-p {
  padding-top: 40px;
}

.xl_input >>> .el-input__inner {
  border: 0;
  border-radius: 20px;
  background-color: #f4f4f4;
}
.xl_tabs {
  margin-top: 10px;
}
.xl_tabs >>> .el-tabs__nav-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #ffffff !important;
  z-index: 1;
}
.xl_content {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 65vw;
  height: 6.7vh;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-all;
  min-width: 100px;
  font-size: 0.9vw;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #929292;
}
.xl_img {
  width: 7.6vw;
  height: 7.6vw;
  margin-right: 2.1vw;
  border-radius: 12px;
}
.xl_title {
  font-size: 1.2vw;
  font-family: Source Han Sans CN-Bold, Source Han Sans CN;
  font-weight: bold;
  color: #0f0f0f;
  display: block;
  margin-bottom: 1.4vh;
}
.xl_free {
  font-weight: 500;
  color: #f9476e;
  font-size: 11px;
}
.xl_test {
  font-size: 0.8vw;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #0f0f0f;
}
.xl_detail {
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: #57acbb;
  line-height: 30px;
}

.xl_input {
  margin-top: 3vh;
}

.scale_item {
  display: flex;
  border-bottom: 1px solid #bbc5d4;
  padding: 2.2vh 0 2.2vh 2.2vh;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s linear;
}

.scale_item:hover {
  background: #f5f5f5;
}

.pagin_class {
  margin-top: 3vh;
}

.my_tabs {
  display: flex;
  padding: 1.67vh 0;
  border-bottom: 1px solid #BBC5D4;
}

.tab_item {
  line-height: 4.8vh;
  border-radius: 30px 30px 30px 30px;
  opacity: 1;
  text-align: center;
  padding: 0 1.04vw;
  font-size: 1.45vw;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #0F0F0F;
  cursor: pointer;
  transition: all 0.1s linear;
}

.is_active {
  background: #1fd18e;
  color: #ffffff;
}
</style>