vocabDetail.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. <template>
  2. <div class="book-vocab">
  3. <div class="book-vocab-content">
  4. <div class="book-vocab-content-search">
  5. <el-form :inline="true" size="mini" :model="searchForm">
  6. <el-form-item label="词汇键值">
  7. <el-input v-model="searchForm.word_key" placeholder="请输入词汇键值" />
  8. </el-form-item>
  9. <el-form-item>
  10. <el-button v-if="wordKey" type="primary" @click="onSearch">查询</el-button>
  11. </el-form-item>
  12. </el-form>
  13. <div v-if="language_list.length > 0" class="language_list">
  14. <el-select
  15. v-model="language_value"
  16. placeholder="请选择添加的语言"
  17. size="mini"
  18. class="changeLang"
  19. @change="changeLang"
  20. >
  21. <el-option
  22. v-for="item in language_list"
  23. :key="item.language_type"
  24. :label="item.language_name"
  25. :value="item.language_type"
  26. >
  27. </el-option>
  28. </el-select>
  29. <el-button type="primary" size="mini" @click="addLang">添加语言</el-button>
  30. </div>
  31. <el-button type="primary" size="mini" @click="saveWord">保存词汇</el-button>
  32. </div>
  33. <div v-if="word_list.length > 0" class="book-vocab-content-table">
  34. <el-table :data="word_list">
  35. <el-table-column prop="language_name" label="语言类型" width="200"> </el-table-column>
  36. <el-table-column prop="language_name_zh" label="语言类型" width="200"> </el-table-column>
  37. <el-table-column label="词汇">
  38. <template slot-scope="scope">
  39. <el-input v-model="scope.row.word"></el-input>
  40. </template>
  41. </el-table-column>
  42. <el-table-column fixed="right" label="操作" width="120">
  43. <template slot-scope="scope">
  44. <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)"> 删除 </el-button>
  45. </template>
  46. </el-table-column>
  47. </el-table>
  48. </div>
  49. <!-- <div class="book-vocab-content-pag">
  50. <el-pagination
  51. @current-change="handleCurrentChange"
  52. :current-page="cur_page"
  53. :page-size="page_capacity"
  54. layout="total, prev, pager, next, jumper"
  55. :total="total_count"
  56. >
  57. </el-pagination>
  58. </div> -->
  59. </div>
  60. </div>
  61. </template>
  62. <script>
  63. import { getContent } from '@/api/ajax';
  64. export default {
  65. data() {
  66. return {
  67. isData: false,
  68. isSaving: false,
  69. searchForm: {
  70. word_key: ''
  71. },
  72. word_list: [],
  73. language_list: [],
  74. wordKey: '',
  75. language_value: '',
  76. language_item: null
  77. };
  78. },
  79. mounted() {
  80. let wordKey = this.$route.query.wordKey;
  81. this.wordKey = wordKey || '';
  82. this.searchForm.word_key = this.wordKey;
  83. this.getWordList();
  84. },
  85. // 方法集合
  86. methods: {
  87. getWordList() {
  88. let MethodName = 'language_manager-ReadWord';
  89. let data = {
  90. word_key: this.searchForm.word_key
  91. };
  92. getContent(MethodName, data).then(res => {
  93. this.word_list = res.word_list;
  94. this.getLanguageList();
  95. });
  96. },
  97. onSearch() {
  98. this.getWordList();
  99. },
  100. saveWord() {
  101. this.isSaving = true;
  102. let MethodName = 'language_manager-InputWord';
  103. let data = {
  104. word_key: this.searchForm.word_key,
  105. word_list: this.word_list
  106. };
  107. getContent(MethodName, data).then(() => {
  108. this.$message.success('保存成功');
  109. this.isSaving = false;
  110. });
  111. },
  112. getLanguageList() {
  113. let MethodName = 'language_manager-GetLanguageList';
  114. getContent(MethodName, {}).then(res => {
  115. let language_list = res.language_list;
  116. if (this.word_list.length > 0) {
  117. this.language_list = this.arrayRepeat(this.word_list, language_list);
  118. }
  119. });
  120. },
  121. changeLang(val) {
  122. this.language_list.forEach(item => {
  123. if (item.language_type === val) {
  124. this.language_item = val;
  125. return false;
  126. }
  127. });
  128. },
  129. addLang() {
  130. if (!this.language_item) {
  131. this.$message.warning('请选择添加语言!');
  132. return;
  133. }
  134. let obj = JSON.parse(JSON.stringify(this.language_item));
  135. obj.word = '';
  136. this.word_list.push(obj);
  137. },
  138. handleDel(index) {
  139. this.word_list.splice(index, 1);
  140. },
  141. arrayRepeat(array1, array2) {
  142. let result = [];
  143. for (let i = 0; i < array2.length; i++) {
  144. let obj = array2[i];
  145. let num = obj.language_type;
  146. let isExist = false;
  147. for (let j = 0; j < array1.length; j++) {
  148. let aj = array1[j];
  149. let n = aj.language_type;
  150. if (n === num) {
  151. isExist = true;
  152. break;
  153. }
  154. }
  155. if (!isExist) {
  156. result.push(obj);
  157. }
  158. }
  159. return result;
  160. }
  161. }
  162. };
  163. </script>
  164. <style lang="scss" scoped>
  165. .book-vocab {
  166. width: 100%;
  167. height: calc(100vh - 130px);
  168. overflow: hidden;
  169. &-content {
  170. width: 1200px;
  171. padding: 30px 0;
  172. margin: 0 auto;
  173. .changeLang {
  174. margin-right: 10px;
  175. }
  176. &-create {
  177. display: flex;
  178. align-items: center;
  179. justify-content: flex-start;
  180. width: 100%;
  181. margin-bottom: 20px;
  182. }
  183. &-search {
  184. display: flex;
  185. align-items: flex-start;
  186. justify-content: space-between;
  187. }
  188. &-table {
  189. width: 100%;
  190. min-height: calc(100vh - 130px);
  191. }
  192. &-pag {
  193. padding-top: 30px;
  194. }
  195. }
  196. }
  197. </style>