@leevan/jtui 2.0.40 → 2.0.42

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

@@ -1,78 +0,0 @@
-<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-pc/examples/FilterContent.vue

@@ -1,159 +0,0 @@
-<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-pc/examples/FilterExcel.vue

@@ -1,161 +0,0 @@
-<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>

package/packages/jt-table-pc/examples/FilterInput.vue

@@ -1,92 +0,0 @@
-<template>
-  <div class="jt-table-filter-input">
-    <vxe-input 
-    v-for="(item,index) in column.filters"
-    :key="index"
-    type="text" 
-    style="margin-top:6px"
-    v-model="item.data" 
-    placeholder="请输入筛选值" 
-    @input="changeOptionEvent"></vxe-input>
-    <div class="jt-table-fc-footer">
-      <vxe-button status="primary" @click="confirmEvent">确认</vxe-button>
-      <vxe-button @click="resetEvent">重置</vxe-button>
-      <vxe-button @click="addInput">+</vxe-button>
-      <vxe-button @click="decInput">-</vxe-button>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'FilterInput',
-  props: {
-    params: Object
-  },
-  data () {
-    return {
-      size: 'mini',
-      column: null,
-      option: null
-    }
-  },
-  watch: {
-    params () {
-      this.load()
-    }
-  },
-  created () {
-    this.load()
-  },
-  methods: {
-    load () {
-      // filters 可以配置多个，实际只用一个就可以满足需求了
-      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
-      $panel.changeOption(null, checked, option)
-    },
-    //确认
-    confirmEvent () {
-      const { $panel } = this.params
-      $panel.confirmFilter()
-    },
-    //重置
-    resetEvent () {
-      const { $panel } = this.params
-      this.column.filters.length = 1;
-      $panel.resetFilter()
-    },
-    //增加
-    addInput(){
-      this.column.filters.push({checked: true,
-        data: "",
-        label: undefined,
-        resetValue: undefined,
-        value: undefined})
-    },
-    decInput(){
-      if(this.column.filters.length > 1){
-        this.column.filters.pop();
-      } 
-    }
-  }
-}
-</script>
-
-<style scoped>
-.jt-table-filter-input {
-  padding: 10px;
-  
-}
-.jt-table-filter-input .jt-table-fc-footer {
-  padding-top:12px;
-  text-align: center;
-}
-</style>

package/packages/jt-table-pc/filter.js

@@ -1,162 +0,0 @@
-import Vue from 'vue';
-import VXETable from 'vxe-table';
-import XEUtils from 'xe-utils'
-
-import FilterInput from './examples/FilterInput.vue'
-import FilterContent from './examples/FilterContent.vue'
-import FilterComplex from './examples/FilterComplex.vue'
-import FilterExcel from './examples/FilterExcel.vue'
-
-Vue.component(FilterInput.name, FilterInput)
-Vue.component(FilterContent.name, FilterContent)
-Vue.component(FilterComplex.name, FilterComplex)
-Vue.component(FilterExcel.name, FilterExcel)
-
-import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx';
-VXETable.use(VXETablePluginExportXLSX);
-
-// 创建一个简单的输入框筛选
-VXETable.renderer.add('FilterInput', {
-    // 不显示底部按钮，使用自定义的按钮
-    isFooter: false,
-    // 筛选模板
-    renderFilter (h, renderOpts, params) {
-      return [
-        <filter-input params={ params }></filter-input>
-      ]
-    },
-    // 筛选方法
-    filterMethod ({ option, row, column }) {
-      const { data } = option
-      const cellValue = XEUtils.get(row, column.property)
-      return XEUtils.toString(cellValue).indexOf(data) > -1
-    }
-  })
-  
-  // 创建一个支持列内容的筛选
-  VXETable.renderer.add('FilterContent', {
-    // 不显示底部按钮，使用自定义的按钮
-    isFooter: false,
-    // 筛选模板
-    renderFilter (h, renderOpts, params) {
-      return [
-        <filter-content params={ params }></filter-content>
-      ]
-    },
-    // 重置数据方法
-    filterResetMethod ({ options }) {
-      options.forEach(option => {
-        option.data = { vals: [], sVal: '' }
-      })
-    },
-    // 筛选数据方法
-    filterMethod ({ option, row, column }) {
-      const { vals } = option.data
-      const cellValue = XEUtils.get(row, column.property)
-      /* eslint-disable eqeqeq */
-      return vals.some(val => val == cellValue)
-    }
-  })
-  
-  // 创建一个条件的渲染器
-  VXETable.renderer.add('FilterComplex', {
-    // 不显示底部按钮，使用自定义的按钮
-    isFooter: false,
-    // 筛选模板
-    renderFilter (h, renderOpts, params) {
-      return [
-        <filter-complex params={ params }></filter-complex>
-      ]
-    },
-    // 重置数据方法
-    filterResetMethod ({ options }) {
-      options.forEach(option => {
-        option.data = { type: 'eq' , name: '' }
-      })
-    },
-    // 筛选数据方法
-    filterMethod ({ option, row, column }) {
-      let cellValue = XEUtils.get(row, column.property)
-      const { type } = option.data
-      let { value } = option.data
-      if (cellValue) {
-        switch (type) {
-          case 'eq':
-            return cellValue == value
-          case 'gt':
-            return Number(cellValue) > Number(value) 
-          case 'lt':
-            return Number(cellValue) < Number(value)
-          case 'gteq':
-            return Number(cellValue) >= Number(value)
-          case 'lteq':
-            return Number(cellValue) <= Number(value)
-        }
-      }
-      return false
-    }
-  })
-  
-  // 创建一个实现Excel的筛选器
-  VXETable.renderer.add('FilterExcel', {
-    // 不显示底部按钮，使用自定义的按钮
-    isFooter: false,
-    // 筛选模板
-    renderFilter (h, renderOpts, params) {
-      return [
-        <filter-excel params={ params }></filter-excel>
-      ]
-    },
-    // 重置数据方法
-    filterResetMethod ({ options }) {
-      options.forEach(option => {
-        option.data = {f1Type: '1', f1Val: '', fMode: 'and', f2Type: '1', f2Val: '' }
-      })
-    },
-    // 筛选数据方法
-    filterMethod ({ option, row, column }) {
-      const cellValue = XEUtils.get(row, column.property)
-      const {f1Type, f1Val, fMode, f2Type, f2Val } = option.data
-      if (cellValue) {
-        if (f1Type || f2Type) {
-          // 通过筛选条件
-          const calculate = (type, val) => {
-            switch (type) {
-              case '1':
-                return cellValue == val
-              case '2':
-                return cellValue != val
-              case '3':
-                return Number(cellValue) > Number(val)
-              case '4':
-                return Number(cellValue) >= Number(val)
-              case '5':
-                return Number(cellValue) < Number(val)
-              case '6':
-                return Number(cellValue) <= Number(val)
-              case '7':
-                return cellValue.indexOf(val) === 0
-              case '8':
-                return cellValue.indexOf(val) !== 0
-              case '9':
-                return cellValue.lastIndexOf(val) === cellValue.length - val.length
-              case '10':
-                return cellValue.lastIndexOf(val) !== cellValue.length - val.length
-              case '11':
-                return cellValue.indexOf(val) > -1
-              case '12':
-                return cellValue.indexOf(val) === -1
-            }
-            return true
-          }
-          const f1Rest = calculate(f1Type, f1Val)
-          const f2Rest = calculate(f2Type, f2Val)
-          if (fMode === 'and') {
-            return f1Rest && f2Rest
-          }
-          return f1Rest || f2Rest
-        }
-      }
-      return false
-    }
-  })