123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206 |
- <template>
- <div class="book-vocab">
- <div class="book-vocab-content">
- <div class="book-vocab-content-search">
- <el-form :inline="true" size="mini" :model="searchForm">
- <el-form-item label="词汇键值">
- <el-input v-model="searchForm.word_key" placeholder="请输入词汇键值" />
- </el-form-item>
- <el-form-item>
- <el-button v-if="wordKey" type="primary" @click="onSearch">查询</el-button>
- </el-form-item>
- </el-form>
- <div v-if="language_list.length > 0" class="language_list">
- <el-select
- v-model="language_value"
- placeholder="请选择添加的语言"
- size="mini"
- class="changeLang"
- @change="changeLang"
- >
- <el-option
- v-for="item in language_list"
- :key="item.language_type"
- :label="item.language_name"
- :value="item.language_type"
- >
- </el-option>
- </el-select>
- <el-button type="primary" size="mini" @click="addLang">添加语言</el-button>
- </div>
- <el-button type="primary" size="mini" @click="saveWord">保存词汇</el-button>
- </div>
- <div v-if="word_list.length > 0" class="book-vocab-content-table">
- <el-table :data="word_list">
- <el-table-column prop="language_name" label="语言类型" width="200"> </el-table-column>
- <el-table-column prop="language_name_zh" label="语言类型" width="200"> </el-table-column>
- <el-table-column label="词汇">
- <template slot-scope="scope">
- <el-input v-model="scope.row.word"></el-input>
- </template>
- </el-table-column>
- <el-table-column fixed="right" label="操作" width="120">
- <template slot-scope="scope">
- <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)"> 删除 </el-button>
- </template>
- </el-table-column>
- </el-table>
- </div>
- <!-- <div class="book-vocab-content-pag">
- <el-pagination
- @current-change="handleCurrentChange"
- :current-page="cur_page"
- :page-size="page_capacity"
- layout="total, prev, pager, next, jumper"
- :total="total_count"
- >
- </el-pagination>
- </div> -->
- </div>
- </div>
- </template>
- <script>
- import { getContent } from '@/api/ajax';
- export default {
- data() {
- return {
- isData: false,
- isSaving: false,
- searchForm: {
- word_key: ''
- },
- word_list: [],
- language_list: [],
- wordKey: '',
- language_value: '',
- language_item: null
- };
- },
- mounted() {
- let wordKey = this.$route.query.wordKey;
- this.wordKey = wordKey || '';
- this.searchForm.word_key = this.wordKey;
- this.getWordList();
- },
- // 方法集合
- methods: {
- getWordList() {
- let MethodName = 'language_manager-ReadWord';
- let data = {
- word_key: this.searchForm.word_key
- };
- getContent(MethodName, data).then(res => {
- this.word_list = res.word_list;
- this.getLanguageList();
- });
- },
- onSearch() {
- this.getWordList();
- },
- saveWord() {
- this.isSaving = true;
- let MethodName = 'language_manager-InputWord';
- let data = {
- word_key: this.searchForm.word_key,
- word_list: this.word_list
- };
- getContent(MethodName, data).then(() => {
- this.$message.success('保存成功');
- this.isSaving = false;
- });
- },
- getLanguageList() {
- let MethodName = 'language_manager-GetLanguageList';
- getContent(MethodName, {}).then(res => {
- let language_list = res.language_list;
- if (this.word_list.length > 0) {
- this.language_list = this.arrayRepeat(this.word_list, language_list);
- }
- });
- },
- changeLang(val) {
- this.language_list.forEach(item => {
- if (item.language_type === val) {
- this.language_item = val;
- return false;
- }
- });
- },
- addLang() {
- if (!this.language_item) {
- this.$message.warning('请选择添加语言!');
- return;
- }
- let obj = JSON.parse(JSON.stringify(this.language_item));
- obj.word = '';
- this.word_list.push(obj);
- },
- handleDel(index) {
- this.word_list.splice(index, 1);
- },
- arrayRepeat(array1, array2) {
- let result = [];
- for (let i = 0; i < array2.length; i++) {
- let obj = array2[i];
- let num = obj.language_type;
- let isExist = false;
- for (let j = 0; j < array1.length; j++) {
- let aj = array1[j];
- let n = aj.language_type;
- if (n === num) {
- isExist = true;
- break;
- }
- }
- if (!isExist) {
- result.push(obj);
- }
- }
- return result;
- }
- }
- };
- </script>
- <style lang="scss" scoped>
- .book-vocab {
- width: 100%;
- height: calc(100vh - 130px);
- overflow: hidden;
- &-content {
- width: 1200px;
- padding: 30px 0;
- margin: 0 auto;
- .changeLang {
- margin-right: 10px;
- }
- &-create {
- display: flex;
- align-items: center;
- justify-content: flex-start;
- width: 100%;
- margin-bottom: 20px;
- }
- &-search {
- display: flex;
- align-items: flex-start;
- justify-content: space-between;
- }
- &-table {
- width: 100%;
- min-height: calc(100vh - 130px);
- }
- &-pag {
- padding-top: 30px;
- }
- }
- }
- </style>
|