@tongfun/tf-widget 0.1.8-beta → 0.1.9

package/package/t-data-list/src/t-plan/condition-mult-item.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="condition-item">
+    <!-- 左侧括号 -->
+    <el-select v-model="condition.leftBracket" :popper-append-to-body="false" size="mini" class="bracket" placeholder="">
+      <el-option lable="(" value="(" />
+      <el-option lable="((" value="((" />
+      <el-option lable="(((" value="(((" />
+    </el-select>
+
+    <!-- 字段名 -->
+    <el-select v-model="condition.field" :popper-append-to-body="false" size="mini" placeholder="" class="condition-field" @change="handleFieldSelect">
+      <el-option
+        v-for="option in fieldsOptions"
+        :key="option.field"
+        :label="option.title"
+        :value="option.field"
+      />
+    </el-select>
+
+    <!-- 运算符 -->
+    <el-select v-model="condition.operator" :popper-append-to-body="false" size="mini" placeholder="" class="condition-operator">
+      <el-option
+        v-for="option in operatorOptions"
+        :key="option.value"
+        :label="option.label"
+        :value="option.value"
+      />
+    </el-select>
+
+    <!-- 值 -->
+    <ConditionInput
+      v-model="condition.value"
+      :disabled="inputDisabled"
+      :type="inputType"
+      :field="condition.field"
+      :multi="multiSelect"
+      :range="range"
+    />
+
+    <!-- 右侧括号 -->
+    <el-select v-model="condition.rightBracket" :popper-append-to-body="false" class="bracket" size="mini" placeholder="">
+      <el-option label=")" value=")" />
+      <el-option label="))" value="))" />
+      <el-option label=")))" value=")))" />
+    </el-select>
+
+    <!-- 条件之间的逻辑运算符 -->
+    <el-select v-model="condition.relation" :popper-append-to-body="false" size="mini" class="condition-relation" placeholder="">
+      <el-option value="AND" label="并且" />
+      <el-option value="OR" label="或者" />
+    </el-select>
+
+    <!-- 移除条件按钮 -->
+    <i class="el-icon-remove icon" @click="removeCondition" />
+  </div>
+</template>
+<script>
+import getOperatorOption from '../js/operatorEnum.js'
+import ConditionInput from '../condition-input'
+import FieldTypeEnum from '../js/fieldTypeEnum.js'
+export default {
+  name: 'ConditionItem',
+  components: {
+    ConditionInput
+  },
+  props: {
+    condition: {
+      type: Object,
+      default: null
+    }
+  },
+  data () {
+    return {
+      selectData: {
+        field: {}
+      }
+    }
+  },
+  computed: {
+    /**
+     * 字段相关
+     */
+    // 字段的可选选项
+    fieldsOptions () {
+      this.getFieldsOption().forEach(e => {
+        this.selectData.field[e.field] = e
+      })
+      return this.getFieldsOption()
+    },
+    // 当前选择的字段
+    currentField () {
+      return this.fieldsOptions.find(item => item.field === this.condition.field) || null
+    },
+
+    /**
+     * 操作符相关
+     */
+    // 当前字段对应的操作符可选选项
+    operatorOptions () {
+      if (!this.currentField) {
+        return []
+      }
+      return getOperatorOption(FieldTypeEnum[this.currentField.componentValueType])
+    },
+    // 当前选中的操作符选项
+    currentOperatorOption () {
+      return this.operatorOptions.find(item => item.value === this.condition.operator) || null
+    },
+
+    /**
+     * 值相关
+     */
+    inputType () {
+      if (!this.currentField) {
+        return 'input'
+      }
+      return FieldTypeEnum[this.currentField.componentValueType]
+    },
+    // 如果值是枚举类型，是否要开启select的多选模式
+    multiSelect () {
+      const currentOperatorOption = this.operatorOptions.find(item => item.value === this.condition.operator)
+      return currentOperatorOption && currentOperatorOption.multi
+    },
+    range () {
+      const currentOperatorOption = this.operatorOptions.find(item => item.value === this.condition.operator)
+      return currentOperatorOption && currentOperatorOption.range
+    },
+    // 值输入控件是否关闭
+    inputDisabled () {
+      if (!this.condition.field) {
+        return true
+      }
+      const currentOperatorOption = this.operatorOptions.find(item => item.value === this.condition.operator)
+      if (!currentOperatorOption) {
+        return true
+      }
+      return currentOperatorOption.over
+    }
+  },
+  watch: {
+    // 当字段发生了变化，清空之前的字段的之后输入的内容,并将操作符切换到第一个
+    'condition.field' (newValue) {
+      this.condition.value = ''
+      this.$nextTick(() => {
+        this.condition.operator = this.operatorOptions[0].value
+      })
+    },
+    // 监听运算符选项的变化，清空输入框的值
+    'condition.operator' (newValue) {
+      this.condition.value = ''
+    }
+  },
+  created () {
+    /**
+     * 点击新增按钮添加的条件，需要进行初始化
+     *
+     */
+    if (!this.condition.field) {
+      this.condition.field = this.fieldsOptions[0].field
+      this.condition.fieldType = this.fieldsOptions[0].componentType
+    }
+  },
+  inject: ['getFieldsOption'],
+  methods: {
+    removeCondition () {
+      this.$emit('remove')
+    },
+    // 绑定fieldType的值
+    handleFieldSelect (field) {
+      this.condition.fieldType = this.selectData.field[field].componentType
+    }
+  }
+}
+</script>
+
+<style scoped lang='less'>
+  .condition-item {
+    margin:10px 0;
+    display:flex;
+    //左右括号
+    .bracket {
+      ::v-deep .el-input__inner {
+        width:70px;
+      }
+    }
+
+    //字段选择框
+    .condition-field {
+      ::v-deep .el-input__inner {
+        width:140px;
+      }
+    }
+
+    // 条件运算符，选择框
+    .condition-operator{
+      ::v-deep .el-input__inner {
+        width:100px;
+      }
+    }
+
+    //值输入框
+
+    // 条件直接的逻辑关系
+    .condition-relation {
+      ::v-deep .el-input__inner {
+        width:76px;
+      }
+    }
+
+    .el-icon-remove {
+      color:gainsboro;
+      display:flex;
+      align-items: center;
+      justify-content: center;
+      font-size:15px;
+      margin-left:7px;
+    }
+    .icon:hover {
+      color:red !important;
+    }
+  }
+</style>

