code init

2021-05-25 18:06:45 +08:00
parent 02698d6dab
commit f54a8d4fa1
1367 changed files with 540755 additions and 21713 deletions
@@ -0,0 +1,151 @@
+<!-- 表格工具栏 -->
+<template>
+  <div class="table-tools-bar">
+  <transition enter-active-class="animated slideInDown" leave-active-class="animated slideOutUp" :duration="1000">
+    <div class="advanced-search" v-if="isAdvancedSearch">
+      <div class="advanced-search-content">
+        <div class="close-btn" @click="close">&times;</div>
+        <slot name="content"></slot>
+      </div>
+      <div class="advanced-search-footer">
+        <el-button icon="el-icon-search"
+                   type="primary"
+                   class="common-button-primary"
+                   round  @click="advancedSearch"  style="margin-right: 5px" >{{$t('m.advancedSearch')}}</el-button>
+        <el-button @click="reset"
+                   class="common-button-default"
+                   icon="el-icon-refresh-left"
+                   round></el-button>
+      </div>
+    </div>
+  </transition>
+    <div class="tools-bar-wrapper">
+      <slot name="left"></slot>
+      <slot name="right"></slot>
+    </div>
+    <!--<el-divider />-->
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'table-tools-bar',
+  data () {
+    return {
+      isAdvancedSearch: this.value
+    }
+  },
+  methods: {
+    // 重置
+    reset () {
+      this.$emit('reset')
+    },
+    // 高级搜索
+    advancedSearch () {
+      this.$emit('search')
+      this.$emit('input', false)
+    },
+    // 关闭
+    close () {
+      this.$emit('toggleSearch')
+      this.$emit('input', false)
+    }
+  },
+  props: {
+  // 是否为高级搜索
+    value: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    value (val) {
+      this.isAdvancedSearch = val
+    },
+    '$route': {
+      deep: true,
+      handler (val) {
+        if (val) {
+          this.$emit('input', false)
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+
+  @import '~@/assets/styles/mixins';
+  @import '~@/assets/styles/style';
+  .table-tools-bar{
+    background: #fff;
+    .search-area {
+      margin-bottom: 0 !important;
+    }
+    .advanced-search{
+      width: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      background: rgba(255,255,255,.95);
+      border-bottom: 1px solid #DDD;
+      z-index: 100;
+      .advanced-search-content{
+        width: 100%;
+        position: relative;
+        padding: 30px 30px 15px 15px;
+        .close-btn{
+          line-height: 40px;
+          font-size: 40px;
+          text-align: center;
+          position: absolute;
+          top: 5px;
+          right: 10px;
+          z-index: 100;
+          &:hover{
+            color: @baseColor;
+            cursor: pointer;
+          }
+        }
+      }
+      .advanced-search-footer{
+        width: 100%;
+        padding: 8px 20px;
+        .flex();
+        justify-content: flex-end;
+      }
+    }
+    .tools-bar-wrapper{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      /*margin-bottom: 0.1rem;*/
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+      /*padding-top: 0.1rem;*/
+      &>div{
+        &>div{
+          display: inline-block;
+        }
+      }
+      & > div:first-child{
+        & > span{
+          display: inline-block;
+          width: 700px;
+          .ellipsis();
+        }
+      }
+      .label-select-content{
+        min-width: 150px;
+        /*width: auto !important;*/
+      }
+      .label-input-content{
+        min-width: 150px;
+        /*width: auto !important;*/
+      }
+    }
+  }
+</style>