From bd489d67566d886e006b6110edcd18427dc719d0 Mon Sep 17 00:00:00 2001
From: aeizzz <aeizzz@foxmail.com>
Date: Tue, 7 Feb 2023 10:08:08 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20Introducing=20new=20features.=20?=
 =?UTF-8?q?=E9=83=A8=E9=97=A8=E7=AE=A1=E7=90=86=E5=A2=9E=E5=8A=A0i18n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/admin/dept/form.vue      | 105 ++++++++++++++---------------
 src/views/admin/dept/i18n/en.ts    |  13 ++++
 src/views/admin/dept/i18n/zh-cn.ts |  15 +++++
 src/views/admin/dept/index.vue     |  27 ++++----
 4 files changed, 93 insertions(+), 67 deletions(-)
 create mode 100644 src/views/admin/dept/i18n/en.ts
 create mode 100644 src/views/admin/dept/i18n/zh-cn.ts

diff --git a/src/views/admin/dept/form.vue b/src/views/admin/dept/form.vue
index b915041a..f3fd7e21 100644
--- a/src/views/admin/dept/form.vue
+++ b/src/views/admin/dept/form.vue
@@ -1,32 +1,31 @@
 <template>
 	<div class="system-dept-dialog-container">
-		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
-			<el-form ref="deptDialogFormRef" :model="state.form" size="default" label-width="90px">
+		<el-dialog :title="dataForm.deptId ? $t('common.editBtn') : $t('common.addBtn')" v-model="visible" width="769px">
+			<el-form ref="deptDialogFormRef" :model="dataForm" size="default" label-width="90px" :rules="dataRules">
 				<el-row :gutter="35">
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
-						<el-form-item label="上级部门">
-              <el-tree-select v-model="state.form.parentId" :data="state.parentData"
+						<el-form-item :label="$t('sysdept.parentId')" prop="parentId">
+              <el-tree-select v-model="dataForm.parentId" :data="parentData"
                               :props="{ value: 'id', label: 'name', children: 'children' }" class="w100" clearable check-strictly
-                              placeholder="请选择上级部门">
-              </el-tree-select>
+                              :placeholder="$t('sysdept.inputparentIdTip')"/>
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="部门名称">
-							<el-input v-model="state.form.name" placeholder="请输入部门名称" clearable></el-input>
+						<el-form-item :label="$t('sysdept.name')" prop="name">
+							<el-input v-model="dataForm.name" :placeholder="$t('sysdept.inputnameTip')" clearable/>
 						</el-form-item>
 					</el-col>
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-            <el-form-item label="排序">
-              <el-input-number v-model="state.form.sortOrder" placeholder="请输入部门名称" clearable></el-input-number>
+            <el-form-item :label="$t('sysdept.sortOrder')" prop="sortOrder">
+              <el-input-number v-model="dataForm.sortOrder" :placeholder="$t('sysdept.inputsortOrderTip')" clearable/>
             </el-form-item>
           </el-col>
 				</el-row>
 			</el-form>
 			<template #footer>
 				<span class="dialog-footer">
-					<el-button @click="onCancel" size="default">取 消</el-button>
-					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
+					<el-button @click="onCancel" size="default">{{ $t('common.cancelButtonText') }}</el-button>
+					<el-button type="primary" @click="onSubmit" size="default">{{ $t('common.confirmButtonText') }}</el-button>
 				</span>
 			</template>
 		</el-dialog>
@@ -42,51 +41,45 @@ const emit = defineEmits(['refresh']);
 
 // 定义变量内容
 const deptDialogFormRef = ref();
