|
|
@@ -31,11 +31,142 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="table">
|
|
|
- <el-table
|
|
|
+ <table border="0" cellspacing="0" cellpadding="0">
|
|
|
+ <tr>
|
|
|
+ <th
|
|
|
+ v-for="(item, i) in tableHeader"
|
|
|
+ :key="i"
|
|
|
+ :style="{ width: item.width }"
|
|
|
+ :class="[i == tableHeader.length - 1 ? 'bz' : '']"
|
|
|
+ v-if="
|
|
|
+ (item.name == '拼音' && typeIndex != 0) || item.name != '拼音'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <span>
|
|
|
+ {{
|
|
|
+ item.name == "音节"
|
|
|
+ ? typeIndex == 0
|
|
|
+ ? "音节"
|
|
|
+ : "汉字"
|
|
|
+ : item.name
|
|
|
+ }}
|
|
|
+ </span>
|
|
|
+ <template v-if="item.sortShow">
|
|
|
+ <div class="sort">
|
|
|
+ <div>
|
|
|
+ <img
|
|
|
+ v-if="item.sort != 'up'"
|
|
|
+ @click="SortEvent('up', item.name, item.sortName)"
|
|
|
+ src="../../assets/teacherdev/sort-up.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-if="item.sort == 'up'"
|
|
|
+ @click="SortEvent('up', item.name, item.sortName)"
|
|
|
+ src="../../assets/teacherdev/sort-sele-up.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <img
|
|
|
+ v-if="item.sort != 'down'"
|
|
|
+ @click="SortEvent('down', item.name, item.sortName)"
|
|
|
+ src="../../assets/teacherdev/sort-down.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-if="item.sort == 'down'"
|
|
|
+ @click="SortEvent('down', item.name, item.sortName)"
|
|
|
+ src="../../assets/teacherdev/sort-sele-down.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </th>
|
|
|
+ </tr>
|
|
|
+ <tr v-for="(item, i) in dataList.list" :key="i + 'td'">
|
|
|
+ <td class="sort-td">{{ item.number }}</td>
|
|
|
+ <td class="sort-td">
|
|
|
+ <span
|
|
|
+ :style="{
|
|
|
+ color:
|
|
|
+ item.levelName && levelMap[item.levelName]
|
|
|
+ ? levelMap[item.levelName].color
|
|
|
+ : '',
|
|
|
+ }"
|
|
|
+ >{{ item.word }}</span
|
|
|
+ >
|
|
|
+ </td>
|
|
|
+ <td class="sort-td" v-if="typeIndex != 0">
|
|
|
+ {{ item.pinYin }}
|
|
|
+ </td>
|
|
|
+ <td class="sort-td">
|
|
|
+ <span
|
|
|
+ :style="{
|
|
|
+ color:
|
|
|
+ item.gradeName && levelMap[item.gradeName]
|
|
|
+ ? levelMap[item.gradeName].color
|
|
|
+ : '',
|
|
|
+ }"
|
|
|
+ >{{ item.gradeName }}</span
|
|
|
+ >
|
|
|
+ </td>
|
|
|
+ <td class="sort-td">
|
|
|
+ <span
|
|
|
+ :style="{
|
|
|
+ color:
|
|
|
+ item.levelName && levelMap[item.levelName]
|
|
|
+ ? levelMap[item.levelName].color
|
|
|
+ : '',
|
|
|
+ }"
|
|
|
+ >{{ item.levelName }}</span
|
|
|
+ >
|
|
|
+ </td>
|
|
|
+ <td class="sort-td">
|
|
|
+ {{ item.freq }}
|
|
|
+ </td>
|
|
|
+ <td class="sort-td">{{ item.textRatio }}%</td>
|
|
|
+ <td>
|
|
|
+ <div style="display: flex">
|
|
|
+ <span
|
|
|
+ v-for="(items, i) in item.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>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ <!-- <el-table
|
|
|
:data="dataList.list"
|
|
|
style="width: 100%"
|
|
|
@sort-change="sort_change"
|
|
|
ref="table"
|
|
|
+ :sort-orders="['levelName']"
|
|
|
+ sortable="custom"
|
|
|
>
|
|
|
<el-table-column prop="number" label="序号" width="48" align="center">
|
|
|
</el-table-column>
|
|
|
@@ -90,10 +221,6 @@
|
|
|
<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">
|
|
|
@@ -126,7 +253,7 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- </el-table>
|
|
|
+ </el-table> -->
|
|
|
</div>
|
|
|
<div class="page" v-if="dataList.list.length > 0">
|
|
|
<el-pagination
|
|
|
@@ -162,6 +289,62 @@ export default {
|
|
|
typeIndex: 0,
|
|
|
headText: 1,
|
|
|
keyword: "",
|
|
|
+ tableHeader: [
|
|
|
+ {
|
|
|
+ name: "序号",
|
|
|
+ sortShow: false,
|
|
|
+ width: "48px",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "音节",
|
|
|
+ sortShow: true,
|
|
|
+ sort: "",
|
|
|
+ width: "93px",
|
|
|
+ sortName: "word",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "拼音",
|
|
|
+ sortShow: true,
|
|
|
+ sort: "",
|
|
|
+ width: "95px",
|
|
|
+ sortName: "pin_yin",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "等次",
|
|
|
+ sortShow: true,
|
|
|
+ sort: "",
|
|
|
+ width: "95px",
|
|
|
+ sortName: "grade_id",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "级别",
|
|
|
+ sortShow: true,
|
|
|
+ sort: "down",
|
|
|
+ width: "106px",
|
|
|
+ sortName: "level_id",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "频数",
|
|
|
+ sortShow: true,
|
|
|
+ sort: "",
|
|
|
+ width: "108px",
|
|
|
+ sortName: "freq",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "比例",
|
|
|
+ sortShow: true,
|
|
|
+ sort: "",
|
|
|
+ width: "110px",
|
|
|
+ sortName: "word_ratio",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "备注",
|
|
|
+ sortShow: false,
|
|
|
+ sort: "",
|
|
|
+ width: "",
|
|
|
+ sortName: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
dataList: {
|
|
|
list: [],
|
|
|
},
|
|
|
@@ -171,8 +354,8 @@ export default {
|
|
|
searchType: null,
|
|
|
levelMap: null,
|
|
|
loading: false,
|
|
|
- sortType: null,
|
|
|
- sortField: null,
|
|
|
+ sortType: 0,
|
|
|
+ sortField: "level_id",
|
|
|
};
|
|
|
},
|
|
|
//计算属性 类似于data概念
|
|
|
@@ -218,6 +401,26 @@ export default {
|
|
|
this.page = 1;
|
|
|
this.getlist();
|
|
|
},
|
|
|
+ SortEvent(type, name,sortName) {
|
|
|
+ this.tableHeader.forEach((item) => {
|
|
|
+ if (item.name == name) {
|
|
|
+ if (!item.sort || item.sort == "up") {
|
|
|
+ item.sort = "down";
|
|
|
+ } else if (item.sort == "down") {
|
|
|
+ item.sort = "up";
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ item.sort = "";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (type == "down") {
|
|
|
+ this.sortType = 1;
|
|
|
+ } else {
|
|
|
+ this.sortType = 0;
|
|
|
+ }
|
|
|
+ this.sortField = sortName;
|
|
|
+ this.getlist();
|
|
|
+ },
|
|
|
sort_change(column, prop, order) {
|
|
|
if (this.$refs.table) this.$refs.table.clearSort();
|
|
|
column.column.order = column.order;
|
|
|
@@ -352,7 +555,61 @@ export default {
|
|
|
}
|
|
|
.table {
|
|
|
margin-top: 21px;
|
|
|
+ table {
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse;
|
|
|
+ background: #ffffff;
|
|
|
+
|
|
|
+ th {
|
|
|
+ background: #ffffff;
|
|
|
+ .bz {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ > div {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 8px;
|
|
|
+ height: 48px;
|
|
|
+
|
|
|
+ .sort {
|
|
|
+ cursor: pointer;
|
|
|
+ > div {
|
|
|
+ img {
|
|
|
+ width: 11px;
|
|
|
+ height: 11px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > :nth-child(1) {
|
|
|
+ > img {
|
|
|
+ position: relative;
|
|
|
+ top: 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > :nth-child(2) {
|
|
|
+ > img {
|
|
|
+ position: relative;
|
|
|
+ bottom: 7px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ td {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: left;
|
|
|
+ border-bottom: 1px solid #eeeeee;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .sort-td {
|
|
|
+ padding: 0 9px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
.page {
|
|
|
margin-top: 24px;
|
|
|
}
|
qinpeng
