From 71eb623cef978e3f1bca597269547ef689857256 Mon Sep 17 00:00:00 2001
From: lyt-Top <1105290566@qq.com>
Date: Fri, 6 Aug 2021 12:17:56 +0800
Subject: [PATCH] =?UTF-8?q?'admin-21.08.06:=E4=BC=98=E5=8C=96=EF=BC=8C?=
 =?UTF-8?q?=E5=85=B7=E4=BD=93=E6=9F=A5=E7=9C=8B=E6=A0=B9=E7=9B=AE=E5=BD=95?=
 =?UTF-8?q?CHANGELOG.md=E6=96=87=E4=BB=B6'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |  8 ++
 package.json                                  | 12 +--
 src/i18n/lang/en.ts                           |  1 +
 src/i18n/lang/zh-cn.ts                        |  1 +
 src/i18n/lang/zh-tw.ts                        |  1 +
 src/layout/navBars/tagsView/contextmenu.vue   | 23 ++++--
 src/layout/navBars/tagsView/tagsView.vue      |  2 +-
 src/router/route.ts                           | 15 ++++
 src/views/fun/tagsView/index.vue              | 10 +--
 .../formRules/component/formRulesOne.vue      | 67 +++++++++++++++++
 .../formRules/component/formRulesThree.vue    | 49 +++++++++++++
 .../formRules/component/formRulesTwo.vue      | 51 +++++++++++++
 src/views/pages/formRules/index.vue           | 73 +++++++++++++++++++
 13 files changed, 293 insertions(+), 20 deletions(-)
 create mode 100644 src/views/pages/formRules/component/formRulesOne.vue
 create mode 100644 src/views/pages/formRules/component/formRulesThree.vue
 create mode 100644 src/views/pages/formRules/component/formRulesTwo.vue
 create mode 100644 src/views/pages/formRules/index.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fef12c4..de9bf34 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 🎉🎉🔥 `vue-next-admin` 基于 vue3.x 、Typescript、vite、Element plus 等，适配手机、平板、pc 的后台开源免费模板库（vue2.x 请切换 vue-prev-admin 分支）
 
+## 1.0.15
+
+`2021.08.06`
+
+- 🌟 更新 依赖更新最新版本
+- 🎯 优化 tagsView 右键菜单点击时的字段名（id 已修改成 contextMenuClickId）与路由中返回的 id 名冲突问题，感谢群友@伯牙已遇钟子期
+- 🎉 新增 多个 form 表单验证界面演示
+
 ## 1.0.14
 
 `2021.07.29`
diff --git a/package.json b/package.json
index d6dfd97..392cd83 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
 		"echarts": "^5.1.2",
 		"echarts-gl": "^2.0.7",
 		"echarts-wordcloud": "^2.0.0",
-		"element-plus": "^1.0.2-beta.65",
+		"element-plus": "^1.0.2-beta.70",
 		"mitt": "^3.0.0",
 		"nprogress": "^0.2.0",
 		"print-js": "^1.6.0",
