t20-common-lib 0.12.10 → 0.12.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "t20-common-lib",
-  "version": "0.12.10",
+  "version": "0.12.11",
   "description": "T20",
   "private": false,
   "main": "dist/index.js",

package/packages/select-tree-unit/src/main.vue

@@ -126,15 +126,15 @@
 </template>
 
 <script>
-import Tree from "../../../src/common/selectTree/Tree/index.vue";
-import ElSelect from "../../../src/common/selectTree/Extends/ElSelect.vue";
-import Filters from "../../../src/common/selectTree/Filters/index.vue"
+import Tree from "./selectTree/Tree/index.vue";
+import ElSelect from "./selectTree/Extends/ElSelect.vue";
+import Filters from "../../../src/common/Filters/index.vue"
 import request from "@/utils/request";
 import { getCommonConfig } from "../../../src/api/common";
-import treeSelectImg from "../../../src/common/selectTree/imgs/tree-select.png";
-import treeUnSelectImg from "../../../src/common/selectTree/imgs/tree-unselect.png";
-import listSelectImg from "../../../src/common/selectTree/imgs/list-select.png";
-import listUnSelectImg from "../../../src/common/selectTree/imgs/list-unselect.png";
+import treeSelectImg from "./selectTree/imgs/tree-select.png";
+import treeUnSelectImg from "./selectTree/imgs/tree-unselect.png";
+import listSelectImg from "./selectTree/imgs/list-select.png";
+import listUnSelectImg from "./selectTree/imgs/list-unselect.png";
 
 /** 兼容接口返回体在 res 顶层或 res.data */
 function unwrapRequestData(res) {

package/packages/select-tree-unit/src/selectTree/Extends/ElSelect.vue

@@ -0,0 +1,180 @@
+<template>
+  <div
+    class="el-select"
+    :class="[selectSize ? 'el-select--' + selectSize : '']"
+    @click.stop="toggleMenu"
+    v-clickoutside="handleClose"
+  >
+    <div
+      class="el-select__tags"
+      v-if="multiple"
+      ref="tags"
+      :style="{ 'max-width': inputWidth - 32 + 'px', width: '100%' }"
+    >
+      <span v-if="collapseTags && selected.length">
+        <el-tag
+          :closable="!selectDisabled"
+          :size="collapseTagSize"
+          :hit="selected[0].hitState"
+          type="info"
+          @close="deleteTag($event, selected[0])"
+          disable-transitions
+        >
+          <span class="el-select__tags-text">{{
+            selected[0].currentLabel
+          }}</span>
+        </el-tag>
+        <el-tag
+          v-if="selected.length > 1"
+          :closable="false"
+          :size="collapseTagSize"
+          type="info"
+          disable-transitions
+        >
+          <span class="el-select__tags-text">+ {{ selected.length - 1 }}</span>
+        </el-tag>
+      </span>
+      <transition-group @after-leave="resetInputHeight" v-if="!collapseTags">
+        <el-tag
+          v-for="item in selected"
+          :key="getValueKey(item)"
+          :closable="!selectDisabled"
+          :size="collapseTagSize"
+          :hit="item.hitState"
+          type="info"
+          @close="deleteTag($event, item)"
+          disable-transitions
+        >
+          <span class="el-select__tags-text">{{ item.currentLabel }}</span>
+        </el-tag>
+      </transition-group>
+      <input
+        type="text"
+        class="el-select__input"
+        :class="[selectSize ? `is-${selectSize}` : '']"
+        :disabled="selectDisabled"
+        :autocomplete="autoComplete || autocomplete"
+        @focus="handleFocus"
+        @blur="softFocus = false"
+        @keyup="managePlaceholder"
+        @keydown="resetInputState"
+        @keydown.down.prevent="handleNavigate('next')"
+        @keydown.up.prevent="handleNavigate('prev')"
+        @keydown.enter.prevent="selectOption"
+        @keydown.esc.stop.prevent="visible = false"
+        @keydown.delete="deletePrevTag"
+        @keydown.tab="visible = false"
+        @compositionstart="handleComposition"
+        @compositionupdate="handleComposition"
+        @compositionend="handleComposition"
+        v-model="query"
+        @input="debouncedQueryChange"
+        v-if="filterable"
+        :style="{
+          'flex-grow': '1',
+          width: inputLength / (inputWidth - 32) + '%',
+          'max-width': inputWidth - 42 + 'px',
+        }"
+        ref="input"
+      />
+    </div>
+    <el-input
+      ref="reference"
+      v-model="selectedLabel"
+      type="text"
+      :placeholder="currentPlaceholder"
+      :name="name"
+      :id="id"
+      :autocomplete="autoComplete || autocomplete"
+      :size="selectSize"
+      :disabled="selectDisabled"
+      :readonly="readonly"
+      :validate-event="false"
+      :class="{ 'is-focus': visible }"
+      :tabindex="multiple && filterable ? '-1' : null"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @input="debouncedOnInputChange"
+      @keydown.native.down.stop.prevent="handleNavigate('next')"
+      @keydown.native.up.stop.prevent="handleNavigate('prev')"
+      @keydown.native.enter.prevent="selectOption"
+      @keydown.native.esc.stop.prevent="visible = false"
+      @keydown.native.tab="visible = false"
+      @compositionstart="handleComposition"
+      @compositionupdate="handleComposition"
+      @compositionend="handleComposition"
+      @mouseenter.native="inputHovering = true"
+      @mouseleave.native="inputHovering = false"
+    >
+      <template slot="prefix" v-if="$slots.prefix">
+        <slot name="prefix"></slot>
+      </template>
+      <template slot="suffix">
+        <i
+          v-show="!showClose"
+          :class="[
+            'el-select__caret',
+            'el-input__icon',
+            'el-icon-' + iconClass,
+          ]"
+        ></i>
+        <i
+          v-if="showClose"
+          class="el-select__caret el-input__icon el-icon-circle-close"
+          @click="handleClearClick"
+        ></i>
+      </template>
+    </el-input>
+    <transition
+      name="el-zoom-in-top"
+      @before-enter="handleMenuEnter"
+      @after-leave="doDestroy"
+    >
+      <el-select-menu
+        ref="popper"
+        :append-to-body="popperAppendToBody"
+        v-show="visible && emptyText !== false"
+      >
+        <el-scrollbar
+          tag="ul"
+          wrap-class="el-select-dropdown__wrap"
+          view-class="el-select-dropdown__list"
+          ref="scrollbar"
+          :class="{
+            'is-empty': !allowCreate && query && filteredOptionsCount === 0,
+          }"
+          v-show="options.length > 0 && !loading"
+        >
+          <el-option :value="query" created v-if="showNewOption"> </el-option>
+          <slot></slot>
+        </el-scrollbar>
+        <template
+          v-if="
+            emptyText &&
+            (!allowCreate || loading || (allowCreate && options.length === 0))
+          "
+        >
+          <slot name="empty" v-if="$slots.empty"></slot>
+          <p class="el-select-dropdown__empty" v-else>
+            {{ emptyText }}
+          </p>
+        </template>
+      </el-select-menu>
+    </transition>
+  </div>
+</template>
+<script>
+import Select from "element-ui/packages/select/src/select.vue";
+
+export default {
+  name: "ElSelect",
+  extends: Select,
+  methods: {
+    handleClose(flag = true) {
+      this.visible = !flag;
+      this.$emit("outClick");
+    },
+  },
+};
+</script>
+

