feat: 添加部门管理

src/views/system/i18n/components/form.vue

@@ -0,0 +1,93 @@
+<template>
+  <el-form ref="ruleFormRef" :model="newFormInline" label-width="82px">
+    <el-row :gutter="30">
+      <re-col :value="24" :xm="24" :sm="24">
+        <el-form-item label="国际化key" prop="key">
+          <el-input
+            v-model="newFormInline.key"
+            placeholder="请输入国际化关键词~"
+            clearable
+            class="w-full"
+          />
+        </el-form-item>
+      </re-col>
+      <re-col :value="24" :xm="24" :sm="24">
+        <el-form-item label="语言类型" prop="locale_id">
+          <el-select
+            v-model="newFormInline.locale_id"
+            placeholder="请选择语言类型~"
+            clearable
+            class="w-full"
+          >
+            <el-option
+              v-for="item in localeList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+      </re-col>
+      <re-col :value="24" :xm="24" :sm="24">
+        <el-form-item label="国际化值" prop="translation">
+          <el-input
+            v-model="newFormInline.translation"
+            placeholder="请输入国际化值~"
+            clearable
+            class="w-full"
+          />
+        </el-form-item>
+      </re-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import ReCol from "@/components/ReCol";
+import { LanguageInfo } from "types/system";
+import { getLocaleListAPI } from "@/api/i18n";
+import { message } from "@/utils/message";
+const ruleFormRef = ref();
+interface PropsInfo {
+  title: string;
+  key: string;
+  locale_id: string;
+  translation: string;
+}
+
+type ProsData = {
+  formInline: PropsInfo;
+};
+const props = withDefaults(defineProps<ProsData>(), {
+  formInline: () => ({
+    title: "新增",
+    key: "",
+    locale_id: "",
+    translation: ""
+  })
+});
+const newFormInline = ref<PropsInfo>(props.formInline);
+defineExpose({ newFormInline });
+/**语言类型 */
+const localeList = ref<LanguageInfo[]>([]);
+
+/**
+ * 获取语言类型
+ */
+const getLocaleList = async () => {
+  const res = await getLocaleListAPI({
+    page: 1,
+    pageSize: 9999
+  });
+  if (res.success) {
+    localeList.value = res.data.result;
+  }
+  message(res.msg, {
+    type: res.success ? "success" : "error"
+  });
+};
+onMounted(async () => {
+  await getLocaleList();
+});
+</script>