@tongfun/tf-widget 0.1.29 → 0.1.30

package/package/tf-widget/src/children/basic-data/dependcy/condition-filter.vue

@@ -1,519 +0,0 @@
-<template>
-  <div class="condition-filter-component">
-
-    <!--  快捷过滤-->
-    <div v-if="isQuickFilter" style="display: flex;height: 100%">
-      <!-- <template v-for="(item,index) in quickFilterData.filterArr">
-        <el-date-picker
-          v-if="item.fieldType==='DATETIME'"
-          :key="index"
-          v-model="quickFilterData[item.id]"
-          value-format="yyyy-MM-dd"
-          type="date"
-          :placeholder="item.valueDescription"
-        />
-        <el-autocomplete
-          v-else
-          :key="index"
-          v-model="quickFilterData[item.id]"
-          :placeholder="item.valueDescription"
-          :fetch-suggestions="querySearch"
-          @focus="suggestConditionFocus(item)"
-        />
-      </template>-->
-      <div v-if="placeholderData !== ''" class="quick-filter">
-        <el-input
-          v-model="testData"
-          :placeholder="`以${placeholderData}查询`"
-          @keyup.enter.native="getFilterTableData"
-        >
-          <i slot="prefix" class="el-icon-search" />
-        </el-input>
-      </div>
-
-      <div class="button-group">
-        <!-- <el-button type="primary" @click="quickFilterStartMethod">快捷过滤</el-button>-->
-        <!-- <el-button type="primary" @click="quickConditionClear">重置</el-button>-->
-        <el-button type="primary" @click="changeIsQuickFilter">高级过滤</el-button>
-      </div>
-    </div>
-
-    <!--  高级过滤-->
-    <div v-else style="display: flex;align-items: flex-start">
-
-      <!--  单行高级过滤-->
-      <div v-if="rotateValue" class="single-line">
-        <el-select v-model="moreConditionFilterData.name.value[0]" placeholder="" class="field-select" @change="changeMoreConditionName">
-          <el-option
-            v-for="(item,index) in moreConditionFilterData.name.arr"
-            :key="index"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-        <el-select v-model="moreConditionFilterData.condition.value[0]" placeholder="" class="condition-select" @change="clearDateTime(0)">
-          <el-option
-            v-for="(item,index) in moreConditionFilterData.condition.arr[0]"
-            :key="index"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-        <el-date-picker
-          v-if="moreConditionFilterData.type[0] === 'datetime'"
-          v-model="moreConditionFilterData.value[0]"
-          value-format="yyyy-MM-dd"
-          type="date"
-          placeholder="请选择"
-          class="value-input"
-          :disabled="getDateTimeIsDisabled(0)"
-        />
-        <el-input v-else v-model="moreConditionFilterData.value[0]" class="value-input" />
-      </div>
-
-      <!--   多行高级过滤-->
-      <div v-else class="multiple-lines">
-        <div v-for="(item,index) in moreConditionFilterData.value" :key="index" class="multiple-line">
-          <el-select v-model="moreConditionFilterData.leftBracket.value[index]" placeholder="" class="bracket-select">
-            <el-option
-              v-for="(item2, index2) in moreConditionFilterData.leftBracket.arr"
-              :key="index2"
-              :label="item2.label"
-              :value="item2.value"
-            />
-          </el-select>
-          <el-select v-model="moreConditionFilterData.name.value[index]" placeholder="" class="field-select" @change="changeMoreConditionName">
-            <el-option
-              v-for="(item2, index2) in moreConditionFilterData.name.arr"
-              :key="index2"
-              :label="item2.label"
-              :value="item2.value"
-            />
-          </el-select>
-          <el-select v-model="moreConditionFilterData.condition.value[index]" placeholder="" class="condition-select" @change="clearDateTime(index)">
-            <el-option
-              v-for="(item2, index2) in moreConditionFilterData.condition.arr[index]"
-              :key="index2"
-              :label="item2.label"
-              :value="item2.value"
-            />
-          </el-select>
-          <el-date-picker
-            v-if="moreConditionFilterData.type[index] === 'datetime'"
-            v-model="moreConditionFilterData.value[index]"
-            value-format="yyyy-MM-dd"
-            type="date"
-            placeholder="请选择"
-            class="value-input"
-            :disabled="getDateTimeIsDisabled(0)"
-          />
-          <el-input v-else v-model="moreConditionFilterData.value[index]" class="value-input" />
-          <el-select v-model="moreConditionFilterData.rightBracket.value[index]" placeholder="" class="bracket-select">
-            <el-option
-              v-for="(item2, index2) in moreConditionFilterData.rightBracket.arr"
-              :key="index2"
-              :label="item2.label"
-              :value="item2.value"
-            />
-          </el-select>
-          <el-select v-if="index !== moreConditionFilterData.name.value.length - 1" v-model="moreConditionFilterData.relatedCondition.value[index]" placeholder="" class="bracket-select">
-            <el-option
-              v-for="(item2, index2) in moreConditionFilterData.relatedCondition.arr"
-              :key="index2"
-              :label="item2.label"
-              :value="item2.value"
-            />
-          </el-select>
-          <SvgIcon v-if="index !== moreConditionFilterData.name.value.length -1" icon-class="remove" class="remove-icon" @click="removeMultipleLine(index)" />
-        </div>
-        <SvgIcon icon-class="add" class="add-icon" @click="addMultipleLine" />
-      </div>
-      <div class="button-group">
-        <el-button type="primary" @click="moreConditionSearchMethod">搜索</el-button>
-        <el-button type="primary" @click="moreConditionClear">重置</el-button>
-        <el-button type="primary" @click="changeIsQuickFilter">快捷</el-button>
-        <SvgIcon icon-class="push-down" class="push-down" :class="rotateValue ? 'down' :'up'" @click="changeRotate" />
-      </div>
-    </div>
-
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: 'ConditionFilter',
-  props: {
-    // 是否为快捷过滤
-    isQuickFilter: {
-      type: Boolean,
-      default: true
-    },
-    // 快捷过滤搜索框
-    quickFilterData: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    // 快捷过滤搜索框建议
-    conditionFilterSuggest: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    // 高级过滤为单行/多行
-    rotate: {
-      type: Boolean,
-      default: true
-    },
-    moreConditionFilterMap: {
-      type: Map,
-      default: new Map()
-    },
-    moreConditionFilterData: {
-      type: Object,
-      default: new Map()
-    },
-    placeholderData: {
-      type: String,
-      default: ''
-    }
-  },
-  data () {
-    return {
-      conditionFilterSuggestArr: [], // 快捷过滤搜索建议
-      rotateValue: this.rotate,
-      quickFilterStartMethod: null, // 快捷过滤防抖查询
-      moreConditionSearchMethod: null, // 高级过滤防抖查询
-      testData: '' // 内容过滤关键字
-    }
-  },
-  created () {
-    // 定义防抖方法
-    this.quickFilterStartMethod = this.utils.debounce(this.quickFilterStart)
-    this.moreConditionSearchMethod = this.utils.debounce(this.moreConditionSearch)
-  },
-  methods: {
-
-    getFilterTableData (event) {
-      this.$emit('getFilterTableData', event.target.value)
-    },
-
-    // 过滤字段为时间类型时，清除时间值
-    clearDateTime (index) {
-      if (this.moreConditionFilterData.type[index] === 'datetime') {
-        if (this.moreConditionFilterData.condition.value[index] !== 'less' &&
-                this.moreConditionFilterData.condition.value[index] !== 'greater' &&
-                this.moreConditionFilterData.condition.value[index] !== 'equal') {
-          this.moreConditionFilterData.value[index] = ''
-        }
-      }
-    },
-
-    // 判断日期选择框是否可选
-    getDateTimeIsDisabled (index) {
-      return this.moreConditionFilterData.condition.value[index] !== 'less' &&
-              this.moreConditionFilterData.condition.value[index] !== 'greater' &&
-              this.moreConditionFilterData.condition.value[index] !== 'equal'
-    },
-
-    suggestConditionFocus (value) {
-      this.conditionFilterSuggestArr = this.conditionFilterSuggest[value.id]
-    },
-
-    // 切换快捷过滤 与 高级过滤
-    changeIsQuickFilter () {
-      this.$emit('changeIsQuickFilter', this.isQuickFilter)
-    },
-
-    querySearch (queryString, cb) {
-      const restaurants = this.conditionFilterSuggestArr
-      const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
-      // 调用 callback 返回建议列表的数据
-      cb(results)
-    },
-
-    createFilter (queryString) {
-      return (restaurant) => {
-        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
-      }
-    },
-
-    // 快捷过滤重置
-    quickConditionClear () {
-      this.$emit('quickConditionClear')
-    },
-
-    // 快捷过滤
-    quickFilterStart () {
-      this.$emit('quickFilterStart')
-    },
-
-    // 高级过滤改变名称
-    changeMoreConditionName (val) {
-      // 此校验在父组件watch中实现
-      // // 校验该字段是否已经选择过
-      // if (this.checkCondition(val)) {
-      //   this.$message.error('字段重复，请重新选择！')
-      //   return false
-      // }
-      // 更新高级过滤条件数组
-      this.$emit('updateMoreCondition', val)
-    },
-
-    // 高级过滤搜索
-    moreConditionSearch () {
-      // 如果是多行模式下，点击搜索切换显示模式
-      if (!this.rotateValue) {
-        // 多行模式下，先校验信息是否完整,此处的校验方法与父组件的方法类似
-        // if (this.checkMoreCondition()) {
-        //   this.$message.error('请完整填写！')
-        //   return false
-        // }
-        this.changeRotate()
-      }
-      this.$emit('moreConditionSearch')
-    },
-
-    // 高级过滤重置
-    moreConditionClear () {
-      this.$emit('moreConditionClear')
-    },
-
-    // 切换单行过滤或者是多行过滤
-    changeRotate () {
-      this.rotateValue = !this.rotateValue
-      this.$emit('changeRotate', this.rotateValue)
-    },
-
-    // 新增筛选行
-    addMultipleLine () {
-      this.$emit('addMultipleLine')
-    },
-
-    // 移除当前筛选行
-    removeMultipleLine (index) {
-      this.$emit('removeMultipleLine', index)
-    },
-
-    // 校验高级过滤条件重复
-    checkCondition (val) {
-      let flag = false
-      this.moreConditionFilterData.name.value.forEach((item, index) => {
-        // 排除当前index
-        const indexValue = this.moreConditionFilterData.name.value.findIndex(d => d === val)
-        if (this.moreConditionFilterData.name.value[index] === val && index !== indexValue) {
-          flag = true
-        }
-      })
-      return flag
-    },
-
-    // 校验高级过滤条件是否填写完整
-    checkMoreCondition () {
-      // 校验
-      let flag = false
-      this.moreConditionFilterData.name.value.forEach((item, index) => {
-        // 如果选中了字段，代表需要过滤条件
-        if (this.moreConditionFilterData.name.value[0] !== '') {
-          if (!this.moreConditionFilterData.leftBracket.value[index] ||
-                  !this.moreConditionFilterData.name.value[index] ||
-                  !this.moreConditionFilterData.condition.value[index] ||
-                  !this.moreConditionFilterData.value[index] ||
-                  !this.moreConditionFilterData.rightBracket.value[index]) {
-            flag = true
-          }
-        }
-      })
-      return flag
-    }
-
-  }
-}
-</script>
-
-<style lang="less" scoped>
-
-.el-select-dropdown__item{
-  height: 2.222vh;
-  line-height: 2.222vh;
-  font-size: 0.625vw;
-}
-
-.condition-filter-component{
-  height: 2.222vh;
-  display: flex;
-  align-items: flex-start;
-
-  // 内容过滤样式
-  .quick-filter {
-    height: 100%;
-    border-bottom: 1px solid #dcdcdc;
-    ::v-deep .el-input__inner {
-      height: calc(100% - 1px);
-      border: none;
-    }
-    ::v-deep .el-input--prefix{
-      height: 100%;
-      display: flex;
-      //align-items: center;
-      font-size: 0.8vw;
-    }
-    ::v-deep .el-input__inner::placeholder{
-      color: #999999;
-      font-size: 0.625vw;
-    }
-    // ::v-deep .el-input__prefix{
-    //   //height: calc(100% - 2px);
-    //   //color: #999999;
-    //   //font-size: 0.8vw;
-    // }
-  }
-
-  ::v-deep .el-input{
-    height: 100%;
-    display: flex;
-  }
-  ::v-deep .el-input__suffix{
-    display: flex;
-    align-items: center;
-  }
-  // ::v-deep .el-icon-arrow-up{
-  //   //display: flex;
-  //   //align-items: center;
-  // }
-  ::v-deep .el-icon-arrow-up:before{
-    font-size: 0.625vw;
-  }
-  /*筛选框统一高度*/
-  ::v-deep .el-input__inner{
-    height: 2.222vh;
-    font-size: 0.625vw;
-  }
-  /*下拉框图标统一高度*/
-  ::v-deep .el-input__icon{
-    height: 2.222vh;
-    line-height: 2.222vh;
-  }
-  /*字段下拉框样式*/
-  .field-select{
-    margin-right: 0.1vh;
-    ::v-deep .el-input {
-      width: 8vw;
-    }
-  }
-  /*条件下拉框样式*/
-  .condition-select{
-    margin-right:0.1vh;
-    ::v-deep .el-input {
-      width: 6vw;
-    }
-  }
-  /*括号下拉框样式*/
-  .bracket-select{
-    margin-right:0.1vh;
-    ::v-deep .el-input {
-      width: 6vw;
-    }
-  }
-  /*值输入框样式*/
-  .value-input{
-    width: 5vw;
-    margin-right:0.1vh;
-    ::v-deep .el-input__inner{
-      width: 5vw;
-    }
-  }
-
-  /*单行筛选框*/
-  .single-line{
-    width: 20vw;
-    height: 100%;
-    display: flex;
-    //margin-right: -1.5vw;
-    .el-select:nth-child(2){
-      margin: 0 0.5vw;
-    }
-    .el-input:nth-last-child(1){
-      margin-right: 1vw;
-    }
-  }
-  @media screen and (max-width: 1920px){
-    .single-line{
-      width: 20vw;
-    }
-  }
-  @media screen and (max-width: 1366px){
-    .single-line{
-      width: 20vw;
-    }
-  }
-  /*多行筛选框*/
-  .multiple-lines{
-    z-index: 999;
-    border: 1px solid #0261a4;
-    border-radius: 0.9259vh;
-    box-sizing: border-box;
-    padding: 1.3889vh;
-    background: #FFFFFF;
-    .multiple-line{
-      height: 2.222vh;
-      margin-bottom: 1vh;
-      display: flex;
-      align-items: center;
-      ::v-deep .el-select{
-        height: 100%;
-      }
-    }
-    .remove-icon{
-      width: 0.625vw;
-      height: 0.625vw;
-      margin-left: 10px;
-      cursor: pointer;
-    }
-    .add-icon{
-      width: 0.625vw;
-      height: 0.625vw;
-      cursor: pointer;
-    }
-  }
-  /*按钮组样式*/
-  .button-group {
-    display: flex;
-    align-items: center;
-    margin-left: 1.2vw;
-    ::v-deep .el-button--primary{
-      width: 3.5vw;
-      height: 2.2222vh;
-      padding: 0;
-      background: #ecf5ff;
-      border: 1px solid #0c4c8e;
-      border-radius: 5px;
-      font-size: 0.625vw;
-      font-family: Source Han Sans SC, Source Han Sans SC-Normal;
-      font-weight: Normal;
-      text-align: center;
-      color: #085497;
-    }
-    ::v-deep .el-button:nth-child(2) {
-      margin: 0 0.5vw;
-    }
-    /*图标按钮样式*/
-    .push-down{
-      width: 2vh;
-      height: 2vh;
-      margin-left: 0.5vw;
-      cursor: pointer;
-    }
-    .up{
-      transform: rotate(-180deg);
-      transition: all 0.5s;
-    }
-    .down{
-      transition: all 0.5s;
-    }
-  }
-}
-</style>

