update

src/components/common/CommonTable.vue

@@ -7,8 +7,9 @@
       </div>
       <slot></slot>
     </div>
-    <!-- v-bind="$attrs" https://cn.vuejs.org/v2/api/#vm-attrs -->
-    <!-- v-on="$listeners" https://cn.vuejs.org/v2/api/#vm-listeners -->
+    <!-- v-bind="$attrs" https://cn.vuejs.org/api/component-instance.html#attrs -->
+    <!-- v-on="$listeners" https://v2.cn.vuejs.org/v2/api/#vm-listeners -->
+    <!-- vue3 中 v-on 事件都在 $attrs 中，禁用 Attributes 继承然后使用 v-bind="$attrs" 即可 https://cn.vuejs.org/guide/components/attrs.html -->
     <el-pagination
       background
       :page-sizes="[10, 20, 30, 40, 50]"

src/utils/list.js

@@ -2,9 +2,10 @@ import { ref } from 'vue';
 
 /**
  * 列表公用数据和方法
+ * @param {Number} capacity 每页容量
  */
-export function useList() {
-  let page_capacity = ref(10); // 每页容量
+export function useList(capacity = 10) {
+  let page_capacity = ref(capacity); // 每页容量
   let cur_page = ref(1); // 当前页
   let total_count = ref(0); // 总记录数
   let list = ref([]); // 列表

src/views/vocabulary/index.vue

@@ -14,12 +14,12 @@
             <el-input v-model="searchForm.word" placeholder="请输入关键词" />
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" @click="onSearch">查询</el-button>
+            <el-button type="primary" @click="getWordList">查询</el-button>
           </el-form-item>
         </el-form>
       </div>
       <div class="book-vocab-content-table">
-        <el-table :data="book_List">
+        <el-table :data="list">
           <el-table-column label="词汇关键词" prop="word_key" width="200" />
           <el-table-column label="中文" prop="word" />
           <el-table-column fixed="right" label="操作" width="100">
@@ -38,8 +38,10 @@
           :page-sizes="[20, 30, 40, 50]"
           :total="total_count"
           layout="prev, pager, next, total, sizes, jumper"
-          @current-change="handleCurrentChange"
-          @size-change="handleSizeChange"
+          @prev-click="changePage($event, getWordList)"
+          @next-click="changePage($event, getWordList)"
+          @current-change="changePage($event, getWordList)"
+          @size-change="changePageSize($event, getWordList)"
         />
       </div>
     </div>
@@ -47,113 +49,105 @@
 </template>
 
 <script>
+export default {
+  name: 'VocabPage'
+};
+</script>
+
+<script setup>
+import { ref } from 'vue';
+import { useList } from '@/utils/list';
 import { getContent, InputWord } from '@/api/ajax';
+import { useRouter } from 'vue-router/composables';
+import { Message, Loading } from 'element-ui';
+
 import * as xlsx from 'xlsx';
 
-export default {
-  data() {
-    return {
-      page_capacity: 20,
-      cur_page: 1,
-      total_count: 0,
-      searchForm: {
-        word: ''
-      },
-      book_List: []
-    };
-  },
-  mounted() {
-    this.getWordList();
-  },
-  methods: {
-    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}`
-      });
-    },
-    async handleFileAsync(_file) {
-      const file = _file.file;
-      if (file.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
-        this.$message.warning('上传的不是xlsx文件');
-        return;
-      }
-      const data = await file.arrayBuffer();
-      const workbook = xlsx.read(data);
-
-      // 得到工作表
-      let worksheet = workbook.Sheets[workbook.SheetNames[0]];
-      let jsa = xlsx.utils.sheet_to_json(worksheet);
-
-      let dataList = [];
-      jsa.forEach(({ Key, 俄语, 印地语, 德语, 日语, 汉语, 法语, 泰语, 英语, 西语, 阿拉伯语, 韩语 }) => {
-        dataList.push({
-          word_key: Key,
-          word_list: [
-            { language_type: 'ZH', word: 汉语 },
-            { language_type: 'EN', word: 英语 },
-            { language_type: 'AR', word: 阿拉伯语 },
-            { language_type: 'DE', word: 德语 },
-            { language_type: 'ES', word: 西语 },
-            { language_type: 'FR', word: 法语 },
-            { language_type: 'HI', word: 印地语 },
-            { language_type: 'JA', word: 日语 },
-            { language_type: 'KO', word: 韩语 },
-            { language_type: 'RU', word: 俄语 },
-            { language_type: 'TH', word: 泰语 }
-          ]
-        });
-      });
-      this.$loading({ text: '正在导入多语言文件中...' });
-      let computedNum = 0;
-      dataList.forEach(async (item, i) => {
-        await InputWord(item).then(() => {
-          computedNum += 1;
-          if (computedNum === dataList.length) {
-            this.$message.success('导入成功');
-            this.$loading().close();
-          }
-        });
-      });
-    }
+let router = useRouter();
+
+let { changePage, changePageSize, cur_page, list, page_capacity, total_count } = useList(20);
+
+let searchForm = ref({
+  word: ''
+});
+function getWordList() {
+  let MethodName = 'language_manager-PageQueryWordList_ZH';
+  let data = {
+    word: searchForm.value.word,
+    page_capacity: page_capacity.value,
+    cur_page: cur_page.value
+  };
+  getContent(MethodName, data).then(res => {
+    total_count.value = res.total_count;
+    list.value = res.word_list;
+  });
+}
+getWordList();
+
+// 新增词汇
+function createVocab() {
+  router.push({
+    path: '/vocabDetail'
+  });
+}
+// 查看词汇详情
+function handleView(row) {
+  router.push({
+    path: `/vocabDetail?wordKey=${row.word_key}`
+  });
+}
+// 编辑词汇
+function handleEdit(row) {
+  router.push({
+    path: `/vocabDetail?wordKey=${row.word_key}`
+  });
+}
+
+// 导入多语言文件
+async function handleFileAsync(_file) {
+  const file = _file.file;
+  if (file.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
+    Message.warning('上传的不是xlsx文件');
+    return;
   }
-};
+  const data = await file.arrayBuffer();
+  const workbook = xlsx.read(data);
+
+  // 得到工作表
+  let worksheet = workbook.Sheets[workbook.SheetNames[0]];
+  let jsa = xlsx.utils.sheet_to_json(worksheet);
+
+  let dataList = [];
+  jsa.forEach(({ Key, 俄语, 印地语, 德语, 日语, 汉语, 法语, 泰语, 英语, 西语, 阿拉伯语, 韩语 }) => {
+    dataList.push({
+      word_key: Key,
+      word_list: [
+        { language_type: 'ZH', word: 汉语 },
+        { language_type: 'EN', word: 英语 },
+        { language_type: 'AR', word: 阿拉伯语 },
+        { language_type: 'DE', word: 德语 },
+        { language_type: 'ES', word: 西语 },
+        { language_type: 'FR', word: 法语 },
+        { language_type: 'HI', word: 印地语 },
+        { language_type: 'JA', word: 日语 },
+        { language_type: 'KO', word: 韩语 },
+        { language_type: 'RU', word: 俄语 },
+        { language_type: 'TH', word: 泰语 }
+      ]
+    });
+  });
+  let loading = Loading.service({ text: '正在导入多语言文件中...' });
+  let computedNum = 0;
+  dataList.forEach(async (item, i) => {
+    await InputWord(item).then(() => {
+      computedNum += 1;
+      if (computedNum === dataList.length) {
+        Message.success('导入成功');
+        loading.close();
+      }
+    });
+  });
+}
 </script>
 
 <style lang="scss" scoped>