系统账号管理

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="业务系统概述" 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="desc">
+      <el-input type="textarea" :rows="3" v-model="systemForm.desc" />
     </el-form-item>
      <el-form-item label="角色" prop="role">
       <el-input v-model="systemForm.role" />

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

 <template>
-  <div class="detail_container">
-      账号管理 <el-button @click="addAccount(0)">新建</el-button><el-button @click="addAccount(1)">编辑</el-button>
+    <div class="page_container">
+        <div class="bg-breadcrumb">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item> 开发管理 </el-breadcrumb-item>
+                <el-breadcrumb-item > 系统账号管理 </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+         <div class="flex_row">
+           <div class="flex_left">
+             <div class="tree_header">
+                 政务机构
+             </div>
+             <div class="tree_content">
+               <div class="search"> 
+                 <el-input
+                    v-model="search"
+                    placeholder="请输入组织名称搜索"
+                    :prefix-icon="Search"
+                  />
+               </div>
+               <div class="tree">
+                 <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" :default-expand-all="true" />
+               </div>
+             </div>
+           </div>
+           <div class="flex_right">
+             <div class="main_container">
+              <div class="apaas_button">
+                <el-button type="primary" @click="addAccount(0)">新建</el-button><el-button @click="addAccount(1)">编辑</el-button>
+              </div>
+                <div class="table_container apaas_scroll">
+                  <bg-table ref="bgTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true">
+                    <template v-slot:action="{ row }">
+                      <bg-table-btn class="btn">
+                        编辑
+                      </bg-table-btn>
+                      <bg-table-btn class="btn">
+                        修改密码
+                      </bg-table-btn>
+                      <bg-table-btn class="btn">
+                        删除
+                      </bg-table-btn>
+                    </template>
+                  </bg-table>
+                  <div class="pagination_box">
+                     <bg-pagination
+                    :page="1"
+                    :size="10"
+                    :total="100"
+                    @change-page="changePage"
+                    @change-size="changeSize"
+                  >
+                  </bg-pagination>
+                  </div>
+                  
+                </div>
+                 
+              </div>
+           </div>
+        </div>
     </div>
 </template>
 
-<script >
+<script setup>
+import { Search } from '@element-plus/icons-vue'
 import { reactive, toRefs, ref, } from '@vue/reactivity'
 import { getCurrentInstance } from 'vue'
 import { computed, onBeforeMount } from '@vue/runtime-core'
 import { useRouter } from 'vue-router';
