From 28c85a097950394cad74642f63b0cc1610bea3fd Mon Sep 17 00:00:00 2001
From: leiqiaochu <leiqiaochu@aossci.com>
Date: Tue, 7 Mar 2023 14:49:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9D=E5=A7=8B=E5=8C=96=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E7=BB=84=E4=BB=B6=E6=9B=BF=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/init-home/Basic/index.vue    | 84 +++++++++++++-------------
 src/views/init-home/InitData/index.vue | 80 ++++++++++++------------
 src/views/init-home/Role/index.vue     | 10 +--
 src/views/init-home/index.vue          | 28 ++++-----
 yarn.lock                              |  4 +-
 5 files changed, 104 insertions(+), 102 deletions(-)

diff --git a/src/views/init-home/Basic/index.vue b/src/views/init-home/Basic/index.vue
index d1819694..27a96359 100644
--- a/src/views/init-home/Basic/index.vue
+++ b/src/views/init-home/Basic/index.vue
@@ -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';
diff --git a/src/views/init-home/InitData/index.vue b/src/views/init-home/InitData/index.vue
index 2a5ada80..7becad66 100644
--- a/src/views/init-home/InitData/index.vue
+++ b/src/views/init-home/InitData/index.vue
@@ -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;
+    });
 };
 /**
  * 初始化
diff --git a/src/views/init-home/Role/index.vue b/src/views/init-home/Role/index.vue
index 35d3f6b5..a69d476b 100644
--- a/src/views/init-home/Role/index.vue
+++ b/src/views/init-home/Role/index.vue
@@ -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>
 
diff --git a/src/views/init-home/index.vue b/src/views/init-home/index.vue
index ca82e116..6e9d3c29 100644
--- a/src/views/init-home/index.vue
+++ b/src/views/init-home/index.vue
@@ -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>
diff --git a/yarn.lock b/yarn.lock
index b8ef732f..5fdc74a5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -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"