样式调整

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/router/utils.ts

@@ -167,6 +167,10 @@ function handleAsyncRoutes(routeList) {
     formatFlatteningRoutes(addAsyncRoutes(routeList)).map(
       (v: RouteRecordRaw) => {
         // 防止重复添加路由
+        // console.log(v)
+        // if(v.path[0] !== '/'){
+        //   v.path  = '/' + v.path
+        // }
         if (
           router.options.routes[0].children.findIndex(
             value => value.path === v.path

src/utils/http/index.ts

@@ -2,7 +2,7 @@
  * @Author: Gui
  * @Date: 2023-03-01 19:20:44
  * @LastEditors: guicheng 1625811865@qq.com
- * @LastEditTime: 2024-04-16 16:39:24
+ * @LastEditTime: 2024-07-09 10:16:04
  * @Description: kxs files
  * @filePath:
  */
@@ -157,11 +157,18 @@ class PureHttp {
         return response.data;
       },
       (error: PureHttpError) => {
-        if (error.response.status === 401) {
-          ElMessage({
-            message: `用户token失效，请重新登录`,
-            type: "error"
-          });
+        if (error.response.status === 401 || error.response.status === 424) {
+          if (error.response.data?.msg) {
+              ElMessage({
+                  message: `${error.response.data?.msg}，请重新登录`,
+                  type: "error"
+                });
+              } else {
+                  ElMessage({
+                    message: `用户token失效，请重新登录`,
+                    type: "error"
+                  });
+          }
           setTimeout(() => {
             removeToken();
             storageLocal().clear();

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-21 13:42:43
+ * @LastEditTime: 2024-07-10 12:05:52
  * @Description: kxs files
  * @filePath: 
 -->
@@ -162,68 +162,67 @@ const closeVisible = () => {
   ruleFormRef.value.resetFields();
   closeFn();
 };
+// 弹窗是否全屏
+const isFullscreen = ref(false)
 </script>
 
 <template lang="pug">
 .main
-  el-dialog(v-model='props.addVisible' width="50%" title="新增" @close="closeVisible")
+  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' class="!w-[230px]"
+            el-input(v-model='UpdateForm.RealName' autocomplete='off'
               placeholder="请输入账户名称")
           el-form-item(label='用户名' prop="AdminName")
-            el-input(v-model='UpdateForm.AdminName' autocomplete='off' class="!w-[230px]"
+            el-input(v-model='UpdateForm.AdminName' autocomplete='off'
               placeholder="请输入用户名")
           el-form-item(label='密码' prop="PassWord")
-            el-input(v-model='UpdateForm.PassWord' autocomplete='off' class="!w-[230px]"
+            el-input(v-model='UpdateForm.PassWord' autocomplete='off'
               placeholder="请输入密码")
           el-form-item(label="角色:", prop="RoleId")
             el-select(
               v-model="UpdateForm.RoleId",
               placeholder="请选择用户角色",
-              clearable,
-              class="!w-[230px]"
+              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' class="!w-[230px]"
+            el-input(v-model='UpdateForm.RealName' autocomplete='off'
               placeholder="请输入账户名称")
           el-form-item(label='用户名' prop="AdminName")
-            el-input(v-model='UpdateForm.AdminName' autocomplete='off' class="!w-[230px]"
+            el-input(v-model='UpdateForm.AdminName' autocomplete='off'
               placeholder="请输入用户名")
           el-form-item(label='密码' prop="PassWord")
-            el-input(v-model='UpdateForm.PassWord' autocomplete='off' class="!w-[230px]"
+            el-input(v-model='UpdateForm.PassWord' autocomplete='off'
               placeholder="请输入密码")
           el-form-item(label="角色:", prop="RoleId")
             el-select(
               v-model="UpdateForm.RoleId",
               placeholder="请选择用户角色",
-              clearable,
-              class="!w-[230px]"
+              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' class="!w-[230px]"
+        el-input(v-model='UpdateForm.RealName' autocomplete='off'
           placeholder="请输入账户名称")
       el-form-item(label='用户名' prop="AdminName")
-        el-input(v-model='UpdateForm.AdminName' autocomplete='off' class="!w-[230px]"
+        el-input(v-model='UpdateForm.AdminName' autocomplete='off'
           placeholder="请输入用户名")
       el-form-item(label='密码' prop="PassWord")
-        el-input(v-model='UpdateForm.PassWord' autocomplete='off' class="!w-[230px]"
+        el-input(v-model='UpdateForm.PassWord' autocomplete='off'
           placeholder="请输入密码")
       el-form-item(label="角色:", prop="RoleId")
         el-select(
           v-model="UpdateForm.RoleId",
           placeholder="请选择用户角色",
-          clearable,
-          class="!w-[230px]"
+          clearable
         )
           el-option(:label="item.label", :value="item.Id" v-for="(item, index) in optionList")
       el-form-item(label='取色器' prop="PassWord")
@@ -244,21 +243,22 @@ const closeVisible = () => {
       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' class="!w-[230px]" disabled)
+        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")
-    el-button(
-      :icon="useRenderIcon(Close)",
-      @click="closeVisible"
-    ) 关闭
-    el-button(
-      type="primary",
-      :icon="useRenderIcon(Upload)",
-      @click="submit(ruleFormRef)"
-    ) 确认提交
+    .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">
@@ -299,4 +299,8 @@ const closeVisible = () => {
 :deep(.el-descriptions__header) {
   margin: 16px 0 !important;
 }
+
+.el-select {
+  width: 100%;
+}
 </style>

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-21 13:41:18
+ * @LastEditTime: 2024-07-10 11:45:02
  * @Description: kxs files
  * @filePath: 
 -->
@@ -166,30 +166,32 @@ const openVisible = async () => {
   // 将获取到的富文本字段数据重新赋值到富文本实例
   childComp.value.valueHtml = "<p>12312312</p>";
 };
+
+// 弹窗是否全屏
+const isFullscreen = ref(false)
 </script>
 
 <template lang="pug">
 .main
-  el-dialog(v-model='props.editVisible' width="50%" title="修改" @close="closeVisible" @open="openVisible")
+  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' class="!w-[230px]"
+            el-input(v-model='UpdateForm.RealName' autocomplete='off' 
               placeholder="请输入账户名称")
           el-form-item(label='用户名' prop="AdminName")
-            el-input(v-model='UpdateForm.AdminName' autocomplete='off' class="!w-[230px]"
+            el-input(v-model='UpdateForm.AdminName' autocomplete='off' 
               placeholder="请输入用户名")
           el-form-item(label='密码' prop="PassWord")
-            el-input(v-model='UpdateForm.PassWord' autocomplete='off' class="!w-[230px]"
+            el-input(v-model='UpdateForm.PassWord' autocomplete='off' 
               placeholder="请输入密码")
           el-form-item(label="角色:", prop="RoleId")
             el-select(
               v-model="UpdateForm.RoleId",
               placeholder="请选择用户角色",
-              clearable,
-              class="!w-[230px]"
+              clearable
             )
               el-option(:label="item.label", :value="item.Id" v-for="(item, index) in optionList")
           el-form-item(label='上传图片' prop="UploadImg")
@@ -202,47 +204,46 @@ const openVisible = async () => {
       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' class="!w-[230px]"
+            el-input(v-model='UpdateForm.RealName' autocomplete='off'
               placeholder="请输入账户名称")
           el-form-item(label='用户名' prop="AdminName")
-            el-input(v-model='UpdateForm.AdminName' autocomplete='off' class="!w-[230px]"
+            el-input(v-model='UpdateForm.AdminName' autocomplete='off'
               placeholder="请输入用户名")
           el-form-item(label='密码' prop="PassWord")
-            el-input(v-model='UpdateForm.PassWord' autocomplete='off' class="!w-[230px]"
+            el-input(v-model='UpdateForm.PassWord' autocomplete='off'
               placeholder="请输入密码")
           el-form-item(label="角色:", prop="RoleId")
             el-select(
               v-model="UpdateForm.RoleId",
               placeholder="请选择用户角色",
-              clearable,
-              class="!w-[230px]"
+              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' class="!w-[230px]" placeholder="请输入账户名称")
+        el-input(v-model='UpdateForm.RealName' autocomplete='off' placeholder="请输入账户名称")
       el-form-item(label='用户名' prop="AdminName")
-        el-input(v-model='UpdateForm.AdminName' autocomplete='off' class="!w-[230px]" placeholder="请输入用户名")
+        el-input(v-model='UpdateForm.AdminName' autocomplete='off' placeholder="请输入用户名")
       el-form-item(label='密码' prop="PassWord")
-        el-input(v-model='UpdateForm.PassWord' autocomplete='off' class="!w-[230px]" placeholder="请输入密码")
+        el-input(v-model='UpdateForm.PassWord' autocomplete='off' placeholder="请输入密码")
       el-form-item(label="角色:", prop="RoleId")
         el-select(
           v-model="UpdateForm.RoleId",
           placeholder="请选择用户角色",
-          clearable,
-          class="!w-[230px]"
+          clearable
         )
           el-option(:label="item.label", :value="item.Id" v-for="(item, index) in optionList")
-    el-button(
-      :icon="useRenderIcon(Close)",
-      @click="closeVisible"
-    ) 关闭
-    el-button(
-      type="primary",
-      :icon="useRenderIcon(Upload)",
-      @click="submit(ruleFormRef)"
-    ) 确认提交
+    .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">
@@ -283,4 +284,8 @@ const openVisible = async () => {
 :deep(.el-descriptions__header) {
   margin: 16px 0 !important;
 }
+
+.el-select {
+  width: 100%;
+}
 </style>

src/views/Template/template/hook.tsx

@@ -37,7 +37,7 @@ export function useUser() {
     }
   ]);
   // 表格数据列表
-  const dataList = ref([{ Id: 1 }]);
+  const dataList = ref([{ Id: 1 },{ Id: 2 }]);
   // 页面加载状态
   const loading = ref(false);
   // 表格分页选择器
@@ -69,7 +69,7 @@ export function useUser() {
     {
       label: "操作",
       fixed: "right",
-      width: 120,
+      width: 200,
       slot: "operation"
     }
   ];

src/views/Template/template/index.vue

@@ -14,6 +14,7 @@ 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,
@@ -97,13 +98,15 @@ provide("closeAddVisible", closeAddVisible);
     PureTableBar(title="后台角色管理", @refresh="onSearch" )
       template(#buttons)
         //- 新增按钮，弹出新增弹窗
-        el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleAdd" v-if="hasAuth(['add'])") 新增
+        el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleAdd") 新增
       template(v-slot="{ size, checkList }")
-        pure-table(stripe 
-          border,
-          align-whole="center",
-          table-layout="auto",
-          :loading="loading",
+        pure-table(
+          row-key="id"
+          ref="tableRef"
+          adaptive
+          align-whole="center"
+          table-layout="auto"
+          :loading="loading"
           :size="size",
           :data="dataList",
           :columns="columns",
@@ -116,29 +119,42 @@ provide("closeAddVisible", closeAddVisible);
           @current-change="handleCurrentChange"
         )          
           template(#operation="{ row }")
-            .flex.flex-wrap.items-center
-              el-dropdown(trigger="click", :hide-on-click="false")
-                el-button(type="primary") 操作
-                  el-icon.el-icon--right
-                    arrow-down
-                template(#dropdown)
-                  el-dropdown-menu
-                    el-dropdown-item(v-if="hasAuth(['edit'])")
-                      //- 编辑操作
-                      el-button.reset-margin.edit-btn(
-                        type="primary"
-                        size="small"
-                        @click="handleUpdate(row)"
-                        :icon="useRenderIcon(EditPen)"
-                      ) 编辑
-                        //- 删除操作
-                    el-dropdown-item(v-if="hasAuth(['delete'])")
-                      el-button.reset-margin.edit-btn(
-                        type="primary"
-                        size="small"
-                        @click="handleDelete(row)"
-                        :icon="useRenderIcon(Delete)"
-                      ) 删除
+            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")
   //- 修改页面组件