|
|
@@ -1,28 +1,24 @@
|
|
|
<template>
|
|
|
<div class="app-container page-nesting" style="position: relative">
|
|
|
<!-- 左侧start -->
|
|
|
- <!-- <div class="grid-content treeDom roleLeft">
|
|
|
-
|
|
|
- </div> -->
|
|
|
|
|
|
<el-card class="box-card grid-content treeDom roleLeft">
|
|
|
<template #header>
|
|
|
<div class="card-header">
|
|
|
<span>个人中心</span>
|
|
|
- <!-- <el-button class="button" type="text">Operation button</el-button> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
<div class="text item">
|
|
|
<span class="text-left">租户名称：</span>
|
|
|
- <span class="text-right">西游科技有限公司</span>
|
|
|
+ <span class="text-right">{{tenantName}}</span>
|
|
|
</div>
|
|
|
<div class="text item">
|
|
|
<span class="text-left">管理员：</span>
|
|
|
- <span class="text-right">孙悟空</span>
|
|
|
+ <span class="text-right">{{nickName}}</span>
|
|
|
</div>
|
|
|
<div class="text item">
|
|
|
<span class="text-left">管理员手机号：</span>
|
|
|
- <span class="text-right">16666666666</span>
|
|
|
+ <span class="text-right">{{phonenumber}}</span>
|
|
|
</div>
|
|
|
<div class="text item">
|
|
|
<span class="text-left">系统平台：</span>
|
|
|
@@ -30,19 +26,17 @@
|
|
|
</div>
|
|
|
<div class="text item">
|
|
|
<span class="text-left">地址：</span>
|
|
|
- <span class="text-right">上海市青浦区徐泾镇徐乐路208号</span>
|
|
|
+ <span class="text-right">{{address}}</span>
|
|
|
</div>
|
|
|
<div class="text item">
|
|
|
<span class="text-left">到期时间：</span>
|
|
|
- <span class="text-right">2090-01-01</span>
|
|
|
+ <span class="text-right">{{tenantTerm}}</span>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
|
|
|
<!-- 左侧end -->
|
|
|
|
|
|
- <!-- 右侧表格start -->
|
|
|
-
|
|
|
-
|
|
|
+ <!-- 右侧start -->
|
|
|
<el-card class="box-card grid-content nestingDom">
|
|
|
<template #header>
|
|
|
<div class="card-header">
|
|
|
@@ -52,240 +46,204 @@
|
|
|
</template>
|
|
|
|
|
|
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
|
|
- <el-tab-pane label="个人信息" name="first">个人信息</el-tab-pane>
|
|
|
- <el-tab-pane label="修改密码" name="second">修改密码</el-tab-pane>
|
|
|
- <!-- <el-tab-pane label="Role" name="third">Role</el-tab-pane>
|
|
|
- <el-tab-pane label="Task" name="fourth">Task</el-tab-pane> -->
|
|
|
- </el-tabs>
|
|
|
-
|
|
|
+ <el-tab-pane label="个人信息" name="first">
|
|
|
+ <el-form :model="form" :rules="rules" label-width="120px">
|
|
|
+ <el-form-item label="租户名称" prop="name">
|
|
|
+ <el-input v-model="form.name" disabled />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="管理员" prop="administrators">
|
|
|
+ <el-input v-model="form.administrators" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="管理员手机号" prop="phone">
|
|
|
+ <el-input v-model="form.phone" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="地址" prop="address">
|
|
|
+ <el-input v-model="form.address" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="onSubmit">保存</el-button>
|
|
|
+ <el-button>取消</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="修改密码" name="second">
|
|
|
+ <el-form :model="form2" :rules="rules2" label-width="120px">
|
|
|
+ <el-form-item label="账号" prop="account">
|
|
|
+ <el-input v-model="form2.account" disabled />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="原密码" prop="oldPass" type="password">
|
|
|
+ <el-input v-model="form2.oldPass" show-password />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="密码" prop="pass" type="password">
|
|
|
+ <el-input v-model="form2.pass" show-password />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="再次输入" prop="passAgain" type="password">
|
|
|
+ <el-input v-model="form2.passAgain" show-password />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="onSubmit">保存</el-button>
|
|
|
+ <el-button>取消</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
</el-card>
|
|
|
-
|
|
|
-
|
|
|
- <!-- 右侧表格end -->
|
|
|
|
|
|
- <!-- 新建角色start -->
|
|
|
- <add-role-com
|
|
|
- :dialog-title="dialogTitle"
|
|
|
- :itemInfo="tableItem"
|
|
|
- @closeDialog="closeDialog"
|
|
|
- :flag="showDialog"
|
|
|
- ></add-role-com>
|
|
|
- <!-- 新建角色end -->
|
|
|
+ <!-- 右侧end -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { defineComponent, ref, reactive, onMounted } from 'vue'
|
|
|
-import * as api from '@/api/systemManage/rolePermission.js'
|
|
|
-import { ElMessage } from 'element-plus'
|
|
|
+import { defineComponent, ref, onMounted, reactive } from 'vue'
|
|
|
+import * as api from '@/api/user.js'
|
|
|
+// import { ElMessage } from 'element-plus'
|
|
|
|
|
|
-// import roleInfoCom from './roleInfoCom'
|
|
|
-import addRoleCom from './addRoleCom'
|
|
|
import { useStore } from 'vuex'
|
|
|
|
|
|
export default defineComponent({
|
|
|
- components: { addRoleCom },
|
|
|
+ components: {},
|
|
|
setup() {
|
|
|
+ const activeName = ref('first')
|
|
|
+
|
|
|
const store = useStore()
|
|
|
- const radio1 = ref('1')
|
|
|
- const showDialog = ref(false)
|
|
|
- const roleData = ref([])
|
|
|
- const menuData = ref([])
|
|
|
- const menuData2 = ref([])
|
|
|
- const newMenuData = ref([])
|
|
|
- const checkedKeys = ref([])
|
|
|
- const objItem = ref({})
|
|
|
|
|
|
- const dialogTitle = ref('')
|
|
|
+ const tenantName = ref('')
|
|
|
+ const phonenumber = ref('')
|
|
|
+ const nickName = ref('')
|
|
|
+ const address = ref('')
|
|
|
+ const tenantTerm = ref('')
|
|
|
+
|
|
|
+ const form = reactive({
|
|
|
+ name: '西游科技有限公司',
|
|
|
+ administrators: '孙悟空',
|
|
|
+ phone: '13255666666',
|
|
|
+ address: '上海市青浦区徐泾镇徐乐路208号',
|
|
|
+ })
|
|
|
+ const form2 = reactive({
|
|
|
+ account: 'admin',
|
|
|
+ oldPass: '',
|
|
|
+ pass: '',
|
|
|
+ passAggin: '',
|
|
|
+ })
|
|
|
|
|
|
- // 删除左侧角色列表
|
|
|
- function deleteRoleItem(item) {
|
|
|
- // item
|
|
|
- // console.log(radio1.value)
|
|
|
- // console.log(item.roleId)
|
|
|
- // this.roleData.splice(params, 1)
|
|
|
+ const validatePass = (rule, value, callback) => {
|
|
|
+ if (value === '') {
|
|
|
+ callback(new Error('请输入密码'))
|
|
|
+ } else if(!/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/.test(value)){
|
|
|
+ callback(new Error('请输入6-18位特殊字符、字母、数字组合的密码'))
|
|
|
|
|
|
- api.roleDelete({}, item.roleId).then((requset) => {
|
|
|
- if (requset.status === 'SUCCESS') {
|
|
|
- ElMessage.success({
|
|
|
- message: '删除成功',
|
|
|
- type: 'success',
|
|
|
- })
|
|
|
- roleList()
|
|
|
- } else {
|
|
|
- ElMessage.error(requset.msg)
|
|
|
+ }else {
|
|
|
+ if (this.ruleForm.confirmPwd !== '') {
|
|
|
+ this.$refs.ruleForm.validateField('confirmPwd')
|
|
|
}
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- // 新增角色
|
|
|
- const tableItem = reactive([])
|
|
|
-
|
|
|
- function addRole() {
|
|
|
- // alert('新增')
|
|
|
- tableItem.value = {
|
|
|
- roleName: '',
|
|
|
- roleKey: '',
|
|
|
- status: '',
|
|
|
- roleSort: 1,
|
|
|
+ callback()
|
|
|
}
|
|
|
- dialogTitle.value = '角色新增'
|
|
|
- showDialog.value = true
|
|
|
- }
|
|
|
-
|
|
|
- // 修改角色
|
|
|
- function editRole() {
|
|
|
- // alert('修改')
|
|
|
- // console.log(radio1.value)
|
|
|
- api.roleDetail({}, radio1.value).then((requset) => {
|
|
|
- if (requset.status === 'SUCCESS') {
|
|
|
- tableItem.value = {
|
|
|
- roleName: requset.data.roleName,
|
|
|
- roleKey: requset.data.roleKey,
|
|
|
- status: requset.data.status,
|
|
|
- roleSort: Number(requset.data.roleSort),
|
|
|
- roleId: requset.data.roleId,
|
|
|
- }
|
|
|
-
|
|
|
- dialogTitle.value = '角色修改'
|
|
|
- showDialog.value = true
|
|
|
- } else {
|
|
|
- ElMessage.error(requset.msg)
|
|
|
- }
|
|
|
- })
|
|
|
}
|
|
|
-
|
|
|
- const listTabsChange = (value, item) => {
|
|
|
- // console.log('value')
|
|
|
- console.log(radio1.value)
|
|
|
- radio1.value = value
|
|
|
- objItem.value = item
|
|
|
- // console.log('objItem.value')
|
|
|
- // console.log(objItem.value)
|
|
|
- roleMenuTreeselect()
|
|
|
- getAuthorityTable()
|
|
|
+ const validatePass2 = (rule, value, callback) => {
|
|
|
+
|
|
|
+ if (value === '') {
|
|
|
+ callback(new Error('请再次输入密码'))
|
|
|
+
|
|
|
+ } else if (value !== form2.pass) {
|
|
|
+
|
|
|
+ callback(new Error('两次输入密码不一致!'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- // 表格树结构渲染
|
|
|
- function roleMenuTreeselect() {
|
|
|
- menuData.value = []
|
|
|
- api.roleMenuTreeselect({}, radio1.value).then((requset) => {
|
|
|
- if (requset.code == 200) {
|
|
|
- menuData.value = requset.data.menus
|
|
|
- // getTreeData2(menuData.value) //对树结构返回值进行重组
|
|
|
- checkedKeys.value = requset.data.checkedKeys
|
|
|
-
|
|
|
- //当返回值没有选中菜单时,否
|
|
|
- if (!checkedKeys.value.length) {
|
|
|
- menuData.value.map((item) => {
|
|
|
- item.authority2 = '0'
|
|
|
- })
|
|
|
+ //根据不同的域名，显示不同的title和背景图
|
|
|
+ function getUserData() {
|
|
|
+ api
|
|
|
+ .getUserData({
|
|
|
+
|
|
|
+ })
|
|
|
+ .then((requset) => {
|
|
|
+ if (requset.status === 'SUCCESS') {
|
|
|
+ console.log('request')
|
|
|
+ tenantName.value=requset.data[0].tenantName
|
|
|
+ phonenumber.value=requset.data[0].phonenumber
|
|
|
+ nickName.value=requset.data[0].nickName
|
|
|
+ address.value=requset.data[0].address
|
|
|
+ tenantTerm.value=requset.data[0].tenantTerm
|
|
|
|
|
|
- if (radio1.value == 1) {
|
|
|
- menuData.value.map(function (item) {
|
|
|
- checkedKeys.value.push(item.id)
|
|
|
- checkedKeys.value.map(function (num) {
|
|
|
- if (JSON.stringify(item).indexOf(num) != -1) {
|
|
|
- item.authority2 = '1'
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- }
|
|
|
+
|
|
|
+ // console.log(request)
|
|
|
+ // this.backdropUrl = requset.data[0].loginBackUrl
|
|
|
+ // this.companyName = requset.data[0].loginTitle
|
|
|
} else {
|
|
|
- menuData.value.map(function (item) {
|
|
|
- item.authority2 = '0'
|
|
|
- checkedKeys.value.map(function (num) {
|
|
|
- if (JSON.stringify(item).indexOf(num) != -1) {
|
|
|
- item.authority2 = '1'
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
+ alert(requset.msg)
|
|
|
}
|
|
|
- } else {
|
|
|
- ElMessage.error(requset.msg)
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- //小吉新接口渲染右侧表格树数据
|
|
|
- function getAuthorityTable() {
|
|
|
- menuData2.value = []
|
|
|
- api.getAuthorityTable({ roleId: radio1.value }).then((requset) => {
|
|
|
- if (requset.code == 200) {
|
|
|
- menuData2.value = requset.data
|
|
|
- } else {
|
|
|
- ElMessage.error(requset.msg)
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- function getTreeData2(data) {
|
|
|
- for (var i = 0; i < data.length; i++) {
|
|
|
- if (data[i].label == data[i].children[0].label) {
|
|
|
- // console.log(data[i].label)
|
|
|
- data[i].children = data[i].children[0].children
|
|
|
- }
|
|
|
- }
|
|
|
- return data
|
|
|
- }
|
|
|
-
|
|
|
- // 关闭弹框操作
|
|
|
- const closeDialog = () => {
|
|
|
- showDialog.value = false
|
|
|
- roleList()
|
|
|
- console.log('1111aaa' + radio1.value)
|
|
|
- }
|
|
|
- //角色列表
|
|
|
- function roleList() {
|
|
|
- api.roleList().then((requset) => {
|
|
|
- if (requset.code === 200) {
|
|
|
- roleData.value = requset.rows
|
|
|
- // var item = requset.rows[0]
|
|
|
- // objItem.value = {
|
|
|
- // roleSort: item.roleSort,
|
|
|
- // roleKey: item.roleKey,
|
|
|
- // roleName: item.roleName,
|
|
|
- // }
|
|
|
- } else {
|
|
|
- ElMessage.error(requset.msg)
|
|
|
- }
|
|
|
- })
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
|
- roleList()
|
|
|
- roleMenuTreeselect()
|
|
|
- getAuthorityTable()
|
|
|
+ getUserData()
|
|
|
})
|
|
|
|
|
|
return {
|
|
|
- radio1,
|
|
|
- showDialog,
|
|
|
- roleData,
|
|
|
- dialogTitle,
|
|
|
- tableItem,
|
|
|
- menuData,
|
|
|
- menuData2,
|
|
|
- newMenuData,
|
|
|
- checkedKeys,
|
|
|
- listTabsChange,
|
|
|
- roleMenuTreeselect,
|
|
|
- getAuthorityTable,
|
|
|
- deleteRoleItem,
|
|
|
- addRole,
|
|
|
- editRole,
|
|
|
- closeDialog,
|
|
|
- objItem,
|
|
|
- getTreeData2,
|
|
|
store,
|
|
|
+ getUserData,
|
|
|
+ tenantName,
|
|
|
+ phonenumber,
|
|
|
+ nickName,
|
|
|
+ address,
|
|
|
+ tenantTerm,
|
|
|
+ activeName,
|
|
|
+ form,
|
|
|
+ form2,
|
|
|
+ rules: {
|
|
|
+ name: [{ required: true, message: '请输入分组名称', trigger: 'blur' }],
|
|
|
+ administrators: [
|
|
|
+ { required: true, message: '请输入管理员', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ phone: [
|
|
|
+ { required: true, message: '请输入管理员手机号', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
|
|
|
+ },
|
|
|
+ rules2: {
|
|
|
+ account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
|
|
|
+ oldPass: [
|
|
|
+ { required: true, message: '请输入原密码', trigger: 'blur' },
|
|
|
+ { validator: validatePass, trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ pass: [
|
|
|
+ { required: true, message: '请输入密码', trigger: 'blur' },
|
|
|
+ { validator: validatePass, trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ passAgain: [
|
|
|
+ { required: true, message: '请再次输入密码', trigger: 'blur' },
|
|
|
+ { validator: validatePass2, trigger: 'blur', required: true },
|
|
|
+ ],
|
|
|
+ },
|
|
|
}
|
|
|
},
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-
|
|
|
// start
|
|
|
+
|
|
|
+.nestingDom {
|
|
|
+ margin-left: 285px;
|
|
|
+}
|
|
|
+.treeDom {
|
|
|
+ width: 270px;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ height: calc(100vh - 140px);
|
|
|
+}
|
|
|
+.grid-content {
|
|
|
+ background: #fff;
|
|
|
+ height: calc(100vh - 140px);
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+.app-container.page-nesting {
|
|
|
+ padding: 0;
|
|
|
+ background: rgba(0, 0, 0, 0);
|
|
|
+}
|
|
|
+
|
|
|
.card-header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
@@ -304,66 +262,51 @@ export default defineComponent({
|
|
|
// width: 480px;
|
|
|
}
|
|
|
|
|
|
-::v-deep .el-card__body{
|
|
|
- padding:15px
|
|
|
+::v-deep .el-card__body {
|
|
|
+ padding: 15px;
|
|
|
}
|
|
|
::v-deep .el-card__header {
|
|
|
padding: 14px 15px 7px !important;
|
|
|
-
|
|
|
}
|
|
|
-::v-deep .item{
|
|
|
- padding:11px 0;
|
|
|
- border-bottom:1px solid #e7eaec;
|
|
|
- margin:0
|
|
|
- }
|
|
|
-
|
|
|
- .text-left{
|
|
|
- width:98px
|
|
|
- }
|
|
|
- .text-right{
|
|
|
- width:calc(100% - 98px)
|
|
|
- }
|
|
|
- .text-left,.text-right{
|
|
|
- display:inline-block;
|
|
|
- vertical-align: top;
|
|
|
- }
|
|
|
+::v-deep .item {
|
|
|
+ padding: 11px 0;
|
|
|
+ border-bottom: 1px solid #e7eaec;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
|
|
|
+.text-left {
|
|
|
+ width: 98px;
|
|
|
+}
|
|
|
+.text-right {
|
|
|
+ width: calc(100% - 98px);
|
|
|
+}
|
|
|
+.text-left,
|
|
|
+.text-right {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: top;
|
|
|
+}
|
|
|
|
|
|
- .demo-tabs > .el-tabs__content {
|
|
|
+.demo-tabs > .el-tabs__content {
|
|
|
padding: 32px;
|
|
|
color: #6b778c;
|
|
|
font-size: 32px;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
-// end
|
|
|
-
|
|
|
-.el-button + .el-button {
|
|
|
- margin-left: 0;
|
|
|
+.el-form-item {
|
|
|
+ margin: 20px 0 !important;
|
|
|
+ max-width: auto;
|
|
|
}
|
|
|
-.app-container.page-nesting {
|
|
|
- padding: 0;
|
|
|
- background: rgba(0, 0, 0, 0);
|
|
|
-}
|
|
|
-.grid-content {
|
|
|
- background: #fff;
|
|
|
- height: calc(100vh - 140px);
|
|
|
- overflow-y: auto;
|
|
|
-}
|
|
|
-.el-input__inner {
|
|
|
- border-radius: 20px !important;
|
|
|
-}
|
|
|
-.treeDom {
|
|
|
- width: 270px;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- // margin-left: 20px;
|
|
|
- // padding: 15px;
|
|
|
- // min-height: calc(100vh - 130px);
|
|
|
- height: calc(100vh - 140px);
|
|
|
-}
|
|
|
-.nestingDom {
|
|
|
- margin-left: 285px;
|
|
|
-
|
|
|
+.el-form-item__content {
|
|
|
+ width: calc(100% - 120px) !important;
|
|
|
}
|
|
|
+// end
|
|
|
+
|
|
|
+// .el-button + .el-button {
|
|
|
+// margin-left: 0;
|
|
|
+// }
|
|
|
+
|
|
|
+// .el-input__inner {
|
|
|
+// border-radius: 20px !important;
|
|
|
+// }
|
|
|
</style>
|
ming