bri-components 1.6.17 → 1.6.18

package/package.json

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

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

@@ -87,7 +87,10 @@
                 <!-- 内容 -->
                 <div class="wrap-content">
                     <!-- 选中项tabs -->
-                    <div class="wrap-content-tabs">
+                    <div
+                        v-if="!isCheckboxMode"
+                        class="wrap-content-tabs"
+                    >
                         <span
                             v-for="(tabItem, tabIndex) in selectedLinealDatas"
                             :key="tabIndex"
@@ -111,8 +114,46 @@
                             v-if="showTreeData.length"
                             class="wrap-content-list-menu"
                         >
+                            <!-- 多选框方式（multipleMode 且 _cascaderLevel === 1） -->
+                            <template v-if="isCheckboxMode">
+                                <!-- 全选 -->
+                                <div
+                                    class="item item-select-all"
+                                    @click="clickSelectAll"
+                                >
+                                    <span class="item-checkbox">
+                                        <Checkbox
+                                            :value="isAllSelected"
+                                            :indeterminate="isIndeterminate"
+                                        ></Checkbox>
+                                    </span>
+                                    <span class="item-name">全选</span>
+                                </div>
+
+                                <div
+                                    v-for="nodeItem in showTreeData"
+                                    :key="nodeItem[valueKey]"
+                                    :class="{
+                                        'item': true,
+                                        'item-active': isNodeChecked(nodeItem),
+                                        'item-disabled': nodeItem.disabled
+                                    }"
+                                    @click="clickCheckboxItem(nodeItem)"
+                                >
+                                    <span class="item-checkbox">
+                                        <Checkbox
+                                            :value="isNodeChecked(nodeItem)"
+                                            :disabled="nodeItem.disabled"
+                                        ></Checkbox>
+                                    </span>
+                                    <span class="item-name">
+                                        {{ nodeItem[nameKey] }}
+                                    </span>
+                                </div>
+                            </template>
+
                             <!-- 拍平方式 -->
-                            <template v-if="useFlatMode">
+                            <template v-else-if="useFlatMode">
                                 <div
                                     v-for="nodeItem in showFlatData"
                                     :key="nodeItem[valueKey]"
@@ -196,6 +237,22 @@
             };
         },
         computed: {
+            isCheckboxMode () {
+                return this.multipleMode && this.selfPropsObj._cascaderLevel === "1";
+            },
+            isAllSelected () {
+                return this.showTreeData.length > 0 &&
+                    this.showTreeData.every(node => this.selectedValueArr.some(
+                        val => JSON.stringify(val) === JSON.stringify(node.keys)
+                ));
+            },
+            isIndeterminate () {
+                const checkedCount = this.showTreeData.filter(node =>
+                    this.selectedValueArr.some(val => JSON.stringify(val) === JSON.stringify(node.keys))
+                ).length;
+                return checkedCount > 0 && checkedCount < this.showTreeData.length;
+            },
+
             selectedLinealDatas () {
                 const arr = this.selectedOptions.map((item, index, list) => {
                     return {
@@ -269,6 +326,56 @@
                 if (this.searchMode === "default" && node.children.length) {
                     this.curTabIndex = this.curTabIndex + 1;
                 }
+            },
+
+            isNodeChecked (node) {
+                return this.selectedValueArr.some(val => JSON.stringify(val) === JSON.stringify(node.keys));
+            },
+            clickCheckboxItem (node) {
+                if (node.disabled) return;
+                const index = this.selectedValueArr.findIndex(val => JSON.stringify(val) === JSON.stringify(node.keys));
+                if (index === -1) {
+                    this.selectedValueArr = [...this.selectedValueArr, node.keys];
+                } else {
+                    this.selectedValueArr = this.selectedValueArr.filter((_, i) => i !== index);
+                }
+            },
+            clickSelectAll () {
+                if (this.isAllSelected) {
+                    this.selectedValueArr = [];
+                } else {
+                    this.selectedValueArr = this.showTreeData
+                        .filter(node => !node.disabled)
+                        .map(node => node.keys);
+                }
+            },
+            clickConfirm () {
+                if (this.isCheckboxMode) {
+                    if (this.selectedValueArr.length) {
+                        this.$emit("confirmMul", this.selectedValueArr, this.selectedOptionsArr);
+                    } else {
+                        this.$Message.error({
+                            content: "请选择数据！",
+                            duration: 2
+                        });
+                    }
+                } else {
+                    if (this.selectedValue.length && this.selectedOptions.length) {
+                        if (!this.changeOnSelect && !this.selectedObj.isLeaf) {
+                            this.$Message.error({
+                                content: "请选择到末级数据！",
+                                duration: 2
+                            });
+                        } else {
+                            this.$emit("confirm", this.selectedValue, this.selectedOptions);
+                        }
+                    } else {
+                        this.$Message.error({
+                            content: "请选择数据！",
+                            duration: 2
+                        });
+                    }
+                }
             }
         }
     };
@@ -375,6 +482,13 @@
                                 justify-content: space-between;
                                 align-items: center;
 
+                                &-checkbox {
+                                    margin-right: 5px;
+                                    display: flex;
+                                    align-items: center;
+                                    flex-shrink: 0;
+                                }
+
                                 &-name {
                                     flex: 1;
                                     min-width: 0px;
@@ -402,6 +516,12 @@
                                         color: @textColor-disabled;
                                     }
                                 }
+
+                                &-select-all {
+                                    border-bottom: 1px solid @borderColor;
+                                    margin-bottom: 4px;
+                                    font-weight: 500;
+                                }
                             }
                         }
 

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

