From 56f954e35472a2ff4e76ebaa0687edcf5d291746 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=82=93=E6=B4=81?= <209192278@qq.com> Date: Fri, 22 Dec 2023 23:11:01 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E9=82=93=E6=B4=81:=20=E7=94=A8=E6=88=B7?= =?UTF-8?q?=E7=AE=A1=E7=90=86=E6=8E=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/tunnel.js | 8 + src/api/user.js | 42 +++++ src/assets/styles/index.scss | 110 +++++++----- src/router/index.js | 2 +- src/views/tunnel/index.vue | 7 +- src/views/user/index.vue | 326 ++++++++++++++++++++++++----------- vite.config.js | 21 ++- 7 files changed, 372 insertions(+), 144 deletions(-) create mode 100644 src/api/tunnel.js create mode 100644 src/api/user.js diff --git a/src/api/tunnel.js b/src/api/tunnel.js new file mode 100644 index 0000000..c06d5d4 --- /dev/null +++ b/src/api/tunnel.js @@ -0,0 +1,8 @@ +import request from '@/utils/request.js' + +export const getTunnelOption = (siteId) => { + return request({ + url: `/tunnel/tunnel/option/${siteId}`, + method: 'get' + }) +} diff --git a/src/api/user.js b/src/api/user.js new file mode 100644 index 0000000..7fb0961 --- /dev/null +++ b/src/api/user.js @@ -0,0 +1,42 @@ +import request from '@/utils/request.js' + +export const getUser = (params) => { + return request({ + url: '/admin/user/tunnel', + method: 'get', + params + }) +} +export const getUserDetail = (userId) => { + return request({ + url: `/admin/user/info/${userId}`, + method: 'get' + }) +} +export const editUser = (data) => { + return request({ + url: '/admin/user', + method: 'put', + data + }) +} +export const addUser = (data) => { + return request({ + url: '/admin/user', + method: 'post', + data + }) +} +export const deleteUser = (userId) => { + return request({ + url: `/admin/user/${userId}`, + method: 'delete' + }) +} + +export const getRoleOption = () => { + return request({ + url: '/admin/role/option', + method: 'get' + }) +} diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 5d87f08..aaeb918 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -12,7 +12,7 @@ -khtml-user-select: none; /*早期浏览器*/ user-select: none; font-family: "MicrosoftYaHei", "微软雅黑", "Helvetica Neue", Helvetica, Arial, - sans-serif; + sans-serif; } body { @@ -97,6 +97,7 @@ body, .current-site { display: flex; align-items: center; + > span:first-child { color: #f7b500; margin-right: 20px; @@ -486,43 +487,72 @@ body, background: #072247 !important; border: 1px solid #0F82AF !important; } - .el-popper { - max-width: 202px !important; + max-width: 200px !important; box-sizing: border-box; } - .el-popper__arrow::before { display: none; } - -.el-select-dropdown { - width: 200px !important; +.el-select-dropdown{ + width: 200px!important; } - -.el-select-dropdown__item { - color: #fff !important; -} - -.el-select-dropdown__item.hover { - background-color: #072247 !important; -} - -.el-select-dropdown__item:hover { - background-color: #072247 !important; - color: #08B7B8 !important; -} - -.el-select-dropdown__item.selected { - color: #08B7B8 !important; -} - -.el-select-dropdown__list { - .el-select-dropdown__item:first-child { +.el-select-dropdown__item{ + >span{ color: #FFFFFF; + } +} +.el-select .el-input .el-select__caret { + font-size: 35px!important; +} +.el-select-dropdown__item.hover,.el-select-dropdown__item:hover{ + background-color: #064B66!important; + width:198px!important; +} +.el-select-dropdown.is-multiple .el-select-dropdown__item.selected{ + background-color: #064B66!important; + width:200px!important; +} +.el-select-tags-wrapper{ + .el-tag{ + padding: 28px 20px!important; + font-size: 35px; + .el-icon{ + width: 40px; + height: 40px; + font-size: 40px!important; + } + } +} +.current-site { + .el-select-dropdown { + width: 200px !important; + } - &:hover { - color: #08B7B8 !important; + .el-select-dropdown__item { + color: #fff !important; + } + + .el-select-dropdown__item.hover { + background-color: #072247 !important; + } + + .el-select-dropdown__item:hover { + background-color: #072247 !important; + color: #08B7B8 !important; + } + + .el-select-dropdown__item.selected { + color: #08B7B8 !important; + } + + .el-select-dropdown__list { + .el-select-dropdown__item:first-child { + color: #FFFFFF; + + &:hover { + color: #08B7B8 !important; + } } } } @@ -542,8 +572,8 @@ input[type="number"] { width: 40px !important; height: 40px !important; border-radius: 25px !important; - border: 4px solid #05FEFF!important; - background-color: transparent!important; + border: 4px solid #05FEFF !important; + background-color: transparent !important; } .el-checkbox__input.is-checked .el-checkbox__inner { @@ -559,11 +589,11 @@ input[type="number"] { //border-top: 0; border-radius: 25px; top: 6px; - left:6px; + left: 6px; //left: 12px; font-size: 30px; background: #05FEFF; - border-color: transparent!important; + border-color: transparent !important; } //取消 确定按钮 @@ -599,11 +629,13 @@ input[type="number"] { font-size: 38px; } } -.el-pagination.is-background .btn-prev:disabled{ - background-color: transparent!important; - color: #60DDDE!important; + +.el-pagination.is-background .btn-prev:disabled { + background-color: transparent !important; + color: #60DDDE !important; } -.el-pagination.is-background .btn-next:disabled{ - background-color: transparent!important; - color: #60DDDE!important; + +.el-pagination.is-background .btn-next:disabled { + background-color: transparent !important; + color: #60DDDE !important; } diff --git a/src/router/index.js b/src/router/index.js index a83d828..1a9f2fd 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -51,7 +51,7 @@ const routes = [ } }, { - path: '/user', + path: '/user/:siteId(\\d+)', name: 'user', component: () => import('@/views/user/index.vue'), meta: { diff --git a/src/views/tunnel/index.vue b/src/views/tunnel/index.vue index 08d166b..3811102 100644 --- a/src/views/tunnel/index.vue +++ b/src/views/tunnel/index.vue @@ -85,6 +85,7 @@ const selectIndex = ref(-1); const showFan = ref(false); const drawerLeft = ref(true); const drawerRight = ref(true); +const currentSiteId = ref(0); const currentSite = ref(""); const siteList = ref([]) const currentUser = ref(""); @@ -123,6 +124,7 @@ const getOtherInfo = () => { getLargeScreenInfo().then((res) => { if (res?.code === 1000) { routeList.value = res.data.routeList + currentSiteId.value = res.data.siteOption[0].value currentSite.value = res.data.siteOption[0].label siteList.value = res.data.siteOption tunnelId.value = res.data.tunnelOption[0].value @@ -165,13 +167,12 @@ const manageSelect = (index) => { if (index === 0) { router.push("/site"); } else if (index === 1) { - router.push("/tunnel/1"); + router.push("/tunnel/"+tunnelId.value); } else if (index === 2) { - router.push("/user"); + router.push("/user/"+currentSiteId.value); } }; const handleCommand = (item) => { - console.log('commads', item) currentSite.value = item.label getTunnel(item.value) } diff --git a/src/views/user/index.vue b/src/views/user/index.vue index 78e78d8..c807caa 100644 --- a/src/views/user/index.vue +++ b/src/views/user/index.vue @@ -7,10 +7,10 @@
-
- 全选 -
-
+ + + +
删除
@@ -22,26 +22,29 @@
- 搜索 + 搜索
用户管理
-
添加用户
+
添加用户
- - - - + + + + -