lambo-design-bi 0.0.199 → 0.0.200

package/bi/widget/search/search-item.vue

@@ -7,7 +7,8 @@
     <div v-else-if="widget.options.searchType === searchDict.FUZZY_INPUT.id"> <!-- 模糊输入框 -->
       <Input v-model="widget.options.val" class="lambo-query-class" placeholder="请输入" :clearable="true" />
     </div>
-    <div v-else-if="widget.options.searchType === searchDict.NOT_SHOW_INPUT.id" class="lambo-display-none "> <!-- 隐形查询条件 -->
+    <div v-else-if="widget.options.searchType === searchDict.NOT_SHOW_INPUT.id" class="lambo-display-none ">
+      <!-- 隐形查询条件 -->
       <Input v-model="widget.options.val" class="lambo-query-class" />
     </div>
     <div v-else-if="widget.options.searchType === searchDict.SINGLE_SELECT.id"> <!-- 单选下拉框 -->
@@ -16,15 +17,16 @@
       </Select>
     </div>
     <div v-else-if="widget.options.searchType === searchDict.MUlTI_SELECT.id"> <!-- 多选下拉框 -->
-      <Select v-model="widget.options.val" class="lambo-query-class" filterable :clearable="true" placeholder="请选择" multiple
+      <!-- <Select v-model="widget.options.val" class="lambo-query-class" filterable :clearable="true" placeholder="请选择" multiple
         :max-tag-count="1">
         <Option v-for="(item, index) in widget.options.dataList" :key="index" :value="item.K"> {{ item.V }}</Option>
-      </Select>
+      </Select> -->
+      <LamboElMultiSelect v-model="widget.options.val" :data="widget.options.dataList"></LamboElMultiSelect>
     </div>
     <div v-else-if="widget.options.searchType === searchDict.SINGLE_HELP.id"> <!-- 单选帮助框 -->
       <Input class="lambo-display-none" v-model="helpVal" />
-      <Input class="lambo-query-class" v-model="helpValName" icon="ios-list-box-outline" readonly @on-click="showHelpBox"
-        placeholder="请选择" />
+      <Input class="lambo-query-class" v-model="helpValName" icon="ios-list-box-outline" readonly
+        @on-click="showHelpBox" placeholder="请选择" />
 
       <HelpBox v-model="helpBoxShow" :title="widget.name" :columns="helpColumns" :url="helpBoxUrl"
         :row-key="helpRowIdKey" :row-name="helpRowNameKey" :selected-key="helpSelectKey" :multi-select="false"
@@ -32,8 +34,8 @@
     </div>
     <div v-else-if="widget.options.searchType === searchDict.MUlTI_HELP.id"> <!-- 多选帮助框 -->
       <Input class="lambo-display-none" v-model="helpVal" />
-      <Input class="lambo-query-class" v-model="helpValName" icon="ios-list-box-outline" readonly @on-click="showHelpBox"
-        placeholder="请选择" />
+      <Input class="lambo-query-class" v-model="helpValName" icon="ios-list-box-outline" readonly
+        @on-click="showHelpBox" placeholder="请选择" />
 
       <HelpBox v-model="helpBoxShow" :title="widget.name" :columns="helpColumns" :url="helpBoxUrl"
         :row-key="helpRowIdKey" :row-name="helpRowNameKey" :selected-key="helpSelectKey" :multi-select="true"
@@ -49,7 +51,7 @@
     </div>
     <div v-else-if="widget.options.searchType === searchDict.SINGLE_YEAR.id"> <!-- 年选择框 -->
       <DatePicker v-model="widget.options.val" format="yyyy" placeholder="请选择" placement="bottom-end"
-                  class="lambo-query-class" type="year"></DatePicker>
+        class="lambo-query-class" type="year"></DatePicker>
     </div>
     <div v-else-if="widget.options.searchType === searchDict.SINGLE_MONTH.id"> <!-- 月选择框 -->
       <DatePicker v-model="widget.options.val" format="yyyy-MM" placeholder="请选择" placement="bottom-end"
@@ -62,10 +64,11 @@
 import HelpBox from "../../../pub/helpbox/index.vue"
 import biConfig from "../config/config"
 import { SEARCH_DICT } from '../../../util/constants'