package/package/tf-widget/src/children/basic-data/dependcy/pagination.vue

@@ -1,93 +0,0 @@
-<template>
-  <div class="pagination">
-    <div class="selected-total">
-      已选中行数:
-      <span>{{ selectedTotal }}</span>
-    </div>
-    <el-pagination
-      :current-page="paging.current"
-      :page-sizes="pageSizes"
-      :page-size="paging.size"
-      :layout="pagerCount ? 'total, sizes, prev, next, jumper' : 'total, sizes, prev, pager, next, jumper'"
-      :total="total"
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Pagination',
-  props: {
-    // 选中行数
-    selectedTotal: {
-      type: Number,
-      default: 0
-    },
-    // 分页总数
-    total: {
-      type: Number,
-      default: 0
-    },
-    pagerCount: {
-      type: Boolean,
-      default: false
-    },
-    paging: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    }
-  },
-  data () {
-    return {
-      pageSizes: [50, 100, 200, 500]
-    }
-  },
-  mounted () {
-    // this.changePage()
-  },
-  methods: {
-    changePage () {
-      this.$emit('pageChange', this.paging)
-    },
-    /**
-     * 每页查看条数变化
-     * @param val 每页条数
-     */
-    handleSizeChange (val) {
-      this.paging.size = val
-      this.changePage()
-    },
-    /**
-     * 当前页码变化
-     * @param val 页码
-     */
-    handleCurrentChange (val) {
-      this.paging.current = val
-      this.changePage()
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.pagination{
-  display: flex;
-  justify-content: flex-end;
-  .selected-total{
-    display: flex;
-    align-items: center;
-    color: #606266;
-    font-size: 13px;
-    span{
-      margin-left: 20px;
-      margin-right: 20px;
-      text-decoration: underline;
-    }
-  }
-}
-
-</style>