RZGY/src/renderer/components/psychologicalClinic.vue

<template>
  <div class="main_right_height">
    <div class="">
      <div class="">
        <el-row>
          <el-col :span="1">&nbsp;</el-col>
          <el-col :span="22" class="navigation_card">
            <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>
        <el-row class="mainTable-top-two">
          <el-col :span="1">
            <div>&nbsp;</div>
          </el-col>
          <el-col :span="10" class="search_card">
            <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 class="provinceClass">
              &nbsp;&nbsp;&nbsp;&nbsp;
              <el-select
                v-model="provinceCodeNew"
                filterable
                placeholder="选择省"
                clearable
                @change="changeFun"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">&nbsp;</el-col>
          <el-col :span="22">
            <el-col>
              <!-- <div class="card">
                <img src="../assets/newImage/xl1.png" alt="" class="img_card" />
                <div style="display: block">
                  <h3 class="h3_card">{{ item.name }}</h3>
                  <div class="time_card">
                    {{ item.testDate }}
                  </div>
                  <div class="goDetail">
                    <a href="javascript:;" @click="queryDetail(item.id)">
                      查看详情></a
                    >
                  </div>
                  <div>&nbsp;</div>
                </div>
              </div> -->
              <el-table
                :data="dataList"
                :header-cell-style="{
                  background: '#66B497',
                  color: '#FFFFFF',
                  'letter-spacing': '4px',
                }"
                :row-class-name="tableRowClassName"
                style="width: 100%"
              >
                <el-table-column
                  prop="hospitalName"
                  align="center"
                  label="医院名称"
                >
                </el-table-column>
                <el-table-column prop="section" align="center" label="科室">
                </el-table-column>
                <el-table-column prop="address" align="center" label="地址">
                </el-table-column>
                <el-table-column
                  prop="contactNumber"
                  align="center"
                  label="联系方式"
                >
                </el-table-column>
              </el-table>
            </el-col>
          </el-col>
          <el-col :span="1">&nbsp;</el-col>
        </el-row>
        <el-row> </el-row>
        <!-- <ul>
          <li
            v-for="(item, index) in dataList"
            :key="index"
            @click="detailP(item.id)"
          >
            <img src="../assets/newImage/xl1.png" alt="" />
            <div style="display: block">
              <h2>{{ item.name }}</h2>
              <div class="content">
                {{ item.testDate }}
              </div>
              <div class="goDetail">
                <a href="javascript:;"> 查看详情></a>
              </div>
            </div>
          </li>
        </ul> -->
      </div>
      <div class="pageNationBox">
        <el-pagination
          layout="total, prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="pageNum"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      head_style: "#f5f7fa",
      provinceCodeNew: "",
      options: [],
      queryKeyword: "",
      pageSize: 8,
      pageNum: 1,
      dataList: [],
      total: 0,
      userBid: "",
      institutionNo: "",
      persionDetailData: null,
      identifier: "",
    };
  },
  //页面初始化函数
  created() {},
  mounted() {
    this.identifier = sessionStorage.getItem("num");
    this.init();
    this.optionsSet();
  },

  methods: {
    changeFun() {
      this.pageNum = 1;
      this.init();
    },
    optionsSet() {
      let that = this;
      that.$http.get(
        `v1/province/find`,
        {
          //   pageNum: that.pageNum,
          //   pageSize: that.pageSize,
          //   scaleName: that.queryKeyword,
          //     startDate: that.startDate,
          //     endDate: that.endDate,
          //   identifier: that.identifier,
        },
        (res) => {
          if (res.code == 200) {
            this.options = [];
            for (let i = 0; i < res.data.length; i++) {
              let a = {
                value: res.data[i].provinceCode,
                label: res.data[i].provinceName,
              };
              this.options.push(a);
            }
            // that.dataList = res.data.data.data;
            // that.total = res.data.data.allNum;
          } else {
            this.$message.error("访问服务器失败！");
          }
        }
      );
    },
    goBack() {
      this.$router.go(-1);
    },
    queryDetail(id) {
      sessionStorage.setItem("back_page", "2");
      this.getAnswerQuestionPaymentSuccess(id);
    },
    getAnswerQuestionPaymentSuccess(id) {
      sessionStorage.setItem("back_page", "2");
      let _this = this;

      _this.$http.post(`v1/record/find/${id}`, {}, (res) => {
        if (res.data.code == 200 && res.data.data) {
          _this.resultJsonParams = res.data.data;
          // let sleep = JSON.parse(
          //   _this.resultJsonParams.userRecordEntity.testResult
          // );
          // sleep = sleep[0].newTableContext.result[0].improvementSuggestions;
          // if (_this.scale_flag === "20210910163158") {
          //   _this.askEnd(sleep);
          //   this.inputFlag = 0;
          // }
          // if (_this.scale_flag === "20220805135201") {
          //   _this.askEnd(sleep);
          //   this.inputFlag = 0;
          // }

          // let testResult = JSON.parse(res.data.userRecordEntity.testResult)[0]
          //   .version;
          let testResult = JSON.parse(
            res.data.data.userRecordEntity.testResult
          )[0].version;

          if (testResult == 2) {
            _this.$router.push({
              name: "scaleResultSCl",
              params: { tableData: _this.resultJsonParams },
            });
          } else {
            _this.$router.push({
              name: "scaleResult",
              params: { tableData: _this.resultJsonParams },
            });
          }
        }
      });
    },
    queryLikeWord() {
      this.pageNum = 1;
      this.init();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.init();
    },
    init() {
      let that = this;
      that.$http.post(
        `v1/hospital/find`,
        {
          pageNum: that.pageNum,
          pageSize: that.pageSize,
          hospitalName: that.queryKeyword,
          provinceCode: that.provinceCodeNew,
        },
        (res) => {
          if (res.status == 200) {
            that.dataList = res.data.data.content;
            that.total = res.data.data.totalElements;
          } else {
            this.$message.error("访问服务器失败！");
          }
        }
      );
    },
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 0) {
        return "warning-row";
      } else if (rowIndex % 2 === 1) {
        return "success-row";
      }
      return "success-row";
    },
  },
};
</script>

