Merge branch 'main' of github.com:pure-admin/vue-pure-admin into gitee

build/plugins.ts

@@ -10,7 +10,6 @@ import { visualizer } from "rollup-plugin-visualizer";
 import removeConsole from "vite-plugin-remove-console";
 import themePreprocessorPlugin from "@pureadmin/theme";
 import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
-import DefineOptions from "unplugin-vue-define-options/vite";
 import { genScssMultipleScopeVars } from "../src/layout/theme";
 
 export function getPluginsList(
@@ -31,7 +30,6 @@ export function getPluginsList(
     vueJsx(),
     VITE_CDN ? cdn : null,
     configCompressPlugin(VITE_COMPRESSION),
-    DefineOptions(),
     // 线上环境删除console
     removeConsole({ external: ["src/assets/iconfont/iconfont.js"] }),
     viteBuildInfo(),

package.json

@@ -64,7 +64,7 @@
     "swiper": "^9.3.0",
     "typeit": "^8.7.1",
     "v-contextmenu": "3.0.0",
-    "vue": "^3.2.47",
+    "vue": "^3.3.1",
     "vue-i18n": "^9.2.2",
     "vue-json-pretty": "^2.2.4",
     "vue-pdf-embed": "^1.1.6",
@@ -95,7 +95,7 @@
     "@types/sortablejs": "^1.15.1",
     "@typescript-eslint/eslint-plugin": "^5.59.5",
     "@typescript-eslint/parser": "^5.59.5",
-    "@vitejs/plugin-vue": "^4.2.1",
+    "@vitejs/plugin-vue": "^4.2.2",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^11.0.3",
@@ -133,7 +133,6 @@
     "tailwindcss": "^3.3.2",
     "terser": "^5.17.1",
     "typescript": "^5.0.4",
-    "unplugin-vue-define-options": "1.1.6",
     "vite": "^4.3.5",
     "vite-plugin-cdn-import": "^0.3.5",
     "vite-plugin-compression": "^0.5.1",
@@ -141,7 +140,7 @@
     "vite-plugin-remove-console": "^2.1.1",
     "vite-svg-loader": "^4.0.0",
     "vue-eslint-parser": "^9.2.1",
-    "vue-tsc": "^1.2.0"
+    "vue-tsc": "^1.6.4"
   },
   "pnpm": {
     "peerDependencyRules": {

src/components/RePureTableBar/src/bar.tsx

@@ -1,6 +1,9 @@
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
 import { delay, getKeyList, cloneDeep } from "@pureadmin/utils";
-import { defineComponent, ref, computed, type PropType } from "vue";
+import { defineComponent, ref, computed, type PropType, nextTick } from "vue";
+
+import Sortable from "sortablejs";
+import DragIcon from "./svg/drag.svg?component";
 import ExpandIcon from "./svg/expand.svg?component";
 import RefreshIcon from "./svg/refresh.svg?component";
 import SettingIcon from "./svg/settings.svg?component";
@@ -107,16 +110,17 @@ export default defineComponent({
         checkedCount > 0 && checkedCount < checkColumnList.length;
     }
 
-    function handleCheckColumnListChange(val: boolean, index: number) {
+    function handleCheckColumnListChange(val: boolean, label: string) {
-      dynamicColumns.value[index].hide = !val;
+      dynamicColumns.value.filter(item => item.label === label)[0].hide = !val;
     }
 
-    function onReset() {
+    async function onReset() {
       checkAll.value = true;
       isIndeterminate.value = false;
-      checkColumnList = getKeyList(cloneDeep(props?.columns), "label");
-      checkedColumns.value = checkColumnList;
       dynamicColumns.value = cloneDeep(props?.columns);
+      checkColumnList = [];
+      checkColumnList = await getKeyList(cloneDeep(props?.columns), "label");
+      checkedColumns.value = checkColumnList;
     }
 
     const dropdown = {
@@ -144,6 +148,47 @@ export default defineComponent({
       )
     };
 
+    /** 列展示拖拽排序 */
+    const rowDrop = (event: { preventDefault: () => void }) => {
+      event.preventDefault();
+      nextTick(() => {
+        const wrapper: HTMLElement = document.querySelector(
+          ".el-checkbox-group>div"
+        );
+        Sortable.create(wrapper, {
+          animation: 300,
+          handle: ".drag-btn",
+          onEnd: ({ newIndex, oldIndex, item }) => {
+            const targetThElem = item;
+            const wrapperElem = targetThElem.parentNode as HTMLElement;
+            const oldColumn = dynamicColumns.value[oldIndex];
+            const newColumn = dynamicColumns.value[newIndex];
+            if (oldColumn?.fixed || newColumn?.fixed) {
+              // 当前列存在fixed属性 则不可拖拽
+              const oldThElem = wrapperElem.children[oldIndex] as HTMLElement;
+              if (newIndex > oldIndex) {
+                wrapperElem.insertBefore(targetThElem, oldThElem);
+              } else {
+                wrapperElem.insertBefore(
+                  targetThElem,
+                  oldThElem ? oldThElem.nextElementSibling : oldThElem
+                );
+              }
+              return;
+            }
+            const currentRow = dynamicColumns.value.splice(oldIndex, 1)[0];
+            dynamicColumns.value.splice(newIndex, 0, currentRow);
+          }
+        });
+      });
+    };
+
+    const isFixedColumn = (label: string) => {
+      return dynamicColumns.value.filter(item => item.label === label)[0].fixed
+        ? true
+        : false;
+    };
+
     const reference = {
       reference: () => (
         <SettingIcon
@@ -191,7 +236,6 @@ export default defineComponent({
                 />
               </el-tooltip>
               <el-divider direction="vertical" />
-
               <el-tooltip effect="dark" content="密度" placement="top">
                 <el-dropdown v-slots={dropdown} trigger="click">
                   <CollapseIcon class={["w-[16px]", iconClass.value]} />
@@ -228,13 +272,25 @@ export default defineComponent({
                       alignment="flex-start"
                       size={0}
                     >
-                      {checkColumnList.map((item, index) => {
+                      {checkColumnList.map(item => {
                         return (
+                          <div class="flex items-center">
+                            <DragIcon
+                              class={[
+                                "drag-btn w-[16px] mr-2",
+                                isFixedColumn(item)
+                                  ? "!cursor-no-drop"
+                                  : "!cursor-grab"
+                              ]}
+                              onMouseenter={(event: {
+                                preventDefault: () => void;
+                              }) => rowDrop(event)}
+                            />
                             <el-checkbox
                               key={item}
                               label={item}
                               onChange={value =>
-                              handleCheckColumnListChange(value, index)
+                                handleCheckColumnListChange(value, item)
                               }
                             >
                               <span
@@ -244,6 +300,7 @@ export default defineComponent({
                                 {item}
                               </span>
                             </el-checkbox>
+                          </div>
                         );
                       })}
                     </el-space>

src/components/RePureTableBar/src/svg/drag.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" fill="currentColor" aria-hidden="true" data-icon="holder" viewBox="64 64 896 896"><path d="M300 276.5a56 56 0 1 0 56-97 56 56 0 0 0-56 97zm0 284a56 56 0 1 0 56-97 56 56 0 0 0-56 97zM640 228a56 56 0 1 0 112 0 56 56 0 0 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 0 0-112 0zM300 844.5a56 56 0 1 0 56-97 56 56 0 0 0-56 97zM640 796a56 56 0 1 0 112 0 56 56 0 0 0-112 0z"/></svg>

src/views/system/dept/form.vue

@@ -1,27 +1,10 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { formRules } from "./rule";
+import { FormProps } from "./types";
 import ReCol from "@/components/ReCol";
 import { usePublicHooks } from "../hooks";
 
-/** TODO
- * 针对类型的props/emit声明，vue3.3.0版本以下不支持复杂的类型和从其他文件进行类型导入，等后续vue正式发布3.3.0版本再优化
- * https://cn.vuejs.org/api/sfc-script-setup.html#typescript-only-features
- */
-interface FormProps {
-  formInline: {
-    higherDeptOptions: Record<string, unknown>[];
-    parentId: number;
-    name: string;
-    principal: string;
-    phone: string | number;
-    email: string;
-    sort: number;
-    status: number;
-    remark: string;
-  };
-}
-
 const props = withDefaults(defineProps<FormProps>(), {
   formInline: () => ({
     higherDeptOptions: [],

src/views/system/role/hook.tsx

@@ -21,16 +21,18 @@ export function useRole() {
     background: true
   });
   const columns: TableColumnList = [
-    {
+    // {
-      label: "勾选列", // 如果需要表格多选，此处label必须设置
+    //   label: "勾选列", // 如果需要表格多选，此处label必须设置
-      type: "selection",
+    //   type: "selection",
-      width: 55,
+    //   width: 55,
-      align: "left"
+    //   align: "left",
-    },
+    //   fixed: "left"
+    // },
     {
       label: "序号",
       type: "index",
-      width: 70
+      width: 70,
+      fixed: "left"
     },
     {
       label: "角色编号",

src/views/system/user/hook.tsx

@@ -24,7 +24,8 @@ export function useUser() {
     {
       label: "序号",
       type: "index",
-      width: 70
+      width: 70,
+      fixed: "left"
     },
     {
       label: "用户编号",

tsconfig.json

@@ -27,10 +27,9 @@
       "vite/client",
       "element-plus/global",
       "@pureadmin/table/volar",
-      "@pureadmin/descriptions/volar",
+      "@pureadmin/descriptions/volar"
-      "unplugin-vue-define-options/macros-global"
     ],
-    "typeRoots": ["./node_modules/@types/", "./types"]
+    "typeRoots": ["./types", "./node_modules/@types/"]
   },
   "include": [
     "mock/*.ts",
@@ -40,5 +39,5 @@
     "types/*.d.ts",
     "vite.config.ts"
   ],
-  "exclude": ["node_modules", "dist", "**/*.js"]
+  "exclude": ["dist", "**/*.js", "node_modules"]
 }