@leevan/jtui 1.2.7 → 2.0.1

package/examples/App.vue

@@ -1,46 +1,662 @@
 <template>
   <div id="app" class="relative">
-        <jt-upload-pc
-            target="/upf/zbgl/chunk"
-            mergePath="/upf/zbgl/mergeFile"
-            @success="success"
-            @error="error"
-            singleMode
-            ref="upload"
-        ></jt-upload-pc>
+        <el-container style="height:100%">
+            <el-aside width="200px">
+                <el-menu
+                default-active="1"
+                class="el-menu-vertical-demo"
+                background-color="#545c64"
+                text-color="#fff"
+                @select="select"
+                active-text-color="#ffd04b">
+                    <el-menu-item 
+                    v-for="(item,index) in menu" :key="index"
+                    :index="item.idx">
+                        <i class="el-icon-menu"></i>
+                        <span slot="title">{{item.name}}</span>
+                    </el-menu-item>
+                </el-menu>
+            </el-aside>
+            <el-main>
+                <table-ptbg v-if="menuIdx == 1"></table-ptbg>
+                <table-dsj v-if="menuIdx == 2"></table-dsj>
+                <table-fzbg v-if="menuIdx == 3"></table-fzbg>
+                <table-tree v-if="menuIdx == 4"></table-tree>
+                <tree-table v-if="menuIdx == 5"></tree-table>
+            </el-main>
+        </el-container>
   </div>
 </template>
 
 <script>