package/packages/select-tree-unit/src/selectTree/Tree/document.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>页面</title>
+    <g id="页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="矩形" fill="#000000" fill-rule="nonzero" opacity="0" x="0" y="0" width="20" height="20"></rect>
+        <path d="M16.6914062,5.63867188 C16.8085938,5.75585938 16.875,5.9140625 16.875,6.08007812 L16.875,18.125 C16.875,18.4707031 16.5957031,18.75 16.25,18.75 L3.75,18.75 C3.40429688,18.75 3.125,18.4707031 3.125,18.125 L3.125,1.875 C3.125,1.52929688 3.40429688,1.25 3.75,1.25 L12.0449219,1.25 C12.2109375,1.25 12.3710938,1.31640625 12.4882813,1.43359375 L16.6914062,5.63867188 Z M15.4335938,6.3671875 L11.7578125,2.69140625 L11.7578125,6.3671875 L15.4335938,6.3671875 Z M6.25,9.4140625 C6.16370551,9.4140625 6.09375,9.48401801 6.09375,9.5703125 L6.09375,10.5078125 C6.09375,10.594107 6.16370551,10.6640625 6.25,10.6640625 L13.75,10.6640625 C13.8362945,10.6640625 13.90625,10.594107 13.90625,10.5078125 L13.90625,9.5703125 C13.90625,9.48401801 13.8362945,9.4140625 13.75,9.4140625 L6.25,9.4140625 Z M6.25,12.0703125 C6.16370551,12.0703125 6.09375,12.140268 6.09375,12.2265625 L6.09375,13.1640625 C6.09375,13.250357 6.16370551,13.3203125 6.25,13.3203125 L9.84375,13.3203125 C9.93004449,13.3203125 10,13.250357 10,13.1640625 L10,12.2265625 C10,12.140268 9.93004449,12.0703125 9.84375,12.0703125 L6.25,12.0703125 Z" id="形状" fill="#1677FF" fill-rule="nonzero"></path>
+    </g>
+</svg>

