gcs-ui-lib 1.0.1

package/packages/SelectTreeUnitForm/index.js

@@ -0,0 +1,7 @@
+import SelectTreeUnitForm from './src/main'
+
+SelectTreeUnitForm.install = function(Vue) {
+    Vue.component(SelectTreeUnitForm.name, SelectTreeUnitForm)
+}
+
+export default SelectTreeUnitForm

package/packages/SelectTreeUnitForm/src/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/SelectTreeUnitForm/src/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/SelectTreeUnitForm/src/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/packages/SelectTreeUnitForm/src/demo/index.vue

@@ -0,0 +1,230 @@
+<template>
+  <div>
+    <!-- {{ unitData }} -->
+    <!-- 一般使用 -->
+    <!-- 说明：
+    1、不支持默认选择全部
+     -->
+    <!-- 参数：
+    url:数据请求路径
+    isUnitDataScope:0不过滤权限，1过滤权限,默认值0
+    moduleNo:资金体系树的moduleNo，比如票据：bill-group relaNo:权限码
+    node-key:唯一标识，固定为id
+    defaultSelect：默认选择单位，可传多个
+    upDateValue:用于更新回显值，区别于defaultSelect,不做监听，手动通过upDateShowValue方法更新,更新的数据必须有id
+    multiple:是否多选，默认单选
+    disabled:禁用状态
+    clearable:快速清除，默认为true
+    showAllCheck:展示全部单位复选框
+    selectFirst:初始化时选取第一家有权限单位
+    searchUnitNo:指定查询某一个单位下的所有下级,此模式暂不支持默认单位
+    defineProps：映射，目前不支持，接口返回数据和代码逻辑强绑定 -->
+    <!-- 事件
+    @dataChange   值改变事件  返回数组嵌套单位对象
+     -->
+    <!-- 方法
+     upDateShowValue:刷新表单回显值showValue，传true时，会根据选择值更新树的选择状态，如无需要不要传值,在值upDateValue改变后，在this.$nextTick里面调用方法。
+      -->
+    <!-- 多选 -->
+    <h2>多选</h2>
+    {{ unitData1 }}
+    <SelectTree
+      v-model="unitData1"
+      multiple
+      :url="'/api/nstc-gtcp/1.0/fundTree'"
+      :isUnitDataScope="'1'"
+      :defaultSelect="[{ unitName: '山子动力有限公司', unitNo: '1061001' }]"
+      :moduleNo="'bill-group'"
+      :relaNo="'dft_bill_toBePaid01'"
+      node-key="id"
+    />
+    <!-- 单选 -->
+    <h2>单选</h2>
+    {{ unitData2 }}
+    <SelectTree
+      v-model="unitData2"
+      :url="'/api/nstc-gtcp/1.0/fundTree'"
+      :isUnitDataScope="'0'"
+      :moduleNo="'bill-group'"
+      select-first
+      :relaNo="'dft_bill_toBePaid01'"
+      node-key="id"
+    />
+    <!-- 更新选择值使用方法 -->
+    <h2>更新选择值使用方法</h2>
+    {{ unitData3 }}
+    <el-button @click="refresh()">更新</el-button>
+    <SelectTree
+      ref="selectTreeUnitForm"
+      clearable
+      v-model="unitData3"
+      :upDateValue="upDateValue"
+      :defaultSelect="[{ unitName: '山子动力有限公司', unitNo: '1061001' }]"
+      :url="'/api/nstc-gtcp/1.0/fundTree'"
+      :isUnitDataScope="'0'"
+      :multiple="true"
+      :moduleNo="'bill-group'"
+      :relaNo="'dft_bill_toBePaid01'"
+      node-key="id"
+    />
+    <h2>在表单中</h2>
+    {{ postForm.unitNo }}
+    <el-form label-width="80px" :model="postForm" :rules="rules">
+      <el-form-item prop="unitNo" :label="$l('单位名称')">
+        <SelectTree
+          ref="unitRef"
+          defaultSelectAll
+          v-model="postForm.cltNo"
+          :url="'/api/nstc-gtcp/1.0/fundTree'"
+          :isUnitDataScope="'1'"
+          moduleNo="PTMS"
+          node-key="id"
+          relaNo="payment001"
+          multiple
+          v-bind="$attrs"
+          @dataChange="(data, isClick) => getUnitName(data, isClick, 'clt')"
+        />
+      </el-form-item>
+    </el-form>
+    <!-- <SelectTree
+      ref="selectTreeUnitForm"
+      clearable
+      showAllCheck
+      selectFirst
+      multiple
+      v-model="unitData4"
+      :defaultSelect="[mapData]"
+      :upDateValue="upDateValue"
+      :url="'/api/nstc-gtcp/1.0/fundTree'"
+      :isUnitDataScope="'0'"
+      :moduleNo="'bill-group'"
+      :relaNo="'aimsk011'"
+      node-key="id"
+    /> -->
+  </div>
+</template>
+
+<script>
+import emitter from "element-ui/src/mixins/emitter";
+import SelectTree from "./../main.vue";
+export default {
+  name: "SelectTreeUnitDemo",
+  mixins: [emitter],
+  components: {
+    SelectTree,
+  },
+
+  data() {
+    return {
+      mapData: {
+        unitName: "深圳思凯",
+        unitNo: "3003",
+        id: 2824,
+        pid: 2820,
+        hasChild: 0,
+        children: null,
+        disabled: false,
+      },
+      postForm: {
+        unitNo: "",
+      },
+      rules: {
+        unitNo: [
+          {
+            required: true,
+            message: "请选择单位名称",
+            trigger: ["change"],
+          },
+        ],
+      },
+      upDateValue: [],
+      unitData1: "",
+      unitData2: "",
+      unitData3: "",
+      unitData4: "",
+      unitData5: "",
+      unitData6: "",
+      treeList: [
+        {
+          label: "1",
+          value: "1",
+          id: "1",
+          pid: "0",
+          children: [
+            {
+              label: "1-1",
+              id: "1-1",
+              pid: "1",
+              value: "1-1",
+              children: [
+                { label: "1-1-1", id: "1-1-1", pid: "1-1", value: "1-1-1" },
+              ],
+            },
+            {
+              label: "1-2",
+              id: "1-2",
+              pid: "1",
+              value: "1-2",
+              children: [
+                { label: "1-2-1", id: "1-2-1", pid: "1-2", value: "1-2-1" },
+              ],
+            },
+          ],
+        },
+        {
+          label: "2",
+          value: "2",
+          id: "2",
+          pid: "0",
+          children: [
+            {
+              label: "2-1",
+              id: "2-1",
+              pid: "2",
+              value: "2-1",
+              disabled: true,
+              children: [
+                { label: "2-1-1", id: "2-1-1", pid: "2-1", value: "2-1-1" },
+              ],
+            },
+            {
+              label: "2-2",
+              id: "2-2",
+              pid: "2",
+              value: "2-2",
+              children: [
+                { label: "2-2-1", id: "2-2-1", pid: "2-2", value: "2-2-1" },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+  },
+  watch: {
+    unitData1(val) {
+      console.log("unitData1===>", val);
+      if (!val) {
+        debugger;
+      }
+    },
+  },
+  mounted() {},
+  methods: {
+    dataChange(res, type) {
+      this.postForm.unitNo = res.map((item) => item.unitNo);
+      console.log(res, type, 888);
+    },
+    refresh() {
+      this.upDateValue = [{ unitNo: "001", unitName: "北京九恒星", id: "1" }];
+      // console.log(11111, this.upDateValue);
+      this.$nextTick(() => {
+        this.$refs.selectTreeUnitForm.upDateShowValue();
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

package/packages/SelectTreeUnitForm/src/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