@tongfun/tf-widget 0.1.29 → 0.1.30

package/package/t-data-list/src/t-table/table-records-header-popover.vue

@@ -1,246 +0,0 @@
-<template>
-  <!-- 排序的提示插件 -->
-  <div>
-    <el-popover
-      :value="item.isShowFilter"
-      width="200"
-      trigger="manual"
-      placement="bottom"
-    >
-      <!-- 单选内容 -->
-      <div v-if="getFieldType !=='enum' && item.isShowFilter" v-clickoutside="handleClickOut" class="radio-context">
-        <div class="context-list">
-          <div
-            v-for="radioItem in getOperatorEnumList"
-            :key="radioItem.value"
-            :class="{'list-item':true, 'list-item-active':radioItem.value === tableFilterData[item.field].operator}"
-            @click="handleFilterRadioClick(radioItem)"
-          >
-            <div class="list-text">{{ radioItem.label }}</div>
-            <div class="list-icon">
-              <i v-show="radioItem.value === tableFilterData[item.field].operator" class="el-icon-check" />
-            </div>
-          </div>
-        </div>
-        <div class="context-list header-input">
-          <ConditionInput
-            v-show="item.selectItem && !item.selectItem.over"
-            v-model="tableFilterData[item.field].value"
-            :type="getFieldType"
-            :field="item.field"
-            :table-head="true"
-            :multi="item.selectItem && item.selectItem.multi"
-            :range="item.selectItem && item.selectItem.range"
-          />
-        </div>
-        <div class="context-list">
-          <el-button size="mini" @click="handleCancelConditionChange">取消</el-button>
-          <el-button size="mini" @click="handleResetConditionChange">重置</el-button>
-          <el-button type="primary" size="mini" @click="handleConditionChange">确定</el-button>
-        </div>
-      </div>
-      <!-- 多选内容 -->
-      <!-- 页面中添加v-if item.isShowFilter来判断防止页面卡顿 -->
-      <div v-else-if="item.isShowFilter" v-clickoutside="handleClickOut" class="menu-context">
-        <div class="context-list">
-          <div
-            v-for="option in item.options"
-            :key="option.enumId"
-            :class="{'list-item':true, 'list-item-active':tableFilterData[item.field].value.includes(option.enumId)}"
-            @click="handleFilterRadioClick(option.enumId)"
-          >
-            <div class="list-text">{{ option.name }}</div>
-            <div class="list-icon">
-              <i v-show="tableFilterData[item.field].value.includes(option.enumId)" class="el-icon-check" />
-            </div>
-          </div>
-        </div>
-        <div class="context-list">
-          <el-button size="mini" @click="handleCancelConditionChange">取消</el-button>
-          <el-button size="mini" @click="handleResetConditionChange">清除</el-button>
-          <el-button type="primary" size="mini" @click="handleConditionChange">确定</el-button>
-        </div>
-      </div>
-      <SvgIcon
-        slot="reference"
-        class="filter-icon"
-        icon-class="filter"
-        style=""
-        @mouseup.stop="handleFilterClick"
-      />
-    </el-popover>
-  </div>
-</template>
-<script>
-import ConditionInput from '../condition-input'
-import getOperatorOption from '../js/operatorEnum'
-import fieldTypeEnum from '../js/fieldTypeEnum'
-import { getEnumOptions } from '@/api/tableV3.js'
-import Clickoutside from 'element-ui/src/utils/clickoutside'
-
-export default {
-  components: {
-    ConditionInput
-  },
-  inject: ['target', 'enumOptionCache'],
-  directives: { Clickoutside },
-  props: {
-    item: {
-      type: Object,
-      default: () => {}
-    },
-    tableFilterData: {
-      type: Object,
-      default: () => {}
-    },
-    uploadDataMap: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  computed: {
-    // 获取枚举列表
-    getOperatorEnumList () {
-      return getOperatorOption(fieldTypeEnum[this.item.componentValueType])
-    },
-    // 获取类型
-    getFieldType () {
-      return fieldTypeEnum[this.item.componentValueType]
-    }
-  },
-  created () {
-    this.getFieldType === 'enum' && this.getOptions()
-  },
-  methods: {
-    handleClickOut (...e) {
-      if (this.item.isShowFilter === true) {
-        this.item.isShowFilter = false
-      }
-    },
-    async getOptions () {
-      if (this.enumOptionCache[this.item.field]) {
-        this.item.options = this.enumOptionCache[this.item.field]
-        return
-      }
-      const res = await getEnumOptions(this.target, this.item.field)
-      if (res.code !== 0) {
-        return this.$message.error(res.msg)
-      }
-
-      this.item.options = res.data
-      this.enumOptionCache[this.item.field] = res.data
-    },
-
-    // 单击一条数据
-    handleFilterRadioClick (radioItem) {
-      if (this.getFieldType === 'enum') {
-        this.tableFilterData[this.item.field].operator = 'ENUM_IN'
-        this.tableFilterData[this.item.field].value.includes(',') && (this.tableFilterData[this.item.field].value = this.tableFilterData[this.item.field].value.split(','))
-        const set = new Set(this.tableFilterData[this.item.field].value)
-        set.has(radioItem) ? set.delete(radioItem) : set.add(radioItem)
-        this.tableFilterData[this.item.field].value = Array.from(set)
-        return
-      }
-      this.$set(this.item, 'selectItem', radioItem)
-      this.tableFilterData[this.item.field].operator = radioItem.value
-    },
-
-    // 取消过滤条件查询（数据还在，但是不参与正式的查询）
-    handleCancelConditionChange () {
-      this.item.isShowFilter = false
-    },
-
-    // 重置过滤条件
-    handleResetConditionChange () {
-      // 清空当前页面的内容
-      Object.keys(this.tableFilterData[this.item.field]).forEach(e => {
-        if (e === 'field') {
-          return
-        }
-        this.tableFilterData[this.item.field][e] = ''
-      })
-      // 删除对象中的相关属性
-      delete this.uploadDataMap[this.item.field]
-      delete this.item.selectItem
-      this.$set(this.item, 'isShowIcon', false)
-      this.sendUploadData()
-
-      this.item.isShowFilter = false
-    },
-    // 提交过滤条件进行查询
-    handleConditionChange () {
-      if (this.getFieldType === 'enum') {
-        if (!this.tableFilterData[this.item.field].operator) {
-          return this.$message.error(`请选择${this.item.title}的条件`)
-        }
-      } else {
-        if (!this.tableFilterData[this.item.field].operator) {
-          return this.$message.error(`请选择${this.item.title}的条件`)
-        }
-        if (!this.item.selectItem.over && !this.tableFilterData[this.item.field].value) {
-          return this.$message.error(`请输入${this.item.title}的值`)
-        }
-      }
-      if (this.tableFilterData[this.item.field].value instanceof Array) {
-        this.tableFilterData[this.item.field].value = this.tableFilterData[this.item.field].value.join(',')
-      }
-      this.$set(this.uploadDataMap, this.item.field, JSON.parse(JSON.stringify(this.tableFilterData[this.item.field])))
-      // this.uploadDataMap[item.field] = data
-      this.sendUploadData()
-      this.$set(this.item, 'isShowIcon', true)
-      this.item.isShowFilter = false
-    },
-    // 发送事件
-    sendUploadData () {
-      const uploadData = []
-      Object.values(this.uploadDataMap).forEach(e => {
-        uploadData.push(e)
-      })
-      this.$emit('condition-change', uploadData)// 向上发送数据
-    },
-    // 控制过滤条件的显示的隐藏
-    handleFilterClick () {
-      this.$emit('filter-click', this.item.isShowFilter)
-      this.$set(this.item, 'isShowFilter', !this.item.isShowFilter)
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-.el-popover{
-  .context-list{
-    .list-item{
-      display: flex;
-      margin: 1px 0;
-      padding: 2px 8px;
-      justify-content: space-between;
-      &:hover{
-        background-color: rgb(231, 235, 253);
-      }
-    }
-    .list-item-active{
-      color: rgb(59, 104, 252);
-      background-color: rgb(231, 235, 253);
-    }
-    /deep/.el-input .el-input__inner{
-      height: 30px;
-    }
-    &:last-child{
-      margin-top: 4px;
-      width: 100%;
-      display: flex;
-      justify-content: space-between;
-    }
-  }
-  .header-input{
-    margin-top:5px;
-  }
-  .filter-icon{
-    outline: none;
-    width: 15px;
-    height: 15px;
-    cursor: pointer;
-  }
-}
-
-</style>

package/package/t-data-list/src/t-table/table-records-selected.vue

@@ -1,159 +0,0 @@
-<template>
-  <div class="main">
-    <div :class="{'tips':true,'selected':visible.context}">
-      <transition name="fade">
-        <div v-show="selectData.length>0" class="select" @click.stop="handleClick">
-          <div class="title">已选</div>
-          <div class="num">{{ selectData.length > 99 ? "99+" : selectData.length }} </div>
-        </div>
-      </transition>
-
-      <transition name="fade">
-        <div v-show="visible.context && selectData.length > 0" class="context">
-          <el-scrollbar>
-            <div v-for="(item, index) in selectData" :key="index" class="context-item">
-              <div class="title">
-                {{ item[showField] }}
-              </div>
-              <i class="el-icon-delete hidden" @click="handleDel(item)" />
-            </div>
-          </el-scrollbar>
-          <div>
-            <el-button type="primary" size="mini" @click="handleClear">清空</el-button>
-          </div>
-        </div>
-
-      </transition>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    selectData: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    showField: {
-      type: String,
-      default: 'name'
-    }
-  },
-  data () {
-    return {
-      visible: {
-        context: false// 内容盒子展示
-      }
-    }
-  },
-  methods: {
-    handleClick () {
-      this.visible.context = !this.visible.context
-    },
-    handleDel (value) {
-      this.$emit('del', value)
-    },
-    handleClear () {
-      this.$emit('clear')
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-@contextHeight:40vh;
-  .main{
-    position: relative;
-    .tips{
-      top: 40px;
-      left: -40px;
-      position: absolute;
-      display: flex;
-      transition: all .6s ease-in-out;
-      .select{
-        cursor: pointer;
-        padding: 5px;
-        display: flex;
-        flex-direction: column;
-        background-color: #fff;
-        border: 1px solid rgb(228, 226, 226);
-        border-right: 0;
-        height: 80px;
-        align-items: center;
-        .title{
-          margin: 10px 0;
-          writing-mode: vertical-lr;
-        }
-        .num{
-          width: 30px;
-          height: 30px;
-          color: #fff;
-          background-color: rgb(121, 156, 255);
-          border-radius: 15px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-      }
-      .context{
-        width: 20vw;
-        border: 2px solid rgb(228, 226, 226);
-        height: calc(40px+@contextHeight);
-        background-color: #fff;
-        >:nth-child(2){
-          height: 40px;
-          display: flex;
-          padding-right: 10px;
-          justify-content: flex-end;
-          align-items: center;
-          .el-button {
-            background-color: #085699;
-            border:none;
-          }
-        }
-        >:nth-child(1){
-          height: @contextHeight;
-        }
-        .context-item{
-          .title{
-            width:100%;
-            margin-left:20px;
-            box-sizing: border-box;
-            padding: 5px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-          }
-          cursor: pointer;
-          height: 25px;
-          margin: 0 0 2px 0;
-          background-color: rgb(255, 255, 255);
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-           .hidden{
-              display: none;
-              margin-right: 10px;
-            }
-          &:hover .hidden{
-            display: inline-block;
-          }
-        }
-      }
-    }
-    .selected{
-      left: calc(-40px - 20vw);
-    }
-  }
-
-  /deep/.el-scrollbar__wrap{
-    overflow-x: auto;
-  }
-.fade-enter-active, .fade-leave-active {
-  transition: opacity .5s;
-}
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
-  opacity: 0;
-}
-</style>