添加了对流程表单列表的国际化支持

src/i18n/pages/flow/flowForm/en.ts

@@ -8,11 +8,16 @@ export default {
 	remark: 'Remark',
 	creator: 'Creator',
 	operation: 'Operation',
+  centerTitle: 'Form Center',
+  centerIntro: 'Use to initiate custom form approval flows. Click a type on the left to manage form data.',
+  centerLeftTitle: 'Flow Forms',
+  centerRightTitle: 'Form Data{ name }',
 
 	// 占位符
 	enterFormName: 'Please enter form name',
 	selectStatus: 'Please select status',
 	selectCreateTime: 'Select create time',
+  enterRemark: 'Please enter remark',
 
 	// 按钮文本
 	search: 'Search',
@@ -26,6 +31,16 @@ export default {
 	export: 'Export',
 	detail: 'Detail',
 	deployForm: 'Deploy Form',
+  save: 'Save',
+  refresh: 'Refresh',
+  actionStartApprove: 'Start Form Approval',
+  dialogTitleAdd: 'Add Flow Form',
+  dialogTitleEdit: 'Edit Flow Form',
+  detailTitle: 'Flow Form Detail',
+  detailTitleWithName: 'Flow Form Detail - { name }',
+  tabFormDetail: 'Form Detail',
+  tabApproveLog: 'Approval Log',
+  tabFlowChart: 'Flow Chart',
 
 	// 状态文本
 	deployed: 'Deployed',
@@ -41,11 +56,15 @@ export default {
 	tip: 'Tip',
 	confirm: 'Confirm',
 	cancel: 'Cancel',
+  nameRequired: 'Form name is required',
+  statusRequired: 'Status is required',
 
 	// 成功消息
 	deploySuccess: 'Deploy successful',
 	deleteSuccess: 'Delete successful',
 	importSuccess: 'Import successful',
+  addSuccess: 'Add successful',
+  editSuccess: 'Edit successful',
 
 	// 错误消息
 	importFailed: 'Import failed: {count} data import failed.',

src/i18n/pages/flow/flowForm/zh-cn.ts

@@ -8,11 +8,16 @@ export default {
 	remark: '备注',
 	creator: '创建人',
 	operation: '操作',
+  centerTitle: '表单中心',
+  centerIntro: '用于发起自定义表单审批流程，点击选择左侧表单类型进行表单数据管理',
+  centerLeftTitle: '流程表单',
+  centerRightTitle: '表单数据{ name }',
 
 	// 占位符
 	enterFormName: '请输入表单名',
 	selectStatus: '请选择状态',
 	selectCreateTime: '选择创建时间',
+  enterRemark: '请输入备注',
 
 	// 按钮文本
 	search: '搜索',
@@ -26,6 +31,16 @@ export default {
 	export: '导出',
 	detail: '详情',
 	deployForm: '部署表单',
+  save: '保存',
+  refresh: '刷新',
+  actionStartApprove: '发起表单审批',
+  dialogTitleAdd: '添加流程表单',
+  dialogTitleEdit: '修改流程表单',
+  detailTitle: '流程表单详情',
+  detailTitleWithName: '流程表单详情-{ name }',
+  tabFormDetail: '表单详情',
+  tabApproveLog: '审批记录',
+  tabFlowChart: '流程图',
 
 	// 状态文本
 	deployed: '已部署',
@@ -41,11 +56,15 @@ export default {
 	tip: '提示',
 	confirm: '确认',
 	cancel: '取消',
+  nameRequired: '表单名不能为空',
+  statusRequired: '状态不能为空',
 
 	// 成功消息
 	deploySuccess: '部署成功',
 	deleteSuccess: '删除成功',
 	importSuccess: '导入成功',
+  addSuccess: '添加成功',
+  editSuccess: '修改成功',
 
 	// 错误消息
 	importFailed: '导入失败: 有 {count} 个数据导入失败。',

src/i18n/pages/flow/flowForm/zh-tw.ts

@@ -8,11 +8,16 @@ export default {
 	remark: '備註',
 	creator: '創建人',
 	operation: '操作',
+  centerTitle: '表單中心',
+  centerIntro: '用於發起自定義表單審批流程，點擊選擇左側表單類型進行表單資料管理',
+  centerLeftTitle: '流程表單',
+  centerRightTitle: '表單資料{ name }',
 
 	// 佔位符
 	enterFormName: '請輸入表單名',
 	selectStatus: '請選擇狀態',
 	selectCreateTime: '選擇創建時間',
+  enterRemark: '請輸入備註',
 
 	// 按鈕文字
 	search: '搜尋',
@@ -26,6 +31,16 @@ export default {
 	export: '匯出',
 	detail: '詳情',
 	deployForm: '部署表單',
+  save: '儲存',
+  refresh: '刷新',
+  actionStartApprove: '發起表單審批',
+  dialogTitleAdd: '新增流程表單',
+  dialogTitleEdit: '修改流程表單',
+  detailTitle: '流程表單詳情',
+  detailTitleWithName: '流程表單詳情-{ name }',
+  tabFormDetail: '表單詳情',
+  tabApproveLog: '審批記錄',
+  tabFlowChart: '流程圖',
 
 	// 狀態文字
 	deployed: '已部署',
@@ -41,11 +56,15 @@ export default {
 	tip: '提示',
 	confirm: '確認',
 	cancel: '取消',
+  nameRequired: '表單名不能為空',
+  statusRequired: '狀態不能為空',
 
 	// 成功訊息
 	deploySuccess: '部署成功',
 	deleteSuccess: '刪除成功',
 	importSuccess: '匯入成功',
+  addSuccess: '新增成功',
+  editSuccess: '修改成功',
 
 	// 錯誤訊息
 	importFailed: '匯入失敗: 有 {count} 個數據匯入失敗。',

src/views/flow/flowForm/center/index.vue

@@ -1,18 +1,18 @@
 <template>
 	<div class="splitpanes-container">
-		<el-card shadow="hover" header="表单中心">
+		<el-card shadow="hover" :header="t('message.flowForm.centerTitle')">
 			<el-alert
-				title="用于发起自定义表单审批流程，点击选择左侧表单类型进行表单数据管理"
+				:title="t('message.flowForm.centerIntro')"
 				type="success"
 				:closable="false"
 				class="mb15"
 			></el-alert>
 			<splitpanes class="default-theme">
 				<pane :size="20">
-          <el-card shadow="hover" header="流程表单">
+          <el-card shadow="hover" :header="t('message.flowForm.centerLeftTitle')">
             <el-table v-loading="loading" :data="tableData.data" @current-change="handleCurrentForm" highlight-current-row>
               <el-table-column prop="id" label="ID" width="100" />
-              <el-table-column prop="name" label="表单名称"  />
+              <el-table-column prop="name" :label="t('message.flowForm.formName')"  />
             </el-table>
             <pagination
                 v-show="tableData.total>0"
@@ -25,14 +25,14 @@
           </el-card>
         </pane>
 				<pane :size="80">
-          <el-card shadow="hover" :header="'表单数据'+(currentForm.name?('-'+currentForm.name):'')">
+          <el-card shadow="hover" :header="t('message.flowForm.centerRightTitle', { name: currentForm.name||'' })">
             <el-row :gutter="10" class="mb8" v-show="showTablePanel">
               <el-col :span="1.5">
                 <el-button
                     type="primary"
                     @click="handleDataAdd"
                     v-auth="'api/v1/flow/flowForm/addFormData'"
-                ><el-icon><ele-Plus /></el-icon>发起表单审批</el-button>
+                ><el-icon><ele-Plus /></el-icon>{{ t('message.flowForm.actionStartApprove') }}</el-button>
               </el-col>
               <el-col :span="1.5">
                 <el-button
@@ -40,7 +40,7 @@
                     :disabled="single"
                     @click="handleDataUpdate(null)"
                     v-auth="'api/v1/flow/flowForm/editFormData'"
-                ><el-icon><ele-Edit /></el-icon>修改</el-button>
+                ><el-icon><ele-Edit /></el-icon>{{ t('message.flowForm.edit') }}</el-button>
               </el-col>
               <el-col :span="1.5">
                 <el-button
@@ -48,50 +48,50 @@
                     :disabled="multiple"
                     @click="handleDataDelete(null)"
                     v-auth="'api/v1/flow/flowForm/delFormData'"
-                ><el-icon><ele-Delete /></el-icon>删除</el-button>
+                ><el-icon><ele-Delete /></el-icon>{{ t('message.flowForm.delete') }}</el-button>
               </el-col>
               <el-col :span="1.5">
-                <el-button  @click="getFormDataList"><el-icon><ele-Refresh /></el-icon>刷新</el-button>
+                <el-button  @click="getFormDataList"><el-icon><ele-Refresh /></el-icon>{{ t('message.flowForm.refresh') }}</el-button>
               </el-col>
             </el-row>
             <el-table v-loading="formLoading" :data="tableFormData" @selection-change="handleSelectionChange">
               <el-table-column type="selection" width="55" align="center" />
-              <el-table-column label="主键" align="center" prop="id"
+              <el-table-column :label="t('message.flowForm.primaryKey')" align="center" prop="id"
                                min-width="150px"
               />
               <el-table-column v-for="(item,index) in fromFields" :key="item.field" :label="item.title" align="center" :prop="item.field"
                                min-width="150px"
               />
-              <el-table-column label="状态" align="center" prop="status" min-width="150px">
+              <el-table-column :label="t('message.flowForm.status')" align="center" prop="status" min-width="150px">
                 <template #default="scope">
                   <el-tag :type="columnColor(scope.row)">{{ statusFormat(scope.row) }}</el-tag>
                 </template>
               </el-table-column>
 
-              <el-table-column label="创建时间" align="center" prop="createdAt"
+              <el-table-column :label="t('message.flowForm.createTime')" align="center" prop="createdAt"
                                min-width="150px"
               >
                 <template #default="scope">
                   <span>{{ proxy.parseTime(scope.row.created_at, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="创建人" align="center" prop="created_user.userNickname"
+              <el-table-column :label="t('message.flowForm.creator')" align="center" prop="created_user.userNickname"
                                min-width="150px"
               />
-              <el-table-column label="操作" align="center" class-name="small-padding" min-width="200px" fixed="right">
+              <el-table-column :label="t('message.flowForm.operation')" align="center" class-name="small-padding" min-width="200px" fixed="right">
                 <template #default="scope">
                   <el-button
                       type="primary"
                       link
                       @click="handleDataView(scope.row)"
                       v-auth="'api/v1/flow/flowForm/getFormData'"
-                  ><el-icon><ele-View /></el-icon>详情</el-button>
+                  ><el-icon><ele-View /></el-icon>{{ t('message.flowForm.detail') }}</el-button>
                   <el-button
                       type="primary"
                       link
                       @click="handleDataUpdate(scope.row)"
                       v-auth="'api/v1/flow/flowForm/editFormData'"
-                  ><el-icon><ele-EditPen /></el-icon>修改</el-button>
+                  ><el-icon><ele-EditPen /></el-icon>{{ t('message.flowForm.edit') }}</el-button>
                   <el-button
                       v-if="scope.row.actionBtn && scope.row.actionBtn.type!='disabled'"
                       type="primary"
@@ -103,7 +103,7 @@
                       link
                       @click="handleDataDelete(scope.row)"
                       v-auth="'api/v1/flow/flowForm/delFormData'"
-                  ><el-icon><ele-DeleteFilled /></el-icon>删除</el-button>
+                  ><el-icon><ele-DeleteFilled /></el-icon>{{ t('message.flowForm.delete') }}</el-button>
                 </template>
               </el-table-column>
             </el-table>
@@ -146,6 +146,9 @@ import AddFormData from "/@/views/flow/flowForm/list/component/addFormData.vue";
 import {FlowDemoTableColumns} from "/@/views/flow/flowDemo/list/component/model";
 import {ElMessage, ElMessageBox} from "element-plus";
 import DataDetail from "/@/views/flow/flowForm/list/component/dataDetail.vue";
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 
 const {proxy} = <any>getCurrentInstance()
 const loading = ref(false)
@@ -272,25 +275,25 @@ const handleStartFlow =(row: FlowDemoTableColumns|null)=>{
   ckFlowRef.value.handleStartFlow(row)
 }
 const handleDataDelete = (row:any)=>{
-  let msg = '你确定要删除所选数据？';
+  let msg = t('message.flowForm.confirmDeleteSelected');
   let id:number[] = [] ;
   if(row){
-    msg = `此操作将永久删除数据，是否继续?`
+    msg = t('message.flowForm.confirmDeleteSingle')
     id = [row.id]
   }else{
     id = state.ids
   }
   if(id.length===0){
-    ElMessage.error('请选择要删除的数据。');
+    ElMessage.error(t('message.flowForm.pleaseSelectDeleteData'));
     return
   }
-  ElMessageBox.confirm(msg, '提示', {
-    confirmButtonText: '确认',
-    cancelButtonText: '取消',
+  ElMessageBox.confirm(msg, t('message.flowForm.tip'), {
+    confirmButtonText: t('message.flowForm.confirm'),
+    cancelButtonText: t('message.flowForm.cancel'),
     type: 'warning',
   }).then(() => {
     delFlowFormData({formId:currentForm.value.id,ids:id}).then(()=>{
-      ElMessage.success('删除成功');
+      ElMessage.success(t('message.flowForm.deleteSuccess'));
       getFormDataList();
     })
   }).catch()

src/views/flow/flowForm/list/component/dataDetail.vue

@@ -3,18 +3,18 @@
   <div class="flow-flowForm-detail">
     <el-drawer v-model="isShowDialog" size="80%" direction="ltr">
       <template #header>
-        <h4>流程表单详情-{{state.formData.name}}</h4>
+        <h4>{{ t('message.flowForm.detailTitleWithName', { name: state.formData.name||'' }) }}</h4>
       </template>
       <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="margin: 8px;">
-        <el-tab-pane label="表单详情" name="0">
+        <el-tab-pane :label="t('message.flowForm.tabFormDetail')" name="0">
           <div class="form-create-show">
             <FormCreate :option="detailData.option" :rule="detailData.rule" :disabled="true" v-model="formData" />
           </div>
         </el-tab-pane>
-        <el-tab-pane label="审批记录" name="1">
+        <el-tab-pane :label="t('message.flowForm.tabApproveLog')" name="1">
           <FlowLog ref="flowLogRef" :form-id="formId" :form-table="formTable" :key="formId"/>
         </el-tab-pane>
-        <el-tab-pane label="流程图" name="2">
+        <el-tab-pane :label="t('message.flowForm.tabFlowChart')" name="2">
           <ShowFlowDesign ref="showFlowCheckRef" />
         </el-tab-pane>
       </el-tabs>

src/views/flow/flowForm/list/component/detail.vue

@@ -3,7 +3,7 @@
   <div class="flow-flowForm-detail">
     <el-drawer v-model="isShowDialog" size="80%" direction="ltr">
       <template #header>
-        <h4>流程表单详情</h4>
+        <h4>{{ t('message.flowForm.detailTitle') }}</h4>
       </template>
       <div class="form-create-show">
         <FormCreate :option="detailData.option" :rule="detailData.rule" />
@@ -17,6 +17,7 @@
   // 引入 form-create-edit
   import FcEditor from "@form-create/component-wangeditor";
   import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance,computed } from 'vue';
+  import { useI18n } from 'vue-i18n'
   import {getFlowForm} from "/@/api/flow/flowForm";
   import {
     FlowFormInfoData,
@@ -39,6 +40,7 @@
     },
     setup(props,{emit}) {
       const {proxy} = <any>getCurrentInstance()
+      const { t } = useI18n()
       const formRef = ref<HTMLElement | null>(null);
       const menuRef = ref();
       const detailData = ref({
@@ -64,10 +66,10 @@
         // 表单校验
         rules: {
           name : [
-              { required: true, message: "表单名不能为空", trigger: "blur" }
+              { required: true, message: t('message.flowForm.nameRequired'), trigger: "blur" }
           ],
           status : [
-              { required: true, message: "状态不能为空", trigger: "blur" }
+              { required: true, message: t('message.flowForm.statusRequired'), trigger: "blur" }
           ],
         }
       });
@@ -110,6 +112,7 @@
         };
         return {
           proxy,
+          t,
           openDialog,
           closeDialog,
           onCancel,

src/views/flow/flowForm/list/component/edit.vue

@@ -3,25 +3,25 @@
     <!-- 添加或修改流程表单对话框 -->
     <el-dialog v-model="isShowDialog" width="800px" :close-on-click-modal="false" :destroy-on-close="true">
       <template #header>
-        <div v-drag="['.flow-flowForm-edit .el-dialog', '.flow-flowForm-edit .el-dialog__header']">{{(!formData.id || formData.id==0?'添加':'修改')+'流程表单'}}</div>
+        <div v-drag="['.flow-flowForm-edit .el-dialog', '.flow-flowForm-edit .el-dialog__header']">{{ (!formData.id || formData.id==0) ? t('message.flowForm.dialogTitleAdd') : t('message.flowForm.dialogTitleEdit') }}</div>
       </template>
       <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
-        <el-form-item label="表单名" prop="name">
-          <el-input v-model="formData.name" placeholder="请输入表单名" />
+        <el-form-item :label="t('message.flowForm.formName')" prop="name">
+          <el-input v-model="formData.name" :placeholder="t('message.flowForm.enterFormName')" />
         </el-form-item>
-        <el-form-item label="状态" prop="status">
+        <el-form-item :label="t('message.flowForm.status')" prop="status">
           <el-radio-group v-model="formData.status">
             <el-radio v-for="(dict,index) in statusOptions" :label="dict.value" :key="index">{{dict.label }}</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
+        <el-form-item :label="t('message.flowForm.remark')" prop="remark">
+          <el-input v-model="formData.remark" type="textarea" :placeholder="t('message.flowForm.enterRemark')" />
         </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="onSubmit" :disabled="loading">确 定</el-button>
-          <el-button @click="onCancel">取 消</el-button>
+          <el-button type="primary" @click="onSubmit" :disabled="loading">{{ t('message.flowForm.confirm') }}</el-button>
+          <el-button @click="onCancel">{{ t('message.flowForm.cancel') }}</el-button>
         </div>
       </template>
     </el-dialog>
@@ -30,6 +30,7 @@
 <script lang="ts">
 import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance } from 'vue';
 import {ElMessageBox, ElMessage, FormInstance,UploadProps} from 'element-plus';
+import { useI18n } from 'vue-i18n'
 import {
   listFlowForm,
   getFlowForm,
@@ -56,6 +57,7 @@ export default defineComponent({
   setup(props,{emit}) {
 		console.log(props.statusOptions)
     const {proxy} = <any>getCurrentInstance()
+    const { t } = useI18n()
     const formRef = ref<HTMLElement | null>(null);
     const menuRef = ref();
     const state = reactive<FlowFormEditState>({
@@ -77,10 +79,10 @@ export default defineComponent({
       // 表单校验
       rules: {
         name : [
-            { required: true, message: "表单名不能为空", trigger: "blur" }
+            { required: true, message: t('message.flowForm.nameRequired'), trigger: "blur" }
         ],
         status : [
-            { required: true, message: "状态不能为空", trigger: "blur" }
+            { required: true, message: t('message.flowForm.statusRequired'), trigger: "blur" }
         ],
       }
     });
@@ -119,7 +121,7 @@ export default defineComponent({
           if(!state.formData.id || state.formData.id===0){
             //添加
           addFlowForm(state.formData).then(()=>{
-              ElMessage.success('添加成功');
+              ElMessage.success(t('message.flowForm.addSuccess'));
               closeDialog(); // 关闭弹窗
               emit('flowFormList')
               emit('close')
@@ -129,7 +131,7 @@ export default defineComponent({
           }else{
             //修改
           updateFlowForm(state.formData).then(()=>{
-              ElMessage.success('修改成功');
+              ElMessage.success(t('message.flowForm.editSuccess'));
               closeDialog(); // 关闭弹窗
               emit('flowFormList')
               emit('close')
@@ -157,6 +159,7 @@ export default defineComponent({
     };
     return {
       proxy,
+      t,
       openDialog,
       closeDialog,
       onCancel,

src/views/flow/flowForm/list/component/formDesign.vue

@@ -6,7 +6,7 @@
 				<template #handle>
 					<el-button round size="small" type="primary" @click="handleSave">
 						<el-icon><ele-Plus /></el-icon>
-						保存
+						{{ t('message.flowForm.save') }}
 					</el-button>
 				</template>
 			</FcDesigner>
@@ -33,7 +33,7 @@ import ZhCn from '/@/components/form-create-designer/locale/zh-cn.js'
 import En from '/@/components/form-create-designer/locale/en.js'
 import ZhTw from '/@/components/form-create-designer/locale/zh-tw.js'
 
-const { locale } = useI18n()
+const { locale, t } = useI18n()
 const designerLocale = computed(()=> {
 	switch (locale.value) {
 		case 'zh-cn':