0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 初始化页面组件替换

This commit is contained in:
leiqiaochu 2023-03-07 14:49:13 +08:00
parent 115a905998
commit 28c85a0979
5 changed files with 104 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/views/init-home/Basic/index.vue
View File

@ -1,62 +1,62 @@
<!-- 基础内容 --> <!-- 基础内容 -->
<template> <template>
<a-form layout="vertical" :model="form" ref="formBasicRef"> <j-form layout="vertical" :model="form" ref="formBasicRef">
<a-row :span="24" :gutter="24"> <j-row :span="24" :gutter="24">
<a-col :span="10"> <j-col :span="10">
<a-form-item <j-form-item
label="系统名称" label="系统名称"
name="title" name="title"
v-bind="validateInfos.title" v-bind="validateInfos.title"
> >
<a-input <j-input
v-model:value="form.title" v-model:value="form.title"
:maxlength="64" :maxlength="64"
placeholder="请输入系统名称" placeholder="请输入系统名称"
/> />
</a-form-item> </j-form-item>
<a-form-item <j-form-item
label="主题色" label="主题色"
name="headerTheme" name="headerTheme"
v-bind="validateInfos.headerTheme" v-bind="validateInfos.headerTheme"
> >
<a-select v-model:value="form.headerTheme"> <j-select v-model:value="form.headerTheme">
<a-select-option value="light">白色</a-select-option> <j-select-option value="light">白色</j-select-option>
<a-select-option value="dark">黑色</a-select-option> <j-select-option value="dark">黑色</j-select-option>
</a-select> </j-select>
</a-form-item> </j-form-item>
<a-form-item> <j-form-item>
<template #label> <template #label>
<span>高德API Key</span> <span>高德API Key</span>
<a-tooltip title="配置后平台可调用高德地图GIS服务"> <j-tooltip title="配置后平台可调用高德地图GIS服务">
<img <img
class="img-style" class="img-style"
:src="getImage('/init-home/mark.png')" :src="getImage('/init-home/mark.png')"
/> />
</a-tooltip> </j-tooltip>
</template> </template>
<a-input <j-input
v-model:value="form.apikey" v-model:value="form.apikey"
placeholder="请输入高德API Key" placeholder="请输入高德API Key"
/> />
</a-form-item> </j-form-item>
<a-form-item name="basePath" v-bind="validateInfos.basePath"> <j-form-item name="basePath" v-bind="validateInfos.basePath">
<template #label> <template #label>
<span>base-path</span> <span>base-path</span>
<a-tooltip title="系统后台访问的url"> <j-tooltip title="系统后台访问的url">
<img <img
class="img-style" class="img-style"
:src="getImage('/init-home/mark.png')" :src="getImage('/init-home/mark.png')"
/> />
</a-tooltip> </j-tooltip>
</template> </template>
<a-input <j-input
v-model:value="form.basePath" v-model:value="form.basePath"
placeholder="请输入高德API Key" placeholder="请输入base-path"
/> />
</a-form-item> </j-form-item>
<a-row :gutter="24" :span="24"> <j-row :gutter="24" :span="24">
<a-col> <j-col>
<a-form-item label="系统logo"> <j-form-item label="系统logo">
<div class="upload-image-warp-logo"> <div class="upload-image-warp-logo">
<div class="upload-image-border-logo"> <div class="upload-image-border-logo">
<a-upload <a-upload
@ -123,18 +123,18 @@
<div class="upload-tips">推荐尺寸200*200</div> <div class="upload-tips">推荐尺寸200*200</div>
<div class="upload-tips">支持jpg,png</div> <div class="upload-tips">支持jpg,png</div>
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col> <j-col>
<a-form-item> <j-form-item>
<template #label> <template #label>
<span>浏览器页签</span> <span>浏览器页签</span>
<a-tooltip title="浏览器tab页中显示的图片元素"> <j-tooltip title="浏览器tab页中显示的图片元素">
<img <img
class="img-style" class="img-style"
:src="getImage('/init-home/mark.png')" :src="getImage('/init-home/mark.png')"
/> />
</a-tooltip> </j-tooltip>
</template> </template>
<div class="upload-image-warp-logo"> <div class="upload-image-warp-logo">
<div class="upload-image-border-logo"> <div class="upload-image-border-logo">
@ -189,12 +189,12 @@
<div class="upload-tips">推荐尺寸64*64</div> <div class="upload-tips">推荐尺寸64*64</div>
<div class="upload-tips">支持icon格式</div> <div class="upload-tips">支持icon格式</div>
</a-form-item> </j-form-item>
</a-col> </j-col>
</a-row> </j-row>
</a-col> </j-col>
<a-col :span="14"> <j-col :span="14">
<a-form-item label="登录背景图"> <j-form-item label="登录背景图">
<div class="upload-image-warp-back"> <div class="upload-image-warp-back">
<div class="upload-image-border-back"> <div class="upload-image-border-back">
<a-upload <a-upload
@ -247,10 +247,10 @@
</div> </div>
<div class="upload-tips">支持4M以内的图片:支持jpg、png</div> <div class="upload-tips">支持4M以内的图片:支持jpg、png</div>
<div class="upload-tips">建议尺寸1400x1080</div> <div class="upload-tips">建议尺寸1400x1080</div>
</a-form-item> </j-form-item>
</a-col> </j-col>
</a-row> </j-row>
</a-form> </j-form>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { modalState, formState, logoState } from '../data/interface'; import { modalState, formState, logoState } from '../data/interface';

