From 61d9f8ecf94c2e1bf2ffe840ecbc7a23561ff454 Mon Sep 17 00:00:00 2001
From: zhaozhenfang <zhaozhenfang@kylinos.cn>
Date: Tue, 25 Jan 2022 18:04:12 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=A8=E6=88=B7=E6=A8=A1=E5=9D=97=E5=A2=9E?=
 =?UTF-8?q?=E5=88=A0=E6=94=B9=E6=9F=A5=E6=8E=A5=E5=8F=A3=E6=B5=8B=E8=AF=95?=
 =?UTF-8?q?=E9=80=9A=E8=BF=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                         | 146 ++++++++-
 package.json                              |   4 +-
 vue/components/KyTable/index.vue          | 267 +++-------------
 vue/main.js                               |   2 +
 vue/request/user.js                       |  64 ++++
 vue/rules/check.js                        |  10 +-
 vue/styles/index.scss                     | 366 ++++++++++++++++++++++
 vue/utils/crypto.js                       |   2 +-
 vue/utils/test.js                         |  46 +++
 vue/views/Cluster/Cluster.vue             |   8 -
 vue/views/Cluster/form/addForm.vue        |   1 -
 vue/views/UserManager/UserMan.vue         | 218 +++++++++----
 vue/views/UserManager/form/addForm.vue    | 121 +++++++
 vue/views/UserManager/form/updateForm.vue | 119 +++++++
 14 files changed, 1060 insertions(+), 314 deletions(-)
 create mode 100644 vue/request/user.js
 create mode 100644 vue/styles/index.scss
 create mode 100644 vue/utils/test.js
 create mode 100644 vue/views/UserManager/form/addForm.vue
 create mode 100644 vue/views/UserManager/form/updateForm.vue

diff --git a/package-lock.json b/package-lock.json
index 70bb9dbf..5fbdf9f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -53,6 +53,15 @@
         }
       }
     },
+    "adler-32": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.2.0.tgz",
+      "integrity": "sha1-aj5r8KY5ALoVZSgIyxXGgT0aXyU=",
+      "requires": {
+        "exit-on-epipe": "~1.0.1",
+        "printj": "~1.1.0"
+      }
+    },
     "ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -123,6 +132,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
       "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "dev": true,
       "requires": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -1276,7 +1286,8 @@
     "binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true
     },
     "block-stream": {
       "version": "0.0.9",
@@ -1365,6 +1376,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
       "requires": {
         "fill-range": "^7.0.1"
       }
@@ -1665,6 +1677,38 @@
         "lazy-cache": "^1.0.3"
       }
     },
+    "cfb": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.1.tgz",
+      "integrity": "sha512-wT2ScPAFGSVy7CY+aauMezZBnNrfnaLSrxHUHdea+Td/86vrk6ZquggV+ssBR88zNs0OnBkL2+lf9q0K+zVGzQ==",
+      "requires": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0",
+        "printj": "~1.3.0"
+      },
+      "dependencies": {
+        "adler-32": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.0.tgz",
+          "integrity": "sha512-f5nltvjl+PRUh6YNfUstRaXwJxtfnKEWhAWWlmKvh+Y3J2+98a0KKVYDEhz6NdKGqswLhjNGznxfSsZGOvOd9g==",
+          "requires": {
+            "printj": "~1.2.2"
+          },
+          "dependencies": {
+            "printj": {
+              "version": "1.2.3",
+              "resolved": "https://registry.npmjs.org/printj/-/printj-1.2.3.tgz",
+              "integrity": "sha512-sanczS6xOJOg7IKDvi4sGOUOe7c1tsEzjwlLFH/zgwx/uyImVM9/rgBkc8AfiQa/Vg54nRd8mkm9yI7WV/O+WA=="
+            }
+          }
+        },
+        "printj": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/printj/-/printj-1.3.1.tgz",
+          "integrity": "sha512-GA3TdL8szPK4AQ2YnOe/b+Y1jUFwmmGMMK/qbY7VcE3Z7FU8JstbKiKRzO6CIiAKPhTO8m01NoQ0V5f3jc4OGg=="
+        }
+      }
+    },
     "chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -1726,6 +1770,7 @@
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
       "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
+      "dev": true,
       "requires": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -1909,6 +1954,11 @@
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
       "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
     },
+    "codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA=="
+    },
     "collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -2223,6 +2273,22 @@
         }
       }
     },
+    "crc-32": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.1.tgz",
+      "integrity": "sha512-Dn/xm/1vFFgs3nfrpEVScHoIslO9NZRITWGz/1E/St6u4xw99vfZzVkW0OSnzx2h9egej9xwMCEut6sqwokM/w==",
+      "requires": {
+        "exit-on-epipe": "~1.0.1",
+        "printj": "~1.3.1"
+      },
+      "dependencies": {
+        "printj": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/printj/-/printj-1.3.1.tgz",
+          "integrity": "sha512-GA3TdL8szPK4AQ2YnOe/b+Y1jUFwmmGMMK/qbY7VcE3Z7FU8JstbKiKRzO6CIiAKPhTO8m01NoQ0V5f3jc4OGg=="
+        }
+      }
+    },
     "create-ecdh": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
@@ -4060,6 +4126,11 @@
         }
       }
     },
+    "exit-on-epipe": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz",
+      "integrity": "sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw=="
+    },
     "expand-brackets": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
@@ -4319,6 +4390,11 @@
         }
       }
     },
+    "file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "filesize": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
@@ -4329,6 +4405,7 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
       "requires": {
         "to-regex-range": "^5.0.1"
       }
@@ -4416,6 +4493,11 @@
       "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
       "dev": true
     },
+    "frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA=="
+    },
     "fragment-cache": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
