@leevan/jtui 1.2.7 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leevan/jtui",
-  "version": "1.2.7",
+  "version": "2.0.1",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -36,16 +36,17 @@
     "core-js": "^3.6.4",
     "echarts": "^4.2.1",
     "element-ui": "2.13.2",
+    "exceljs": "^4.3.0",
     "moment": "^2.26.0",
     "node-sass": "^5.0.0",
     "sass-loader": "^10.1.0",
     "vue": "^2.6.11",
     "vue-furcate-tree": "^1.0.0",
     "vue-simple-uploader": "^0.7.4",
-    "vxe-table": "2.9.15",
-    "vxe-table-plugin-export-xlsx": "1.6.0",
-    "xe-utils": "2.4.5",
-    "xlsx": "^0.16.5"
+    "vxe-table": "^3.3.12",
+    "vxe-table-plugin-export-xlsx": "^2.2.1",
+    "xe-utils": "^3.3.2",
+    "xlsx": "^0.17.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.3.0",

package/packages/index.js

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import JtTablePc from './jt-table-pc';
+import JtTablePc from './jt-table';
 import JtFormPc from './jt-form-pc';
 import JtUploadPc from './jt-upload-pc';
 import JtEchartsPc from './jt-echarts-pc';
@@ -8,8 +8,8 @@ import JtOrgtreePc from './jt-orgtree-pc'
 //vex-table样式
 import 'vxe-table/lib/index.css';
 import VXETable from 'vxe-table';
-import './jt-table-pc/filter.js';
-import './jt-table-pc/comp.js';
+import './jt-table/filter.js';
+import './jt-table/comp.js';
 import 'xe-utils';
 Vue.use(VXETable);
 
@@ -17,6 +17,9 @@ Vue.use(VXETable);
 import moment from 'moment'//导入文件 
 Vue.prototype.$moment = moment;//赋值使用
 
+import axios from './jtaxios.js';
+Vue.prototype.$axios = axios;
+
 //echarts 依赖
 import Echarts from 'echarts';
 Vue.use(Echarts);

package/packages/jt-echarts-pc/JtEchartsPc.vue

@@ -319,6 +319,10 @@
 			chartObj() {
 				return this.myChart;
 			},
