n20-project-component 1.0.3 → 1.0.6

package/src/components/ProFilterView/AdvancedFilter/filterItem.vue

@@ -0,0 +1,64 @@
+<template>
+  <el-checkbox-group v-model="checkArrayCalc" :max="maxLength" class="popover-check-box" @change="checkChange">
+    <vue-draggable
+      :list="filterList"
+      :animation="200"
+      group="dragBox"
+      :handle="'.n20-icon-tuodong'"
+      @change="dragChange"
+    >
+      <div v-for="(item, index) in filterList" :key="index" class="n20-drag-list-item">
+        <el-checkbox :disabled="item.static" :label="item.id" :checked="item.checked">{{ item.label }}</el-checkbox
+        ><i class="n20-drag-icon n20-icon-tuodong"></i>
+      </div>
+    </vue-draggable>
+  </el-checkbox-group>
+</template>
+
+<script>
+import importGlobal from 'n20-common-lib/src/utils/importGlobal.js'
+export default {
+  name: 'FilterItem',
+  components: {
+    vueDraggable: () => importGlobal('vuedraggable', () => import(/*webpackChunkName: "vuedraggable"*/ 'vuedraggable'))
+  },
+  props: {
+    filterList: {
+      type: Array,
+      default: () => []
+    },
+    checkArray: {
+      type: Array,
+      default: () => []
+    },
+    maxLength: {
+      type: Number
+    }
+  },
+  computed: {
+    checkArrayCalc: {
+      get() {
+        return this.checkArray
+      },
+      set(value) {
+        // 处理初始化时候的报错
+        if (typeof value !== 'boolean') {
+          this.$emit('update:checkArray', value)
+        }
+        return value
+      }
+    }
+  },
+  methods: {
+    checkChange(keys) {
+      if (keys.length > this.maxLength) {
+        return this.$message.warning(`${$lc('最多只能添加')}${this.maxLength}${$lc('个')}${$lc('筛选条件!')}`)
+      }
+      this.$emit('checked', keys)
+    },
+    dragChange() {
+      this.$emit('checked', this.checkArrayCalc)
+    }
+  }
+}
+</script>