@leevan/jtui 2.0.34 → 2.0.36

package/packages/Search-Type/el-cascader-multi/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "el-cascader-multi",
+  "version": "1.1.8",
+  "description": "基于element-ui的级联多选",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "cross-env NODE_ENV=production webpack --progress "
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Charming2015/el-cascader-multi.git"
+  },
+  "keywords": [
+    "element",
+    "multi",
+    "cascader"
+  ],
+  "author": "charming <2019.02>",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Charming2015/el-cascader-multi/issues"
+  },
+  "homepage": "https://github.com/Charming2015/el-cascader-multi#readme",
+  "devDependencies": {
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.5",
+    "css-loader": "^1.0.0",
+    "express": "^4.16.3",
+    "mini-css-extract-plugin": "^0.5.0",
+    "node-sass": "^4.9.2",
+    "sass-loader": "^7.0.3",
+    "vue-loader": "^15.2.6",
+    "vue-style-loader": "^4.1.1",
+    "vue-template-compiler": "^2.5.16",
+    "webpack": "^4.16.3",
+    "webpack-cli": "^3.2.3",
+    "webpack-command": "^0.4.1",
+    "webpack-dev-server": "^3.1.5",
+    "webpack-hot-middleware": "^2.22.3"
+  },
+  "dependencies": {
+    "cross-env": "^5.2.0",
+    "element-ui": "^2.4.11",
+    "vue": "^2.5.16"
+  }
+}

package/packages/Search-Type/el-cascader-multi/src/index.js

@@ -0,0 +1,9 @@
+import multiCascader from './multi-cascader/multi-cascader.vue'
+
+const install = (Vue) => {
+  Vue.component(multiCascader.name, multiCascader)
+}
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+export default { install }

package/packages/Search-Type/el-cascader-multi/src/multi-cascader/multi-cascader.vue

