添加导入多语言文件功能

package.json

@@ -10,19 +10,20 @@
     "lint:css": "stylelint **/*.{html,vue,css,sass,scss,less}"
   },
   "dependencies": {
-    "axios": "^0.27.2",
-    "core-js": "^3.26.1",
-    "element-ui": "^2.15.12",
+    "axios": "^1.3.4",
+    "core-js": "^3.29.0",
+    "element-ui": "^2.15.13",
     "js-cookie": "^3.0.1",
     "md5": "^2.3.0",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
     "vue": "^2.7.14",
     "vue-router": "^3.6.5",
-    "vuex": "^3.6.2"
+    "vuex": "^3.6.2",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.5",
+    "@babel/core": "^7.21.0",
     "@babel/eslint-parser": "^7.19.1",
     "@rushstack/eslint-patch": "^1.2.0",
     "@vue/cli-plugin-babel": "~5.0.8",
@@ -31,41 +32,40 @@
     "@vue/cli-plugin-unit-jest": "^5.0.8",
     "@vue/cli-plugin-vuex": "~5.0.8",
     "@vue/cli-service": "~5.0.8",
-    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/preload-webpack-plugin": "^2.0.0",
-    "@vue/test-utils": "^1.3.3",
+    "@vue/test-utils": "^1.3.4",
     "babel-jest": "^27.5.1",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "compression-webpack-plugin": "^6.1.1",
     "eslint": "^7.32.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.8.0",
+    "eslint-plugin-vue": "^9.9.0",
     "html-webpack-plugin": "^5.5.0",
-    "postcss": "^8.4.19",
+    "postcss": "^8.4.21",
     "postcss-html": "^1.5.0",
-    "prettier": "2.8.0",
-    "sass": "^1.56.1",
+    "prettier": "2.8.4",
+    "sass": "^1.58.3",
     "sass-loader": "^10.4.1",
     "script-ext-html-webpack-plugin": "^2.1.5",
-    "stylelint": "^14.15.0",
-    "stylelint-config-prettier": "^9.0.4",
-    "stylelint-config-recess-order": "^3.0.0",
+    "stylelint": "^15.2.0",
+    "stylelint-config-recess-order": "^4.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
-    "stylelint-config-standard-scss": "^6.1.0",
-    "stylelint-declaration-block-no-ignored-properties": "^2.6.0",
-    "stylelint-webpack-plugin": "^3.3.0",
+    "stylelint-config-standard-scss": "^7.0.1",
+    "stylelint-declaration-block-no-ignored-properties": "^2.7.0",
+    "stylelint-webpack-plugin": "^4.1.0",
     "svg-sprite-loader": "^6.0.11",
     "svgo": "^2.8.0",
+    "vue-demi": "^0.13.11",
     "vue-loader": "^15.10.1",
-    "vue-template-compiler": "^2.7.14",
-    "vue-demi": "^0.13.11"
+    "vue-template-compiler": "^2.7.14"
   },
   "browserslist": [
     "> 1%",
-    "last 2 versions"
+    "last 1 versions"
   ],
   "engines": {
-    "node": ">= 8.9",
-    "npm": ">= 3.0.0"
+    "node": ">= 14",
+    "npm": ">= 6.0.0"
   }
 }

src/api/ajax.js

@@ -8,3 +8,16 @@ export function getContent(MethodName, data, loading) {
     loading
   });
 }
+
+/**
+ * 录入词汇
+ * @param {Object} data
+ */
+export function InputWord(data) {
+  return request({
+    url: `/GCLSFileServer/ServiceInterface?MethodName=language_manager-InputWord`,
+    method: 'post',
+    data,
+    timeout: 0
+  });
+}

src/layouts/components/UpdatePassword.vue

