feat ✅ 增加工具栏函数

2022-11-19 23:19:03 +08:00 · 2022-11-19 23:19:03 +08:00 · fab8d0df4e
parent 97275bf98d
commit fab8d0df4e
11 changed files with 408 additions and 1222 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
--- a/README.md
+++ b/README.md
@ -30,9 +30,6 @@ vue-element-perfect 是一个后台前端解决方案,它使用了最新的前

 ## 分支管理
 - master 技术采用 vite + vue3.0 + Typescript + pinia
-  ```
-  注意：使用 Vite 构建工具，需要 Node.js 版本 >= 12.0.0  查看 Node.js 版本 node-v
-  ```
 - vite-vuex vite + vue3.0 + Typescript + vuex
 - vue-i18n 语言切换版本
 - webpack 技术采用 webpack + vue3.0 + Typescript + vuex
@ -47,6 +44,8 @@ vue-element-perfect 是一个后台前端解决方案,它使用了最新的前
 npm install
 cnpm install
 yarn 
+ # npm install 安装失败，请升级 nodejs 到 16 以上，或尝试使用以下命令：
+  npm install --registry=https://registry.npm.taobao.org
 ```
 ## 运行打包
 ```
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -2,7 +2,6 @@
  "name": "vue-admin-perfect",
  "private": true,
  "version": "0.0.0",
