@tongfun/tf-widget 0.1.6 → 0.1.10

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

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

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