@@ -33,18 +33,18 @@
 	"devDependencies": {
 		"@types/axios": "^0.14.0",
 		"@types/clipboard": "^2.0.1",
-		"@types/node": "^16.4.9",
+		"@types/node": "^16.4.13",
 		"@types/nprogress": "^0.2.0",
 		"@types/sortablejs": "^1.10.7",
-		"@typescript-eslint/eslint-plugin": "^4.28.5",
-		"@typescript-eslint/parser": "^4.28.5",
+		"@typescript-eslint/eslint-plugin": "^4.29.0",
+		"@typescript-eslint/parser": "^4.29.0",
 		"@vitejs/plugin-vue": "^1.3.0",
 		"@vue/compiler-sfc": "^3.1.5",
 		"dotenv": "^10.0.0",
 		"eslint": "^7.32.0",
-		"eslint-plugin-vue": "^7.15.0",
+		"eslint-plugin-vue": "^7.15.1",
 		"prettier": "^2.3.2",
-		"sass": "^1.37.0",
+		"sass": "^1.37.5",
 		"sass-loader": "^12.1.0",
 		"typescript": "^4.3.5",
 		"vite": "^2.4.4",
diff --git a/src/i18n/lang/en.ts b/src/i18n/lang/en.ts
index bbaf72b..ae499d6 100644
--- a/src/i18n/lang/en.ts
+++ b/src/i18n/lang/en.ts
@@ -44,6 +44,7 @@ export default {
 		pagesCityLinkage: 'CityLinkage',
 		pagesFormAdapt: 'FormAdapt',
 		pagesFormI18n: 'FormI18n',
+		pagesFormRules: 'Multi form validation',
 		pagesListAdapt: 'ListAdapt',
 		pagesWaterfall: 'Waterfall',
 		pagesSteps: 'Steps',
diff --git a/src/i18n/lang/zh-cn.ts b/src/i18n/lang/zh-cn.ts
index 07be5bb..7be607b 100644
--- a/src/i18n/lang/zh-cn.ts
+++ b/src/i18n/lang/zh-cn.ts
@@ -44,6 +44,7 @@ export default {
 		pagesCityLinkage: '城市多级联动',
 		pagesFormAdapt: '表单自适应',
 		pagesFormI18n: '表单国际化',
+		pagesFormRules: '多表单验证',
 		pagesListAdapt: '列表自适应',
 		pagesWaterfall: '瀑布屏',
 		pagesSteps: '步骤条',
diff --git a/src/i18n/lang/zh-tw.ts b/src/i18n/lang/zh-tw.ts
index 4d8abeb..f47ba4d 100644
--- a/src/i18n/lang/zh-tw.ts
+++ b/src/i18n/lang/zh-tw.ts
@@ -44,6 +44,7 @@ export default {
 		pagesCityLinkage: '都市多級聯動',
 		pagesFormAdapt: '表單自我調整',
 		pagesFormI18n: '表單國際化',
+		pagesFormRules: '多表單驗證',
 		pagesListAdapt: '清單自我調整',
 		pagesWaterfall: '瀑布屏',
 		pagesSteps: '步驟條',
diff --git a/src/layout/navBars/tagsView/contextmenu.vue b/src/layout/navBars/tagsView/contextmenu.vue
index ef1fec9..715de25 100644
--- a/src/layout/navBars/tagsView/contextmenu.vue
+++ b/src/layout/navBars/tagsView/contextmenu.vue
@@ -11,7 +11,14 @@
 		>
 			<ul class="el-dropdown-menu">
 				<template v-for="(v, k) in dropdownList">
-					<li class="el-dropdown-menu__item" aria-disabled="false" tabindex="-1" :key="k" v-if="!v.affix" @click="onCurrentContextmenuClick(v.id)">
+					<li
+						class="el-dropdown-menu__item"
+						aria-disabled="false"
+						tabindex="-1"
+						:key="k"
+						v-if="!v.affix"
+						@click="onCurrentContextmenuClick(v.contextMenuClickId)"
+					>
 						<i :class="v.icon"></i>
 						<span>{{ $t(v.txt) }}</span>
 					</li>
@@ -35,12 +42,12 @@ export default defineComponent({
 		const state = reactive({
 			isShow: false,
 			dropdownList: [
-				{ id: 0, txt: 'message.tagsView.refresh', affix: false, icon: 'el-icon-refresh-right' },
-				{ id: 1, txt: 'message.tagsView.close', affix: false, icon: 'el-icon-close' },
-				{ id: 2, txt: 'message.tagsView.closeOther', affix: false, icon: 'el-icon-circle-close' },
-				{ id: 3, txt: 'message.tagsView.closeAll', affix: false, icon: 'el-icon-folder-delete' },
+				{ contextMenuClickId: 0, txt: 'message.tagsView.refresh', affix: false, icon: 'el-icon-refresh-right' },
+				{ contextMenuClickId: 1, txt: 'message.tagsView.close', affix: false, icon: 'el-icon-close' },
+				{ contextMenuClickId: 2, txt: 'message.tagsView.closeOther', affix: false, icon: 'el-icon-circle-close' },
+				{ contextMenuClickId: 3, txt: 'message.tagsView.closeAll', affix: false, icon: 'el-icon-folder-delete' },
 				{
-					id: 4,
+					contextMenuClickId: 4,
 					txt: 'message.tagsView.fullscreen',
 					affix: false,
 					icon: 'iconfont icon-fullscreen',
@@ -53,8 +60,8 @@ export default defineComponent({
 			return props.dropdown;
 		});
 		// 当前项菜单点击
-		const onCurrentContextmenuClick = (id: number) => {
-			emit('currentContextmenuClick', Object.assign({}, { id }, state.item));
+		const onCurrentContextmenuClick = (contextMenuClickId: number) => {
+			emit('currentContextmenuClick', Object.assign({}, { contextMenuClickId }, state.item));
 		};
 		// 打开右键菜单：判断是否固定，固定则不显示关闭按钮
 		const openContextmenu = (item: any) => {
diff --git a/src/layout/navBars/tagsView/tagsView.vue b/src/layout/navBars/tagsView/tagsView.vue
index 3140f0e..0f1fe38 100644
--- a/src/layout/navBars/tagsView/tagsView.vue
+++ b/src/layout/navBars/tagsView/tagsView.vue
@@ -279,7 +279,7 @@ export default {
 			const cParams = item.meta.isDynamic ? item.params : item.query;
 			if (!getCurrentRouteItem(item.path, cParams)) return ElMessage({ type: 'warning', message: '请正确输入路径及完整参数（query、params）' });
 			const { path, name, params, query, meta, url } = getCurrentRouteItem(item.path, cParams);
-			switch (item.id) {
+			switch (item.contextMenuClickId) {
 				case 0:
 					// 刷新当前
 					if (meta.isDynamic) await router.push({ name, params });
diff --git a/src/router/route.ts b/src/router/route.ts
index a95fda3..7732dfb 100644
--- a/src/router/route.ts
+++ b/src/router/route.ts
@@ -695,6 +695,21 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 							icon: 'iconfont icon-diqiu',
 						},
 					},
+					{
+						path: '/pages/formRules',
+						name: 'pagesFormRules',
+						component: () => import('/@/views/pages/formRules/index.vue'),
+						meta: {
+							title: 'message.router.pagesFormRules',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							auth: ['admin', 'test'],
+							icon: 'iconfont icon-shuxing',
+						},
+					},
 					{
 						path: '/pages/listAdapt',
 						name: 'pagesListAdapt',
diff --git a/src/views/fun/tagsView/index.vue b/src/views/fun/tagsView/index.vue
index 38c3ebe..0fb84e0 100644
--- a/src/views/fun/tagsView/index.vue
+++ b/src/views/fun/tagsView/index.vue
@@ -51,23 +51,23 @@ export default {
 		// 0 刷新当前，1 关闭当前，2 关闭其它，3 关闭全部 4 当前页全屏
 		// 1、刷新当前 tagsView
 		const refreshCurrentTagsView = () => {
-			proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { id: 0, ...route }));
+			proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 0, ...route }));
 		};
 		// 2、关闭当前 tagsView
 		const closeCurrentTagsView = () => {
-			proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { id: 1, ...route }));
+			proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
 		};
 		// 3、关闭其它 tagsView
 		const closeOtherTagsView = () => {
-			proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { id: 2, ...route }));
+			proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 2, ...route }));
 		};
 		// 4、关闭全部 tagsView
 		const closeAllTagsView = () => {
-			proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { id: 3, ...route }));
+			proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 3, ...route }));
 		};
 		// 5、开启当前页面全屏
 		const openCurrenFullscreen = () => {
-			proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { id: 4, ...route }));
+			proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 4, ...route }));
 		};
 		return {
 			refreshCurrentTagsView,
diff --git a/src/views/pages/formRules/component/formRulesOne.vue b/src/views/pages/formRules/component/formRulesOne.vue
new file mode 100644
index 0000000..f17d1d5
--- /dev/null
+++ b/src/views/pages/formRules/component/formRulesOne.vue
@@ -0,0 +1,67 @@
+<template>
+	<div class="form-rules-one-container">
+		<el-form :model="form" :rules="rules" ref="formRulesOneRef" size="small" label-width="100px" class="mt35">
+			<el-row :gutter="35">
+				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+					<el-form-item label="姓名" prop="name">
+						<el-input v-model="form.name" placeholder="请输入姓名" clearable></el-input>
+					</el-form-item>
+				</el-col>
+				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+					<el-form-item label="邮箱" prop="email">
+						<el-input v-model="form.email" placeholder="请输入用户邮箱" clearable></el-input>
+					</el-form-item>
+				</el-col>
+				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+					<el-form-item label="登陆账户名" prop="autograph">
+						<el-input v-model="form.autograph" placeholder="请输入登陆账户名" clearable></el-input>
+					</el-form-item>
+				</el-col>
+				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+					<el-form-item label="职务" prop="occupation">
+						<el-select v-model="form.occupation" placeholder="请选择职务" clearable class="w100">
+							<el-option label="计算机 / 互联网 / 通信" value="1"></el-option>
+							<el-option label="生产 / 工艺 / 制造" value="2"></el-option>
+							<el-option label="医疗 / 护理 / 制药" value="3"></el-option>
+						</el-select>
+					</el-form-item>
+				</el-col>
+			</el-row>
+		</el-form>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, onMounted } from 'vue';
+export default {
+	name: 'pagesFormRulesOne',
+	props: {
+		data: {
+			type: Object,
+			default: () => {},
+		},
+	},
+	setup(props) {
+		const state = reactive({
+			form: {},
+			rules: {
+				name: { required: true, message: '请输入姓名', trigger: 'blur' },
+				email: { required: true, message: '请输入用户邮箱', trigger: 'blur' },
+				autograph: { required: true, message: '请输入登陆账户名', trigger: 'blur' },
+				occupation: { required: true, message: '请选择职务', trigger: 'change' },
+			},
+		});
+		// 赋值回显
+		const initForm = () => {
+			state.form = props.data;
+		};
+		// 页面加载时
+		onMounted(() => {
+			initForm();
+		});
+		return {
+			...toRefs(state),
+		};
+	},
+};
+</script>
diff --git a/src/views/pages/formRules/component/formRulesThree.vue b/src/views/pages/formRules/component/formRulesThree.vue
new file mode 100644
index 0000000..0487c50
--- /dev/null
+++ b/src/views/pages/formRules/component/formRulesThree.vue
@@ -0,0 +1,49 @@
+<template>
+	<div class="form-rules-three-container">
+		<el-form :model="form" :rules="rules" ref="formRulesThreeRef" size="small" label-width="100px" class="mt35">
+			<el-row :gutter="35">
+				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+					<el-form-item label="创建用户" prop="createUser">
+						<el-input v-model="form.createUser" placeholder="请输入创建用户" clearable></el-input>
+					</el-form-item>
+				</el-col>
+				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+					<el-form-item label="修改用户" prop="editUser">
+						<el-input v-model="form.editUser" placeholder="请输入修改用户" clearable></el-input>
+					</el-form-item>
+				</el-col>
+				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+					<el-form-item label="所属用户" prop="user">
+						<el-input v-model="form.user" placeholder="请输入所属用户" clearable></el-input>
+					</el-form-item>
+				</el-col>
+				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+					<el-form-item label="所属部门" prop="department">
+						<el-input v-model="form.department" placeholder="请输入所属部门" clearable></el-input>
+					</el-form-item>
+				</el-col>
+			</el-row>
+		</el-form>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive } from 'vue';
+export default {
+	name: 'pagesFormRulesThree',
+	setup() {
+		const state = reactive({
+			form: {},
+			rules: {
+				createUser: { required: true, message: '请输入创建用户', trigger: 'blur' },
+				editUser: { required: true, message: '请输入修改用户', trigger: 'blur' },
+				user: { required: true, message: '请输入所属用户', trigger: 'blur' },
+				department: { required: true, message: '请输入所属部门', trigger: 'blur' },
+			},
+		});
+		return {
+			...toRefs(state),
+		};
+	},
+};
+</script>
diff --git a/src/views/pages/formRules/component/formRulesTwo.vue b/src/views/pages/formRules/component/formRulesTwo.vue
new file mode 100644
index 0000000..984af34
--- /dev/null
+++ b/src/views/pages/formRules/component/formRulesTwo.vue
@@ -0,0 +1,51 @@
+<template>
+	<div class="form-rules-two-container">
+		<el-form :model="form" :rules="rules" ref="formRulesTwoRef" size="small" label-width="100px" class="mt35">
+			<el-row :gutter="35">
+				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+					<el-form-item label="手机" prop="phone">
+						<el-input v-model="form.phone" placeholder="请输入手机" clearable></el-input>
+					</el-form-item>
+				</el-col>
+				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+					<el-form-item label="性别">
+						<el-select v-model="form.sex" placeholder="请选择性别" clearable class="w100">
+							<el-option label="男" value="1"></el-option>
+							<el-option label="女" value="2"></el-option>
+						</el-select>
+					</el-form-item>
+				</el-col>
+				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+					<el-form-item label="登录密码" prop="password">
+						<el-input v-model="form.password" placeholder="请输入登录密码" clearable></el-input>
+					</el-form-item>
+				</el-col>
+				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+					<el-form-item label="权限角色" prop="auth">
+						<el-input v-model="form.auth" placeholder="请输入权限角色" clearable></el-input>
+					</el-form-item>
+				</el-col>
+			</el-row>
+		</el-form>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive } from 'vue';
+export default {
+	name: 'pagesFormRulesTwo',
+	setup() {
+		const state = reactive({
+			form: {},
+			rules: {
+				phone: { required: true, message: '请输入手机', trigger: 'blur' },
+				password: { required: true, message: '请输入登录密码', trigger: 'blur' },
+				auth: { required: true, message: '请输入权限角色', trigger: 'blur' },
+			},
+		});
+		return {
+			...toRefs(state),
+		};
+	},
+};
+</script>
diff --git a/src/views/pages/formRules/index.vue b/src/views/pages/formRules/index.vue
new file mode 100644
index 0000000..9465efc
--- /dev/null
+++ b/src/views/pages/formRules/index.vue
@@ -0,0 +1,73 @@
+<template>
+	<div class="form-rules-container">
+		<el-card shadow="hover" header="表单组件1"> <FormRulesOne :data="formRulesOneData" ref="pagesFormRulesOneRef" /></el-card>
+		<el-card shadow="hover" header="表单组件2" class="mt15"><FormRulesTwo ref="pagesFormRulesTwoRef" /> </el-card>
+		<el-card shadow="hover" header="表单组件3" class="mt15"> <FormRulesThree ref="pagesFormRulesThreeRef" /></el-card>
+		<el-row class="flex mt15">
+			<div class="flex-margin">
+				<el-button size="small" icon="el-icon-refresh-right" @click="onResetForm">重置表单</el-button>
+				<el-button size="small" type="primary" icon="iconfont icon-shuxing" @click="onSubmitForm">验证表单</el-button>
+			</div>
+		</el-row>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, defineComponent, getCurrentInstance } from 'vue';
+import { ElMessage } from 'element-plus';
+import FormRulesOne from '/@/views/pages/formRules/component/formRulesOne.vue';
+import FormRulesTwo from '/@/views/pages/formRules/component/formRulesTwo.vue';
+import FormRulesThree from '/@/views/pages/formRules/component/formRulesThree.vue';
+export default defineComponent({
+	name: 'pagesFormRules',
+	components: {
+		FormRulesOne,
+		FormRulesTwo,
+		FormRulesThree,
+	},
+	setup() {
+		const { proxy } = getCurrentInstance() as any;
+		const state = reactive({
+			formRulesOneData: {
+				name: 'lyt',
+				email: 'lyt123@.com',
+				autograph: 'lyt123456',
+				occupation: '1',
+			},
+		});
+		// 表单组件验证
+		const formRulesValidate = (pageRef, sonRef) => {
+			return new Promise((resolve) => {
+				proxy.$refs[pageRef].$refs[sonRef].validate((valid) => {
+					if (valid) resolve(valid);
+				});
+			});
+		};
+		// 表单组件重置
+		const formRulesResetFields = () => {
+			proxy.$refs.pagesFormRulesOneRef.$refs.formRulesOneRef.resetFields();
+			proxy.$refs.pagesFormRulesTwoRef.$refs.formRulesTwoRef.resetFields();
+			proxy.$refs.pagesFormRulesThreeRef.$refs.formRulesThreeRef.resetFields();
+		};
+		// 验证表单
+		const onSubmitForm = () => {
+			Promise.all([
+				formRulesValidate('pagesFormRulesOneRef', 'formRulesOneRef'),
+				formRulesValidate('pagesFormRulesTwoRef', 'formRulesTwoRef'),
+				formRulesValidate('pagesFormRulesThreeRef', 'formRulesThreeRef'),
+			]).then(() => {
+				ElMessage.success('表单全部验证成功');
+			});
+		};
+		// 重置表单
+		const onResetForm = () => {
+			formRulesResetFields();
+		};
+		return {
+			onSubmitForm,
+			onResetForm,
+			...toRefs(state),
+		};
+	},
+});
+</script>