+      disposeChart () {
+				this.myChart.dispose();
+	      this.myChart = this.echarts.init(document.getElementById(this.ID));
+      },
 			setEchartsOption() {
 
 				console.log(this.echartsData.option, "this.echartsData.option");
@@ -699,8 +703,8 @@
 						ymaxValue = ymaxValue - 0;
 						yminValue = yminValue - 0;
 
-						ymaxValue = Math.round((ymaxValue + sub * this.maxAndMinLevel) * Math.pow(10, this.yMaxAndMinkeepDecimal)) / Math.pow(10, this.yMaxAndMinkeepDecimal);
-						yminValue = Math.round((yminValue - sub * this.maxAndMinLevel) * Math.pow(10, this.yMaxAndMinkeepDecimal)) / Math.pow(10, this.yMaxAndMinkeepDecimal);
+						ymaxValue = Math.ceil((ymaxValue + sub * this.maxAndMinLevel) * Math.pow(10, this.yMaxAndMinkeepDecimal)) / Math.pow(10, this.yMaxAndMinkeepDecimal);
+						yminValue = Math.floor((yminValue - sub * this.maxAndMinLevel) * Math.pow(10, this.yMaxAndMinkeepDecimal)) / Math.pow(10, this.yMaxAndMinkeepDecimal);
 
 						this.echartsData.option.yAxis.min = yminValue;//(yminValue-sub)*this.maxAndMinLevel;
 						this.echartsData.option.yAxis.max = ymaxValue;//(ymaxValue+sub)*this.maxAndMinLevel;

package/packages/jt-form-pc/JtFormPc.vue

@@ -180,7 +180,7 @@
                 <!-- 输入框带输入建议 -->
                 <el-autocomplete
                 v-if="item.type === 'autocomplete'"
-                :width="item.width ? item.width + 'px' : '100px'"
+               :style="{width:item.width ? item.width + 'px' : '100px'}"
                 class="inline-input"
                 v-model="model[item.modelKey]"
                 :fetch-suggestions="item.querySearch"

package/packages/jt-table/comp.js

@@ -0,0 +1,17 @@
+import Vue from 'vue';
+import VXETable from 'vxe-table';
+import XEUtils from 'xe-utils'
+
+import TabsBtn from './components/tabsBtn.vue';
+
+Vue.component(TabsBtn.name, TabsBtn)
+
+VXETable.renderer.add('TabsBtn',{
+    renderDefault (h, renderOpts, params) {
+        const {  events , parentRow  } = renderOpts;
+        return [
+            <tabs-btn params={ params } events={ events } parentRow={ parentRow }
+            ></tabs-btn>
+        ]
+    }
+})

package/packages/jt-table/components/tabsBtn.vue

@@ -0,0 +1,53 @@
+<template>
+    <div>
+        <el-radio-group v-model="radio_value" size="mini" @change="btnsClick">
+            <el-radio-button
+            v-for="(item,index) in fullData"
+            :key="index" 
+            :label="item.value">{{item.label}}</el-radio-button>
+        </el-radio-group>
+    </div>
+</template>
+
+<script>
+    export default {
+        name:'TabsBtn',
+        data(){
+            return {
+                radio_value:"",
+                fullData:[],
+                oldValue:""
+            }
+        },
+        props: {
+            params: Object
+        },
+        created(){
+            this.load();
+        },
+        methods:{
+            load(){
+                const { row , column } = this.params;
+                if(row && row[column.property] && row[column.property].enum){
+                    this.fullData = row[column.property].enum
+                    this.radio_value = row[column.property].selected
+                    this.oldValue = row[column.property].selected;
+                }
+            },
+            async btnsClick(val){
+                const { row , column } = this.params;
+                const { events , parentRow } = this.$attrs;
+                const result = await events.radioChange({row,property:column.property,val,params:parentRow});
+                if(result){
+                    this.oldValue = val;
+                }else{
+                    this.radio_value = this.oldValue;
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/packages/jt-table/examples/FilterComplex.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="jt-table-filter-complex">
+    <div class="jt-table-fc-type">
+      <vxe-radio v-model="option.data.type" name="fType" label="eq">=</vxe-radio>
+      <vxe-radio v-model="option.data.type" name="fType" label="gt">></vxe-radio>
+      <vxe-radio v-model="option.data.type" name="fType" label="lt">&lt</vxe-radio>
+      <vxe-radio v-model="option.data.type" name="fType" label="gteq">≥</vxe-radio>
+      <vxe-radio v-model="option.data.type" name="fType" label="lteq">≤</vxe-radio>
+    </div>
+    <div class="jt-table-fc-name">
+      <vxe-input v-model="option.data.value" type="text" placeholder="请输入筛选值" @input="changeOptionEvent()"></vxe-input>
+    </div>
+    <div class="jt-table-fc-footer">
+      <vxe-button status="primary" @click="confirmEvent">确认</vxe-button>
+      <vxe-button @click="resetEvent">重置</vxe-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FilterComplex',
+  props: {
+    params: Object
+  },
+  data () {
+    return {
+      size: 'mini', // 被所有子组件继承 size
+      column: null,
+      option: null
+    }
+  },
+  watch: {
+    params () {
+      this.load()
+    }
+  },
+  created () {
+    this.load()
+  },
+  methods: {
+    load () {
+      const { column } = this.params
+      const option = column.filters[0]
+      this.column = column
+      this.option = option
+    },
+    changeOptionEvent () {
+      const { params, option } = this
+      const { $panel } = params
+      const checked = !!option.data.value
+      $panel.changeOption(null, checked, option)
+    },
+    confirmEvent () {
+      const { $panel } = this.params
+      $panel.confirmFilter()
+    },
+    resetEvent () {
+      const { $panel } = this.params
+      $panel.resetFilter()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.jt-table-filter-complex {
+  width: 260px;
+  padding: 5px 15px 10px 15px;
+}
+.jt-table-filter-complex .jt-table-fc-type {
+  padding: 8px 0;
+}
+.jt-table-filter-complex .jt-table-fc-footer {
+  padding-top:12px;
+  text-align: center;
+}
+</style>

package/packages/jt-table/examples/FilterContent.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="jt-table-filter-content">
+    <div class="jt-table-fc-search">
+      <div class="jt-table-fc-search-top">
+        <vxe-input v-model="option.data.sVal" placeholder="搜索" suffix-icon="fa fa-search" @keyup="searchEvent"></vxe-input>
+      </div>
+      <div class="jt-table-fc-search-content">
+        <template v-if="valList.length">
+          <ul class="jt-table-fc-search-list jt-table-fc-search-list-head">
+            <li class="jt-table-fc-search-item">
+              <vxe-checkbox v-model="isAll" :indeterminate="isIndeterminate" @change="changeAllEvent">全选</vxe-checkbox>
+            </li>
+          </ul>
+          <ul class="jt-table-fc-search-list jt-table-fc-search-list-body">
+            <li  class="jt-table-fc-search-item" v-for="(item, sIndex) in valList" :key="sIndex">
+              <vxe-checkbox  v-model="item.checked" @change="changeItemEvent">{{ item.value }}</vxe-checkbox>
+            </li>
+          </ul>
+        </template>
+        <template v-else>
+          <div class="jt-table-fc-search-empty">无匹配项</div>
+        </template>
+      </div>
+    </div>
+    <div class="jt-table-fc-footer">
+      <vxe-button status="primary" @click="confirmFilterEvent">确认</vxe-button>
+      <vxe-button @click="resetFilterEvent">重置</vxe-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import XEUtils from 'xe-utils'
+export default {
+  name: 'FilterContent',
+  props: {
+    params: Object
+  },
+  data () {
+    return {
+      size: 'mini',
+      isAll: false,
+      isIndeterminate: false,
+      option: null,
+      colValList: [],
+      valList: []
+    }
+  },
+  watch: {
+    params () {
+      this.load()
+    },
+    colValList () {
+      this.searchEvent()
+    }
+  },
+  created () {
+    this.load()
+    this.searchEvent()
+  },
+  methods: {
+    load () {
+      // filters 可以配置多个，实际只用一个就可以满足需求了
+      const { $table, column } = this.params
+      const { fullData } = $table.getTableData()
+      const option = column.filters[0]
+      const { vals } = option.data
+      const colValList = Object.keys(XEUtils.groupBy(fullData, column.property)).map(val => {
+        return {
+          checked: vals.includes(val),
+          value: val
+        }
+      })
+      this.option = option
+      this.colValList = colValList
+      this.valList = colValList
+    },
+    searchEvent () {
+      const { option, colValList } = this
+      this.valList = option.data.sVal ? colValList.filter(item => item.value.indexOf(option.data.sVal) > -1) : colValList
+      this.updateCheckStatus()
+    },
+    changeAllEvent () {
+      const { isAll } = this
+      this.valList.forEach(item => {
+        item.checked = isAll
+      })
+      this.isIndeterminate = false
+    },
+    updateCheckStatus () {
+      const { valList } = this
+      const isAll = valList.every(item => item.checked)
+      this.isAll = isAll
+      this.isIndeterminate = !isAll && valList.some(item => item.checked)
+    },
+    changeItemEvent () {
+      this.updateCheckStatus()
+    },
+    confirmFilterEvent () {
+      const { params, option, valList } = this
+      const { data } = option
+      const { $panel } = params
+      data.vals = valList.filter(item => item.checked).map(item => item.value)
+      option.checked = true
+      $panel.confirmFilter()
+    },
+    resetFilterEvent () {
+      const { $panel } = this.params
+      $panel.resetFilter()
+    }
+  }
+}
+</script>
+
+<style>
+.jt-table-filter-content {
+  padding: 10px;
+  user-select: none;
+}
+.jt-table-filter-content .jt-table-fc-search .jt-table-fc-search-top {
+  position: relative;
+  padding: 5px 0;
+}
+.jt-table-filter-content .jt-table-fc-search .jt-table-fc-search-top > input {
+  border: 1px solid #ABABAB;
+  padding: 0 20px 0 2px;
+  width: 200px;
+  height: 22px;
+  line-height: 22px;
+}
+.jt-table-filter-content .jt-table-fc-search .jt-table-fc-search-content {
+  border: 1px solid #E2E4E7;
+  padding: 2px 10px;
+}
+.jt-table-filter-content .jt-table-fc-search-empty {
+  text-align: center;
+  padding: 20px 0;
+}
+.jt-table-filter-content .jt-table-fc-search-list {
+  margin: 0;
+  padding:0;
+}
+.jt-table-filter-content .jt-table-fc-search-list-body {
+  overflow: auto;
+  height: 120px;
+}
+.jt-table-filter-content .jt-table-fc-search-list .jt-table-fc-search-item {
+  padding: 2px 0;
+  display: block;
+}
+.jt-table-filter-content .jt-table-fc-footer {
+  text-align: center;
+  padding-top: 10px;
+}
+.jt-table-filter-content .jt-table-fc-footer button {
+  padding: 0 15px;
+  margin-left: 15px;
+}
+</style>

package/packages/jt-table/examples/FilterExcel.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="jt-table-filter-excel">
+    <div class="jt-table-fe-top">
+       <div class="jt-table-fe-popup">
+          <div class="jt-table-fe-popup-filter jt-table-fe-popup-f1">
+            <vxe-select class="jt-table-fe-popup-filter-select" 
+            v-model="option.data.f1Type" 
+            transfer 
+            >
+              <vxe-option 
+              v-for="(fItem,index) in allCaseList" 
+              :key="index" 
+              :value="fItem.value" 
+              :label="fItem.label"></vxe-option>
+            </vxe-select>
+            <vxe-input 
+            class="jt-table-fe-popup-filter-input" 
+            v-model="option.data.f1Val" 
+            ></vxe-input>
+          </div>
+          <div class="jt-table-fe-popup-concat">
+            <vxe-radio-group v-model="option.data.fMode">
+              <vxe-radio label="and">与</vxe-radio>
+              <vxe-radio label="or">或</vxe-radio>
+            </vxe-radio-group>
+          </div>
+          <div class="jt-table-fe-popup-filter jt-table-fe-popup-f2">
+            <vxe-select 
+            class="jt-table-fe-popup-filter-select" 
+            v-model="option.data.f2Type" transfer>
+              <vxe-option 
+              v-for="(fItem,index) in allCaseList" 
+              :key="index" 
+              :value="fItem.value" 
+              :label="fItem.label"></vxe-option>
+            </vxe-select>
+            <vxe-input 
+            class="jt-table-fe-popup-filter-input" 
+            v-model="option.data.f2Val" 
+            clearable></vxe-input>
+          </div>
+        </div>
+    </div>
+    <div class="jt-table-fe-footer">
+      <vxe-button status="primary" @click="confirmFilterEvent">确认</vxe-button>
+      <vxe-button @click="resetFilterEvent">重置</vxe-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import XEUtils from 'xe-utils'
+import { ModalController } from 'vxe-table'
+export default {
+  name: 'FilterExcel',
+  props: {
+    params: Object
+  },
+  data () {
+    return {
+      data:null,
+      size:'mini',
+      column: null,
+      option: null,
+      colValList: [],
+      caseGroups: [
+        [
+          { value: 'equal', label: '等于' },
+          { value: 'ne', label: '不等于' }
+        ],
+        [
+          { value: 'greater', label: '大于' },
+          { value: 'ge', label: '大于或等于' },
+          { value: 'less', label: '小于' },
+          { value: 'le', label: '小于或等于' },
+          { value: 'between', label: '介于' }
+        ],
+        [
+          { value: 'custom', label: '自定义筛选' }
+        ]
+      ],
+      allCaseList: [
+        { value: '1', label: '等于' },
+        { value: '2', label: '不等于' },
+        { value: '3', label: '大于' },
+        { value: '4', label: '大于或等于' },
+        { value: '5', label: '小于' },
+        { value: '6', label: '小于或等于' },
+        { value: '7', label: '开头是' },
+        { value: '8', label: '开头不是' },
+        { value: '9', label: '结尾是' },
+        { value: '10', label: '结尾不是' },
+        { value: '11', label: '包含' },
+        { value: '12', label: '不包含' }
+      ]
+    }
+  },
+  watch: {
+    params () {
+      this.load()
+    }
+  },
+  created () {
+    this.load()
+  },
+  methods: {
+    load () {
+      const { $table, column } = this.params
+      const { fullData } = $table.getTableData()
+      const option = column.filters[0]
+      const colValList = Object.keys(XEUtils.groupBy(fullData, column.property))
+      this.column = column
+      this.option = option
+      this.colValList = colValList
+    },
+    confirmFilterEvent () {
+      const { params, option } = this
+      const { data } = option
+      const { $panel } = params
+      data.f1 = ''
+      data.f2 = ''
+      option.checked = true
+      $panel.confirmFilter()
+    },
+    resetFilterEvent () {
+      const { $panel } = this.params
+      $panel.resetFilter()
+    }
+  }
+}
+</script>
+<style>
+.jt-table-filter-excel {
+  user-select: none;
+  padding: 10px;
+  text-align: center;
+  width:180px;
+  
+}
+.jt-table-filter-excel .jt-table-fe-top{
+  border: 1px solid #E2E4E7;
+  padding: 6px 6px 18px 6px;
+}
+.jt-table-filter-excel .jt-table-fe-popup-concat{
+  margin-top:10px;
+}
+.jt-table-filter-excel .jt-table-fe-popup-filter-select{
+  width:60px;
+  display: inline-block;
+  margin-top:10px;
+}
+.jt-table-filter-excel .jt-table-fe-popup-filter-input{
+  width:100px;
+  display: inline-block;
+  position: relative;
+  right: 1px;
+}
+.jt-table-filter-excel .jt-table-fe-footer{
+  margin-top:10px;
+}
+</style>