package/packages/select-tree-unit/src/selectTree/Tree/folder.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>文件</title>
+    <g id="文件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="矩形" fill="#000000" fill-rule="nonzero" opacity="0" x="0" y="0" width="20" height="20"></rect>
+        <rect id="矩形" fill="#FFBF00" opacity="0.300000012" x="3" y="4" width="14" height="11"></rect>
+        <path d="M17.1875,5.828125 L10.1757812,5.828125 L7.88476562,3.63671875 C7.85546875,3.609375 7.81640625,3.59375 7.77734375,3.59375 L2.8125,3.59375 C2.46679688,3.59375 2.1875,3.87304688 2.1875,4.21875 L2.1875,15.78125 C2.1875,16.1269531 2.46679688,16.40625 2.8125,16.40625 L17.1875,16.40625 C17.5332031,16.40625 17.8125,16.1269531 17.8125,15.78125 L17.8125,6.453125 C17.8125,6.10742188 17.5332031,5.828125 17.1875,5.828125 Z" id="路径" fill="#FFBF00" fill-rule="nonzero"></path>
+    </g>
+</svg>

package/packages/select-tree-unit/src/selectTree/forEachs.js

@@ -0,0 +1,16 @@
+function forEachs(arr, callback, branch = 'children', arrp = {}) {
+  if (typeof callback === 'function') {
+    _forEachs(arr, callback, branch, arrp)
+  }
+}
+
+function _forEachs(arr, callback, branch, arrp) {
+  arr.forEach(function (item, _i, _arr) {
+    callback(item, _i, _arr, arrp)
+    if (item[branch] && Array.isArray(item[branch])) {
+      _forEachs(item[branch], callback, branch, item)
+    }
+  })
+}
+
+export default forEachs

package/packages/select-tree-unit-form/src/main.vue

@@ -107,15 +107,15 @@
 
 <script>
 import emitter from "element-ui/src/mixins/emitter";
-import Tree from "../../../src/common/selectTree/Tree/index.vue";
-import ElSelect from "../../../src/common/selectTree/Extends/ElSelect.vue";
-import Filters from "../../../src/common/selectTree/Filters/index.vue"
+import Tree from "../../select-tree-unit/src/selectTree/Tree/index.vue";
+import ElSelect from "../../select-tree-unit/src/selectTree/Extends/ElSelect.vue";
+import Filters from "../../../src/common/Filters/index.vue"
 import request from "@/utils/request";
 import { getCommonConfig } from "../../../src/api/common";
