xps-web-csat-v5/src/views/hos/statis/doctor/index.vue

<template>
  <div class="content-container">
    <el-row class="tool-bar">
      <div class="content-title">
        <span> {{ title }} </span>
      </div>
      <div class="select-search">
        <span class="search-label">部门：</span>
        <group-selector />
      </div>

      <div class="select-search">
        <span class="search-label">年度：</span>
        <el-select v-model="conditions.year" filterable placeholder="年份" style="width:120px">
          <el-option label="2022年" :value="2022" />
          <el-option label="2023年" :value="2023" />
          <el-option label="2024年" :value="2024" />
          <el-option label="2025年" :value="2025" />
          <el-option label="2026年" :value="2026" />
          <el-option label="2027年" :value="2027" />
        </el-select>
      </div>

      <div class="select-search">
        <span class="search-label">月份：</span>
        <el-select v-model="conditions.month" filterable placeholder="月份" style="width:120px" clearable>
          <el-option label="1月" :value="1" />
          <el-option label="2月" :value="2" />
          <el-option label="3月" :value="3" />
          <el-option label="4月" :value="4" />
          <el-option label="5月" :value="5" />
          <el-option label="6月" :value="6" />
          <el-option label="7月" :value="7" />
          <el-option label="8月" :value="8" />
          <el-option label="9月" :value="9" />
          <el-option label="10月" :value="10" />
          <el-option label="11月" :value="11" />
          <el-option label="12月" :value="12" />
        </el-select>
      </div>

      <div class="right" style="min-width:400px;flex: 1;">
        <el-input v-model="conditions.keywords" class="search-input m-right-15" size="mini" placeholder="请输入内容">
          <el-button slot="append" icon="el-icon-search" size="mini" @click="getData()" />
        </el-input>
        <el-button class="filter-item" type="primary" icon="el-icon-document" size="mini" @click="handleExport">导出</el-button>
        <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-printer" size="mini" @click="handlePrint">打印</el-button>
      </div>
    </el-row>

    <el-row class="content-body">
      <vuescroll :ops="ops" style="height: calc(100vh - 250px)">
        <!--年度-->
        <el-table id="print_view" v-loading="listLoading" border :data="dataList">
          <el-table-column type="index" align="center" label="序号" width="80" />

          <el-table-column prop="groupId" header-align="center" align="center" width="300" label="部门">
            <template v-slot="{row}">
              <span> {{ row.groupName }} </span>
            </template>
          </el-table-column>

          <el-table-column prop="year" header-align="center" align="center" width="300" label="医生">
            <template v-slot="{row}">
              <span> {{ row.doctorName }} </span>
            </template>
          </el-table-column>

          <el-table-column prop="score" header-align="center" align="center" label="评分均值">
            <template v-slot="{row}">
              <span> {{ row.score }} </span>
            </template>
          </el-table-column>

          <el-table-column prop="score" header-align="center" align="center" label="评价次数">
            <template v-slot="{row}">
              <span> {{ row.recordQty }} </span>
            </template>
          </el-table-column>
        </el-table>
      </vuescroll>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import vuescroll from 'vuescroll'
import { doctorByList } from '@/api/hos/satisfyStatisApi'
import { GroupSelector } from '@/components'

export default {
  name: 'DoctorSatisIndex',
  components: { vuescroll, GroupSelector },
  mixins: [],
  props: {},
  data() {
    return {
      ops: {
        bar: {
          keepShow: false,
          background: 'rgba(144, 147, 153, 0.4)',
          onlyShowBarOnScroll: false
        }
      },
      title: '医生排名',
      listLoading: false,
      dataList: [],
      conditions: {
        keywords: undefined,
        groupId: undefined,
        year: undefined,
        month: undefined
      }

    }
  },
  computed: {
    ...mapGetters([
      'userData'
    ])
  },
  mounted() {
    this.getData()
  },
  methods: {

    getData() {
      this.listLoading = true
      doctorByList(this.conditions).then((resp) => {
        this.listLoading = false
        const { code, msg, data } = resp
        if (code === 200) {
          this.dataList = data
        } else {
          this.$message.error(msg)
        }
      }).catch((error) => {
        console.log(error)
      })
    },

    handleExport() {

    },

    handlePrint() {

    }

  }
}
</script>

<style lang="scss" scoped>
.content-container {
  padding: 10px;
  margin: 10px;
  overflow: hidden;
  background: #193142;
  height: calc(100vh - 85px);
  p {
    margin: 0;
    line-height: 2em;
    padding: 0;
  }
  .tool-bar {
    display: flex;
    align-items: center;
    overflow: unset;
    .list-group {
      font-size: 14px;
      color: #C1C6C8;
      // overflow: hidden;
      padding:0 20px;
      .list-item {
        float: left;
        margin-right: 20px;
        cursor: pointer;
        &.active {
          color: #FFFFFF;
          border-bottom: 3px solid #08A6DC;
        }
      }
    }
    .search-label {
      text-align: right;
      font-size: 12px;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 1;
      span {
        font-size: 20px;
        font-weight: 400;
        color: #FFFFFF;
      }
    }
  }
}
.select-search{
  margin-left: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>