348 lines
13 KiB
Vue
348 lines
13 KiB
Vue
<!-- 系统初始化 -->
|
|
<template>
|
|
<div class="page-container">
|
|
<div class="container-text">
|
|
<div class="container-title">系统初始化</div>
|
|
</div>
|
|
<div class="container-box">
|
|
<div class="container-main">
|
|
<div class="container-right">
|
|
<j-spin :spinning="spinning">
|
|
<j-collapse v-model:activeKey="activeKey" accordion>
|
|
<j-collapse-panel key="1">
|
|
<template #header>
|
|
<span class="title">基本信息</span>
|
|
<span class="sub-title"
|
|
>配置平台名称、登录背景图、主题色等基本信息</span
|
|
>
|
|
</template>
|
|
<Basic ref="basicRef" />
|
|
</j-collapse-panel>
|
|
<j-collapse-panel key="2" forceRender>
|
|
<template #header>
|
|
<span class="title">菜单初始化</span>
|
|
<span class="sub-title"
|
|
>初始化菜单数据</span
|
|
>
|
|
</template>
|
|
<Menu ref="menuRef"></Menu>
|
|
</j-collapse-panel>
|
|
<j-collapse-panel key="3" forceRender>
|
|
<template #header>
|
|
<span class="title">角色初始化</span>
|
|
<span class="sub-title"
|
|
>初始化内置角色与权限数据</span
|
|
>
|
|
</template>
|
|
<Role ref="roleRef"></Role>
|
|
</j-collapse-panel>
|
|
<j-collapse-panel key="4" forceRender>
|
|
<template #header>
|
|
<span class="title">初始化数据</span>
|
|
<span class="sub-title"
|
|
>初始化设备接入示例数据</span
|
|
>
|
|
</template>
|
|
<InitData ref="initDataRef"></InitData>
|
|
</j-collapse-panel>
|
|
</j-collapse>
|
|
</j-spin>
|
|
<j-button
|
|
type="primary"
|
|
class="btn-style"
|
|
@click="submitData"
|
|
:loading="loading"
|
|
>确定</j-button
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { getImage } from '@/utils/comm.ts';
|
|
import Basic from './Basic/index.vue';
|
|
import Role from './Role/index.vue';
|
|
import Menu from './Menu/index.vue';
|
|
import InitData from './InitData/index.vue';
|
|
import { modalState, formState, logoState } from './data/interface';
|
|
import { saveInit } from '@/api/initHome';
|
|
import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
|
|
import { FILE_UPLOAD } from '@/api/comm';
|
|
import { LocalStore } from '@/utils/comm';
|
|
import { message } from 'jetlinks-ui-components';
|
|
const basicRef = ref();
|
|
const roleRef = ref();
|
|
const initDataRef = ref();
|
|
const menuRef = ref();
|
|
const loading = ref(false);
|
|
/**
|
|
* 默认打开第一个初始菜单
|
|
*/
|
|
const activeKey = ref<string>('1');
|
|
const spinning = ref<boolean>(false);
|
|
// const action = ref<string>(`${BASE_API_PATH}/file/static`);
|
|
// const headers = ref({ [TOKEN_KEY]: LocalStore.get(TOKEN_KEY) });
|
|
/**
|
|
* 提交基础表单
|
|
*/
|
|
/**
|
|
* 跳转首页
|
|
*/
|
|
const jump = () => {
|
|
window.location.href = '/';
|
|
};
|
|
/**
|
|
* 提交所有数据
|
|
*/
|
|
const submitData = async () => {
|
|
loading.value = true;
|
|
const basicRes = await basicRef.value.submitBasic();
|
|
if (!basicRes) {
|
|
loading.value = false;
|
|
return;
|
|
}
|
|
const menuRes = await menuRef.value.updataMenu();
|
|
if (!menuRes) {
|
|
loading.value = false;
|
|
return;
|
|
}
|
|
const roleRes = await roleRef.value.submitRole();
|
|
if (!roleRes) {
|
|
loading.value = false;
|
|
return;
|
|
}
|
|
const initDataRes = await initDataRef.value.save();
|
|
if (!initDataRes) {
|
|
loading.value = false;
|
|
return;
|
|
}
|
|
loading.value = false;
|
|
// 当前数据是否成功提交
|
|
if (basicRes && menuRes && roleRes && initDataRes) {
|
|
message.success('保存成功');
|
|
// // 记录初始化数据，跳转首页
|
|
const res = await saveInit();
|
|
if (res.status === 200) {
|
|
jump();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped lang="less">
|
|
.page-container {
|
|
width: 100%;
|
|
height: 100vh;
|
|
padding: 32px 128px 64px;
|
|
overflow: hidden;
|
|
background-image: url(/images/init-home/background.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
.container-text {
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
.container-title {
|
|
position: relative;
|
|
padding-left: 10px;
|
|
color: rgba(0, 0, 0, 0.8);
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
&:before {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 4px;
|
|
height: 100%;
|
|
background-color: #1d39c4;
|
|
border-radius: 0 3px 3px 0;
|
|
content: '';
|
|
}
|
|
}
|
|
}
|
|
.container-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 24px;
|
|
background: #fff;
|
|
.container-main {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
.container-right {
|
|
width: calc(100% - 70px);
|
|
.title {
|
|
font-size: 15px;
|
|
}
|
|
.sub-title {
|
|
margin-top: 2px;
|
|
margin-left: 8px;
|
|
color: #666;
|
|
font-size: 12px;
|
|
opacity: 0.85;
|
|
}
|
|
.img-style {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.upload-image-warp-logo {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
.upload-image-border-logo {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 1px dashed #d9d9d9;
|
|
transition: all 0.3s;
|
|
width: 160px;
|
|
height: 150px;
|
|
&:hover {
|
|
border: 1px dashed #1890ff;
|
|
display: flex;
|
|
}
|
|
.upload-image-content-logo {
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 160px;
|
|
height: 150px;
|
|
padding: 8px;
|
|
background-color: rgba(0, 0, 0, 0.06);
|
|
cursor: pointer;
|
|
.loading-logo {
|
|
position: absolute;
|
|
top: 50%;
|
|
}
|
|
.loading-icon {
|
|
position: absolute;
|
|
}
|
|
.upload-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: 50%;
|
|
background-size: cover;
|
|
}
|
|
.upload-image-icon {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: 50%;
|
|
background-size: inherit;
|
|
}
|
|
.upload-image-mask {
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
color: #fff;
|
|
font-size: 16px;
|
|
background-color: rgba(0, 0, 0, 0.35);
|
|
}
|
|
&:hover .upload-image-mask {
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.upload-image-warp-back {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
.upload-image-border-back {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 1px dashed #d9d9d9;
|
|
transition: all 0.3s;
|
|
width: 570px;
|
|
height: 415px;
|
|
&:hover {
|
|
border: 1px dashed #1890ff;
|
|
display: flex;
|
|
}
|
|
.upload-image-content-back {
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 570px;
|
|
height: 415px;
|
|
padding: 8px;
|
|
background-color: rgba(0, 0, 0, 0.06);
|
|
cursor: pointer;
|
|
.loading-back {
|
|
position: absolute;
|
|
}
|
|
.upload-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: 50%;
|
|
background-size: cover;
|
|
}
|
|
.upload-image-mask {
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
color: #fff;
|
|
font-size: 16px;
|
|
background-color: rgba(0, 0, 0, 0.35);
|
|
}
|
|
&:hover .upload-image-mask {
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.upload-tips {
|
|
color: rgba(0, 0, 0, 0.45);
|
|
font-size: 14px;
|
|
line-height: 1.5715;
|
|
}
|
|
// .uplod-style {
|
|
// :deep(.ant-upload.ant-upload-select-picture-card) {
|
|
// width: 180px;
|
|
// height: 180px;
|
|
// }
|
|
// }
|
|
.btn-style {
|
|
margin-top: 20px;
|
|
color: #fff;
|
|
border-color: #1d39c4;
|
|
background: #1d39c4;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
::-webkit-scrollbar {
|
|
width: 12px;
|
|
}
|
|
|
|
/* 滚动槽 */
|
|
::-webkit-scrollbar-track {
|
|
background: #f2f2f2;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* 滚动条滑块 */
|
|
::-webkit-scrollbar-thumb {
|
|
background: #cecece;
|
|
border-radius: 8px;
|
|
}
|
|
}
|
|
</style>
|