<style scoped>
.provinceClass >>> .el-input__inner {
  border-radius: 20px;
  border: 0px;
  background-color: #f4f4f4;
}
.wrap {
  width: 1280px;
  margin: 0 auto;
}
.cardList ul {
  display: flex;
  min-height: 562px;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.cardList ul li {
  width: 180px;
  height: 221px;
  background: rgb(255, 255, 255);
  box-shadow: 0px 3px 6px rgb(87, 172, 187);
  border-radius: 4px;
  margin: 30px 35px;
  cursor: pointer;
}

@media screen and (max-width: 1024px) {
  .cardList ul li {
    margin: 30px 10px;
  }

  .wrap {
    width: 100%;
    margin: 0;
  }
}

.cardList ul li img {
  width: 180px;
  height: 112px;
}

.cardList ul li h2 {
  width: 142px;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 25px;
  color: #333333;
  margin-left: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cardList ul li p {
  font-size: 16px;
  color: #666666;
}
.cardList ul li .content {
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 20px;
  color: #999999;
  margin-left: 9px;
}

.goDetail {
  margin: 5px 0 10px 9px;
}
.goDetail a {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 20px;
  color: #57acbb;
}
.pageNationBox {
  margin-bottom: 30px;
  padding: 20px 10px;
  text-align: center;
}

.view-text {
  /**
	思路：
	1.设置inline-block属相
	2.强制不换行
	3.固定高度
	4.隐藏超出部分
	5.显示“……”
  */
  display: inline-block;
  word-break: keep-all;
  white-space: nowrap;
  width: 960px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.imgSiz {
  width: 120px;
  height: 75px;
  margin-right: 15px;
}
.main_right_height {
  height: 95vh !important;
  display: block !important;
  overflow-y: auto !important;
}
.card {
  background: #fff;
  box-shadow: 0 3px 6px #57acbb;
  border-radius: 4px;
  display: block;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 80px;
}
.img_card {
  width: 100%;
  height: 100%;
}
.h3_card {
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 20px;
  color: #333;
  margin-left: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.time_card {
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 15px;
  color: rgb(171, 168, 168);
  margin-left: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xl_input >>> .el-input__inner {
  border: 0;
  border-radius: 20px;
  background-color: #f4f4f4;
}
.search_card {
  margin-left: 20px;
  margin-bottom: 20px;
}
.navigation_card {
  margin-left: 20px;
}

.el-table {
  border-radius: 16px 16px 0px 0px;
  border: none;
}

.el-table .el-table__cell {
  padding: 6px;
}

.tag {
  display: inline-block;
  background: #ffffff;
  border-radius: 40px 40px 40px 40px;
  opacity: 1;
  border: 1px solid #0fb577;
  font-size: 14px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #0fb577;
  padding: 2px 8px;
  margin: 0 5px;
}

.el-table .warning-row {
  background: #f5f5f5;
}

.el-table .success-row {
  background: #ffffff;
}

.el-table--enable-row-hover
  /deep/
  .el-table__body
  tr:hover
  > td.el-table__cell {
  background: rgba(223, 246, 237, 1) !important;
}

::v-deep .el-pager li.active,
::v-deep .el-pager li:hover {
  background: #f0f0f0;
  color: #262626;
}

::v-deep .el-pager li {
  background: none;
  color: #8c8c8c;
}

::v-deep .el-pagination .btn-next, ::v-deep .el-pagination .btn-prev {
  background: none;
}
</style>