界面优化

package-lock.json

@@ -2483,6 +2483,11 @@
         "entities": "^2.0.0"
       }
     },
+    "dom-zindex": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/dom-zindex/-/dom-zindex-1.0.1.tgz",
+      "integrity": "sha512-M/MERVDZ8hguvjl6MAlLWSLYLS7PzEyXaTb5gEeJ+SF+e9iUC0sdvlzqe91MMDHBoy+nqw7wKcUOrDSyvMCrRg=="
+    },
     "domelementtype": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/domelementtype/-/domelementtype-2.3.0.tgz",
@@ -4548,6 +4553,11 @@
         "websocket-driver": "^0.7.4"
       }
     },
+    "sortablejs": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmmirror.com/sortablejs/-/sortablejs-1.10.2.tgz",
+      "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+    },
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
@@ -4916,6 +4926,23 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuedraggable": {
+      "version": "2.24.3",
+      "resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-2.24.3.tgz",
+      "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
+      "requires": {
+        "sortablejs": "1.10.2"
+      }
+    },
+    "vxe-table": {
+      "version": "3.7.5",
+      "resolved": "https://registry.npmmirror.com/vxe-table/-/vxe-table-3.7.5.tgz",
+      "integrity": "sha512-/52qKkgYQs91MPSL0W6s2EioJqwuemb7lUtNqq0py6B64LZtw0OhA+HsjR9oqSjqujex8GTpzaewwLpvIqX49A==",
+      "requires": {
+        "dom-zindex": "^1.0.1",
+        "xe-utils": "^3.5.13"
+      }
+    },
     "watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",
@@ -5190,6 +5217,11 @@
       "integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==",
       "dev": true
     },
+    "xe-utils": {
+      "version": "3.5.14",
+      "resolved": "https://registry.npmmirror.com/xe-utils/-/xe-utils-3.5.14.tgz",
+      "integrity": "sha512-Xq6mS8dWwHBQsQUEBXcZYSaBV0KnNLoVWd0vRRDI3nKpbNxfs/LSCK0W21g1edLFnXYfKqg7hh5dakr3RtYY0A=="
+    },
     "yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmmirror.com/yallist/-/yallist-3.1.1.tgz",

package.json

@@ -20,7 +20,7 @@
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
     "style-loader": "^3.3.1",
-    "vue": "^2.7.14",
+    "vue": "^2.5.2",
     "vue-loader": "^15.9.8",
     "vue-template-compiler": "^2.7.14",
     "webpack": "^5.75.0",
@@ -28,11 +28,13 @@
     "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
-    "element-ui": "^2.15.14",
+    "element-ui": "^2.5.4",
     "jquery": "^3.7.1",
     "less": "^3.9.0",
     "less-loader": "^4.1.0",
     "url-loader": "^4.1.1",
-    "vue-router": "^3.5.2"
+    "vue-router": "^3.5.2",
+    "vuedraggable": "^2.24.3",
+    "vxe-table": "^3.7.5"
   }
 }

src/main.js

@@ -4,8 +4,11 @@ import App from './App.vue'
 import router from './router'  // 引入定义好的router
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
-
+import VXETable from 'vxe-table'
+import 'vxe-table/lib/style.css'
+Vue.use(VXETable)
 Vue.use(ElementUI);
+
 // import ToolKit from "./views/index.vue";
 
 
@@ -110,52 +113,39 @@ function generateToolkit () {
     }, 3000);
 }
 
-window.onload = function () {
-
-    let mousemovebind = false; //如果出现元素默认绑定了mousemove事件导致匹配不到元素的时候，开启第二种模式获得元素
+// window.onload = function () {
 
-    toolkit = document.createElement("div");
-    toolkit.classList = "tooltips"; //添加样式
-    toolkit.setAttribute("id", "wrapperToolkit");
-    let tooltips = false; //标记鼠标是否在提示框上
+let mousemovebind = false; //如果出现元素默认绑定了mousemove事件导致匹配不到元素的时候，开启第二种模式获得元素
 
-    //右键菜单屏蔽
-    document.oncontextmenu = () => false;
+toolkit = document.createElement("div");
+toolkit.classList = "tooltips"; //添加样式
+toolkit.setAttribute("id", "wrapperToolkit");
+let tooltips = false; //标记鼠标是否在提示框上
 
-    window.addEventListener('DOMContentLoaded', () => {
-        // Remove any existing beforeunload events
-        window.onbeforeunload = null;
+//右键菜单屏蔽
+document.oncontextmenu = () => false;
 
-        // Override the beforeunload event with a custom function
-        window.addEventListener('beforeunload', (event) => {
-            // Prevent the event's default action
-            event.preventDefault();
+toolkit.addEventListener("mousedown", function (e) { e.stopPropagation(); }); //重新定义toolkit里的点击事件
 
-            // Remove the confirmation message
-            event.returnValue = '';
-        });
-    });
-    toolkit.addEventListener("mousedown", function (e) { e.stopPropagation(); }); //重新定义toolkit里的点击事件
+document.body.append(toolkit);
+console.log(document)
 
-    document.body.append(toolkit);
-    console.log(document)
-
-    $(".tooltips").html(`
+$(".tooltips").html(`
 <div id="app"></div>
 `);
-    // global.app = new Vue(ToolKit);
-    new Vue({
+// global.app = new Vue(ToolKit);
+new Vue({
     el: '#app',
     router,
     render: h => h(App)
-    })
+})
 
-    document.addEventListener("DOMContentLoaded", function () {
+document.addEventListener("DOMContentLoaded", function () {
     // 在 DOMContentLoaded 事件触发后执行的代码
     var body = document.body;
 
     // 执行其他操作
-    });
-    generateToolkit();
-}
+});
+generateToolkit();
+// }