备份

src/components/Editor/index.vue

@@ -2,7 +2,7 @@
  * @Author: Gui
  * @Date: 2023-03-01 19:20:44
  * @LastEditors: guicheng 1625811865@qq.com
- * @LastEditTime: 2024-06-20 15:03:36
+ * @LastEditTime: 2024-07-10 11:40:30
  * @Description: kxs files
  * @filePath: 
 -->
@@ -139,6 +139,10 @@ defineExpose({
   </div>
 </template>
 <style lang="css">
+.wangeditor {
+  border: 1px solid #999;
+}
+
 .editor-content-view p,
 .editor-content-view li {
   white-space: pre-wrap;

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

@@ -0,0 +1,306 @@
+<!--
+ * @Author: 
+ * @Date: 2023-03-01 19:20:44
+ * @LastEditors: guicheng 1625811865@qq.com
+ * @LastEditTime: 2024-07-10 12:05:52
+ * @Description: kxs files
+ * @filePath: 
+-->
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Add"
+};
+</script>
+<script setup lang="ts">
+import { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
+// 接口列表实例
+const UserUrl = ref(null)
+// 获取当前板块接口列表
+onMounted(async () => {
+  UserUrl.value = await getGroupUrl(["User"]);
+})
+// 组件传参对象
+const props = defineProps<{
+  submit: Function;
+  addVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+}>();
+// 表单数据
+const UpdateForm = ref({
+  RealName: "",
+  AdminName: "",
+  PassWord: "",
+  RoleId: "",
+  content: "",
+  upLoadFile: "",
+  upLoadImg: "",
+});
+// 表单实例
+const ruleFormRef = ref()
+// 富文本实例
+const childComp = ref();
+// 传参选项数据
+// 选项卡参数(默认值为列表某项的id)
+const activeId = ref("1");
+const optionList = [
+  { Id: "1", label: "推荐" },
+  { Id: "2", label: "实物" },
+  { Id: "3", label: "虚拟商品" }
+];
+// 穿梭框数据
+const transferdata = ref([
+  { key: 1, label: "1", disabled: false },
+  { key: 2, label: "2", disabled: false },
+  { key: 3, label: "3", disabled: false },
+  { key: 4, label: "4", disabled: false },
+  { key: 5, label: "5", disabled: false },
+  { key: 6, label: "6", disabled: false }
+]);
+// 提交函数
+const submit = async () => {
+  // 表单校验拦截
+  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("切换选项卡");
+};
+
+//上传文件回调
+const UploadFileCallBack = (url) => {
+  ElMessage({
+    message: `文件上传成功:${url}`,
+    type: "success"
+  });
+  UpdateForm.value.upLoadFile = url;
+}
+//上传图片回调
+const UploadImgCallBack = (url) => {
+  ElMessage({
+    message: `图片上传成功:${url}`,
+    type: "success"
+  });
+  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();
+};
+// 弹窗是否全屏
+const isFullscreen = ref(false)
+</script>
+
+<template lang="pug">
+.main
+  el-dialog(v-model='props.addVisible' width="50%" :fullscreen="isFullscreen" title="新增" draggable @close="closeVisible")
+    //- 有选项卡模板
+    el-tabs(v-model="activeId" class="demo-tabs" @tab-click="handleClick")
+      el-tab-pane(label="选项卡一" name="1")
+        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'
+              placeholder="请输入账户名称")
+          el-form-item(label='用户名' prop="AdminName")
+            el-input(v-model='UpdateForm.AdminName' autocomplete='off'
+              placeholder="请输入用户名")
+          el-form-item(label='密码' prop="PassWord")
+            el-input(v-model='UpdateForm.PassWord' autocomplete='off'
+              placeholder="请输入密码")
+          el-form-item(label="角色:", prop="RoleId")
+            el-select(
+              v-model="UpdateForm.RoleId",
+              placeholder="请选择用户角色",
+              clearable    
+            )
+              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")
+            el-input(v-model='UpdateForm.RealName' autocomplete='off'
+              placeholder="请输入账户名称")
+          el-form-item(label='用户名' prop="AdminName")
+            el-input(v-model='UpdateForm.AdminName' autocomplete='off'
+              placeholder="请输入用户名")
+          el-form-item(label='密码' prop="PassWord")
+            el-input(v-model='UpdateForm.PassWord' autocomplete='off'
+              placeholder="请输入密码")
+          el-form-item(label="角色:", prop="RoleId")
+            el-select(
+              v-model="UpdateForm.RoleId",
+              placeholder="请选择用户角色",
+              clearable    
+            )
+              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")
+        el-input(v-model='UpdateForm.RealName' autocomplete='off'
+          placeholder="请输入账户名称")
+      el-form-item(label='用户名' prop="AdminName")
+        el-input(v-model='UpdateForm.AdminName' autocomplete='off'
+          placeholder="请输入用户名")
+      el-form-item(label='密码' prop="PassWord")
+        el-input(v-model='UpdateForm.PassWord' autocomplete='off'
+          placeholder="请输入密码")
+      el-form-item(label="角色:", prop="RoleId")
+        el-select(
+          v-model="UpdateForm.RoleId",
+          placeholder="请选择用户角色",
+          clearable
+        )
+          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")
+        el-input-number(v-model="UpdateForm.PassWord" :min="1" :max="10")
+      el-form-item(label='滑块' prop="PassWord")
+        el-slider(v-model="UpdateForm.PassWord")
+      el-form-item(label='开关' prop="PassWord")
+        el-switch(v-model="UpdateForm.PassWord")
+      el-form-item(label='单选框' prop="PassWord")
+        el-radio-group(v-model="UpdateForm.PassWord")
+          el-radio(:value="1") Option A
+          el-radio(:value="2") Option B
+          el-radio(:value="3") Option C
+      el-form-item(label='评分' prop="PassWord")
+        el-rate(v-model="UpdateForm.PassWord")
+      el-form-item(label='穿梭框' prop="AdminName")
+        el-transfer(v-model="UpdateForm.AdminName" :data="transferdata")
+      el-form-item(label='上传文件' prop="Uploadfile")
+        el-input(v-model='UpdateForm.upLoadFile' autocomplete='off' disabled)
+        Uploadfile(btntext="上传文件" :FilePath="UploadFileCallBack")
+      el-form-item(label='上传图片' prop="UploadImg")
+        UploadImg(:cropper="true" :callBack="UploadImgCallBack")
+      el-form-item(label='富文本' prop="childComp")
+        Editor(ref="childComp")
+    .flex.justify-end
+      el-button(
+        :icon="useRenderIcon(Close)",
+        @click="closeVisible"
+      ) 关闭
+      el-button(
+        type="primary",
+        :icon="useRenderIcon(Upload)",
+        @click="submit(ruleFormRef)"
+      ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>

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

@@ -0,0 +1,291 @@
+<!--
+ * @Author: 
+ * @Date: 2023-03-01 19:20:44
+ * @LastEditors: guicheng 1625811865@qq.com
+ * @LastEditTime: 2024-07-10 11:45:02
+ * @Description: kxs files
+ * @filePath: 
+-->
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Add"
+};
+</script>
+<script setup lang="ts">
+import { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
+// 接口列表实例
+const UserUrl = ref(null)
+// 获取当前板块接口列表
+onMounted(async () => {
+  UserUrl.value = await getGroupUrl(["User"]);
+})
+// 组件传参对象
+const props = defineProps<{
+  editVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+  formData: {
+    id: any;
+    type: any;
+    default: {};
+  };
+}>();
+// 表单数据
+const UpdateForm: any = ref({
+  RealName: "",
+  AdminName: "",
+  PassWord: "",
+  RoleId: "",
+  content: "",
+  upLoadFile: "",
+  upLoadImg: 'https://oss.kxssaas.com/KxsAdmin/UploadImg/png/2024/6/20/00c1487f0956405e.png',
+});
+// 传参选项数据
+const optionList = [
+  { Id: "1", label: "推荐" },
+  { Id: "2", label: "实物" },
+  { Id: "3", label: "虚拟商品" }
+];
+// 表单实例
+const ruleFormRef = ref()
+// 富文本实例
+const childComp = ref();
+// 选项卡参数(默认值为列表某项的id)
+const activeId = ref("1");
+// 提交函数
+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"
+      });
+    }
+  })
+};
+
+//上传文件回调
+const UploadFileCallBack = (url) => {
+  ElMessage({
+    message: `文件上传成功:${url}`,
+    type: "success"
+  });
+  UpdateForm.value.upLoadFile = url;
+}
+//上传图片回调
+const UploadImgCallBack = (url) => {
+  ElMessage({
+    message: `图片上传成功:${url}`,
+    type: "success"
+  });
+  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>";
+};
+
+// 弹窗是否全屏
+const isFullscreen = ref(false)
+</script>
+
+<template lang="pug">
+.main
+  el-dialog(v-model='props.editVisible' draggable width="50%" :fullscreen="isFullscreen" title="修改" @close="closeVisible" @open="openVisible")
+    //- 有选项卡模板
+    el-tabs(v-model="activeId" class="demo-tabs" @tab-click="handleClick")
+      el-tab-pane(label="选项卡一" name="1")
+        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' 
+              placeholder="请输入账户名称")
+          el-form-item(label='用户名' prop="AdminName")
+            el-input(v-model='UpdateForm.AdminName' autocomplete='off' 
+              placeholder="请输入用户名")
+          el-form-item(label='密码' prop="PassWord")
+            el-input(v-model='UpdateForm.PassWord' autocomplete='off' 
+              placeholder="请输入密码")
+          el-form-item(label="角色:", prop="RoleId")
+            el-select(
+              v-model="UpdateForm.RoleId",
+              placeholder="请选择用户角色",
+              clearable
+            )
+              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")
+            el-input(v-model='UpdateForm.upLoadFile' autocomplete='off' class="!w-[230px]" disabled)
+            Uploadfile(btntext="上传文件" :FilePath="UploadCallBack")
+          el-form-item(label="富文本:", prop="RoleId")
+            Editor(ref="childComp")
+      el-tab-pane(label="选项卡二" name="2")
+        el-form(:model='UpdateForm' label-position="right" label-width="100px")
+          el-form-item(label='账户名称' prop="RealName")
+            el-input(v-model='UpdateForm.RealName' autocomplete='off'
+              placeholder="请输入账户名称")
+          el-form-item(label='用户名' prop="AdminName")
+            el-input(v-model='UpdateForm.AdminName' autocomplete='off'
+              placeholder="请输入用户名")
+          el-form-item(label='密码' prop="PassWord")
+            el-input(v-model='UpdateForm.PassWord' autocomplete='off'
+              placeholder="请输入密码")
+          el-form-item(label="角色:", prop="RoleId")
+            el-select(
+              v-model="UpdateForm.RoleId",
+              placeholder="请选择用户角色",
+              clearable
+            )
+              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")
+        el-input(v-model='UpdateForm.RealName' autocomplete='off' placeholder="请输入账户名称")
+      el-form-item(label='用户名' prop="AdminName")
+        el-input(v-model='UpdateForm.AdminName' autocomplete='off' placeholder="请输入用户名")
+      el-form-item(label='密码' prop="PassWord")
+        el-input(v-model='UpdateForm.PassWord' autocomplete='off' placeholder="请输入密码")
+      el-form-item(label="角色:", prop="RoleId")
+        el-select(
+          v-model="UpdateForm.RoleId",
+          placeholder="请选择用户角色",
+          clearable
+        )
+          el-option(:label="item.label", :value="item.Id" v-for="(item, index) in optionList")
+    .flex.justify-end
+      el-button(
+        :icon="useRenderIcon(Close)",
+        @click="closeVisible"
+      ) 关闭
+      el-button(
+        type="primary",
+        :icon="useRenderIcon(Upload)",
+        @click="submit(ruleFormRef)"
+      ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>

src/views/Template/templateBak/hook.tsx

@@ -0,0 +1,230 @@
+import { reactive, onMounted, ref, ElMessage, ElMessageBox, http, getGroupUrl, RegularVerification, verification, PaginationProps } from "@/utils/importUsed"
+// 接口列表实例
+const UserUrl = ref(null)
+// 获取当前板块接口列表
+onMounted(async () => {
+  UserUrl.value = await getGroupUrl(["User"]);
+
+})
+// 表单实例
+const ruleFormRef = ref()
+export function useUser() {
+  // 搜索表单参数（需动态生成请求字段）
+  const form = reactive({
+    searchMain: "", // 搜索内容
+    select: "", // 选择项
+    date: "",
+  });
+  // 级联选择器参数
+  const optionList = ref([
+    {
+      value: "resource",
+      label: "Resource",
+      children: [
+        {
+          value: "axure",
+          label: "Axure Components"
+        },
+        {
+          value: "sketch",
+          label: "Sketch Templates"
+        },
+        {
+          value: "docs",
+          label: "Design Documentation"
+        }
+      ]
+    }
+  ]);
+  // 表格数据列表
+  const dataList = ref([{ Id: 1 },{ Id: 2 }]);
+  // 页面加载状态
+  const loading = ref(false);
+  // 表格分页选择器
+  const pagination = reactive<PaginationProps>({
+    total: 0,
+    pageSize: 10,
+    currentPage: 1,
+    background: true
+  });
+  // 表格数据（根据字段生成）
+  const columns: TableColumnList = [
+    {
+      type: "selection",
+      width: 55,
+      align: "left",
+      hide: ({ checkList }) => !checkList.includes("勾选列")
+    },
+    {
+      label: "序号",
+      type: "index",
+      width: 70,
+      hide: ({ checkList }) => !checkList.includes("序号列")
+    },
+    {
+      label: "角色ID",
+      prop: "Id",
+      minWidth: 130
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      width: 200,
+      slot: "operation"
+    }
+  ];
+  // 当前页数量切换
+  function handleSizeChange(val: number) {
+    if (typeof val === "number") {
+      pagination.pageSize = val;
+      onSearch(ruleFormRef);
+    }
+  }
+  // 当前页码切换
+  function handleCurrentChange(val: number) {
+    console.log(`current page: ${val}`);
+    if (typeof val === "number") {
+      pagination.currentPage = val;
+      onSearch(ruleFormRef);
+    }
+  }
+  // 选择表格项
+  function handleSelectionChange(val) {
+    console.log(`SelectionChange: ${val}`);
+    // selectList.value = val;
+  }
+  // 搜索列表
+  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"
+        });
+      }
+    })
+  }
+
+  // 删除
+  function handleDelete(row) {
+    ElMessageBox.confirm(
+      `是否删除该用户?  用户名称为:${row.AdminName}`,
+      "提示",
+      {
+        confirmButtonText: "删除",
+        cancelButtonText: "取消",
+        type: "warning"
+      }
+    ).then(async () => {
+      const { status, info }: any = await http.Request({
+        url: UserUrl.User.userDelete.method,
+        method: UserUrl.User.userDelete.url,
+        params: { SysAdminId: row.Id }
+      });
+      if (status === "1") {
+        ElMessage({
+          message: "删除成功",
+          type: "success"
+        });
+        onSearch(ruleFormRef);
+      } else {
+        ElMessageBox.alert(info, "提示", {
+          confirmButtonText: "关闭",
+          type: "warning"
+        });
+      }
+    });
+  }
+  // 新增弹窗开启状态
+  const addVisible = ref(false);
+  function handleAdd() {
+    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,
+    columns,
+    dataList,
+    pagination,
+    onSearch,
+    handleSizeChange,
+    handleCurrentChange,
+    handleSelectionChange,
+    handleAdd,
+    handleUpdate,
+    handleDelete,
+    addVisible,
+    editVisible,
+    editFormData,
+    optionList,
+    ruleFormRef,
+    rules
+  };
+}