@@ -506,7 +506,7 @@
                     paramStr += attr + "=" + params[attr] + "&";
                 }
 
-                fetch("http://restapi.amap.com/v3/geocode/regeo?" + paramStr)
+                fetch("https://restapi.amap.com/v3/geocode/regeo?" + paramStr)
                     .then(res => res.json())
                     .then(response => {
                         if (response.status === "1" && response.regeocode) {

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

@@ -1,10 +1,10 @@
 <template>
     <div
         class="DshDivider"
-        :style="showMode === 'flag' ? { marginRight:'36px' } : {}"
+        :style="showMode === 'flag' ? { marginRight: '36px' } : {}"
     >
         <!-- <div class="DshDivider-cli">
-            <p>{{ controlName }}</p>
+            <p>{{ tagName }}</p>
         </div> -->
 
         <div
@@ -16,7 +16,7 @@
                 style="margin-top: -1px"
                 :custom="'bico-font ' + iconType"
             />
-            <p>{{ controlName }}</p>
+            <p>{{ tagName }}</p>
             <span class="triangle-topleft"></span>
             <span class="triangle-topright"></span>
         </div>
@@ -25,7 +25,7 @@
             v-else-if="showMode === 'line'"
             class="DshDivider-line"
         >
-            <p>{{ controlName }}</p>
+            <p>{{ tagName }}</p>
             <span></span>
         </div>
 
@@ -36,7 +36,7 @@
             <span class="DshDivider-circle-icon">
                 <Icon :custom="'bico-font ' + iconType" />
             </span>
-            <p>{{ controlName }}</p>
+            <p>{{ tagName }}</p>
         </div>
     </div>
 </template>
@@ -67,6 +67,10 @@
             },
             iconType () {
                 return this.selfPropsObj._tagIcon;
+            },
+
+            tagName () {
+                return this.controlName;
             }
         },
         created () {},
@@ -77,7 +81,7 @@
 <style lang="less">
     .DshDivider {
         margin-right: 20px;
-        font-family: SourceHanSansCN-Medium,SourceHanSansCN;
+        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
         font-weight: 500;
         font-size: 14px;
 
@@ -109,11 +113,11 @@
             height: 38px;
             margin-bottom: 4px;
             background: linear-gradient(57deg, @themeColor 0%, #85CBED 100%);
-            line-height:38px;
+            line-height: 38px;
             display: inline-flex;
             align-items: center;
             padding: 0 10px;
-            color:rgba(255,255,255,1);
+            color: rgba(255, 255, 255, 1);
             position: relative;
 
             .triangle-topleft {
@@ -148,9 +152,9 @@
             display: inline-flex;
             align-items: center;
             line-height: 32px;
-            color:rgba(255,255,255,1);
-            background:linear-gradient(270deg,rgba(166,215,250,1) 0%,rgba(109,174,242,1) 47%,rgba(109,174,242,1) 100%);
-            border-radius:16px;
+            color: rgba(255, 255, 255, 1);
+            background: linear-gradient(270deg, rgba(166, 215, 250, 1) 0%, rgba(109, 174, 242, 1) 47%, rgba(109, 174, 242, 1) 100%);
+            border-radius: 16px;
             padding: 0 20px;
 
             &-icon {
@@ -167,22 +171,22 @@
 
         &-line {
             color: @themeColor;
-            min-width:130px;
+            min-width: 130px;
             height: 32px;
             max-width: 100%;
             display: inline-block;
-            flex-direction:column;
+            flex-direction: column;
 
             p {
                 height: 32px;
                 line-height: 32px;
-                font-size:14px;
+                font-size: 14px;
             }
 
             span {
                 display: block;
                 width: 100%;
-                background:linear-gradient(270deg,rgba(166,215,250,0) 0%,rgba(109,174,242,1) 100%) bottom left no-repeat;
+                background: linear-gradient(270deg, rgba(166, 215, 250, 0) 0%, @themeColor 100%) bottom left no-repeat;
                 height: 1px;
                 position: relative;
                 &::before {
@@ -191,7 +195,7 @@
                     height: 5px;
                     position: absolute;
                     border-radius: 5px;
-                    background: #6DAEF2;
+                    background: @themeColor;
                     left: 0px;
                     top: -2px;
                 }

package/src/components/controls/base/DshNumber/BriInputNumber/BriInputNumber.vue

@@ -367,9 +367,9 @@
             },
             change (event) {
                 if (event.type == "change" && this.activeChange) {
-
+                    // 暂无处理
                 } else if (event.type == "input" && !this.activeChange) {
-
+                    // 暂无处理
                 } else {
                     let val = event.target.value.trim();
                     if (this.parser) {

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

@@ -18,6 +18,7 @@ export default {
         selfPropsObj () {
             return {
                 _subType: "default", // "default", "cross", "old"
+                _groupForm: [], // 多级表头
                 _subForm: [],
                 _treeForm: [],
                 _searchList: [], // 作为搜索的字段
@@ -46,12 +47,19 @@ export default {
         subType () {
             return this.selfPropsObj._subType;
         },
+        groupForm () {
+            return this.curVal && this.curVal._groupForm && this.curVal._groupForm.length
+                ? this.curVal._groupForm
+                : this.selfPropsObj._groupForm;
+        },
         subForm () {
-            return this.selfPropsObj._subForm;
+            return this.curVal && this.curVal._subForm && this.curVal._subForm.length
+                ? this.curVal._subForm
+                : this.selfPropsObj._subForm;
         },
         // 老版级联表格，用户态的每条数据的表头配置，都是存的自己的，不用配置里的_treeForm
         treeForm () {
-            return ["old"].includes(this.subType) && this.curVal && this.curVal._treeForm
+            return ["old"].includes(this.subType) && this.curVal && this.curVal._treeForm && this.curVal._treeForm.length
                 ? this.curVal._treeForm
                 : this.selfPropsObj._treeForm;
         },

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

@@ -15,6 +15,7 @@ export default {
     computed: {
         selfPropsObj () {
             return {
+                _groupForm: [], // 多级表头
                 _subForm: [],
                 _searchList: [], // 作为搜索的字段
                 _tableAdvSearch: {
@@ -33,8 +34,15 @@ export default {
                 }
             };
         },
+        groupForm () {
+            return this.curVal && this.curVal._groupForm && this.curVal._groupForm.length
+                ? this.curVal._groupForm
+                : this.selfPropsObj._groupForm;
+        },
         subForm () {
-            return this.selfPropsObj._subForm;
+            return this.curVal && this.curVal._subForm && this.curVal._subForm.length
+                ? this.curVal._subForm
+                : this.selfPropsObj._subForm;
         },
 
         searchList () {

package/src/components/controls/senior/cascaderTable.vue

@@ -35,6 +35,7 @@
                         :tableDataObj="curVal"
                         :data="curVal.tree"
                         :rowDefault="curVal.rowDefault"
+                        :gpColumns="groupForm"
                         :columns="subForm"
                         :treeColumns="treeForm"
                         :propsObj="{
@@ -58,6 +59,7 @@
                         :tableDataObj="curVal"
                         :data="curVal.tree"
                         :rowDefault="rowDefault"
+                        :gpColumns="groupForm"
                         :columns="subForm"
                         :treeColumns="treeForm"
                         :propsObj="{
@@ -84,6 +86,7 @@
                         :tableDataObj="curVal"
                         :data="curVal.tree"
                         :rowDefault="curVal.rowDefault"
+                        :gpColumns="groupForm"
                         :columns="subForm"
                         :treeColumns="treeForm"
                         :propsObj="defaultPropsObj"
@@ -104,6 +107,7 @@
                         :tableDataObj="curVal"
                         :data="curVal.tree"
                         :rowDefault="rowDefault"
+                        :gpColumns="groupForm"
                         :columns="subForm"
                         :treeColumns="treeForm"
                         :propsObj="defaultPropsObj"
@@ -124,6 +128,7 @@
                     :tableDataObj="curVal"
                     :data="curVal.tree"
                     :rowDefault="curVal.rowDefault"
+                    :gpColumns="groupForm"
                     :columns="subForm"
                     :treeColumns="treeForm"
                     :propsObj="selfPropsObj"
@@ -145,6 +150,7 @@
                     :tableDataObj="curVal"
                     :data="curVal.tree"
                     :rowDefault="rowDefault"
+                    :gpColumns="groupForm"
                     :columns="subForm"
                     :treeColumns="treeForm"
                     :propsObj="selfPropsObj"

package/src/components/controls/senior/flatTable.vue

@@ -33,6 +33,7 @@
                         :tableDataObj="curVal"
                         :data="curVal.list"
                         :rowDefault="curVal.rowDefault"
+                        :gpColumns="groupForm"
                         :columns="subForm"
                         :propsObj="{
                             ...propsObj,
@@ -55,6 +56,7 @@
                     :tableDataObj="curVal"
                     :data="curVal.list"
                     :rowDefault="curVal.rowDefault"
+                    :gpColumns="groupForm"
                     :columns="subForm"
                     :propsObj="defaultPropsObj"
                     :parentObj="value"
@@ -71,6 +73,7 @@
                 :tableDataObj="curVal"
                 :data="curVal.list"
                 :rowDefault="curVal.rowDefault"
+                :gpColumns="groupForm"
                 :columns="subForm"
                 :propsObj="propsObj"
                 :parentObj="value"

package/src/components/list/BriTable.vue

@@ -132,7 +132,7 @@
                         return {
                             click: (event) => {
                                 if (!["checkbox"].includes(column.type)) {
-                                    this.$emit("click-row", row, rowIndex, event);
+                                    this.$emit("click-row", row, rowIndex, column, event);
                                 }
                             },
                             dblclick: (event) => {

package/src/components/list/DshBox/DshSingleData.vue

@@ -80,8 +80,8 @@
                         ...operationItem,
                         ...(
                             operationItem.operationFunc
-                            ? operationItem.operationFunc(operationItem, this.formData, undefined, this.operationList)
-                            : {}
+                                ? operationItem.operationFunc(operationItem, this.formData, undefined, this.operationList)
+                                : {}
                         )
                     };
                 });

package/src/components/list/DshBox/DshTable.vue

@@ -86,8 +86,8 @@
                         style: {
                             ...(
                                 (operationItem._name_ || operationItem.name).split("/").length > 1
-                                ? { width: `${getOperationItemMaxWidth(operationItem)}px` }
-                                : {}
+                                    ? { width: `${getOperationItemMaxWidth(operationItem)}px` }
+                                    : {}
                             ),
                             ...(
                                 typeof operationItem.style === "object"
@@ -173,8 +173,8 @@
                                 ...operationItem,
                                 ...(
                                     operationItem.operationFunc
-                                    ? operationItem.operationFunc(operationItem, params.row, params.index, this.selfOperationList)
-                                    : {}
+                                        ? operationItem.operationFunc(operationItem, params.row, params.index, this.selfOperationList)
+                                        : {}
                                 )
                             };
                         });

package/src/components/list/mixins/DshCascaderTableMixin.js

@@ -41,7 +41,7 @@ export default {
         /* --- 列字段 --- */
         showColumns () {
             return [
-                ...this.$transformToColumns(this.showContentColumns),
+                ...this.groupColumns,
                 ...(!this.isSearching && this.rowOperationList.length ? [this.selfOperationColumn] : [])
             ];
         },

package/src/components/list/mixins/DshFlatTableMixin.js

@@ -68,7 +68,7 @@ export default {
             return [
                 ...(this.useSelection === true ? [this.selectionColumn] : []),
                 ...(this.useIndex === true ? [this.indexColumn] : []),
-                ...this.$transformToColumns(this.showContentColumns),
+                ...this.groupColumns,
                 ...(!this.isSearching && this.rowOperationList.length ? [this.operationColumn] : [])
             ];
         },

package/src/components/list/mixins/DshTreeTableMixin.js

@@ -22,7 +22,7 @@ export default {
             return [
                 this.expandColumn,
                 ...(this.useIndex === true ? [this.indexColumn] : []),
-                ...this.$transformToColumns(this.showContentColumns),
+                ...this.groupColumns,
                 ...(!this.isSearching && this.rowOperationList.length ? [this.operationColumn] : [])
             ];
         },

package/src/components/list/mixins/tableBaseMixin.js

@@ -32,6 +32,12 @@ export default {
                 return {};
             }
         },
+        gpColumns: {
+            type: Array,
+            default () {
+                return [];
+            }
+        },
         columns: {
             type: Array,
             default () {
@@ -258,7 +264,7 @@ export default {
 
                 _showRequired: true, // 表头显示校验符号*
                 _showDescription: true, // 表头显示提示
-                _contentHeight: 500, // 表格最大高度
+                _contentHeight: 800, // 表格最大高度
                 _headHeightAuto: false, // 表头高度自适应
                 _heightAuto: false, // 单元格高度自适应
                 _useIndex: true, // 使用序号列
@@ -334,7 +340,7 @@ export default {
         contentHeight () {
             return this.selfPropsObj._contentHeight === undefined
                 ? undefined
-                : this.selfPropsObj._contentHeight || 500;
+                : this.selfPropsObj._contentHeight || 800;
         },
         showRequired () {
             return this.selfPropsObj._showRequired;
@@ -494,6 +500,53 @@ export default {
                     : true
             );
         },
+        groupColumns () {
+            const loop = (gpCols = [], showContentCols = []) => {
+                return gpCols.reduce((newCols, gpCol) => [
+                    ...newCols,
+                    ...(
+                        typeof gpCol === "string"
+                            ? showContentCols.filter(colItem => colItem._key === gpCol)
+                            : [
+                                {
+                                    // title: gpCol._name,
+                                    field: gpCol._key,
+                                    key: gpCol._key,
+                                    align: gpCol._align || "center",
+                                    fixed: gpCol._fixed,
+                                    // width: gpCol._width,
+                                    ...this.$transformToColumns([gpCol], {
+                                        showRequired: this.showRequired,
+                                        showDescription: this.showDescription,
+                                        headHeightAuto: this.headHeightAuto
+                                    })[0],
+                                    ...(
+                                        // 循环子集
+                                        gpCol.children && gpCol.children.length
+                                            ? {
+                                                children: loop(gpCol.children, showContentCols)
+                                            }
+                                            : {}
+                                    )
+                                }
+                            ]
+                    )
+                ], []);
+            };
+
+            const gpColumns = this.gpColumns;
+            const showContentColumns = this.$transformToColumns(this.showContentColumns);
+            return gpColumns.length
+                ? loop(gpColumns, showContentColumns)
+                : showContentColumns;
+        },
+        // 会被各个mixin里的showColumns覆盖，这里是摆设
+        showColumns () {
+            return [
+                ...this.groupColumns,
+                ...(!this.isSearching && this.rowOperationList.length ? [this.operationColumn] : [])
+            ];
+        },
         selectionColumn () {
             return {
                 _key: "__selection__",
@@ -816,15 +869,12 @@ export default {
         // 共外部使用
         validate () {
             // this.showRuleMessage = true;
-            // return this.allListData.every((row, rowIndex) => this.getRowRuleResult(row, rowIndex));
 
+            // 不用every方法，为的是把所有的行都走一遍，校验显现出来
             let bool = true;
             this.allListData.forEach((row, rowIndex) => {
                 const resultBool = this.getRowRuleResult(row, rowIndex);
-
-                if (resultBool === false) {
-                    bool = false;
-                }
+                bool = bool && resultBool;
             });
 
             return bool;