Commit 83d44134 authored by 何小勇's avatar 何小勇

组织管理、登录

parent 7c0deb5f
...@@ -1512,3 +1512,19 @@ border-radius:8px; ...@@ -1512,3 +1512,19 @@ border-radius:8px;
background: transparent; background: transparent;
border-radius: 2px; border-radius: 2px;
} }
.font_bold {
font-size: 18px;
color: #202531;
font-weight: bold;
margin-bottom: 20px;
}
.name_btn {
color: #3759be;
cursor: pointer;
}
.fr {
float: right;
}
.pl-1 {
padding-left: 1rem;
}
...@@ -40,7 +40,7 @@ import menu from './router/function.js' ...@@ -40,7 +40,7 @@ import menu from './router/function.js'
//获取用户信息 //获取用户信息
function getUser() { function getUser() {
return axios.get(`/apaas/system/getUserInfo`) return axios.get(`/apaas/system/v5/user/getUserInfo`)
} }
//处理菜单成为对象 //处理菜单成为对象
......
...@@ -17,12 +17,12 @@ ...@@ -17,12 +17,12 @@
></span> --> ></span> -->
</el-input> </el-input>
</el-form-item> </el-form-item>
<!-- <el-form-item prop="yzm" class="yzm"> <el-form-item prop="yzm" class="yzm">
<div class="yzm_ctx"> <div class="yzm_ctx">
<el-input class="yzm_ipt" v-model.trim="form.yzm" placeholder="请输入验证码" :validate-event="false" @keyup.enter="login_remember_info()"></el-input> <el-input class="yzm_ipt" v-model.trim="form.yzm" placeholder="请输入验证码" :validate-event="false" @keyup.enter="login_remember_info()"></el-input>
<img class="yzm_img" title="看不清?换一张" :src="imgSrc" @click="getImg()" /> <img class="yzm_img" title="看不清?换一张" :src="imgSrc" @click="getImg()" />
</div> </div>
</el-form-item> --> </el-form-item>
<div class="apaas_button"> <div class="apaas_button">
<el-button class="btn_sub" type="primary" @click.prevent="login_remember_info()">登 录</el-button> <el-button class="btn_sub" type="primary" @click.prevent="login_remember_info()">登 录</el-button>
</div> </div>
...@@ -37,6 +37,8 @@ import menu from '../../router/function' ...@@ -37,6 +37,8 @@ import menu from '../../router/function'
import {generateRoutes} from '../../router/index' import {generateRoutes} from '../../router/index'
import inputTable from '../../components/input-table.vue'; import inputTable from '../../components/input-table.vue';
import inputObjectTable from '../../components/input-object-table.vue'; import inputObjectTable from '../../components/input-object-table.vue';
import CryptoJS from "crypto-js";
export default { export default {
props: {}, props: {},
components: { components: {
...@@ -57,7 +59,7 @@ export default { ...@@ -57,7 +59,7 @@ export default {
computed: {}, computed: {},
created() { created() {
console.log(111); console.log(111);
// this.getImg(); this.getImg();
}, },
mounted() {}, mounted() {},
methods: { methods: {
...@@ -71,7 +73,7 @@ export default { ...@@ -71,7 +73,7 @@ export default {
}); });
}, },
getUser() { getUser() {
this.$axios.get(`/apaas/system/getUserInfo`).then((res) => { this.$axios.get(`/apaas/system/v5/user/getUserInfo`).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
this.$store.commit("setUserInfo", res.data.data); this.$store.commit("setUserInfo", res.data.data);
if (res.data.data.userType == 1) { if (res.data.data.userType == 1) {
...@@ -93,34 +95,34 @@ export default { ...@@ -93,34 +95,34 @@ export default {
}); });
}, },
login_remember_info() { login_remember_info() {
// if (!this.form.userid) { if (!this.form.userid) {
// return this.$message.error("请输入账号"); return this.$message.error("请输入账号");
// } }
// if (!this.form.password) { if (!this.form.password) {
// return this.$message.error("请输入密码"); return this.$message.error("请输入密码");
// } }
// if (!this.form.yzm) { if (!this.form.yzm) {
// return this.$message.error("请输入验证码"); return this.$message.error("请输入验证码");
// } }
// this.$axios this.$axios
// .get(`/apaas/system/checkCaptcha/${this.imgId}/${this.form.yzm}`) .get(`/apaas/system/v5/user/verifyCaptcha?id=${this.imgId}&value=${this.form.yzm}`)
// .then((res) => { .then((res) => {
// if (res.data.code == 200) { if (res.data.code == 200) {
// this.login(); this.login();
// } else { } else {
// this.$message.error(res.data.desc); this.$message.error(res.data.data);
// } }
// }); });
this.login();
}, },
login() { login() {
this.$axios this.$axios
.post(`/apaas/system/login`, { .post(`/apaas/system/v5/user/login`, {
userId: this.form.userid, system_account: this.form.userid,
userPassword: this.form.password, password: CryptoJS.AES.encrypt(this.form.password,"swuE9cmCZQwrkYRV").toString(),
}) })
.then((res) => { .then((res) => {
if (res.data.code == "200") { if (res.data.code == 200) {
let data = res.data.data; let data = res.data.data;
console.log(data); console.log(data);
setCookie("bgToken", data.name); setCookie("bgToken", data.name);
...@@ -132,10 +134,10 @@ export default { ...@@ -132,10 +134,10 @@ export default {
}); });
}, },
getImg() { getImg() {
this.$axios.get(`/apaas/system/getCaptcha`).then((res) => { this.$axios.get(`/apaas/system/v5/user/getCaptcha??width=240&height=32`).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
this.imgId = res.data.data.key; this.imgId = res.data.data.id;
this.imgSrc = res.data.data.image; this.imgSrc = res.data.data.captcha;
} }
}); });
}, },
...@@ -174,7 +176,12 @@ export default { ...@@ -174,7 +176,12 @@ export default {
width: 240px; width: 240px;
} }
.yzm_img { .yzm_img {
vertical-align: middle; vertical-align: middle;
width: 150px;
height: 32px;
margin-left: 10px;
display: inline-block;
} }
.btn_sub { .btn_sub {
width: 400px; width: 400px;
......
...@@ -44,11 +44,12 @@ ...@@ -44,11 +44,12 @@
</div> </div>
<div class="content_main"> <div class="content_main">
<systemForm v-show="step === 1" ref="systemFormRef" :data="tempFormData" @action="getSystemFormData"></systemForm> <systemForm v-show="step === 1" ref="systemFormRef" @action="getSystemFormData"></systemForm>
<contactForm v-show="step === 2" ref="contactFormRef" :data="tempFormData" @action="getContactFormData"></contactForm> <contactForm v-show="step === 2" ref="contactFormRef" @action="getContactFormData"></contactForm>
<div class="process_end" v-show="step === 3"> <div class="process_end" v-show="step === 3">
<div> <div>
<div><img src="@/assets/imgs/img_data-complete.png" alt=""></div> <div><img src="@/assets/imgs/img_data-complete.png" alt=""></div>
<div class="font_bold">业务系统新增成功</div>
<el-button @click="cancel">返回列表</el-button> <el-button @click="cancel">返回列表</el-button>
<el-button type="primary" @click="continueCreate">继续创建</el-button> <el-button type="primary" @click="continueCreate">继续创建</el-button>
</div> </div>
...@@ -84,7 +85,6 @@ const router = useRouter(); ...@@ -84,7 +85,6 @@ const router = useRouter();
const step = ref(1); const step = ref(1);
const systemFormRef = ref(null); const systemFormRef = ref(null);
const contactFormRef = ref(null); const contactFormRef = ref(null);
const tempFormData = ref(null)
const formData = reactive({ const formData = reactive({
org: '', org: '',
code: '', code: '',
......
<template>
<div class="page_container">
<div class="bg-breadcrumb">
<el-breadcrumb separator="/">
<el-breadcrumb-item> 开发管理 </el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/develop/account' }"> 系统账号管理 </el-breadcrumb-item>
<el-breadcrumb-item > 详情 </el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="page_content apaas_scroll">
<div class="info_row">
<div class="title">
<div><span class="icon_box"></span> 基础信息</div>
<div class="dashed_line">
</div>
</div>
<div class="info_content">
<div class="img_box">
<img src="/src/assets/imgs/home_ic_user.png" style="height: 96px;width: 96px;border-radius: 99px" alt="">
</div>
<div class="info_box">
<bg-info :data="baseInfo"></bg-info>
</div>
</div>
</div>
<div>
<div class="title">
<div><span class="icon_box"></span> 基础信息</div>
<div class="dashed_line">
</div>
</div>
<div class="info_content">
<div class="img_box"></div>
<div class="info_box">
<bg-info :data="contactInfo"></bg-info>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { reactive, toRefs, ref, } from '@vue/reactivity'
import { getCurrentInstance } from 'vue'
import { computed, onBeforeMount } from '@vue/runtime-core'
import { useRouter } from 'vue-router';
const baseInfo = reactive(
[
{
name: "所属机构",
value: "某某省/某某市/大数据局",
nameWidth: 112
},
{
name: "业务系统编码",
value: "00000001",
nameWidth: 112
},
{
name: "业务系统名称",
value: "大数据处理系统",
nameWidth: 112
},
{
name: "账号",
value: "admin001",
nameWidth: 112
},
{
name: "AppID",
value: "dasjkjjk",
nameWidth: 112
},
{
name: "AppSecret",
value: "asda*******************jhjh",
nameWidth: 112
},
{
name: "创建人",
value: "admin(机构管理员)",
nameWidth: 112
},
{
name: "创建时间",
value: "2022-01-01 10:10:10",
nameWidth: 112
},
{
name: "是否启用",
value: "",
nameWidth: 112
},
{
name: "开发厂商名单",
value: "某某大数据开发商",
nameWidth: 112
},
{
name: "访问地址",
value: "http://www.bigdata.com",
full: true,
nameWidth: 112
},
{
name: "业务系统描述",
value: "系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述",
full: true,
nameWidth: 112
},
]
)
const contactInfo = reactive(
[{
name: "联系人姓名",
value: "xxx",
nameWidth: 112
},
{
name: "联系人手机号",
value: "15627365265",
nameWidth: 112
},
{
name: "联系人邮箱",
value: "http://www.bigdata@163.com",
full: true,
nameWidth: 112
},
{
name: "备注",
value: "系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述",
full: true,
nameWidth: 112
},
]
)
onBeforeMount(() => {
})
</script>
<style scoped>
.page_content {
padding: 15px;
overflow: auto;
}
.info_content {
display: flex;
}
.info_row {
margin-bottom: 40px;
}
.img_box {
width: 120px;
}
.info_box {
width: 60%;
}
.title {
font-size: 18px;
color: #1a1a1a;
font-weight: bold;
margin-bottom: 10px;
display: flex;
align-items: center;
}
.dashed_line {
flex: 1;
height: 1px;
margin: 0 10px;
border-bottom: dashed 1px #dadee7;
}
.icon_box {
display: inline-block;
width: 4px;
height: 14px;
background-color: #3759be;
border-radius: 2px;
margin-right: 5px;
}
</style>
\ No newline at end of file
...@@ -31,6 +31,11 @@ ...@@ -31,6 +31,11 @@
</div> </div>
<div class="table_container apaas_scroll"> <div class="table_container apaas_scroll">
<bg-table ref="bgTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true"> <bg-table ref="bgTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true">
<template v-slot:name="{ row }">
<span @click="goDetail(row)" class="name_btn">
{{ row.name }}
</span>
</template>
<template v-slot:action="{ row }"> <template v-slot:action="{ row }">
<bg-table-btn class="btn"> <bg-table-btn class="btn">
编辑 编辑
...@@ -133,9 +138,6 @@ import { useRouter } from 'vue-router'; ...@@ -133,9 +138,6 @@ import { useRouter } from 'vue-router';
const search=ref(""); const search=ref("");
const router = useRouter(); const router = useRouter();
onBeforeMount(() => {
})
const addAccount = (params) => { const addAccount = (params) => {
router.push({ router.push({
...@@ -240,13 +242,27 @@ import { useRouter } from 'vue-router'; ...@@ -240,13 +242,27 @@ import { useRouter } from 'vue-router';
label: 'label', label: 'label',
} }
const changeSize = (size) => { const changeSize = (size) => {
} }
const changePage = (size) => { const changePage = (size) => {
} }
const goDetail = (params) => {
router.push({
path: "/develop/account/detail",
query: {
id: params.id
}
})
}
onBeforeMount(() => {
})
</script> </script>
...@@ -285,6 +301,7 @@ import { useRouter } from 'vue-router'; ...@@ -285,6 +301,7 @@ import { useRouter } from 'vue-router';
height: calc(100% - 30px); height: calc(100% - 30px);
overflow: auto; overflow: auto;
} }
.pagination_box { .pagination_box {
position: sticky; position: sticky;
position: -webkit-sticky; position: -webkit-sticky;
......
...@@ -5,11 +5,15 @@ ...@@ -5,11 +5,15 @@
:model="directoryForm" :model="directoryForm"
:rules="directoryFormRules" :rules="directoryFormRules"
ref="directoryRef" ref="directoryRef"
style="max-width: 66%" style="max-width: 80%"
> >
<el-form-item label="上级目录" prop="parent"> <el-form-item label="上级目录" prop="parent">
<el-input v-model="directoryForm.parent" /> <el-input v-model="directoryForm.parent" style="width: 80%;" />
<el-form-item label="" style="padding-left: 16px">
<el-checkbox v-model="directoryForm.level" label="顶级"/>
</el-form-item>
</el-form-item> </el-form-item>
<el-form-item label="名称" prop="name"> <el-form-item label="名称" prop="name">
<el-input v-model="directoryForm.name" /> <el-input v-model="directoryForm.name" />
</el-form-item> </el-form-item>
...@@ -22,6 +26,7 @@ import { reactive, ref, onMounted } from 'vue' ...@@ -22,6 +26,7 @@ import { reactive, ref, onMounted } from 'vue'
const directoryForm = reactive({ const directoryForm = reactive({
parent: '', parent: '',
name: '', name: '',
level: ''
}) })
const directoryFormRules = reactive({ const directoryFormRules = reactive({
......
This diff is collapsed.
<template>
<div class="page_container">
<div class="bg-breadcrumb">
<el-breadcrumb separator="/">
<el-breadcrumb-item> 组织管理 </el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/system/organization' }"> 组织管理 </el-breadcrumb-item>
<el-breadcrumb-item> 组织详情 </el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="page_content apaas_scroll">
<div class="info_row">
<div class="title">
<div><span class="icon_box"></span> 基础信息</div>
<div class="dashed_line">
</div>
</div>
<div class="info_content">
<div class="info_box">
<bg-info :data="baseInfo"></bg-info>
</div>
<div class="org_file info_box">
<div class="pl-1">组织附件</div>
<div>
<div class="file_item pl-1">
<span><bg-icon style="font-size: 24px" icon="#bg-ic-c-file-doc"></bg-icon></span>
<span class="file_name">xxxxxxx协议.doc</span>
<span class="fr download_btn">
<el-button type="primary" @click="downloadFile"><bg-icon icon="#bg-ic-to-bottom"></bg-icon>下载</el-button>
</span>
</div>
<div class="file_item pl-1">
<span><bg-icon style="font-size: 24px" icon="#bg-ic-c-file-zip"></bg-icon></span>
<span class="file_name">xxxxxxx协议.zip</span>
<span class="fr download_btn">
<el-button type="primary"><bg-icon icon="#bg-ic-to-bottom"></bg-icon>下载</el-button>
</span>
</div>
<div class="file_item pl-1">
<span><bg-icon style="font-size: 24px" icon="#bg-ic-c-file-image"></bg-icon></span>
<span class="file_name">xxxxxxx协议.jpg</span>
<span class="fr download_btn">
<el-button type="primary"><bg-icon icon="#bg-ic-to-bottom"></bg-icon>下载</el-button>
</span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="title">
<div><span class="icon_box"></span> 业务系统信息</div>
<div class="dashed_line">
</div>
</div>
<div class="info_content info_box">
<bg-table ref="bgTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true">
</bg-table>
<div class="pagination_box">
<bg-pagination
:page="1"
:size="10"
:total="100"
@change-page="changePage"
@change-size="changeSize"
>
</bg-pagination>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { reactive, toRefs, ref, } from '@vue/reactivity'
import { getCurrentInstance } from 'vue'
import { computed, onBeforeMount } from '@vue/runtime-core'
import { useRouter } from 'vue-router';
const baseInfo = reactive(
[
{
name: "机构名称",
value: "大数据局",
nameWidth: 130
},
{
name: "组织机构代码",
value: "00000001",
nameWidth: 130
},
{
name: "组织管理员数量",
value: "15",
nameWidth: 130
},
{
name: "业务系统数量",
value: "10",
nameWidth: 130
},
{
name: "组织描述",
value: "组织描述组织描述组织描述组织描述组织描述组织描述组织描述组织描述组织描述组织描述组织描述组织描述组织描述组织描述组织描述组织描述",
nameWidth: 130
},
])
const headers = reactive([
{
label: "业务系统名称",
prop: "name",
},
{
label: "是否启用",
prop: "is_use",
},
{
label: "业务系统账号",
prop: "account",
},
])
const tableRows = reactive([
{name: '大数据处理系统',is_use: "",account: "admin"},
{name: '大数据处理系统',is_use: "",account: "admin"},
// {name: '大数据处理系统',is_use: "是",account: "admin"},
// {name: '大数据处理系统',is_use: "是",account: "admin"},
// {name: '大数据处理系统',is_use: "是",account: "admin"},
// {name: '大数据处理系统',is_use: "是",account: "admin"},
// {name: '大数据处理系统',is_use: "是",account: "admin"},
// {name: '大数据处理系统',is_use: "是",account: "admin"},
// {name: '大数据处理系统',is_use: "是",account: "admin"},
// {name: '大数据处理系统',is_use: "是",account: "admin"},
// {name: '大数据处理系统',is_use: "是",account: "admin"},
// {name: '大数据处理系统',is_use: "是",account: "admin"},
])
const changeSize = (size) => {
}
const changePage = (size) => {
}
const downloadFile = (data) => {
}
onBeforeMount(() => {
})
</script>
<style scoped>
.page_content {
padding: 15px;
overflow: auto;
font-size: 14px;
color: #202531;
}
.info_content {
/* display: flex; */
}
.org_file {
margin-top: 15px;
}
.file_item {
height: 48px;
line-height: 48px;
background-color: #fafafa;
border-radius: 4px;
font-size: 14px;
margin-bottom: 8px;
}
.file_name {
padding-left: 10px;
color: #202531;
}
.download_btn {
padding-right: 4px;
}
.info_row {
margin-bottom: 40px;
}
.img_box {
width: 120px;
}
.info_box {
width: 60%;
}
.title {
font-size: 18px;
color: #1a1a1a;
font-weight: bold;
margin-bottom: 10px;
display: flex;
align-items: center;
}
.dashed_line {
flex: 1;
height: 1px;
margin: 0 10px;
border-bottom: dashed 1px #dadee7;
}
.icon_box {
display: inline-block;
width: 4px;
height: 14px;
background-color: #3759be;
border-radius: 2px;
margin-right: 5px;
}
.pagination_box {
position: sticky;
position: -webkit-sticky;
margin-top: 16px;
bottom: -15px;
background-color: #fff;
z-index: 1024;
height: 40px;
line-height: 40px;
padding-top: 5px;
}
</style>
\ No newline at end of file
...@@ -5,10 +5,13 @@ ...@@ -5,10 +5,13 @@
:model="orgForm" :model="orgForm"
:rules="formRules" :rules="formRules"
ref="orgRef" ref="orgRef"
style="max-width: 66%" style="max-width: 80%"
> >
<el-form-item label="上级目录" prop="parent"> <el-form-item label="上级目录" prop="parent">
<el-input v-model="orgForm.parent" /> <el-input v-model="orgForm.parent" style="width: 80%"/>
<el-form-item label="" style="padding-left: 16px">
<el-checkbox v-model="orgForm.level" label="顶级"/>
</el-form-item>
</el-form-item> </el-form-item>
<el-form-item label="政务机构名称" prop="orgName"> <el-form-item label="政务机构名称" prop="orgName">
<el-input v-model="orgForm.orgName" /> <el-input v-model="orgForm.orgName" />
...@@ -32,6 +35,7 @@ import { reactive, ref, onMounted } from 'vue' ...@@ -32,6 +35,7 @@ import { reactive, ref, onMounted } from 'vue'
const orgForm = reactive({ const orgForm = reactive({
parent: '', parent: '',
level: '',
orgName: '', orgName: '',
code: '', code: '',
desc: '', desc: '',
......
<template>
<div class="page_container">
<div class="bg-breadcrumb">
<el-breadcrumb separator="/">
<el-breadcrumb-item> 组织管理 </el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/system/organization' }"> 组织管理 </el-breadcrumb-item>
<el-breadcrumb-item> 新增平台用户 </el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="page_content flex_cloumn">
<div class="content_top apaas_scroll">
<div class="content_process">
<div>
<el-steps :active="step" >
<el-step title="" :class="{'process_complete': step > 1}">
<template #icon>
<span class="process_desc">
<span class="icon_box" v-if="step > 0"><bg-icon class="step_icon" icon="#bg-ic-file"></bg-icon></span>
<span class="circle" v-else></span>
账号信息
</span>
</template>
</el-step>
<el-step title="" :class="{'process_complete': step > 2}">
<template #icon>
<span class="process_desc">
<span class="icon_box" v-if="step > 1"><bg-icon class="step_icon" icon="#bg-ic-file-staff"></bg-icon></span>
<span class="circle" v-else></span>
个人
</span>
</template>
</el-step>
<el-step title="">
<template #icon>
<span class="process_desc">
<span class="icon_box" v-if="step > 2"><bg-icon class="step_icon" icon="#bg-ic-file-success"></bg-icon></span>
<span class="circle" v-else></span>
完成
</span>
</template>
</el-step>
</el-steps>
</div>
</div>
<div class="content_main">
<platformAccountForm v-show="step === 1" ref="platformAccountFormRef" @action="getPlatformAccountFormData"></platformAccountForm>
<platformPersonForm v-show="step === 2" ref="plplatformPersonFormRef" @action="getPlatformPersonFormData"></platformPersonForm>
<div class="process_end" v-show="step === 3">
<div>
<div><img src="@/assets/imgs/img_data-complete.png" alt=""></div>
<div class="font_bold">平台用户新增成功</div>
<el-button @click="cancel">返回列表</el-button>
<el-button type="primary" @click="continueCreate">继续创建</el-button>
</div>
</div>
</div>
</div>
<div class="content_bottom" v-if="step !== 3">
<div v-show="step === 1">
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="nextStep">下一步</el-button>
</div>
<div v-show="step === 2">
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="previousStep">上一步</el-button>
<el-button type="primary" @click="submit">提交</el-button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { useRoute, useRouter } from 'vue-router';
import platformAccountForm from './platform-account-form.vue';
import platformPersonForm from './platform-person-form.vue';
import { reactive, ref,onBeforeMount,toRefs,computed, onBeforeUnmount, onMounted } from 'vue';
const route = useRoute();
const router = useRouter();
const step = ref(1);
const platformAccountFormRef = ref(null);
const plplatformPersonFormRef = ref(null);
const formData = reactive({
logo: '',
account: '',
phone: '',
password: '',
confirm_password: '',
role: '',
is_use: 1,
name: '',
email: '',
remark: '',
}); //账号信息表单+个人信息表单
// 下一步
const nextStep = () => {
platformAccountFormRef.value.submitForm();
}
//账号信息表单检验触发事件 data为null 校验失败
const getPlatformAccountFormData = (data) => {
if(data) {
formData.value = Object.assign(formData,data);
step.value = 2;
}else {
}
}
//个人信息表单检验触发事件 data为null 校验失败
const getPlatformPersonFormData = (data) => {
if(data) {
formData.value = Object.assign(formData,data);
console.log(formData);
step.value = 3;
}
}
//上一步
const previousStep = () => {
step.value--;
}
//提交表单
const submit = () => {
plplatformPersonFormRef.value.submitForm();
}
//继续创建 清空表单
const continueCreate = () => {
platformAccountFormRef.value.clearForm();
plplatformPersonFormRef.value.clearForm();
step.value = 1;
}
//取消
const cancel = () => {
router.go(-1);
}
onBeforeUnmount(()=>{
})
onMounted(() => {
if(route.query.type === "1") {
setTimeout(()=> {
platformAccountFormRef.value.setForm({
org: 'a',
code: 'b',
name: 'b',
desc: 'b',
logo: ['b'],
role: 'b',
account: 'b',
password: 'b',
confirm_password: 'b',
url: 'b',
firm_name: 'b',
is_use: 'b',
})
plplatformPersonFormRef.value.setForm({
contact_user: 'c',
phone: 'c',
email: 'c',
remark: 'c',
})
},500)
}
})
</script>
<style scoped>
.flex_cloumn {
display: flex;
flex-direction: column;
}
.content_top {
flex: 1;
display: flex;
flex-direction: column;
overflow: auto;
}
/* .content_top::-webkit-scrollbar {
width: 5px;
height: 0px;
}
.content_top::-webkit-scrollbar-thumb {
background: #dedede;
border-radius: 10px;
height: 0px;
}
.content_top::-webkit-scrollbar-track {
background: transparent;
border-radius: 2px;
} */
.content_bottom {
height: 68px;
line-height: 68px;
text-align: right;
padding: 0 20px;
border-top: 1px solid #e6e9ef;
}
.content_process {
border-bottom: 1px solid #e6e9ef;
padding: 38px 16%;
}
.content_main {
flex: 1;
padding: 30px;
box-sizing: border-box;
}
.process_desc {
background-color: #fff;
display: inline-block;
position: absolute;
padding: 0 5px;
font-size: 18px;
color: #202531;
font-weight: bold;
}
.process_desc img {
height: 25px;
width: 25px;
vertical-align: middle;
}
.process_end {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.process_end div {
text-align: center;
}
.step_icon {
color: #fff;
font-weight: 600;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.icon_box {
display: inline-block;
background-color: #2b4695;
width: 48px;
height: 48px;
border-radius: 99px;
position: relative;
border: 3px solid #b0bee8;
vertical-align: middle;
}
.circle {
display: inline-block;
background-color: #a9b1c7;
width: 24px;
height: 24px;
border-radius: 99px;
position: relative;
border: 4px solid #e6e9ef;
vertical-align: middle;
}
.content_process :deep() .el-step.is-horizontal .el-step__line {
height: 4px;
}
.content_process :deep() .el-step__head.is-finish .el-step__line {
background: linear-gradient(to right,#2b4695 50%,#e6e9ef 50%);
}
.process_complete :deep() .el-step__head.is-finish .el-step__line {
background: linear-gradient(to right,#2b4695 100%,#e6e9ef 0%);
}
</style>
<template>
<el-form
:label-position="'right'"
label-width="120px"
:model="platformAccountForm"
:rules="platformAccountFormRules"
ref="platformAccountRef"
style="max-width: 66%"
>
<el-form-item label="头像" prop="logo">
<bg-upload-image v-model="platformAccountForm.logo" :showTips="true" :limit="1" :fileSize="500" :fileSizeUnit="'KB'" listType="picture-card" :accept="['.jpg','.jpeg','.png']" customTips="请选择图片上传:大小120 * 120像素支持jpg、png等格式,图片需小于500KB"></bg-upload-image>
</el-form-item>
<el-form-item label="账号" prop="account">
<el-input v-model="platformAccountForm.account" />
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model="platformAccountForm.phone" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="platformAccountForm.password" />
</el-form-item>
<el-form-item label="确认密码" prop="confirm_password">
<el-input type="password" v-model="platformAccountForm.confirm_password" />
</el-form-item>
<el-form-item label="角色授权" prop="role">
<el-input v-model="platformAccountForm.role" />
</el-form-item>
<el-form-item label="是否启用" prop="is_use">
<bg-switch :labels="['否','是']" :values="[0,1]" v-model="platformAccountForm.is_use"></bg-switch>
</el-form-item>
</el-form>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue'
const platformAccountForm = reactive({
logo: '',
account: '',
phone: '',
password: '',
confirm_password: '',
role: '',
is_use: 1,
})
const validatePass = (rule, value, callback) => {
if (value !== platformAccountForm.password) {
callback(new Error("密码输入不一致"))
} else {
callback()
}
}
const platformAccountFormRules = reactive({
account: [
{ required: true, message: '请输入账号', trigger: 'blur' },
],
phone: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
],
role: [
{ required: true, message: '请选择角色', trigger: 'blur' },
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
],
confirm_password: [
{ required: true, message: '请确认密码', trigger: 'blur' },
{ validator: validatePass, trigger: 'blur' }
],
})
const platformAccountRef = ref(null)
const emit = defineEmits(['action'])
const submitForm = async () => {
if (!platformAccountRef) return
await platformAccountRef.value.validate((valid, fields) => {
if (valid) {
emit('action', platformAccountForm)
} else {
emit('action',null)
}
})
}
const clearForm = () => {
if (!platformAccountRef) return
platformAccountRef.value.resetFields()
}
const setForm = (data) => {
platformAccountForm.value = Object.assign(platformAccountForm, data);
}
onMounted(() => {
})
defineExpose({ submitForm, clearForm, setForm })
</script>
\ No newline at end of file
<template>
<el-form
:label-position="'right'"
label-width="120px"
:model="platformPersonForm"
:rules="platformPersonFormRules"
ref="platformPersonFormRef"
style="max-width: 66%"
>
<el-form-item label="姓名" prop="name">
<el-input v-model="platformPersonForm.name" />
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="platformPersonForm.email"/>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" :rows="3" v-model="platformPersonForm.remark" />
</el-form-item>
</el-form>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue'
const platformPersonForm = reactive({
name: '',
email: '',
remark: '',
})
const platformPersonFormRules = reactive({
})
const platformPersonFormRef = ref(null)
const emit = defineEmits(['action'])
const submitForm = async () => {
if (!platformPersonFormRef) return
await platformPersonFormRef.value.validate((valid, fields) => {
if (valid) {
emit('action', platformPersonForm)
} else {
emit('action',null)
}
})
}
const clearForm = () => {
if (!platformPersonFormRef) return
platformPersonFormRef.value.resetFields()
}
const setForm = (data) => {
platformPersonForm.value = Object.assign(platformPersonForm, data);
}
onMounted(() => {
})
defineExpose({ submitForm, clearForm, setForm })
</script>
\ No newline at end of file
<template>
<div class="page_container">
<div class="bg-breadcrumb">
<el-breadcrumb separator="/">
<el-breadcrumb-item> 组织管理 </el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/system/organization' }"> 组织管理 </el-breadcrumb-item>
<el-breadcrumb-item> 新增组织管理员 </el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="page_content flex_cloumn">
<div class="content_top apaas_scroll">
<div class="content_process">
<div>
<el-steps :active="step" >
<el-step title="" :class="{'process_complete': step > 1}">
<template #icon>
<span class="process_desc">
<span class="icon_box" v-if="step > 0"><bg-icon class="step_icon" icon="#bg-ic-file"></bg-icon></span>
<span class="circle" v-else></span>
账号信息
</span>
</template>
</el-step>
<el-step title="" :class="{'process_complete': step > 2}">
<template #icon>
<span class="process_desc">
<span class="icon_box" v-if="step > 1"><bg-icon class="step_icon" icon="#bg-ic-file-staff"></bg-icon></span>
<span class="circle" v-else></span>
个人信息
</span>
</template>
</el-step>
<el-step title="">
<template #icon>
<span class="process_desc">
<span class="icon_box" v-if="step > 2"><bg-icon class="step_icon" icon="#bg-ic-file-success"></bg-icon></span>
<span class="circle" v-else></span>
完成
</span>
</template>
</el-step>
</el-steps>
</div>
</div>
<div class="content_main">
<systemAccountForm v-show="step === 1" ref="systemAccountRef" @action="getSystemAccountFormData"></systemAccountForm>
<systemPersonForm v-show="step === 2" ref="systemPersonRef" @action="getSystemPersonFormData"></systemPersonForm>
<div class="process_end" v-show="step === 3">
<div>
<div><img src="@/assets/imgs/img_data-complete.png" alt=""></div>
<div class="font_bold">平台用户新增成功</div>
<el-button @click="cancel">返回列表</el-button>
<el-button type="primary" @click="continueCreate">继续创建</el-button>
</div>
</div>
</div>
</div>
<div class="content_bottom" v-if="step !== 3">
<div v-show="step === 1">
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="nextStep">下一步</el-button>
</div>
<div v-show="step === 2">
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="previousStep">上一步</el-button>
<el-button type="primary" @click="submit">提交</el-button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { useRoute, useRouter } from 'vue-router';
import systemAccountForm from './system-account-form.vue';
import systemPersonForm from './system-person-form.vue';
import { reactive, ref,onBeforeMount,toRefs,computed, onBeforeUnmount, onMounted } from 'vue';
const route = useRoute();
const router = useRouter();
const step = ref(1);
const systemAccountRef = ref(null);
const systemPersonRef = ref(null);
const formData = reactive({
org: '',
role: '',
logo: '',
account: '',
phone: '',
password: '',
confirm_password: '',
is_use: 1,
name: '',
certificate_type: '',
certificate_account: '',
email: '',
remark: '',
}); //账号信息表单+个人信息表单
// 下一步
const nextStep = () => {
systemAccountRef.value.submitForm();
}
//账号信息表单检验触发事件 data为null 校验失败
const getSystemAccountFormData = (data) => {
if(data) {
formData.value = Object.assign(formData,data);
step.value = 2;
}else {
}
}
//个人信息表单检验触发事件 data为null 校验失败
const getSystemPersonFormData = (data) => {
if(data) {
formData.value = Object.assign(formData,data);
console.log(formData);
step.value = 3;
}
}
//上一步
const previousStep = () => {
step.value--;
}
//提交表单
const submit = () => {
systemPersonRef.value.submitForm();
}
//继续创建 清空表单
const continueCreate = () => {
systemAccountRef.value.clearForm();
systemPersonRef.value.clearForm();
step.value = 1;
}
//取消
const cancel = () => {
router.go(-1);
}
onBeforeUnmount(()=>{
})
onMounted(() => {
if(route.query.type === "1") {
setTimeout(()=> {
systemAccountRef.value.setForm({
org: 'a',
code: 'b',
name: 'b',
desc: 'b',
logo: ['b'],
role: 'b',
account: 'b',
password: 'b',
confirm_password: 'b',
url: 'b',
firm_name: 'b',
is_use: 'b',
})
systemPersonRef.value.setForm({
contact_user: 'c',
phone: 'c',
email: 'c',
remark: 'c',
})
},500)
}
})
</script>
<style scoped>
.flex_cloumn {
display: flex;
flex-direction: column;
}
.content_top {
flex: 1;
display: flex;
flex-direction: column;
overflow: auto;
}
/* .content_top::-webkit-scrollbar {
width: 5px;
height: 0px;
}
.content_top::-webkit-scrollbar-thumb {
background: #dedede;
border-radius: 10px;
height: 0px;
}
.content_top::-webkit-scrollbar-track {
background: transparent;
border-radius: 2px;
} */
.content_bottom {
height: 68px;
line-height: 68px;
text-align: right;
padding: 0 20px;
border-top: 1px solid #e6e9ef;
}
.content_process {
border-bottom: 1px solid #e6e9ef;
padding: 38px 16%;
}
.content_main {
flex: 1;
padding: 30px;
box-sizing: border-box;
}
.process_desc {
background-color: #fff;
display: inline-block;
position: absolute;
padding: 0 5px;
font-size: 18px;
color: #202531;
font-weight: bold;
}
.process_desc img {
height: 25px;
width: 25px;
vertical-align: middle;
}
.process_end {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.process_end div {
text-align: center;
}
.step_icon {
color: #fff;
font-weight: 600;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.icon_box {
display: inline-block;
background-color: #2b4695;
width: 48px;
height: 48px;
border-radius: 99px;
position: relative;
border: 3px solid #b0bee8;
vertical-align: middle;
}
.circle {
display: inline-block;
background-color: #a9b1c7;
width: 24px;
height: 24px;
border-radius: 99px;
position: relative;
border: 4px solid #e6e9ef;
vertical-align: middle;
}
.content_process :deep() .el-step.is-horizontal .el-step__line {
height: 4px;
}
.content_process :deep() .el-step__head.is-finish .el-step__line {
background: linear-gradient(to right,#2b4695 50%,#e6e9ef 50%);
}
.process_complete :deep() .el-step__head.is-finish .el-step__line {
background: linear-gradient(to right,#2b4695 100%,#e6e9ef 0%);
}
</style>
<template>
<el-form
:label-position="'right'"
label-width="120px"
:model="systemAccountFormRef"
:rules="systemAccountFormRules"
ref="platformAccountRef"
style="max-width: 66%"
>
<el-form-item label="所属组织机构" prop="org">
<el-input v-model="systemAccountFormRef.org" />
</el-form-item>
<el-form-item label="角色" prop="role">
<el-input v-model="systemAccountFormRef.role" />
</el-form-item>
<el-form-item label="头像" prop="logo">
<bg-upload-image v-model="systemAccountFormRef.logo" :showTips="true" :limit="1" :fileSize="500" :fileSizeUnit="'KB'" listType="picture-card" :accept="['.jpg','.jpeg','.png']" customTips="请选择图片上传:大小120 * 120像素支持jpg、png等格式,图片需小于500KB"></bg-upload-image>
</el-form-item>
<el-form-item label="账号" prop="account">
<el-input v-model="systemAccountFormRef.account" />
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model="systemAccountFormRef.phone" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="systemAccountFormRef.password" />
</el-form-item>
<el-form-item label="确认密码" prop="confirm_password">
<el-input type="password" v-model="systemAccountFormRef.confirm_password" />
</el-form-item>
<el-form-item label="是否启用" prop="is_use">
<bg-switch :labels="['否','是']" :values="[0,1]" v-model="systemAccountFormRef.is_use"></bg-switch>
</el-form-item>
</el-form>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue'
const systemAccountFormRef = reactive({
org: '',
role: '',
logo: '',
account: '',
phone: '',
password: '',
confirm_password: '',
is_use: 1,
})
const validatePass = (rule, value, callback) => {
if (value !== systemAccountFormRef.password) {
callback(new Error("密码输入不一致"))
} else {
callback()
}
}
const systemAccountFormRules = reactive({
org: [
{ required: true, message: '请选择组织', trigger: 'blur' },
],
role: [
{ required: true, message: '请选择角色', trigger: 'blur' },
],
account: [
{ required: true, message: '请输入账号', trigger: 'blur' },
],
phone: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
],
confirm_password: [
{ required: true, message: '请确认密码', trigger: 'blur' },
{ validator: validatePass, trigger: 'blur' }
],
})
const platformAccountRef = ref(null)
const emit = defineEmits(['action'])
const submitForm = async () => {
if (!platformAccountRef) return
await platformAccountRef.value.validate((valid, fields) => {
if (valid) {
emit('action', systemAccountFormRef)
} else {
emit('action',null)
}
})
}
const clearForm = () => {
if (!platformAccountRef) return
platformAccountRef.value.resetFields()
}
const setForm = (data) => {
systemAccountFormRef.value = Object.assign(systemAccountFormRef, data);
}
onMounted(() => {
})
defineExpose({ submitForm, clearForm, setForm })
</script>
\ No newline at end of file
<template>
<el-form
:label-position="'right'"
label-width="120px"
:model="contactForm"
:rules="contactFormRules"
ref="contactRef"
style="max-width: 66%"
>
<el-form-item label="联系人姓名" prop="name">
<el-input v-model="contactForm.name" />
</el-form-item>
<el-form-item label="证件类型" prop="certificate_type">
<el-input v-model="contactForm.certificate_type" />
</el-form-item>
<el-form-item label="证件号" prop="certificate_account">
<el-input v-model="contactForm.certificate_account" />
</el-form-item>
<el-form-item label="联系人邮箱">
<el-input v-model="contactForm.email"/>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" :rows="3" v-model="contactForm.remark" />
</el-form-item>
</el-form>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue'
const contactForm = reactive({
name: '',
certificate_type: '',
certificate_account: '',
email: '',
remark: '',
})
const contactFormRules = reactive({
})
const contactRef = ref(null)
const emit = defineEmits(['action'])
const submitForm = async () => {
if (!contactRef) return
await contactRef.value.validate((valid, fields) => {
if (valid) {
emit('action', contactForm)
} else {
emit('action',null)
}
})
}
const clearForm = () => {
if (!contactRef) return
contactRef.value.resetFields()
}
const setForm = (data) => {
contactForm.value = Object.assign(contactForm, data);
}
onMounted(() => {
})
defineExpose({ submitForm, clearForm, setForm })
</script>
\ No newline at end of file
...@@ -4,11 +4,17 @@ ...@@ -4,11 +4,17 @@
<div class="custom_tree_node"> <div class="custom_tree_node">
<span <span
class="label-text " class="label-text "
:class="{'is_active': treeSelected === data.dept}" :class="{'is_active': selectData && selectData.dept === data.dept}"
:title="node.label" :title="node.label"
>{{ node.label }} >{{ node.label }}
</span> </span>
<span class="tree-action-box" :class="{'position_sticky': isSticky(data.label) }" @click.stop="showAction($event, data,node)"> <span v-if="data.dept === 1" class="tree-action-box first_node" @click.stop="showAction($event, data,node)">
<bg-icon
class="tree-more"
icon="#bg-ic-s-more"
></bg-icon>
</span>
<span v-else class="tree-action-box" :class="{'position_sticky': isSticky(data.label) }" @click.stop="showAction($event, data,node)">
<bg-icon <bg-icon
class="tree-more" class="tree-more"
icon="#bg-ic-s-more" icon="#bg-ic-s-more"
...@@ -23,15 +29,23 @@ ...@@ -23,15 +29,23 @@
v-show="actionFlag" v-show="actionFlag"
:style="{ top: acTop, left: acLeft }" :style="{ top: acTop, left: acLeft }"
> >
<div v-if="selectData && selectData.dept === 1" class="action" @click="treeCreate({type: 'directory',target: null})">新建目录</div>
<div class="action" >新建本级目录</div> <div v-if="selectData && selectData.dept === 1" class="action" @click="treeCreate({type: 'org',target: null})" >新建组织</div>
<div class="action" >新建下级目录</div>
<div class="action" >新建本级组织</div> <div v-if="selectData && selectData.children" class="action" @click="treeCreate({type: 'directory',action: 'create',target: 'local'})">新建本级目录</div>
<div class="action" >新建下级组织</div> <div v-if="selectData && selectData.children" class="action" @click="treeCreate({type: 'directory',action: 'create',target: 'child'})">新建下级目录</div>
<div class="action" >编辑目录</div> <div v-if="selectData && selectData.children" class="action" @click="treeCreate({type: 'org',action: 'create',target: 'local'})">新建本级组织</div>
<div class="action" >删除</div> <div v-if="selectData && selectData.children" class="action" @click="treeCreate({type: 'org',action: 'create',target: 'child'})">新建下级组织</div>
<div class="action" >上移</div> <div v-if="selectData && selectData.children" class="action" @click="treeCreate({type: 'directory',action: 'edit',target: 'local'})">编辑目录</div>
<div class="action" >下移</div> <div v-if="selectData && selectData.children" class="action" @click="treeCreate({type: 'directory',action: 'delete',target: 'local'})">删除</div>
<div v-if="selectData && selectData.children" class="action" @click="treeCreate({type: 'directory',action: 'mvup',target: 'local'})">上移</div>
<div v-if="selectData && selectData.children" class="action" @click="treeCreate({type: 'directory',action: 'mvdown',target: 'local'})">下移</div>
<div v-if="selectData && !selectData.children && selectData.dept !== 1" class="action" @click="treeCreate({type: 'org',action: 'create',target: 'local'})">新建本级组织</div>
<div v-if="selectData && !selectData.children && selectData.dept !== 1" class="action" @click="treeCreate({type: 'org',action: 'edit',target: 'local'})">编辑组织</div>
<div v-if="selectData && !selectData.children && selectData.dept !== 1" class="action" @click="treeCreate({type: 'org',action: 'delete',target: 'local'})">删除</div>
<div v-if="selectData && !selectData.children && selectData.dept !== 1" class="action" @click="treeCreate({type: 'org',action: 'mvup',target: 'local'})">上移</div>
<div v-if="selectData && !selectData.children && selectData.dept !== 1" class="action" @click="treeCreate({type: 'org',action: 'mvdown',target: 'local'})">下移</div>
</div> </div>
</Teleport> </Teleport>
</template> </template>
...@@ -41,8 +55,6 @@ import { reactive, toRefs, ref, } from '@vue/reactivity' ...@@ -41,8 +55,6 @@ import { reactive, toRefs, ref, } from '@vue/reactivity'
import { getCurrentInstance } from 'vue' import { getCurrentInstance } from 'vue'
import { computed, onBeforeMount, onBeforeUnmount } from '@vue/runtime-core' import { computed, onBeforeMount, onBeforeUnmount } from '@vue/runtime-core'
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
const treeSelected = ref(null);
const data = [ const data = [
{ {
...@@ -55,6 +67,7 @@ import { useRouter } from 'vue-router'; ...@@ -55,6 +67,7 @@ import { useRouter } from 'vue-router';
children: [ children: [
{ {
label: '武汉市啊实打实大苏打大阿斯顿发士大夫地', label: '武汉市啊实打实大苏打大阿斯顿发士大夫地',
dept: 666,
children: [ children: [
{ {
label: '公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅', label: '公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅',
...@@ -162,12 +175,15 @@ import { useRouter } from 'vue-router'; ...@@ -162,12 +175,15 @@ import { useRouter } from 'vue-router';
const acTop = ref(0); const acTop = ref(0);
const acLeft = ref(0); const acLeft = ref(0);
const actionFlag = ref(false) const actionFlag = ref(false)
const selectData = ref(null)
const selectDataParent = ref(null)
const showAction = (e, data,node) => { const showAction = (e, data,node) => {
const rect = e.target.getBoundingClientRect(); //获取点击的dom的位置 const rect = e.target.getBoundingClientRect(); //获取点击的dom的位置
console.log(rect, data,node);
acTop.value = rect.y - 17 + "px"; acTop.value = rect.y - 17 + "px";
acLeft.value = rect.x + 35 + "px"; acLeft.value = rect.x + 35 + "px";
actionFlag.value = true; actionFlag.value = true;
selectData.value = data;
selectDataParent.value = node.parent.data.label ? node.parent.data : null;
}; };
const isSticky = (data) => { const isSticky = (data) => {
...@@ -182,22 +198,23 @@ import { useRouter } from 'vue-router'; ...@@ -182,22 +198,23 @@ import { useRouter } from 'vue-router';
actionFlag.value = false; actionFlag.value = false;
} }
// const nodeClick = (node,nodeAttr,treeNode,event)=>{
// }
const emit = defineEmits(['action']) const emit = defineEmits(['action'])
const handleNodeClick = (node,nodeAttr,treeNode,event) => { const handleNodeClick = (node,nodeAttr,treeNode,event) => {
treeSelected.value = data.dept selectData.value = node;
console.log(treeSelected.value) emit('select',{node,nodeAttr,treeNode,event});
emit('select',{node,nodeAttr,treeNode,event})
//只读则无操作事件 //只读则无操作事件
closeAction() closeAction();
}
const treeCreate = (params) => {
emit('create',{type: params.type,action: params.action,data: params.target === 'local'? selectDataParent : selectData});
} }
onBeforeMount(()=>{ onBeforeMount(()=>{
//只读则无操作事件 //只读则无操作事件
window.addEventListener("click", closeAction) window.addEventListener("click", closeAction);
window.addEventListener("scroll", closeAction,true) window.addEventListener("scroll", closeAction,true);
}) })
onBeforeUnmount(()=>{ onBeforeUnmount(()=>{
...@@ -234,6 +251,9 @@ import { useRouter } from 'vue-router'; ...@@ -234,6 +251,9 @@ import { useRouter } from 'vue-router';
.file-tree :deep() .el-tree-node__content:hover .tree-action-box { .file-tree :deep() .el-tree-node__content:hover .tree-action-box {
display: inline-block; display: inline-block;
} }
.file-tree :deep() .el-tree-node__content .first_node {
display: inline-block;
}
.file-tree :deep() .el-tree-node > .el-tree-node__children { .file-tree :deep() .el-tree-node > .el-tree-node__children {
overflow: visible; overflow: visible;
} }
......
<template>
<div class="page_container">
<div class="bg-breadcrumb">
<el-breadcrumb separator="/">
<el-breadcrumb-item> 组织管理 </el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/system/organization' }"> 组织管理 </el-breadcrumb-item>
<el-breadcrumb-item> 用户详情 </el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="page_content apaas_scroll">
<div class="info_row">
<div class="title">
<div><span class="icon_box"></span> 基础信息</div>
<div class="dashed_line">
</div>
</div>
<div class="info_content">
<div class="img_box">
<img src="/src/assets/imgs/home_ic_user.png" style="height: 96px;width: 96px;border-radius: 99px" alt="">
</div>
<div class="info_box">
<bg-info :data="baseInfo"></bg-info>
</div>
</div>
</div>
<div>
<div class="title">
<div><span class="icon_box"></span> 基础信息</div>
<div class="dashed_line">
</div>
</div>
<div class="info_content">
<div class="img_box"></div>
<div class="info_box">
<bg-info :data="contactInfo"></bg-info>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { reactive, toRefs, ref, } from '@vue/reactivity'
import { getCurrentInstance } from 'vue'
import { computed, onBeforeMount } from '@vue/runtime-core'
import { useRouter } from 'vue-router';
const baseInfo = reactive(
[
{
name: "所属机构",
value: "某某省/某某市/大数据局",
nameWidth: 112
},
{
name: "业务系统编码",
value: "00000001",
nameWidth: 112
},
{
name: "业务系统名称",
value: "大数据处理系统",
nameWidth: 112
},
{
name: "账号",
value: "admin001",
nameWidth: 112
},
{
name: "AppID",
value: "dasjkjjk",
nameWidth: 112
},
{
name: "AppSecret",
value: "asda*******************jhjh",
nameWidth: 112
},
{
name: "创建人",
value: "admin(机构管理员)",
nameWidth: 112
},
{
name: "创建时间",
value: "2022-01-01 10:10:10",
nameWidth: 112
},
{
name: "是否启用",
value: "",
nameWidth: 112
},
{
name: "开发厂商名单",
value: "某某大数据开发商",
nameWidth: 112
},
{
name: "访问地址",
value: "http://www.bigdata.com",
full: true,
nameWidth: 112
},
{
name: "业务系统描述",
value: "系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述",
full: true,
nameWidth: 112
},
]
)
const contactInfo = reactive(
[{
name: "联系人姓名",
value: "xxx",
nameWidth: 112
},
{
name: "联系人手机号",
value: "15627365265",
nameWidth: 112
},
{
name: "联系人邮箱",
value: "http://www.bigdata@163.com",
full: true,
nameWidth: 112
},
{
name: "备注",
value: "系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述",
full: true,
nameWidth: 112
},
]
)
onBeforeMount(() => {
})
</script>
<style scoped>
.page_content {
padding: 15px;
overflow: auto;
}
.info_content {
display: flex;
}
.info_row {
margin-bottom: 40px;
}
.img_box {
width: 120px;
}
.info_box {
width: 60%;
}
.title {
font-size: 18px;
color: #1a1a1a;
font-weight: bold;
margin-bottom: 10px;
display: flex;
align-items: center;
}
.dashed_line {
flex: 1;
height: 1px;
margin: 0 10px;
border-bottom: dashed 1px #dadee7;
}
.icon_box {
display: inline-block;
width: 4px;
height: 14px;
background-color: #3759be;
border-radius: 2px;
margin-right: 5px;
}
</style>
\ No newline at end of file
...@@ -183,10 +183,17 @@ var adminMenu = [ ...@@ -183,10 +183,17 @@ var adminMenu = [
{ {
name: "account-add-manage", name: "account-add-manage",
menuName:'新建账号', menuName:'新建账号',
parentPath:null, parentPath:'/develop/account',
menuType:'manager', menuType:'manager',
path: "/develop/account/add", path: "/develop/account/add",
}, },
{
name: "account-detail-manage",
menuName:'账号详情',
parentPath: '/develop/account',
menuType:'manager',
path: "/develop/account/detail",
},
{ {
name: "menu-manage", name: "menu-manage",
menuName:'菜单管理', menuName:'菜单管理',
...@@ -214,6 +221,38 @@ var adminMenu = [ ...@@ -214,6 +221,38 @@ var adminMenu = [
show:true, show:true,
path: "/system/organization", path: "/system/organization",
}, },
{
name: "paltform-user-manage",
menuName:'新增平台用户',
parentPath: '/system/organization',
menuType:'manager',
show:false,
path: "/system/organization/platform-user",
},
{
name: "system-user-manage",
menuName:'新增组织用户',
parentPath: '/system/organization',
menuType:'manager',
show: false,
path: "/system/organization/system-user",
},
{
name: "user-detail-manage",
menuName:'用户详情',
parentPath: '/system/organization',
menuType:'manager',
show: false,
path: "/system/organization/user-detail",
},
{
name: "org-detail-manage",
menuName:'组织详情',
parentPath: '/system/organization',
menuType:'manager',
show: false,
path: "/system/organization/org-detail",
},
{ {
name: "role-manage", name: "role-manage",
menuName:'角色管理', menuName:'角色管理',
......
...@@ -39,7 +39,7 @@ export default { ...@@ -39,7 +39,7 @@ export default {
} }
}, },
build:{ build:{
outDir:'dist/apaas/manage/ui',//打包输出文件夹 outDir:'dist/apaas/system/ui',//打包输出文件夹
assetsDir:'static',//打包输出静态文件 assetsDir:'static',//打包输出静态文件
}, },
......
...@@ -528,6 +528,11 @@ compute-scroll-into-view@^1.0.17: ...@@ -528,6 +528,11 @@ compute-scroll-into-view@^1.0.17:
resolved "https://registry.npmmirror.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.17.tgz#6a88f18acd9d42e9cf4baa6bec7e0522607ab7ab" resolved "https://registry.npmmirror.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.17.tgz#6a88f18acd9d42e9cf4baa6bec7e0522607ab7ab"
integrity sha512-j4dx+Fb0URmzbwwMUrhqWM2BEWHdFGx+qZ9qqASHRPqvTYdqvWnHg0H1hIbcyLnvgnoNAVMlwkepyqM3DaIFUg== integrity sha512-j4dx+Fb0URmzbwwMUrhqWM2BEWHdFGx+qZ9qqASHRPqvTYdqvWnHg0H1hIbcyLnvgnoNAVMlwkepyqM3DaIFUg==
crypto-js@^4.1.1:
version "4.1.1"
resolved "https://mirrors.cloud.tencent.com/npm/crypto-js/-/crypto-js-4.1.1.tgz#9e485bcf03521041bd85844786b83fb7619736cf"
integrity sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==
css-line-break@^2.1.0: css-line-break@^2.1.0:
version "2.1.0" version "2.1.0"
resolved "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz#bfef660dfa6f5397ea54116bb3cb4873edbc4fa0" resolved "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz#bfef660dfa6f5397ea54116bb3cb4873edbc4fa0"
...@@ -890,6 +895,11 @@ is-url@^1.2.4: ...@@ -890,6 +895,11 @@ is-url@^1.2.4:
resolved "https://registry.npmmirror.com/is-url/-/is-url-1.2.4.tgz#04a4df46d28c4cff3d73d01ff06abeb318a1aa52" resolved "https://registry.npmmirror.com/is-url/-/is-url-1.2.4.tgz#04a4df46d28c4cff3d73d01ff06abeb318a1aa52"
integrity sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww== integrity sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==
js-md5@^0.7.3:
version "0.7.3"
resolved "https://mirrors.cloud.tencent.com/npm/js-md5/-/js-md5-0.7.3.tgz#b4f2fbb0b327455f598d6727e38ec272cd09c3f2"
integrity sha512-ZC41vPSTLKGwIRjqDh8DfXoCrdQIyBgspJVPXHBGu4nZlAEvG3nf+jO9avM9RmLiGakg7vz974ms99nEV0tmTQ==
lodash-es@^4.17.21: lodash-es@^4.17.21:
version "4.17.21" version "4.17.21"
resolved "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz" resolved "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment