bri-components 1.5.11 → 1.5.12

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bri-components",
-    "version": "1.5.11",
+    "version": "1.5.12",
     "author": "dengshanghui",
     "description": "a component lib for vue project",
     "main": "src/index.js",

package/src/components/controls/base/DshCascader/DshCascader.vue

@@ -81,9 +81,11 @@
             :is="showTypeMap[showMode]"
             v-model="showModal"
             :multipleMode="multipleMode"
+            :activeValue="curValList"
             :data="cascaderData"
             :propsObj="selfPropsObj"
-            @confirm="confirmMulCb"
+            @confirm="confirmAddCb"
+            @confirmMul="confirmMulCb"
         >
             <dsh-control-input
                 :class="commonClass"
@@ -147,6 +149,7 @@
     import cascaderPicker from "./components/cascaderPicker.vue";
     import cascaderModal from "./components/cascaderModal.vue";
     import cascaderSimple from "./components/cascaderSimple.vue";
+    import cascaderTree from "./components/cascaderTree.vue";
 
     export default {
         name: "DshCascader",
@@ -156,7 +159,8 @@
         components: {
             cascaderPicker,
             cascaderModal,
-            cascaderSimple
+            cascaderSimple,
+            cascaderTree
         },
         props: {},
         data () {
@@ -164,7 +168,8 @@
                 showTypeMap: {
                     default: cascaderPicker, // 确认面板方式（默认）
                     custom: cascaderModal, // 弹框方式
-                    simple: cascaderSimple // 简易方式
+                    simple: cascaderSimple, // 简易方式
+                    tree: cascaderTree // 树形方式
                 }
             };
         },

package/src/components/controls/base/DshCascader/components/cascaderPicker.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="cascaderPicker">
         <Dropdown
-            style="width: 100%;"
             v-clickoutside="clickCancel"
+            style="width: 100%;"
             trigger="custom"
             :visible="showModal"
             :placement="'bottom-start'"

package/src/components/controls/base/DshCascader/components/cascaderSimple.vue

@@ -51,12 +51,10 @@
             renderData () {
                 return this.renderAll
                     ? this.data
-                    : this.data.map(item => {
-                        return {
-                            ...item,
-                            children: []
-                        };
-                });
+                    : this.data.map(item => ({
+                        ...item,
+                        children: []
+                }));
             }
         },
         created () {},

package/src/components/controls/base/DshCascader/components/cascaderTree.vue

