引用文件统一化、接口调用调整、细节调整、添加注释

src/utils/importUsed.ts

@@ -0,0 +1,25 @@
+/*
+ * @Author: guicheng 1625811865@qq.com
+ * @Date: 2024-06-21 11:11:08
+ * @LastEditors: guicheng 1625811865@qq.com
+ * @LastEditTime: 2024-06-21 11:55:32
+ * @FilePath: /admin-skb/src/utils/importUsed.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+
+import { inject, reactive, ref, onMounted } from "vue";
+import Uploadfile from "@/components/Uploadfile/index.vue";
+import UploadImg from "@/components/UploadImg/index.vue";
+import Editor from "@/components/Editor/index.vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { ElMessage, ElMessageBox } from "element-plus";
+import Upload from "@iconify-icons/ri/upload-2-fill";
+import Close from "@iconify-icons/ri/close-fill";
+import { http } from "@/utils/http";
+import { getGroupUrl } from "@/utils/getUrl/getUrl";
+import verification, { RegularVerification } from "./rules";
+import { type PaginationProps } from "@pureadmin/table";
+import { hasAuth } from "@/router/utils";
+import { PureTableBar } from "@/components/RePureTableBar";
+
+export { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification, PaginationProps, hasAuth, PureTableBar }

src/utils/rules.ts

@@ -0,0 +1,90 @@
+/*
+ * @Author: Gui
+ * @Date: 2023-04-07 16:09:33
+ * @LastEditors: guicheng 1625811865@qq.com
+ * @LastEditTime: 2024-06-21 10:44:32
+ * @Description: kxs files
+ * @filePath:
+ */
+
+export function RegularVerification(zz: any, value: any, callback: any) {
+  const reg = zz;
+  if (!reg.test(value)) {
+    callback(new Error('请输入正确格式'))
+  }
+}
+
+const verification = {
+  //姓名
+  verificationName: (value: any, callback: any) => {
+    const reg = /^(?:[\u4e00-\u9fa5·]{2,16})$/;
+    if (!reg.test(value) && value) {
+      callback(new Error('请输入姓名'))
+    }
+  },
+  //银行卡号
+  verificationBankCard: (value: any, callback: any) => {
+    const reg = /^[1-9]\d{9,29}$/;
+    if (!reg.test(value) && value) {
+      callback(new Error('请输入正确的银行卡号'))
+    }
+  },
+  //手机号码
+  verificationPhonenNmber: (value: any, callback: any) => {
+    const reg = /^((13[0-9])|(14(0|[5-7]|9))|(15([0-3]|[5-9]))|(16(2|[5-7]))|(17[0-8])|(18[0-9])|(19([0-3]|[5-9])))\d{8}$/;
+    if (!reg.test(value) && value) {
+      callback(new Error('请输入正确手机号码'))
+    }
+  },
+  //6位短信验证码
+  verificationPhoneCode: (value: any, callback: any) => {
+    const reg = /^\d+$/;
+    if ((!reg.test(value) || value.length !== 6) && value) {
+      callback(new Error('请输入正确短信验证码'))
+    }
+  },
+  //邮箱
+  verificationEmail: (value: any, callback: any) => {
+    const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
+    if (!reg.test(value) && value) {
+      callback(new Error('请输入正确邮箱'))
+    }
+  },
+  //社会统一信用代码
+  verificationCreditCode: (value: any, callback: any) => {
+    const reg = /^(([0-9A-Za-z]{15})|([0-9A-Za-z]{18})|([0-9A-Za-z]{20}))$/;
+    if (!reg.test(value) && value) {
+      callback(new Error('请输入正确社会统一信用代码'))
+    }
+  },
+  //身份证号码
+  verificationIdCardNumber: (value: any, callback: any) => {
+    const reg = /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/;
+    if (!reg.test(value) && value) {
+      callback(new Error('请输入正确身份证号码'))
+    }
+  },
+  //链接地址
+  verificationUrl: (value: any, callback: any) => {
+    const reg = /(http|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
+    if (!reg.test(value) && value) {
+      callback(new Error('请输入正确链接地址'))
+    }
+  },
+  //整数
+  verificationInteger: (value: any, callback: any) => {
+    const reg = /^(?:0|(?:-?[1-9]\d*))$/;
+    if (!reg.test(value) && value) {
+      callback(new Error('请输入整数'))
+    }
+  },
+  //浮点数
+  verificationFloat: (value: any, callback: any) => {
+    const reg = /^(-?[1-9]\d*\.\d+|-?0\.\d*[1-9]\d*|0\.0+)$/;
+    if (!reg.test(value) && value) {
+      callback(new Error('请输入浮点数'))
+    }
+  },
+}
+
+export default verification

src/views/Template/template/components/add/index.vue

@@ -2,7 +2,7 @@
  * @Author: 
  * @Date: 2023-03-01 19:20:44
  * @LastEditors: guicheng 1625811865@qq.com
- * @LastEditTime: 2024-06-20 15:58:15
+ * @LastEditTime: 2024-06-21 13:42:43
  * @Description: kxs files
  * @filePath: 
 -->
@@ -13,24 +13,14 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { inject, ref } from "vue";
-import Uploadfile from "@/components/Uploadfile/index.vue";
-import UploadImg from "@/components/UploadImg/index.vue";
-import Editor from "@/components/Editor/index.vue";
-import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import { ElMessage, ElMessageBox } from "element-plus";
-import Upload from "@iconify-icons/ri/upload-2-fill";
-import Close from "@iconify-icons/ri/close-fill";
-import { http } from "@/utils/http";
+import { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
+// 接口列表实例
+const UserUrl = ref(null)
 // 获取当前板块接口列表
-import { getGroupUrl } from "@/utils/getUrl/getUrl";
-// 获取URLLIST
-async function getUerUrl() {
-  const result = await getGroupUrl(["User"]);
-  return result;
-}
-const UserUrl = getUerUrl();
-
+onMounted(async () => {
+  UserUrl.value = await getGroupUrl(["User"]);
+})
+// 组件传参对象
 const props = defineProps<{
   submit: Function;
   addVisible: {
@@ -52,16 +42,18 @@ const UpdateForm = ref({
   upLoadFile: "",
   upLoadImg: "",
 });
+// 表单实例
+const ruleFormRef = ref()
 // 富文本实例
 const childComp = ref();
 // 传参选项数据
+// 选项卡参数(默认值为列表某项的id)
+const activeId = ref("1");
 const optionList = [
   { Id: "1", label: "推荐" },
   { Id: "2", label: "实物" },
   { Id: "3", label: "虚拟商品" }
 ];
-// 选项卡参数(默认值为列表某项的id)
-const activeId = ref("1");
 // 穿梭框数据
 const transferdata = ref([
   { key: 1, label: "1", disabled: false },
@@ -73,41 +65,46 @@ const transferdata = ref([
 ]);
 // 提交函数
 const submit = async () => {
-  // 富文本实例赋值
-  UpdateForm.value.content = childComp.value.valueHtml;
-  const { status, info }: any = http.Request({
-    url: UserUrl.User.userSearch.method,
-    method: UserUrl.User.userSearch.url,
-    params: UpdateForm.value
-  });
-  if (status === "1") {
-    ElMessage({
-      message: "新增成功",
-      type: "success"
-    });
-    UpdateForm.value.AdminName = "";
-    UpdateForm.value.RealName = "";
-    UpdateForm.value.RoleId = "";
-    UpdateForm.value.PassWord = "";
-    UpdateForm.value.content = "";
-    UpdateForm.value.upLoadFile = "";
-    UpdateForm.value.upLoadImg = "";
-  } else {
-    ElMessageBox.alert(info, "提示", {
-      confirmButtonText: "关闭",
-      type: "warning"
-    });
-  }
-};
-const closeFn: any = inject("closeAddVisible");
-// 关闭弹窗回调函数
-const closeVisible = () => {
-  UpdateForm.value.AdminName = "";
-  UpdateForm.value.RealName = "";
-  UpdateForm.value.RoleId = "";
-  UpdateForm.value.PassWord = "";
-  closeFn();
+  // 表单校验拦截
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      //表单校验成功回调
+      console.log('submit!')
+      // 富文本实例赋值
+      UpdateForm.value.content = childComp.value.valueHtml;
+
+      // 需动态生成接口
+      const { status, info }: any = http.Request({
+        url: UserUrl.User.userSearch.method,
+        method: UserUrl.User.userSearch.url,
+        params: UpdateForm.value
+      });
+      if (status === "1") {
+        //业务成功回调
+        ElMessage({
+          message: "新增成功",
+          type: "success"
+        });
+        // 关闭新增弹窗;
+        closeVisible()
+      } else {
+        //业务失败回调
+        ElMessageBox.alert(info, "提示", {
+          confirmButtonText: "关闭",
+          type: "warning"
+        });
+      }
+    } else {
+      //表单校验失败回调
+      ElMessage({
+        message: "请输入完整信息",
+        type: "error"
+      });
+    }
+  })
 };
+// 选项卡切换回调
 const handleClick = () => {
   console.log("切换选项卡");
 };
@@ -128,6 +125,43 @@ const UploadImgCallBack = (url) => {
   });
   UpdateForm.value.upLoadImg = url;
 }
+// 表单校验规则
+const rules = reactive({
+  RealName: [
+    // 必传
+    { required: true, message: '请输入账户名称', trigger: 'blur' },
+    // 长度
+    { min: 3, max: 5, message: '长度为3-5', trigger: 'blur' },
+    // 时间类型必填
+    {
+      type: 'date',
+      required: true,
+      message: '请选择正确时间类型',
+      trigger: 'blur',
+    },
+    // 封装正则
+    {
+      validator: (rule: any, value: any, callback: any) => {
+        verification.verificationName(value, callback)
+      }, trigger: 'blur'
+    },
+    // 自定义正则
+    {
+      validator: (rule: any, value: any, callback: any) => {
+        // 自定义正则替换
+        const regular = /^((13[0-9])|(14(0|[5-7]|9))|(15([0-3]|[5-9]))|(16(2|[5-7]))|(17[0-8])|(18[0-9])|(19([0-3]|[5-9])))\d{8}$/;
+        RegularVerification(regular, value, callback)
+      }, trigger: 'blur'
+    },
+  ],
+})
+// 关闭弹窗回调函数
+const closeFn: any = inject("closeAddVisible");
+const closeVisible = () => {
+  // 清空表单项;
+  ruleFormRef.value.resetFields();
+  closeFn();
+};
 </script>
 
 <template lang="pug">
@@ -136,7 +170,7 @@ const UploadImgCallBack = (url) => {
     //- 有选项卡模板
     el-tabs(v-model="activeId" class="demo-tabs" @tab-click="handleClick")
       el-tab-pane(label="选项卡一" name="1")
-        el-form(:model='UpdateForm' label-position="right" label-width="100px")
+        el-form(ref="ruleFormRef" :model='UpdateForm' label-position="right" label-width="100px" :rules="rules")
           el-form-item(label='账户名称1' prop="RealName")
             el-input(v-model='UpdateForm.RealName' autocomplete='off' class="!w-[230px]"
               placeholder="请输入账户名称")
@@ -153,7 +187,7 @@ const UploadImgCallBack = (url) => {
               clearable,
               class="!w-[230px]"
             )
-              el-option(:label="item.label", :value="item.Id" v-for="(item,index) in optionList")
+              el-option(:label="item.label", :value="item.Id" v-for="(item, index) in optionList")
       el-tab-pane(label="选项卡二" name="2")
         el-form(:model='UpdateForm' label-position="right" label-width="100px")
           el-form-item(label='账户名称2' prop="RealName")
@@ -172,7 +206,7 @@ const UploadImgCallBack = (url) => {
               clearable,
               class="!w-[230px]"
             )
-              el-option(:label="item.label", :value="item.Id" v-for="(item,index) in optionList")
+              el-option(:label="item.label", :value="item.Id" v-for="(item, index) in optionList")
     //- 无选项卡模板
     el-form(:model='UpdateForm' label-position="right" label-width="100px")
       el-form-item(label='账户名称' prop="RealName")
@@ -191,7 +225,7 @@ const UploadImgCallBack = (url) => {
           clearable,
           class="!w-[230px]"
         )
-          el-option(:label="item.label", :value="item.Id" v-for="(item,index) in optionList")
+          el-option(:label="item.label", :value="item.Id" v-for="(item, index) in optionList")
       el-form-item(label='取色器' prop="PassWord")
         el-color-picker(v-model="UpdateForm.AdminName" show-alpha)
       el-form-item(label='数字输入框' prop="PassWord")
@@ -223,7 +257,7 @@ const UploadImgCallBack = (url) => {
     el-button(
       type="primary",
       :icon="useRenderIcon(Upload)",
-      @click="submit"
+      @click="submit(ruleFormRef)"
     ) 确认提交
 </template>
 

src/views/Template/template/components/edit/index.vue

@@ -2,7 +2,7 @@
  * @Author: 
  * @Date: 2023-03-01 19:20:44
  * @LastEditors: guicheng 1625811865@qq.com
- * @LastEditTime: 2024-06-20 16:08:20
+ * @LastEditTime: 2024-06-21 13:41:18
  * @Description: kxs files
  * @filePath: 
 -->
@@ -13,23 +13,14 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { inject, ref } from "vue";
-import Uploadfile from "@/components/Uploadfile/index.vue";
-import UploadImg from "@/components/UploadImg/index.vue";
-import Editor from "@/components/Editor/index.vue";
-import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import { ElMessage, ElMessageBox } from "element-plus";
-import Upload from "@iconify-icons/ri/upload-2-fill";
-import Close from "@iconify-icons/ri/close-fill";
-import { http } from "@/utils/http";
+import { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
+// 接口列表实例
+const UserUrl = ref(null)
 // 获取当前板块接口列表
-import { getGroupUrl } from "@/utils/getUrl/getUrl";
-// 获取URLLIST
-async function getUerUrl() {
-  const result = await getGroupUrl(["User"]);
-  return result;
-}
-const UserUrl = getUerUrl();
+onMounted(async () => {
+  UserUrl.value = await getGroupUrl(["User"]);
+})
+// 组件传参对象
 const props = defineProps<{
   editVisible: {
     type: Boolean;
@@ -61,54 +52,52 @@ const optionList = [
   { Id: "2", label: "实物" },
   { Id: "3", label: "虚拟商品" }
 ];
+// 表单实例
+const ruleFormRef = ref()
 // 富文本实例
 const childComp = ref();
 // 选项卡参数(默认值为列表某项的id)
 const activeId = ref("1");
 // 提交函数
-const submit = async () => {
-  // 富文本实例赋值
-  UpdateForm.value.content = childComp.value.valueHtml;
-  console.log(UpdateForm.value);
-  const { status, info }: any = http.request(
-    UserUrl.User.userSearch.method,
-    UserUrl.User.userSearch.url,
-    UpdateForm.value
-  );
-  if (status === "1") {
-    ElMessage({
-      message: "修改成功",
-      type: "success"
-    });
-    // 清空表单项;
-    UpdateForm.value.AdminName = "";
-    UpdateForm.value.RealName = "";
-    UpdateForm.value.RoleId = "";
-    UpdateForm.value.PassWord = "";
-    UpdateForm.value.content = "";
-    UpdateForm.value.upLoadFile = "";
-    UpdateForm.value.upLoadImg = "";
-  } else {
-    ElMessageBox.alert(info, "提示", {
-      confirmButtonText: "关闭",
-      type: "warning"
-    });
-  }
-};
-// 关闭弹窗回调函数
-const closeVisible = inject("closeEditVisible");
-const openVisible = async () => {
-  // 将获取到的富文本字段数据重新赋值到富文本实例
-  childComp.value.valueHtml = "<p>12312312</p>";
-  //通过ID获取表格数据
-  const { data, info }: any = http.Request({
-    url: UserUrl.User.userSearch.method,
-    method: UserUrl.User.userSearch.url,
-    params: props.formData.id
-  });
-  UpdateForm.value = data;
-  // 通过表格项获取数据
-  UpdateForm.value = props.formData;
+const submit = async (formEl) => {
+  // 表单校验拦截
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      //表单校验成功回调
+      console.log('submit!')
+      // 富文本实例赋值
+      UpdateForm.value.content = childComp.value.valueHtml;
+      console.log(UpdateForm.value);
+      // 需动态生成接口
+      const { status, info }: any = http.request(
+        UserUrl.User.userSearch.method,
+        UserUrl.User.userSearch.url,
+        UpdateForm.value
+      );
+      if (status === "1") {
+        //业务成功回调
+        ElMessage({
+          message: "修改成功",
+          type: "success"
+        });
+        // 关闭修改弹窗;
+        closeVisible();
+      } else {
+        //业务失败回调
+        ElMessageBox.alert(info, "提示", {
+          confirmButtonText: "关闭",
+          type: "warning"
+        });
+      }
+    } else {
+      //表单校验失败回调
+      ElMessage({
+        message: "请输入完整信息",
+        type: "error"
+      });
+    }
+  })
 };
 
 //上传文件回调
@@ -127,6 +116,56 @@ const UploadImgCallBack = (url) => {
   });
   UpdateForm.value.upLoadImg = url;
 }
+// 表单校验规则
+const rules = reactive({
+  RealName: [
+    // 必传
+    { required: true, message: '请输入账户名称', trigger: 'blur' },
+    // 长度
+    { min: 3, max: 5, message: '长度为3-5', trigger: 'blur' },
+    // 时间类型必填
+    {
+      type: 'date',
+      required: true,
+      message: '请选择正确时间类型',
+      trigger: 'blur',
+    },
+    // 封装正则
+    {
+      validator: (rule: any, value: any, callback: any) => {
+        verification.verificationName(value, callback)
+      }, trigger: 'blur'
+    },
+    // 自定义正则
+    {
+      validator: (rule: any, value: any, callback: any) => {
+        // 自定义正则替换
+        const regular = /^((13[0-9])|(14(0|[5-7]|9))|(15([0-3]|[5-9]))|(16(2|[5-7]))|(17[0-8])|(18[0-9])|(19([0-3]|[5-9])))\d{8}$/;
+        RegularVerification(regular, value, callback)
+      }, trigger: 'blur'
+    },
+  ],
+})
+
+// 关闭弹窗回调函数
+const closeVisible: any = inject("closeEditVisible");
+
+// 调用修改弹窗函数
+const openVisible = async () => {
+  //通过ID获取表格数据（二选一）
+  const { data, info }: any = http.Request({
+    url: UserUrl.User.userSearch.method,
+    method: UserUrl.User.userSearch.url,
+    params: props.formData.id
+  });
+  UpdateForm.value = data;
+
+  // 通过表格项获取数据（二选一）
+  UpdateForm.value = props.formData;
+
+  // 将获取到的富文本字段数据重新赋值到富文本实例
+  childComp.value.valueHtml = "<p>12312312</p>";
+};
 </script>
 
 <template lang="pug">
@@ -135,7 +174,7 @@ const UploadImgCallBack = (url) => {
     //- 有选项卡模板
     el-tabs(v-model="activeId" class="demo-tabs" @tab-click="handleClick")
       el-tab-pane(label="选项卡一" name="1")
-        el-form(:model='UpdateForm' label-position="right" label-width="100px")
+        el-form(ref="ruleFormRef" :model='UpdateForm' label-position="right" label-width="100px" :rules="rules")
           el-form-item(label='账户名称' prop="RealName")
             el-input(v-model='UpdateForm.RealName' autocomplete='off' class="!w-[230px]"
               placeholder="请输入账户名称")
@@ -152,7 +191,7 @@ const UploadImgCallBack = (url) => {
               clearable,
               class="!w-[230px]"
             )
-              el-option(:label="item.label", :value="item.Id" v-for="(item,index) in optionList")
+              el-option(:label="item.label", :value="item.Id" v-for="(item, index) in optionList")
           el-form-item(label='上传图片' prop="UploadImg")
             UploadImg(:cropper="true" :callBack="UploadImgCallBack" :imgList="UpdateForm.upLoadImg.split(',')")
           el-form-item(label='上传文件' prop="Uploadfile")
@@ -178,7 +217,7 @@ const UploadImgCallBack = (url) => {
               clearable,
               class="!w-[230px]"
             )
-              el-option(:label="item.label", :value="item.Id" v-for="(item,index) in optionList")
+              el-option(:label="item.label", :value="item.Id" v-for="(item, index) in optionList")
     //- 无选项卡模板
     el-form(:model='UpdateForm' label-position="right" label-width="100px")
       el-form-item(label='账户名称' prop="RealName")
@@ -194,17 +233,15 @@ const UploadImgCallBack = (url) => {
           clearable,
           class="!w-[230px]"
         )
-          el-option(:label="item.label", :value="item.Id" v-for="(item,index) in optionList")
+          el-option(:label="item.label", :value="item.Id" v-for="(item, index) in optionList")
     el-button(
       :icon="useRenderIcon(Close)",
-      :loading="loading",
-      @click="closeVisible()"
+      @click="closeVisible"
     ) 关闭
     el-button(
       type="primary",
       :icon="useRenderIcon(Upload)",
-      :loading="loading",
-      @click="submit"
+      @click="submit(ruleFormRef)"
     ) 确认提交
 </template>
 

src/views/Template/template/hook.tsx

@@ -1,20 +1,19 @@
-import { getRoleList } from "@/api/system";
-import { type PaginationProps } from "@pureadmin/table";
-import { ElMessage, ElMessageBox } from "element-plus";
-import { reactive, ref, computed, onMounted } from "vue";
-// 获取URLLIST
-import { getGroupUrl } from "@/utils/getUrl/getUrl";
-import { http } from "@/utils/http";
+import { reactive, onMounted, ref, ElMessage, ElMessageBox, http, getGroupUrl, RegularVerification, verification, PaginationProps } from "@/utils/importUsed"
+// 接口列表实例
+const UserUrl = ref(null)
 // 获取当前板块接口列表
-async function getUerUrl() {
-  const result = await getGroupUrl(["User"]);
-  return result;
-}
-const UserUrl = getUerUrl();
+onMounted(async () => {
+  UserUrl.value = await getGroupUrl(["User"]);
+
+})
+// 表单实例
+const ruleFormRef = ref()
 export function useUser() {
-  // 搜索表单参数
+  // 搜索表单参数（需动态生成请求字段）
   const form = reactive({
-    Name: ""
+    searchMain: "", // 搜索内容
+    select: "", // 选择项
+    date: "",
   });
   // 级联选择器参数
   const optionList = ref([
@@ -37,14 +36,18 @@ export function useUser() {
       ]
     }
   ]);
+  // 表格数据列表
   const dataList = ref([]);
+  // 页面加载状态
   const loading = ref(false);
+  // 表格分页选择器
   const pagination = reactive<PaginationProps>({
     total: 0,
     pageSize: 10,
     currentPage: 1,
     background: true
   });
+  // 表格数据（根据字段生成）
   const columns: TableColumnList = [
     {
       type: "selection",
@@ -73,45 +76,52 @@ export function useUser() {
   // 当前页数量切换
   function handleSizeChange(val: number) {
     console.log(`${val} items per page`);
-    onSearch();
+    onSearch(ruleFormRef);
   }
   // 当前页码切换
   function handleCurrentChange(val: number) {
     console.log(`current page: ${val}`);
-    onSearch();
+    onSearch(ruleFormRef);
   }
   // 选择表格项
   function handleSelectionChange(val) {
     console.log("handleSelectionChange", val);
-    onSearch();
+    onSearch(ruleFormRef);
   }
   // 搜索列表
-  async function onSearch(type = "search") {
-    if (type == "search" && !Object.values(form).some(item => !!item)) {
-      return ElMessage({
-        message: "请输入查询条件",
-        type: "error"
-      });
-    }
-    loading.value = true;
-    const { data, other }: any = http.request(
-      UserUrl.User.userSearch.method,
-      UserUrl.User.userSearch.url,
-      {
-        ...form,
-        page_size: pagination.pageSize,
-        page_num: pagination.currentPage
+  async function onSearch(formEl) {
+    // 表单校验拦截
+    if (!formEl) return
+    await formEl.validate((valid, fields) => {
+      if (valid) {
+        //表单校验成功回调
+        console.log('submit!')
+        // 状态调整为加载中
+        loading.value = true;
+        // 调用接口（需动态生成接口）
+        const { data, other }: any = http.request(
+          UserUrl.User.userSearch.method,
+          UserUrl.User.userSearch.url,
+          {
+            ...form,
+            page_size: pagination.pageSize,
+            page_num: pagination.currentPage
+          }
+        );
+        dataList.value = data;
+        pagination.total = other.Count;
+        setTimeout(() => {
+          loading.value = false;
+        }, 500);
+      } else {
+        //表单校验失败回调
+        ElMessage({
+          message: "请输入完整信息",
+          type: "error"
+        });
       }
-    );
-    dataList.value = data;
-    pagination.total = other.Count;
-    setTimeout(() => {
-      loading.value = false;
-    }, 500);
+    })
   }
-  onMounted(() => {
-    // onSearch();
-  });
 
   // 删除
   function handleDelete(row) {
@@ -134,7 +144,7 @@ export function useUser() {
           message: "删除成功",
           type: "success"
         });
-        onSearch();
+        onSearch(ruleFormRef);
       } else {
         ElMessageBox.alert(info, "提示", {
           confirmButtonText: "关闭",
@@ -143,20 +153,55 @@ export function useUser() {
       }
     });
   }
-  // 新增
+  // 新增弹窗开启状态
   const addVisible = ref(false);
   function handleAdd() {
-    console.log(123);
     addVisible.value = true;
   }
-  // 修改
+  // 修改弹窗开启状态
   const editVisible = ref(false);
+  // 修改弹窗数据
   const editFormData = ref({});
   function handleUpdate(row) {
     editVisible.value = true;
     // 表格数据赋值
     editFormData.value = row;
   }
+
+  // 表单校验规则
+  const rules = reactive({
+    searchMain: [
+      // 必传(字段名动态生成)
+      { required: true, message: '请输入搜索内容', trigger: 'blur' },
+    ],
+    select: [
+      // 必传
+      { required: true, message: '请输入选择项', trigger: 'blur' },
+      // 长度
+      { min: 3, max: 5, message: '长度为3-5', trigger: 'blur' },
+      // 时间类型必填
+      {
+        type: 'date',
+        required: true,
+        message: '请选择正确时间类型',
+        trigger: 'blur',
+      },
+      // 封装正则
+      {
+        validator: (rule: any, value: any, callback: any) => {
+          verification.verificationName(value, callback)
+        }, trigger: 'blur'
+      },
+      // 自定义正则
+      {
+        validator: (rule: any, value: any, callback: any) => {
+          // 自定义正则替换
+          const regular = /^((13[0-9])|(14(0|[5-7]|9))|(15([0-3]|[5-9]))|(16(2|[5-7]))|(17[0-8])|(18[0-9])|(19([0-3]|[5-9])))\d{8}$/;
+          RegularVerification(regular, value, callback)
+        }, trigger: 'blur'
+      },
+    ],
+  })
   return {
     form,
     loading,
@@ -173,6 +218,8 @@ export function useUser() {
     addVisible,
     editVisible,
     editFormData,
-    optionList
+    optionList,
+    ruleFormRef,
+    rules
   };
 }

src/views/Template/template/index.vue

@@ -5,20 +5,14 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { provide, ref } from "vue";
+import { provide } from "vue";
 import { useUser } from "./hook";
-import { hasAuth } from "@/router/utils";
-import { PureTableBar } from "@/components/RePureTableBar";
-import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { useRenderIcon, hasAuth, PureTableBar } from "@/utils/importUsed"
 import Add from "./components/add/index.vue";
 import Edit from "./components/edit/index.vue";
 import Search from "@iconify-icons/ep/search";
-import All from "@iconify-icons/ep/refresh-left";
 import Addicon from "@iconify-icons/ep/document-add";
 
-const formRef = ref();
-console.log(Add);
-console.log(Edit);
 const {
   form,
   loading,
@@ -35,32 +29,38 @@ const {
   addVisible,
   editVisible,
   editFormData,
-  optionList
+  optionList,
+  ruleFormRef,
+  rules
 } = useUser();
-// 关闭修改
+// 关闭修改弹窗
 const closeEditVisible = () => {
   editVisible.value = false;
 };
+// 注册修改弹窗交互
 provide("closeEditVisible", closeEditVisible);
-// 关闭添加
+// 关闭添加弹窗
 const closeAddVisible = () => {
   addVisible.value = false;
 };
+// 注册添加弹窗交互
 provide("closeAddVisible", closeAddVisible);
 </script>
 
 <template lang="pug">
 .main
   div
+    //- 搜索表格组件条件
     el-form.bg-bg_color.pl-8.pt-4.pr-8(
       label-position="left"
       label-width="100px"
-      ref="formRef",
       :inline="true",
       :model="form",
-      :rules="rules",
       class="w-[99/100]"
+      ref="ruleFormRef"
+      :rules="rules"
     )
+      //- 搜索项根据字段动态生成
       el-form-item(label="搜索内容框:", prop="searchMain")
         el-input(
           v-model="form.searchMain",
@@ -68,39 +68,35 @@ provide("closeAddVisible", closeAddVisible);
           clearable,
           class="!w-[230px]"
         )
-      el-form-item(label="级联选择框:", prop="searchMain")
+      el-form-item(label="级联选择框:", prop="select")
         el-cascader(
-          v-model="form.searchMain" 
+          v-model="form.select" 
           :options="optionList" 
           class="!w-[230px]"
           clearable)
-      el-form-item(label="时间选择器:", prop="searchMain")
+      el-form-item(label="时间选择器:", prop="date")
         el-date-picker(
-          v-model="form.searchMain"
+          v-model="form.date"
           type="daterange"
           class="!w-[230px]"
           start-placeholder="开始时间"
           end-placeholder="结束时间"
           :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
         )
+      //- 搜索按钮
       el-form-item
         el-button(
           type="primary",
           :icon="useRenderIcon(Search)",
           :loading="loading",
-          @click="onSearch()"
+          @click="onSearch(ruleFormRef)"
         ) 查询
-      el-form-item
-        el-button(
-          type="primary",
-          :icon="useRenderIcon(All)",
-          :loading="loading",
-          @click="onSearch('all')"
-        ) 全部
     //- 表格组件
     PureTableBar(title="后台角色管理", @refresh="onSearch" )
       template(#buttons)
+        //- 新增按钮，弹出新增弹窗
         el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleAdd") 新增
+        //- 修改按钮，弹出修改弹窗
         el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleUpdate(row)") 编辑
       template(v-slot="{ size, checkList }")
         pure-table(stripe 
@@ -128,6 +124,7 @@ provide("closeAddVisible", closeAddVisible);
                 template(#dropdown)
                   el-dropdown-menu
                     el-dropdown-item
+                      //- 编辑操作
                       el-button.reset-margin(
                         link
                         type="primary"
@@ -136,16 +133,19 @@ provide("closeAddVisible", closeAddVisible);
                         :icon="useRenderIcon(EditPen)"
                         v-if="hasAuth(['edit'])"
                       ) 编辑
-                    el-button.reset-margin(
-                      link
-                      type="primary"
-                      :size="size"
-                      @click="handleDelete(row)"
-                      :icon="useRenderIcon(Delete)"
-                      v-if="hasAuth(['delete'])"
-                    ) 删除
+                      //- 删除操作
+                    el-dropdown-item
+                      el-button.reset-margin(
+                        link
+                        type="primary"
+                        :size="size"
+                        @click="handleDelete(row)"
+                        :icon="useRenderIcon(Delete)"
+                        v-if="hasAuth(['delete'])"
+                      ) 删除
+  //- 新增页面组件
   Add(:addVisible="addVisible")
-  //- Add(:addVisible="true")
+  //- 修改页面组件
   Edit(:editVisible="editVisible" :formData="editFormData")
 
 </template>