-import { data2 , data23 ,data10 ,data13 ,data14} from '../packages/jt-table-pc/data2';
-import Vue from 'vue';
-import axios from 'axios';
-Vue.prototype.$axios = axios;
+import tablePtbg from './tableTest/table-ptbg.vue';
+import tableDsj from './tableTest/table-dsj.vue';
+import tableFzbg from './tableTest/table-fzbg.vue';
+import tableTree from './tableTest/table-tree.vue';
+import treeTable from './tableTest/tree-table.vue';
 export default {
-  name: 'App',
-  created(){
-      
-  },
-  data(){
+    components:{
+        tablePtbg,
+        tableDsj,
+        tableFzbg,
+        tableTree,
+        treeTable
+    },
+    name: 'App',
+    created(){
+        window.document.documentElement.setAttribute( "color-theme",'blue');
+    },
+   data(){
         return{
-            
+            menu:[
+                {
+                    name:'普通表格',
+                    idx:'1'
+                },
+                {
+                    name:'大数据表格',
+                    idx:'2'
+                },
+                {
+                    name:'分组表格',
+                    idx:'3'
+                },
+                {
+                    name:'树',
+                    idx:'4'
+                },
+                {
+                    name:'树表',
+                    idx:'5'
+                }
+            ],
+            menuIdx:'1'
         }
     },
-    methods:{
-        success(res){
-            console.log(res);
-        },
-        error(err){
-            console.log(err);
+    methods: {
+        select(idx){
+            this.menuIdx = idx;
         }
     }
 }
 </script>
 
 <style lang="scss">
+*{
+    padding:0;
+    margin:0;
+}
 html,body,#app{
   width: 100%;
   height: 100%;
 }
+$themes: (
+    blue: (   
+        //字体
+        textColor: #fff,
+        textColor1:#333,
+        textColor2:#33B0FE,
+        //移入或选中字体颜色
+        _textColor:#eeda22,
+        //图标颜色
+        iconColor:#fff,
+        iconColor1:#0f6cb3,
+        //背景
+        bgColor1:#ffffff27,
+        bgColor2:#1479b1,
+        bgColor3-1:#e8eefcD9,
+        bgColor3-2:#4251baD9,
+        bgColor3-3:#1581a0D9,
+        bgColor5:#4683c4,
+        bgColor6:#2790c9,
+        bgColor7:#279ee2B3,
+        //渐变
+        linear1:linear-gradient(to right,#287ddfB3,#287ddfB3), //70%透明度
+        linear2:linear-gradient(to right,#dbe8f6,#dbe8f6),
+        linear3:linear-gradient(to right,#dbe8f6D9,#dbe8f6D9),
+        linear4:linear-gradient(to right,#295ab3,#236ebc),
+        //边框
+        bdColor: #789ddd,
+        bdColor1:#333,
+        bdColor2:#60e5f8,
+        bdColor3:#dbe8f6,
+        bdColor4:#b7cadb
+    ),
+    black: (
+        //字体
+        textColor:#fff,
+        textColor1:#333,
+        textColor2:#dadada,
+        //移入或选中字体颜色
+        _textColor:#57f857,
+        //图标颜色
+        iconColor:#fff,
+        iconColor1:#787d81,
+        //背景
+        bgColor1:#2c2f36,
+        bgColor2:#094860,
+        bgColor3-1:#f0f0f0D9,
+        bgColor3-2:#161f30D9,
+        bgColor3-3:#07506cD9,
+        bgColor5:#787a80,
+        bgColor6:#989aa0,
+        bgColor7:#989aa0B3,
+        //渐变
+        linear1:linear-gradient(to right,#6f7071B3,#05040eB3), //70%透明度
+        linear2:linear-gradient(to right,#dddddd,#dddddd),
+        linear3:linear-gradient(to right,#ddddddD9,#ddddddD9),
+        linear4:linear-gradient(to right,#5b5f68,#5d5e62),
+        //边框
+        bdColor: #a0a08e,
+        bdColor1:#333,
+        bdColor2:#d1cfd0,
+        bdColor3:#dddddd,
+        bdColor4:#d0d3d6
+    ),
+    purple: (
+        //字体
+        textColor:#fff,
+        textColor1:#333,
+        textColor2:#ca92f1,
+        //移入或选中字体颜色
+        _textColor:#57f857,
+        //图标颜色
+        iconColor:#fff,
+        iconColor1:#ab5fbe,
+        //背景
+        bgColor1:#552782,
+        bgColor2:#98298a,
+        bgColor3-1:#ffeff6D9,
+        bgColor3-2:#90377aD9,
+        bgColor3-3:#5375b9D9,
+        bgColor5:#733da3,
+        bgColor6:#9a52da,
+        bgColor7:#9a52daB3,
+        //渐变
+        linear1:linear-gradient(to right,#8351c2B3,#bd2e77B3), //70%透明度
+        linear2:linear-gradient(to right,#e6deeb,#e6deeb),
+        linear3:linear-gradient(to right,#e6deebD9,#e6deebD9),
+        linear4:linear-gradient(to right,#774ab8,#6c31a8),
+        //边框
+        bdColor: #ecc5e0,
+        bdColor1:#333,
+        bdColor2:#b379e7,
+        bdColor3:#e6deeb,
+        bdColor4:#d0d3d6
+    )
+);
+//设置容器
+@mixin size($width:auto,$height:auto,$bg:null,$lh:false,$rd:null,$ag:null,$dp:null,$bd:null,$cp:false,$of:null) {
+    width:$width;
+    height:$height;
+    @if $bg{
+        background-color:$bg;
+    }
+    @if $lh{
+        line-height: $height;
+    }
+    @if $rd{
+        border-radius: $rd;
+    }
+    @if $ag{
+        text-align: $ag;
+    }
+    @if $dp{
+        display: $dp;
+    }
+    @if $bd{
+        border:$bd;
+    }
+    @if $cp{
+        cursor: pointer;
+    }
+    @if $of{
+        overflow: $of;
+    }
+}
+//设置字体
+@mixin font($color:#fff,$size:14px,$sp:null,$dc:null,$ws:false,$cp:false,$ff:null){
+    color:$color;
+    font-size:$size;
+    @if $sp {
+        letter-spacing:$sp;
+    }
+    @if $dc {
+        text-decoration: $dc;
+    }
+    @if $ws{
+        white-space:nowrap;
+    }
+    @if $cp{
+        cursor: pointer;
+    }
+    @if $ff{
+        font-family: $ff;
+    }
+}
+//绝对定位撑满容器
+@mixin absolute-full($top:0,$right:0,$bottom:0,$left:0,$zi:null){
+    position: absolute;
+    top:$top;
+    right:$right;
+    bottom:$bottom;
+    left:$left;
+    @if $zi{
+        z-index:$zi
+    }
+}
+//绝对定位 top left
+@mixin absolute-top-left($top:0,$left:0){
+    position: absolute;
+    top:$top;
+    left:$left;
+}
+//绝对定位 top right
+@mixin absolute-top-right($top:0,$right:0){
+    position: absolute;
+    top:$top;
+    right:$right;
+}
+//绝对定位 bottom left
+@mixin absolute-bottom-left($bottom:0,$left:0){
+    position: absolute;
+    bottom:$bottom;
+    left:$left;
+}
+//绝对定位 bottom right
+@mixin absolute-bottom-right($bottom:0,$right:0){
+    position: absolute;
+    bottom:$bottom;
+    right:$right;
+}
+//设置背景
+@mixin background($type:'color',$val:#fff){
+    @if $type == 'color' {
+        background-color: $val;
+    }@else if $type == 'img' {
+        background-image: $val;
+        background-size: 100%;
+    }
+}
+// 文字省略：单行
+.text-oneline {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+//不知宽高的元素绝对居中
+.el-center {
+    @include absolute-top-left(50%,50%);
+    transform: translate(-50%,-50%);
+}
+//相对定位
+.relative{
+    position: relative;
+}
+//相对定位垂直居中
+.middle{
+    position: relative;
+    top:50%;
+    transform: translateY(-50%);
+}
+//滚动条样式
+@mixin scrollBarStyle($w:2px,$h:2px,$c:#989ba380) {
+    &::-webkit-scrollbar {
+        width: $w;
+        height: $h;
+        display: none;
+    }
+    &:hover::-webkit-scrollbar{
+        display: block;
+    }
+    &::-webkit-scrollbar-thumb {
+        border-radius: 10px;
+        background:$c;
+    }
+}
+
+//滚动条样式
+@mixin scrollBarStyle1($w:2px,$h:2px,$c:#989ba380) {
+    &::-webkit-scrollbar {
+        width: $w;
+        height: $h;
+    }
+    &::-webkit-scrollbar-thumb {
+        border-radius: 10px;
+        background:$c;
+    }
+}
+//遍历主题map
+@mixin themeify {
+    @each $theme-name, $theme-map in $themes {
+        //!global 把局部变量强升为全局变量
+        $theme-map: $theme-map !global;
+        //判断html的data-theme的属性值  #{}是sass的插值表达式
+        //& sass嵌套里的父容器标识   @content是混合器插槽，像vue的slot
+        [color-theme="#{$theme-name}"] & {
+            @content;
+        }
+    }
+}
+
+//声明一个根据Key获取颜色的function
+@function themed($key) {
+    @return map-get($theme-map, $key);
+}
+
+//获取主框架背景颜色
+@mixin bg($color) {
+    @include themeify {
+        background-color: themed($color);
+    }
+}
+
+@mixin _bg($color) {
+    @include themeify {
+        background-color: themed($color) !important;
+    }
+}
+
+//获取主框架背景颜色
+@mixin bgl($color) {
+    @include themeify {
+        background-image: themed($color);
+    }
+}
+
+@mixin _bgl($color) {
+    @include themeify {
+        background-image: themed($color) !important;
+    }
+}
+
+//获取主框架背景颜色
+@mixin bgi($path) {
+    @include themeify {
+        background-image: themed($path);
+    }
+}
+
+//获取主框架字体颜色
+@mixin txt($color) {
+    @include themeify {
+        color: themed($color);
+    }
+}
+
+@mixin _txt($color) {
+    @include themeify {
+        color: themed($color) !important;
+    }
+}
+
+//获取主框架边框颜色
+@mixin bd($color,$p:null) {
+    @include themeify {
+        @if $p==null {
+            border-color: themed($color);
+        }
+        @if $p=='l' {
+            border-left-color: themed($color);
+        }
+        @if $p=='r' {
+            border-right-color: themed($color);
+        }
+        @if $p=='t' {
+            border-top-color: themed($color);
+        }
+        @if $p=='b' {
+            border-bottom-color: themed($color);
+        }
+    }
+}
+
+//获取主框架边框颜色
+@mixin _bd($color,$p:null) {
+    @include themeify {
+        @if $p==null {
+            border-color: themed($color) !important;
+        }
+        @if $p=='l' {
+            border-left-color: themed($color) !important;
+        }
+        @if $p=='r' {
+            border-right-color: themed($color) !important;
+        }
+        @if $p=='t' {
+            border-top-color: themed($color) !important;
+        }
+        @if $p=='b' {
+            border-bottom-color: themed($color) !important;
+        }
+    }
+}
+//设置outline
+@mixin ol($color) {
+    @include themeify {
+        outline:1px solid themed($color);
+    }
+}
+//设置表格的边线
+@mixin linear($color){
+    @include themeify {
+        background-image: linear-gradient(themed($color),themed($color)),linear-gradient(themed($color),themed($color));
+    }
+}
+
+//菜单1
+.menu-one{
+    .mune-base ul{
+        background-color: #f2f2f2 !important;
+        .el-submenu__title,
+        .el-menu-item{
+            height:42px;
+            line-height: 41px;
+            i{
+                @include txt("textColor1");
+            }
+            span{
+                @include txt("textColor1");
+            }
+        }
+    }
+    >ul{
+        text-align: left;
+        .el-submenu__title,
+        .el-menu-item{
+            height:42px;
+            line-height: 41px;
+            i{
+                @include txt("iconColor");
+            }
+            span{
+                @include txt("textColor");
+            }
+        }
+        .el-submenu__title{
+            border:none !important;
+            padding-left: 10px;
+            padding-right: 0;
+            span{
+                @include size(150px,auto,$dp:inline-block,$ag:left);
+                @extend .text-oneline;
+                padding-right:15px;
+            }
+        }
+        .el-menu-item {
+            padding-left: 10px;
+            padding-right: 10px;
+            span{
+                @include size(220px,auto,$dp:inline-block,$ag:left);
+                @extend .text-oneline;
+            }
+        }
+        .el-menu--collapse>.el-submenu>.el-submenu__title .el-submenu__icon-arrow{
+            display: inline-block;
+            right:10px !important;
+        }
+    }
+    .el-menu.el-menu--horizontal{
+        border:none;
+    }
+    .el-menu-item.is-active{
+        @include _bg('bgColor6');
+        span,i{
+            @include _txt('textColor');
+        }
+    }
+}
+//菜单移入效果
+.el-menu-item:hover,
+.el-submenu__title:hover{
+    @include _bg('bgColor6');
+    span,i{
+        @include _txt('textColor');
+    }
+}
+//加载条颜色
+#nprogress .bar {
+    background: rgb(175, 111, 28) !important; //自定义颜色
+}
+//文字提示容器取消outline
+.el-tooltip{
+    outline: none;
+}
+
+@for $i from 0 through 4 {
+    .level#{$i}{
+        font-size: (15px - $i);
+        margin-left:6px;
+    }
+}
+
+@mixin theme(){
+    [data-theme="primary1"]{
+    };
+    [data-theme="primary2"]{
+    };
+    [data-theme="primary3"]{
+        @extend .breadcrumb-jt;
+    };
+}
+//表格样式1
+.tableStyle-1{
+    //设置行高度
+    .vxe-body--column,.vxe-footer--column{
+        @include linear('bdColor4');
+    }
+    .vxe-header--row{
+        background: linear-gradient(#efeef0,#d0d3d6);
+        font-size: 12px;
+    }
+    .jt-table-class-only .vxe-header--column{
+        height:34px !important;
+        @include linear('bdColor4');
+    }
+    //背景色
+    .vxe-table .vxe-body--row{
+        background-color: transparent;
+    }
+    /* table斑马线颜色 */
+    .vxe-table .vxe-body--row.row--stripe {
+        background-color:#dadfe780;;
+    }
+    //移入颜色
+    .vxe-table .vxe-body--row:hover{
+        background-color: #a2c2ec80;
+    }
+    /* table行高亮颜色 */
+    .vxe-table.jt-table-class-only .vxe-body--row.row--current{
+        background: #b5cff180;
+    }
+    /* table列高亮颜色 */
+    .vxe-table.jt-table-class-only .vxe-body--column.col--current{
+        background: #a2c2ec80;
+    }
+    .jt-table-class-only div{
+         @include scrollBarStyle1(6px,6px,#588ccf);
+         box-sizing: border-box;
+    }
+    .vxe-body--row .col--checkbox,
+    .vxe-body--row .col--radio{
+        background: linear-gradient(#efeef0,#d0d3d6);
+        border-right:1px solid;
+        @include bd('bdColor4');
+    }
+    .vxe-body--row .col--seq{
+        background: linear-gradient(#efeef0,#d0d3d6);;
+    }
+    .f-col .vxe-body--column{
+        background:linear-gradient(#efeef0,#d0d3d6) !important;
+    }
+    .h-col div{
+        display: none;
+    }
+}
 
+//表格样式2
+.tableStyle-2{
+    .vxe-table{
+        font-size: 12px;
+    }
+    //设置行高度
+    .vxe-table--header-border-line{
+        @include bd('bdColor4');
+    }
+    .vxe-body--column{
+        @include linear('bdColor4');
+    }
+    .vxe-header--row{
+        background: linear-gradient(#f3fcfe,#d5dfe8);
+        font-size: 12px;
+    }
+    .vxe-header--column{
+        height:34px !important;
+        @include linear('bdColor4');
+    }
+    /* table斑马线颜色 */
+    .vxe-table .vxe-body--row.row--stripe {
+        background:#d6ebfd;
+    }
+    //移入颜色
+    .vxe-table .vxe-body--row:hover{
+        background: #bbd4ea;
+    }
+    /* table行高亮颜色 */
+    .vxe-table .vxe-body--row.row--current{
+        background: #bbd4ea;
+    }
+    /* table列高亮颜色 */
+    .vxe-table .vxe-body--column.col--current{
+        background: #bbd4ea;
+    }
+    .jt-table-class-only div{
+         @include scrollBarStyle1(6px,6px,#588ccf);
+         box-sizing: border-box;
+    }
+    .jt-table-class-only .col--checkbox{
+        background: linear-gradient(#f3fcfe,#d5dfe8) !important;
+        border-right:1px solid;
+        border-bottom:1px solid;
+        @include _bd('bdColor4');
+    }
+    .jt-table-class-only .col--radio{
+        background: linear-gradient(#f3fcfe,#d5dfe8);
+        border-right:1px solid;
+        @include _bd('bdColor4');
+    }
+    .vxe-body--row .col--seq{
+        background: linear-gradient(#f3fcfe,#d5dfe8) !important;
+        border-right:1px solid;
+        border-bottom:1px solid;
+        @include _bd('bdColor4') ;
+    }
+    .f-col .vxe-body--column{
+        background:linear-gradient(#efeef0,#d0d3d6) !important;
+    }
+    .h-col div{
+        display: none;
+    }
+}
 </style>