80
src/views/init-home/InitData/index.vue
View File

@ -11,13 +11,13 @@
/> />
</div> </div>
<!-- 初始数据提交表单 --> <!-- 初始数据提交表单 -->
<a-modal <j-modal
v-model:visible="visible" v-model:visible="visible"
title="初始数据" title="初始数据"
width="52vw" width="52vw"
:maskClosable="false" :maskClosable="false"
@cancel="cancel" @cancel="cancel"
@ok="save" @ok="handelSave"
okText="确定" okText="确定"
cancelText="取消" cancelText="取消"
class="modal-style" class="modal-style"
@ -31,88 +31,88 @@
</p> </p>
</div> </div>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<a-form <j-form
layout="vertical" layout="vertical"
:model="modalForm" :model="modalForm"
ref="formRef" ref="formRef"
:rules="rulesModle" :rules="rulesModle"
> >
<a-row :span="24" :gutter="24"> <j-row :span="24" :gutter="24">
<a-col :span="12"> <j-col :span="12">
<a-form-item name="host"> <j-form-item name="host">
<template #label> <template #label>
<span>本地地址 </span> <span>本地地址 </span>
<a-tooltip <j-tooltip
title="绑定到服务器上的网卡地址,绑定到所有网卡:0.0.0.0" title="绑定到服务器上的网卡地址,绑定到所有网卡:0.0.0.0"
> >
<img <img
class="img-style" class="img-style"
:src="getImage('/init-home/mark.png')" :src="getImage('/init-home/mark.png')"
/> />
</a-tooltip> </j-tooltip>
</template> </template>
<a-input <j-input
v-model:value="modalForm.host" v-model:value="modalForm.host"
:disabled="true" :disabled="true"
/> />
</a-form-item> </j-form-item>
<a-form-item name="publicHost"> <j-form-item name="publicHost">
<template #label> <template #label>
<span>公网地址 </span> <span>公网地址 </span>
<a-tooltip <j-tooltip
title="对外提供访问的地址内网环境时填写服务器的内网IP地址" title="对外提供访问的地址内网环境时填写服务器的内网IP地址"
> >
<img <img
class="img-style" class="img-style"
:src="getImage('/init-home/mark.png')" :src="getImage('/init-home/mark.png')"
/> />
</a-tooltip> </j-tooltip>
</template> </template>
<a-input v-model:value="modalForm.publicHost"> <j-input v-model:value="modalForm.publicHost">
</a-input> </j-input>
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<a-form-item name="port"> <j-form-item name="port">
<template #label> <template #label>
<span>本地端口 </span> <span>本地端口 </span>
<a-tooltip title="监听指定端口的请求"> <j-tooltip title="监听指定端口的请求">
<img <img
class="img-style" class="img-style"
:src="getImage('/init-home/mark.png')" :src="getImage('/init-home/mark.png')"
/> />
</a-tooltip> </j-tooltip>
</template> </template>
<a-select v-model:value="modalForm.port"> <j-select v-model:value="modalForm.port">
<a-select-option <j-select-option
v-for="item in optionPorts" v-for="item in optionPorts"
:key="item" :key="item"
:value="item.value" :value="item.value"
:label="item.label" :label="item.label"
>{{ item.label }}</a-select-option >{{ item.label }}</j-select-option
> >
</a-select> </j-select>
</a-form-item> </j-form-item>
<a-form-item name="publicPort"> <j-form-item name="publicPort">
<template #label> <template #label>
<span>公网端口 </span> <span>公网端口 </span>
<a-tooltip title="对外提供访问的端口"> <j-tooltip title="对外提供访问的端口">
<img <img
class="img-style" class="img-style"
:src="getImage('/init-home/mark.png')" :src="getImage('/init-home/mark.png')"
/> />
</a-tooltip> </j-tooltip>
</template> </template>
<a-input-number <j-input-number
v-model:value="modalForm.publicPort" v-model:value="modalForm.publicPort"
style="width: 100%" style="width: 100%"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
</a-row> </j-row>
</a-form> </j-form>
</div> </div>
</a-modal> </j-modal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -321,10 +321,12 @@ const saveCurrentData = () => {
}); });
}; };
const { optionPorts, isSucessInit } = toRefs(initialization); const { optionPorts, isSucessInit } = toRefs(initialization);
const save = () => { const handelSave = () => {
message.success('保存成功'); formRef.value.validate().then(() => {
flag.value = true; message.success('保存成功');
visible.value = false; flag.value = true;
visible.value = false;
});
}; };
/** /**
* 初始化 * 初始化

10
src/views/init-home/Role/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="init-home-role"> <div class="init-home-role">
<a-checkbox-group @change="getCheckValue"> <j-checkbox-group @change="getCheckValue">
<div class="init-home-role-content"> <div class="init-home-role-content">
<div <div
class="role-item role-item-1" class="role-item role-item-1"
@ -11,7 +11,7 @@
" "
> >
<div class="role-item-title"> <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 class="role-title">设备接入岗</div>
</div> </div>
<div class="role-item-content"></div> <div class="role-item-content"></div>
@ -28,7 +28,7 @@
" "
> >
<div class="role-item-title"> <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 class="role-title">运维管理岗</div>
</div> </div>
<div class="role-item-content"></div> <div class="role-item-content"></div>
@ -45,7 +45,7 @@
" "
> >
<div class="role-item-title"> <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 class="role-title">综合管理岗</div>
</div> </div>
<div class="role-item-content"></div> <div class="role-item-content"></div>
@ -54,7 +54,7 @@
</div> </div>
</div> </div>
</div> </div>
</a-checkbox-group> </j-checkbox-group>
</div> </div>
</template> </template>

28
src/views/init-home/index.vue
View File

@ -7,9 +7,9 @@
<div class="container-box"> <div class="container-box">
<div class="container-main"> <div class="container-main">
<div class="container-right"> <div class="container-right">
<a-spin :spinning="spinning"> <j-spin :spinning="spinning">
<a-collapse v-model:activeKey="activeKey" accordion> <j-collapse v-model:activeKey="activeKey" accordion>
<a-collapse-panel key="1"> <j-collapse-panel key="1">
<template #header> <template #header>
<span class="title">基本信息</span> <span class="title">基本信息</span>
<span class="sub-title" <span class="sub-title"
@ -17,8 +17,8 @@
> >
</template> </template>
<Basic ref="basicRef" /> <Basic ref="basicRef" />
</a-collapse-panel> </j-collapse-panel>
<a-collapse-panel key="2" > <j-collapse-panel key="2" >
<template #header> <template #header>
<span class="title">菜单初始化</span> <span class="title">菜单初始化</span>
<span class="sub-title" <span class="sub-title"
@ -26,8 +26,8 @@
> >
</template> </template>
<Menu></Menu> <Menu></Menu>
</a-collapse-panel> </j-collapse-panel>
<a-collapse-panel key="3" forceRender> <j-collapse-panel key="3" forceRender>
<template #header> <template #header>
<span class="title">角色初始化</span> <span class="title">角色初始化</span>
<span class="sub-title" <span class="sub-title"
@ -35,8 +35,8 @@
> >
</template> </template>
<Role ref="roleRef"></Role> <Role ref="roleRef"></Role>
</a-collapse-panel> </j-collapse-panel>
<a-collapse-panel key="4" forceRender> <j-collapse-panel key="4" forceRender>
<template #header> <template #header>
<span class="title">初始化数据</span> <span class="title">初始化数据</span>
<span class="sub-title" <span class="sub-title"
@ -44,15 +44,15 @@
> >
</template> </template>
<InitData ref="initDataRef"></InitData> <InitData ref="initDataRef"></InitData>
</a-collapse-panel> </j-collapse-panel>
</a-collapse> </j-collapse>
</a-spin> </j-spin>
<a-button <j-button
type="primary" type="primary"
class="btn-style" class="btn-style"
@click="submitData" @click="submitData"
:loading="loading" :loading="loading"
>确定</a-button >确定</j-button
> >
</div> </div>
</div> </div>

4
yarn.lock
View File

@ -3903,8 +3903,8 @@ jetlinks-store@^0.0.3:
jetlinks-ui-components@^1.0.4: jetlinks-ui-components@^1.0.4:
version "1.0.4" version "1.0.4"
resolved "https://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.4.tgz#4c7dc568b20a9bda7decbbb6b30f0191cb4340af" resolved "https://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.4.tgz#6888c93fa088688e2684311e3360ef77846a4206"
integrity sha512-V1lydb150+9N+wKPaZSF+WYF1bPj1bQ8nCge8EP093tqH/wVHEs3mYRlHEEfNf/+SLIcrWuPCISihfMatVIlTQ== integrity sha512-97ZEgqhJq5LQw8a7kRHgJdB9zfh1f7L4jmiJG2cIHPD7+kippMUVSBre35HmA+g55c9RqyiXeG3SQOy9ayAbDw==
dependencies: dependencies:
"@vueuse/core" "^9.12.0" "@vueuse/core" "^9.12.0"
ant-design-vue "^3.2.15" ant-design-vue "^3.2.15"