From f577c196420715d92a4dfbb11b41a2f311d0cf68 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期五, 28 一月 2022 15:19:14 +0800
Subject: [PATCH] 设备权限管理
---
public/images/settings/授权管理.png | 0
src/pages/settings/components/AuthorizationManagement.vue | 132 ++++++++++++++
src/pages/settings/components/AuthorizationSetting.vue | 200 +++++++++++++++++++++
src/pages/settings/views/Authorization.vue | 23 ++
src/pages/settings/components/UnbindBox.vue | 145 ++++++++++++++++
src/pages/settings/index/index.vue | 2
6 files changed, 494 insertions(+), 8 deletions(-)
diff --git "a/public/images/settings/\346\216\210\346\235\203\347\256\241\347\220\206.png" "b/public/images/settings/\346\216\210\346\235\203\347\256\241\347\220\206.png"
new file mode 100644
index 0000000..da7550c
--- /dev/null
+++ "b/public/images/settings/\346\216\210\346\235\203\347\256\241\347\220\206.png"
Binary files differ
diff --git a/src/pages/settings/components/AuthorizationManagement.vue b/src/pages/settings/components/AuthorizationManagement.vue
index fb78169..82bf597 100644
--- a/src/pages/settings/components/AuthorizationManagement.vue
+++ b/src/pages/settings/components/AuthorizationManagement.vue
@@ -1,10 +1,136 @@
<template>
- <div class="AuthorizationManagement">AuthorizationManagement</div>
+ <div class="AuthorizationManagement">
+ <div class="content">
+ <div class="title">璁惧鎺堟潈绠＄悊</div>
+
+ <div class="formArea">
+ <div class="formHeader">
+ <div class="headerItem">鎺堟潈璁惧ID</div>
+ <div class="headerItem">鎺堟潈鏃堕棿</div>
+ <div class="headerItem">瑙ｉ櫎鎺堟潈</div>
+ </div>
+
+ <div class="formBody">
+ <div
+ class="formItem"
+ v-for="(item, index) in authorizationList"
+ :key="index"
+ >
+ <div class="id">
+ {{ item.id }}
+ </div>
+
+ <div class="time">
+ {{ item.time }}
+ </div>
+
+ <div class="unbind iconfont" @click="isShowUnbindBox = true">
+ 
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <UnbindBox
+ v-if="isShowUnbindBox"
+ @close="isShowUnbindBox = false"
+ ></UnbindBox>
+ </div>
</template>
<script>
-export default {};
+import UnbindBox from "@/pages/settings/components/UnbindBox";
+
+export default {
+ data() {
+ return {
+ isShowUnbindBox: false,
+ authorizationList: [
+ {
+ id: "DSVAD010120190621",
+ time: "2019-08-02 12:43:43",
+ },
+ {
+ id: "DSVAD010120190621",
+ time: "2019-08-02 12:43:43",
+ },
+ {
+ id: "DSVAD010120190621",
+ time: "2019-08-02 12:43:43",
+ },
+ {
+ id: "DSVAD010120190621",
+ time: "2019-08-02 12:43:43",
+ },
+ ],
+ };
+ },
+ components: {
+ UnbindBox,
+ },
+};
</script>
-<style>
+<style lang="scss" scoped>
+.AuthorizationManagement {
+ position: relative;
+
+ .content {
+ width: 456px;
+ margin: 0 auto;
+ }
+
+ .title {
+ height: 48px;
+ font-size: 16px;
+ line-height: 48px;
+ color: #4f4f4f;
+ font-weight: bold;
+ background: #f2f2f7;
+ border-radius: 8px;
+ margin-bottom: 4px;
+ }
+
+ .formArea {
+ overflow: hidden;
+ margin-top: 4px;
+ background: #f2f2f7;
+
+ .formHeader {
+ margin: 8px 30px 10px 30px;
+ display: flex;
+ justify-content: space-between;
+ font-size: 14px;
+ color: #666;
+ }
+
+ .formBody {
+ padding-bottom: 8px;
+ border-radius: 8px;
+ }
+
+ .formItem {
+ box-sizing: border-box;
+ padding-left: 10px;
+ padding-right: 42px;
+ margin: 0 20px 8px 20px;
+ display: flex;
+ height: 32px;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 12px;
+ color: #333;
+ font-weight: 700;
+ background-color: #fff;
+ border-radius: 20px;
+
+ .unbind {
+ font-size: 24px;
+ color: rgb(78, 148, 255);
+ cursor: pointer;
+ }
+ }
+ }
+}
</style>
\ No newline at end of file
diff --git a/src/pages/settings/components/AuthorizationSetting.vue b/src/pages/settings/components/AuthorizationSetting.vue
index 2b19384..5c92711 100644
--- a/src/pages/settings/components/AuthorizationSetting.vue
+++ b/src/pages/settings/components/AuthorizationSetting.vue
@@ -1,10 +1,204 @@
<template>
- <div class="AuthorizationSetting">AuthorizationSetting</div>
+ <div class="AuthorizationSetting">
+ <div class="content">
+ <div class="title">璁惧鎺堟潈閰嶇疆</div>
+
+ <el-form
+ :model="settingForm"
+ :rules="rules"
+ ref="joinForm"
+ class="join-form"
+ >
+ <el-form-item>
+ <div class="row">
+ <div class="item-title">璁惧鎺堟潈绠＄悊鏂瑰紡</div>
+ <div class="inputContain">
+ <el-select
+ v-model="settingForm.authorizationType"
+ placeholder="璇烽�夋嫨"
+ size="small"
+ :popper-append-to-body="false"
+ >
+ <el-option
+ v-for="item in typeOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ ></el-option>
+ </el-select>
+ </div>
+ </div>
+ </el-form-item>
+
+ <el-form-item prop="password" v-if="settingForm.authorizationType == 1">
+ <div class="row">
+ <div class="item-title">鎺堟潈瀵嗛挜</div>
+ <div class="inputContain">
+ <el-input
+ v-model="settingForm.password"
+ placeholder="璇疯緭鍏�6浣嶆巿鏉冨瘑閽�"
+ maxlength="6"
+ show-password
+ ></el-input>
+ </div>
+ </div>
+ </el-form-item>
+ </el-form>
+
+ <div class="save">淇濆瓨</div>
+ </div>
+ </div>
</template>
<script>
-export default {};
+export default {
+ data() {
+ return {
+ settingForm: {
+ authorizationType: 0,
+ password: "",
+ },
+ typeOptions: [
+ {
+ label: "濮嬬粓鍏佽",
+ value: 0,
+ },
+ {
+ label: "瀵嗙爜鏍￠獙",
+ value: 1,
+ },
+ ],
+ rules: {
+ password: [
+ { min: 6, max: 6, message: "闀垮害涓�6涓瓧绗�", trigger: "blur" },
+ ],
+ },
+ };
+ },
+};
</script>
-<style>
+<style lang="scss" scoped>
+.AuthorizationSetting {
+ position: relative;
+
+ .content {
+ width: 456px;
+ margin: 0 auto;
+ }
+
+ .title {
+ height: 48px;
+ font-size: 16px;
+ line-height: 48px;
+ color: #4f4f4f;
+ font-weight: bold;
+ background: #f2f2f7;
+ border-radius: 8px;
+ margin-bottom: 4px;
+ }
+
+ .row {
+ margin: 0 auto;
+ height: 48px;
+ margin-bottom: 4px;
+ background-color: #f2f2f7;
+ border-radius: 8px;
+
+ line-height: 48px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background: #f2f2f7;
+ border-radius: 8px;
+ padding: 0 20px;
+
+ .item-title {
+ font-size: 14px;
+ color: #4f4f4f;
+ font-weight: 700;
+ }
+
+ .el-select ::v-deep {
+ width: 280px;
+ height: 32px;
+
+ input {
+ border-radius: 20px;
+ border-color: #fff;
+ padding-left: 20px;
+ font-size: 12px;
+ color: #333;
+ font-weight: 700;
+ }
+
+ .popper__arrow,
+ .popper__arrow::after {
+ display: none;
+ }
+
+ .el-select-dropdown {
+ top: 30px;
+ height: 84px;
+ box-shadow: 0px 4px 12px rgba(5, 95, 230, 0.25);
+ border-radius: 8px;
+
+ .el-select-dropdown__item {
+ font-size: 12px;
+ font-weight: 400;
+ color: #333;
+
+ &.selected {
+ span {
+ color: #4e94ff;
+ }
+ }
+ }
+ }
+ }
+
+ .el-input ::v-deep {
+ width: 280px;
+ height: 32px;
+
+ input {
+ height: 32px;
+ border-radius: 20px;
+ border-color: #fff;
+ padding-left: 20px;
+ font-size: 12px;
+ color: #333;
+ font-weight: 700;
+
+ &::-webkit-input-placeholder {
+ /* WebKit browsers */
+ color: #828282;
+ font-weight: normal;
+ font-size: 12px;
+ }
+ }
+ }
+ }
+
+ .save {
+ position: absolute;
+ top: 375px;
+ left: 50%;
+ margin-left: -94px;
+ width: 188px;
+ height: 40px;
+ background: #4e94ff;
+ border-radius: 25px;
+ font-weight: bold;
+ font-size: 16px;
+ line-height: 40px;
+ color: #fff;
+ text-align: center;
+ cursor: pointer;
+ }
+
+ .el-form-item {
+ margin-bottom: 0;
+ }
+}
</style>
\ No newline at end of file
diff --git a/src/pages/settings/components/UnbindBox.vue b/src/pages/settings/components/UnbindBox.vue
new file mode 100644
index 0000000..30d4f57
--- /dev/null
+++ b/src/pages/settings/components/UnbindBox.vue
@@ -0,0 +1,145 @@
+<template>
+ <div class="UnbindBox">
+ <div class="iconfont warn"></div>
+ <div class="title">璇风‘璁ゆ槸鍚﹁В闄よ澶囨巿鏉冿紵</div>
+ <div class="des">濡傞渶缁х画锛岃杈撳叆绠＄悊鍛樺瘑鐮侊紝鐒跺悗鐐瑰嚮鈥滅‘璁も�濇寜閽�</div>
+ <el-input
+ placeholder="璇疯緭鍏ョ鐞嗗憳瀵嗙爜"
+ v-model="password"
+ show-password
+ :class="{ isWrong: isWrong }"
+ ></el-input>
+ <div class="wrong" v-if="isWrong">瀵嗙爜杈撳叆閿欒锛岃閲嶆柊杈撳叆</div>
+
+ <div class="btns">
+ <div class="cancel" @click="close">鍙栨秷</div>
+ <div class="confirm">纭</div>
+ </div>
+
+ <div class="close iconfont" @click="close"></div>
+ </div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ isWrong: false,
+ password: "",
+ };
+ },
+ methods: {
+ close() {
+ this.$emit("close");
+ },
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+.UnbindBox {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ margin-top: -166px;
+ margin-left: -210px;
+ width: 420px;
+ height: 332px;
+ text-align: center;
+ background-color: #fff;
+
+ .warn {
+ margin-top: 40px;
+ margin-bottom: 10px;
+ font-size: 40px;
+ color: rgb(254, 109, 104);
+ }
+
+ .title {
+ margin-bottom: 20px;
+ font-weight: bold;
+ font-size: 16px;
+ color: #4f4f4f;
+ }
+
+ .des {
+ text-align: start;
+ margin: 0 auto;
+ margin-bottom: 6px;
+ width: 360px;
+ font-size: 12px;
+ color: #666666;
+ }
+
+ .el-input {
+ width: 360px;
+ height: 40px;
+
+ ::v-deep input {
+ border-color: #d4d6d9;
+ border-radius: 20px;
+
+ &::-webkit-input-placeholder {
+ font-size: 12px;
+ color: #999999;
+ }
+ }
+
+ &.isWrong ::v-deep input {
+ border-color: #fe6d68;
+ }
+ }
+
+ .wrong {
+ width: 360px;
+ text-align: start;
+ margin: 0 auto;
+ margin-top: 4px;
+ font-size: 12px;
+ color: #fe6d68;
+ }
+
+ .btns {
+ display: flex;
+ justify-content: center;
+ margin: 0 auto;
+ margin-top: 50px;
+ width: 360px;
+
+ .cancel {
+ width: 175px;
+ height: 40px;
+ background: #e0e0e0;
+ border-radius: 25px;
+
+ font-weight: bold;
+ font-size: 16px;
+ line-height: 40px;
+ color: #333333;
+ cursor: pointer;
+ }
+
+ .confirm {
+ width: 175px;
+ height: 40px;
+ background: #4e94ff;
+ border-radius: 25px;
+
+ font-weight: bold;
+ font-size: 16px;
+ line-height: 40px;
+ color: #fff;
+ cursor: pointer;
+ }
+ }
+
+ .close {
+ position: absolute;
+ top: 12px;
+ right: 12px;
+ font-size: 12px;
+ color: #333333;
+ cursor: pointer;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/settings/index/index.vue b/src/pages/settings/index/index.vue
index 61e1bc0..e388418 100644
--- a/src/pages/settings/index/index.vue
+++ b/src/pages/settings/index/index.vue
@@ -836,7 +836,7 @@
{
name: "鎺堟潈绠＄悊",
icon: "\ue7e9;",
- imgUrl: "/images/settings/璁惧淇℃伅.png",
+ imgUrl: "/images/settings/鎺堟潈绠＄悊.png",
blackIcon: "/images/settings/榛戣壊涓�绾con/鎺堟潈绠＄悊.png",
whiteIcon: "/images/settings/鐧借壊涓�绾con/鎺堟潈绠＄悊.png",
},
diff --git a/src/pages/settings/views/Authorization.vue b/src/pages/settings/views/Authorization.vue
index 953f07e..5ed5f2c 100644
--- a/src/pages/settings/views/Authorization.vue
+++ b/src/pages/settings/views/Authorization.vue
@@ -15,13 +15,24 @@
<span class="title">{{ item.name }}</span>
</div>
</div>
- <div class="AuthorizationRight"></div>
+ <div class="AuthorizationRight">
+ <AuthorizationSetting v-if="activePage == 0"></AuthorizationSetting>
+ <AuthorizationManagement
+ v-if="activePage == 1"
+ ></AuthorizationManagement>
+ </div>
</div>
</div>
</template>
<script>
+import AuthorizationManagement from "@/pages/settings/components/AuthorizationManagement";
+import AuthorizationSetting from "@/pages/settings/components/AuthorizationSetting";
export default {
+ components: {
+ AuthorizationSetting,
+ AuthorizationManagement,
+ },
data() {
return {
activePage: 0,
@@ -90,5 +101,15 @@
background-color: #f2f2f7;
}
}
+
+ .AuthorizationRight {
+ flex: 1;
+ overflow: auto;
+ box-sizing: border-box;
+ padding: 10px;
+ padding-top: 6px;
+ border-top: 4px solid #f2f2f7;
+ background-color: #fbfaff;
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0