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; */
+  --font-color: #404a62;
+  /* --el-color-primary-light-9: #f7f7f9; */
+  --el-color-white: #ffffff;
+  --el-color-black: #1a1a1a;
+  --el-color-primary: #2b4695;
+  --el-color-primary-light-3: #6b7eb5;
+  --el-color-primary-light-5: #95a3ca;
+  --el-color-primary-light-7: #c0c8df;
+  --el-color-primary-light-8: #d5daea;
+  --el-color-primary-light-9: #eaedf5;
+  --el-color-primary-dark-2: #223877;
+  --el-color-success: #429e8a;
+  --el-color-success-light-3: #7bbbad;
+  --el-color-success-light-5: #a1cfc5;
+  --el-color-success-light-7: #c7e2dc;
+  --el-color-success-light-8: #d9ece8;
+  --el-color-success-light-9: #ecf5f4;
+  --el-color-success-dark-2: #357e6e;
+  --el-color-warning: #e56600;
+  --el-color-warning-light-3: #ed944d;
+  --el-color-warning-light-5: #f2b380;
+  --el-color-warning-light-7: #f7d1b3;
+  --el-color-warning-light-8: #fae0cc;
+  --el-color-warning-light-9: #fcf0e6;
+  --el-color-warning-dark-2: #b75200;
+  --el-color-danger: #d75138;
+  --el-color-danger-light-3: #e38674;
+  --el-color-danger-light-5: #eba89c;
+  --el-color-danger-light-7: #f3cbc4;
+  --el-color-danger-light-8: #f7dcd7;
+  --el-color-danger-light-9: #fbeeeb;
+  --el-color-danger-dark-2: #ac412d;
+  --el-color-error: #d75138;
+  --el-color-error-light-3: #e38674;
+  --el-color-error-light-5: #eba89c;
+  --el-color-error-light-7: #f3cbc4;
+  --el-color-error-light-8: #f7dcd7;
+  --el-color-error-light-9: #fbeeeb;
+  --el-color-error-dark-2: #ac412d;
+  --el-color-info: #404a62;
+  --el-color-info-light-3: #7a8191;
+  --el-color-info-light-5: #a0a5b1;
+  --el-color-info-light-7: #c6c9d0;
+  --el-color-info-light-8: #d9dbe0;
+  --el-color-info-light-9: #ecedf0;
+  --el-color-info-dark-2: #333b4e;
+  --el-bg-color: #ffffff;
+  --el-bg-color-page: #f2f3f5;
+  --el-bg-color-overlay: #ffffff;
+  --el-text-color-primary: #202531;
+  --el-text-color-regular: #404a62;
+  --el-text-color-secondary: #909bb6;
+  --el-text-color-placeholder: #a9b1c7;
+  --el-text-color-disabled: #a9b1c7;
+  --el-border-color: #dadee7;
+  --el-border-color-light: #e3e5eb;
+  --el-border-color-lighter: #e6e9ef;
+  --el-border-color-extra-light: #edf0f5;
+  --el-border-color-dark: #d1d5de;
+  --el-border-color-darker: #cbced7;
+  --el-fill-color: #f0f2f5;
+  --el-fill-color-light: #f2f3f7;
+  --el-fill-color-lighter: #f7f7f9;
+  --el-fill-color-extra-light: #fafcff;
+  --el-fill-color-dark: #ebedf0;
+  --el-fill-color-darker: #e6e8eb;
+  --el-fill-color-blank: #ffffff;
+  --el-component-size: 36px;
+}
 
