@tongfun/tf-widget 0.1.18 → 0.1.22

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

@@ -1,143 +1,143 @@
-<template>
-  <div class="condition-always-item">
-    <div class="title">
-      <span>{{ data.title }}：</span>
-    </div>
-
-    <div class="values">
-      <div
-        v-for="item in conditonOptions"
-        :key="item.enumId"
-        :class="['value-item',isActive(item.enumId)? 'active':'']"
-        @click="handleClick(item)"
-      >
-        {{ item.name }}
-      </div>
-    </div>
-
-    <div class="swich-button">
-      <template v-if="singleSelect">
-        <el-button size="mini" type="primary" @click="switchToMulti">多选</el-button>
-      </template>
-      <template v-else>
-        <el-button size="mini" type="primary" @click="multiSelected">确定</el-button>
-        <el-button size="mini" type="danger" @click="switchToSingle">取消</el-button>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    data: {
-      type: Object,
-      default: null
-    },
-    value: {
-      type: Array,
-      default: null
-    }
-  },
-  data () {
-    return {
-      multiSelectedCache: [],
-      singleSelect: true
-    }
-  },
-  computed: {
-    isActive () {
-      return function (value) {
-        if (this.singleSelect) {
-          return this.value.includes(value)
-        }
-        return this.multiSelectedCache.includes(value)
-      }
-    },
-    conditonOptions () {
-      if (this.singleSelect) {
-        return this.data.options
-      }
-      return this.data.options.filter(option => option.enumId !== '-1')
-    }
-  },
-  methods: {
-    handleClick (item) {
-      // 单选模式下
-      if (this.singleSelect) {
-        this.selected = [item.enumId]
-        return this.$emit('input', [item.enumId])
-      }
-
-      // 多选模式下
-      if (this.multiSelectedCache.includes(item.enumId)) {
-        return this.multiSelectedCache.splice(this.multiSelectedCache.indexOf(item.enumId), 1)
-      }
-      this.multiSelectedCache.push(item.enumId)
-    },
-    // 切换到多选状态
-    switchToMulti () {
-      this.singleSelect = false
-      this.multiSelectedCache = []
-      this.multiSelectedCache.push(...this.value)
-    },
-    // 切换到单选状态
-    switchToSingle () {
-      this.singleSelect = true
-      this.multiSelectedCache = []
-    },
-    multiSelected () {
-      const index = this.multiSelectedCache.indexOf('-1')
-      index !== -1 && this.multiSelectedCache.splice(index, 1)
-      this.$emit('input', this.multiSelectedCache)
-      this.singleSelect = true
-    }
-  }
-
-}
-</script>
-
-<style scoped lang='less'>
-  // 整体
-  .condition-always-item {
-    display:flex;
-    justify-content: space-between;
-    border-top:1px solid #dddfe6;
-    padding-top:5px;
-    // align-items:center;
-
-    .title {
-      margin-top:5px;
-    }
-
-    // 可选值wrapper
-    .values {
-      flex:1;
-      display:flex;
-      flex-wrap: wrap;
-
-      //可选值 item
-      .value-item {
-        cursor: pointer;
-        user-select: none;
-        border:1px #d5d5d9 solid;
-        color:#9999a1;
-        border-radius:3px;
-        padding:5px;
-        margin-left:10px;
-        margin-bottom:5px;
-      }
-      .active {
-        color:#075699;
-        border:1px solid #075699;
-      }
-    }
-
-    .swich-button {
-      .el-button {
-        background-color: #075699;
-        border:none;
-      }
-    }
-  }
-</style>
+<template>
+  <div class="condition-always-item">
+    <div class="title">
+      <span>{{ data.title }}：</span>
+    </div>
+
+    <div class="values">
+      <div
+        v-for="item in conditonOptions"
+        :key="item.enumId"
+        :class="['value-item',isActive(item.enumId)? 'active':'']"
+        @click="handleClick(item)"
+      >
+        {{ item.name }}
+      </div>
+    </div>
+
+    <div class="swich-button">
+      <template v-if="singleSelect">
+        <el-button size="mini" type="primary" @click="switchToMulti">多选</el-button>
+      </template>
+      <template v-else>
+        <el-button size="mini" type="primary" @click="multiSelected">确定</el-button>
+        <el-button size="mini" type="danger" @click="switchToSingle">取消</el-button>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: null
+    },
+    value: {
+      type: Array,
+      default: null
+    }
+  },
+  data () {
+    return {
+      multiSelectedCache: [],
+      singleSelect: true
+    }
+  },
+  computed: {
+    isActive () {
+      return function (value) {
+        if (this.singleSelect) {
+          return this.value.includes(value)
+        }
+        return this.multiSelectedCache.includes(value)
+      }
+    },
+    conditonOptions () {
+      if (this.singleSelect) {
+        return this.data.options
+      }
+      return this.data.options.filter(option => option.enumId !== '-1')
+    }
+  },
+  methods: {
+    handleClick (item) {
+      // 单选模式下
+      if (this.singleSelect) {
+        this.selected = [item.enumId]
+        return this.$emit('input', [item.enumId])
+      }
+
+      // 多选模式下
+      if (this.multiSelectedCache.includes(item.enumId)) {
+        return this.multiSelectedCache.splice(this.multiSelectedCache.indexOf(item.enumId), 1)
+      }
+      this.multiSelectedCache.push(item.enumId)
+    },
+    // 切换到多选状态
+    switchToMulti () {
+      this.singleSelect = false
+      this.multiSelectedCache = []
+      this.multiSelectedCache.push(...this.value)
+    },
+    // 切换到单选状态
+    switchToSingle () {
+      this.singleSelect = true
+      this.multiSelectedCache = []
+    },
+    multiSelected () {
+      const index = this.multiSelectedCache.indexOf('-1')
+      index !== -1 && this.multiSelectedCache.splice(index, 1)
+      this.$emit('input', this.multiSelectedCache)
+      this.singleSelect = true
+    }
+  }
+
+}
+</script>
+
+<style scoped lang='less'>
+  // 整体
+  .condition-always-item {
+    display:flex;
+    justify-content: space-between;
+    border-top:1px solid #dddfe6;
+    padding-top:5px;
+    // align-items:center;
+
+    .title {
+      margin-top:5px;
+    }
+
+    // 可选值wrapper
+    .values {
+      flex:1;
+      display:flex;
+      flex-wrap: wrap;
+
+      //可选值 item
+      .value-item {
+        cursor: pointer;
+        user-select: none;
+        border:1px #d5d5d9 solid;
+        color:#9999a1;
+        border-radius:3px;
+        padding:5px;
+        margin-left:10px;
+        margin-bottom:5px;
+      }
+      .active {
+        color:#075699;
+        border:1px solid #075699;
+      }
+    }
+
+    .swich-button {
+      .el-button {
+        background-color: #075699;
+        border:none;
+      }
+    }
+  }
+</style>