feat: 国际化完善

src/components/Acron/ACron.vue

 <template>
     <div class="components-input-demo-presuffix">
         <a-input :placeholder="placeholder" :value="cron" @input="handleinput" :disabled="disabled">
-            <a-icon slot="prefix" type="schedule" title="corn控件" @click="openModal" />
-            <a-icon v-if="cron" slot="suffix" type="close-circle" @click="handleEmpty" title="清空" />
+            <a-icon slot="prefix" type="schedule" :title="$t('corn.title')" @click="openModal" />
+            <a-icon
+                v-if="cron"
+                slot="suffix"
+                type="close-circle"
+                @click="handleEmpty"
+                :title="$t('input.clear')"
+            />
         </a-input>
-        <AntCron ref="innerVueCron" :data="afterCron" @ok="handleOK"></AntCron>
+        <AntCron ref="innerVueCron" :data="afterCron" @ok="handleOK" />
     </div>
 </template>
 <script>
@@ -73,6 +79,7 @@ export default {
     },
 };
 </script>
+
 <style scoped>
 .components-input-demo-presuffix .anticon-close-circle {
     cursor: pointer;

src/local/acron.js

+export default {
+    'corn.title': ['Cron 控件', 'Cron Component'],
+};

src/local/index.js

@@ -4,6 +4,7 @@ import userLang from './user';
 import systemLang from './system';
 import InputLang from './input';
 import OtherLang from './other';
+import acronLang from './acron';
 
 const zh_CN = {};
 const en_US = {};
@@ -11,6 +12,9 @@ const en_US = {};
 function formatLang(langObject) {
     for (const key in langObject) {
         const element = langObject[key];
+        if (zh_CN[key]) {
+            console.warn('当前key值: ', key, '已经被注册了');
+        }
         zh_CN[key] = element[0];
         en_US[key] = element[1];
     }
@@ -22,5 +26,6 @@ formatLang(userLang);
 formatLang(systemLang);
 formatLang(InputLang);
 formatLang(OtherLang);
+formatLang(acronLang);
 
 export { en_US, zh_CN };

src/local/input.js

@@ -7,4 +7,5 @@ export default {
     ],
     'input.search': ['搜索', 'search'],
     'input.error': ['输入的内容有误!', 'Incorrect Input!'],
+    'input.clear': ['清空', 'Clear'],
 };

src/local/system.js

@@ -26,4 +26,10 @@ export default {
     'role.roleNameInput': ['请输入 @:role.roleName', 'Please Input @:role.roleName'],
     'role.roleCodeInput': ['请输入 @:role.roleCode', 'Please Input @:role.roleCode'],
     'role.menuPermissions': ['菜单权限', 'Menu Permissions'],
+    'task.schedulingRules': ['调度规则', 'Scheduling Rules'],
+    'task.implementClass': ['实现类', 'Implement Class'],
+    'task.invalid': ['失效', 'Invalid'],
+    'task.invalidTip': ['确认是否失效', 'Confirm Whether To Disable It'],
+    'task.taskNameError': ['请输入 @:system.jobName', 'Please Input @:system.jobName'],
+    'task.taskRuleError': ['请输入 @:task.schedulingRules', 'Please Input @:task.schedulingRules'],
 };

src/local/table.js

@@ -4,7 +4,6 @@ export default {
     'table.reset': ['重置', 'Reset'],
     'table.add': ['新增', 'Add'],
     'table.search': ['查询', 'Search'],
-    'input.placeholder': ['请输入', 'Please Input'],
     'table.jobTime': ['任务时间', 'Job Time'],
     'table.inspectionStartTime': ['巡检开始时间', 'InspectionStartTime'],
     'table.inspectionEndTime': ['巡检结束时间', 'InspectionEndTime'],

src/pages/system/task/form.vue

 <template>
-    <a-form-model layout="vertical" :model="form" :rules="rules" ref="DrawerForm">
-        <a-form-model-item label="任务名称" prop="taskName">
-            <a-input v-model="form.taskName" :disabled="isView" />
-        </a-form-model-item>
-        <a-form-model-item label="调度规则" prop="taskRule">
-            <ACron v-model="form.taskRule" :disabled="isView" />
-        </a-form-model-item>
-        <a-form-model-item label="实现类" prop="implementClass">
-            <a-input v-model="form.implementClass" :disabled="isView" />
-        </a-form-model-item>
-        <a-form-model-item label="说明" prop="remark">
-            <a-textarea v-model="form.remark" :disabled="isView" :rows="4" />
-        </a-form-model-item>
-    </a-form-model>
+    <Wraper :hidden="hidden" :refresh="refresh" :onOk="submit" :noFooter="isView">
+        <a-form-model layout="vertical" :model="form" :rules="rules" ref="form">
+            <a-form-model-item :label="$t('system.jobName')" prop="taskName">
+                <a-input v-model="form.taskName" :disabled="isView" :placeholder="$t('input.placeholder')" />
+            </a-form-model-item>
+            <a-form-model-item :label="$t('task.schedulingRules')" prop="taskRule">
+                <ACron v-model="form.taskRule" :disabled="isView" :placeholder="$t('input.placeholder')" />
+            </a-form-model-item>
+            <a-form-model-item :label="$t('task.implementClass')" prop="implementClass">
+                <a-input
+                    v-model="form.implementClass"
+                    :disabled="isView"
+                    :placeholder="$t('input.placeholder')"
+                />
+            </a-form-model-item>
+            <a-form-model-item :label="$t('table.remark')" prop="remark">
+                <a-textarea
+                    v-model="form.remark"
+                    :disabled="isView"
+                    :rows="4"
+                    :placeholder="$t('input.placeholder')"
+                />
+            </a-form-model-item>
+        </a-form-model>
+    </Wraper>
 </template>
 
 <script>
 import { addTaskApi, updateTaskApi } from '@/api';
-import FormMixin from '@/components/FormMixin';
 import ACron from '@/components/Acron/ACron.vue';
+import { WraperMixins } from '@/components/table';
 
 export default {
     components: { ACron },
     props: ['row'],
-    mixins: [FormMixin],
+    mixins: [WraperMixins],
     data() {
         return {
+            form: {},
             rules: {
-                taskName: [{ required: true }],
-                taskRule: [{ required: true }],
+                taskName: [{ required: true, message: this.$t('task.taskNameError') }],
+                taskRule: [{ required: true, message: this.$t('task.taskRuleError') }],
             },
         };
     },
+    computed: {
+        isView() {
+            return this.type === 'view';
+        },
+        isEdit() {
+            return this.type === 'edit';
+        },
+    },
+    mounted() {
+        if (this.type) {
+            this.form = { ...this.row };
+        }
+    },
     methods: {
-        add() {
+        async submit() {
+            await this.$refs.form.validate();
+            if (this.type) return updateTaskApi({ ...this.form });
             return addTaskApi({ ...this.form });
         },
-        edit() {
-            return updateTaskApi({ ...this.form });
-        },
     },
 };
 </script>

src/pages/system/task/index.vue

 <template>
-    <my-table url="/api/v1/schedules" rowKey="taskId" :addBtn="addBtn" ref="table">
-        <template #drawer>
-            <Form ref="form" :row="currentClickRow" />
+    <Table url="/api/v1/schedules" rowKey="taskId" addBtn ref="table" :buttons="buttons">
+        <template #drawer="drawer">
+            <Form ref="form" v-bind="drawer" />
         </template>
-        <a-table-column title="任务名称" data-index="taskName" />
-        <a-table-column title="调度规则" data-index="taskRule" />
-        <a-table-column title="实现类" data-index="implementClass" />
-        <a-table-column title="说明" data-index="remark" />
-        <a-table-column title="操作">
-            <template #default="row">
-                <ActionButton :buttons="buttons" :row="row" />
-            </template>
-        </a-table-column>
-    </my-table>
+        <a-table-column :title="$t('system.jobName')" data-index="taskName" />
+        <a-table-column :title="$t('task.schedulingRules')" data-index="taskRule" />
+        <a-table-column :title="$t('task.implementClass')" data-index="implementClass" />
+        <a-table-column :title="$t('table.remark')" data-index="remark" />
+    </Table>
 </template>
 
 <script>
-import ActionButton from '@/components/action_button/index.vue';
 import Form from './form.vue';
+import { Table } from '@/components/table';
 
 export default {
-    components: { ActionButton, Form },
+    components: { Form, Table },
     data() {
         return {
-            addBtn: {
-                onOk: () => {
-                    return this.$refs.form.submit();
-                },
-            },
-            currentClickRow: null,
             buttons: [
                 {
-                    label: '查看',
-                    click: row => {
-                        this.showDrawer(2, true);
-                        this.$nextTick(() => {
-                            this.$refs['form'].setData(row, 2);
-                        });
+                    label: this.$t('table.view'),
+                    click: (row) => {
+                        this.$refs.table.show({ type: 'view', row, title: this.$t('table.view') });
                     },
                 },
                 {
-                    label: '编辑',
-                    click: row => {
-                        this.showDrawer(1);
-                        this.$nextTick(() => {
-                            this.$refs['form'].setData(row, 1);
-                        });
+                    label: this.$t('table.edit'),
+                    click: (row) => {
+                        this.$refs.table.show({ type: 'edit', row, title: this.$t('table.edit') });
                     },
                 },
                 {
                     type: 'confirm',
-                    label: '失效',
-                    title: '确认是否失效?',
-                    url: row => ({ url: `/api/v1/schedules/${row.taskId}/pause`, method: 'del' }),
+                    label: this.$t('task.invalid'),
+                    title: this.$t('task.invalidTip'),
+                    url: (row) => ({ url: `/api/v1/schedules/${row.taskId}/pause`, method: 'del' }),
                     after: () => this.refreshTable(),
-                    isHidden: row => row.isPaused === 1,
+                    isHidden: (row) => row.isPaused === 1,
                 },
                 {
                     type: 'confirm',
-                    url: row => `/api/v1/schedules/${row.taskId}`,
-                    after: () => this.refreshTable(),
+                    url: (row) => `/api/v1/schedules/${row.taskId}`,
+                    after: this.refreshTable,
                 },
             ],
         };
@@ -68,9 +51,6 @@ export default {
         refreshTable() {
             this.$refs.table.getData();
         },
-        showDrawer(type, noFooter) {
-            this.$refs['table'].show({ type, noFooter });
-        },
     },
 };
 </script>