bri-components 1.4.2 → 1.4.3

package/package.json

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

package/src/components/form/DshForm.vue

@@ -352,7 +352,8 @@
                 if (
                     ruleConfig.type &&
                     (!ruleConfig.fields || Object.entries(ruleConfig.fields).every(arr => !arr[1].transform)) &&
-                    (!["date"].includes(formItem._type) || !["daterange", "datetimerange"].includes(formItem._dateType))
+                    (!["date"].includes(formItem._type) || !["daterange", "datetimerange"].includes(formItem._dateType)) &&
+                    (!["select", "checkbox"].includes(formItem._type)) // 考虑到选项用数字类型时，应该type: "number"
                 ) {
                     rules.push({
                         message: `${formItem._name}数据格式有错!`,

package/src/components/list/DshFlatTable.vue

@@ -38,10 +38,10 @@
                 ></dsh-form>
 
                 <dsh-icons
-                    v-if="$getOperationList(['canCreate', 'canDelete']).length"
+                    v-if="$getOperationList(['canInsert', 'canDelete']).length"
                     class="item-icons"
                     itemClass="item-icons-item"
-                    :list="$getOperationList(['canCreate', 'canDelete'])"
+                    :list="$getOperationList(['canInsert', 'canDelete'])"
                     @click="$dispatchEvent($event, row, rowIndex)"
                 ></dsh-icons>
             </div>

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

@@ -199,16 +199,14 @@ export default {
                     on: {
                         mouseenter: (event) => {
                             this.$set(this.hoverRecordMap, `${row._id}`, true);
-                            // this.$set(this.hoverRecordMap, `${row._id}dsh${column._key}`, true);
                         },
                         mouseleave: (event) => {
                             this.$set(this.hoverRecordMap, `${row._id}`, false);
-                            // this.$set(this.hoverRecordMap, `${row._id}dsh${column._key}`, false);
                         }
                     }
                 },
                 column.colType === "summary"
-                    ? h("span", this.getSummaryTdVal(row, rowIndex, column))
+                    ? this.getSummaryTdVal(row, rowIndex, column)
                     : column.colType === "operation"
                         ? this.operationTdCellRender(h, { row, rowIndex, column })
                         : this.contentTdCellRender(h, { row, rowIndex, column })
@@ -326,7 +324,7 @@ export default {
                     colType: "data"
                 })),
                 ...(
-                    !this.isSearching && this.$getOperationList(["canDelete"]).length
+                    !this.isSearching && this.rowOperationList.length
                         ? [{
                             ...this.operationColumn,
                             nodeKey: treeForm[treeForm.length - 1]._key,

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

@@ -53,11 +53,7 @@ export default {
                 ...(this.useSelection === true ? [this.selectionColumn] : []),
                 ...(this.useIndex === true ? [this.indexColumn] : []),
                 ...this.$transformToColumns(this.contentColumns),
-                ...(
-                    !this.isSearching && this.$getOperationList(["canDelete"]).length
-                        ? [this.operationColumn]
-                        : []
-                )
+                ...(!this.isSearching && this.rowOperationList.length ? [this.operationColumn] : [])
             ];
         },
         indexColumn () {
@@ -90,8 +86,9 @@ export default {
             const list = this.data;
             const newRow = this.getNewRowData();
 
-            // 处理单元格合并相关（当前列是合并列，则该列之前的合并列，要复制这一行对应列的值；当前列是普通列，按该列前的最后合并列的操作处理）
+            // 处理单元格合并相关
             if (col) {
+                // 当前列是合并列，则该列之前的合并列，要复制这一行对应列的值；
                 if (this.mergeRowColKeys.includes(col._key)) {
                     const newList = this.allListData.slice(rowIndex); // 从该行开始截取
                     const nextRowIndex = this.$isEmptyData(row[col._key])
@@ -110,9 +107,13 @@ export default {
                             : obj;
                     }, newRow);
                 }
+                // 当前列是非合并列，按该列前的最后合并列的操作处理（操作列时，colIndex < 0）
                 else {
                     const colIndex = this.selfColumns.findIndex(column => column._key === col._key);
-                    const mergeRowColumns = this.selfColumns.filter((column, columnIndex) => columnIndex < colIndex && this.mergeRowColKeys.includes(column._key));
+                    const mergeRowColumns = this.selfColumns.filter((column, columnIndex) =>
+                        (colIndex < 0 ? true : columnIndex <= colIndex) &&
+                        this.mergeRowColKeys.includes(column._key)
+                    );
                     mergeRowColumns.slice(0, mergeRowColumns.length - 1).reduce((obj, column) => {
                         return Object.assign(obj, {
                             [column._key]: this.$deepCopy(row[column._key])
@@ -140,33 +141,33 @@ export default {
             });
         },
 
+        /* ----------- 方法 ---------- */
         bodyCellSpan ({ row, rowIndex, column }) {
+            rowIndex = this.showListData.findIndex(dataItem => dataItem._id === row._id);
+
             // 合并单元格（单元格值为空时不合并）
-            if (this.mergeRowColKeys.includes(column._key)) {
-                if (this.$isEmptyData(row[column._key])) {
+            if (
+                this.mergeRowColKeys.includes(column._key) &&
+                rowIndex > -1 &&
+                !this.$isEmptyData(row[column._key])
+            ) {
+                if (
+                    rowIndex !== 0 &&
+                    row[column._key] === this.showListData[rowIndex - 1][column._key]
+                ) {
+                    return {
+                        rowspan: 0,
+                        colspan: 0
+                    };
+                } else {
+                    const newList = this.showListData.slice(rowIndex);
+                    const newIndex = newList.findIndex(rowItem => row[column._key] !== rowItem[column._key]);
+
                     return {
-                        rowspan: 1,
+                        rowspan: newIndex === -1 ? newList.length : newIndex,
                         colspan: 1
                     };
                 }
-                else {
-                    if (
-                        rowIndex !== 0 &&
-                        row[column._key] === this.showListData[rowIndex - 1][column._key]
-                    ) {
-                        return {
-                            rowspan: 0,
-                            colspan: 0
-                        };
-                    } else {
-                        const newList = this.showListData.slice(rowIndex);
-                        const newIndex = newList.findIndex(rowItem => row[column._key] !== rowItem[column._key]);
-                        return {
-                            rowspan: newIndex === -1 ? newList.length : newIndex,
-                            colspan: 1
-                        };
-                    }
-                }
             }
         }
     }

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

@@ -52,11 +52,7 @@ export default {
                 this.expandColumn,
                 ...(this.useIndex === true ? [this.indexColumn] : []),
                 ...this.$transformToColumns(this.contentColumns),
-                ...(
-                    !this.isSearching && this.$getOperationList(["canDelete"]).length
-                        ? [this.operationColumn]
-                        : []
-                )
+                ...(!this.isSearching && this.rowOperationList.length ? [this.operationColumn] : [])
             ];
         },
         expandColumn () {
@@ -100,7 +96,7 @@ export default {
                 _key: "__treeIndex__",
                 key: "__treeIndex__",
                 field: "__treeIndex__",
-                width: 28 + 16 + (this.maxLevel - 1) * 38,
+                width: 28 + 16 + (this.maxLevel - 1) * 36,
                 align: "left",
                 fixed: "left",
                 renderBodyCell: ({ row, rowIndex, column }, h) => {

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

@@ -105,17 +105,28 @@ export default {
             baseOperationMap: {
                 canCreate: {
                     name: "添加一行",
+                    tip: "添加一行",
                     type: "canCreate",
                     btnType: "default",
                     icon: "md-add",
                     size: "default",
-                    color: "#3DB8C5",
                     long: true,
                     disabled: false,
                     event: "clickCreate"
                 },
+                canInsert: {
+                    name: "插入一行",
+                    tip: "插入一行",
+                    type: "canInsert",
+                    btnType: "primaryText",
+                    icon: "md-add",
+                    size: "small",
+                    disabled: false,
+                    event: "clickCreate"
+                },
                 canDelete: {
                     name: "删除",
+                    tip: "删除该行",
                     type: "canDelete",
                     btnType: "errorText",
                     icon: "md-trash",
@@ -501,8 +512,8 @@ export default {
                 align: "center",
                 _fixed: "right",
                 fixed: "right",
-                _width: 100,
-                width: 100,
+                _width: 210,
+                width: 210,
                 renderBodyCell: ({ row, rowIndex, column }, h) => {
                     return this.operationTdCellRender(h, { row, rowIndex, column });
                 }
@@ -619,8 +630,23 @@ export default {
                     ...this.baseOperationMap.canCreate,
                     name: this.showMode === "form"
                         ? this.baseOperationMap.canCreate.name.replace("行", "条")
-                        : this.baseOperationMap.canCreate.name
-                        // disabled: !!this.disabledCreateBtn
+                        : this.baseOperationMap.canCreate.name,
+                    tip: this.showMode === "form"
+                        ? this.baseOperationMap.canCreate.tip.replace("行", "条")
+                        : this.baseOperationMap.canCreate.tip
+                },
+                canInsert: {
+                    ...this.baseOperationMap.canInsert,
+                    name: this.showMode === "form"
+                        ? this.baseOperationMap.canInsert.name.replace("行", "条")
+                        : this.baseOperationMap.canInsert.name,
+                    tip: this.showMode === "form"
+                        ? this.baseOperationMap.canInsert.tip.replace("行", "条")
+                        : this.baseOperationMap.canInsert.tip,
+                    color: this.appColor
+                    // style: {
+                    //     color: this.appColor
+                    // }
                 },
                 canHideOrShow: {
                     ...this.topOperationMap.canHideOrShow,
@@ -651,6 +677,9 @@ export default {
                     ...(this.hideColKeys.length ? ["canHideOrShow"] : [])
                 ]
             );
+        },
+        rowOperationList () {
+            return this.$getOperationList(["canInsert", "canDelete"]);
         }
     },
     watch: {
@@ -1122,9 +1151,11 @@ export default {
             ];
         },
         operationTdCellRender (h, { row, rowIndex, column }) {
-            const operationList = this.$getOperationList(["canDelete"]).map(btnItem => ({
+            const operationList = this.rowOperationList.map(btnItem => ({
                 ...btnItem,
-                disabled: !this.getRowDelBtnCanEdit(row, rowIndex)
+                disabled: btnItem.type === "canDelete"
+                    ? !this.getRowDelBtnCanEdit(row, rowIndex)
+                    : btnItem.disabled
             }));
 
             return [
@@ -1134,7 +1165,7 @@ export default {
                     },
                     on: {
                         click: (operationItem) => {
-                            this.$dispatchEvent(operationItem, row, rowIndex);
+                            this.$dispatchEvent(operationItem, row, rowIndex, column);
                         }
                     }
                 })
@@ -1142,151 +1173,75 @@ export default {
         },
         operationIconRender (h, { row, rowIndex, column }, iconSize = 14) {
             const baseBool = !this.isSearching &&
-                (this.showCreateBtnColKeys.length ? this.showCreateBtnColKeys.includes(column._key) : ["__index__", "__treeIndex__"].includes(column._key)) &&
-                this.hoverRecordMap[`${row._id}`];
-            // this.hoverRecordMap[`${row._id}dsh${column._key}`]
+                (this.showCreateBtnColKeys.length ? this.showCreateBtnColKeys.includes(column._key) : ["__index__", "__treeIndex__"].includes(column._key));
+            // this.hoverRecordMap[`${row._id}`];
 
             return [
                 // 插入一行图标
-                (this.operationMap.canCreate && this.operationMap.canCreate.disabled !== true) &&
-                    baseBool
-                    ? h("div", {
-                        style: {
-                            position: "absolute",
-                            bottom: "0px",
-                            right: "0px",
-                            width: `${iconSize + 2}px`,
-                            height: `${iconSize + 2}px`,
-                            border: `1px solid ${this.appColor}`,
-                            borderRadius: "2px",
-                            backgroundColor: "#ffffff",
-                            lineHeight: `${iconSize - 2}px`,
-                            cursor: "pointer",
-                            verticalAlign: "middle",
-                            transition: "color .2s ease-in-out,border-color .2s ease-in-out"
-                        }
-                    }, [
-                        h("Tooltip", {
-                            props: {
-                                content: "插入一行",
-                                maxWidth: "250",
-                                transfer: true
-                            }
-                        }, [
-                            h("Icon", {
-                                style: {
-                                    fontWeight: "500",
-                                    color: this.appColor
-                                },
-                                props: {
-                                    type: this.operationMap.canCreate.icon,
-                                    size: iconSize
-                                },
-                                on: {
-                                    click: () => {
-                                        this.$dispatchEvent(this.operationMap.canCreate, row, rowIndex, column);
-                                    }
-                                }
-                            })
-                        ])
-                    ])
+                baseBool
+                    ? this.getOperationIconRender(h, { row, rowIndex, column }, "canInsert", iconSize)
                     : h("span", ""),
 
                 // 添加一行下级图标
-                (this.operationMap.canCreateChild && this.operationMap.canCreateChild.disabled !== true) &&
-                    baseBool &&
+                baseBool &&
                     row.level < this.maxLevel &&
                     !["cascaderTable"].includes(this.inTableType) // 老版级联表格类型不要“添加下级”图标
-                    ? h("div", {
-                        style: {
-                            position: "absolute",
-                            bottom: "0px",
-                            right: `${iconSize + 3}px`,
-                            display: "inline-block",
-                            width: `${iconSize + 2}px`,
-                            height: `${iconSize + 2}px`,
-                            border: `1px solid ${this.appColor}`,
-                            borderRadius: "2px",
-                            backgroundColor: "#ffffff",
-                            lineHeight: `${iconSize - 2}px`,
-                            cursor: "pointer",
-                            verticalAlign: "middle",
-                            transition: "color .2s ease-in-out,border-color .2s ease-in-out"
-                        }
-                    }, [
-                        h("Tooltip", {
-                            props: {
-                                content: "添加下级",
-                                maxWidth: "250",
-                                transfer: true
-                            }
-                        }, [
-                            h("Icon", {
-                                style: {
-                                    fontWeight: "500",
-                                    color: this.appColor
-                                },
-                                props: {
-                                    type: this.operationMap.canCreateChild.icon,
-                                    size: iconSize
-                                },
-                                on: {
-                                    click: () => {
-                                        this.$dispatchEvent(this.operationMap.canCreateChild, row, rowIndex);
-                                    }
-                                }
-                            })
-                        ])
-                    ])
+                    ? this.getOperationIconRender(h, { row, rowIndex, column }, "canCreateChild", iconSize, true)
                     : h("span", ""),
 
                 // 删除该行图标
-                (this.operationMap.canDelete && this.operationMap.canDelete.disabled !== true) &&
-                    baseBool &&
+                baseBool &&
                     this.getRowDelBtnCanEdit(row, rowIndex) &&
                     ["cascaderTable"].includes(this.inTableType)
-                    ? h("div", {
-                        style: {
-                            position: "absolute",
-                            bottom: "0px",
-                            right: `${iconSize + 3}px`,
-                            width: `${iconSize + 2}px`,
-                            height: `${iconSize + 2}px`,
-                            border: `1px solid ${this.operationMap.canDelete.color}`,
-                            borderRadius: "2px",
-                            backgroundColor: "#ffffff",
-                            lineHeight: `${iconSize - 2}px`,
-                            cursor: "pointer",
-                            verticalAlign: "middle",
-                            transition: "color .2s ease-in-out,border-color .2s ease-in-out"
+                    ? this.getOperationIconRender(h, { row, rowIndex, column }, "canDelete", iconSize, true)
+                    : h("span", "")
+            ];
+        },
+        getOperationIconRender (h, { row, rowIndex, column }, operationType, iconSize = 14, isLeft = false) {
+            const operationItem = this.operationMap[operationType];
+
+            return operationItem && operationItem.disabled !== true
+                ? h("div", {
+                    style: {
+                        position: "absolute",
+                        bottom: "0px",
+                        right: isLeft ? `${iconSize + 3}px` : "0px",
+                        width: `${iconSize + 2}px`,
+                        height: `${iconSize + 2}px`,
+                        border: `1px solid ${operationItem.color}`,
+                        borderRadius: "2px",
+                        backgroundColor: "#ffffff",
+                        lineHeight: `${iconSize - 2}px`,
+                        cursor: "pointer",
+                        verticalAlign: "middle",
+                        transition: "color .2s ease-in-out,border-color .2s ease-in-out"
+                    }
+                }, [
+                    h("Tooltip", {
+                        props: {
+                            content: operationItem.tip,
+                            maxWidth: "250",
+                            transfer: true
                         }
                     }, [
-                        h("Tooltip", {
+                        h("Icon", {
+                            style: {
+                                fontWeight: "500",
+                                color: operationItem.color
+                            },
                             props: {
-                                content: "删除该行",
-                                maxWidth: "250",
-                                transfer: true
-                            }
-                        }, [
-                            h("Icon", {
-                                style: {
-                                    fontWeight: "500",
-                                    color: this.operationMap.canDelete.color
-                                },
-                                props: {
-                                    type: this.operationMap.canDelete.icon,
-                                    size: iconSize
-                                },
-                                on: {
-                                    click: () => {
-                                        this.$dispatchEvent(this.operationMap.canDelete, row, rowIndex, column);
-                                    }
+                                type: operationItem.icon,
+                                size: iconSize
+                            },
+                            on: {
+                                click: () => {
+                                    this.$dispatchEvent(operationItem, row, rowIndex, column);
                                 }
-                            })
-                        ])
+                            }
+                        })
                     ])
-                    : h("span", "")
-            ];
+                ])
+                : h("span", "");
         },
         bodyCellClass ({ row, rowIndex, column }) {
             return "bri-table-td" +
@@ -1326,11 +1281,9 @@ export default {
                 },
                 mouseenter: (event) => {
                     this.$set(this.hoverRecordMap, `${row._id}`, true);
-                    // this.$set(this.hoverRecordMap, `${row._id}dsh${column._key}`, true);
                 },
                 mouseleave: (event) => {
                     this.$set(this.hoverRecordMap, `${row._id}`, false);
-                    // this.$set(this.hoverRecordMap, `${row._id}dsh${column._key}`, false);
                 }
             };
         },
@@ -1389,10 +1342,9 @@ export default {
         },
         // 行按钮是否可操作（删除按钮可编辑 不代表行内容是可编辑的）
         getRowDelBtnCanEdit (row, rowIndex) {
-            return this.canEdit && // 是编辑状态
+            return row.__readonly__ !== true && // 不能为只读数据
                 (this.disabledDeleteDftRow ? row.__isDefault__ !== true : true) && // 默认数据可删除
-                (this.disabledDeleteOldRow ? row.__old__ !== true : true) && // 老数据可删除
-                row.__readonly__ !== true; // 不能为只读数据
+            (this.disabledDeleteOldRow ? row.__old__ !== true : true); // 老数据可删除
         },
         // 行内容是否可编辑
         getRowCanEdit (row, rowIndex) {
@@ -1444,28 +1396,28 @@ export default {
         },
         // 列本身是否可编辑
         getColCanEdit (row, rowIndex, col) {
-            return (
-                ["treeTable"].includes(this.inTableType) && ["number", "date"].includes(col._type)
-                    ? col._summaryType
-                        ? row.isLeaf === true
-                        : ["downToUp", "upToDown"].includes(col._writeSort)
-                            ? col._noLimitWrite === true
-                                ? true
-                                : ["downToUp"].includes(col._writeSort)
-                                    ? !(row.children && row.children.length) || row.children.every(sonRow => !this.$isEmptyData(sonRow[col._key]))
-                                    : row.level === 1 || !this.$isEmptyData(this.getParentRow(row, this.data)[col._key])
-                            : true
-                    : true
-            ) &&
-                !(["cascaderTable"].includes(this.controlType) && ["level", "children"].includes(col._key)) && // 层级表格的固定字段不可编辑
-                (col._oldReadonly ? row.__old__ !== true : true) && // 某些列在老数据行里不可编辑
+            return (col._oldReadonly ? row.__old__ !== true : true) && // 某些列在老数据行里不可编辑
                 (this.getIsDftRow(row) ? !this.dftReadonlyColKeys.includes(col._key) : true) && // 默认行的某列是否可编辑
                 (row.__old__ === true ? !this.oldReadonlyColKeys.includes(col._key) : true) && // 老数据行里某些列不可编辑
                 (row.__isQuote__ ? !this.quoteReadonlyColKeys.includes(col._key) : true) && // 引用过来的数据是否可编辑
-                !["calculate"].includes(col._enterType) && // 计算的不可编辑
+                (!this.getTypeColCanEdit || this.getTypeColCanEdit(row, rowIndex, col)) &&
+                (
+                    ["treeTable"].includes(this.inTableType) && ["number", "date"].includes(col._type)
+                        ? col._summaryType
+                            ? row.isLeaf === true
+                            : ["downToUp", "upToDown"].includes(col._writeSort)
+                                ? col._noLimitWrite === true
+                                    ? true
+                                    : ["downToUp"].includes(col._writeSort)
+                                        ? !(row.children && row.children.length) || row.children.every(sonRow => !this.$isEmptyData(sonRow[col._key]))
+                                        : row.level === 1 || !this.$isEmptyData(this.getParentRow(row, this.data)[col._key])
+                                : true
+                        : true
+                ) &&
+                !(["cascaderTable"].includes(this.controlType) && ["level", "children"].includes(col._key)) && // 层级表格的固定字段不可编辑
+                col._enterType !== "calculate" && // 计算的不可编辑
                 col._readonly !== true && // 只读
-                col.canEdit !== false && // 字段本身编辑权限 考虑为undefined时候
-            (!this.getTypeColCanEdit || this.getTypeColCanEdit(row, rowIndex, col));
+                col.canEdit !== false; // 字段本身编辑权限 考虑为undefined时候
         },
         // 单元格最终编辑状态
         getUnitCanEdit (row, rowIndex, col) {

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

@@ -10,12 +10,12 @@ export default {
 
             baseOperationMap: {
                 canCreateChild: {
-                    name: "添加一行下级",
+                    name: "添加下级",
+                    tip: "添加一行下级",
                     type: "canCreateChild",
-                    btnType: "default",
+                    btnType: "primaryText",
                     icon: "md-add-circle",
-                    size: "default",
-                    color: "#3DB8C5",
+                    size: "small",
                     disabled: false,
                     event: "clickCreateChild"
                 }
@@ -70,8 +70,14 @@ export default {
                     ...this.baseOperationMap.canCreateChild,
                     name: this.showMode === "form"
                         ? this.baseOperationMap.canCreateChild.name.replace("行", "条")
-                        : this.baseOperationMap.canCreateChild.name
-                        // disabled: !!this.disabledCreateBtn
+                        : this.baseOperationMap.canCreateChild.name,
+                    tip: this.showMode === "form"
+                        ? this.baseOperationMap.canCreateChild.tip.replace("行", "条")
+                        : this.baseOperationMap.canCreateChild.tip,
+                    color: this.appColor
+                    // style: {
+                    //     color: this.appColor
+                    // }
                 }
             };
         }

package/src/components/other/BriCollapseTree.vue

@@ -12,7 +12,7 @@
                     :accordion="listItem._accordion"
                     :simple="listItem._simple === false ? false : true"
                     :hide-arrow="true"
-                    :value="listItem.expansion && [listItem._key]"
+                    :value="listItem.expansion ? [listItem._key] : []"
                 >
                     <Panel :name="listItem._key">
                         <div
@@ -70,7 +70,10 @@
                                 {{ listItem._simpleDescription }}
                             </span>
                         </Tooltip>
-                        <span v-else class="BriCollapseTree-listItem-rightText">{{ listItem._simpleDescription }}</span>
+                        <span
+                            v-else
+                            class="BriCollapseTree-listItem-rightText"
+                        >{{ listItem._simpleDescription }}</span>
                     </div>
                 </div>
             </li>