@@ -4521,6 +4603,7 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
       "optional": true
     },
     "fstream": {
@@ -4630,6 +4713,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
       "requires": {
         "is-glob": "^4.0.1"
       }
@@ -5132,7 +5216,8 @@
     "immutable": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
-      "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw=="
+      "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==",
+      "dev": true
     },
     "import-cwd": {
       "version": "2.1.0",
@@ -5318,6 +5403,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
       "requires": {
         "binary-extensions": "^2.0.0"
       }
@@ -5429,7 +5515,8 @@
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "dev": true
     },
     "is-finite": {
       "version": "1.1.0",
@@ -5448,6 +5535,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
       "requires": {
         "is-extglob": "^2.1.1"
       }
@@ -5461,7 +5549,8 @@
     "is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true
     },
     "is-number-object": {
       "version": "1.0.6",
@@ -6483,7 +6572,8 @@
     "normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true
     },
     "normalize-range": {
       "version": "0.1.2",
@@ -7021,7 +7111,8 @@
     "picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true
     },
     "pify": {
       "version": "2.3.0",
@@ -9281,6 +9372,11 @@
         "renderkid": "^2.0.4"
       }
     },
+    "printj": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz",
+      "integrity": "sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ=="
+    },
     "private": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@@ -9500,6 +9596,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
       "requires": {
         "picomatch": "^2.2.1"
       }
@@ -9851,6 +9948,7 @@
       "version": "1.48.0",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.48.0.tgz",
       "integrity": "sha512-hQi5g4DcfjcipotoHZ80l7GNJHGqQS5LwMBjVYB/TaT0vcSSpbgM8Ad7cgfsB2M0MinbkEQQPO9+sjjSiwxqmw==",
+      "dev": true,
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -10357,7 +10455,8 @@
     "source-map-js": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.1.tgz",
-      "integrity": "sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA=="
+      "integrity": "sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==",
+      "dev": true
     },
     "source-map-resolve": {
       "version": "0.5.3",
@@ -10510,6 +10609,14 @@
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
+    "ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "requires": {
+        "frac": "~1.1.2"
+      }
+    },
     "sshpk": {
       "version": "1.17.0",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.17.0.tgz",
@@ -10905,6 +11012,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
       "requires": {
         "is-number": "^7.0.0"
       }
@@ -12503,6 +12611,16 @@
       "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=",
       "dev": true
     },
+    "wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw=="
+    },
+    "word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA=="
+    },
     "wordwrap": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
