style: 调度任务多语言

2023-11-10 19:12:43 +08:00
parent d72ba4622e
commit 7ffcc2f881
10 changed files with 467 additions and 175 deletions
--- a/src/components/CronModal/components/Day.vue
+++ b/src/components/CronModal/components/Day.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { reactive, watch, onBeforeMount } from 'vue';
+import useI18n from '@/hooks/useI18n';
+const { t } = useI18n();
+
 const emit = defineEmits(['update:value']);
 const props = defineProps({
  value: {
@@ -85,9 +88,11 @@ onBeforeMount(() => {
 <template>
  <a-radio-group size="small" v-model:value="data.type">
    <a-space direction="vertical" :size="18">
-      <a-radio value="1">每一天</a-radio>
+      <a-radio value="1">
+        {{ t('components.CronModal.day1') }}
+      </a-radio>
      <a-radio value="2">
-        每隔
+        {{ t('components.CronModal.day21') }}
        <a-input-number
          size="small"
          v-model:value="data.increment"
@@ -95,7 +100,7 @@ onBeforeMount(() => {
          :max="31"
          placeholder="1-31"
        ></a-input-number>
-        天执行一次，从
+        {{ t('components.CronModal.day22') }}
        <a-input-number
          size="small"
          v-model:value="data.incrementStart"
@@ -103,10 +108,10 @@ onBeforeMount(() => {
          :max="31"
          placeholder="1-31"
        ></a-input-number>
-        日开始
+        {{ t('components.CronModal.day23') }}
      </a-radio>
      <a-radio value="3">
-        周期从
+        {{ t('components.CronModal.day31') }}
        <a-input-number
          size="small"
          v-model:value="data.rangeStart"
@@ -114,7 +119,7 @@ onBeforeMount(() => {
          :max="31"
          placeholder="1-31"
        ></a-input-number>
-        到
+        {{ t('components.CronModal.day32') }}
        <a-input-number
          size="small"
          v-model:value="data.rangeEnd"
@@ -122,18 +127,22 @@ onBeforeMount(() => {
          :max="31"
          placeholder="1-31"
        ></a-input-number>
-        日
+        {{ t('components.CronModal.day33') }}
+      </a-radio>
+      <a-radio value="4">
+        {{ t('components.CronModal.day4') }}
      </a-radio>
-      <a-radio value="4">指定日(可多选)</a-radio>
      <a-select
        v-model:value="data.specific"
        size="small"
        mode="multiple"
        style="width: 100%"
-        placeholder="指定日(可多选)"
+        :placeholder="t('components.CronModal.day4')"
        :options="optionsSpecific"
      ></a-select>
-      <a-radio value="5">本月最后一天</a-radio>
+      <a-radio value="5">
+        {{ t('components.CronModal.day5') }}
+      </a-radio>
    </a-space>
  </a-radio-group>
 </template>
--- a/src/components/CronModal/components/Hour.vue
+++ b/src/components/CronModal/components/Hour.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { reactive, watch, onBeforeMount } from 'vue';
+import useI18n from '@/hooks/useI18n';
+const { t } = useI18n();
+
 const emit = defineEmits(['update:value']);
 const props = defineProps({
  value: {
@@ -82,9 +85,11 @@ onBeforeMount(() => {
 <template>
  <a-radio-group size="small" v-model:value="data.type">
    <a-space direction="vertical" :size="18">
-      <a-radio value="1">每一小时</a-radio>
+      <a-radio value="1">
+        {{ t('components.CronModal.hour1') }}
+      </a-radio>
      <a-radio value="2">
-        每隔
+        {{ t('components.CronModal.hour21') }}
        <a-input-number
          size="small"
          v-model:value="data.increment"
@@ -92,7 +97,7 @@ onBeforeMount(() => {
          :max="23"
          placeholder="0-23"
        ></a-input-number>
-        小时执行一次，从
+        {{ t('components.CronModal.hour22') }}
        <a-input-number
          size="small"
          v-model:value="data.incrementStart"
@@ -100,10 +105,10 @@ onBeforeMount(() => {
          :max="23"
          placeholder="0-23"
        ></a-input-number>
-        时开始
+        {{ t('components.CronModal.hour23') }}
      </a-radio>
      <a-radio value="3">
-        周期从
+        {{ t('components.CronModal.hour31') }}
        <a-input-number
          size="small"
          v-model:value="data.rangeStart"
@@ -111,7 +116,7 @@ onBeforeMount(() => {
          :max="23"
          placeholder="1-23"
        ></a-input-number>
-        到
+        {{ t('components.CronModal.hour32') }}
        <a-input-number
          size="small"
          v-model:value="data.rangeEnd"
@@ -119,15 +124,17 @@ onBeforeMount(() => {
          :max="23"
          placeholder="0-23"
        ></a-input-number>
-        小时
+        {{ t('components.CronModal.hour33') }}
+      </a-radio>
+      <a-radio value="4">
+        {{ t('components.CronModal.hour4') }}
      </a-radio>
-      <a-radio value="4">指定小时(可多选)</a-radio>
      <a-select
        v-model:value="data.specific"
        size="small"
        mode="multiple"
        style="width: 100%"
-        placeholder="指定小时(可多选)"
+        :placeholder="t('components.CronModal.hour4')"
        :options="optionsSpecific"
      ></a-select>
    </a-space>
--- a/src/components/CronModal/components/Minute.vue
+++ b/src/components/CronModal/components/Minute.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { reactive, watch, onBeforeMount } from 'vue';
+import useI18n from '@/hooks/useI18n';
+const { t } = useI18n();
+
 const emit = defineEmits(['update:value']);
 const props = defineProps({
  value: {
@@ -84,9 +87,11 @@ onBeforeMount(() => {
 <template>
  <a-radio-group size="small" v-model:value="data.type">
    <a-space direction="vertical" :size="18">
-      <a-radio value="1">每一分钟</a-radio>
+      <a-radio value="1">
+        {{ t('components.CronModal.minute1') }}
+      </a-radio>
      <a-radio value="2">
-        每隔
+        {{ t('components.CronModal.minute21') }}
        <a-input-number
          size="small"
          v-model:value="data.increment"
@@ -94,7 +99,7 @@ onBeforeMount(() => {
          :max="59"
          placeholder="0-59"
        ></a-input-number>
-        分钟执行一次，从
+        {{ t('components.CronModal.minute22') }}
        <a-input-number
          size="small"
          v-model:value="data.incrementStart"
@@ -102,10 +107,10 @@ onBeforeMount(() => {
          :max="59"
          placeholder="0-59"
        ></a-input-number>
-        分钟开始
+        {{ t('components.CronModal.minute23') }}
      </a-radio>
      <a-radio value="3">
-        周期从
+        {{ t('components.CronModal.minute31') }}
        <a-input-number
          size="small"
          v-model:value="data.rangeStart"
@@ -113,7 +118,7 @@ onBeforeMount(() => {
          :max="59"
          placeholder="0-59"
        ></a-input-number>
-        到
+        {{ t('components.CronModal.minute32') }}
        <a-input-number
          size="small"
          v-model:value="data.rangeEnd"
@@ -121,15 +126,17 @@ onBeforeMount(() => {
          :max="59"
          placeholder="0-59"
        ></a-input-number>
-        分钟
+        {{ t('components.CronModal.minute33') }}
+      </a-radio>
+      <a-radio value="4">
+        {{ t('components.CronModal.minute4') }}
      </a-radio>
-      <a-radio value="4">指定分钟(可多选)</a-radio>
      <a-select
        v-model:value="data.specific"
        size="small"
        mode="multiple"
        style="width: 100%"
-        placeholder="指定分钟(可多选)"
+        :placeholder="t('components.CronModal.minute4')"
        :options="optionsSpecific"
      ></a-select>
    </a-space>
--- a/src/components/CronModal/components/Month.vue
+++ b/src/components/CronModal/components/Month.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { reactive, watch, onBeforeMount } from 'vue';
+import useI18n from '@/hooks/useI18n';
+const { t } = useI18n();
+
 const emit = defineEmits(['update:value']);
 const props = defineProps({
  value: {
@@ -86,9 +89,11 @@ onBeforeMount(() => {
 <template>
  <a-radio-group size="small" v-model:value="data.type">
    <a-space direction="vertical" :size="18">
-      <a-radio value="1">每一月</a-radio>
+      <a-radio value="1">
+        {{ t('components.CronModal.month1') }}
+      </a-radio>
      <a-radio value="2">
-        每隔
+        {{ t('components.CronModal.month21') }}
        <a-input-number
          size="small"
          v-model:value="data.increment"
@@ -96,7 +101,7 @@ onBeforeMount(() => {
          :max="12"
          placeholder="1-12"
        ></a-input-number>
-        月执行，从
+        {{ t('components.CronModal.month22') }}
        <a-input-number
          size="small"
          v-model:value="data.incrementStart"
@@ -104,10 +109,10 @@ onBeforeMount(() => {
          :max="12"
          placeholder="1-12"
        ></a-input-number>
-        月开始
+        {{ t('components.CronModal.month23') }}
      </a-radio>
      <a-radio value="3">
-        周期从
+        {{ t('components.CronModal.month31') }}
        <a-input-number
          size="small"
          v-model:value="data.rangeStart"
@@ -115,7 +120,7 @@ onBeforeMount(() => {
          :max="12"
          placeholder="1-12"
        ></a-input-number>
-        到
+        {{ t('components.CronModal.month32') }}
        <a-input-number
          size="small"
          v-model:value="data.rangeEnd"
@@ -123,15 +128,17 @@ onBeforeMount(() => {
          :max="12"
          placeholder="1-12"
        ></a-input-number>
-        月之间的每个月
+        {{ t('components.CronModal.month33') }}
+      </a-radio>
+      <a-radio value="4">
+        {{ t('components.CronModal.month4') }}
      </a-radio>
-      <a-radio value="4">指定月(可多选)</a-radio>
      <a-select
        v-model:value="data.specific"
        size="small"
        mode="multiple"
        style="width: 100%"
-        placeholder="指定月(可多选)"
+        :placeholder="t('components.CronModal.month4')"
        :options="optionsSpecific"
      ></a-select>
    </a-space>
--- a/src/components/CronModal/components/Second.vue
+++ b/src/components/CronModal/components/Second.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { reactive, watch, onBeforeMount } from 'vue';
+import useI18n from '@/hooks/useI18n';
+const { t } = useI18n();
+
 const emit = defineEmits(['update:value']);
 const props = defineProps({
  value: {
@@ -83,9 +86,11 @@ onBeforeMount(() => {
 <template>
  <a-radio-group size="small" v-model:value="data.type">
    <a-space direction="vertical" :size="18">
-      <a-radio value="1">每一秒钟</a-radio>
+      <a-radio value="1">
+        {{ t('components.CronModal.second1') }}
+      </a-radio>
      <a-radio value="2">
-        每隔
+        {{ t('components.CronModal.second21') }}
        <a-input-number
          size="small"
          v-model:value="data.increment"
@@ -93,7 +98,7 @@ onBeforeMount(() => {
          :max="59"
          placeholder="0-59"
        ></a-input-number>
-        秒执行一次，从
+        {{ t('components.CronModal.second22') }}
        <a-input-number
          size="small"
          v-model:value="data.incrementStart"
@@ -101,10 +106,10 @@ onBeforeMount(() => {
          :max="59"
          placeholder="0-59"
        ></a-input-number>
-        秒开始
+        {{ t('components.CronModal.second23') }}
      </a-radio>
      <a-radio value="3">
-        周期从
+        {{ t('components.CronModal.second31') }}
        <a-input-number
          size="small"
          v-model:value="data.rangeStart"
@@ -112,7 +117,7 @@ onBeforeMount(() => {
          :max="59"
          placeholder="0-59"
        ></a-input-number>
-        到
+        {{ t('components.CronModal.second32') }}
        <a-input-number
          size="small"
          v-model:value="data.rangeEnd"
@@ -120,15 +125,17 @@ onBeforeMount(() => {
          :max="59"
          placeholder="0-59"
        ></a-input-number>
-        秒
+        {{ t('components.CronModal.second33') }}
+      </a-radio>
+      <a-radio value="4">
+        {{ t('components.CronModal.second4') }}
      </a-radio>
-      <a-radio value="4">指定秒数(可多选)</a-radio>
      <a-select
        v-model:value="data.specific"
        size="small"
        mode="multiple"
        style="width: 100%"
-        placeholder="指定秒数(可多选)"
+        :placeholder="t('components.CronModal.second4')"
        :options="optionsSpecific"
      ></a-select>
    </a-space>
--- a/src/components/CronModal/index.vue
+++ b/src/components/CronModal/index.vue
@@ -1,6 +1,6 @@
 <template>
  <a-modal
-    title="Cron表达式生成"
+    :title="t('components.CronModal.title')"
    :visible="props.visible"
    :body-style="{ padding: '0 24px' }"
    :destroy-on-close="true"
@@ -8,26 +8,26 @@
    @ok="fnCronModal(true)"
  >
    <a-tabs tab-position="top" type="line">
-      <a-tab-pane key="1" tab="秒">
+      <a-tab-pane key="1" :tab="t('common.units.second')">
        <CronSecond v-model:value="cronValue.second"></CronSecond>
      </a-tab-pane>
-      <a-tab-pane key="2" tab="分钟">
+      <a-tab-pane key="2" :tab="t('common.units.minute')">
        <CronMinute v-model:value="cronValue.minute"></CronMinute>
      </a-tab-pane>
-      <a-tab-pane key="3" tab="小时">
+      <a-tab-pane key="3" :tab="t('common.units.hour')">
        <CronHour v-model:value="cronValue.hour"></CronHour>
      </a-tab-pane>
-      <a-tab-pane key="4" tab="日">
+      <a-tab-pane key="4" :tab="t('common.units.day')">
        <CronDay v-model:value="cronValue.day"></CronDay>
      </a-tab-pane>
-      <a-tab-pane key="5" tab="月">
+      <a-tab-pane key="5" :tab="t('common.units.month')">
        <CronMonth v-model:value="cronValue.month"></CronMonth>
      </a-tab-pane>
    </a-tabs>

    <a-input
      class="reultBox"
-      addon-before="表达式预览："
+      :addon-before="t('components.CronModal.addon')"
      v-model:value="cronStr"
      disabled
    />
@@ -40,6 +40,8 @@ import CronHour from './components/Hour.vue';
 import CronDay from './components/Day.vue';
 import CronMonth from './components/Month.vue';
 import { reactive, computed, watch } from 'vue';
+import useI18n from '@/hooks/useI18n';
+const { t } = useI18n();

 const emit = defineEmits(['cancel', 'ok', 'update:visible']);
 const props = defineProps({