yh-i18n 2.3.7 → 2.3.8

package/list.vue

@@ -107,14 +107,23 @@
     @close="cancelForm"
     draggable
     :title="formData.id ? ct('编辑翻译') : ct('新增翻译')">
-    <vxe-form
-      title-align="right"
-      title-width="100px"
-      ref="vxeFormRef"
-      title-colon
-      :data="formData"
-      :items="formItems"
-      :rules="formRules"></vxe-form>
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      label-position="right">
+      <el-form-item :label="ct('翻译键值')" prop="name">
+        <el-input tabindex="1" v-model="formData.name" class="i18n-form-item" id="i18nFormItem1" />
+      </el-form-item>
+      <el-form-item
+        v-for="(item, index) in langFields"
+        :key="item.field"
+        :label="ct(item.label)"
+        :prop="item.field">
+        <el-input ref="langFieldsRef" :tabindex="index + 2" v-model="formData[item.field]" class="i18n-form-item" :id="item.id" />
+      </el-form-item>
+    </el-form>
     <template #footer>
       <div class="yh-i18n-form-actions">
         <el-button
@@ -145,14 +154,15 @@
   </el-dialog>
 </template>
 <script setup lang="ts">
-import {reactive, ref, onMounted, watch} from 'vue';
+import {reactive, ref, onMounted, onUnmounted, onActivated, onDeactivated, watch} from 'vue';
 import {ElLoadingService, ElMessage, ElMessageBox} from 'element-plus';
 import {useI18nStore, ct} from 'yh-i18n';
 import http from '@/libs/api.request';
-import {VxeFormInstance, VxeFormPropTypes} from 'vxe-table';
+import type {FormInstance} from 'element-plus';
 import {exportExcel, importExcel} from './excelTool';
 const i18nStore = useI18nStore();
-const vxeFormRef = ref<VxeFormInstance>();
+const formRef = ref<FormInstance>();
+const langFieldsRef = ref<InstanceType<typeof import('element-plus')['ElInput']>>();
 
 const insertUrl = '/translate/insert';
 const updateUrl = '/translate/edit';
@@ -241,10 +251,9 @@ const langList = Object.keys(i18nStore.langList);
 const formDataIndex = ref();
 const formData = reactive<any>({});
 const formShow = ref(false);
-let inputs: HTMLInputElement[] = [];
 function cancelForm() {
-  vxeFormRef?.value?.reset();
-  vxeFormRef?.value?.clearValidate();
+  formRef.value?.resetFields();
+  formRef.value?.clearValidate();
   formDataIndex.value = void 0;
   formData.id = null;
   formShow.value = false;
@@ -272,8 +281,7 @@ function editOne(item, index) {
   }
   formShow.value = true;
   setTimeout(() => {
-    (document.querySelector('#i18nFormItem1 input') as HTMLInputElement)?.focus();
-    inputs = Array.from(document.querySelectorAll('.i18n-form-item input'));
+    langFieldsRef.value[0]?.focus();
   }, 500);
 }
 
@@ -286,10 +294,10 @@ function nextOne() {
 }
 
 function saveOne() {
-  let isAdd = !!formData.id;
+  let isAdd = !!!formData.id;
   let url = updateUrl;
-  vxeFormRef?.value?.validate().then((errMap) => {
-    if (!errMap) {
+  formRef.value?.validate((valid) => {
+    if (valid) {
       let data: any = {
         name: formData.name,
         content: {},
@@ -316,13 +324,13 @@ function saveOne() {
           if (res?.data?.status === 200) {
             ElMessage.success(res.data.msg);
             if (isAdd) {
+              cancelForm();
+              getDataList(true);
+            } else {
               dataList.value[formDataIndex.value] = {
                 ...formData,
               };
               nextOne();
-            } else {
-              cancelForm();
-              getDataList();
             }
           } else {
             ElMessage.error(res.data.msg);
@@ -391,20 +399,10 @@ function delMore() {
   });
 }
 
-const formItems = reactive<VxeFormPropTypes.Items>([
-  {
-    field: 'name',
-    span: 24,
-    title: '翻译键值',
-    itemRender: {
-      name: '$input',
-      props: {class: 'i18n-form-item', id: `i18nFormItem${1}`},
-    },
-  },
-]);
+const langFields = reactive<{field: string; label: string; id: string}[]>([]);
 
-const formRules = reactive<VxeFormPropTypes.Rules>({
-  name: [{required: true, type: 'string', message: '请输入翻译键值'}],
+const formRules = reactive({
+  name: [{required: true, message: '请输入翻译键值', trigger: 'blur'}],
 });
 
 let needInit = true;
@@ -419,14 +417,10 @@ watch(
           title: item.label,
           minWidth: '200',
         });
-        formItems.push({
+        langFields.push({
           field: item.value,
-          span: 24,
-          title: item.label,
-          itemRender: {
-            name: '$input',
-            props: {class: 'i18n-form-item', id: `i18nFormItem${index + 2}`},
-          },
+          label: item.label,
+          id: `i18nFormItem${index + 2}`,
         });
       });
     }
@@ -437,51 +431,41 @@ watch(
   }
 );
 
+function keydownHandler(e: KeyboardEvent) {
+  if (!formShow.value) return;
+  const {key, ctrlKey, altKey} = e;
+  if (key === 's' && ctrlKey) {
+    e.preventDefault();
+    e.stopPropagation();
+    saveOne();
+  }
+  if (key === 'ArrowRight' && (ctrlKey || altKey)) {
+    e.preventDefault();
+    e.stopPropagation();
+    nextOne();
+  }
+  if (key === 'ArrowLeft' && (ctrlKey || altKey)) {
+    e.preventDefault();
+    e.stopPropagation();
+    prevOne();
+  }
+}
+
 onMounted(() => {
   getDataList();
-  window.addEventListener('keydown', (e) => {
-    let {key, ctrlKey, altKey} = e;
-    if (key === 's' && ctrlKey) {
-      e.preventDefault();
-      e.stopPropagation();
-      saveOne();
-    }
-    if (key === 'ArrowRight' && (ctrlKey || altKey)) {
-      e.preventDefault();
-      e.stopPropagation();
-      nextOne();
-    }
-    if (key === 'ArrowLeft' && (ctrlKey || altKey)) {
-      e.preventDefault();
-      e.stopPropagation();
-      prevOne();
-    }
-    if (key === 'Tab') {
-      e.preventDefault();
-      e.stopPropagation();
-      if (
-        document.activeElement ||
-        // @ts-ignore
-        inputs.includes(document.activeElement)
-      ) {
-        // @ts-ignore
-        let index = inputs.indexOf(document.activeElement);
+  window.addEventListener('keydown', keydownHandler);
+});
 
-        if (index === inputs.length) {
-          index = 0;
-        } else {
-          index++;
-        }
-        inputs[index].focus();
-      } else {
-        setTimeout(() => {
-          if (!document.activeElement || !inputs.includes(document.activeElement as HTMLInputElement)) {
-            (document.querySelector('#i18nFormItem1 input') as HTMLInputElement)?.focus();
-          }
-        }, 100);
-      }
-    }
-  });
+onUnmounted(() => {
+  window.removeEventListener('keydown', keydownHandler);
+});
+
+onActivated(() => {
+  window.addEventListener('keydown', keydownHandler);
+});
+
+onDeactivated(() => {
+  window.removeEventListener('keydown', keydownHandler);
 });
 </script>
 <style lang="scss">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yh-i18n",
-  "version": "2.3.7",
+  "version": "2.3.8",
   "description": "对于国际化的封装",
   "main": "index.js",
   "scripts": {