@tongfun/tf-widget 0.1.18 → 0.1.22

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

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