| | |
| | | :src="`data:image/png;base64,${item.headpic}`" |
| | | alt="" |
| | | /> |
| | | |
| | | </div> |
| | | <span class="user-name">{{ item.username }}</span> |
| | | </div> |
| | |
| | | :src="`data:image/png;base64,${activeAccountItem.headpic}`" |
| | | alt="" |
| | | /> |
| | | <div class="touxiang-mask" v-if="showChangePic==true"> |
| | | <span class="enable">修改头像</span> |
| | | </div> |
| | | </div> |
| | | <div class="user-desc"> |
| | | <div class="username"> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="list-btn"> |
| | | <div class="chang-pic-arr"> |
| | | <div class="upload-group"> |
| | | <div |
| | | class="upload-jpg" |
| | | :class="selectedPic == index ? 'upload-jpg-border' : ''" |
| | | v-for="(item, index) in jpgArr" |
| | | :key="index" |
| | | @click="pickHeadDefPic(item, index)" |
| | | > |
| | | <img |
| | | v-if="item" |
| | | :src="`data:image/png;base64,${item.path}`" |
| | | alt="" |
| | | srcset="" |
| | | /> |
| | | <div class="img-mask" v-if="selectedPic == index"> |
| | | <span class="icon iconfont enable"></span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="list-btn" v-if="isChangePic == false"> |
| | | <div class="item-btn" @click="showChangePassword">修改密码</div> |
| | | <div class="item-btn" @click="deleteAccount">删除账户</div> |
| | | <div class="item-btn" @click="openPermission">权限设置</div> |
| | |
| | | <div class="upload-group"> |
| | | <div |
| | | class="upload-jpg" |
| | | :class=" |
| | | selectedPic == index? 'upload-jpg-border' : '' |
| | | " |
| | | :class="selectedPic == index ? 'upload-jpg-border' : ''" |
| | | v-for="(item, index) in jpgArr" |
| | | :key="index" |
| | | @click="pickHeadDefPic(item, index)" |
| | |
| | | <el-form-item prop="userName"> |
| | | <div class="p-title">用户名:</div> |
| | | <el-input |
| | | placeholder="必填" |
| | | placeholder="必填,长度为2~10位字符,不能以数字开头、不允许有汉字" |
| | | v-model="addForm.userName" |
| | | ></el-input> |
| | | </el-form-item> |
| | |
| | | ></generalSettings> |
| | | </div> |
| | | <div class="welcome-page" v-else> |
| | | <div class="child" @click="openWelcome('账户',0)"> |
| | | <div class="child" @click="openWelcome('账户', 0)"> |
| | | <div class="child-info"> |
| | | <span class="icon iconfont welcome-icon"></span> |
| | | <span class="welcome-title">账户</span> |
| | | </div> |
| | | </div> |
| | | <div class="child" @click="openWelcome('日期时间',1)"> |
| | | <div class="child" @click="openWelcome('日期时间', 1)"> |
| | | <div class="child-info"> |
| | | <span class="icon iconfont welcome-icon"></span> |
| | | <span class="welcome-title">日期时间</span> |
| | | </div> |
| | | </div> |
| | | <div class="child" @click="openWelcome('集群管理',2)"> |
| | | <div class="child" @click="openWelcome('集群管理', 2)"> |
| | | <div class="child-info"> |
| | | <span class="icon iconfont welcome-icon"></span> |
| | | <span class="welcome-title">集群管理</span> |
| | | </div> |
| | | </div> |
| | | <div class="child" @click="openWelcome('网络设置',3)"> |
| | | <div class="child" @click="openWelcome('网络设置', 3)"> |
| | | <div class="child-info"> |
| | | <span class="icon iconfont welcome-icon"></span> |
| | | <span class="welcome-title">网络设置</span> |
| | | </div> |
| | | </div> |
| | | <div class="child" @click="openWelcome('键盘和语言',4)"> |
| | | <div class="child" @click="openWelcome('键盘和语言', 4)"> |
| | | <div class="child-info"> |
| | | <span class="icon iconfont welcome-icon"></span> |
| | | <span class="welcome-title">键盘和语言</span> |
| | | </div> |
| | | </div> |
| | | <div class="child" @click="openWelcome('通用设置',5)"> |
| | | <div class="child" @click="openWelcome('通用设置', 5)"> |
| | | <div class="child-info"> |
| | | <span class="icon iconfont welcome-icon"></span> |
| | | <span class="welcome-title">通用设置</span> |
| | |
| | | import netSettings from "../views/NetSettings"; |
| | | import keyboardLanguage from "../views/keyboardLanguage"; |
| | | import generalSettings from "../views/generalSettings"; |
| | | import treeVue from "@/components/treeMenu/jsTree/tree.vue"; |
| | | export default { |
| | | name: "settings", |
| | | components: { |
| | |
| | | }; |
| | | return { |
| | | showAccount: true, |
| | | showChangePic:false, |
| | | syncYrs: "", |
| | | activeAccountItem: {}, |
| | | syncMonth: "", |
| | |
| | | confirmPassword: "", |
| | | roleId: "", |
| | | }, |
| | | isChangePic: true, |
| | | rules: { |
| | | userName: [ |
| | | { required: true, message: "请输入用户名", trigger: "blur" }, |
| | | { |
| | | min: 3, |
| | | min: 2, |
| | | max: 10, |
| | | message: "长度在 3 到 10 个字符", |
| | | message: "长度在 2 到 10 个字符", |
| | | trigger: "blur", |
| | | }, |
| | | ], |
| | |
| | | this.initClockConf(); |
| | | } |
| | | }, |
| | | openWelcome(name,i){ |
| | | this.showWelcome = false |
| | | this.openMenu(name,i) |
| | | openWelcome(name, i) { |
| | | this.showWelcome = false; |
| | | this.openMenu(name, i); |
| | | }, |
| | | showInput(typ) { |
| | | this[`show${typ}Input`] = true; |
| | |
| | | this.isAddAccount = true; |
| | | getRoles().then((res) => { |
| | | if (res.success) { |
| | | this.roleList = res.data; |
| | | this.roleList = res.data.slice(0, 2); |
| | | } |
| | | }); |
| | | }, |
| | |
| | | }); |
| | | }, |
| | | saveAddAccount(formName) { |
| | | debugger; |
| | | this.$refs[formName].validate((valid) => { |
| | | debugger; |
| | | if (valid) { |
| | | let data = { |
| | | username: this.addForm.userName, |
| | |
| | | -moz-box-shadow: 5px 5px 10px #ddd; |
| | | -webkit-box-shadow: 5px 5px 10px #ddd; |
| | | box-shadow: 5px 5px 10px #ddd; |
| | | transform: translate3d(0,-2.5px,0); |
| | | transition: all 0.3s; |
| | | } |
| | | transform: translate3d(0, -2.5px, 0); |
| | | transition: all 0.3s; |
| | | } |
| | | } |
| | | .container { |
| | | height: 100%; |
| | |
| | | box-sizing: border-box; |
| | | .container-left { |
| | | height: 100%; |
| | | width: 230px; |
| | | width: 230px; |
| | | overflow: auto; |
| | | box-sizing: border-box; |
| | | flex-shrink: 0; |
| | |
| | | width: 100px; |
| | | height: 100px; |
| | | background-color: bisque; |
| | | position: relative; |
| | | border-radius: 50px; |
| | | img { |
| | | border: none; |
| | | |
| | | width: 100px; |
| | | height: 100px; |
| | | position: relative; |
| | | border-radius: 50px; |
| | | } |
| | | .touxiang-mask { |
| | | position: absolute; |
| | | left: 0; |
| | | top: 0; |
| | | width: 100px; |
| | | height: 100px; |
| | | background-color: rgba(0, 0, 0, 0.2); |
| | | color: white; |
| | | cursor: pointer; |
| | | border-radius: 50%; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | .selected { |
| | | font-size: 20px; |
| | | } |
| | | } |
| | | } |
| | | .user-desc { |
| | |
| | | } |
| | | } |
| | | |
| | | .add-account-page { |
| | | .upload-group { |
| | | height: 120px; |
| | | width: 360px; |
| | | margin: 0 auto; |
| | | overflow: hidden; |
| | | .upload-jpg { |
| | | position: relative; |
| | | .upload-group { |
| | | height: 120px; |
| | | width: 360px; |
| | | margin: 0 auto; |
| | | overflow: hidden; |
| | | .upload-jpg { |
| | | position: relative; |
| | | height: 48px; |
| | | width: 48px; |
| | | float: left; |
| | | margin: 0 10px; |
| | | margin-bottom: 10px; |
| | | background-color: rgba(242, 242, 242, 1); |
| | | border: 2px solid transparent; |
| | | border-radius: 50%; |
| | | cursor: pointer; |
| | | img { |
| | | height: 48px; |
| | | width: 48px; |
| | | float: left; |
| | | margin: 0 10px; |
| | | margin-bottom: 10px; |
| | | background-color: rgba(242, 242, 242, 1); |
| | | border: 2px solid transparent; |
| | | border-radius: 50%; |
| | | cursor: pointer; |
| | | img { |
| | | height: 48px; |
| | | width: 48px; |
| | | border-radius: 50%; |
| | | } |
| | | .img-mask { |
| | | position: absolute; |
| | | left: 0; |
| | | top: 0; |
| | | height: 48px; |
| | | width: 48px; |
| | | background-color: rgba(0, 0, 0, 0.3); |
| | | color: white; |
| | | border-radius: 50%; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | .selected { |
| | | font-size: 22px; |
| | | } |
| | | } |
| | | } |
| | | .upload-jpg-border { |
| | | border: 2px solid cornflowerblue; |
| | | } |
| | | .upload-jpg-up { |
| | | .img-mask { |
| | | position: absolute; |
| | | left: 0; |
| | | top: 0; |
| | | height: 48px; |
| | | width: 48px; |
| | | float: left; |
| | | background-color: rgba(0, 0, 0, 0.3); |
| | | color: white; |
| | | border-radius: 50%; |
| | | display: flex; |
| | | background-color: rgba(242, 242, 242, 1); |
| | | border: 2px solid transparent; |
| | | border-radius: 50%; |
| | | |
| | | justify-content: center; |
| | | align-items: center; |
| | | font-size: 12px; |
| | | cursor: pointer; |
| | | .selected { |
| | | font-size: 22px; |
| | | } |
| | | } |
| | | } |
| | | .upload-jpg-border { |
| | | border: 2px solid cornflowerblue; |
| | | } |
| | | .upload-jpg-up { |
| | | height: 48px; |
| | | width: 48px; |
| | | float: left; |
| | | display: flex; |
| | | background-color: rgba(242, 242, 242, 1); |
| | | border: 2px solid transparent; |
| | | border-radius: 50%; |
| | | |
| | | justify-content: center; |
| | | align-items: center; |
| | | font-size: 12px; |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | .add-account-page { |
| | | .fill-group { |
| | | .el-form-item__content { |
| | | line-height: 44px; |
| | | } |
| | | .p-title { |
| | | height: 34px; |
| | | text-align: left; |
| | | line-height: 50px; |
| | | } |
| | | .el-form-item__error { |
| | | line-height: 0.8; |
| | | left: 3.3%; |
| | | } |
| | | .el-form-item { |
| | | .el-select { |