@@ -12581,6 +12699,20 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "xlsx": {
+      "version": "0.17.5",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.17.5.tgz",
+      "integrity": "sha512-lXNU0TuYsvElzvtI6O7WIVb9Zar1XYw7Xb3VAx2wn8N/n0whBYrCnHMxtFyIiUU1Wjf09WzmLALDfBO5PqTb1g==",
+      "requires": {
+        "adler-32": "~1.2.0",
+        "cfb": "^1.1.4",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.0",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      }
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
diff --git a/package.json b/package.json
index 9ac549d8..5c84e811 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "crypto-js": "^4.1.1",
     "echarts": "^5.1.1",
     "element-ui": "^2.15.6",
+    "file-saver": "^2.0.5",
     "js-cookie": "^3.0.1",
     "node-sass": "^4.14.1",
     "requestjs": "^1.0.3",
@@ -22,7 +23,8 @@
     "vue-devtools": "^5.1.4",
     "vue-router": "^3.0.1",
     "vuejs": "^3.0.1",
-    "vuex": "^3.6.2"
+    "vuex": "^3.6.2",
+    "xlsx": "^0.17.5"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
diff --git a/vue/components/KyTable/index.vue b/vue/components/KyTable/index.vue
index 1080d1cd..f779605d 100644
--- a/vue/components/KyTable/index.vue
+++ b/vue/components/KyTable/index.vue
@@ -2,29 +2,30 @@
   <div class="ky-table">
     <div class="content">
       <el-table
-        cell-class-name="ky-cell-class"
         :header-cell-style="{ color: 'black', 'background-color': '#f6f8fd' }"
         :cell-style="{ color: 'black' }"
         v-loading="loading"
         ref="multipleTable"
         :data="tableData"
         tooltip-effect="dark"
-        style="width: 100%"
-        size="medium"
         :row-class-name="tableRowClassName"
         @select="handleSelectionChange"
+        @select-all="handleSelectAll"
       >
+        <el-table-column
+          type="selection"
+          width="55"
+          align="center"
+        >
+        </el-table-column>
         <slot name="table"></slot>
       </el-table>
     </div>
     <div class="pagination">
       <el-pagination
-        @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="objSearch.page"
-        :page-sizes="[20, 25, 50, 75, 100]"
-        :page-size="objSearch.perPage"
-        layout="total, sizes, prev, pager, next, jumper"
+        layout="total, prev, pager, next, jumper"
         :total="total"
       >
       </el-pagination>
@@ -35,158 +36,82 @@
 <script>
 export default {
   props: {
-    row_number: {
-        type: Boolean,
-        default: false,
-    },
-    row_id_name: {
-      type: String,
-      default: 'id',
-    },
     rowClassName: {
       type: Function,
     },
     getData: {
       type: Function,
     },
-    content: {
-      type: String,
-      default: "",
-    },
-    watchs: {
-      type: Object,
-      default: function () {
-        return {};
-      },
-    },
   },
   data() {
     return {
+      selectRow: {
+        ids: [],
+        rows: []
+      },
       checked: false,
-      select_id: "0",
-      select_number: "0",
       displayTip: false,
       total: 0,
-      loading: false, //待修改
+      loading: false, 
       tableData: [],
       display: false,
       objSearch: {
-        perPage: 20,
         page: 1,
-        search: this.$route.query.search,
       },
     };
   },
-  beforeDestroy() {
-    /* if (this.timer) {
-      clearInterval(this.timer);
-    } */
-  },
   mounted() {
     this.loadData({ ...this.objSearch, ...this.$route.query });
-    for (let key in this.watchs) {
-      this.$watch(key, this.watchs[key]);
-    }
   },
   methods: {
-    loadData(data = { page: 1, perPage: 20 }) {
-      if (!this.modalTable) {
-        this.$router.replace({
-          query: {
-            ...this.$route.query,
-            page: data.page,
-            perPage: data.perPage,
-            search: data.search,
-          },
-        });
-      }
+    loadData(data) {
+      this.loading = true;
       this.getData({ ...data }).then((response) => {
         const res = response.data;
-        if (res.code == 0) {
-          this.objSearch.perPage = res.data.perPage;
-          this.total = res.data.total;
-          this.objSearch.page = res.data.page;
+        if (res.code === 200) {
+          this.total = res.total;
+          this.objSearch.page = res.page;
           this.loading = false;
-          this.tableData = res.data.results;
-          this.objSearch.search = data.search;
+          this.tableData = res.data;
         } else {
           this.$message({
             type: "error",
-            message: res.message,
+            message: "数据格式错误",
           });
         }
       });
     },
-    handleSizeChange(size) {
-      this.objSearch.perPage = size;
-      this.loadData({ ...this.$route.query, ...this.objSearch });
-    },
     handleCurrentChange(page) {
       this.objSearch.page = page;
       this.loadData(this.objSearch);
     },
     handleSelectionChange(selection, row) {
-      if (this.select_id == "2") {
-          const index = this.selectRow.excludeIds.indexOf(this.row_number ? row.rowNumber : row[this.row_id_name]);
-          if (index < 0) {
-          this.selectRow.excludeIds.push(this.row_number ? row.rowNumber : row[this.row_id_name]);
-          this.selectRow.excludeRows.push(row);
-          this.select_number = this.select_number - 1;
-        } else {
-          this.selectRow.excludeIds.splice(index, 1);
-          this.selectRow.excludeRows.splice(index, 1);
-          this.select_number = this.select_number + 1;
-        }
-        if (this.select_number) {
-          this.checked = true;
-        } else {
-          this.checked = false;
-        }
-        return;
-      }
-      if (this.row_number) {
-        const index = this.selectRow.rowNumbers.indexOf(row.rowNumber);
+        // 1.判断是否已经存在已选中行
+        const index = this.selectRow.ids.indexOf(row.ID);
+        // 2.若是不在就放入选中数组中，在就删掉
         if (index < 0) {
-          this.selectRow.rowNumbers.push(row.rowNumber);
-          this.selectRow.rows.push(row);
-        } else {
-          this.selectRow.rowNumbers.splice(index, 1);
-          this.selectRow.rows.splice(index, 1);
-        }
-        this.select_number = this.selectRow.rowNumbers.length;
-        if (this.selectRow.rowNumbers.length) {
-          this.checked = true;
-        } else {
-          this.checked = false;
-        }
-      } else {
-        const index = this.selectRow.ids.indexOf(row[this.row_id_name]);
-        if (index < 0) {
-          this.selectRow.ids.push(row[this.row_id_name]);
+          this.selectRow.ids.push(row.ID);
           this.selectRow.rows.push(row);
         } else {
           this.selectRow.ids.splice(index, 1);
           this.selectRow.rows.splice(index, 1);
         }
-        this.select_number = this.selectRow.ids.length;
-        if (this.selectRow.ids.length) {
-          this.checked = true;
-        } else {
-          this.checked = false;
-        }
-      }
+        console.log(this.selectRow.ids)
     },
-    // 全选禁用
-    /* selectable(row) {
-      if (this.checked && this.select_id == "2") {
-        return false;
+    handleSelectAll(selection) {
+      if(selection.length === 0) {
+        this.selectRow.ids = [];
+        this.selectRow.rows = [];
+      } else {
+        selection.forEach(item => {
+          this.selectRow.ids.push(item.ID);
+          this.selectRow.rows.push(item);
+        });
       }
-      return true;
-    }, */
+    },
     handleSearch() {
       this.checked = false;
       this.$refs.multipleTable.clearSelection();
-      this.selectRow.rowNumbers = [];
       this.selectRow.ids = [];
       this.selectRow.rows = [];
       this.loadData({...this.objSearch, page: 1});
@@ -194,19 +119,10 @@ export default {
     refresh() {
       this.checked = false;
       this.$refs.multipleTable.clearSelection();
-      this.selectRow.rowNumbers = [];
       this.selectRow.ids = [];
       this.selectRow.rows = [];
       this.loadData({ ...this.objSearch});
     },
-    handleBlur() {
-      this.displayTip = false;
-    },
-    handleFocus() {
-      if (this.content) {
-        this.displayTip = true;
-      }
-    },
     tableRowClassName({ row, rowIndex }) {
       let className = this.rowClassName ? this.rowClassName(row) : "";
       if (rowIndex % 2 == 1) {
@@ -214,119 +130,9 @@ export default {
       }
       return className;
     },
-    handleCheck() {
-      this.checked = !this.checked;
-      if (this.checked) {
-        this.select_number = this.total;
-        this.select_id = "2";
-        this.selectRow.excludeRows = [];
-        this.selectRow.excludeIds = [];
-      } else {
-        this.select_id = "0";
-        this.select_number = "0";
-      }
-    },
-    handleSelect(e) {
-      this.select_id = e.target.id;
-      if (this.select_id == "0") {
-        this.checked = false;
-      } else if (this.select_id == "1") {
-        this.checked = true;
-        this.tableData.forEach((row) => {
-          this.$refs.multipleTable.toggleRowSelection(row, true);
-          if (this.row_number) {
-            const index = this.selectRow.rowNumbers.indexOf(row.rowNumber);
-            if (index < 0) {
-              this.selectRow.rowNumbers.push(row.rowNumber);
-              this.selectRow.rows.push(row);
-            }
-          } else {
-            const index = this.selectRow.ids.indexOf(row[this.row_id_name]);
-            if (index < 0) {
-              this.selectRow.ids.push(row[this.row_id_name]);
-              this.selectRow.rows.push(row);
-            }
-          }
-        });
-        this.select_number = this.row_number
-          ? this.selectRow.rowNumbers.length
-          : this.selectRow.ids.length;
-      } else {
-        this.checked = true;
-        this.select_number = this.total;
-        this.selectRow.excludeIds = [];
-        this.selectRow.excludeRows = [];
-      }
-    },
     handleClose() {
       this.display = false;
     },
-    handleAdvanceSearch(search) {
-      this.display = false;
-      this.objSearch.search = search;
-      this.handleSearch();
-    },
-    handleSelectRow() {
-      if (this.checked) {
-        if (this.select_id == "2") {
-          this.tableData.forEach((row) => {
-            if (!this.selectRow.excludeIds.includes(this.row_number ? row.rowNumber : row[this.row_id_name])) {
-                this.$refs.multipleTable.toggleRowSelection(row, true);
-            }
-            if (this.row_number) {
-              const index = this.selectRow.rowNumbers.indexOf(row.rowNumber);
-              if (index < 0) {
-                this.selectRow.rowNumbers.push(row.rowNumber);
-                this.selectRow.rows.push(row);
-              }
-            } else {
-              const index = this.selectRow.ids.indexOf(row[this.row_id_name]);
-              if (index < 0) {
-                this.selectRow.ids.push(row[this.row_id_name]);
-                this.selectRow.rows.push(row);
-              }
-            }
-          });
-        } else {
-          if (this.row_number) {
-            this.tableData.forEach((row) => {
-              if (this.selectRow.rowNumbers.indexOf(row.rowNumber ) > -1) {
-                this.$refs.multipleTable.toggleRowSelection(row, true);
-              }
-            });
-          } else {
-            this.tableData.forEach((row) => {
-              if (this.selectRow.ids.indexOf(row[this.row_id_name]) > -1) {
-                this.$refs.multipleTable.toggleRowSelection(row, true);
-              }
-            });
-          }
-        }
-      } else {
-        this.$refs.multipleTable.clearSelection();
-        this.selectRow.rowNumbers = [];
-        this.selectRow.ids = [];
-        this.selectRow.rows = [];
-        this.select_id = "0";
-        this.select_number = "0";
-      }
-    },
-  },
-  computed: {
-    checkOrSelectId() {
-      const { checked, select_id } = this;
-      return { checked, select_id };
-    },
-  },
-  watch: {
-    tableData: function () {
-      this.$nextTick(() => {
-        this.handleSelectRow();
-      });
-    },
-    checkOrSelectId: function () {
-      this.handleSelectRow();
-    },
   },
 };
 </script>
@@ -338,6 +144,9 @@ export default {
     .line-color {
       background-color: #f2f7ff;
     }
+    th, td {
+      text-align: center;
+    }
   }
   .pagination {
     .el-pagination {
diff --git a/vue/main.js b/vue/main.js
index 2e6e953e..e97350d5 100644
--- a/vue/main.js
+++ b/vue/main.js
@@ -8,6 +8,8 @@ import 'element-ui/lib/theme-chalk/index.css';
 import * as echarts from 'echarts'; //echarts 5.0 导入方式
 import './permission';
 
+import './styles/index.scss'
+
 
 Vue.prototype.$http = axios  
 Vue.prototype.$echarts = echarts
diff --git a/vue/request/user.js b/vue/request/user.js
new file mode 100644
index 00000000..78592803
--- /dev/null
+++ b/vue/request/user.js
@@ -0,0 +1,64 @@
+import { request } from './request'
+// 用户登录
+export function loginByEmail(data) {
+  return request({
+    url: '/user/login',
+    method: 'post',
+    data
+  })
+}
+// 获取当前登录用户信息
+export function getCurUser() {
+  return request({
+    url: '/user/info',
+    method: 'get'
+  })
+}
+// 获取全部用户信息
+export function getUsers(data) {
+  return request({
+    url: '/user/searchAll',
+    method: 'get',
+    params: data
+  })
+}
+// 添加用户
+export function addUser(data) {
+  return request({
+    url: '/user/register',
+    method: 'post',
+    data
+  })
+}
+// 编辑用户
+export function updateUser(data) {
+  return request({
+    url: '/user/update',
+    method: 'post',
+    data
+  })
+}
+// 删除用户
+export function delUser(data) {
+  return request({
+    url: '/user/delete',
+    method: 'post',
+    data
+  })
+}
+// 重置密码
+export function resetPwd(data) {
+  return request({
+    url: '/user/reset',
+    method: 'post',
+    data
+  })
+}
+// 批量导入用户
+export function importUser(data) {
+  return request({
+    url: '/user/import',
+    method: 'post',
+    data
+  })
+}
\ No newline at end of file
diff --git a/vue/rules/check.js b/vue/rules/check.js
index 4dd7b590..54cb07a3 100644
--- a/vue/rules/check.js
+++ b/vue/rules/check.js
@@ -4,7 +4,7 @@
     regex(rule, value, callback, obj, reg);
   };
 
-// 校验邮箱
+// 校验邮箱 /^[1]([3-9])[0-9]{9}$/
 export let checkEmail = (rule, value, callback) => {
   if (!value) {
     return callback();
@@ -12,7 +12,13 @@ export let checkEmail = (rule, value, callback) => {
   let patt = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
   regex(rule, value, callback, {}, patt);
 };
-  
+
+// 校验手机号
+export let checkPhone = (rule, value, callback, obj) => {
+  let reg = /^[1]([3-9])[0-9]{9}$/;
+  regex(rule, value, callback, obj, reg);
+};
+
   function regex(rule, value, callback, obj, reg) {
     if (!value) {
       callback();
diff --git a/vue/styles/index.scss b/vue/styles/index.scss
new file mode 100644
index 00000000..601f5d5b
--- /dev/null
+++ b/vue/styles/index.scss
@@ -0,0 +1,366 @@
+body {
+  height: 100%;
+  margin: 0px;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+    Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+  font-weight: 700;
+}
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+#app {
+  height: 100%;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+.no-padding {
+  padding: 0px !important;
+}
+
+.padding-content {
+  padding: 4px 0;
+}
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+div:focus {
+  outline: none;
+}
+
+.fr {
+  float: right;
+}
+
+.fl {
+  float: left;
+}
+
+.pr-5 {
+  padding-right: 5px;
+}
+
+.pl-5 {
+  padding-left: 5px;
+}
+
+.block {
+  display: block;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.inlineBlock {
+  display: block;
+}
+
+.clearfix {
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+  }
+}
+
+code {
+  background: #eef1f6;
+  padding: 15px 16px;
+  margin-bottom: 20px;
+  display: block;
+  line-height: 36px;
+  font-size: 15px;
+  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
+  a {
+    color: #337ab7;
+    cursor: pointer;
+    &:hover {
+      color: rgb(32, 160, 255);
+    }
+  }
+}
+
+.warn-content {
+  background: rgba(66, 185, 131, 0.1);
+  border-radius: 2px;
+  padding: 16px;
+  padding: 1rem;
+  line-height: 1.6rem;
+  word-spacing: 0.05rem;
+  a {
+    color: #42b983;
+    font-weight: 600;
+  }
+}
+
+//main-container全局样式
+.app-container {
+  padding: 20px;
+}
+
+.components-container {
+  margin: 30px 50px;
+  position: relative;
+}
+
+.pagination-container {
+  margin-top: 30px;
+}
+
+.editor-container .CodeMirror {
+  height: 100% !important;
+}
+
+.text-center {
+  text-align: center;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+  padding: 0;
+}
+
+p {
+  margin: 0;
+  padding: 0;
+}
+
+.kylin-item-button,
+.kylin-search-button-default {
+  background-color: #fff;
+  color: #34ade0;
+  background-image: none;
+  &:hover {
+    color: #34ade0;
+    background-image: none;
+  }
+  &:focus {
+    color: #34ade0;
+    background-image: none;
+  }
+}
+.kylin-button,
+.kylin-search-button {
+  border: 1px solid #34ade0;
+  background-color: #34ade0;
+  color: #fff;
+  background-image: none;
+  &:hover {
+    border: 1px solid #34ade0;
+    background-color: #34ade0;
+    color: #fff;
+    background-image: none;
+    opacity: 0.8;
+  }
+  &:focus {
+    color: #fff;
+    border: 1px solid #34ade0;
+    background-color: #34ade0;
+  }
+}
+.ky-dropdown {
+  .el-button--default {
+    border: 1px solid #34ade0;
+    background-color: #34ade0;
+    color: #fff;
+    background-image: none;
+    &:hover {
+      border: 1px solid #34ade0;
+      background-color: #34ade0;
+      color: #fff;
+      background-image: none;
+      opacity: 0.8;
+    }
+    &:focus {
+      color: #fff;
+      border: 1px solid #34ade0;
+      background-color: #34ade0;
+    }
+  }
+}
+a {
+  color: #34ade0;
+}
+.el-button + .el-button {
+  margin-left: 0px;
+}
+
+.el-card {
+  .el-card__header {
+    background-color: #34ade0;
+    color: #fff;
+    padding: 10px 15px;
+  }
+  .el-card__body {
+    font-weight: 500;
+    font-size: 14px;
+    .el-row {
+      margin-bottom: 10px;
+    }
+    .ky-right {
+      line-height: 1.66667;
+    }
+  }
+}
+
+.el-upload__tip.el-form-item__error {
+  color: #f56c6c;
+}
+
+/* .el-table--border, .el-table--group {
+      border:1px solid #ccc !important;
+  }
+
+  .el-table td, .el-table th.is-leaf {
+    border-bottom: 1px solid #ccc;
+  }
+
+  .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
+    border-right: 1px solid #ccc;
+  } */
+
+.dialog-footer {
+  text-align: right;
+}
+
+.transfer-center {
+  .el-transfer-panel {
+    .el-transfer-panel__empty {
+      position: relative;
+      top: -50%;
+    }
+  }
+}
+
+.el-button--text {
+  color: #36ade0;
+}
+
+.kylin-compare-radio {
+  box-sizing: border-box;
+  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+    background-color: #fff;
+    color: #34ade0;
+    height: 30px;
+    line-height: 30px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    box-sizing: border-box;
+  }
+  .el-radio-button {
+    .el-radio-button__inner {
+      border-color: #fff;
+      background-color: #34ade0;
+      color: #fff;
+      height: 30px;
+      line-height: 30px;
+      padding-top: 0px;
+      padding-bottom: 0px;
+      box-sizing: border-box;
+    }
+  }
+}
+
+.el-table__expand-icon {
+  -webkit-transform: rotate(0deg);
+  transform: rotate(0deg);
+}
+.el-table__expand-column {
+  .cell {
+    height: 25px;
+  }
+}
+.el-table__expand-icon .el-icon-arrow-right:before {
+  content: "\e6d9";
+  border: 1px solid #ccc;
+  padding: 2px;
+}
+.el-table__expand-icon--expanded .el-icon-arrow-right:before {
+  content: "\e6d8";
+}
+
+.el-table__header-wrapper {
+  .el-checkbox__inner {
+    // display: none;
+  }
+}
+.dialog-footer {
+  margin-top: 30px;
+}
+
+.kylin-form {
+  width: 80%;
+  margin: 0 auto;
+}
+
+.kylin-delete {
+  color: red;
+  &:hover {
+    color: red !important;
+    background-image: none;
+  }
+  &:focus {
+    color: red !important;
+    background-image: none;
+  }
+}
+
+.row-modify {
+  background-color: #ffdddd !important;
+  &:hover > td {
+    background-color: #ffdddd !important;
+  }
+}
+.row-hidden {
+  display: none;
+}
+
+
+.scroll-container {
+  .el-scrollbar__wrap {
+    scrollbar-width: none;
+  }
+}
+
+.card-header,.configure-confirm-table {
+    .kylin-compare-radio .el-radio-button .el-radio-button__inner {
+        height: 32px;
+        line-height: 32px;
+    }
+}
+
+.system-configure-search .el-tag {
+    margin-right: 5px;
+}
\ No newline at end of file
diff --git a/vue/utils/crypto.js b/vue/utils/crypto.js
index ba0a2084..7fc67a7d 100644
--- a/vue/utils/crypto.js
+++ b/vue/utils/crypto.js
@@ -24,7 +24,7 @@ function PaddingLeft(key, length){
     if (l < length) {
         pkey = new Array(length - l + 1).join('0') + pkey;
     }else if (l > length){
-        pkey = pkey.slice(length);
+        pkey = pkey.slice(0, length);
     }
     return pkey;
 }
\ No newline at end of file
diff --git a/vue/utils/test.js b/vue/utils/test.js
new file mode 100644
index 00000000..65de04d8
--- /dev/null
+++ b/vue/utils/test.js
@@ -0,0 +1,46 @@
+onValueChanged(e, t) { 
+  var n = { [e]: t }; 
+  if ("storagePoolName" == e && 
+  (n.diskFileFormat = this.getDefaultVolumeFormat(this.props.storagePools.find(e => e.name == t))), 
+  "storagePoolName" === e && this.state.mode === Ha && (n.existingVolumeName = this.getDefaultVolumeName(t)), 
+  "mode" === e && t === Ha) { 
+    var r = this.state.storagePoolName; 
+    r && (n.existingVolumeName = this.getDefaultVolumeName(r)) 
+  } this.setState(n) 
+}
+
+onValueChanged(e, t) { 
+  var n = { [e]: t }; 
+  if (this.setState(n), "networkType" == e) { 
+    var r = !1; 
+    if ("network" == t) { 
+      var i = this.props.networks.map(e => e.name); i.length > 0 ? this.setState({ networkSource: i[0] }) : (this.setState({ networkSource: void 0 }), r = !0) 
+    } this.setState({ saveDisabled: r }) 
+  } 
+}
+
+onValueChanged(e, t) { 
+  var n = {}; 
+  if ("memory" == e) { 
+    var r = Object(g.c)(t, this.state.memoryUnit, "KiB"); 
+    r <= this.state.maxMemory ? n.memory = r : r > this.state.maxMemory && "running" != this.props.vm.state && (n.memory = r, n.maxMemory = r) 
+  } else if ("maxMemory" == e) { 
+    var i = Object(g.c)(t, this.state.maxMemoryUnit, "KiB"); 
+    i < this.state.nodeMaxMemory && (n.maxMemory = i) 
+  } else "memoryUnit" != e && "maxMemoryUnit" != e || (n = { [e]: t }); 
+  this.setState(n) 
+}
+
+onValueChanged(e, t) { 
+  var n = { [e]: t }; 
+  this.setState(n)
+}
+
+onValueChanged(e, t) { 
+  if ("source" == e) { 
+    var n = Object.keys(t)[0], r = t[Object.keys(t)[0]]; 
+    this.setState({ source: Object.assign({}, this.state.source, { [n]: r }) }) 
+  } else "type" == e ? 
+  ("disk" == t ? this.setState({ source: Object.assign({}, this.state.source, { format: "dos" }) }) : 
+  this.setState({ source: Object.assign({}, this.state.source, { format: void 0 }) }), this.setState({ [e]: t })) : this.setState({ [e]: t }) 
+}
\ No newline at end of file
diff --git a/vue/views/Cluster/Cluster.vue b/vue/views/Cluster/Cluster.vue
index f90c3b8c..4bfa9217 100644
--- a/vue/views/Cluster/Cluster.vue
+++ b/vue/views/Cluster/Cluster.vue
@@ -46,14 +46,6 @@
         :getData="getClusters"
       >
         <template v-slot:table>
-          <el-table-column
-            prop="id"
-            v-model="multipleSelection"
-            type="selection"
-            width="55"
-          >
-          </el-table-column>
-
           <el-table-column label="IP" width="90">
             <template slot-scope="scope">
               <router-link
diff --git a/vue/views/Cluster/form/addForm.vue b/vue/views/Cluster/form/addForm.vue
index 9e610582..762dba29 100644
--- a/vue/views/Cluster/form/addForm.vue
+++ b/vue/views/Cluster/form/addForm.vue
@@ -5,7 +5,6 @@
         :rules="rules"
         ref="addIPForm"
         label-width="100px"
-        class="kylin-form"
       >
         <el-form-item label="IP:" prop="ip">
           <el-input
diff --git a/vue/views/UserManager/UserMan.vue b/vue/views/UserManager/UserMan.vue
index 1d30327c..8587a8c4 100644
--- a/vue/views/UserManager/UserMan.vue
+++ b/vue/views/UserManager/UserMan.vue
@@ -1,105 +1,190 @@
 <template>
-  <div>
+  <div v-loading="loading">
     <div style="display: flex;justify-content: space-between" class="search-form">
       <div>
-        <el-input placeholder="请输入用户名或邮箱名进行搜索..." prefix-icon="el-icon-search"
+        <el-input placeholder="请输入手机号或邮箱名进行搜索..." prefix-icon="el-icon-search"
                   clearable
-                  @clear="initEmps"
+                  disabled
                   style="width: 350px;margin-right: 10px" v-model="keyword"
-                  @keydown.enter.native="initEmps" :disabled="showAdvanceSearchView"></el-input>
-        <el-button icon="el-icon-search" type="primary" @click="initEmps" :disabled="showAdvanceSearchView">
+                  @keydown.enter.native="searchUser"></el-input>
+        <el-button icon="el-icon-search" type="primary" disabled @click="searchUser">
           搜索
         </el-button>
       </div>
       <div>
-        <el-button type="primary" icon="el-icon-plus" @click="showAddEmpView">
-          添加用户
-        </el-button>
-        <el-button type="success" @click="exportData" icon="el-icon-download">
-          导出用户数据
+        <el-button type="primary" @click="handleCreate">
+          添加
         </el-button>
+        <el-popconfirm 
+          title="确定删除此用户？"
+          cancel-button-type="default"
+          confirm-button-type="danger"
+          @confirm="handleDelete">
+          <el-button slot="reference" type="danger"> 删除 </el-button>
+        </el-popconfirm>
+        <el-button type="success" @click="handleExport"> 导出 </el-button>
         <el-upload
           :show-file-list="false"
           :before-upload="beforeUpload"
           :on-success="onSuccess"
           :on-error="onError"
-          :disabled="importDataDisabled"
+          name="upload"
+          accept="xlsx"
           style="display: inline-flex;margin-right: 8px"
-          action="/employee/basic/import">
-          <el-button :disabled="importDataDisabled" type="success" icon="el-icon-download">
-            {{importDataBtnText}}批量添加用户
-          </el-button>
+          action="/user/import">
+          <el-button type="success"> 批量导入 </el-button>
         </el-upload>
       </div>
     </div>
-    <el-table
-      :data="tableData"
-      style="width: 100%"
-      :row-class-name="tableRowClassName">
-      <el-table-column
-        prop="id"
-        label="编号"
-        width="80">
-      </el-table-column>
-      <el-table-column
-        prop="username"
-        label="用户名"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="phoneNum"
-        label="手机号"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="email"
-        label="邮箱">
-      </el-table-column>
-      <el-table-column
-        prop="enable"
-        label="是否启用"
-        width="80">
-      </el-table-column>
-    </el-table>
+    <ky-table
+      :getData="getUsers"
+      ref="table"
+      id="exportTab"
+    >
+      <template v-slot:table>
+        <el-table-column prop="ID" label="编号" width="60">
+        </el-table-column>
+        <el-table-column  prop="username" label="用户名" width="160">
+        </el-table-column>
+        <el-table-column prop="phone" label="手机号" width="120">
+        </el-table-column>
+        <el-table-column  prop="email" label="邮箱">
+        </el-table-column>
+        <el-table-column prop="enable" label="启用" width="80">
+          <template slot-scope="scope">
+            {{scope.row.enable === true ? "是" : "否"}}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="180">
+          <template slot-scope="scope">
+            <el-button class="editBtn" type="primary" plain size="mini" @click="handleEdit(scope.row)">编辑</el-button>
+            <el-button class="editBtn" type="primary" plain size="mini" @click="handleReset(scope.row.email)">重置密码</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </ky-table>
+    
+    <el-dialog 
+      :title="title"
+      :before-close="handleClose" 
+      :visible.sync="display" 
+      width="560px"
+    >
+     <add-form v-if="type === 'create'" @click="handleClose"></add-form>
+     <update-form :row="rowData" v-if="type === 'update'" @click="handleClose"></update-form>
+    </el-dialog>
+
   </div>
 </template>
 
 <script>
+import FileSaver from 'file-saver'
+import XLSX from 'xlsx'
+import AddForm from "./form/addForm.vue"
+import UpdateForm from "./form/updateForm.vue"
+import kyTable from "@/components/KyTable";
+import { getUsers, delUser, resetPwd, } from "@/request/user"
 export default {
-  name: "UsersMan",
+  components: {
+    kyTable,
+    AddForm,
+    UpdateForm,
+  },
   data() {
     return {
-      showAdvanceSearchView: true,
-      importDataDisabled: false,
+      loading: false,
+      display: false,
+      isDelete: true,
+      title: "",
+      type: "",
       keyword: '',
-      importDataBtnText: '',
-      tableData: [
-        {"id":"1","username":"fairy","phoneNum":"12345678123","email":"12345678123@123.com","enable":true}
-        ]
+      rowData: {},
+      tableData: []
     }
   },
   methods: {
-    initEmps() {
-      console.log("待写入1");
+    getUsers,
+    handleClose(type) {
+      this.display = false;
+      this.title = "";
+      this.type = "";
+      if(type === 'success') {
+        this.refresh();
+      }
+    }, 
+    refresh(){
+      this.$refs.table.handleSearch();
     },
-    showAddEmpView() {
-      console.log("待写入2")
+    searchUser() {
+      console.log("待写入按关键子查找用户");
     },
-    exportData() {
-      console.log("待写入3")
+    handleCreate() {
+      this.display = true;
+      this.title = "新增用户";
+      this.type = "create";
     },
-    beforeUpload() {
-      console.log("待写入4")
+    handleEdit(row) {
+      this.rowData = row;
+      this.display = true;
+      this.title = "编辑用户";
+      this.type = "update";
     },
-    onSuccess() {
-      console.log("待写入5")
+    handleReset(email) {
+      resetPwd({email: email}).then(res => {
+        if(res.code == 200){
+          this.$message.success("重置密码成功")
+          this.refresh();
+        } else {
+          this.$message.error(res.msg);
+        }
+      })
     },
-    onError() {
-      console.log("待写入3")
+    handleDelete() {
+      let delDatas = [];
+      this.$refs.table.selectRow.rows.forEach(item => {
+        delDatas.push(item.email);
+      });
+      delUser({email: delDatas[0]}).then(res => {
+        if(res.status === 200) {
+          this.$message.success(res.data.msg);
+        } else {
+          this.$message.error(res.data.msg);
+        }
+        this.refresh();
+      })
+
     },
-    tableRowClassName() {
-      console.log("待写入5")
+    handleExport() {
+      const xlsxParam = { raw: true }; 
+      const t2b = XLSX.utils.table_to_book(document.querySelector('#exportTab'), xlsxParam);
+      const userExcel = XLSX.write(t2b, { bookType: 'xlsx', bookSST: true, type: 'array' });
+      try {
+        FileSaver.saveAs(
+          new Blob([userExcel], {
+            type: 'application/octet-stream' 
+            }), 'userInfo.xlsx');
+      } catch (e) {
+          console.log(e, userExcel);
+          this.$message.error("导出失败")
+      }
+      return userExcel;
     },
+    beforeUpload(file) {
+      const fileData = file.name.split(".");
+      if (fileData[fileData.length-1] !== 'xlsx') {
+        this.$message.error('请上传xlsx格式表格!');
+        return false;
+      }
+      return true;
+    },
+    onSuccess() {
+      this.$message.success("导入成功");
+      this.refresh();
+    },
+    onError() {
+      this.$message.success("导入失败");
+      this.refresh();
+    }
   }
 }
 </script>
@@ -115,4 +200,7 @@ export default {
 .el-table .success-row {
   background: #f0f9eb;
 }
+.editBtn {
+  padding: 10px;
+}
 </style>
diff --git a/vue/views/UserManager/form/addForm.vue b/vue/views/UserManager/form/addForm.vue
new file mode 100644
index 00000000..fa1d32a5
--- /dev/null
+++ b/vue/views/UserManager/form/addForm.vue
@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <el-form :model="form" :rules="rules" ref="form" label-width="100px">
+      <el-form-item label="用户名:" prop="username">
+        <el-input
+          class="ipInput"
+          type="text"
+          size="medium"
+          v-model="form.username"
+          autocomplete="off"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item label="密码:" prop="password">
+        <el-input
+          class="ipInput"
+          controls-position="right"
+          v-model="form.password"
+          autocomplete="off"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="手机号:" prop="phone">
+        <el-input
+          class="ipInput"
+          controls-position="right"
+          v-model="form.phone"
+          autocomplete="off"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="邮箱:" prop="email">
+        <el-input
+          class="ipInput"
+          controls-position="right"
+          v-model="form.email"
+          autocomplete="off"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+
+    <div class="dialog-footer">
+      <el-button @click="handleCancel">取 消</el-button>
+      <el-button type="primary" @click="handleAdd">确 定</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addUser } from "@/request/user";
+import { checkEmail, checkPhone } from "@/rules/check"
+export default {
+  data() {
+    return {
+      form: {
+        username: "",
+        password: "",
+        phone: "",
+        email: "",
+      },
+      rules: {
+        username: [
+          { 
+            required: true, 
+            message: "请输入用户名",
+            trigger: "blur" 
+          }],
+        password: [
+          { 
+            required: true, 
+            message: "请输入密码",
+            trigger: "blur" 
+          }],
+        phone: [
+          {
+            validator: checkPhone,
+            message: "请输入正确的邮箱格式",
+            trigger: "change",
+          }],
+        email: [
+          {
+            required: true,
+            message: "请输入邮箱",
+            trigger: "blur",
+          },
+          {
+            validator: checkEmail,
+            message: "请输入正确的邮箱格式",
+            trigger: "change",
+          }],
+      },
+    };
+  },
+  methods: {
+    handleCancel() {
+      this.$refs.form.resetFields();
+      this.$emit("click");
+    },
+    handleAdd() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          addUser(this.form)
+            .then((res) => {
+              if (res.data.code === 200) {
+                this.$emit("click","success");
+                this.$message.success(res.data.msg);
+                this.$refs.form.resetFields();
+              } else {
+                this.$message.error(res.data.error);
+              }
+            })
+            .catch((res) => {
+              this.$message.error("添加失败，请检查输入内容");
+            });
+        } else {
+          this.$message.error("添加失败，请检查输入内容");
+          return false;
+        }
+      });
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue/views/UserManager/form/updateForm.vue b/vue/views/UserManager/form/updateForm.vue
new file mode 100644
index 00000000..02a680b6
--- /dev/null
+++ b/vue/views/UserManager/form/updateForm.vue
@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <el-form :model="form" :rules="rules" ref="form" label-width="100px">
+      <el-form-item label="用户名:" prop="username">
+        <el-input
+          class="ipInput"
+          type="text"
+          size="medium"
+          :disabled="disabled"
+          v-model="form.username"
+          autocomplete="off"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="手机号:" prop="phone">
+        <el-input
+          class="ipInput"
+          controls-position="right"
+          v-model="form.phone"
+          autocomplete="off"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="邮箱:" prop="email">
+        <el-input
+          class="ipInput"
+          controls-position="right"
+          v-model="form.email"
+          autocomplete="off"
+          :disabled="disabled"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+
+    <div class="dialog-footer">
+      <el-button @click="handleCancel">取 消</el-button>
+      <el-button type="primary" @click="handleUpdate">确 定</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { updateUser } from "@/request/user";
+import { checkEmail, checkPhone } from "@/rules/check"
+export default {
+  props: {
+    row: {
+      type: Object,
+      default: {}
+    }
+  },
+  data() {
+    return {
+      disabled: true,
+      form: {
+        username: "",
+        phone: "",
+        email: "",
+      },
+      rules: {
+        username: [
+          { 
+            required: true, 
+            message: "请输入用户名",
+            trigger: "blur" 
+          }],
+        phone: [
+          {
+            validator: checkPhone,
+            message: "请输入正确的邮箱格式",
+            trigger: "change",
+          }],
+        email: [
+          {
+            required: true,
+            message: "请输入邮箱",
+            trigger: "blur",
+          },
+          {
+            validator: checkEmail,
+            message: "请输入正确的邮箱格式",
+            trigger: "change",
+          }],
+      },
+    };
+  },
+  mounted() {
+    this.form.username = this.row.username;
+    this.form.phone = this.row.phone;
+    this.form.email = this.row.email;
+  },
+  methods: {
+    handleCancel() {
+      this.$refs.form.resetFields();
+      this.$emit("click");
+    },
+    handleUpdate() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          updateUser(this.form)
+            .then((res) => {
+              if (res.data.code === 200) {
+                this.$emit("click","success");
+                this.$message.success(res.data.msg);
+                this.$refs.form.resetFields();
+              } else {
+                this.$message.error(res.data.error);
+              }
+            })
+            .catch((res) => {
+              this.$message.error("添加失败，请检查输入内容");
+            });
+        } else {
+          this.$message.error("添加失败，请检查输入内容");
+          return false;
+        }
+      });
+    },
+  },
+};
+</script>
\ No newline at end of file
-- 
Gitee