@@ -0,0 +1,331 @@
+<template>
+  <div class="">
+    <el-select
+      style="width:100%;height:100%;"
+      v-model="selectedLabels"
+      multiple
+      :popper-class="innerPopperClass"
+      @remove-tag="removeOne"
+      :filterable="filterable"
+      :filter-method="innerFilterMethod"
+      :reserve-keyword="reserveKeyword"
+      @change="changeLabel"
+      v-bind="$attrs"
+      @blur="handleBlur"
+      @visible-change="visibleChange"
+      @focus="handleFocus"
+      @clear="handleClear"
+      :allow-create="false"
+    >
+      <span slot="prefix" v-if="$slots.prefix">
+        <slot name="prefix"></slot>
+      </span>
+      <template v-if="!isSearching">
+        <el-option value="__root">
+          <div class="ground" @click.stop>
+            <render-list
+              :only-last="onlyLast"
+              :list="root.childNodes"
+              :level="1"
+              :active-list="activeList"
+              @handle-click="handleClick"
+              @handle-check="handleCheck"
+              :label-key="labelKey"
+              :expand-trigger="expandTrigger"
+            ></render-list>
+            <template v-for="item in maxLevellist">
+              <div
+                :class="`floor-item floor-position-left-${item.id + 1}`"
+                :key="item.id"
+                v-if="item.rendered"
+                v-show="activeList.length >= item.id"
+              >
+                <render-list
+                  :only-last="onlyLast"
+                  :list="showData[item.id]"
+                  :level="item.id + 1"
+                  :active-list="activeList"
+                  @handle-click="handleClick"
+                  @handle-check="handleCheck"
+                  :label-key="labelKey"
+                  :expand-trigger="expandTrigger"
+                ></render-list>
+              </div>
+            </template>
+          </div>
+        </el-option>
+      </template>
+      <template v-if="isSearching">
+        <el-option
+          v-for="item in searchResult"
+          :value="item.showLabel"
+          :key="getKey(item)"
+        >
+          <div style="width:100%;height:100%" @click.stop="selectOne(item)">
+            {{item.totalLabel}}
+          </div>
+        </el-option>
+      </template>
+    </el-select>
+  </div>
+</template>
+
+<script>
+import TreeStore from './lib/Tree.js'
+import renderList from './render-list.vue'
+import _ from 'lodash'
+import { _findByObj } from './tool/unit'
+export default {
+  name: 'el-cascader-multi',
+  components: {
+    renderList
+  },
+  props: {
+    data: {
+      type: Array,
+      default: () => [],
+      required: true
+    },
+    value: {
+      type: Array,
+      default: () => [],
+      required: true
+    },
+    separator: {
+      type: String,
+      default: '-'
+    },
+    filterable: {
+      type: Boolean,
+      default: false
+    },
+    filterMethod: {
+      type: Function
+    },
+    popperClass: {
+      type: String,
+      default: ''
+    },
+    reserveKeyword: {
+      type: Boolean,
+      default: true
+    },
+    valueKey: {
+      type: String,
+      default: 'value'
+    },
+    labelKey: {
+      type: String,
+      default: 'label'
+    },
+    childrenKey: {
+      type: String,
+      default: 'children'
+    },
+    expandTrigger: {
+      type: String,
+      default: 'click'
+    },
+    onlyLast: {
+      type: Boolean,
+      default: false
+    },
+    isTwoDimensionValue: {
+      type: Boolean,
+      default: true
+    },
+    showLeafLabel: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      selectedLabels: [],
+      selectedIds: [],
+      selectedNodes: [],
+      activeClass: 'floor-width-1',
+      store: {},
+      root: [],
+      maxLevellist: [],
+      showData: {},
+      activeList: [],
+      searchText: '',
+      searchResult: []
+    }
+  },
+  computed: {
+    isSearching () {
+      return !(this.searchText.trim() === '')
+    },
+    innerPopperClass () {
+      return `${this.popperClass} multi-cascader ${this.isSearching ? '' : 'multi-cascader-style'} ${this.activeClass}`
+    }
+  },
+  watch: {
+    data: {
+      deep: true,
+      handler () {
+        this.init()
+      }
+    },
+    value: {
+      deep: true,
+      handler () {
+        // this.init()
+        this.updateSelect(this.value, true, true)
+      }
+    },
+    selectedNodes () {
+      this.$emit('change', this.selectedNodes.map(o => o[this.isTwoDimensionValue ? '_idArr' : this.valueKey]))
+    }
+  },
+  methods: {
+    visibleChange (v) {
+      this.activeList = []
+      this.activeClass = 'floor-width-1'
+      if (!v) {
+        this.searchText = ''
+      }
+      this.$emit('visible-change', v)
+    },
+    handleBlur (e) {
+      this.searchText = ''
+      this.$emit('blur', e)
+    },
+    handleFocus (e) {
+      this.$emit('focus', e)
+    },
+    handleClear () {
+      this.selectedNodes.forEach(node => {
+        node.check(false)
+      })
+      this.$emit('input', [])
+      this.$emit('clear')
+    },
+    selectOne (item) {
+      item.checked = !item.checked
+      this.handleCheck(item)
+    },
+    changeLabel (v) {
+      this.store.nodeList.forEach(node => {
+        node.check(v.includes(node.showLabel))
+      })
+    },
+    innerFilterMethod (v) {
+      this.searchText = v
+      let tempResult = this.store.nodeList
+      if (v.trim() !== '') {
+        this.activeClass = ''
+        if (typeof this.filterMethod === 'function') {
+          this.searchResult = this.filterMethod(tempResult, v)
+        } else {
+          tempResult = tempResult.filter(o => o.isLeaf)
+          tempResult = tempResult.filter(o => o.showLabel.includes(v))
+          this.searchResult = tempResult
+        }
+      } else {
+        this.activeClass = 'floor-width-1'
+      }
+    },
+    getKey () {
+      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+        let r = Math.random() * 16 | 0
+        let v = c === 'x' ? r : (r & 0x3 | 0x8)
+        return v.toString(16)
+      })
+    },
+    handleClick (node, levelIndex, level) {
+      if (this.maxLevellist[level - 1]) {
+        this.maxLevellist[level - 1].rendered = true
+      }
+      this.activeClass = `floor-width-${node.isLeaf ? level : level + 1}`
+      let tempList = [...this.activeList]
+      if (level < tempList.length) {
+        tempList.splice(level)
+      }
+      tempList[level - 1] = node.id
+      this.showData[level] = node.childNodes
+      this.activeList = tempList
+    },
+    handleCheck (node) {
+      node.check(node.checked)
+      this.selectedIds = this.store.selectedIds
+      this.updateSelect(this.store.selectedIds)
+      this.$emit('input', this.selectedNodes.map(o => o[this.isTwoDimensionValue ? '_idArr' : this.valueKey]))
+    },
+    removeOne (v) {
+      let targetNode = this.selectedNodes.find(o => o.showLabel === v) || {}
+      targetNode.checked = false
+      this.handleCheck(targetNode)
+      this.$emit('remove-tag', v)
+    },
+    updateSelect (data = [], needCheckNode = false, setValue = false) {
+      let tempSelectedNodes = []
+      let tempSelectedLabels = []
+      let tempSelectedIds = []
+      this.store.nodeList.forEach(node => {
+        node.checked && node.check(false)
+      })
+      data.forEach(o => {
+        let targetNode
+        if (setValue) {
+          targetNode = _findByObj(this.store.nodeList, { [this.isTwoDimensionValue ? '_idArr' : this.valueKey]: o }) || {}
+          // targetNode = _.find(this.store.nodeList, { [this.isTwoDimensionValue ? '_idArr' : this.valueKey]: o }) || {}
+          tempSelectedIds.push(targetNode.id)
+        } else {
+          targetNode = this.store.nodesMap[o]
+          tempSelectedIds.push(o)
+        }
+        if (targetNode) {
+          needCheckNode && targetNode.check(true)
+          tempSelectedNodes.push(targetNode)
+          tempSelectedLabels.push(targetNode.showLabel)
+        }
+      })
+      this.selectedNodes = tempSelectedNodes
+      this.selectedLabels = tempSelectedLabels
+      this.selectedIds = tempSelectedIds
+    },
+    init () {
+      this.store = new TreeStore({
+        data: this.data,
+        separator: this.separator,
+        valueKey: this.valueKey,
+        labelKey: this.labelKey,
+        childrenKey: this.childrenKey,
+        showLeafLabel: this.showLeafLabel
+      })
+      this.root = this.store.root
+      this.maxLevellist = Array.from({ length: this.store.maxLevel - 1 }, (v, i) => {
+        this.showData[i + 1] = []
+        return {
+          id: i + 1,
+          rendered: false
+        }
+      })
+      this.updateSelect(this.value, true, true)
+    }
+  },
+  mounted () {
+    this.init()
+  }
+}
+</script>
+
+<style lang="scss">
+.multi-cascader{
+  min-width:auto !important;
+}
+.multi-cascader .el-select-dropdown__item{
+    height:100%;
+    padding:0 !important;
+}
+.multi-cascader .el-select-dropdown__wrap{
+  max-height: 540px;
+}
+
+.ground{
+  display:flex;
+}
+</style>