package/package/t-data-list/src/t-plan/index.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="t-plan">
+    <!-- 展开关闭方案详情的按钮 -->
+    <div
+      :class="['plan-expanser',showExpanse?'expanse-active':'']"
+      @mouseup.stop="showExpanse = !showExpanse"
+    >
+      <span>{{ showExpanse ? '收起方案' : '展开方案' }}</span>
+      <i :class="[showExpanse? 'el-icon-arrow-up':'el-icon-arrow-down']" />
+    </div>
+
+    <!-- 过滤方案列表 -->
+    <div class="plan-list">
+      <span class="title">过滤方案:</span>
+      <draggble v-model="planList" class="draggble-wraper" @start="handleStart" @end="handleEnd">
+        <div
+          v-for="plan in planList"
+          :key="plan.id"
+          :class="['plan-item',isActive(plan.id)?'plan-active':'']"
+          @click="handlePlanClick(plan.id)"
+        >
+          <span>{{ plan.name }}</span>
+        </div>
+      </draggble>
+    </div>
+
+    <!-- 当先选中的方案详情 -->
+    <planContent
+      ref="planContentRef"
+      :visible.sync="showExpanse"
+      :plan-names="planNameList"
+      :content="currentPlan"
+      @listChange="handleListChange"
+      @change="handleChange"
+    />
+  </div>
+</template>
+<script>
+import draggble from 'vuedraggable'
+import planContent from './plan-content.vue'
+import { getFilterPlan } from '@/api/tableV3.js'
+export default {
+  components: {
+    draggble, planContent
+  },
+  props: {
+    // 表的布局，作为高级过滤的字段可选项目
+    fieldsOption: {
+      type: Array,
+      default: null
+    }
+  },
+  data () {
+    return {
+      showExpanse: false,
+      currentPlanId: '',
+      planList: []
+    }
+  },
+  computed: {
+    // 目前所有方案列表的内容，用来在新增方案的时候你，进行判断相同名称的方案是否已经存在
+    planNameList () {
+      const planNameList = []
+      for (const plan of this.planList) {
+        planNameList.push(plan.name)
+      }
+      return planNameList
+    },
+    // 计算是否使用激活状态下的样式
+    isActive () {
+      return function (planId) {
+        return this.currentPlanId === planId
+      }
+    },
+    currentPlan () {
+      const emptyContent = {
+        name: '',
+        schemeUsefulList: [],
+        contentsList: []
+      }
+      return this.planList.find(item => item.id === this.currentPlanId) || emptyContent
+    }
+  },
+  provide () {
+    return {
+      getFieldsOption: () => this.fieldsOption
+    }
+  },
+  inject: ['target'],
+  created () {
+    this.getFilterPlan()
+  },
+  methods: {
+    /**
+     * 获取方案列表
+     * 并切换到指定方案（选中状态）
+     */
+    async getFilterPlan (selectId) {
+      const res = await getFilterPlan(this.target)
+      if (res.code !== 0) {
+        return this.$message.error(res.msg)
+      }
+      this.planList = res.data
+      this.currentPlanId = selectId || this.planList.find(item => item.isDefault).id
+      !selectId && this.$refs.planContentRef.$emit('doSearch')
+    },
+
+    /**
+     * 方案被添加或者删除，导致方案数量发生了变化
+     */
+    handleListChange (planId) {
+      this.getFilterPlan(planId)
+    },
+
+    /**
+     * 方案被点击切换方法并查询数据
+     */
+    handlePlanClick (planId) {
+      if (this.currentPlanId === planId) {
+        return
+      }
+      this.currentPlanId = planId
+      this.$refs.planContentRef.$emit('doSearch')
+    },
+
+    /**
+     *
+     */
+    handleChange (condition) {
+      this.$emit('change', condition)
+    },
+    /**
+     * 方案列表的拖动
+     */
+    handleStart () {
+
+    },
+    handleEnd () {
+
+    }
+  }
+}
+</script>
+
+<style scoped lang='less'>
+  .t-plan {
+    position:relative;
+    margin:1vh 0;
+    padding-bottom:5px;
+    display:flex;
+
+    .plan-expanser{
+      cursor: pointer;
+      user-select:none;
+      margin-right:10px;
+      color:#0a5295;
+      span {
+        font-size:15px;
+      }
+    }
+    .expanse-active {
+      // background-color: #f6f7f9;
+      color:black;
+      // border:1px solid gray;
+      border-bottom:none;
+      // box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.2);
+    }
+
+    .plan-list {
+      display:flex;
+      font-size: 15px;
+      .title {
+        margin-right:10px;
+      }
+
+      .draggble-wraper {
+        display:flex;
+        .plan-item{
+          cursor: pointer;
+          margin-right:7px;
+        }
+        .plan-active {
+          color:#0a5295;
+        }
+      }
+
+    }
+  }
+
+</style>