-  "type": "module",
  "scripts": {
    "dev": "vite",
    "build:dev": "vite build --mode development",
--- a/prettier.config.cjs
+++ b/prettier.config.cjs
--- a/src/router/modules/functionPage.ts
+++ b/src/router/modules/functionPage.ts
@ -6,13 +6,19 @@ import Layout from "@/layout/index.vue";
 const functionPageRouter = [{
    path: '/function-page',
    component: Layout,
-    redirect: '/function-page/401',
+    redirect: '/function-page/404',
    name: 'function-page',
    meta: {
        title: '功能页面',
        icon: 'ElementPlus'
    },
    children: [
+        {
+            path: 'tools',
+            component: () => import('@/views/functionPage/tools/index.vue'),
+            name: 'tools',
+            meta: { title: '工具链集合', keepAlive: true , icon: 'MenuIcon'}
+        },
        {
            path: '404',
            component: () => import('@/views/error/404.vue'),
--- a/src/utils/validate.ts
+++ b/src/utils/validate.ts
@ -84,3 +84,99 @@ export function isArray(arg) {
  }
  return Array.isArray(arg)
 }
+
+
+/**
+ * 手机号码
+ * @param val 当前值字符串
+ * @returns 返回 true: 手机号码正确
+ */
+export function verifyPhone(val: string) {
+  // false: 手机号码不正确
+  if (!/^((12[0-9])|(13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0|1,5-9]))\d{8}$/.test(val)) return false;
+  // true: 手机号码正确
+  else return true;
+}
+
+
+/**
+ * 匹配文字变色（搜索时）
+ * @param val 当前值字符串
+ * @param text 要处理的字符串值
+ * @param color 搜索到时字体高亮颜色
+ * @returns 返回处理后的字符串
+ */
+export function verifyTextColor(val: string, text = '', color = 'red') {
+  // 返回内容，添加颜色
+  let v = text.replace(new RegExp(val, 'gi'), `<span style='color: ${color}'>${val}</span>`);
+  // 返回结果
+  return v;
+}
+
+/**
+ * 身份证号, 支持1/2代(15位/18位数字)
+ * @param val 当前值字符串
+ * @returns 返回 true: 身份证正确
+ */
+export function verifyIdCard(val:string) {
+  let regx = /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/
+  return regx.test(val)
+}
+
+/**
+ * 网址
+ * @param val 当前值字符串
+ * @returns 返回 true: 网址正确
+ */
+export function verifyWebsite(val:string) {
+  let regx = /^((https?|ftp):\/\/)?([\da-z.-]+)\.([a-z.]{2,6})(\/\w\.-]*)*\/?/
+  return regx.test(val)
+}
+
+
+/**
+ * 是否html标签
+ * @param val 当前值字符串
+ * @returns 返回 true: 是否html标签
+ */
+export function verifyHtml(val:string) {
+  let regx = /<(.*)>.*<\/\1>|<(.*) \/>/
+  return regx.test(val)
+}
+
+/**
+ * 日期
+ * @param val 当前值字符串
+ * @returns 返回 true: 是否日期
+ */
+export function verifyDate(val:string) {
+  let regx = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;
+  return regx.test(val)
+}
+
+/**
+ * 邮箱
+ * @param val 当前值字符串
+ * @returns 返回 true: 邮箱是否正确
+ */
+export function verifyEmail(val:string) {
+  let regx = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
+  return regx.test(val)
+}
+
+/**
+ * 验证校验器函数封装
+ * @param verifyPhone 验证函数
+ * @param message 提示
+ */
+export function validatorMethod(verifyPhone:(string)=>boolean,message:string) {
+  return (rule, value, callback) => {
+    if (!verifyPhone(value)) {
+      callback(new Error(message))
+    } else {
+      callback()
+    }
+  }
+}
+
+
--- a/src/views/error/401.vue
+++ b/src/views/error/401.vue
@ -1,62 +0,0 @@
-<template>
-  <u-container-layout class="m-error-page">
-    <div class="error-page">
-      <div class="img">
-        <img :src="fourPng" style="width: 100%" />
-      </div>
-      <div>
-        <div class="oops">抱歉!</div>
-        <div class="text" style="margin-bottom: 20px">你没有权限去该页面...</div>
-        <el-button type="primary" @click="goBackHome">返回首页</el-button></div
-      >
-    </div>
-  </u-container-layout>
-</template>
-
-<script lang="ts" setup>
-  import fourPng from '@/assets/image/error/401.gif'
-  import { useRouter } from 'vue-router'
-  const router = useRouter()
-
-  const goBackHome = () => {
-    router.push({
-      path: '/',
-    })
-  }
-</script>
-
-<style lang="scss" scoped>
-  .m-error-page {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .error-page {
-    padding-top: 20px;
-    display: flex;
-    align-items: center;
-    .img {
-      width: 300px;
-    }
-    .oops {
-      font-size: 32px;
-      line-height: 40px;
-      color: #1482f0;
-      margin-bottom: 20px;
-      -webkit-animation-fill-mode: forwards;
-      animation-fill-mode: forwards;
-    }
-    .text {
-      font-size: 20px;
-      line-height: 24px;
-      color: #222;
-      margin-bottom: 10px;
-      -webkit-animation-delay: 0.1s;
-      animation-delay: 0.1s;
-      -webkit-animation-fill-mode: forwards;
-      animation-fill-mode: forwards;
-    }
-  }
-</style>
--- a/src/views/functionPage/tools/index.vue
+++ b/src/views/functionPage/tools/index.vue
@ -0,0 +1,121 @@
+<template>
+  <div class="app-container">
+    <div class="app-container-inner">
+      <el-form
+          ref="ruleFormRef"
+          :model="ruleForm"
+          :rules="rules"
+          label-width="120px"
+          status-icon
+          label-position="top"
+      >
+        <el-form-item label="手机号码" prop="phone">
+          <el-input v-model="ruleForm.phone" placeholder="请输入手机号码"/>
+        </el-form-item>
+
+        <el-form-item label="匹配文字变色（搜索时）" prop="keyword" class="item-form">
+          <div>示例：<span v-html="keyword"></span></div>
+          <el-input v-model="ruleForm.keyword" placeholder="请输入关键字" @input="onVerifyKeywordColor"/>
+        </el-form-item>
+
+        <el-form-item label="身份证" prop="idCard" class="item-form">
+          <div>验证身份证是否正确</div>
+          <el-input v-model="ruleForm.idCard" placeholder="请输入身份证"/>
+        </el-form-item>
+
+        <el-form-item label="网址" prop="website" class="item-form">
+          <div>验证url是否正确。</div>
+          <el-input v-model="ruleForm.website" placeholder="请输入url"/>
+        </el-form-item>
+
+        <el-form-item label="html标签" prop="html" class="item-form">
+          <div>是否是html标签</div>
+          <el-input v-model="ruleForm.html" placeholder="请输入html标签"/>
+        </el-form-item>
+
+        <el-form-item label="日期" prop="date" class="item-form">
+          <div>是否是正确的日期</div>
+          <el-input v-model="ruleForm.date" placeholder="请输入日期"/>
+        </el-form-item>
+
+        <el-form-item label="邮箱" prop="email" class="item-form">
+          <div>是否是正确的邮箱</div>
+          <el-input v-model="ruleForm.email" placeholder="请输入邮箱"/>
+        </el-form-item>
+
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+import { reactive, ref } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import {
+  validatorMethod,
+  verifyPhone,
+  verifyTextColor,
+  verifyIdCard,
+  verifyWebsite,
+  verifyHtml,
+  verifyDate,
+  verifyEmail
+} from '@/utils/validate'
+const ruleFormRef = ref<FormInstance>()
+let text = '只要自己不放弃，没有任何人可以打倒你'
+let keyword = ref<string>(text)
+const ruleForm = reactive({
+  phone: '',
+  keyword:'',
+  percent:'',
+  idCard:null,
+  website:null,
+  html:null,
+  date:null,
+  email:null,
+})
+
+
+
+const rules = reactive<FormRules>({
+  phone: [
+    { required: true, validator:validatorMethod(verifyPhone,'请输入正确的手机号'), trigger: ['blur','change'] },
+  ],
+  idCard:[
+    { required: true, validator:validatorMethod(verifyIdCard,'请输入正确的身份证'), trigger: ['blur','change']}
+  ],
+  website:[
+    { required: true, validator:validatorMethod(verifyWebsite,'请输入正确的网址'), trigger: ['blur','change']}
+  ],
+  html:[
+    { required: true, validator:validatorMethod(verifyHtml,'请输入正确的html标签'), trigger: ['blur','change']}
+  ],
+  date:[
+    { required: true, validator:validatorMethod(verifyDate,'请输入正确的日期'), trigger: ['blur','change']}
+  ],
+  email:[
+    { required: true, validator:validatorMethod(verifyEmail,'请输入正确的邮箱'), trigger: ['blur','change']}
+  ]
+})
+
+const onVerifyKeywordColor = (value)=>{
+  if(!value)keyword.value= text
+  else keyword.value = verifyTextColor(value,text)
+}
+
+
+</script>
+
+
+<style lang="scss" scoped>
+.app-container{
+  color: #606266;
+}
+::v-deep(.item-form){
+  .el-form-item__label{
+    margin-bottom: 0!important;
+  }
+}
+</style>
+
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@ -12,7 +12,6 @@
          :model="ruleForm"
          :rules="rules"
          label-width="0"
-          class="demo-ruleForm"
        >
          <el-form-item label="" prop="username">
            <el-input
--- a/yarn.lock
+++ b/yarn.lock
@ -135,7 +135,7 @@

 "@popperjs/core@npm:@sxzz/popperjs-es@^2.11.7":
  "integrity" "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
-  "resolved" "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz"
+  "resolved" "https://r.cnpmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz"
  "version" "2.11.7"

 "@rollup/pluginutils@^4.1.2", "@rollup/pluginutils@^4.2.1":