feat: 初始化页面组件替换
This commit is contained in:
leiqiaochu
parent
115a905998
commit
28c85a0979
|
|
@ -1,62 +1,62 @@
|
|||
<!-- 基础内容 -->
|
||||
<template>
|
||||
<a-form layout="vertical" :model="form" ref="formBasicRef">
|
||||
<a-row :span="24" :gutter="24">
|
||||
<a-col :span="10">
|
||||
<a-form-item
|
||||
<j-form layout="vertical" :model="form" ref="formBasicRef">
|
||||
<j-row :span="24" :gutter="24">
|
||||
<j-col :span="10">
|
||||
<j-form-item
|
||||
label="系统名称"
|
||||
name="title"
|
||||
v-bind="validateInfos.title"
|
||||
>
|
||||
<a-input
|
||||
<j-input
|
||||
v-model:value="form.title"
|
||||
:maxlength="64"
|
||||
placeholder="请输入系统名称"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
</j-form-item>
|
||||
<j-form-item
|
||||
label="主题色"
|
||||
name="headerTheme"
|
||||
v-bind="validateInfos.headerTheme"
|
||||
>
|
||||
<a-select v-model:value="form.headerTheme">
|
||||
<a-select-option value="light">白色</a-select-option>
|
||||
<a-select-option value="dark">黑色</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<j-select v-model:value="form.headerTheme">
|
||||
<j-select-option value="light">白色</j-select-option>
|
||||
<j-select-option value="dark">黑色</j-select-option>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
<j-form-item>
|
||||
<template #label>
|
||||
<span>高德API Key</span>
|
||||
<a-tooltip title="配置后平台可调用高德地图GIS服务">
|
||||
<j-tooltip title="配置后平台可调用高德地图GIS服务">
|
||||
<img
|
||||
class="img-style"
|
||||
:src="getImage('/init-home/mark.png')"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<a-input
|
||||
<j-input
|
||||
v-model:value="form.apikey"
|
||||
placeholder="请输入高德API Key"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item name="basePath" v-bind="validateInfos.basePath">
|
||||
</j-form-item>
|
||||
<j-form-item name="basePath" v-bind="validateInfos.basePath">
|
||||
<template #label>
|
||||
<span>base-path</span>
|
||||
<a-tooltip title="系统后台访问的url">
|
||||
<j-tooltip title="系统后台访问的url">
|
||||
<img
|
||||
class="img-style"
|
||||
:src="getImage('/init-home/mark.png')"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<a-input
|
||||
<j-input
|
||||
v-model:value="form.basePath"
|
||||
placeholder="请输入高德API Key"
|
||||
placeholder="请输入base-path"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-row :gutter="24" :span="24">
|
||||
<a-col>
|
||||
<a-form-item label="系统logo">
|
||||
</j-form-item>
|
||||
<j-row :gutter="24" :span="24">
|
||||
<j-col>
|
||||
<j-form-item label="系统logo">
|
||||
<div class="upload-image-warp-logo">
|
||||
<div class="upload-image-border-logo">
|
||||
<a-upload
|
||||
|
|
@ -123,18 +123,18 @@
|
|||
|
||||
<div class="upload-tips">推荐尺寸200*200</div>
|
||||
<div class="upload-tips">支持jpg,png</div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<a-form-item>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col>
|
||||
<j-form-item>
|
||||
<template #label>
|
||||
<span>浏览器页签</span>
|
||||
<a-tooltip title="浏览器tab页中显示的图片元素">
|
||||
<j-tooltip title="浏览器tab页中显示的图片元素">
|
||||
<img
|
||||
class="img-style"
|
||||
:src="getImage('/init-home/mark.png')"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<div class="upload-image-warp-logo">
|
||||
<div class="upload-image-border-logo">
|
||||
|
|
@ -189,12 +189,12 @@
|
|||
|
||||
<div class="upload-tips">推荐尺寸64*64</div>
|
||||
<div class="upload-tips">支持icon格式</div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :span="14">
|
||||
<a-form-item label="登录背景图">
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-col>
|
||||
<j-col :span="14">
|
||||
<j-form-item label="登录背景图">
|
||||
<div class="upload-image-warp-back">
|
||||
<div class="upload-image-border-back">
|
||||
<a-upload
|
||||
|
|
@ -247,10 +247,10 @@
|
|||
</div>
|
||||
<div class="upload-tips">支持4M以内的图片:支持jpg、png</div>
|
||||
<div class="upload-tips">建议尺寸1400x1080</div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-form>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { modalState, formState, logoState } from '../data/interface';
|
||||
|
|
|
|||
|
|
@ -11,13 +11,13 @@
|
|||
/>
|
||||
</div>
|
||||
<!-- 初始数据提交表单 -->
|
||||
<a-modal
|
||||
<j-modal
|
||||
v-model:visible="visible"
|
||||
title="初始数据"
|
||||
width="52vw"
|
||||
:maskClosable="false"
|
||||
@cancel="cancel"
|
||||
@ok="save"
|
||||
@ok="handelSave"
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
class="modal-style"
|
||||
|
|
@ -31,88 +31,88 @@
|
|||
</p>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<a-form
|
||||
<j-form
|
||||
layout="vertical"
|
||||
:model="modalForm"
|
||||
ref="formRef"
|
||||
:rules="rulesModle"
|
||||
>
|
||||
<a-row :span="24" :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item name="host">
|
||||
<j-row :span="24" :gutter="24">
|
||||
<j-col :span="12">
|
||||
<j-form-item name="host">
|
||||
<template #label>
|
||||
<span>本地地址 </span>
|
||||
<a-tooltip
|
||||
<j-tooltip
|
||||
title="绑定到服务器上的网卡地址,绑定到所有网卡:0.0.0.0"
|
||||
>
|
||||
<img
|
||||
class="img-style"
|
||||
:src="getImage('/init-home/mark.png')"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<a-input
|
||||
<j-input
|
||||
v-model:value="modalForm.host"
|
||||
:disabled="true"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item name="publicHost">
|
||||
</j-form-item>
|
||||
<j-form-item name="publicHost">
|
||||
<template #label>
|
||||
<span>公网地址 </span>
|
||||
<a-tooltip
|
||||
<j-tooltip
|
||||
title="对外提供访问的地址内网环境时填写服务器的内网IP地址"
|
||||
>
|
||||
<img
|
||||
class="img-style"
|
||||
:src="getImage('/init-home/mark.png')"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<a-input v-model:value="modalForm.publicHost">
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item name="port">
|
||||
<j-input v-model:value="modalForm.publicHost">
|
||||
</j-input>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<j-form-item name="port">
|
||||
<template #label>
|
||||
<span>本地端口 </span>
|
||||
<a-tooltip title="监听指定端口的请求">
|
||||
<j-tooltip title="监听指定端口的请求">
|
||||
<img
|
||||
class="img-style"
|
||||
:src="getImage('/init-home/mark.png')"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<a-select v-model:value="modalForm.port">
|
||||
<a-select-option
|
||||
<j-select v-model:value="modalForm.port">
|
||||
<j-select-option
|
||||
v-for="item in optionPorts"
|
||||
:key="item"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
>{{ item.label }}</a-select-option
|
||||
>{{ item.label }}</j-select-option
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item name="publicPort">
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
<j-form-item name="publicPort">
|
||||
<template #label>
|
||||
<span>公网端口 </span>
|
||||
<a-tooltip title="对外提供访问的端口">
|
||||
<j-tooltip title="对外提供访问的端口">
|
||||
<img
|
||||
class="img-style"
|
||||
:src="getImage('/init-home/mark.png')"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<a-input-number
|
||||
<j-input-number
|
||||
v-model:value="modalForm.publicPort"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-form>
|
||||
</div>
|
||||
</a-modal>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -321,10 +321,12 @@ const saveCurrentData = () => {
|
|||
});
|
||||
};
|
||||
const { optionPorts, isSucessInit } = toRefs(initialization);
|
||||
const save = () => {
|
||||
message.success('保存成功');
|
||||
flag.value = true;
|
||||
visible.value = false;
|
||||
const handelSave = () => {
|
||||
formRef.value.validate().then(() => {
|
||||
message.success('保存成功');
|
||||
flag.value = true;
|
||||
visible.value = false;
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 初始化
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="init-home-role">
|
||||
<a-checkbox-group @change="getCheckValue">
|
||||
<j-checkbox-group @change="getCheckValue">
|
||||
<div class="init-home-role-content">
|
||||
<div
|
||||
class="role-item role-item-1"
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
"
|
||||
>
|
||||
<div class="role-item-title">
|
||||
<a-checkbox :value="ROLEKEYS.device"></a-checkbox>
|
||||
<j-checkbox :value="ROLEKEYS.device"></j-checkbox>
|
||||
<div class="role-title">设备接入岗</div>
|
||||
</div>
|
||||
<div class="role-item-content"></div>
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
"
|
||||
>
|
||||
<div class="role-item-title">
|
||||
<a-checkbox :value="ROLEKEYS.link"></a-checkbox>
|
||||
<j-checkbox :value="ROLEKEYS.link"></j-checkbox>
|
||||
<div class="role-title">运维管理岗</div>
|
||||
</div>
|
||||
<div class="role-item-content"></div>
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
"
|
||||
>
|
||||
<div class="role-item-title">
|
||||
<a-checkbox :value="ROLEKEYS.complex"></a-checkbox>
|
||||
<j-checkbox :value="ROLEKEYS.complex"></j-checkbox>
|
||||
<div class="role-title">综合管理岗</div>
|
||||
</div>
|
||||
<div class="role-item-content"></div>
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-checkbox-group>
|
||||
</j-checkbox-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,9 +7,9 @@
|
|||
<div class="container-box">
|
||||
<div class="container-main">
|
||||
<div class="container-right">
|
||||
<a-spin :spinning="spinning">
|
||||
<a-collapse v-model:activeKey="activeKey" accordion>
|
||||
<a-collapse-panel key="1">
|
||||
<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"
|
||||
|
|
@ -17,8 +17,8 @@
|
|||
>
|
||||
</template>
|
||||
<Basic ref="basicRef" />
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="2" >
|
||||
</j-collapse-panel>
|
||||
<j-collapse-panel key="2" >
|
||||
<template #header>
|
||||
<span class="title">菜单初始化</span>
|
||||
<span class="sub-title"
|
||||
|
|
@ -26,8 +26,8 @@
|
|||
>
|
||||
</template>
|
||||
<Menu></Menu>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="3" forceRender>
|
||||
</j-collapse-panel>
|
||||
<j-collapse-panel key="3" forceRender>
|
||||
<template #header>
|
||||
<span class="title">角色初始化</span>
|
||||
<span class="sub-title"
|
||||
|
|
@ -35,8 +35,8 @@
|
|||
>
|
||||
</template>
|
||||
<Role ref="roleRef"></Role>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="4" forceRender>
|
||||
</j-collapse-panel>
|
||||
<j-collapse-panel key="4" forceRender>
|
||||
<template #header>
|
||||
<span class="title">初始化数据</span>
|
||||
<span class="sub-title"
|
||||
|
|
@ -44,15 +44,15 @@
|
|||
>
|
||||
</template>
|
||||
<InitData ref="initDataRef"></InitData>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</a-spin>
|
||||
<a-button
|
||||
</j-collapse-panel>
|
||||
</j-collapse>
|
||||
</j-spin>
|
||||
<j-button
|
||||
type="primary"
|
||||
class="btn-style"
|
||||
@click="submitData"
|
||||
:loading="loading"
|
||||
>确定</a-button
|
||||
>确定</j-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3903,8 +3903,8 @@ jetlinks-store@^0.0.3:
|
|||
|
||||
jetlinks-ui-components@^1.0.4:
|
||||
version "1.0.4"
|
||||
resolved "https://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.4.tgz#4c7dc568b20a9bda7decbbb6b30f0191cb4340af"
|
||||
integrity sha512-V1lydb150+9N+wKPaZSF+WYF1bPj1bQ8nCge8EP093tqH/wVHEs3mYRlHEEfNf/+SLIcrWuPCISihfMatVIlTQ==
|
||||
resolved "https://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.4.tgz#6888c93fa088688e2684311e3360ef77846a4206"
|
||||
integrity sha512-97ZEgqhJq5LQw8a7kRHgJdB9zfh1f7L4jmiJG2cIHPD7+kippMUVSBre35HmA+g55c9RqyiXeG3SQOy9ayAbDw==
|
||||
dependencies:
|
||||
"@vueuse/core" "^9.12.0"
|
||||
ant-design-vue "^3.2.15"
|
||||
|
|
|
|||
Loading…
Reference in New Issue