+import LamboElMultiSelect from '@/components/lambo/pub/search/multi-select'
 
 export default {
   name: 'BiSearchItem',
-  components: { HelpBox },
+  components: { HelpBox, LamboElMultiSelect },
   props: {
     /**
      * {
@@ -219,6 +222,7 @@ export default {
 .lambo-display-none {
   display: none
 }
+
 .lambo-query-class {
   width: 250px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lambo-design-bi",
-  "version": "0.0.199",
+  "version": "0.0.200",
   "description": "Vue2 BI 数据可视化组件库",
   "main": "index.js",
   "author": "finch",

package/pub/search/multi-select/index.vue

@@ -0,0 +1,173 @@
+<!-- 带全选、清空、反选的多选下拉框 -->
+<template>
+  <div class="multi-select">
+    <el-select v-model="internalValue" :style="style" size="small" multiple collapse-tags @change="handleChange">
+      <div class="select-up">
+        <el-button type="text" icon="el-icon-finished" @click="selectAll">
+          全选
+        </el-button>
+        <el-button type="text" icon="el-icon-close" @click="removeTag">
+          清空
+        </el-button>
+        <el-button type="text" icon="el-icon-crop" @click="selectReverse">
+          反选
+        </el-button>
+      </div>
+      <div class="select-list">
+        <el-option v-for="(item, index) in data" :key="index" :label="item.V" :value="item.K" />
+      </div>
+    </el-select>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "LamboElMultiSelect",
+  model: {
+    prop: 'value',      // 指定v-model绑定的prop名
+    event: 'change'     // 指定触发v-model更新的事件名
+  },
+  props: {
+    // v-model绑定的值
+    value: {
+      type: Array,
+      default: () => ([])
+    },
+    data: {
+      type: Array,
+      default: () => ([])
+    },
+    width: {
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      style: {
+        width: this.width
+      },
+      // 内部值，用于双向绑定
+      internalValue: []
+    }
+  },
+  watch: {
+    // 监听外部传入的value变化
+    value: {
+      immediate: true,
+      handler(newVal) {
+        // 确保internalValue与外部value同步
+        this.internalValue = Array.isArray(newVal) ? [...newVal] : []
+      }
+    },
+
+    // 监听数据源变化，如果外部数据变化，清空选中状态
+    data: {
+      handler() {
+        // 这里可以根据需求决定是否清空选中
+        // this.internalValue = []
+      }
+    }
+  },
+  methods: {
+    // 清空操作
+    removeTag() {
+      this.internalValue = []
+      this.$emit('change', [])
+      this.$emit('clear') // 可选：触发清空事件
+    },
+
+    // 全选操作
+    selectAll() {
+      if (!this.data || this.data.length === 0) {
+        return
+      }
+
+      const allValues = this.data.map(item => item.K)
+      this.internalValue = [...allValues]
+      this.$emit('change', allValues)
+      this.$emit('select-all', allValues) // 可选：触发全选事件
+    },
+
+    // 反选操作 - 修复逻辑
+    selectReverse() {
+      if (!this.data || this.data.length === 0) {
+        return
+      }
+
+      const allValues = this.data.map(item => item.K)
+      const currentValues = this.internalValue
+
+      // 找出当前未选中的项目
+      const reversedValues = allValues.filter(value => !currentValues.includes(value))
+
+      this.internalValue = [...reversedValues]
+      this.$emit('change', reversedValues)
+      this.$emit('reverse-select', reversedValues) // 可选：触发反选事件
+    },
+
+    // select变化时触发
+    handleChange(value) {
+      this.internalValue = value
+      this.$emit('change', value)
+      this.$emit('input', value) // 为了兼容.sync修饰符
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.el-select-dropdown__list {
+  height: 100%;
+  overflow: hidden;
+}
+
+.select-up {
+  padding: 0 12px;
+  font-size: 14px;
+  position: absolute;
+  z-index: 99999;
+  background-color: white;
+  top: 0px;
+  width: 100%;
+  border-radius: 5px 5px 0 0;
+
+  ::v-deep .el-button {
+    color: #bcbcbc;
+    font-size: 14px;
+
+    i {
+      font-size: 14px;
+    }
+  }
+
+  ::v-deep .el-button:hover {
+    color: #409EFF;
+  }
+
+  .el-button+.el-button {
+    margin-left: 6px;
+  }
+}
+
+.select-list {
+  margin-top: 27px;
+}
+
+.multi-select {
+  ::v-deep .el-input__inner {
+    font-size: 14px;
+  }
+
+  ::v-deep .el-select__tags-text {
+    color: #515a6e;
+  }
+
+  ::v-deep .el-tag--mini {
+    height: 22px;
+    padding: 0 3px;
+    line-height: 22px;
+  }
+
+}
+</style>