feat: 初始化页面添加接口调试和图片上传
This commit is contained in:
xiongqian
parent
b0983a1988
commit
2094994890
|
|
@ -1,15 +1,15 @@
|
||||||
import server from '@/utils/request';
|
import server from '@/utils/request';
|
||||||
|
|
||||||
// 更新全部菜单
|
// 更新全部菜单
|
||||||
export const updateMenus = (data: any) => server
|
export const updateMenus = (data: any) => server.path(`/menu/iot/_all`, data)
|
||||||
// 添加角色
|
// 添加角色
|
||||||
export const addRole = (data: any) => server.post(`/role`)
|
export const addRole = (data: any) => server.post(`/role`, data)
|
||||||
|
|
||||||
//更新权限菜单
|
//更新权限菜单
|
||||||
export const getRoleMenu = (id: string) => server.get(`/menu/role/${id}/_grant/tree`)
|
export const getRoleMenu = (id: string) => server.get(`/menu/role/${id}/_grant/tree`)
|
||||||
|
|
||||||
//更新权限菜单
|
//更新权限菜单
|
||||||
export const updateRoleMenu = (id: string, data: any) => server.put(`/menu/role/${id}/_grant`)
|
export const updateRoleMenu = (id: string, data: any) => server.put(`/menu/role/${id}/_grant`, data)
|
||||||
|
|
||||||
// 记录初始化
|
// 记录初始化
|
||||||
export const saveInit = () => server.post(`/user/settings/init`,{ init: true },)
|
export const saveInit = () => server.post(`/user/settings/init`,{ init: true },)
|
||||||
|
|
@ -22,4 +22,34 @@ export const getInit = () => server.get(`/user/settings/init`)
|
||||||
export const getSystemPermission = () =>server.get(`/system/resources/permission`)
|
export const getSystemPermission = () =>server.get(`/system/resources/permission`)
|
||||||
|
|
||||||
// 保存基础信息
|
// 保存基础信息
|
||||||
export const save = (data?: any) => server.post('/system/config/scope/_save')
|
export const save = (data?: any) => server.post('/system/config/scope/_save',data)
|
||||||
|
|
||||||
|
// 查询对应协议下的本地端口数据
|
||||||
|
export const getResourcesCurrent = () => server.get('/network/resources/alive/_current')
|
||||||
|
|
||||||
|
// 保存网络组件
|
||||||
|
export const saveNetwork = (data: any) => server.post(`/network/config`, data)
|
||||||
|
|
||||||
|
// 保存协议
|
||||||
|
export const saveProtocol = () => server.post(`/protocol/default-protocol/_save`,)
|
||||||
|
|
||||||
|
// 新增设备接入网关
|
||||||
|
export const saveAccessConfig = (data: any) => server.post(`/gateway/device`, data)
|
||||||
|
|
||||||
|
// 新增产品
|
||||||
|
export const saveProduct = (data: any) => server.post(`/device/product`,data)
|
||||||
|
|
||||||
|
// 新增设备
|
||||||
|
export const saveDevice = (data: any) => server.post(`/device/instance`,data)
|
||||||
|
|
||||||
|
// 启用设备
|
||||||
|
export const deployDevice = (deviceId: string, params?: any) => server.post(`/device-instance/${deviceId}/deploy`,params,)
|
||||||
|
export const changeDeploy= (id: string) => server.post(`/device-product/${id}/deploy`)
|
||||||
|
|
||||||
|
// 查询保存后的数据
|
||||||
|
export const detail = (data?: any) => server.post(`/system/config/scopes`, data)
|
||||||
|
|
||||||
|
// 获取协议
|
||||||
|
export const getProtocol = () =>server.get(`/protocol/_query/no-paging?paging=false`)
|
||||||
|
|
||||||
|
// 上传文件
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@ export interface modalState {
|
||||||
port: string; // 本地端口
|
port: string; // 本地端口
|
||||||
publicHost: string; // 公网地址
|
publicHost: string; // 公网地址
|
||||||
publicPort: number | null; // 公网端口
|
publicPort: number | null; // 公网端口
|
||||||
rules: Record<string, Rule[]>;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**基本信息表单 */
|
/**基本信息表单 */
|
||||||
|
|
@ -21,17 +21,26 @@ export interface formState {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* logo上传表单
|
* 图片上传表单
|
||||||
*/
|
*/
|
||||||
export interface logoState {
|
export interface logoState {
|
||||||
logoValue: string;
|
logoValue: string;
|
||||||
logoLoading: boolean;
|
logoLoading: boolean;
|
||||||
|
backLoading: boolean;
|
||||||
|
iconLoading: boolean;
|
||||||
inLogo: boolean;
|
inLogo: boolean;
|
||||||
inIcon: boolean;
|
inIcon: boolean;
|
||||||
inBackground: boolean;
|
inBackground: boolean;
|
||||||
iconValue: string;
|
iconValue: string;
|
||||||
backValue: string;
|
backValue: string;
|
||||||
|
backSize: number;
|
||||||
|
logoSize: number;
|
||||||
|
imageTypes:Array<string>;
|
||||||
|
iconTypes: Array<string>,
|
||||||
|
beforeLogoUpload:(file: UploadProps['beforeUpload']) => void
|
||||||
handleChangeLogo:(info: UploadChangeParam ) => void
|
handleChangeLogo:(info: UploadChangeParam ) => void
|
||||||
beforeBackUpload:(file: UploadProps['beforeUpload']) => void
|
beforeBackUpload:(file: UploadProps['beforeUpload']) => void
|
||||||
changeBackUpload:(info: UploadChangeParam ) => void
|
changeBackUpload:(info: UploadChangeParam ) => void
|
||||||
|
beforeIconUpload:(file: UploadProps['beforeUpload']) => void
|
||||||
|
changeIconUpload:(info: UploadChangeParam ) => void
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -109,16 +109,44 @@
|
||||||
class="upload-image-border-logo"
|
class="upload-image-border-logo"
|
||||||
>
|
>
|
||||||
<a-upload
|
<a-upload
|
||||||
|
name="file"
|
||||||
|
:action="
|
||||||
|
action
|
||||||
|
"
|
||||||
|
:headers="
|
||||||
|
headers
|
||||||
|
"
|
||||||
:showUploadList="
|
:showUploadList="
|
||||||
false
|
false
|
||||||
"
|
"
|
||||||
|
:beforeUpload="
|
||||||
|
beforeLogoUpload
|
||||||
|
"
|
||||||
@change="
|
@change="
|
||||||
handleChangeLogo
|
handleChangeLogo
|
||||||
"
|
"
|
||||||
|
:accept="
|
||||||
|
imageTypes &&
|
||||||
|
imageTypes.length
|
||||||
|
? imageTypes.toString()
|
||||||
|
: ''
|
||||||
|
"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="upload-image-content-logo"
|
class="upload-image-content-logo"
|
||||||
>
|
>
|
||||||
|
<div
|
||||||
|
class="loading-logo"
|
||||||
|
v-if="
|
||||||
|
logoLoading
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<LoadingOutlined
|
||||||
|
style="
|
||||||
|
font-size: 28px;
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
class="upload-image"
|
class="upload-image"
|
||||||
v-if="
|
v-if="
|
||||||
|
|
@ -166,7 +194,6 @@
|
||||||
</a-upload>
|
</a-upload>
|
||||||
<div
|
<div
|
||||||
v-if="
|
v-if="
|
||||||
logoValue &&
|
|
||||||
logoLoading
|
logoLoading
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
|
|
@ -223,10 +250,45 @@
|
||||||
<div
|
<div
|
||||||
class="upload-image-border-logo"
|
class="upload-image-border-logo"
|
||||||
>
|
>
|
||||||
<a-upload>
|
<a-upload
|
||||||
|
name="file"
|
||||||
|
:action="
|
||||||
|
action
|
||||||
|
"
|
||||||
|
:headers="
|
||||||
|
headers
|
||||||
|
"
|
||||||
|
:showUploadList="
|
||||||
|
false
|
||||||
|
"
|
||||||
|
:beforeUpload="
|
||||||
|
beforeIconUpload
|
||||||
|
"
|
||||||
|
@change="
|
||||||
|
changeIconUpload
|
||||||
|
"
|
||||||
|
:accept="
|
||||||
|
iconTypes &&
|
||||||
|
iconTypes.length
|
||||||
|
? iconTypes.toString()
|
||||||
|
: ''
|
||||||
|
"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
class="upload-image-content-logo"
|
class="upload-image-content-logo"
|
||||||
>
|
>
|
||||||
|
<div
|
||||||
|
v-if="
|
||||||
|
iconLoading
|
||||||
|
"
|
||||||
|
class="loading-icon"
|
||||||
|
>
|
||||||
|
<LoadingOutlined
|
||||||
|
style="
|
||||||
|
font-size: 28px;
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
class="upload-image-icon"
|
class="upload-image-icon"
|
||||||
v-if="
|
v-if="
|
||||||
|
|
@ -249,20 +311,7 @@
|
||||||
<div
|
<div
|
||||||
v-else
|
v-else
|
||||||
>
|
>
|
||||||
<div
|
<div>
|
||||||
v-if="
|
|
||||||
logoLoading
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<LoadingOutlined
|
|
||||||
style="
|
|
||||||
font-size: 28px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-else
|
|
||||||
>
|
|
||||||
<PlusOutlined
|
<PlusOutlined
|
||||||
style="
|
style="
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
|
|
@ -298,16 +347,40 @@
|
||||||
class="upload-image-border-back"
|
class="upload-image-border-back"
|
||||||
>
|
>
|
||||||
<a-upload
|
<a-upload
|
||||||
@beforeUpload="
|
name="file"
|
||||||
|
:action="action"
|
||||||
|
:headers="headers"
|
||||||
|
:beforeUpload="
|
||||||
beforeBackUpload
|
beforeBackUpload
|
||||||
"
|
"
|
||||||
|
:showUploadList="
|
||||||
|
false
|
||||||
|
"
|
||||||
@change="
|
@change="
|
||||||
changeBackUpload
|
changeBackUpload
|
||||||
"
|
"
|
||||||
|
:accept="
|
||||||
|
imageTypes &&
|
||||||
|
imageTypes.length
|
||||||
|
? imageTypes.toString()
|
||||||
|
: ''
|
||||||
|
"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="upload-image-content-back"
|
class="upload-image-content-back"
|
||||||
>
|
>
|
||||||
|
<div
|
||||||
|
v-if="
|
||||||
|
backLoading
|
||||||
|
"
|
||||||
|
class="loading-back"
|
||||||
|
>
|
||||||
|
<LoadingOutlined
|
||||||
|
style="
|
||||||
|
font-size: 28px;
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
class="upload-image"
|
class="upload-image"
|
||||||
v-if="
|
v-if="
|
||||||
|
|
@ -328,18 +401,7 @@
|
||||||
点击修改
|
点击修改
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<div
|
<div>
|
||||||
v-if="
|
|
||||||
logoLoading
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<LoadingOutlined
|
|
||||||
style="
|
|
||||||
font-size: 28px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div v-else>
|
|
||||||
<PlusOutlined
|
<PlusOutlined
|
||||||
style="
|
style="
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
|
|
@ -349,6 +411,11 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a-upload>
|
</a-upload>
|
||||||
|
<!-- <div v-if="logoValue">
|
||||||
|
<div v-if="logoLoading">
|
||||||
|
<div class="upload-loading-mask"></div>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="upload-tips">
|
<div class="upload-tips">
|
||||||
|
|
@ -499,7 +566,7 @@
|
||||||
width="52vw"
|
width="52vw"
|
||||||
:maskClosable="false"
|
:maskClosable="false"
|
||||||
@cancel="cancel"
|
@cancel="cancel"
|
||||||
@ok="handleOk"
|
@ok="saveCurrentData"
|
||||||
okText="确定"
|
okText="确定"
|
||||||
cancelText="取消"
|
cancelText="取消"
|
||||||
class="modal-style"
|
class="modal-style"
|
||||||
|
|
@ -516,10 +583,10 @@
|
||||||
</div>
|
</div>
|
||||||
<div style="margin-top: 20px">
|
<div style="margin-top: 20px">
|
||||||
<a-form
|
<a-form
|
||||||
:model="ModalForm"
|
layout="vertical"
|
||||||
:validate-messages="message"
|
:model="modalForm"
|
||||||
ref="formRef"
|
ref="formRef"
|
||||||
:rules="rules"
|
:rules="rulesModle"
|
||||||
>
|
>
|
||||||
<a-row :span="24" :gutter="24">
|
<a-row :span="24" :gutter="24">
|
||||||
<a-col :span="12">
|
<a-col :span="12">
|
||||||
|
|
@ -543,7 +610,7 @@
|
||||||
</template>
|
</template>
|
||||||
<a-input
|
<a-input
|
||||||
v-model:value="
|
v-model:value="
|
||||||
ModalForm.host
|
modalForm.host
|
||||||
"
|
"
|
||||||
:disabled="true"
|
:disabled="true"
|
||||||
/>
|
/>
|
||||||
|
|
@ -570,7 +637,7 @@
|
||||||
</template>
|
</template>
|
||||||
<a-input
|
<a-input
|
||||||
v-model:value="
|
v-model:value="
|
||||||
ModalForm.publicHost
|
modalForm.publicHost
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
</a-input>
|
</a-input>
|
||||||
|
|
@ -597,9 +664,23 @@
|
||||||
</template>
|
</template>
|
||||||
<a-select
|
<a-select
|
||||||
v-model:value="
|
v-model:value="
|
||||||
ModalForm.port
|
modalForm.port
|
||||||
"
|
"
|
||||||
></a-select>
|
>
|
||||||
|
<a-select-option
|
||||||
|
v-for="item in optionPorts"
|
||||||
|
:key="item"
|
||||||
|
:value="
|
||||||
|
item.value
|
||||||
|
"
|
||||||
|
:label="
|
||||||
|
item.label
|
||||||
|
"
|
||||||
|
>{{
|
||||||
|
item.label
|
||||||
|
}}</a-select-option
|
||||||
|
>
|
||||||
|
</a-select>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item
|
<a-form-item
|
||||||
name="publicPort"
|
name="publicPort"
|
||||||
|
|
@ -623,7 +704,7 @@
|
||||||
</template>
|
</template>
|
||||||
<a-input-number
|
<a-input-number
|
||||||
v-model:value="
|
v-model:value="
|
||||||
ModalForm.publicPort
|
modalForm.publicPort
|
||||||
"
|
"
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
/>
|
/>
|
||||||
|
|
@ -640,6 +721,7 @@
|
||||||
type="primary"
|
type="primary"
|
||||||
class="btn-style"
|
class="btn-style"
|
||||||
@click="submitData"
|
@click="submitData"
|
||||||
|
:loading="isSucessBasic || isSucessInit || isSucessRole"
|
||||||
>确定</a-button
|
>确定</a-button
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -654,19 +736,38 @@ import {
|
||||||
ExclamationCircleOutlined,
|
ExclamationCircleOutlined,
|
||||||
LoadingOutlined,
|
LoadingOutlined,
|
||||||
} from '@ant-design/icons-vue';
|
} from '@ant-design/icons-vue';
|
||||||
import { ROLEKEYS, RoleData } from './data/RoleData';
|
import RoleMenuData, { ROLEKEYS, RoleData } from './data/RoleData';
|
||||||
import type { Rule } from 'ant-design-vue/es/form';
|
import type { Rule } from 'ant-design-vue/es/form';
|
||||||
import type {
|
import type {
|
||||||
FormInstance,
|
FormInstance,
|
||||||
UploadChangeParam,
|
UploadChangeParam,
|
||||||
UploadProps,
|
UploadProps,
|
||||||
|
Form,
|
||||||
} from 'ant-design-vue';
|
} from 'ant-design-vue';
|
||||||
import { modalState, formState, logoState } from './data/interface';
|
import { modalState, formState, logoState } from './data/interface';
|
||||||
import BaseMenu from './data/baseMenu';
|
import BaseMenu from './data/baseMenu';
|
||||||
import { getSystemPermission, save } from '@/api/initHome';
|
import {
|
||||||
|
getSystemPermission,
|
||||||
|
save,
|
||||||
|
addRole,
|
||||||
|
getRoleMenu,
|
||||||
|
updateRoleMenu,
|
||||||
|
getResourcesCurrent,
|
||||||
|
saveNetwork,
|
||||||
|
saveProtocol,
|
||||||
|
getProtocol,
|
||||||
|
saveAccessConfig,
|
||||||
|
saveProduct,
|
||||||
|
saveDevice,
|
||||||
|
changeDeploy,
|
||||||
|
deployDevice,
|
||||||
|
} from '@/api/initHome';
|
||||||
|
import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
|
||||||
|
import { LocalStore } from '@/utils/comm';
|
||||||
|
import { message } from 'ant-design-vue';
|
||||||
const formRef = ref();
|
const formRef = ref();
|
||||||
const menuRef = ref();
|
const menuRef = ref();
|
||||||
const formBasicRef = ref<FormInstance>();
|
const formBasicRef = ref();
|
||||||
/**
|
/**
|
||||||
* 表单数据
|
* 表单数据
|
||||||
*/
|
*/
|
||||||
|
|
@ -710,7 +811,7 @@ const validateUrl = async (_rule: Rule, value: string) => {
|
||||||
return Promise.reject('请输入公网地址');
|
return Promise.reject('请输入公网地址');
|
||||||
} else {
|
} else {
|
||||||
var reg = new RegExp(
|
var reg = new RegExp(
|
||||||
/^(((?!(127\\.0\\.0\\.1)|(localhost)|(10\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3})|(172\\.((1[6-9])|(2\\d)|(3[01]))\\.\\d{1,3}\\.\\d{1,3})|(192\\.168\\.\\d{1,3}\\.\\d{1,3})).)*)(?:(?:\\d|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])\\.){3}(?:\\d|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])$/,
|
/^(25[0-5]|2[0-4]\d|[0-1]?\d?\d)(\.(25[0-5]|2[0-4]\d|[0-1]?\d?\d)){3}$/,
|
||||||
);
|
);
|
||||||
if (!reg.test(value)) {
|
if (!reg.test(value)) {
|
||||||
return Promise.reject('请输入正确的公网地址');
|
return Promise.reject('请输入正确的公网地址');
|
||||||
|
|
@ -731,44 +832,44 @@ const validateNumber = async (_rule: Rule, value: string) => {
|
||||||
return Promise.resolve();
|
return Promise.resolve();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 初始化弹窗表单数据
|
* 初始化弹窗表单数据
|
||||||
*/
|
*/
|
||||||
const ModalForm = reactive<modalState>({
|
const modalForm = reactive<modalState>({
|
||||||
host: '0.0.0.0',
|
host: '0.0.0.0',
|
||||||
port: '',
|
port: '',
|
||||||
publicHost: '',
|
publicHost: '',
|
||||||
publicPort: null,
|
publicPort: null,
|
||||||
rules: {
|
|
||||||
host: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: '请选择本地地址',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
port: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: '请选择本地端口',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
publicHost: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
validator: validateUrl,
|
|
||||||
trigger: 'change',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
publicPort: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
validator: validateNumber,
|
|
||||||
trigger: 'change',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
const { rules } = toRefs(ModalForm);
|
const rulesModle = ref({
|
||||||
|
host: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择本地地址',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
port: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择本地端口',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
publicHost: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
validator: validateUrl,
|
||||||
|
trigger: 'change',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
publicPort: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
validator: validateNumber,
|
||||||
|
trigger: 'change',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 默认打开第一个初始菜单
|
* 默认打开第一个初始菜单
|
||||||
|
|
@ -777,6 +878,8 @@ const activeKey = ref<string>('1');
|
||||||
const spinning = ref<boolean>(false);
|
const spinning = ref<boolean>(false);
|
||||||
const visible = ref<boolean>(false);
|
const visible = ref<boolean>(false);
|
||||||
const flag = ref<boolean>(false);
|
const flag = ref<boolean>(false);
|
||||||
|
const action = ref<string>(`${BASE_API_PATH}/file/static`);
|
||||||
|
const headers = ref({ [TOKEN_KEY]: LocalStore.get(TOKEN_KEY) });
|
||||||
/**
|
/**
|
||||||
* 角色勾选数据
|
* 角色勾选数据
|
||||||
*/
|
*/
|
||||||
|
|
@ -797,13 +900,6 @@ const showModal = () => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
|
||||||
* 提交初始数据表单
|
|
||||||
*/
|
|
||||||
const handleOk = async () => {
|
|
||||||
const valid = await formRef.value.validate();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 表单取消事件
|
* 表单取消事件
|
||||||
*/
|
*/
|
||||||
|
|
@ -817,13 +913,34 @@ const cancel = () => {
|
||||||
const logoData = reactive<logoState>({
|
const logoData = reactive<logoState>({
|
||||||
logoValue: '/public/logo.png',
|
logoValue: '/public/logo.png',
|
||||||
logoLoading: false,
|
logoLoading: false,
|
||||||
|
backLoading: false,
|
||||||
|
iconLoading: false,
|
||||||
inLogo: false,
|
inLogo: false,
|
||||||
inIcon: false,
|
inIcon: false,
|
||||||
inBackground: false,
|
inBackground: false,
|
||||||
|
backSize: 4,
|
||||||
|
logoSize: 1,
|
||||||
iconValue: '/public/favicon.ico',
|
iconValue: '/public/favicon.ico',
|
||||||
backValue: '/public/images/login.png',
|
backValue: '/public/images/login.png',
|
||||||
|
imageTypes: ['image/jpeg', 'image/png'],
|
||||||
|
iconTypes: ['image/x-icon'],
|
||||||
/**
|
/**
|
||||||
* 图片上传改变事件
|
* logo格式校验
|
||||||
|
*/
|
||||||
|
beforeLogoUpload: (file) => {
|
||||||
|
const isType = logoData.imageTypes.includes(file.type);
|
||||||
|
if (!isType) {
|
||||||
|
message.error(`请上传.jpg.png.jfif.pjp.pjpeg.jpeg格式的图片`);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const isSize = file.size / 1024 / 1024 < 4;
|
||||||
|
if (!isSize) {
|
||||||
|
message.error(`图片大小必须小于${4}M`);
|
||||||
|
}
|
||||||
|
return isType && isSize;
|
||||||
|
},
|
||||||
|
/*
|
||||||
|
* logo上传改变事件
|
||||||
*/
|
*/
|
||||||
handleChangeLogo: (info) => {
|
handleChangeLogo: (info) => {
|
||||||
if (info.file.status === 'uploading') {
|
if (info.file.status === 'uploading') {
|
||||||
|
|
@ -838,33 +955,216 @@ const logoData = reactive<logoState>({
|
||||||
/**
|
/**
|
||||||
* 背景图片上传之前
|
* 背景图片上传之前
|
||||||
*/
|
*/
|
||||||
beforeBackUpload: (file) => {},
|
beforeBackUpload: (file) => {
|
||||||
|
const isType = logoData.imageTypes.includes(file.type);
|
||||||
|
if (!isType) {
|
||||||
|
message.error(`请上传.jpg.png.jfif.pjp.pjpeg.jpeg格式的图片`);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const isSize = file.size / 1024 / 1024 < 4;
|
||||||
|
if (!isSize) {
|
||||||
|
message.error(`图片大小必须小于${4}M`);
|
||||||
|
}
|
||||||
|
return isType && isSize;
|
||||||
|
},
|
||||||
/**
|
/**
|
||||||
* 背景图片发生改变
|
* 背景图片发生改变
|
||||||
*/
|
*/
|
||||||
changeBackUpload: (info) => {},
|
changeBackUpload: (info) => {
|
||||||
|
if (info.file.status === 'uploading') {
|
||||||
|
logoData.backLoading = true;
|
||||||
|
}
|
||||||
|
if (info.file.status === 'done') {
|
||||||
|
info.file.url = info.file.response?.result;
|
||||||
|
logoData.backLoading = false;
|
||||||
|
logoData.backValue = info.file.response?.result;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 上传之前
|
||||||
|
*/
|
||||||
|
beforeIconUpload: (file) => {
|
||||||
|
const isType = logoData.iconTypes.includes(file.type);
|
||||||
|
if (!isType) {
|
||||||
|
message.error(`请上传ico格式的图片`);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const isSize = file.size / 1024 / 1024 < 1;
|
||||||
|
if (!isSize) {
|
||||||
|
message.error(`图片大小必须小于${1}M`);
|
||||||
|
}
|
||||||
|
return isType && isSize;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 图标发生改变
|
||||||
|
*/
|
||||||
|
changeIconUpload: (info) => {
|
||||||
|
if (info.file.status === 'uploading') {
|
||||||
|
logoData.iconLoading = true;
|
||||||
|
}
|
||||||
|
if (info.file.status === 'done') {
|
||||||
|
info.file.url = info.file.response?.result;
|
||||||
|
logoData.iconLoading = true;
|
||||||
|
logoData.iconValue = info.file.response?.result;
|
||||||
|
}
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const {
|
const {
|
||||||
logoValue,
|
logoValue,
|
||||||
logoLoading,
|
logoLoading,
|
||||||
|
iconLoading,
|
||||||
|
backLoading,
|
||||||
inLogo,
|
inLogo,
|
||||||
iconValue,
|
iconValue,
|
||||||
inIcon,
|
inIcon,
|
||||||
inBackground,
|
inBackground,
|
||||||
backValue,
|
backValue,
|
||||||
handleChangeLogo,
|
handleChangeLogo,
|
||||||
|
beforeBackUpload,
|
||||||
|
changeBackUpload,
|
||||||
|
beforeLogoUpload,
|
||||||
|
beforeIconUpload,
|
||||||
|
changeIconUpload,
|
||||||
|
imageTypes,
|
||||||
|
iconTypes,
|
||||||
} = toRefs(logoData);
|
} = toRefs(logoData);
|
||||||
/**
|
/**
|
||||||
* 提交基础表单
|
* 提交基础表单
|
||||||
*/
|
*/
|
||||||
const basicData = reactive({
|
const basicData = reactive({
|
||||||
|
isSucessBasic: false,
|
||||||
/**
|
/**
|
||||||
* 提交基础表单数据
|
* 提交基础表单数据
|
||||||
*/
|
*/
|
||||||
saveBasicInfo: async () => {},
|
saveBasicInfo: async () => {
|
||||||
|
// return new Promise(async (resolve) => {
|
||||||
|
const vaild = await formBasicRef.value.validate();
|
||||||
|
console.log(vaild, 'vaild ');
|
||||||
|
if (vaild) {
|
||||||
|
const item = [
|
||||||
|
{
|
||||||
|
scope: 'front',
|
||||||
|
properties: {
|
||||||
|
...form,
|
||||||
|
apikey: '',
|
||||||
|
'base-path': '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
scope: 'amap',
|
||||||
|
properties: {
|
||||||
|
api: form.apikey,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
scope: 'paths',
|
||||||
|
properties: {
|
||||||
|
'base-path': form.basePath,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const res = await save(item);
|
||||||
|
if (res.status === 200) {
|
||||||
|
const ico: any = document.querySelector('link[rel="icon"]');
|
||||||
|
if (ico !== null) {
|
||||||
|
ico.href = form.icon;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
basicData.isSucessBasic = true;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
basicData.isSucessBasic = true;
|
||||||
|
}
|
||||||
|
// });
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 提交角色数据
|
||||||
|
*/
|
||||||
|
const roleData = reactive({
|
||||||
|
isSucessRole: false,
|
||||||
|
/**
|
||||||
|
* 根据菜单找角色
|
||||||
|
*/
|
||||||
|
findMenuByRole: (menu: any[], code: string): any => {
|
||||||
|
let _item = null;
|
||||||
|
menu.some((item) => {
|
||||||
|
if (item.code === code) {
|
||||||
|
_item = item;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (item.children) {
|
||||||
|
const childrenItem = roleData.findMenuByRole(
|
||||||
|
item.children,
|
||||||
|
code,
|
||||||
|
);
|
||||||
|
if (childrenItem) {
|
||||||
|
_item = childrenItem;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
});
|
||||||
|
return _item;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 保存角色
|
||||||
|
*/
|
||||||
|
addRoleData: async () => {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
if (!keys.value.length) {
|
||||||
|
return resolve(true);
|
||||||
|
}
|
||||||
|
let Count = 0;
|
||||||
|
keys.value.forEach(async (item, index) => {
|
||||||
|
const _itemData = RoleData[item];
|
||||||
|
// 添加该角色
|
||||||
|
const res = await addRole(_itemData);
|
||||||
|
if (res.status === 200) {
|
||||||
|
const menuTree = await getRoleMenu(res.result.id);
|
||||||
|
if (menuTree.status === 200) {
|
||||||
|
const _roleData = (RoleMenuData[item] as []).filter(
|
||||||
|
(roleItem: any) => {
|
||||||
|
const _menu = roleData.findMenuByRole(
|
||||||
|
menuTree.result,
|
||||||
|
roleItem.code,
|
||||||
|
);
|
||||||
|
if (_menu) {
|
||||||
|
roleItem.id = _menu.id;
|
||||||
|
roleItem.parentId = _menu.parentId;
|
||||||
|
roleItem.createTime = _menu.createTime;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
);
|
||||||
|
//更新权限
|
||||||
|
const roleRes = await updateRoleMenu(res.result.id, {
|
||||||
|
menus: _roleData,
|
||||||
|
});
|
||||||
|
if (roleRes.status === 200) {
|
||||||
|
Count += 1;
|
||||||
|
}
|
||||||
|
if (index === keys.value.length - 1) {
|
||||||
|
resolve(Count === keys.value.length);
|
||||||
|
}
|
||||||
|
} else if (index === keys.value.length - 1) {
|
||||||
|
resolve(Count === keys.value.length);
|
||||||
|
}
|
||||||
|
} else if (index === keys.value.length - 1) {
|
||||||
|
resolve(Count === keys.value.length);
|
||||||
|
roleData.isSucessRole = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const { isSucessRole } = toRefs(roleData);
|
||||||
/**
|
/**
|
||||||
* 获取菜单数据
|
* 获取菜单数据
|
||||||
*/
|
*/
|
||||||
|
|
@ -882,7 +1182,6 @@ const menuDatas = reactive({
|
||||||
);
|
);
|
||||||
const _count = menuDatas.menuCount(newTree);
|
const _count = menuDatas.menuCount(newTree);
|
||||||
menuDatas.count = _count;
|
menuDatas.count = _count;
|
||||||
console.log(menuDatas.count, 'menuDatas.count');
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
|
|
@ -918,16 +1217,118 @@ const menuDatas = reactive({
|
||||||
}, 0);
|
}, 0);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const { count } = toRefs(menuDatas);
|
const { count } = toRefs(menuDatas);
|
||||||
|
/**
|
||||||
|
* 提交初始化数据
|
||||||
|
*/
|
||||||
|
const initialization = reactive({
|
||||||
|
isSucessInit: false,
|
||||||
|
optionPorts: [],
|
||||||
|
/**
|
||||||
|
* 查询端口数据
|
||||||
|
*/
|
||||||
|
getCurrentPort: async () => {
|
||||||
|
const resp = await getResourcesCurrent();
|
||||||
|
const current = resp?.result;
|
||||||
|
const _host =
|
||||||
|
current.find((item: any) => item.host === '0.0.0.0')?.ports[
|
||||||
|
'TCP'
|
||||||
|
] || [];
|
||||||
|
initialization.optionPorts = _host?.map((p: any) => ({
|
||||||
|
label: p,
|
||||||
|
value: p,
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 提交初始数据表单
|
||||||
|
*/
|
||||||
|
|
||||||
|
saveCurrentData: async () => {
|
||||||
|
// return new Promise(async (resolve) => {
|
||||||
|
const valid = await formRef.value.validate();
|
||||||
|
console.log(valid, 'valid');
|
||||||
|
// if (valid) {
|
||||||
|
// try {
|
||||||
|
// // 新增网络组件
|
||||||
|
// const network = await saveNetwork({
|
||||||
|
// type: 'MQTT_SERVER',
|
||||||
|
// shareCluster: true,
|
||||||
|
// name: 'MQTT网络组件',
|
||||||
|
// configuration: {
|
||||||
|
// host: '0.0.0.0',
|
||||||
|
// secure: false,
|
||||||
|
// port: modalForm.port,
|
||||||
|
// publicHost: modalForm.publicHost,
|
||||||
|
// publicPort: modalForm.publicPort,
|
||||||
|
// },
|
||||||
|
// });
|
||||||
|
// // 保存协议
|
||||||
|
// const protocol = await saveProtocol();
|
||||||
|
// let protocolItem: any = undefined;
|
||||||
|
// if (protocol.status === 200) {
|
||||||
|
// const proid = await getProtocol();
|
||||||
|
// if (proid.status === 200) {
|
||||||
|
// protocolItem = (proid?.result || []).find(
|
||||||
|
// (it: any) => it.name === 'JetLinks官方协议',
|
||||||
|
// );
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// // 新增设备接入网关
|
||||||
|
// const accessConfig = await saveAccessConfig({
|
||||||
|
// name: 'MQTT类型设备接入网关',
|
||||||
|
// provider: 'mqtt-server-gateway',
|
||||||
|
// protocol: protocolItem?.id,
|
||||||
|
// transport: 'MQTT',
|
||||||
|
// channel: 'network',
|
||||||
|
// channelId: network?.result?.id,
|
||||||
|
// });
|
||||||
|
// // 新增产品
|
||||||
|
// const product = await saveProduct({
|
||||||
|
// name: 'MQTT产品',
|
||||||
|
// messageProtocol: protocolItem?.id,
|
||||||
|
// protocolName: protocolItem?.name,
|
||||||
|
// transportProtocol: 'MQTT',
|
||||||
|
// deviceType: 'device',
|
||||||
|
// accessId: accessConfig.result?.id,
|
||||||
|
// accessName: accessConfig.result?.name,
|
||||||
|
// accessProvider: 'mqtt-server-gateway',
|
||||||
|
// });
|
||||||
|
// // 新增设备
|
||||||
|
// const device = await saveDevice({
|
||||||
|
// name: 'MQTT设备',
|
||||||
|
// productId: product?.result?.id,
|
||||||
|
// productName: product?.result?.name,
|
||||||
|
// });
|
||||||
|
// if (device.status === 200) {
|
||||||
|
// changeDeploy(product.result.id);
|
||||||
|
// deployDevice(device.result.id);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// flag.value = true;
|
||||||
|
// visible.value = false;
|
||||||
|
// } catch (e) {
|
||||||
|
// initialization.isSucessInit = true;
|
||||||
|
// // resolve(false);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
initialization.isSucessInit = true;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const { optionPorts, saveCurrentData, isSucessInit } = toRefs(initialization);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 初始化
|
* 初始化
|
||||||
*/
|
*/
|
||||||
menuDatas.getSystemPermissionData();
|
menuDatas.getSystemPermissionData();
|
||||||
|
initialization.getCurrentPort();
|
||||||
/**
|
/**
|
||||||
* 提交所有数据
|
* 提交所有数据
|
||||||
*/
|
*/
|
||||||
const submit = () => {};
|
const submitData = () => {
|
||||||
|
initialization.saveCurrentData();
|
||||||
|
roleData.addRoleData();
|
||||||
|
basicData.saveBasicInfo();
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.page-container {
|
.page-container {
|
||||||
|
|
@ -1073,6 +1474,13 @@ const submit = () => {};
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
background-color: rgba(0, 0, 0, 0.06);
|
background-color: rgba(0, 0, 0, 0.06);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
.loading-logo {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
}
|
||||||
|
.loading-icon {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
.upload-image {
|
.upload-image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -1132,6 +1540,9 @@ const submit = () => {};
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
background-color: rgba(0, 0, 0, 0.06);
|
background-color: rgba(0, 0, 0, 0.06);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
.loading-back {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
.upload-image {
|
.upload-image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue