bri-components 1.3.98 → 1.4.1

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

@@ -45,6 +45,12 @@ export default {
                 return {};
             }
         },
+        tableDataObj: {
+            type: Object,
+            default () {
+                return {};
+            }
+        },
 
         allFormList: {
             type: Array,
@@ -108,41 +114,21 @@ export default {
                     disabled: false,
                     event: "clickCreate"
                 },
-                canCreateChild: {
-                    name: "添加一行下级",
-                    type: "canCreateChild",
-                    btnType: "default",
-                    icon: "md-add-circle",
-                    size: "default",
-                    color: "#3DB8C5",
-                    disabled: false,
-                    event: "clickCreateChild"
-                },
                 canDelete: {
                     name: "删除",
                     type: "canDelete",
                     btnType: "errorText",
-                    icon: "ios-trash-outline",
+                    icon: "md-trash",
                     size: "small",
                     color: "#E83636",
                     disabled: false,
                     event: "clickDelete"
-                },
-                canDeleteChilds: {
-                    name: "删除所有子级",
-                    type: "canDeleteChilds",
-                    btnType: "errorText",
-                    icon: "ios-trash-outline",
-                    size: "small",
-                    color: "#E83636",
-                    disabled: false,
-                    event: "clickDeleteChilds"
                 }
             },
             otherOperationMap: {
-                changeVal: {
+                canChangeVal: {
                     name: "改变输入框值",
-                    type: "changeVal",
+                    type: "canChangeVal",
                     event: "changeVal"
                 }
             },
@@ -231,15 +217,15 @@ export default {
 
                 _showRequired: true, // 表头显示校验符号*
                 _showDescription: true, // 表头显示提示
+                _contentHeight: 500, // 表格最大高度
                 _headHeightAuto: false, // 表头高度自适应
                 _heightAuto: false, // 单元格高度自适应
                 _useSelection: false, // 使用选择列 -配置端暂时用不到
                 _useIndex: true, // 使用序号列
                 _useSummary: false, // 使用汇总行
-                _mergeRowColKeys: [], // 合并行的列
 
                 _disabledBtns: false, // 禁用增删按钮
-                _showCreateBtnColKeys: [], // 显示添加图标的列
+                _showCreateBtnColKeys: [], // 显示增删图标的列
                 _disabledFootCreateBtn: false, // 禁用底部新增按钮
                 _disabledDeleteDftRow: false, // 默认的数据行禁止删除
                 _disabledDeleteOldRow: false, // 保存的数据行禁止删除
@@ -271,9 +257,9 @@ export default {
                     list: [],
                     tree: []
                 },
+                ...(this.selfBasePropsObj || {}),
 
-                ...this.propsObj,
-                _contentHeight: this.propsObj._contentHeight || 500 // 表格最大高度
+                ...this.propsObj
             };
         },
         selfPropsObj () {
@@ -297,7 +283,7 @@ export default {
         },
 
         contentHeight () {
-            return this.selfPropsObj._contentHeight;
+            return this.selfPropsObj._contentHeight || 500;
         },
         showRequired () {
             return this.selfPropsObj._showRequired;
@@ -320,15 +306,12 @@ export default {
         useSummary () {
             return this.selfPropsObj._useSummary;
         },
-        mergeRowColKeys () {
-            return this.selfPropsObj._mergeRowColKeys || []; // 配置端有问题，高级以依赖时候值成undefined了
-        },
 
         disabledBtns () {
             return this.isDftSet ? false : this.selfPropsObj._disabledBtns;
         },
         showCreateBtnColKeys () {
-            return this.selfPropsObj._showCreateBtnColKeys || []; // 配置端有问题，高级以依赖时候值成undefined了
+            return this.selfPropsObj._showCreateBtnColKeys || []; // 配置端有问题，高级依赖时值成undefined了
         },
         disabledFootCreateBtn () {
             return this.isDftSet ? false : this.selfPropsObj._disabledFootCreateBtn;
@@ -344,13 +327,13 @@ export default {
             return this.isDftSet ? false : this.selfPropsObj._dftReadonly;
         },
         dftReadonlyColKeys () {
-            return this.isDftSet ? [] : this.selfPropsObj._dftReadonlyColKeys || []; // 配置端有问题，高级以依赖时候值成undefined了
+            return this.isDftSet ? [] : this.selfPropsObj._dftReadonlyColKeys || []; // 配置端有问题，高级依赖时值成undefined了
         },
         oldReadonly () {
             return this.isDftSet ? false : this.selfPropsObj._oldReadonly;
         },
         oldReadonlyColKeys () {
-            return this.isDftSet ? [] : this.selfPropsObj._oldReadonlyColKeys || []; // 配置端有问题，高级以依赖时候值成undefined了
+            return this.isDftSet ? [] : this.selfPropsObj._oldReadonlyColKeys || []; // 配置端有问题，高级依赖时值成undefined了
         },
 
         searchLabelWidth () {
@@ -444,14 +427,14 @@ export default {
         parentDataId () {
             return this.parentObj._id;
         },
-        selfRowDefault () {
+        selfRowDft () {
             return this.selfColumns.reduce((obj, column) => {
                 const dftInRowVal = this.rowDefault[column._key];
                 const dftVal = column._default;
                 const initDftVal = this.initDftValMap[column._type];
 
                 return Object.assign(obj, {
-                    [column._key]: dftInRowVal === undefined
+                    [column._key]: this.$isEmptyData(dftInRowVal)
                         ? this.$isEmptyData(dftVal)
                             ? initDftVal
                             : dftVal
@@ -473,9 +456,6 @@ export default {
         selfColumns () {
             return this.columns;
         },
-        mergeRowColumns () {
-            return this.selfColumns.filter(colItem => this.mergeRowColKeys.includes(colItem._key));
-        },
         filterColumns () {
             return this.selfColumns.filter(colItem => this.$isAdvRelyShow(colItem, this.allListData, this.parentObj, true));
         },
@@ -516,25 +496,14 @@ export default {
                 _key: "__operation__",
                 key: "__operation__",
                 field: "__operation__",
+                _align: "center",
                 align: "center",
+                _fixed: "right",
                 fixed: "right",
+                _width: 100,
                 width: 100,
                 renderBodyCell: ({ row, rowIndex, column }, h) => {
-                    const operationList = this.$getOperationList(["canDelete"]);
-
-                    return h("dsh-buttons", {
-                        props: {
-                            list: operationList.map(btnItem => ({
-                                ...btnItem,
-                                disabled: !this.getRowBtnCanEdit(row, rowIndex)
-                            }))
-                        },
-                        on: {
-                            click: (operationItem) => {
-                                this.$dispatchEvent(operationItem, row, rowIndex);
-                            }
-                        }
-                    });
+                    return this.operationTdCellRender(h, { row, rowIndex, column });
                 }
             };
         },
@@ -551,89 +520,14 @@ export default {
                 columnHiddenOption: {
                     defaultHiddenColumnKeys: [...this.hideColKeys] // 必须这么写，不解构，切换一次隐藏／显示后，hideColKeys会变成空数组
                 },
-                cellStyleOption: this.cellStyleOption,
+                cellStyleOption: {
+                    bodyCellClass: this.bodyCellClass
+                },
                 cellSpanOption: {
-                    bodyCellSpan: ({ row, rowIndex, column }) => {
-                        // 合并单元格（单元格值为空时不合并）
-                        if (this.mergeRowColKeys.includes(column._key)) {
-                            if (this.$isEmptyData(row[column._key])) {
-                                return {
-                                    rowspan: 1,
-                                    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
-                                    };
-                                }
-                            }
-                        }
-                    }
+                    bodyCellSpan: this.bodyCellSpan
                 },
                 eventCustomOption: {
-                    bodyCellEvents: ({ row, rowIndex, column }) => {
-                        return {
-                            click: (event) => {
-                                // console.log("click::", row, rowIndex, column, event);
-                            },
-                            dblclick: (event) => {
-                                // console.log("dblclick::", row, rowIndex, column, event);
-                            },
-                            contextmenu: (event) => {
-                                // console.log("contextmenu::", row, rowIndex, column, event);
-                            },
-                            mouseenter: (event) => {
-                                this.$set(this.hoverRecordMap, `${row._id}dsh${column._key}`, true);
-                            },
-                            mouseleave: (event) => {
-                                this.$set(this.hoverRecordMap, `${row._id}dsh${column._key}`, false);
-                            }
-                        };
-                    }
-                }
-            };
-        },
-        cellStyleOption () {
-            return {
-                bodyCellClass: ({ row, rowIndex, column }) => {
-                    return "bri-table-td" +
-                        `${this.mergeRowColKeys.includes(column._key)
-                            ? " bri-table-td-merge"
-                            : ""
-                        }` +
-                        `${this.getRowCanEdit(row, rowIndex)
-                            ? " bri-table-td-edit"
-                            : ""
-                        }` +
-                        `${this.isSearching
-                            ? row.__isSearchShow__ === false
-                                ? " bri-table-td-hide"
-                                : ""
-                            : row.__isShow__ === true
-                                ? this.isExpandAction
-                                    ? " bri-table-td-visible"
-                                    : ""
-                                : " bri-table-td-hide"
-                        }` +
-                        `${["__isExpand__"].includes(column._key)
-                            ? " bri-table-td-expand"
-                            : ["__index__"].includes(column._key)
-                                ? " bri-table-td-index"
-                                : ""
-                        }`;
+                    bodyCellEvents: this.eventCustomOption
                 }
             };
         },
@@ -724,17 +618,12 @@ export default {
                         : this.baseOperationMap.canCreate.name
                         // disabled: !!this.disabledCreateBtn
                 },
-                canCreateChild: {
-                    ...this.baseOperationMap.canCreateChild,
-                    name: this.showMode === "form"
-                        ? this.baseOperationMap.canCreateChild.name.replace("行", "条")
-                        : this.baseOperationMap.canCreateChild.name
-                        // disabled: !!this.disabledCreateBtn
-                },
                 canHideOrShow: {
                     ...this.topOperationMap.canHideOrShow,
                     name: this.hideStatus ? "显示字段" : "隐藏字段"
-                }
+                },
+
+                ...(this.selfAllOperationMap || {})
             };
         },
         operationMap () {
@@ -818,6 +707,9 @@ export default {
             this.$set(this.ruleRecordMap, `${row._id}dsh${col._key}`, { showRuleMessage: true });
             this.change("changeVal", row, rowIndex, col, ...params);
         },
+        change (eventType, row, rowIndex, col, ...params) {
+            this.$emit("change", this.tableDataObj, eventType, col, row, rowIndex, ...params);
+        },
 
         /* ----------- 隐藏／显示字段 ---------- */
         toggleHideOrShow () {
@@ -990,7 +882,7 @@ export default {
                         window.location.href = data.url;
                     } else if (data.status === "failed") {
                         this.$Message.info({
-                            content: "操作失败，请稍后再试"
+                            content: "操作失败，请稍后再试！"
                         });
                     }
                 },
@@ -1069,6 +961,7 @@ export default {
                                 "font-weight": "500"
                             }
                         }, this.selfLogicPropsObj._name + "："),
+
                         h("dsh-select", {
                             style: {
                                 "margin-left": "8px",
@@ -1104,6 +997,24 @@ export default {
                 }
             });
         },
+        createBtnRender (h) {
+            return !this.isSearching && this.disabledFootCreateBtn !== true
+                ? h("dsh-buttons", {
+                    style: {
+                        "margin-top": "3px"
+                    },
+                    props: {
+                        itemClass: undefined,
+                        list: this.$getOperationList(["canCreate"])
+                    },
+                    on: {
+                        click: (event) => {
+                            this.$dispatchEvent(event);
+                        }
+                    }
+                })
+                : undefined;
+        },
         contentThCellRender (h, { column }) {
             column = this.$transformDynamicProperty(column, undefined, this.parentObj);
 
@@ -1138,7 +1049,18 @@ export default {
                                 props: {
                                     canEdit: unitCanEdit,
                                     formData: row,
-                                    formItem: column,
+                                    formItem: {
+                                        ...column,
+                                        ...(
+                                            column.colType === "tree"
+                                                ? {
+                                                    _key: "name",
+                                                    _heightAuto: true,
+                                                    _placeholder: " "
+                                                }
+                                                : column
+                                        )
+                                    },
                                     allFormList: this.selfColumns,
                                     inTableType: this.inTableType,
                                     allListRows: this.allListData,
@@ -1148,7 +1070,7 @@ export default {
                                 },
                                 on: {
                                     blur: () => this.controlBlur(null, row, rowIndex, column, arguments),
-                                    change: () => this.$dispatchEvent(this.operationMap.changeVal, row, rowIndex, column, arguments)
+                                    change: () => this.$dispatchEvent(this.operationMap.canChangeVal, row, rowIndex, column, arguments)
                                 }
                             })
                         }
@@ -1157,7 +1079,18 @@ export default {
                         props: {
                             canEdit: unitCanEdit,
                             formData: row,
-                            formItem: column,
+                            formItem: {
+                                ...column,
+                                ...(
+                                    column.colType === "tree"
+                                        ? {
+                                            _key: "name",
+                                            _heightAuto: true,
+                                            _placeholder: " "
+                                        }
+                                        : column
+                                )
+                            },
                             allFormList: this.selfColumns,
                             inTableType: this.inTableType,
                             allListRows: this.allListData,
@@ -1167,7 +1100,7 @@ export default {
                         },
                         on: {
                             blur: () => this.controlBlur(null, row, rowIndex, column, arguments),
-                            change: () => this.$dispatchEvent(this.operationMap.changeVal, row, rowIndex, column, arguments)
+                            change: () => this.$dispatchEvent(this.operationMap.canChangeVal, row, rowIndex, column, arguments)
                         }
                     }),
 
@@ -1179,34 +1112,38 @@ export default {
                     : undefined,
 
                 // 添加符
-                ...this.createIconRender(h, { row, rowIndex, column }, 12)
+                ...this.operationIconRender(h, { row, rowIndex, column }, 12)
             ];
         },
-        createBtnRender (h) {
-            return !this.isSearching && this.disabledFootCreateBtn !== true
-                ? h("dsh-buttons", {
-                    style: {
-                        "margin-top": "3px"
-                    },
+        operationTdCellRender (h, { row, rowIndex, column }) {
+            const operationList = this.$getOperationList(["canDelete"]).map(btnItem => ({
+                ...btnItem,
+                disabled: !this.getRowDelBtnCanEdit(row, rowIndex)
+            }));
+
+            return [
+                h("dsh-buttons", {
                     props: {
-                        itemClass: undefined,
-                        list: this.$getOperationList(["canCreate"])
+                        list: operationList
                     },
                     on: {
-                        click: (event) => {
-                            this.$dispatchEvent(event);
+                        click: (operationItem) => {
+                            this.$dispatchEvent(operationItem, row, rowIndex);
                         }
                     }
                 })
-                : undefined;
+            ];
         },
-        createIconRender (h, { row, rowIndex, column }, iconSize = 14) {
+        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}`]
+
             return [
-                // 插入一行添加符
+                // 插入一行图标
                 (this.operationMap.canCreate && this.operationMap.canCreate.disabled !== true) &&
-                    !this.isSearching &&
-                    (column._key === "__index__" ? !this.showCreateBtnColKeys.length : this.showCreateBtnColKeys.includes(column._key)) &&
-                    this.hoverRecordMap[`${row._id}dsh${column._key}`]
+                    baseBool
                     ? h("div", {
                         style: {
                             position: "absolute",
@@ -1215,6 +1152,7 @@ export default {
                             width: `${iconSize + 2}px`,
                             height: `${iconSize + 2}px`,
                             border: `1px solid ${this.appColor}`,
+                            borderRadius: "2px",
                             backgroundColor: "#ffffff",
                             lineHeight: `${iconSize - 2}px`,
                             cursor: "pointer",
@@ -1248,13 +1186,11 @@ export default {
                     ])
                     : h("span", ""),
 
-                // 添加一行下级添加符
-                ["treeTable"].includes(this.inTableType) &&
-                    (this.operationMap.canCreateChild && this.operationMap.canCreateChild.disabled !== true) &&
-                    !this.isSearching &&
-                    (column._key === "__index__" ? !this.showCreateBtnColKeys.length : this.showCreateBtnColKeys.includes(column._key)) &&
-                    this.hoverRecordMap[`${row._id}dsh${column._key}`] &&
-                    row.level < this.maxLevel
+                // 添加一行下级图标
+                (this.operationMap.canCreateChild && this.operationMap.canCreateChild.disabled !== true) &&
+                    baseBool &&
+                    row.level < this.maxLevel &&
+                    !["cascaderTable"].includes(this.inTableType) // 老版级联表格类型不要“添加下级”图标
                     ? h("div", {
                         style: {
                             position: "absolute",
@@ -1264,6 +1200,7 @@ export default {
                             width: `${iconSize + 2}px`,
                             height: `${iconSize + 2}px`,
                             border: `1px solid ${this.appColor}`,
+                            borderRadius: "2px",
                             backgroundColor: "#ffffff",
                             lineHeight: `${iconSize - 2}px`,
                             cursor: "pointer",
@@ -1280,7 +1217,7 @@ export default {
                         }, [
                             h("Icon", {
                                 style: {
-                                    fontWeight: "600",
+                                    fontWeight: "500",
                                     color: this.appColor
                                 },
                                 props: {
@@ -1295,27 +1232,114 @@ export default {
                             })
                         ])
                     ])
+                    : h("span", ""),
+
+                // 删除该行图标
+                (this.operationMap.canDelete && this.operationMap.canDelete.disabled !== true) &&
+                    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"
+                        }
+                    }, [
+                        h("Tooltip", {
+                            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);
+                                    }
+                                }
+                            })
+                        ])
+                    ])
                     : h("span", "")
             ];
         },
+        bodyCellClass ({ row, rowIndex, column }) {
+            return "bri-table-td" +
+                `${this.mergeRowColKeys && this.mergeRowColKeys.includes(column._key)
+                    ? " bri-table-td-merge"
+                    : ""
+                }` +
+                `${["__isExpand__"].includes(column._key)
+                    ? " bri-table-td-expand"
+                    : ["__treeIndex__"].includes(column._key)
+                        ? " bri-table-td-treeIndex"
+                        : this.getRowCanEdit(row, rowIndex)
+                            ? " bri-table-td-edit"
+                            : ""
+                }` +
+                `${this.isSearching
+                    ? row.__isSearchShow__ === false
+                        ? " bri-table-td-hide"
+                        : ""
+                    : row.__isShow__ === true
+                        ? this.isExpandAction
+                            ? " bri-table-td-visible"
+                            : ""
+                        : " bri-table-td-hide"
+                }`;
+        },
+        eventCustomOption ({ row, rowIndex, column }) {
+            return {
+                click: (event) => {
+                    // console.log("click::", row, rowIndex, column, event);
+                },
+                dblclick: (event) => {
+                    // console.log("dblclick::", row, rowIndex, column, event);
+                },
+                contextmenu: (event) => {
+                    // console.log("contextmenu::", row, rowIndex, column, event);
+                },
+                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);
+                }
+            };
+        },
 
         /* ----------- 方法 ---------- */
         // 生成新的一行数据
         getNewRowData (level, list) {
             if (["cascaderTable"].includes(this.controlType)) {
                 return {
-                    ...this.$deepCopy(this.selfRowDefault),
+                    ...this.$deepCopy(this.selfRowDft),
+                    ...(this.getRowOtherDft ? this.$deepCopy(this.getRowOtherDft(level, list)) : {}),
                     _id: this.$ObjectID().str,
                     level: level,
                     isLeaf: true,
                     children: [],
-                    ...(
-                        ["treeTable"].includes(this.inTableType)
-                            ? {}
-                            : {
-                                name: `${this.$numToChinese(level)}级节点${list.length + 1}`
-                            }
-                    ),
                     // __old__: false,
                     __isDefault__: this.isDftSet,
                     __isRendered__: true,
@@ -1326,7 +1350,7 @@ export default {
                 };
             } else {
                 return {
-                    ...this.$deepCopy(this.selfRowDefault),
+                    ...this.$deepCopy(this.selfRowDft),
                     _id: this.$ObjectID().str,
                     // __old__: false,
                     __isDefault__: this.isDftSet,
@@ -1358,7 +1382,7 @@ export default {
             return this.isDftSet ? false : row.__isDefault__;
         },
         // 行按钮是否可操作（删除按钮可编辑 不代表行内容是可编辑的）
-        getRowBtnCanEdit (row, rowIndex) {
+        getRowDelBtnCanEdit (row, rowIndex) {
             return this.canEdit && // 是编辑状态
                 (this.disabledDeleteDftRow ? row.__isDefault__ !== true : true) && // 默认数据可删除
                 (this.disabledDeleteOldRow ? row.__old__ !== true : true) && // 老数据可删除
@@ -1406,18 +1430,9 @@ export default {
         },
         // 加工单元格对应的配置
         getResetCol (row, rowIndex, col) {
-            let resetMap = {
-                select: {
-                    _optionKind: "dropdown"
-                },
-                checkbox: {
-                    _optionKind: "dropdown"
-                }
-            };
             return {
-                ...col,
-                ...(resetMap[col._type] || {}),
                 // isShare: this.isShare,
+                ...col,
                 _heightAuto: this.heightAuto
             };
         },
@@ -1443,7 +1458,8 @@ export default {
                 (row.__isQuote__ ? !this.quoteReadonlyColKeys.includes(col._key) : true) && // 引用过来的数据是否可编辑
                 !["calculate"].includes(col._enterType) && // 计算的不可编辑
                 col._readonly !== true && // 只读
-                col.canEdit !== false; // 字段本身编辑权限 考虑为undefined时候
+                col.canEdit !== false && // 字段本身编辑权限 考虑为undefined时候
+            (!this.getTypeColCanEdit || this.getTypeColCanEdit(row, rowIndex, col));
         },
         // 单元格最终编辑状态
         getUnitCanEdit (row, rowIndex, col) {