@@ -91,6 +91,5 @@ export default {
 
 <style lang="scss">
 @import '~@/styles/mixin';
-
 @include dialog;
 </style>

src/views/vocabulary/index.vue

@@ -3,7 +3,10 @@
   <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>
+        <el-button style="margin-right: 12px" size="mini" type="primary" @click="createVocab">新增词汇</el-button>
+        <el-upload action="no" :http-request="handleFileAsync" :show-file-list="false">
+          <el-button class="upload-file" size="mini" type="primary">导入多语言文件</el-button>
+        </el-upload>
       </div>
       <div class="book-vocab-content-search">
         <el-form :inline="true" :model="searchForm" size="mini">
@@ -44,7 +47,8 @@
 </template>
 
 <script>
-import { getContent } from '@/api/ajax';
+import { getContent, InputWord } from '@/api/ajax';
+import * as xlsx from 'xlsx';
 
 export default {
   data() {
@@ -114,6 +118,50 @@ export default {
       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((item, i) => {
+        InputWord(item).then(() => {
+          computedNum += 1;
+          if (computedNum === dataList.length) {
+            this.$message.success('导入成功');
+            this.$loading().close();
+          }
+        });
+      });
     }
   }
 };

src/views/vocabulary/vocabDetail.vue

@@ -23,8 +23,7 @@
               :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>
@@ -32,11 +31,11 @@
       </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 prop="language_name" label="语言类型" width="200" />
+          <el-table-column prop="language_name_zh" label="语言类型" width="200" />
           <el-table-column label="词汇">
             <template slot-scope="scope">
-              <el-input v-model="scope.row.word"></el-input>
+              <el-input v-model="scope.row.word" />
             </template>
           </el-table-column>
           <el-table-column fixed="right" label="操作" width="120">
@@ -46,16 +45,6 @@
           </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>
@@ -168,7 +157,7 @@ export default {
 .book-vocab {
   width: 100%;
   height: calc(100vh - 130px);
-  overflow: hidden;
+  overflow: auto;
 
   &-content {
     width: 1200px;

stylelint.config.js

@@ -1,17 +1,12 @@
 module.exports = {
   defaultSeverity: 'warning',
-  extends: [
-    'stylelint-config-standard-scss',
-    'stylelint-config-recess-order',
-    'stylelint-config-prettier',
-    'stylelint-config-recommended-vue'
-  ],
+  extends: ['stylelint-config-standard-scss', 'stylelint-config-recess-order', 'stylelint-config-recommended-vue'],
   plugins: ['stylelint-declaration-block-no-ignored-properties'],
   rules: {
+    'scss/no-global-function-names': null,
     'plugin/declaration-block-no-ignored-properties': true,
     'order/properties-alphabetical-order': null,
-    // 指定2个空格
-    indentation: 2,
+    'no-descending-specificity': null,
     // 样式块中不允许重复的属性
     'declaration-block-no-duplicate-properties': true,
     // 指定颜色函数使用传统符号隔开
@@ -32,20 +27,14 @@ module.exports = {
     'font-family-name-quotes': 'always-unless-keyword',
     // url 函数内部必须有引号
     'function-url-quotes': 'always',
-    // 指定字符串引号为单引号
-    'string-quotes': 'single',
-    // 在规则的分号之前不允许有空格
-    'at-rule-semicolon-space-before': 'never',
-    // 首行不允许空行
-    'no-empty-first-line': true,
-    // 不允许使用 unicode 作为顺序标记
-    'unicode-bom': 'never',
-    'at-rule-no-unknown': [true, { ignoreAtRules: ['import', 'include', 'mixin', 'include', 'extend'] }],
-    'max-nesting-depth': 8,
-    'selector-no-qualifying-type': [true, { ignore: ['attribute', 'class', 'id'] }],
     // 为类选择器指定一个模式
     'selector-class-pattern': null,
-    'declaration-colon-newline-after': null,
-    'value-keyword-case': ['lower', { ignoreFunctions: ['optimizeLegibility'], camelCaseSvgKeywords: true }]
+    'at-rule-no-unknown': [true, { ignoreAtRules: ['import', 'include', 'mixin', 'include', 'extend', 'each'] }],
+    'max-nesting-depth': [8, { ignore: ['blockless-at-rules', 'pseudo-classes'] }],
+    'selector-no-qualifying-type': [true, { ignore: ['attribute', 'class', 'id'] }],
+    'value-keyword-case': ['lower', { camelCaseSvgKeywords: true }],
+    'value-no-vendor-prefix': [true, { ignoreValues: ['box'] }],
+    'selector-pseudo-class-no-unknown': [true, { ignorePseudoClasses: ['deep'] }]
+    // 'declaration-property-value-no-unknown': [true, { ignoreProperties: { '/.+/': '/^v-bind(.*)$/' } }]
   }
 };