GCLS_Page_TC/src/views/Textanalysis/WordTable.vue

<template>
  <div class="WordTable" v-loading="loading">
    <div class="wheader">
      <Header />
    </div>
    <div class="main">
      <div class="top">
        <div class="left">
          <div class="type_dv">
            <span :class="[typeIndex == 0 ? 'sele' : '']" @click="cutType(0)"
              >音节</span
            >
            <span :class="[typeIndex == 1 ? 'sele' : '']" @click="cutType(1)"
              >汉字</span
            >
            <span :class="[typeIndex == 2 ? 'sele' : '']" @click="cutType(2)"
              >词汇</span
            >
          </div>
          <!-- <el-radio-group v-model="headText">
            <el-radio :label="1">词头</el-radio>
            <el-radio :label="2">文本</el-radio>
          </el-radio-group> -->
        </div>
        <div class="right">
          <div class="seek">
            <img src="../../assets/teacherdev/search-icon.png" alt="" />
            <input v-model="keyword" type="text" />
          </div>
          <div class="seekBtn" @click="page1getdata">搜索</div>
        </div>
      </div>
      <div class="table">
        <el-table
          :data="dataList.list"
          style="width: 100%"
          @sort-change="sort_change"
          ref="table"
        >
          <el-table-column prop="number" label="序号" width="48" align="center">
          </el-table-column>
          <el-table-column
            prop="word"
            :label="typeIndex == 0 ? '音节' : '汉字'"
            width="93"
            sortable
          >
            <template slot-scope="item">
              <span
                :style="{
                  color:
                    item.row.levelName && levelMap[item.row.levelName]
                      ? levelMap[item.row.levelName].color
                      : '',
                }"
                >{{ item.row.word }}</span
              >
            </template>
          </el-table-column>
          <template v-if="typeIndex != 0">
            <el-table-column prop="pinYin" label="拼音" width="95" sortable>
            </el-table-column>
          </template>
          <el-table-column prop="gradeName" label="等次" width="95" sortable>
            <template slot-scope="item">
              <span
                :style="{
                  color:
                    item.row.gradeName && levelMap[item.row.gradeName]
                      ? levelMap[item.row.gradeName].color
                      : '',
                }"
                >{{ item.row.gradeName }}</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="levelName" label="级别" width="106" sortable>
            <template slot-scope="item">
              <span
                :style="{
                  color:
                    item.row.levelName && levelMap[item.row.levelName]
                      ? levelMap[item.row.levelName].color
                      : '',
                }"
                >{{ item.row.levelName }}</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="freq" label="频数" width="108" sortable>
          </el-table-column>
          <el-table-column prop="textRatio" label="比例" width="110" sortable>
            <!-- <template slot-scope="item">
              <span v-if="headText == 1">{{ item.row.wordRatio }}%</span>
              <span v-else>{{ item.row.textRatio }}%</span>
            </template> -->
          </el-table-column>
          <el-table-column prop="" label="备注">
            <template slot-scope="item">
              <div style="display: flex">
                <span
                  v-for="(items, i) in item.row.remarks"
                  :key=""
                  class="beizhu"
                  style="margin-right: 10px"
                >
                  <span
                    style="font-size: 18px; font-weight: 400"
                    v-html="items.word"
                  >
                  </span>
                  <span
                    :style="{
                      color:
                        items.levelName && levelMap[items.levelName]
                          ? levelMap[items.levelName].color
                          : '',
                    }"
                  >
                    {{ items.levelName }}
                  </span>
                  <span>
                    {{ items.freq }}
                  </span>
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page" v-if="dataList.list.length > 0">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="dataList.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from "@/components/Header.vue";
import { postapi } from "@/api/api";
import staticData from "../../common/data";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Header,
  },
  props: {},
  data() {
    //这里存放数据
    return {
      typeIndex: 0,
      headText: 1,
      keyword: "",
      dataList: {
        list: [],
      },
      page: 1,
      pageSize: 10,
      partitionKey: null,
      searchType: null,
      levelMap: null,
      loading: false,
      sortType: null,
      sortField: null,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    handleCurrentChange(val) {
      this.page = val;
      this.getlist();
    },
    getlist() {
      this.loading = true;
      postapi({
        url: "/GCLSTRCServer/tools/TS/glossary/list",
        data: {
          pageIndex: this.page,
          pageSize: this.pageSize,
          partitionKey: this.partitionKey,
          searchType: this.typeIndex,
          word: this.keyword,
          sortField: this.sortField,
          sortType: this.sortType,
        },
      })
        .then((res) => {
          let num = this.page * this.pageSize - this.pageSize + 1;
          res.data.result.list.forEach((item) => {
            item.remarks = JSON.parse(item.remarks);
            item.number = num;
            num++;
          });
          this.dataList = res.data.result;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    page1getdata() {
      this.loading = true;
      this.page = 1;
      this.getlist();
    },
    sort_change(column, prop, order) {
      if (this.$refs.table) this.$refs.table.clearSort();
      column.column.order = column.order;
      if (column.prop == "pinyin") {
        this.sortField = "pin_yin";
      } else if (column.prop == "gradeName") {
        this.sortField = "grade_id";
      } else if (column.prop == "levelName") {
        this.sortField = "level_id";
      } else if (column.prop == "textRatio") {
        this.sortField = "text_ratio";
      } else {
        this.sortField = column.prop;
      }
      if (column.order == "descending") {
        this.sortType = 1;
      } else {
        this.sortType = 0;
      }
      this.getlist();
    },
    cutType(index) {
      this.typeIndex = index;
      this.page1getdata();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.partitionKey = this.$route.query.partitionKey * 1;
    this.levelMap = staticData.LevelMap;

    this.getlist();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.WordTable {
  background: #f6f6f6;
  height: 100%;
  .wheader {
    background: #ffffff;
  }
  .main {
    width: 1200px;
    margin: 23px auto;
    .top {
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
        .type_dv {
          margin-right: 40px;
          //   width: 172px;
          padding: 0 2px;
          height: 40px;
          background: #eeeeee;
          border-radius: 4px;
          display: flex;
          align-items: center;
          span {
            display: inline-block;
            height: 36px;
            width: 56px;
            font-weight: 400;
            font-size: 14px;
            line-height: 40px;
            text-align: center;
            color: #888888;
            cursor: pointer;
          }
          .sele {
            color: #000000;
            background: #ffffff;
            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.08);
          }
        }
      }
      .right {
        display: flex;
        .seek {
          display: flex;
          width: 264px;
          height: 40px;
          background: #ffffff;
          border: 1px solid #dddddd;
          border-radius: 2px 0px 0px 2px;
          img {
            width: 16px;
            height: 16px;
            margin: 12px 4px 12px 12px;
          }
          input {
            flex: 1;
            border: none;
            outline: none;
            background: none;
            height: 40px;
          }
        }
        .seekBtn {
          width: 56px;
          height: 40px;
          background: #ffa800;
          border: 1px solid #ffa800;
          border-radius: 0px 2px 2px 0px;
          cursor: pointer;
          font-weight: 400;
          font-size: 16px;
          line-height: 40px;
          text-align: center;
          color: #ffffff;
        }
      }
    }
    .table {
      margin-top: 21px;
    }
    .page {
      margin-top: 24px;
    }
    .beizhu {
      height: 28px;
      display: inline-block;
      background: #f9f9f9;
      border-radius: 4px;
      display: flex;
      align-items: center;
      font-size: 12px;
      font-weight: 500;
      padding-left: 4px;
      padding-right: 7px;
      > :not(:nth-last-child(1)) {
        margin-right: 8px;
      }
    }
  }
}
</style>
<style lang="scss">
.WordTable {
  .table {
    .el-table th {
      background: #ffffff;
      padding: 7px 0;
    }
    .el-table th > .cell {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 700;
      color: #333333;
      font-size: 14px;
    }
    .el-table td {
      padding: 8px 0;
    }
    .el-table td > .cell {
      font-size: 14px;
      line-height: 22px;
      color: #333333;
      font-weight: 600;
    }
  }
  .el-radio__input.is-checked + .el-radio__label {
    color: #000000;
  }
  .el-radio__input.is-checked .el-radio__inner {
    border: 2px solid #c8c8c8;
    background: #1e1e1e;
  }
  .el-radio__inner::after {
    background: none;
  }
  .el-radio__inner {
    background: #c8c8c8;
    border: none;
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background: #ffffff !important;
    color: rgba(0, 0, 0, 0.85);
    border: 1px solid #333333;
  }
  .el-pager {
    .number {
      background: #ffffff !important;
      border: 1px solid #d9d9d9;
      border-radius: 2px;
    }
  }

  .btn-prev,
  .btn-next {
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    background: #ffffff !important;
  }
}
</style>