添加 上传文件和单词录入 两个工具

src/api/ajax.js

@@ -0,0 +1,10 @@
+import { request } from '@/utils/request';
+
+export function getContent(MethodName, data, loading) {
+  return request({
+    url: `/GCLSFileServer/ServiceInterface?MethodName=${MethodName}`,
+    method: 'post',
+    data,
+    loading: loading
+  });
+}

src/layouts/components/LayoutHeader.vue

@@ -6,7 +6,7 @@
         <el-col class="header-top-tab" :span="16">
           <span>主页</span>
           <template v-for="item in routerList">
-            <router-link v-if="item.isHidden" :key="item.path" :to="item.path">
+            <router-link v-if="item.isShow" :key="item.path" :to="item.path">
               {{ item.name }}
             </router-link>
           </template>
@@ -59,17 +59,27 @@ export default {
         {
           path: '/org_manager',
           name: '机构管理',
-          isHidden: popedomList.indexOf(1000001) !== -1
+          isShow: popedomList.indexOf(1000001) !== -1
         },
         {
           path: '/account_manager',
           name: '账户管理',
-          isHidden: popedomList.indexOf(1000002) !== -1
+          isShow: popedomList.indexOf(1000002) !== -1
         },
         {
           path: '/teacher_manager',
           name: '机构教师',
-          isHidden: popedomList.indexOf(1000003) !== -1
+          isShow: popedomList.indexOf(1000003) !== -1
+        },
+        {
+          path: '/vocabulary',
+          name: '词汇录入',
+          isShow: true
+        },
+        {
+          path: '/upload/uploadList',
+          name: '上传文件',
+          isShow: true
         }
       ];
 