src/views/Template/templateBak/index.vue

@@ -0,0 +1,193 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Template"
+};
+</script>
+<script setup lang="ts">
+import { provide } from "vue";
+import { useUser } from "./hook";
+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 Addicon from "@iconify-icons/ep/document-add";
+import Delete from "@iconify-icons/ep/delete";
+import EditPen from "@iconify-icons/ep/edit-pen";
+import More from "@iconify-icons/ep/more-filled";
+
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  onSearch,
+  handleSizeChange,
+  handleCurrentChange,
+  handleSelectionChange,
+  handleAdd,
+  handleUpdate,
+  handleDelete,
+  addVisible,
+  editVisible,
+  editFormData,
+  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"
+      :inline="true",
+      :model="form",
+      class="w-[99/100]"
+      ref="ruleFormRef"
+      :rules="rules"
+    )
+      //- 搜索项根据字段动态生成
+      el-form-item(label="搜索内容框:", prop="searchMain")
+        el-input(
+          v-model="form.searchMain",
+          placeholder="请输入搜索内容",
+          clearable,
+          class="!w-[230px]"
+        )
+      el-form-item(label="级联选择框:", prop="select")
+        el-cascader(
+          v-model="form.select" 
+          :options="optionList" 
+          class="!w-[230px]"
+          clearable)
+      el-form-item(label="时间选择器:", prop="date")
+        el-date-picker(
+          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(ruleFormRef)"
+        ) 查询
+    //- 表格组件
+    PureTableBar(title="后台角色管理", @refresh="onSearch" )
+      template(#buttons)
+        //- 新增按钮，弹出新增弹窗
+        el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleAdd") 新增
+      template(v-slot="{ size, checkList }")
+        pure-table(
+          row-key="id"
+          ref="tableRef"
+          adaptive
+          align-whole="center"
+          table-layout="auto"
+          :loading="loading"
+          :size="size",
+          :data="dataList",
+          :columns="columns",
+          :checkList="checkList",
+          :pagination="pagination",
+          :paginationSmall="size === 'default' ? true : false",
+          :header-cell-style="{ background: 'var(--el-table-row-hover-bg-color)', color: 'var(--el-text-color-primary)' }",
+          @selection-change="handleSelectionChange",
+          @size-change="handleSizeChange",
+          @current-change="handleCurrentChange"
+        )          
+          template(#operation="{ row }")
+            el-button.reset-margin(
+              link
+              type="primary"
+              size="small"
+              @click="handleUpdate(row)"
+              :icon="useRenderIcon(EditPen)"
+            ) 编辑
+            el-button.reset-margin(
+              link
+              type="primary"
+              size="small"
+              @click="handleDelete(row)"
+              :icon="useRenderIcon(Delete)"
+            ) 删除
+            el-dropdown(trigger="click", :hide-on-click="false")
+              el-button.ml-3(class="mt-[2px]" link type='primary' :size='size' :icon='useRenderIcon(More)')
+              template(#dropdown)
+                el-dropdown-menu
+                  //- 编辑操作
+                  el-dropdown-item
+                    el-button.reset-margin.edit-btn(
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(row)"
+                      :icon="useRenderIcon(EditPen)"
+                    ) 其他操作1
+                  //- 删除操作
+                  el-dropdown-item
+                    el-button.reset-margin.edit-btn(
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(row)"
+                      :icon="useRenderIcon(EditPen)"
+                    ) 其他操作2
+  //- 新增页面组件
+  Add(:addVisible="addVisible")
+  //- 修改页面组件
+  Edit(:editVisible="editVisible" :formData="editFormData")
+
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+</style>