系统账号管理

src/bg-ui/bg-icon.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import "https://at.alicdn.com/t/c/font_3622053_guave5wj5s.js";
+import "https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_19654_206.057df182551c6e61aaed89c0ac5bcc35.js";
 
 export default {
   props: {

src/main.js

@@ -15,9 +15,10 @@ import App from './App.vue'
 import router from './router'
 import {generateRoutes} from './router/index.js'
 
-import '../src/assets/css/base.css'
+
 import '../src/assets/css/font.css'
 import '../src/assets/css/index.css'
+import '../src/assets/item.css'
 
 import store from '@/store';
 

src/page/main/develop/account/add/index.vue

@@ -8,23 +8,35 @@
             </el-breadcrumb>
         </div>
         <div class="page_content flex_cloumn">
-            <div class="content_top">
+            <div class="content_top apaas_scroll">
                 <div class="content_process">
                     <div>
-                        <el-steps :active="step">
-                            <el-step title="">
+                        <el-steps :active="step" >
+                            <el-step title="" :class="{'process_complete': step > 1}">
                                 <template #icon>
-                                    <span class="process_desc"><img src="/src/assets/imgs/home_ic_user.png" alt=""> 业务系统信息</span>
+                                    <span class="process_desc">
+                                        <span class="icon_box" v-if="step > 0"><bg-icon class="step_icon" icon="#bg-ic-file"></bg-icon></span> 
+                                        <span class="circle" v-else></span>
+                                    业务系统信息
+                                    </span>
                                 </template>
                             </el-step>
-                            <el-step title="">
+                            <el-step title="" :class="{'process_complete': step > 2}">
                                 <template #icon>
-                                    <span class="process_desc"><img src="/src/assets/imgs/home_ic_user.png" alt=""> 联系人信息</span>
+                                    <span class="process_desc">
+                                        <span class="icon_box" v-if="step > 1"><bg-icon class="step_icon" icon="#bg-ic-file-staff"></bg-icon></span> 
+                                        <span class="circle" v-else></span>
+                                        联系人信息
+                                    </span>
                                 </template>
                             </el-step>
                             <el-step title="">
                                 <template #icon>
-                                    <span class="process_desc"><img src="/src/assets/imgs/home_ic_user.png" alt=""> 完成</span>
+                                    <span class="process_desc">
+                                    <span class="icon_box" v-if="step > 2"><bg-icon class="step_icon" icon="#bg-ic-file-success"></bg-icon></span> 
+                                        <span class="circle" v-else></span>
+                                        完成
+                                    </span>
                                 </template>
                             </el-step>
                         </el-steps> 
@@ -46,7 +58,7 @@
                     <el-button type="primary" @click="nextStep">下一步</el-button>
                 </div>
                 <div v-show="step === 2">
-                    <el-button>取消</el-button>
+                    <el-button @click="cancel">取消</el-button>
                     <el-button type="primary" @click="previousStep">上一步</el-button>
                     <el-button type="primary" @click="submit">提交</el-button>
                 </div>
@@ -171,7 +183,7 @@ const cancel = () => {
     flex-direction: column;
     overflow: auto;
 }
-.content_top::-webkit-scrollbar {
+/* .content_top::-webkit-scrollbar {
   width: 5px;
   height: 0px;
 }
@@ -183,11 +195,11 @@ const cancel = () => {
 .content_top::-webkit-scrollbar-track {
   background: transparent;
   border-radius: 2px;
-}
+} */
 
 .content_bottom {
-    height: 84px;
-    line-height: 84px;
+    height: 68px;
+    line-height: 68px;
     text-align: right;
     padding: 0 20px;
     border-top: 1px solid #e6e9ef;
@@ -220,5 +232,41 @@ const cancel = () => {
     padding: 50px 0;
     
 }
-
+.step_icon {
+    color: #fff;
+    font-weight: 600;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+}
+.icon_box {
+    display: inline-block;
+    background-color: #2b4695;
+    width: 48px;
+    height: 48px;
+    border-radius: 99px;
+    position: relative;
+    border: 3px solid #b0bee8;
+    vertical-align: middle;
+}
+.circle {
+    display: inline-block;
+    background-color: #a9b1c7;
+    width: 24px;
+    height: 24px;
+    border-radius: 99px;
+    position: relative;
+    border: 4px solid #e6e9ef;
+    vertical-align: middle;
+}
+.content_process /deep/ .el-step.is-horizontal .el-step__line {
+    height: 4px;
+}
+.content_process /deep/ .el-step__head.is-finish .el-step__line {
+    background: linear-gradient(to right,#2b4695 50%,#e6e9ef 50%);
+}
+.process_complete /deep/ .el-step__head.is-finish .el-step__line {
+    background: linear-gradient(to right,#2b4695 100%,#e6e9ef 0%);
+}
 </style>

src/page/main/develop/account/add/system-form.vue

@@ -7,7 +7,7 @@
     ref="systemRef"
     style="max-width: 66%"
   >
-    <el-form-item label="所属组织机构" prop="org">
+    <el-form-item label="所属机构" prop="org">
       <el-input v-model="systemForm.org" />
     </el-form-item>
     <el-form-item label="业务系统编码" prop="code">
@@ -15,12 +15,12 @@
     </el-form-item>
     <el-form-item label="业务系统名称" prop="name">
       <el-input v-model="systemForm.name" />
+    </el-form-item>
+    <el-form-item label="系统LOGO" prop="logo">
+       <bg-upload-image v-model="systemForm.logo" :showTips="true" :limit="1" :fileSize="500" :fileSizeUnit="'KB'" listType="picture-card" :accept="['.jpg','.jpeg','.png']" customTips="请选择图片上传：大小120 * 120像素支持jpg、png等格式，图片需小于500KB"></bg-upload-image>
     </el-form-item>
      <el-form-item label="业务系统概述" prop="desc">
       <el-input type="textarea" :rows="3" v-model="systemForm.desc" />
-    </el-form-item>
-     <el-form-item label="系统LOGO" prop="logo">
-       <bg-upload-image v-model="systemForm.logo" :showTips="true" :limit="1" :fileSize="500" :fileSizeUnit="'KB'" listType="picture-card" :accept="['.jpg','.jpeg','.png']" customTips="请选择图片上传：大小120 * 120像素支持jpg、png等格式，图片需小于500KB"></bg-upload-image>
     </el-form-item>
      <el-form-item label="角色" prop="role">
       <el-input v-model="systemForm.role" />