table.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  1. <template>
  2. <div class="cred_table" v-loading="loading">
  3. <Header />
  4. <div class="main">
  5. <div>
  6. <div class="title">字词卡片</div>
  7. <div class="number_cread">
  8. <span class="left">文件数量:{{ data.total_count }}</span>
  9. <div class="right" @click="Startcread">开始创建</div>
  10. </div>
  11. <div class="table">
  12. <div
  13. v-for="(item, i) in data.word_sentence_card_list"
  14. :key="i + 'one'"
  15. >
  16. <div class="number">{{ item.number }}</div>
  17. <div
  18. class="dv dv1"
  19. @click="
  20. $router.push({
  21. path: '/wordcard/cread',
  22. query: {
  23. id: item.id,
  24. cachesType: 'pop',
  25. },
  26. })
  27. "
  28. >
  29. {{ item.name }}
  30. </div>
  31. <div class="dv">
  32. {{ item.type == "WORD" ? "字卡片" : "句卡片" }}
  33. </div>
  34. <div class="dv">{{ item.text }}</div>
  35. <div class="dv">{{ item.create_time }}</div>
  36. <el-popconfirm
  37. title="确定删除这一条记录吗?"
  38. @confirm="deleteOne(item.id, i)"
  39. >
  40. <img
  41. slot="reference"
  42. src="../../assets/teacherdev/delete-one.png"
  43. alt=""
  44. />
  45. </el-popconfirm>
  46. </div>
  47. <p v-if="data.total_count == 0">
  48. <img
  49. src="../../assets/teacherdev/nodata.png"
  50. style="width: 1200px"
  51. />
  52. </p>
  53. </div>
  54. <div class="page" v-if="data.total_count > 0">
  55. <el-pagination
  56. background
  57. @current-change="handleCurrentChange"
  58. :page-sizes="[10, 20, 30, 40, 50]"
  59. layout="prev, pager, next,jumper"
  60. :current-page="page"
  61. :page-size="pageSize"
  62. :total="data.total_count"
  63. >
  64. </el-pagination>
  65. </div>
  66. </div>
  67. </div>
  68. </div>
  69. </template>
  70. <script>
  71. //这里可以导入其它文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
  72. //例如:import 《组件名称》from ‘《组件路径》';
  73. import Header from "@/components/Header";
  74. import { LearnWebSI } from "@/api/api";
  75. export default {
  76. //import引入的组件需要注入到对象中才能使用
  77. components: {
  78. Header,
  79. },
  80. props: {},
  81. data() {
  82. //这里存放数据
  83. return {
  84. data: [],
  85. page: 1,
  86. pageSize: 10,
  87. loading: false,
  88. };
  89. },
  90. //计算属性 类似于data概念
  91. computed: {},
  92. //监控data中数据变化
  93. watch: {},
  94. //方法集合
  95. methods: {
  96. // 创建
  97. Startcread() {
  98. this.$router.push({
  99. path: "/wordcard/cread",
  100. query: { cachesType: "pop" },
  101. });
  102. },
  103. deleteOne(id, index) {
  104. this.loading = true;
  105. let Mname = "tr_tool-wsc_manager-DeleteMyWordSentenceCard";
  106. LearnWebSI(Mname, {
  107. id: id,
  108. })
  109. .then((res) => {
  110. this.getdata();
  111. })
  112. .catch((res) => {
  113. this.loading = false;
  114. });
  115. },
  116. handleCurrentChange(val) {
  117. this.page = val;
  118. this.getdata();
  119. },
  120. getdata() {
  121. this.loading = true;
  122. let Mname = "page_query-PageQueryMyWordSentenceCardList";
  123. LearnWebSI(Mname, {
  124. cur_page: this.page,
  125. page_capacity: this.pageSize,
  126. })
  127. .then((res) => {
  128. this.data = res;
  129. let num = this.page * this.pageSize - this.pageSize + 1;
  130. this.data.word_sentence_card_list.forEach((item) => {
  131. item.number = num;
  132. num++;
  133. });
  134. this.loading = false;
  135. })
  136. .catch((res) => {
  137. this.loading = false;
  138. });
  139. },
  140. },
  141. //生命周期 - 创建完成(可以访问当前this实例)
  142. created() {
  143. this.getdata();
  144. },
  145. //生命周期 - 挂载完成(可以访问DOM元素)
  146. mounted() {},
  147. //生命周期-创建之前
  148. beforeCreated() {},
  149. //生命周期-挂载之前
  150. beforeMount() {},
  151. //生命周期-更新之前
  152. beforUpdate() {},
  153. //生命周期-更新之后
  154. updated() {},
  155. //生命周期-销毁之前
  156. beforeDestory() {},
  157. //生命周期-销毁完成
  158. destoryed() {},
  159. //如果页面有keep-alive缓存功能,这个函数会触发
  160. activated() {},
  161. };
  162. </script>
  163. <style lang="scss" scoped>
  164. /* @import url(); 引入css类 */
  165. .cred_table {
  166. height: 100%;
  167. .main {
  168. min-height: 91%;
  169. background: #f7f7f7;
  170. padding-top: 54px;
  171. > div {
  172. width: 1200px;
  173. margin: 0 auto;
  174. }
  175. .title {
  176. font-weight: 700;
  177. font-size: 30px;
  178. line-height: 43px;
  179. text-transform: uppercase;
  180. color: #2c2c2c;
  181. }
  182. .number_cread {
  183. display: flex;
  184. justify-content: space-between;
  185. margin-top: 12px;
  186. .left {
  187. margin-top: 40px;
  188. font-weight: 400;
  189. font-size: 16px;
  190. line-height: 24px;
  191. color: #000000;
  192. }
  193. .right {
  194. width: 112px;
  195. height: 40px;
  196. background: #669aff;
  197. border-radius: 4px;
  198. font-weight: 500;
  199. font-size: 16px;
  200. line-height: 40px;
  201. text-align: center;
  202. color: #ffffff;
  203. cursor: pointer;
  204. }
  205. }
  206. .table {
  207. margin-top: 16px;
  208. > div {
  209. display: flex;
  210. align-items: center;
  211. height: 48px;
  212. background: #ffffff;
  213. border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  214. font-weight: 400;
  215. font-size: 16px;
  216. color: #000000;
  217. padding: 0 16px;
  218. .number {
  219. width: 20px;
  220. text-align: right;
  221. }
  222. .dv1 {
  223. cursor: pointer;
  224. }
  225. .dv {
  226. margin-left: 24px;
  227. width: 400px;
  228. overflow: hidden;
  229. white-space: nowrap;
  230. text-overflow: ellipsis;
  231. }
  232. img {
  233. width: 24px;
  234. height: 24px;
  235. cursor: pointer;
  236. margin-left: 24px;
  237. }
  238. }
  239. }
  240. .page {
  241. margin-top: 24px;
  242. }
  243. }
  244. }
  245. </style>
  246. <style lang="scss">
  247. .cred_table {
  248. .page {
  249. .el-pagination.is-background .el-pager li:not(.disabled).active {
  250. background: none;
  251. }
  252. .el-pagination {
  253. .btn-prev {
  254. padding: 0 !important;
  255. border: 1px solid #d9d9d9 !important;
  256. background: none;
  257. }
  258. .btn-next {
  259. padding: 0 !important;
  260. border: 1px solid #d9d9d9 !important;
  261. background: none;
  262. }
  263. }
  264. .el-pager {
  265. li {
  266. border: 1px solid #d9d9d9 !important;
  267. box-sizing: border-box;
  268. border-radius: 2px;
  269. margin: 0 7.5px;
  270. background: none;
  271. }
  272. .el-icon,
  273. .more,
  274. .btn-quicknext,
  275. .el-icon-more {
  276. border: none !important;
  277. }
  278. .active {
  279. color: black !important;
  280. border: 1px solid black !important;
  281. }
  282. }
  283. }
  284. }
  285. </style>