test：表格组件引入

src/bg-ui/bg-filter-group.vue

+<template>
+  <div class="bg-filter-group" :style="{'border-bottom': showFlag? 'none' : '','padding-bottom': showFlag? '8px':'16px'}">
+    <div class="top-filter">
+      <div class="left-slot">
+        <slot name="left_action"></slot>
+      </div>
+      <div class="right-filter">
+        <el-input :placeholder="placeholder" v-model="modelValue">
+          <template #append>
+            <div class="append-btn" @click="search">
+              <bg-icon style="font-size: 12px; color: #404a62; " icon="#bg-ic-search"></bg-icon>
+            </div>
+          </template>
+        </el-input>
+        <div class="more-btn" :class="showFlag ? 'more-btn1': ''" v-if="$slots.filter_group">
+          <el-button type="default" class="more-filter" @click="moreFilter">
+            高级搜索
+            <bg-icon style="font-size: 8px; color: #404a62; margin-left: 8px" icon="#bg-ic-arrow-down" v-if="!showFlag"></bg-icon>
+            <bg-icon style="font-size: 8px; color: #404a62; margin-left: 8px" icon="#bg-ic-arrow-up" v-else></bg-icon>
+          </el-button>
+        </div>
+      </div>
+    </div>
+    <div class="filter-group" v-if="showFlag">
+        <slot name="filter_group"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, reactive, toRefs, watch,ref } from "vue-demi"
+  
+const state = reactive({
+  showFlag: false,
+  modelValue: ""
+})
+
+const props = defineProps({
+  keyword: {
+    type: String,
+    default: ""
+  },
+  placeholder: {
+    type: String,
+    default: "请输入关键词"
+  }
+})
+
+watch(props,(n,o) => {
+  state.modelValue = n.keyword
+})
+const emit = defineEmits(['search'])
+const search = () => {
+  emit('search',state.modelValue)
+}
+const moreFilter = () => {
+  state.showFlag = !state.showFlag
+}
+onMounted(() => {
+  state.modelValue = props.keyword
+})
+const { modelValue,showFlag } = toRefs(state)
+</script>
\ No newline at end of file

src/bg-ui/index.scss

@@ -2390,4 +2390,73 @@ a {
   .card-content {
     padding: 24px;
   }
+}
+
+.bg-filter-group {
+  width: 100%;
+  padding: 16px;
+  border-bottom: 1px solid #e6e9ef;
+  .top-filter {
+    width: 100%;
+    display: flex;
+    .left-slot {
+      flex: 1;
+    }
+    .right-filter {
+      width: 398px;
+      justify-content: end;
+      display: flex;
+
+      .el-input {
+        width: 280px;
+        height: 36px;
+        .el-input-group__append {
+          border-radius: 0 4px 4px 0;
+          background-color: #f7f7f9;
+          padding: 0;
+          .append-btn {
+            padding: 0 16px;
+            cursor: pointer;
+          }
+        }
+      }
+      .more-btn {
+        margin-left: 16px;
+        width: 102px;
+        box-sizing: border-box;
+        border: 1px solid #e6e9ef;
+        border-radius: 4px;
+        height: 36px;
+        .more-filter {
+          width: 100px;
+          border: none;
+          height: 34px;
+          padding: 10px 15px;
+          line-height: 1;
+          &:active,
+          &:hover{
+            background-color: #fff;
+            color: #3759be;
+          }
+          &:focus {
+            background-color: #fff;
+          }
+        }
+      }
+      .more-btn1 {
+        height: 53px;
+        border-bottom: 1px solid #fff;
+        border-radius: 4px 4px 0 0;
+        margin-bottom: -1px;
+      }
+    }
+  }
+  .filter-group {
+    display: flex;
+    align-items: flex-end;
+    border-radius: 4px 0 4px 4px;
+    width: 100%;
+    border: 1px solid #e6e9ef;
+    padding: 24px 16px 8px;
+  }
 }
\ No newline at end of file

src/components/bg-menu.vue