-import treeSelectImg from "../../../src/common/selectTree/imgs/tree-select.png";
-import treeUnSelectImg from "../../../src/common/selectTree/imgs/tree-unselect.png";
-import listSelectImg from "../../../src/common/selectTree/imgs/list-select.png";
-import listUnSelectImg from "../../../src/common/selectTree/imgs/list-unselect.png";
+import treeSelectImg from "../../select-tree-unit/src/selectTree/imgs/tree-select.png";
+import treeUnSelectImg from "../../select-tree-unit/src/selectTree/imgs/tree-unselect.png";
+import listSelectImg from "../../select-tree-unit/src/selectTree/imgs/list-select.png";
+import listUnSelectImg from "../../select-tree-unit/src/selectTree/imgs/list-unselect.png";
 
 /** 兼容接口返回体在 res 顶层或 res.data */
 function unwrapRequestData(res) {

package/packages/select-tree-unit-form/src/selectTreeForm/Tree/index.vue

@@ -0,0 +1,254 @@
+<template>
+  <el-tree
+    ref="tree"
+    class="cl-tree cl-tree-nstc"
+    :node-key="nodeKey"
+    :expand-on-click-node="multiple?true:false"
+    :default-expanded-keys="defaultExpandedKeys"
+    :data="data"
+    check-strictly
+    :show-checkbox="multiple"
+    :props="props"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <div
+      slot-scope="{ node, data }"
+      :class="data.disabled ? 'nstc-tree-disabled' : ''"
+      class="flex-box flex-lr flex-v cl-tree-item"
+      @mouseenter="mouseenterTree(node, data)"
+      @mouseleave="checkFlag = false"
+    >
+      <div
+        class=" w-500px"
+        :title="
+          (data[props.value] ? '(' + data[props.value] + ') ' : '') +
+          data[props.label]
+        "
+      >
+        <!-- <img :src="node.level == 1 ? folder : desc" class="m-r-ss" alt="" /> -->
+        {{
+          (data[props.value] ? "(" + data[props.value] + ") " : "") +
+          data[props.label]
+        }}
+      </div>
+      <!-- {{ node.data[nodeKey] }} -->
+      <div class="row-point" v-show="multiple && !isList">
+        <el-dropdown @click.stop="() => null">
+          <span class="el-dropdown-link"> ... </span>
+          <el-dropdown-menu slot="dropdown" class="nstc-unit-tree-drop">
+            <el-dropdown-item
+              @click.native.stop="handleCheckedBro(node, data)"
+              >{{ $t("common_a_0006") }}</el-dropdown-item
+            >
+            <el-dropdown-item
+              @click.native.stop="handleCheckedChild(node, data, 'direct')"
+            >
+              {{ $t("common_a_0008") }}</el-dropdown-item
+            >
+            <el-dropdown-item
+              @click.native.stop="handleCheckedChild(node, data, 'all')"
+              >{{ $t("common_a_0007") }}</el-dropdown-item
+            >
+            <el-dropdown-item
+              @click.native.stop="handleCheckedChild(node, data, 'cancel')"
+              >{{ $t("common_a_0007_1") }}</el-dropdown-item
+            >
+          </el-dropdown-menu>
+        </el-dropdown>
+        <!--        <span-->
+        <!--          @click="-->
+        <!--            showDropMenu == node.data.id-->
+        <!--              ? (showDropMenu = null)-->
+        <!--              : (showDropMenu = node.data.id)-->
+        <!--          "-->
+        <!--        >-->
+        <!--          . . .-->
+        <!--        </span>-->
+        <!--        <div class="drop-box" v-if="showDropMenu == node.data.id">-->
+        <!--          &lt;!&ndash; <div v-if="!node.data.disabled" @click="handleChecked(node, data)">只勾选本单位</div> &ndash;&gt;-->
+        <!--          &lt;!&ndash;  勾选本单位及平级单位&ndash;&gt;-->
+        <!--          <div v-if="!node.data.disabled" @click="handleCheckedBro(node, data)">-->
+        <!--            {{ $t("common_a_0006") }}-->
+        <!--          </div>-->
+        <!--          &lt;!&ndash;勾选直接下级单位&ndash;&gt;-->
+        <!--          <div @click="handleCheckedChild(node, data, 'direct')">-->
+        <!--            {{ $t("common_a_0008") }}-->
+        <!--          </div>-->
+        <!--          &lt;!&ndash;勾选所有下级单位&ndash;&gt;-->
+        <!--          <div @click="handleCheckedChild(node, data, 'all')">-->
+        <!--            {{ $t("common_a_0007") }}-->
+        <!--          </div>-->
+        <!--        </div>-->
+        <!--      </div>-->
+        <!-- <el-button
+        v-if="
+          showCheckbox &&
+          node.checked &&
+          node.data[nodeKey] === (checkFlag && checkFlag.data && checkFlag.data[nodeKey])
+        "
+        type="text"
+        class="m-r-s"
+        @click="handleClose(node, data)"
+        >{{ $lc('取消勾选') }}</el-button
+      >
+      <el-button
+        v-else-if="
+          !node.data.disabled &&
+          showCheckbox &&
+          !node.checked &&
+          node.data[nodeKey] === (checkFlag && checkFlag.data && checkFlag.data[nodeKey])
+        "
+        type="text"
+        class="m-r-s"
+        @click="handleChecked(node, data)"
+        >{{ $lc('只勾选本层级') }}</el-button
+      > -->
+      </div>
+    </div>
+  </el-tree>
+</template>
+<script>
+export default {
+  name: "Tree",
+  props: {
+    isList: {
+      type: Boolean,
+      default: false,
+    },
+    data: {
+      type: Array,
+      default: () => [],
+    },
+    defaultExpandedKeys: {
+      type: Array,
+      default: () => [],
+    },
+    props: {
+      type: Object,
+      default: () => ({}),
+    },
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    // showCheckbox: {
+    //   type: Boolean,
+    //   default: false
+    // },
+    checkStrictly: {
+      type: Boolean,
+      default: false,
+    },
+    nodeKey: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      folder: require("./folder.svg"),
+      desc: require("./document.svg"),
+      checkFlag: {},
+      showDropMenu: null,
+      list: [],
+    };
+  },
+  computed: {
+    checkStrictlyC: {
+      get() {
+        return this.checkStrictly;
+      },
+      set(v) {
+        // console.log(v, 123);
+        return this.$emit("update:checkStrictly", v);
+      },
+    },
+  },
+  mounted() {
+    this.setRefData();
+  },
+  methods: {
+    setRefData() {
+      const {
+        store,
+        filter,
+        updateKeyChildren,
+        getCheckedNodes,
+        setCheckedNodes,
+        getCheckedKeys,
+        setCheckedKeys,
+        setChecked,
+        getHalfCheckedNodes,
+        getHalfCheckedKeys,
+        getCurrentKey,
+        getCurrentNode,
+        setCurrentKey,
+        setCurrentNode,
+        getNode,
+        remove,
+        append,
+        insertBefore,
+        insertAfter,
+      } = this.$refs["tree"];
+
+      this.filter = filter;
+      this.updateKeyChildren = updateKeyChildren;
+      this.getCheckedNodes = getCheckedNodes;
+      this.setCheckedNodes = setCheckedNodes;
+      this.getCheckedKeys = getCheckedKeys;
+      this.setCheckedKeys = setCheckedKeys;
+      this.setChecked = setChecked;
+      this.getHalfCheckedNodes = getHalfCheckedNodes;
+      this.getHalfCheckedKeys = getHalfCheckedKeys;
+      this.getCurrentKey = getCurrentKey;
+      this.getCurrentNode = getCurrentNode;
+      this.setCurrentKey = setCurrentKey;
+      this.setCurrentNode = setCurrentNode;
+      this.getNode = getNode;
+      this.remove = remove;
+      this.append = append;
+      this.insertBefore = insertBefore;
+      this.insertAfter = insertAfter;
+      this.store = store;
+    },
+    handleChecked(node, data) {
+      // this.store.checkStrictly = true
+      this.setChecked(node.data, true);
+      this.$emit("check", data, {
+        checkedKeys: this.getCheckedKeys(),
+        checkedNodes: this.getCheckedNodes(),
+        halfCheckedNodes: this.getHalfCheckedNodes(),
+        halfCheckedKeys: this.getHalfCheckedKeys(),
+      });
+      // this.store.checkStrictly = false
+    },
+    handleCheckedBro(node, data) {
+      //勾选平级单位
+      this.$emit("checkedBro", data);
+    },
+    handleCheckedChild(node, data, type) {
+      //勾选平级单位
+      this.$emit("checkedChild", { node, data, type: type });
+    },
+    mouseenterTree(node, data) {
+      this.checkFlag = node;
+    },
+    handleClose(node, data) {
+      // this.store.checkStrictly = true
+      this.setChecked(node.data, false);
+      this.$emit("check", data, {
+        checkedKeys: this.getCheckedKeys(),
+        checkedNodes: this.getCheckedNodes(),
+        halfCheckedNodes: this.getHalfCheckedNodes(),
+        halfCheckedKeys: this.getHalfCheckedKeys(),
+      });
+      // this.store.checkStrictly = false
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

package/src/common/{selectTree/Filters → Filters}/index.vue

@@ -25,8 +25,8 @@
 </template>
 
 <script>
-import request from "../../../utils/request"
-import getJsonc from "../../../utils/getJsonc"
+import request from "../../utils/request"
+import getJsonc from "../../utils/getJsonc"
 import { cloneDefaultFilterItems } from "./defaultFilterItems"
 
 export default {