package/packages/Search-Type/el-cascader-multi/src/multi-cascader/render-list.vue

@@ -0,0 +1,179 @@
+<template>
+  <ul class="ul-style">
+    <li class="li-style"
+      v-for="(node, nodeIndex) in list"
+      :key="guid(node)"
+      @click="handleClick(node, nodeIndex, level)"
+      :class="{'active-li': activeList[level - 1] === node.id}"
+      @mousemove="handleMouseMove(node, nodeIndex, level)"
+      @mouseout="handleMouseOut"
+    >
+      <p class="li-label-style" v-toolTip>
+        <span @click.stop v-show="!onlyLast || (onlyLast && node.isLeaf)">
+          <el-checkbox
+          @change="handleCheck($event, node)"
+          v-model="node.checked"
+          :disabled="node.disabled"
+          ></el-checkbox>
+        </span>
+        <span style="margin-left:5px">{{node[labelKey]}}</span>
+        <i v-if="node.childNodes && node.childNodes.length > 0" class="li-label-icon el-icon-arrow-right"></i>
+      </p>
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  directives: {
+    toolTip: {
+      inserted: function (el) {
+        el.title = el.scrollWidth > el.offsetWidth ? el.innerText : ''
+      }
+    }
+  },
+  props: {
+    activeList: {
+      type: Array,
+      default: () => []
+    },
+    list: {
+      type: Array,
+      default: () => []
+    },
+    level: {
+      type: [Number, String]
+    },
+    labelKey: {
+      type: String,
+      default: 'label'
+    },
+    expandTrigger: {
+      type: String,
+      default: 'click'
+    },
+    onlyLast: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      oldValue: {
+        oldNode: null,
+        oldLevelIndex: null,
+        oldLevel: null
+      }
+    }
+  },
+  methods: {
+    handleMouseOut () {
+      this.oldValue = {
+        oldNode: null,
+        oldLevelIndex: null,
+        oldLevel: null
+      }
+    },
+    // mouseEnter会一直触发，然后阻止了click事件，改为mouseMove事件
+    handleMouseMove (node, levelIndex, level) {
+      if (this.expandTrigger !== 'hover') {
+        return false
+      }
+      let { oldNode, oldLevelIndex, oldLevel } = this.oldValue
+      if (
+        (node === oldNode) &&
+        (oldLevelIndex === levelIndex) &&
+        (oldLevel === level)
+      ) {
+        return false
+      } else {
+        this.oldValue = {
+          oldNode: node,
+          oldLevelIndex: levelIndex,
+          oldLevel: level
+        }
+      }
+      this.$emit('handle-click', node, levelIndex, level)
+    },
+    handleClick (node, levelIndex, level) {
+      if (this.expandTrigger === 'click') {
+        this.$emit('handle-click', node, levelIndex, level)
+      }
+    },
+    handleCheck (v, node) {
+      node.checked = v
+      this.$emit('handle-check', node)
+    },
+    guid () {
+      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        let r = Math.random() * 16 | 0
+        let v = c === 'x' ? r : (r & 0x3 | 0x8)
+        return v.toString(16)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ul-style{
+  padding-left:0 !important;
+  list-style: none;
+  max-height:500px;
+  overflow-y: auto;
+    &::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+        display: none;
+    }
+    &:hover::-webkit-scrollbar{
+        display: block;
+    }
+    &::-webkit-scrollbar-thumb {
+        border-radius: 10px;
+        background:#d4d3d3;
+    }
+}
+.li-style {
+    height: 34px;
+    padding-right:20px;
+    box-sizing: border-box;
+    list-style: none;
+    max-width: 240px;
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 34px;
+    &:hover{
+      background-color: #c8e3fe;
+    }
+    &.selected {
+      color: #46a0fc;
+    }
+    &.active-li {
+      background-color: #c8e3fe;
+      color: #46a0fc;
+    }
+    .li-label-style{
+      text-align: left;
+      width: 100%;
+      box-sizing: border-box;
+      padding:0 15px;
+      position: relative;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      margin: 0;
+      .li-label-icon {
+        position: absolute;
+        right: 0px;
+        top: 50%;
+        transform: translate(0, -50%);
+      }
+      .el-checkbox {
+        margin-right: 10px;
+      }
+    }
+  }
+</style>

package/packages/Search-Type/el-cascader-multi/src/multi-cascader/tool/unit.js

@@ -0,0 +1,14 @@
+export function _uniq (arr) {
+  let result = []
+  arr.forEach(item => {
+    if (!result.includes(item)) {
+      result.push(item)
+    }
+  })
+  return result
+}
+
+export function _findByObj (arr, obj) {
+  let keys = Object.keys(obj)
+  return arr.find(item => keys.every(key => JSON.stringify(item[key]) === JSON.stringify(obj[key])))
+}

package/packages/Search-Type/el-cascader-multi/webpack.config.js

@@ -0,0 +1,88 @@
+const path = require('path')
+// 插件
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+// 路径
+const ENTRY_PATH = resolve('./src/index.js')
+const DIST_DIR = resolve('./dist')
+
+module.exports = (env, argv) => {
+  return {
+    // 入口
+    entry: [
+      resolve('src/index.js')
+    ],
+    // 出口
+    output: {
+      path: resolve('dist'),
+      filename: 'index.js',
+    },
+    resolve: {
+      // 定义模块查找的后缀，方便在代码引用时可省略后缀
+      extensions: ['.js', '.vue', '.json'],
+      // 定义路径简写
+      alias: {
+        'vue$': 'vue/dist/vue.esm.js',
+        'src' : resolve('src'),
+        '@' : resolve('src'),
+      }
+    },
+    module: {
+      // 文件的loader
+      rules: [
+        {
+            test: /\.js$/,
+            loader:"babel-loader",
+            exclude: /node_modules/
+        },
+        {
+          test: /\.vue$/,
+          loader: 'vue-loader'
+        },
+        {
+          test: /\.css$/,
+          use: [
+            'vue-style-loader',
+            'css-loader'
+          ]
+        },
+        {
+          test: /\.scss$/,
+          use: [
+            'vue-style-loader',
+            'css-loader',
+            'sass-loader'
+          ]
+        },
+        {
+          test: /\.sass$/,
+          use: [
+            'vue-style-loader',
+            'css-loader',
+            {
+              loader: 'sass-loader',
+              options: {
+                indentedSyntax: true
+              }
+            }
+          ]
+        }
+      ]
+    },
+    plugins: [
+      // 处理css，可以把vue中提取css为单独文件
+      new MiniCssExtractPlugin({
+        filename: "css/[name].[hash].css"
+      }),
+      // webpack4下，vue-loader需要这样引入
+      new VueLoaderPlugin()
+    ],
+
+    devtool: 'source-map'
+  }
+}
+
+function resolve(dir) {
+  return path.join(__dirname, './', dir);
+}
+