-export default {
-  components: {
+
+  const headers = ref([
+        {
+          label: "业务系统编码",
+          prop: "code",
+          width: 180
+        },
+        {
+          label: "业务系统名称",
+          prop: "name",
+          minWidth: 180
+        },
+        {
+          label: "账号",
+          prop: "account",
+          width: 150
         },
-  setup() {
+        {
+          label: "所属机构",
+          prop: "org",
+          width: 240
+        },
+        {
+          label: "创建时间",
+          prop: "create_time",
+          width: 150
+        },
+        {
+          label: "是否启用",
+          prop: "is_use",
+          width: 80
+        },
+        {
+          label: "操作",
+          prop: "action",
+          width: 220,
+          fixed: "right",
+        },
+      ])
+  const tableRows = ref([
+    {code: "YWXT0000001",name: "大数据处理系统",account: "admin",org: "大数据局",create_time: "2022-01-01 00:00",is_use: "是"},
+    {code: "YWXT0000001",name: "大数据处理系统",account: "admin",org: "大数据局",create_time: "2022-01-01 00:00",is_use: "是"},
+    {code: "YWXT0000001",name: "大数据处理系统",account: "admin",org: "大数据局",create_time: "2022-01-01 00:00",is_use: "是"},
+    {code: "YWXT0000001",name: "大数据处理系统",account: "admin",org: "大数据局",create_time: "2022-01-01 00:00",is_use: "是"},
+    {code: "YWXT0000001",name: "大数据处理系统",account: "admin",org: "大数据局",create_time: "2022-01-01 00:00",is_use: "是"},
+    {code: "YWXT0000001",name: "大数据处理系统",account: "admin",org: "大数据局",create_time: "2022-01-01 00:00",is_use: "是"},
+    {code: "YWXT0000001",name: "大数据处理系统",account: "admin",org: "大数据局",create_time: "2022-01-01 00:00",is_use: "是"},
+    {code: "YWXT0000001",name: "大数据处理系统",account: "admin",org: "大数据局",create_time: "2022-01-01 00:00",is_use: "是"},
+    {code: "YWXT0000001",name: "大数据处理系统",account: "admin",org: "大数据局",create_time: "2022-01-01 00:00",is_use: "是"},
+    {code: "YWXT0000001",name: "大数据处理系统",account: "admin",org: "大数据局",create_time: "2022-01-01 00:00",is_use: "是"},
+    {code: "YWXT0000001",name: "大数据处理系统",account: "admin",org: "大数据局",create_time: "2022-01-01 00:00",is_use: "是"},
+    {code: "YWXT0000001",name: "大数据处理系统",account: "admin",org: "大数据局",create_time: "2022-01-01 00:00",is_use: "是"},
+    {code: "YWXT0000001",name: "大数据处理系统",account: "admin",org: "大数据局",create_time: "2022-01-01 00:00",is_use: "是"},
+    {code: "YWXT0000001",name: "大数据处理系统",account: "admin",org: "大数据局",create_time: "2022-01-01 00:00",is_use: "是"},
+    {code: "YWXT0000001",name: "大数据处理系统",account: "admin",org: "大数据局",create_time: "2022-01-01 00:00",is_use: "是"},
+    {code: "YWXT0000001",name: "大数据处理系统",account: "admin",org: "大数据局",create_time: "2022-01-01 00:00",is_use: "是"},
+    {code: "YWXT0000001",name: "大数据处理系统",account: "admin",org: "大数据局",create_time: "2022-01-01 00:00",is_use: "是"},
+    {code: "YWXT0000001",name: "大数据处理系统",account: "admin",org: "大数据局",create_time: "2022-01-01 00:00",is_use: "是"},
+    {code: "YWXT0000001",name: "大数据处理系统",account: "admin",org: "大数据局",create_time: "2022-01-01 00:00",is_use: "是"},
+    {code: "YWXT0000001",name: "大数据处理系统",account: "admin",org: "大数据局",create_time: "2022-01-01 00:00",is_use: "是"},
+    {code: "YWXT0000001",name: "大数据处理系统",account: "admin",org: "大数据局",create_time: "2022-01-01 00:00",is_use: "是"},
+  ])
+  const search=ref("");
+
   const router = useRouter();
   onBeforeMount(() => {
    
@@ -26,15 +145,158 @@ export default {
         }
       })
   }
-    return {
-      ...toRefs(),
-      addAccount
+
+  const handleNodeClick = (data) => {
+    console.log(data)
   }
+
+  const data = [
+    {
+      label: '湖北省',
+      children: [
+        {
+          label: '武汉市',
+          children: [
+            {
+              label: '公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅',
             },
-}
-</script>
+            {
+              label: '应急厅',
+            },
+            {
+              label: '水利厅',
+            },
+          ],
+        },
+        {
+          label: '荆州市',
+          children: [
+            {
+              label: '公安局',
+            },
+            {
+              label: '应急管理局',
+            },
+          ],
+        }
+      ],
+    },
+    {
+      label: '四川省',
+      children: [
+        {
+          label: '成都市',
+          children: [
+            {
+              label: '天府新区',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: '比格大数据',
+      children: [
+        {
+          label: '武汉研发中心',
+          children: [
+            {
+              label: '研发部',
+            },
+          ],
+        },
+        {
+          label: '西南大区',
+          children: [
+            {
+              label: '事业部',
+            },
+            {
+              label: '事业部',
+            },
+            {
+              label: '事业部',
+            },
+            {
+              label: '事业部',
+            },
+            {
+              label: '事业部',
+            },
+            {
+              label: '事业部',
+            },
+            {
+              label: '事业部',
+            },
+          ],
+        },
+      ],
+    },
+  ]
+
+  const defaultProps = {
+    children: 'children',
+    label: 'label',
+  }
 
-<style lang="scss" scoped>
+   const changeSize = (size) => {
 
+    }
+
+    const changePage = (size) => {
+
+    }
+
+
+</script>
+
+<style scoped>
+.tree_header {
+  height: 40px;
+  line-height: 40px;
+	background-color: #f7f7f9;
+	border-radius: 6px 6px 0px 0px;
+  font-size: 16px;
+	letter-spacing: 0px;
+	color: #202531;
+  padding-left: 16px;
+}
+.tree_content {
+  overflow: hidden;
+  height: calc(100% - 45px);
+}
+.search {
+  padding: 16px;
+}
+.tree {
+  overflow: auto;
+  height: calc(100% - 65px);
+  padding: 5px;
+}
+.tree /deep/ .el-tree-node>.el-tree-node__children {
+  overflow: unset;
+}
+.main_container {
+  padding: 15px;
+  height: 100%;
+}
+.table_container {
+  height: calc(100% - 30px);
+  overflow: auto;
+}
+.pagination_box {
+  position: sticky;
+  margin-top: 16px;
+  bottom: 0px;
+  background-color: #fff;
+  z-index: 1024;
+  height: 40px;
+  line-height: 40px;
+  padding-top: 8px;
+}
+.bg-pagination {
+  bottom: unset
+}
 
 </style>
\ No newline at end of file