@@ -0,0 +1,151 @@
+<template>
+    <div class="cascaderTree">
+        <Dropdown
+            v-clickoutside="clickCancel"
+            style="width: 100%;"
+            trigger="custom"
+            :visible="showModal"
+            :placement="'bottom-start'"
+            :transfer="true"
+            :transfer-class-name="`cascaderTree-down ${selfPropsObj._transferClassName}`"
+            :stop-propagation="true"
+            :events-enabled="true"
+        >
+            <div @click="clickInput">
+                <slot>
+                    <Input
+                        v-model="inputStr"
+                        :placeholder="selfPropsObj._placeholder"
+                        :disabled="disabled"
+                        :readonly="true"
+                        :clearable="clearable"
+                        :size="selfPropsObj._size"
+                    ></Input>
+                </slot>
+            </div>
+
+            <!-- 下拉面板 click.stop目的：slot插槽里的会渲染到body下，点击此面板时，click事件会被Dropdown捕捉到，被当成外部点击事件，用stop阻止住 -->
+            <div
+                slot="list"
+                class="wrap"
+                @click.stop="0"
+            >
+                <!-- 头部 -->
+                <div class="wrap-header">
+                    <!-- 搜索 -->
+                    <div class="wrap-header-left">
+
+                    </div>
+
+                    <!-- 按钮 -->
+                    <dsh-buttons
+                        class="wrap-header-right"
+                        :list="$getOperationList()"
+                        @click="$dispatchEvent($event)"
+                    ></dsh-buttons>
+                </div>
+
+                <!-- 内容 -->
+                <div class="wrap-content">
+                    <Tree
+                        :data="showTreeData"
+                        show-checkbox
+                        check-directly
+                        @on-check-change="changeCheck"
+                    ></Tree>
+                </div>
+            </div>
+        </Dropdown>
+    </div>
+</template>
+
+<script>
+    import cascaderPickerMixin from "../../../mixins/cascaderPickerMixin.js";
+
+    export default {
+        name: "cascaderTree",
+        mixins: [
+            cascaderPickerMixin
+        ],
+        components: {},
+        props: {},
+        data () {
+            return {};
+        },
+        computed: {},
+        created () {},
+        methods: {
+            changeCheck (checkList, curItem) {
+                // 不是末级节点 -点击后是选中状态话，把子孙后代节点全部展开；点击后是取消勾选状态话，把子孙后代节点全部收起来
+                if (!curItem.isLeaf) {
+                    const loop = (node = { children: [] }) => {
+                        node.expand = !!node.checked;
+                        node.children.forEach(childNode => loop(childNode));
+                    };
+                    loop(curItem);
+                }
+
+                this.selectedValueArr = checkList
+                    .reduce((newNodeArr, node, nodeIndex) => {
+                        return newNodeArr.every(newNode => !node.code.startsWith(newNode.code))
+                            ? [
+                                ...newNodeArr,
+                                node
+                            ]
+                            : newNodeArr;
+                    }, [])
+                    .map(node => node.keys);
+            },
+            clickConfirm () {
+                this.$emit("confirmMul", this.selectedValueArr, this.selectedOptionsArr);
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .cascaderTree {
+        &-down {
+            .wrap {
+                &-header {
+                    width: 100%;
+                    height: 40px;
+                    padding: 0px 8px 3px;
+                    border-bottom: 1px solid @borderColor;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+
+                    &-left {
+                        width: 200px;
+                        display: flex;
+                        align-items: center;
+                    }
+
+                    &-right {
+                        padding-left: 10px;
+                        display: flex;
+                        justify-content: flex-end;
+                    }
+                }
+
+                &-content {
+                    width: 100%;
+                    min-height: 300px;
+                    max-height: 540px;
+                    padding: 10px 20px;
+                    overflow: auto;
+                }
+            }
+
+            &.ivu-select-dropdown {
+                min-width: 420px;
+                max-width: 420px;
+                // min-height: 300px;
+                max-height: 600px; // 必须有，压住iview的300px
+                border: 0.5px solid #e5e5e5;
+                box-shadow: 0 3px 14px 2px rgba(0,0,0,0.05), 0 8px 10px 1px rgba(0,0,0,0.06), 0 5px 5px -3px rgba(0,0,0,0.1);
+            }
+        }
+    }
+</style>

package/src/components/controls/mixins/cascaderMixin.js

@@ -16,6 +16,7 @@ export default {
             return {
                 _regionType: "default", // "default", "benji", "userIndustry"
                 _showMode: "default", // "default", "custom", "simple"
+                _searchShowMode: undefined, // "tree", "default", "custom", "simple"
 
                 _saveKey: "_key",
                 _valueKey: "code",
@@ -43,7 +44,9 @@ export default {
             return this.selfPropsObj._regionType;
         },
         showMode () {
-            return this.selfPropsObj._showMode;
+            return this.isInAnySearch
+                ? this.selfPropsObj._searchShowMode || this.selfPropsObj._showMode
+                : this.selfPropsObj._showMode;
         },
 
         saveKey () {
@@ -130,6 +133,14 @@ export default {
                         label: newItem[nameKey]
                     };
 
+                    if (this.showMode === "tree") {
+                        newItem.title = newItem[nameKey];
+                        newItem.checked = this.multipleMode
+                            ? this.curValList.some(valListItem => valListItem.join("") === newItem.code)
+                            : this.curValList.join("") === newItem.code;
+                        newItem.expand = !!newItem.expand;
+                    }
+
                     if (
                         (!level || level > newItem.level) &&
                         (newItem.children && newItem.children.length)
@@ -139,6 +150,10 @@ export default {
                         if (newItem.children.length) {
                             newItem.loading = false; // 此代码pc端在用：为了所请求的级，出现继续加载的箭头图标
                             newItem.isLeaf = false;
+
+                            if (this.showMode === "tree") {
+                                newItem.expand = newItem.expand || newItem.checked || newItem.children.some(childItem => childItem.expand || childItem.checked);
+                            }
                         } else {
                             newItem.children = isMb ? undefined : [];
                             newItem.isLeaf = true;
@@ -228,12 +243,14 @@ export default {
     },
     created () { },
     methods: {
+        // 单选 -确认回调
         confirmCb (selectedValue, selectedOptions) {
             this.curValList = selectedValue;
 
             this.closeModal();
         },
-        confirmMulCb (selectedValue, selectedOptions) {
+        // 多选 -追加的确认回调
+        confirmAddCb (selectedValue, selectedOptions) {
             if (this.curValList.some(item => JSON.stringify(item) === JSON.stringify(selectedValue))) {
                 this.$Message.error({
                     content: `请勿重复选择"${this.transformFullName(selectedValue)}"！`,
@@ -245,6 +262,12 @@ export default {
                 this.closeModal();
             }
         },
+        // 多选 -整体多选的回调
+        confirmMulCb (selectedValueArr, selectedOptionsArr) {
+            this.curValList = selectedValueArr;
+
+            this.closeModal();
+        },
         // 删除
         clickDeleteItem (nameItem, index) {
             this.curValList.splice(index, 1);

package/src/components/controls/mixins/cascaderPickerMixin.js

@@ -39,6 +39,7 @@ export default {
             inputStr: "",
             selectedValue: [],
             activeCodeValue: [],
+            selectedValueArr: [], // 多选的选中项
 
             operationMap: {
                 canCancel: {
@@ -156,6 +157,12 @@ export default {
         // 选中项 -名字
         selectedName () {
             return this.selectedObj ? this.selectedObj[this.nameKey] : "";
+        },
+        // 整体多选的选中项s
+        selectedOptionsArr () {
+            return this.selectedValueArr.map(selectedValItem =>
+                this.$getTreeLinealDatas(selectedValItem, this.showTreeData, undefined, this.saveKey)
+            );
         }
     },
     created () {
@@ -163,8 +170,12 @@ export default {
     },
     methods: {
         cascaderPickerInit () {
-            this.selectedValue = this.activeValue;
-            this.activeCodeValue = this.$getTreeLinealDatas(this.activeValue, this.data, this.valueKey, this.saveKey);
+            if (this.multipleMode) {
+                this.selectedValueArr = this.activeValue; // 多选使用下，activeValue是二重数组
+            } else {
+                this.selectedValue = this.activeValue;
+                this.activeCodeValue = this.$getTreeLinealDatas(this.activeValue, this.data, this.valueKey, this.saveKey);
+            }
         },
 
         clickInput (e) {

package/src/index.js

@@ -63,7 +63,7 @@ import Error404 from "./components/Error/Error404.vue";
 import DshCrossTable from "./components/list/DshBox/DshCrossTable.vue";
 import DshFlatTable from "./components/list/DshFlatTable.vue";
 // import DshCascaderTable from "./components/list/DshCascaderTable.vue";
-// import DshTreeTable from "./components/list/DshTreeTable.vue";
+import DshTreeTable from "./components/list/DshTreeTable.vue";
 import BriCard from "./components/list/BriCard.vue";
 import BriTree from "./components/list/BriTree.vue";
 import BriTreeItem from "./components/list/BriTreeItem.vue";
@@ -198,7 +198,7 @@ export {
     DshCrossTable,
     DshFlatTable,
     // DshCascaderTable,
-    // DshTreeTable,
+    DshTreeTable,
 
     // form
     DshForm,