update： 配置管理-字典配置

src/assets/css/index.css

@@ -994,39 +994,32 @@ border-radius:8px;
   display: flex;
 }
 
-.top_fliter .filter_list {
+.filter_list {
   flex-grow: 1;
-  min-width: 550px;
   font-size: 0;
-  padding-left: 16px;
 }
-
-.filter_list>.filter_item {
-  display: inline-block;
-  vertical-align: middle;
-  margin-top: 16px;
-}
-
 .filter_list>.filter_item {
-  margin-right:34px;
+  display: flex;
+  align-items: center;
+  margin: 0 34px 16px 0;
 }
 
-.filter_list>.filter_item>* {
+/* .filter_list>.filter_item>* {
   display: inline-block;
   vertical-align: middle;
-}
+} */
 
 .filter_list>.filter_item>.filter_title {
-  min-width: 56px;
   text-align: right;
   font-size: 14px;
-  font-weight: 700;
   color: #242c43;
   margin-right: 10px;
-  white-space: nowrap;
+  width: 84px;
+  white-space: pre-wrap;
+  font-weight: normal;
 }
 
-.filter_list>.filter_item>.filter_title+* {
+/* .filter_list>.filter_item>.filter_title+* {
   width: 300px;
 }
 
@@ -1038,7 +1031,7 @@ border-radius:8px;
   position: absolute;
   right: 5px;
   top: 1px;
-}
+} */
 
 .top_fliter .filter_action {
   flex-shrink: 0;

src/assets/item.css

 :root {
   --font-color: #404a62;
   /* --el-color-primary-light-9: #f7f7f9; */
-
   --el-color-white: #ffffff;
   --el-color-black: #1a1a1a;
   --el-color-primary: #2b4695;
@@ -67,17 +66,17 @@
   --el-fill-color-dark: #ebedf0;
   --el-fill-color-darker: #e6e8eb;
   --el-fill-color-blank: #ffffff;
-  }
+  --el-component-size: 36px;
+}
 
 
 
-  .text-hide1{
+.text-hide1{
   overflow: hidden;
   text-overflow:ellipsis; 
   white-space: nowrap;
-  }
-
-  .log_content_nor::-webkit-scrollbar {
+}
+.log_content_nor::-webkit-scrollbar {
   width: 0px; /*对垂直流动条有效*/
   height: 0px; /*对水平流动条有效*/
-  }
\ No newline at end of file
+}
\ No newline at end of file

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

@@ -28,7 +28,7 @@
 </template>
 
 <script setup>
-import { computed, onMounted, reactive, toRefs, watch,ref } from "vue-demi"
+import { computed, onMounted, reactive, toRefs, watch,ref } from "vue"
   
 const state = reactive({
   showFlag: false,
@@ -36,9 +36,9 @@ const state = reactive({
 })
 
 const props = defineProps({
-  keyword: {
+  modelValue: {
     type: String,
-    default: ""
+    default: '',
   },
   placeholder: {
     type: String,
@@ -47,9 +47,12 @@ const props = defineProps({
 })
 
 watch(props,(n,o) => {
-  state.modelValue = n.keyword
+  state.modelValue = n.modelValue
 })
-const emit = defineEmits(['search'])
+watch(() => state.modelValue,(n,o) => {
+  emit('update:modelValue',n)
+})
+const emit = defineEmits(['search','update:modelValue'])
 const search = () => {
   emit('search',state.modelValue)
 }
@@ -57,7 +60,7 @@ const moreFilter = () => {
   state.showFlag = !state.showFlag
 }
 onMounted(() => {
-  state.modelValue = props.keyword
+  state.modelValue = props.modelValue
 })
 const { modelValue,showFlag } = toRefs(state)
 </script>
\ No newline at end of file

src/bg-ui/bg-table.vue

@@ -7,6 +7,8 @@
     @select="selectActionRow"
     @select-all="selectActionAll"
     :stripe="stripe"
+    :row-class-name="stripe ? tableRowClassName : ''"
+    tooltip-effect="light"
   >
     <template v-slot:empty>
       <div class="empty_container">
@@ -16,6 +18,10 @@
         </div>
       </div>
     </template>
+    <el-table-column
+      v-if="paddingLeft > 10"
+      :width="paddingLeft - 10"
+    ></el-table-column>
     <el-table-column
       type="selection"
       :selectable="selectable"
@@ -30,7 +36,7 @@
       type="index" 
       :label="indexLabel" 
       width="80" 
-      align="center"
+      align="left"
     >
       <!-- 序号 -->
     </el-table-column>
@@ -111,7 +117,11 @@ export default {
     stripe: {
       type: Boolean,
       default: false
-    }
+    },
+    paddingLeft: {
+      type: [Number, String],
+      default: () => 33,
+    },
   },
   /* filters: {
     ellipsis(value, max) {
@@ -172,7 +182,14 @@ export default {
       this.allSelectData={}
       this.nowSelectData=[]
       this.clearSelection();
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex % 2 == 0) {
+        return "white-row";
+      } else {
+        return "stripe-row";
       }
     },
+  },
 };
 </script>

src/bg-ui/index.js

@@ -32,6 +32,7 @@
  import debounce from './debounce'
  import BgPagination from './bg-pagination.vue'
  import BgInnerTabs from './bg-inner-tabs.vue'
+ import BgFilterGroup from './bg-filter-group.vue'
  
 const components = {
   BgIcon,//字体图标
@@ -65,6 +66,7 @@ const components = {
   debounce,//防抖组件
   BgPagination,// 分页组件
   BgInnerTabs,//内部tab
+  BgFilterGroup,//高级搜索
 };
 
 const install = (Vue) => {

src/bg-ui/index.scss

@@ -669,7 +669,6 @@ a {
 
   &.el-table--border {
     border-top-color: #b0bee8;
-    border-bottom: 1px solid #ebeef5;
 
     .el-table__header-wrapper {
       position: relative;
@@ -687,7 +686,7 @@ a {
 
       &::after {
         content: "";
-        width: 1px;
+        width: 0px;
         height: 100%;
         background-color: #b0bee8;
         position: absolute;
@@ -705,7 +704,12 @@ a {
       }
     }
   }
-
+  .stripe-row td {
+    background-color: #fff!important;
+  }
+  .white-row td {
+    background-color: #f7f7f9!important;
+  }
   .el-table--striped .el-table__body tr.el-table__row--striped td {
     background-color: #f7f7f9;
   }
@@ -738,6 +742,15 @@ a {
       margin: 0 !important;
     }
   }
+  .el-popper {
+    max-width: 388px;
+    padding: 15px 12px;
+    color: #202531;
+    box-shadow: 0px 4px 12px 0px 
+		rgba(18, 30, 63, 0.1);
+	  border: solid 1px #e6e9ef;
+    font-size: 14px;
+  }
 }
 
 .bg-table-pro{
@@ -2312,9 +2325,8 @@ a {
 
 .bg-pagination {
   height: 32px;
-  position: absolute;
-  right: 24px;
-  bottom: 16px;
+  margin-top: 16px;
+  float: right;
   .el-pagination {
     text-align: center;
     margin: 0 auto;

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

@@ -6,8 +6,9 @@
         <el-breadcrumb-item> 字典配置 </el-breadcrumb-item>
       </el-breadcrumb>
     </div>
-    <div class="main_container">
-      <div class="left_type">
+    <div class="flex_row">
+      <div class="flex_left">
+        <div class="box">
           <el-input class="type-input" v-model="search" @input="searchType" placeholder="请输入内容"></el-input>
           
           <div class="type_station bg-scroll">
@@ -15,16 +16,45 @@
               {{item.name}}
             </div>
           </div>
-            
         </div>
-      <div class="right_container">
             
+      </div>
+      <div class="flex_right">
+        <div class="main_container">
+          <bg-filter-group @search="changeSearch" v-model="filter.search" placeholder="请输入能力名称">
+            <template v-slot:left_action>
               <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>
+            </template>
+            <template v-slot:filter_group>
+              <div class="left-filter filter_list">
+                <div class="filter_item">
+                  <span class="filter_title">状态</span>
+                  <el-select
+                    v-model="filter.state"
+                    placeholder="请选择"
+                    style="width: 300px"
+                  >
+                    <el-option
+                      v-for="(item, index) in stateOptions"
+                      :key="'pushOptions' + index"
+                      :label="item.name"
+                      :value="item.value"
+                    >
+                    </el-option>
+                  </el-select>
+                </div>
+              </div>
+              <div class="right-action apaas_button">
+                <el-button type="primary" @click="filterAction"> 查询 </el-button>
+                <el-button type="default" @click="filterClear"> 重置 </el-button>
+              </div>
+            </template>
+          </bg-filter-group>
           <div class="table_container">
             <bg-table ref="bgTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true">
               <template v-slot:state="{ row }">
@@ -54,12 +84,12 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
 import { reactive, ref,onBeforeMount,toRefs,computed,watch  } from 'vue'
 import { useRouter } from 'vue-router';
-import bgTable from '@/bg-ui/bg-table.vue'
 import { ElMessage } from 'element-plus'
 import axios from '../../../../request/http.js'
 const state = reactive({
@@ -96,7 +126,6 @@ const state = reactive({
     {
       label: "描述",
       prop: "describe",
-      minWidth: 360
     },
     {
       label: "状态",
@@ -113,7 +142,14 @@ const state = reactive({
       fixed: "right",
     },
   ],
-  tableRows: [],
+  tableRows: [
+    {
+      name: "www",
+      describe: "sajdashkjdhsdjfkhsadjkfhkjsdahfkjashdkfjhsdjkafhkjsdhfkjshjkdfhajkhsdjkf",
+      state: 1,
+      updated_time: "2022-10-12 12:12:12"
+    },
+  ],
   tableTotal: 0,
   filter: {
     state: "",
@@ -122,6 +158,20 @@ const state = reactive({
     limit: 10,
     kind: "business_type",
   },
+  stateOptions: [
+    {
+      name: "全部",
+      value: ""
+    },
+    {
+      name: "启用",
+      value: "1"
+    },
+    {
+      name: "禁用",
+      value: "2"
+    },
+  ],
 })
 const nodeClick = (item) => {
   state.nodeId = item.id
@@ -137,6 +187,23 @@ const searchType = () => {
 const getTypeList = () => {
   console.log(state.search)
 }
+const changeSearch = (val) => {
+  state.filter.search = val
+  console.log(state.filter)
+}
+const filterAction = () => {
+  console.log(state.filter)
+}
+const filterClear = () => {
+  state.filter = {
+    state: "",
+    search: "",
+    limit: 10,
+    page: 1,
+    kind: "business_type",
+  }
+  console.log(state.filter)
+}
 const getTableRows = () => {
   let params = {...state.filter}
   axios
@@ -182,6 +249,7 @@ const {
   tableRows,
   tableTotal,
   filter,
+  stateOptions,
 } = toRefs(state)
   
 
@@ -190,31 +258,41 @@ const {
 <style lang="scss" scoped>
 .detail_container {
   width: 100%;
+  height: calc(100vh - 56px);
   padding: 0 24px;
   min-height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: stretch;
-  .main_container {
-    flex-grow: 1;
+  .flex_row {
+    // 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);
+    height: calc(100% - 62px);
+    .flex_left {
       width: 280px;
       background-color: #fff;
       margin-right: 16px;
       border-radius: 6px;
-      overflow: hidden;
       padding: 16px;
+      height: 100%;
+      box-shadow: 0px 1px 4px 0px 
+      	rgba(0, 7, 101, 0.15);
+      overflow: hidden;
+      
+      .box {
+        width: 248px;
+        height: 100%;
+        overflow: hidden;
         .type_station {
+          width: 100%;
           margin-top: 16px;
           height: calc(100% - 50px);
+          // overflow: hidden;
           .type-box {
             height: 32px;
             line-height: 32px;
@@ -233,10 +311,33 @@ const {
           }
         }
       }
-    .right_container {
+    }
+    .flex_right {
       flex: 1;
       background-color: #fff;
       border-radius: 6px;
+      box-shadow: 0px 1px 4px 0px rgba(0,7,101,0.15);
+      height: 100%;
+      .filter-group {
+        .left-filter {
+          flex: 1;
+          display: flex;
+          justify-content: start;
+          flex-wrap: wrap;
+        }
+        .right-action {
+          width: 144px;
+          padding-bottom: 16px;
+          .el-button {
+            width: 64px;
+          }
+        }
+      }
+
+      .table_container {
+        width: 100%;
+        padding: 0 16px;
+      }
     }
   }