@tongfun/tf-widget 0.1.28 → 0.1.31

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

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

@@ -1,195 +0,0 @@
-<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="getFilterPlan"
-      @change="$emit('change',$event)"
-    />
-  </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
-    },
-
-    /**
-     * 方案被添加或者删除，导致方案数量发生了变化
-     */
-    handleListChange (planId) {
-      this.getFilterPlan(planId)
-    },
-
-    /**
-     * 将方案重置到默认方案
-     */
-    resetToDefaultPlan () {
-      const defaultPlanContent = this.planList.find(item => item.isDefault)
-      const defaultPlanId = defaultPlanContent?.id
-      if (this.currentPlanId === defaultPlanId) {
-        return this.$refs.planContentRef.loadPlanContent(defaultPlanContent, true)
-      }
-      this.currentPlanId = defaultPlanId
-    },
-
-    /**
-     * 方案被点击切换方法并查询数据
-     */
-    handlePlanClick (planId) {
-      if (this.currentPlanId === planId) {
-        return
-      }
-      this.currentPlanId = planId
-      // this.$refs.planContentRef.$emit('doSearch')
-    },
-
-    /**
-     * 方案列表的拖动
-     */
-    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>