-const state = reactive({
-	form: {
+const dataForm = reactive({
     parentId: '',
     deptId: '',
     name: '',
     sortOrder: 9999
-	},
-  parentData: [] as any[], // 部门数据
-	dialog: {
-		isShowDialog: false,
-		type: '',
-		title: '',
-		submitTxt: '',
-	},
-});
+})
+const parentData = ref<any[]>([])
+const visible = ref(false)
+
+
+const dataRules = ref({
+  parentId: [{ required: true, message: "上级部门不能为空", trigger: "blur" }],
+  name: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
+  sortOrder: [{ required: true, message: "排序不能为空", trigger: "blur" }],
+})
+
+
 
 // 打开弹窗
 const openDialog = (type: string, id: string) => {
 	if (type === 'edit') {
     getObj(id).then(res => {
-      state.form = Object.assign({},res.data)
+      Object.assign(dataForm,res.data)
     }).catch(err => {
       useMessage().error(err.msg)
     })
-		state.dialog.title = '修改部门';
-		state.dialog.submitTxt = '修 改';
 	} else {
-		state.dialog.title = '新增部门';
-		state.dialog.submitTxt = '新 增';
 		// 清空表单，此项需加表单验证才能使用
-
 		nextTick(() => {
-			deptDialogFormRef.value.resetFields();
-      state.form = Object.assign({
-        sortOrder: 9999
-      })
-      state.form.parentId = id
+			deptDialogFormRef?.value?.resetFields();
+      dataForm.parentId = id
 		});
 	}
-	state.dialog.isShowDialog = true;
+	visible.value = true
   getDeptData()
 };
 // 关闭弹窗
 const closeDialog = () => {
-	state.dialog.isShowDialog = false;
+  visible.value = false;
 };
 // 取消
 const onCancel = () => {
@@ -94,32 +87,38 @@ const onCancel = () => {
 };
 // 提交
 const onSubmit = () => {
-  if (state.dialog.type === 'edit') {
-    putObj(state.form).then(() => {
-      closeDialog(); // 关闭弹窗
-      emit('refresh');
-    }).catch(err => {
-      useMessage().error(err.msg)
-    })
-  } else {
-    addObj(state.form).then(() => {
-      closeDialog(); // 关闭弹窗
-      emit('refresh');
-    }).catch(err => {
-      useMessage().error(err.msg)
-    })
-  }
+  deptDialogFormRef.value.validate((valid: boolean) => {
+    if (!valid) {
+      return false
+    }
+    if (dataForm.deptId) {
+      putObj(dataForm).then(() => {
+        closeDialog(); // 关闭弹窗
+        emit('refresh');
+      }).catch(err => {
+        useMessage().error(err.msg)
+      })
+    } else {
+      addObj(dataForm).then(() => {
+        closeDialog(); // 关闭弹窗
+        emit('refresh');
+      }).catch(err => {
+        useMessage().error(err.msg)
+      })
+    }
+  })
+
 };
 
 // 从后端获取菜单信息
 const getDeptData = async () => {
   depttree().then(res => {
-    state.parentData = []
+    parentData.value = []
     const dept = {
       id: '-1', name: '根部门', children: [] as any[]
     };
     dept.children = res.data;
-    state.parentData.push(dept)
+    parentData.value.push(dept)
   })
 
 };
diff --git a/src/views/admin/dept/i18n/en.ts b/src/views/admin/dept/i18n/en.ts
new file mode 100644
index 00000000..ef3fc4d6
--- /dev/null
+++ b/src/views/admin/dept/i18n/en.ts
@@ -0,0 +1,13 @@
+export default {
+    sysdept: {
+        name: 'dept name',
+        parentId: 'parent dept',
+        createTime: 'createTime',
+        weight: 'weight',
+        sortOrder: 'sortOrder',
+        inputdeptNameTip: 'input deptName',
+        inputnameTip: 'input deptName',
+        inputparentIdTip: 'select deptName',
+        inputsortOrderTip: 'input sortOrder',
+    }
+}
diff --git a/src/views/admin/dept/i18n/zh-cn.ts b/src/views/admin/dept/i18n/zh-cn.ts
new file mode 100644
index 00000000..f9ace9e0
--- /dev/null
+++ b/src/views/admin/dept/i18n/zh-cn.ts
@@ -0,0 +1,15 @@
+export default {
+    sysdept: {
+        name: '部门名称',
+        parentId: '上级部门',
+        createTime: '创建时间',
+        weight: '排序',
+        sortOrder: '排序',
+        inputdeptNameTip: '请输入部门名称',
+        inputnameTip: '请输入部门名称',
+        inputparentIdTip: '请选择上级部门',
+        inputsortOrderTip: '请输入排序',
+
+    },
+
+}
diff --git a/src/views/admin/dept/index.vue b/src/views/admin/dept/index.vue
index a42b9d07..b5d39bec 100644
--- a/src/views/admin/dept/index.vue
+++ b/src/views/admin/dept/index.vue
@@ -2,12 +2,12 @@
 	<div class="system-dept-container layout-padding">
 		<el-card shadow="hover" class="layout-padding-auto">
       <div class="mb15">
-        <el-input size="default" placeholder="请输入部门名称" style="max-width: 180px" v-model="state.queryForm.deptName"> </el-input>
-        <el-button size="default" icon="search" type="primary" class="ml10" @click="getDataList">
-          查询
+        <el-input :placeholder="$t('sysdept.inputdeptNameTip')" style="max-width: 180px" v-model="state.queryForm.deptName"> </el-input>
+        <el-button icon="search" type="primary" class="ml10" @click="getDataList">
+          {{ $t('common.queryBtn') }}
         </el-button>
-        <el-button size="default" icon="folder-add" type="success" class="ml10" @click="deptDialogRef.openDialog('add');">
-          新增菜单
+        <el-button  icon="folder-add" type="success" class="ml10" @click="deptDialogRef.openDialog('add');" v-auth="'sys_dept_add'">
+          {{ $t('common.addBtn') }}
         </el-button>
       </div>
 			<el-table
@@ -18,15 +18,14 @@
 				default-expand-all
 				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
 			>
-				<el-table-column prop="name" label="部门名称" show-overflow-tooltip> </el-table-column>
-				<el-table-column prop="weight" label="排序" show-overflow-tooltip width="80">
-				</el-table-column>
-				<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
-				<el-table-column label="操作" show-overflow-tooltip width="200">
+				<el-table-column :label="$t('sysdept.name')" prop="name" width="400" show-overflow-tooltip> </el-table-column>
+				<el-table-column :label="$t('sysdept.weight')" prop="weight"  show-overflow-tooltip width="80"></el-table-column>
+				<el-table-column prop="createTime" :label="$t('sysdept.createTime')" show-overflow-tooltip></el-table-column>
+				<el-table-column :label="$t('common.action')" show-overflow-tooltip width="200">
 					<template #default="scope">
-						<el-button   text type="primary" @click="onOpenAddDept('add',scope.row)">新增</el-button>
-						<el-button   text type="primary" @click="onOpenEditDept('edit', scope.row)">修改</el-button>
-						<el-button   text type="primary" @click="onTabelRowDel(scope.row)">删除</el-button>
+						<el-button   text type="primary" @click="onOpenAddDept('add',scope.row)" v-auth="'sys_dept_add'"> {{ $t('common.addBtn') }}</el-button>
+						<el-button   text type="primary" @click="onOpenEditDept('edit', scope.row)" v-auth="'sys_dept_edit'">{{$t('common.editBtn') }}</el-button>
+						<el-button   text type="primary" @click="onTabelRowDel(scope.row)" v-auth="'sys_dept_del'"> {{ $t('common.delBtn') }}</el-button>
 					</template>
 				</el-table-column>
 			</el-table>
@@ -49,7 +48,7 @@ const { t } = useI18n()
 const deptDialogRef = ref();
 
 const state: BasicTableProps = reactive<BasicTableProps>({
-  pageList: depttree, // H
+  pageList: depttree,
   queryForm: {
     deptName: ''
   },