@@ -169,7 +169,7 @@ export default {
       this.$trace.setOptionValue('appID',item.value)
     },
     getLogo(){
-      // this.$axios.get(`/apaas/backmgt/getPicAndSystemName`).then(res=>{
+      // this.$axios.get(`/apaas/system/getPicAndSystemName`).then(res=>{
       //   if(res.data.code==200){
       //     let data = res.data.data
       //     this.name=data.systemName
@@ -186,7 +186,7 @@ export default {
     },
     menuAction(n,parent) {
       if (n == "logout") {
-        this.$axios.get(`/apaas/backmgt/logout`).then(res=>{
+        this.$axios.get(`/apaas/system/logout`).then(res=>{
           if(res.data.code=='200'){
             this.$router.push('/login')
             this.$store.commit('setUserInfo',null)
@@ -210,7 +210,7 @@ export default {
           if(this.$store.state.menuObj[n].menuType=='font'||this.$store.state.menuObj[n].menuType=='system'){
             temp = '/apaas/ui/#'
           }else if(this.$store.state.menuObj[n].menuType=='manager'){
-            temp = '/apaas/system/uir/#'
+            temp = '/apaas/system/ui/#'
           }
           window.location.href = temp+n
         }
@@ -248,7 +248,7 @@ export default {
           if(this.$store.state.menuObj[path].menuType=='font'||this.$store.state.menuObj[path].menuType=='system'){
             temp = '/apaas/ui/#'
           }else if(this.$store.state.menuObj[path].menuType=='manager'){
-            temp = '/apaas/system/uir/#'
+            temp = '/apaas/system/ui/#'
           }
           window.location.href = temp+path
         }

src/main.js

@@ -10,6 +10,7 @@ import bgui from "@/bg-ui";
 import "@/bg-ui/index.scss";
 
 
+console.log(bgui,"-=-=-=-=-=-=-=-=-=")
 import App from './App.vue'
 
 import router from './router'

src/page/login/index.vue

@@ -57,7 +57,7 @@ export default {
   computed: {},
   created() {
     console.log(111);
-    this.getImg();
+    // this.getImg();
   },
   mounted() {},
   methods: {

src/page/main/config/dict/index.vue

 <template>
   <div class="detail_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="main_container">
+      <div class="left_type">
+        <el-input class="type-input" v-model="search" @input="searchType" placeholder="请输入内容"></el-input>
+          
+        <div class="type_station bg-scroll">
+          <div class="type-box" :class="{'current-type':nodeId==item.id}" @click="nodeClick(item)" v-for="(item,index) in typeList" :key="'type'+index+200">
+            {{item.name}}
+          </div>
+        </div>
+            
+      </div>
+      <div class="right_container">
+        
+        <div class="apaas_button">
+          <el-button class="register_btn" type="primary" @click="register">
+            <bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-add"></bg-icon>
+              新建
+          </el-button>
+        </div>
+        <div class="table_container">
+          <bg-table ref="bgTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true">
+            <template v-slot:state="{ row }">
+              {{ ["-","启用","禁用"][row.state] }}
+            </template>
+            <template v-slot:updated_time="{ row }">
+              {{ row.updated_time.split("+")[0].replace("T", " ").replace("Z", " ") }}
+            </template>
+            <template v-slot:action="{ row }">
+              <bg-table-btn class="btn" :click="()=>{edit_row(row)}" :disabled="row.state == 1">
+                编辑
+              </bg-table-btn>
+              <bg-table-btn class="btn" :click="()=>{delete_row(row)}" :disabled="row.state == 1">
+                删除
+              </bg-table-btn>
+            </template>
+          </bg-table>
+          <bg-pagination
+            :page="filter.page"
+            :size="filter.size"
+            :total="tableTotal"
+            @change-page="changePage"
+            @change-size="changeSize"
+          >
+          </bg-pagination>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
-<script >
+<script setup>
 import { reactive, toRefs, ref, } from '@vue/reactivity'
 import { getCurrentInstance } from 'vue'
-import { computed, onBeforeMount } from '@vue/runtime-core'
+import { computed, onBeforeMount, watch } from '@vue/runtime-core'
 import { useRouter } from 'vue-router';
-export default {
-  components: {
+import bgTable from '@/bg-ui/bg-table.vue'
+// const bgTable = ref(null)
+const { proxy } = getCurrentInstance()
+const { $message, $axios } = proxy
+const state = reactive({
+  typeList: [
+    {
+      name: "业务分类",
+      id: 1,
+    },
+    {
+      name: "业务领域",
+      id: 2,
+    },
+    {
+      name: "开放程度",
+      id: 3,
+    },
+    {
+      name: "开发厂商",
+      id: 4,
+    },
+    {
+      name: "菜单分组",
+      id: 5,
+    },
+  ],
+  search: "",
+  nodeId: null,
+  timer: null,
+  headers: [
+    {
+      label: "业务分类名称",
+      prop: "name",
+    },
+    {
+      label: "描述",
+      prop: "describe",
+      minWidth: 360
+    },
+    {
+      label: "状态",
+      prop: "state",
+    },
+    {
+      label: "更新时间",
+      prop: "updated_time",
+    },
+    {
+      label: "操作",
+      prop: "action",
+      width: 260,
+      fixed: "right",
+    },
+  ],
+  tableRows: [],
+  tableTotal: 0,
+  filter: {
+    state: "",
+    search: "",
+    page: 1,
+    limit: 10,
+    kind: "business_type",
   },
-  setup() {
-  
-    onBeforeMount(() => {
-     
+})
+const nodeClick = (item) => {
+  state.nodeId = item.id
+}
+const searchType = () => {
+  if (state.timer) {
+    clearTimeout(state.timer);
+  }
+  state.timer = setTimeout(() => {  
+    getTypeList()
+  }, 500);
+}
+const getTypeList = () => {
+  console.log(state.search)
+}
+const getTableRows = () => {
+  let params = {...state.filter}
+  $axios
+    .get(
+      `/apaas/system/v5/dictionary/list`,
+      {
+        params,
+      }
+    )
+    .then((res) => {
+      if (res.data.code == 200) {
+        state.tableRows = res.data.data || []
+        state.tableTotal = res.data.total
+      }else {
+        $message.error(res.data.msg)
+      }
     })
-    return {
-      ...toRefs(),
-    }
-  },
+} // 获取数据
+const changePage = () => {
+
+}
+const changeSize = () => {
+
 }
+const register = () => {
+
+}
+const edit_row = (row) => {
+
+}
+const delete_row = (row) => {
+
+}
+onBeforeMount(() => {
+ state.nodeId = 1
+
+})
+const {
+  typeList,
+  search,
+  nodeId,
+  headers,
+  tableRows,
+  tableTotal,
+  filter,
+} = toRefs(state)
+  
+
 </script>
 
 <style lang="scss" scoped>
-
+.detail_container {
+  width: 100%;
+  padding: 0 24px;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+  .main_container {
+    flex-grow: 1;
+    width: 100%;
+    display: flex;
+    // box-shadow: 0px 1px 4px 0px rgba(0,7,101,0.15);
+    
+    margin-bottom: 16px;
+    position: relative;
+    .left_type {
+      height: calc(100vh - 118px);
+      width: 280px;
+      background-color: #fff;
+      margin-right: 16px;
+      border-radius: 6px;
+      overflow: hidden;
+      padding: 16px;
+      .type_station {
+        margin-top: 16px;
+        height: calc(100% - 50px);
+        .type-box {
+          height: 32px;
+          line-height: 32px;
+          padding-left: 38px;
+          font-size: 14px;
+	        color: #404a62;
+          cursor: pointer;
+          &:hover { 
+            color: #3759be;
+            background-color: #dfe5f6;
+          }
+        }
+        .current-type{
+          color: #3759be;
+          background-color: #dfe5f6;
+        }
+      }
+    }
+    .right_container {
+      flex: 1;
+      background-color: #fff;
+      border-radius: 6px;
+    }
+  }
+  
+}
 
 </style>
\ No newline at end of file