@@ -100,12 +110,17 @@ export default {
 .header {
   width: 100%;
   min-width: 1200px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9;
 
   // 顶部
   &-top {
     height: 74px;
     padding: 15px 24px;
     line-height: 44px;
+    background-color: #fff;
 
     &-logo {
       font-size: 30px;

src/layouts/index.vue

@@ -26,9 +26,12 @@ export default {
 <style lang="scss">
 .basic-layout {
   height: 100%;
+  padding-top: 130px;
 
   .app-main {
     background-color: #f5f5f5;
+    height: 100%;
+    overflow-y: auto;
   }
 }
 </style>

src/router/index.js

@@ -22,7 +22,7 @@ function jumpURL() {
   if (isHasPopedom(1000003)) {
     return '/teacher_manager/index';
   }
-  return '/404';
+  return '/vocabulary/index';
 }
 
 // 路由独享的守卫的权限控制
@@ -108,6 +108,39 @@ const routes = [
     ]
   },
   {
+    path: '/vocabulary',
+    component: Layout,
+    meta: { title: '词汇录入' },
+    redirect: '/vocabulary/index',
+    children: [
+      {
+        path: '/vocabulary/index',
+        component: () => import('@/views/vocabulary/index')
+      },
+      {
+        path: '/vocabDetail',
+        component: () => import('@/views/vocabulary/vocabDetail')
+      }
+    ]
+  },
+  {
+    path: '/uploadList',
+    component: Layout,
+    meta: { title: '上传文件' },
+    redirect: '/upload/uploadList',
+    children: [
+      {
+        path: '/upload/uploadList',
+        component: () => import('@/views/upload/uploadList')
+      },
+      {
+        path: '/uploadDetail',
+        component: () => import('@/views/upload/uploadDetail'),
+        meta: { title: '文件详情' }
+      }
+    ]
+  },
+  {
     path: '*',
     redirect: '/404'
   }

src/styles/index.scss

@@ -6,6 +6,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
+  overflow: hidden;
   /* stylelint-disable-next-line */
   font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial,
     sans-serif;

src/styles/mixin.scss

@@ -1,7 +1,7 @@
 @mixin container {
   width: 1200px;
   min-width: 1200px;
-  height: 100%;
+  min-height: 100%;
   margin: 0 auto;
 }
 

src/utils/auth.js

@@ -23,6 +23,10 @@ export function getSessionID() {
   return Cookies.get('session_id');
 }
 
+export function getCookie(name) {
+  return Cookies.get(name);
+}
+
 export function setUserInfo(data) {
   for (let i = 0; i < userInfoList.length; i++) {
     const key = userInfoList[i];

src/utils/validate.js

@@ -0,0 +1,6 @@
+export function validNull(str) {
+  let data = str && str !== '' ? str.trim() : '';
+  if (data) {
+    return true;
+  }
+}

src/views/upload/uploadDetail.vue

@@ -0,0 +1,262 @@
+<!--  -->
+<template>
+  <div class="book-vocab">
+    <div class="book-vocab-content">
+      <el-form ref="searchForm" :model="searchForm" :rules="courseListRules" size="mini">
+        <el-form-item label="资源键值" label-width="90px" prop="resource_key">
+          <el-input
+            v-model="searchForm.resource_key"
+            autocomplete="off"
+            placeholder="请输入资源键值"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="资源名称" label-width="90px" prop="name">
+          <el-input v-model="searchForm.name" placeholder="请输入资源名称"></el-input>
+        </el-form-item>
+        <el-form-item label="备注" label-width="90px" prop="memo">
+          <el-input
+            v-model="searchForm.memo"
+            placeholder="请输入资源备注"
+            type="textarea"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="上传资源" label-width="90px" prop="fileList">
+          <el-upload
+            :action="url"
+            :limit="1"
+            :on-exceed="handleExceed"
+            :on-preview="handlePreview"
+            :on-remove="handleRemove"
+            :http-request="upload"
+            accept="*"
+            class="upload-demo"
+            list-type="picture"
+          >
+            <el-button size="mini" type="success">点击上传</el-button>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <el-button
+        v-if="resource_key === ''"
+        class="submitBtn"
+        size="mini"
+        type="primary"
+        @click="saveWord"
+        >保存资源</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import { validNull } from '@/utils/validate';
+import { getContent } from '@/api/ajax';
+import { fileUpload } from '@/api/app';
+
+export default {
+  components: {},
+  props: {
+    resource_key: {
+      default: '',
+      type: String
+    }
+  },
+  data() {
+    const validateNull = (rule, value, callback) => {
+      if (!validNull(value)) {
+        callback(new Error('请输入相应内容'));
+      } else {
+        callback();
+      }
+    };
+    return {
+      isData: false,
+      isSaving: false,
+      searchForm: {
+        resource_key: '',
+        memo: '',
+        name: ''
+      },
+      fileList: [], // 上传图片数组
+      courseListRules: {
+        // 填写规则
+        resource_key: [{ required: true, trigger: 'blur', validator: validateNull }],
+        name: [{ required: true, trigger: 'blur', validator: validateNull }],
+        memo: [{ required: true, trigger: 'blur', validator: validateNull }]
+        // price: [
+        //     { required: true, },
+        // ],
+      }
+    };
+  },
+  computed: {
+    url() {
+      return process.env.VUE_APP_BASE_API + '/GCLSFileServer/WebFileUpload';
+    }
+  },
+  watch: {
+    resource_key: {
+      handler: function (val, oldVal) {
+        this.$refs.searchForm.resetFields();
+        if (val) {
+          this.searchForm.resource_key = this.resource_key;
+          if (this.resource_key !== '') {
+            this.getDetail();
+          }
+        } else {
+          this.resource_key = '';
+          this.searchForm.name = '';
+          this.searchForm.resource_key = '';
+          this.searchForm.memo = '';
+          this.fileList = [];
+        }
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.searchForm.resource_key = this.resource_key;
+    if (this.resource_key !== '') {
+      this.getDetail();
+    } else {
+      this.resource_key = '';
+      this.searchForm.name = '';
+      this.searchForm.resource_key = '';
+      this.searchForm.memo = '';
+      this.fileList = [];
+    }
+  },
+  // 方法集合
+  methods: {
+    saveWord() {
+      this.$refs.searchForm.validate(valid => {
+        if (valid) {
+          this.isSaving = true;
+          let MethodName = 'file_resource_manager-InputFileResource';
+          const data_list = [];
+          this.fileList.forEach((item, index) => {
+            if (item.file_id) {
+              let obj = {
+                resource_key: this.searchForm.resource_key.trim(),
+                file_id: item.file_id,
+                memo: this.searchForm.memo.trim(),
+                name: this.searchForm.name.trim()
+              };
+              data_list.push(obj);
+            }
+          });
+          let data = {
+            file_list: data_list
+          };
+          getContent(MethodName, data)
+            .then(res => {
+              this.$message.success('保存成功');
+              this.isSaving = false;
+              this.resource_key = '';
+              this.searchForm.name = '';
+              this.searchForm.resource_key = '';
+              this.searchForm.memo = '';
+              this.fileList = [];
+              this.$emit('closeDialog');
+            })
+            .catch(() => {
+              this.isSaving = false;
+            });
+        }
+      });
+    },
+    upload(file) {
+      fileUpload('Open', file).then(response => {
+        if (response.status === 1) {
+          this.fileList = response.file_info_list;
+          this.$message.success('上传成功');
+        } else {
+          this.$message.warning(response.error);
+        }
+      });
+    },
+    handleRemove(file, fileList) {
+      this.fileList = fileList;
+    },
+    handlePreview(file) {
+      console.log(file);
+    },
+    // 如果传参不为空 查询详情
+    getDetail() {
+      let MethodName = 'file_resource_manager-GetFileResource';
+      let data_list = [];
+      data_list.push(this.resource_key);
+      let data = {
+        resource_key_list: data_list
+      };
+      getContent(MethodName, data)
+        .then(res => {
+          res.file_list.forEach((item, index) => {
+            this.searchForm = item;
+            if (item.file_url) {
+              let obj = {
+                name: '',
+                url: item.file_url
+              };
+              this.fileList.push(obj);
+            }
+          });
+        })
+        .catch(() => {});
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(
+        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
+          files.length + fileList.length
+        } 个文件`
+      );
+    }
+  } // 如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+.book-vocab {
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+
+  &-content {
+    margin: 0 auto;
+    padding: 30px 0;
+
+    .changeLang {
+      margin-right: 10px;
+    }
+
+    &-create {
+      width: 100%;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      margin-bottom: 20px;
+    }
+
+    &-search {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+    }
+
+    &-table {
+      width: 100%;
+      height: calc(100vh - 120px);
+      overflow-y: scroll;
+    }
+
+    &-pag {
+      padding-top: 30px;
+    }
+  }
+}
+
+.submitBtn {
+  margin-left: 90px;
+}
+</style>

src/views/upload/uploadList.vue

@@ -0,0 +1,162 @@
+<!--  -->
+<template>
+  <div class="book-vocab">
+    <div class="book-vocab-content">
+      <div class="book-vocab-content-create">
+        <el-button size="mini" type="primary" @click="createVocab">上传资源</el-button>
+      </div>
+      <div class="book-vocab-content-search">
+        <el-form :inline="true" :model="searchForm" size="mini">
+          <el-form-item label="名称">
+            <el-input v-model="searchForm.name" placeholder="请输入关键词"></el-input>
+          </el-form-item>
+          <el-form-item label="备注">
+            <el-input v-model="searchForm.memo" placeholder="请输入关键词"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onSearch">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="book-vocab-content-table">
+        <el-table :data="book_List">
+          <el-table-column label="键值" prop="resource_key" width="200"></el-table-column>
+          <el-table-column label="名称" prop="name"></el-table-column>
+          <el-table-column label="备注" prop="memo"></el-table-column>
+          <el-table-column fixed="right" label="操作" width="100">
+            <template slot-scope="scope">
+              <el-button size="small" type="text" @click="handleView(scope.row)">查看</el-button>
+              <!-- <el-button @click="handleEdit(scope.row)" size="small" type="text">编辑</el-button> -->
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="book-vocab-content-pag">
+        <el-pagination
+          background
+          :current-page="cur_page"
+          :page-size="page_capacity"
+          :page-sizes="[20, 30, 40, 50]"
+          :total="total_count"
+          layout="prev, pager, next, total, sizes, jumper"
+          @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
+        ></el-pagination>
+      </div>
+    </div>
+    <el-dialog :before-close="handleClose" :visible.sync="dialogFlag">
+      <uploadDetail :resource_key="resource_key" @closeDialog="closeDialog"></uploadDetail>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getContent } from '@/api/ajax';
+import uploadDetail from './uploadDetail';
+
+export default {
+  name: 'UploadList',
+  components: {
+    uploadDetail
+  },
+  data() {
+    return {
+      page_capacity: 20,
+      cur_page: 1,
+      total_count: 0,
+      searchForm: {
+        memo: '',
+        name: ''
+      },
+      book_List: [],
+      resource_key: '',
+      dialogFlag: false
+    };
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.getWordList();
+  },
+  // 方法集合
+  methods: {
+    getWordList() {
+      let MethodName = 'file_resource_manager-PageQueryFileResourceList';
+      let data = {
+        memo: this.searchForm.memo,
+        name: this.searchForm.name,
+        page_capacity: this.page_capacity,
+        cur_page: this.cur_page
+      };
+      getContent(MethodName, data).then(res => {
+        this.total_count = res.total_count;
+        this.book_List = res.file_list;
+      });
+    },
+    handleSizeChange(val) {
+      this.page_capacity = val;
+      this.cur_page = 1;
+      this.getWordList();
+    },
+    handleCurrentChange(val) {
+      this.cur_page = val;
+      this.getWordList();
+    },
+    onSearch() {
+      this.getWordList();
+    },
+    // 新增资源
+    createVocab() {
+      this.resource_key = '';
+      this.dialogFlag = true;
+    },
+    // 查看资源详情
+    handleView(row) {
+      this.resource_key = row.resource_key;
+      this.dialogFlag = true;
+    },
+    // 关闭弹窗
+    handleClose(done) {
+      this.loading = false;
+      done();
+    },
+    // 子级调用父级关闭弹窗
+    closeDialog() {
+      this.dialogFlag = false;
+      this.cur_page = 1;
+      this.getWordList();
+    }
+  } // 如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+
+<style lang="scss" scope>
+@import '~@/styles/mixin.scss';
+
+.book-vocab {
+  width: 100%;
+  height: 100%;
+
+  &-content {
+    width: 1200px;
+    margin: 0 auto;
+    padding: 30px 0;
+
+    &-create {
+      width: 100%;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      margin-bottom: 20px;
+    }
+
+    &-table {
+      width: 100%;
+      min-height: calc(100vh - 130px);
+    }
+
+    &-pag {
+      @include pagination;
+    }
+  }
+}
+</style>

src/views/vocabulary/index.vue

@@ -0,0 +1,152 @@
+<!--  -->
+<template>
+  <div class="book-vocab">
+    <div class="book-vocab-content">
+      <div class="book-vocab-content-create">
+        <el-button size="mini" type="primary" @click="createVocab">新增词汇</el-button>
+      </div>
+      <div class="book-vocab-content-search">
+        <el-form :inline="true" :model="searchForm" size="mini">
+          <el-form-item label="中文词汇">
+            <el-input v-model="searchForm.word" placeholder="请输入关键词"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onSearch">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="book-vocab-content-table">
+        <el-table :data="book_List">
+          <el-table-column label="词汇关键词" prop="word_key" width="200" />
+          <el-table-column label="中文" prop="word" />
+          <el-table-column fixed="right" label="操作" width="100">
+            <template slot-scope="scope">
+              <el-button size="small" type="text" @click="handleView(scope.row)">查看</el-button>
+              <el-button size="small" type="text" @click="handleEdit(scope.row)">编辑</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="book-vocab-content-pag">
+        <el-pagination
+          background
+          :current-page="cur_page"
+          :page-size="page_capacity"
+          :page-sizes="[20, 30, 40, 50]"
+          :total="total_count"
+          layout="prev, pager, next, total, sizes, jumper"
+          @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
+        ></el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getContent } from '@/api/ajax';
+
+export default {
+  data() {
+    return {
+      page_capacity: 20,
+      cur_page: 1,
+      total_count: 0,
+      searchForm: {
+        word: ''
+      },
+      book_List: []
+    };
+  },
+  mounted() {
+    this.getCode();
+    this.getWordList();
+  },
+  methods: {
+    getCode() {
+      let MethodName = 'user_manager-SendVerificationCode';
+      let data = {
+        verification_type: 'SMS',
+        phone_or_email: '18518112954'
+      };
+      getContent(MethodName, data).then(res => {
+        console.log(res);
+      });
+    },
+    getWordList() {
+      let MethodName = 'language_manager-PageQueryWordList_ZH';
+      let data = {
+        word: this.searchForm.word,
+        page_capacity: this.page_capacity,
+        cur_page: this.cur_page
+      };
+      getContent(MethodName, data).then(res => {
+        this.total_count = res.total_count;
+        this.book_List = res.word_list;
+      });
+    },
+    handleSizeChange(val) {
+      this.page_capacity = val;
+      this.cur_page = 1;
+      this.getWordList();
+    },
+    handleCurrentChange(val) {
+      this.cur_page = val;
+      this.getWordList();
+    },
+    onSearch() {
+      this.getWordList();
+    },
+    // 新增词汇
+    createVocab() {
+      this.$router.push({
+        path: '/vocabDetail'
+      });
+    },
+    // 查看词汇详情
+    handleView(row) {
+      this.$router.push({
+        path: '/vocabDetail?wordKey=' + row.word_key
+      });
+    },
+    // 编辑词汇
+    handleEdit(row) {
+      this.$router.push({
+        path: '/vocabDetail?wordKey=' + row.word_key
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~@/styles/mixin.scss';
+
+.book-vocab {
+  width: 100%;
+  height: 100%;
+
+  &-content {
+    width: 1200px;
+    margin: 0 auto;
+    padding: 30px 0;
+
+    &-create {
+      width: 100%;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      margin-bottom: 20px;
+    }
+
+    &-table {
+      width: 100%;
+      min-height: calc(100vh - 130px);
+    }
+
+    &-pag {
+      @include pagination;
+    }
+  }
+}
+</style>

src/views/vocabulary/vocabDetail.vue

@@ -0,0 +1,208 @@
+<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(res => {
+        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;
+    margin: 0 auto;
+    padding: 30px 0;
+
+    .changeLang {
+      margin-right: 10px;
+    }
+
+    &-create {
+      width: 100%;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      margin-bottom: 20px;
+    }
+
+    &-search {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+    }
+
+    &-table {
+      width: 100%;
+      min-height: calc(100vh - 130px);
+    }
+
+    &-pag {
+      padding-top: 30px;
+    }
+  }
+}
+</style>