-    --el-color-white: #ffffff;
-    --el-color-black: #1a1a1a;
-    --el-color-primary: #2b4695;
-    --el-color-primary-light-3: #6b7eb5;
-    --el-color-primary-light-5: #95a3ca;
-    --el-color-primary-light-7: #c0c8df;
-    --el-color-primary-light-8: #d5daea;
-    --el-color-primary-light-9: #eaedf5;
-    --el-color-primary-dark-2: #223877;
-    --el-color-success: #429e8a;
-    --el-color-success-light-3: #7bbbad;
-    --el-color-success-light-5: #a1cfc5;
-    --el-color-success-light-7: #c7e2dc;
-    --el-color-success-light-8: #d9ece8;
-    --el-color-success-light-9: #ecf5f4;
-    --el-color-success-dark-2: #357e6e;
-    --el-color-warning: #e56600;
-    --el-color-warning-light-3: #ed944d;
-    --el-color-warning-light-5: #f2b380;
-    --el-color-warning-light-7: #f7d1b3;
-    --el-color-warning-light-8: #fae0cc;
-    --el-color-warning-light-9: #fcf0e6;
-    --el-color-warning-dark-2: #b75200;
-    --el-color-danger: #d75138;
-    --el-color-danger-light-3: #e38674;
-    --el-color-danger-light-5: #eba89c;
-    --el-color-danger-light-7: #f3cbc4;
-    --el-color-danger-light-8: #f7dcd7;
-    --el-color-danger-light-9: #fbeeeb;
-    --el-color-danger-dark-2: #ac412d;
-    --el-color-error: #d75138;
-    --el-color-error-light-3: #e38674;
-    --el-color-error-light-5: #eba89c;
-    --el-color-error-light-7: #f3cbc4;
-    --el-color-error-light-8: #f7dcd7;
-    --el-color-error-light-9: #fbeeeb;
-    --el-color-error-dark-2: #ac412d;
-    --el-color-info: #404a62;
-    --el-color-info-light-3: #7a8191;
-    --el-color-info-light-5: #a0a5b1;
-    --el-color-info-light-7: #c6c9d0;
-    --el-color-info-light-8: #d9dbe0;
-    --el-color-info-light-9: #ecedf0;
-    --el-color-info-dark-2: #333b4e;
-    --el-bg-color: #ffffff;
-    --el-bg-color-page: #f2f3f5;
-    --el-bg-color-overlay: #ffffff;
-    --el-text-color-primary: #202531;
-    --el-text-color-regular: #404a62;
-    --el-text-color-secondary: #909bb6;
-    --el-text-color-placeholder: #a9b1c7;
-    --el-text-color-disabled: #a9b1c7;
-    --el-border-color: #dadee7;
-    --el-border-color-light: #e3e5eb;
-    --el-border-color-lighter: #e6e9ef;
-    --el-border-color-extra-light: #edf0f5;
-    --el-border-color-dark: #d1d5de;
-    --el-border-color-darker: #cbced7;
-    --el-fill-color: #f0f2f5;
-    --el-fill-color-light: #f2f3f7;
-    --el-fill-color-lighter: #f7f7f9;
-    --el-fill-color-extra-light: #fafcff;
-    --el-fill-color-dark: #ebedf0;
-    --el-fill-color-darker: #e6e8eb;
-    --el-fill-color-blank: #ffffff;
-  }
 
 
-
-  .text-hide1{
-    overflow: hidden;
-    text-overflow:ellipsis; 
-    white-space: nowrap;
-  }
-
-  .log_content_nor::-webkit-scrollbar {
-    width: 0px; /*对垂直流动条有效*/
-    height: 0px; /*对水平流动条有效*/
-  }
\ No newline at end of file
+.text-hide1{
+  overflow: hidden;
+  text-overflow:ellipsis; 
+  white-space: nowrap;
+}
+.log_content_nor::-webkit-scrollbar {
+  width: 0px; /*对垂直流动条有效*/
+  height: 0px; /*对水平流动条有效*/
+}
\ 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,50 +6,81 @@
         <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="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">
-          <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 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>
-      <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", " ") }}
+      <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: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 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-table>
-          <bg-pagination
-            :page="filter.page"
-            :size="filter.size"
-            :total="tableTotal"
-            @change-page="changePage"
-            @change-size="changeSize"
-          >
-          </bg-pagination>
+          </bg-filter-group>
+          <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>
@@ -59,7 +90,6 @@
 <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,53 +258,86 @@ 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;
-      .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 { 
+      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;
+            padding-left: 38px;
+            font-size: 14px;
+            color: #404a62;
+            cursor: pointer;
+            &:hover { 
+              color: #3759be;
+              background-color: #dfe5f6;
+            }
+          }
+          .current-type{
             color: #3759be;
             background-color: #dfe5f6;
           }
         }
-        .current-type{
-          color: #3759be;
-          background-color: #dfe5f6;
-        }
       }
     }
-    .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;
+      }
     }
   }