@tongfun/tf-widget 0.1.18 → 0.1.22

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

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