bri-components 1.3.98 → 1.4.0

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

@@ -45,6 +45,12 @@ export default {
                 return {};
             }
         },
+        tableDataObj: {
+            type: Object,
+            default () {
+                return {};
+            }
+        },
 
         allFormList: {
             type: Array,
@@ -108,35 +114,15 @@ 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: {
@@ -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 () {
@@ -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,37 +520,11 @@ 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 }) => {
@@ -606,37 +549,6 @@ export default {
                 }
             };
         },
-        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"
-                                : ""
-                        }`;
-                }
-            };
-        },
 
         hideColKeys () {
             return this.selfPropsObj._hideColKeys;
@@ -724,17 +636,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 +725,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 +900,7 @@ export default {
                         window.location.href = data.url;
                     } else if (data.status === "failed") {
                         this.$Message.info({
-                            content: "操作失败，请稍后再试"
+                            content: "操作失败，请稍后再试！"
                         });
                     }
                 },
@@ -1069,6 +979,7 @@ export default {
                                 "font-weight": "500"
                             }
                         }, this.selfLogicPropsObj._name + "："),
+
                         h("dsh-select", {
                             style: {
                                 "margin-left": "8px",
@@ -1104,6 +1015,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);
 
@@ -1113,7 +1042,7 @@ export default {
                 headHeightAuto: this.headHeightAuto
             });
         },
-        contentTdCellRender (h, { row, rowIndex, column }) {
+        contentTdCellRender (h, { row, rowIndex, column }, position) {
             column = this.$transformDynamicProperty(column, row, this.parentObj);
             column = this.getResetCol(row, rowIndex, column);
             const unitCanEdit = this.getUnitCanEdit(row, rowIndex, column);
@@ -1138,7 +1067,11 @@ export default {
                                 props: {
                                     canEdit: unitCanEdit,
                                     formData: row,
-                                    formItem: column,
+                                    formItem: {
+                                        ...column,
+                                        _key: position === "tree" ? "name" : column._key,
+                                        _heightAuto: column._heightAuto || position === "tree"
+                                    },
                                     allFormList: this.selfColumns,
                                     inTableType: this.inTableType,
                                     allListRows: this.allListData,
@@ -1157,7 +1090,11 @@ export default {
                         props: {
                             canEdit: unitCanEdit,
                             formData: row,
-                            formItem: column,
+                            formItem: {
+                                ...column,
+                                _key: position === "tree" ? "name" : column._key,
+                                _heightAuto: column._heightAuto || position === "tree"
+                            },
                             allFormList: this.selfColumns,
                             inTableType: this.inTableType,
                             allListRows: this.allListData,
@@ -1179,30 +1116,31 @@ 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) {
             return [
-                // 插入一行添加符
+                // 插入一行图标
                 (this.operationMap.canCreate && this.operationMap.canCreate.disabled !== true) &&
                     !this.isSearching &&
                     (column._key === "__index__" ? !this.showCreateBtnColKeys.length : this.showCreateBtnColKeys.includes(column._key)) &&
@@ -1215,6 +1153,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 +1187,13 @@ export default {
                     ])
                     : h("span", ""),
 
-                // 添加一行下级添加符
-                ["treeTable"].includes(this.inTableType) &&
-                    (this.operationMap.canCreateChild && this.operationMap.canCreateChild.disabled !== true) &&
+                // 添加一行下级图标
+                (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
+                    row.level < this.maxLevel &&
+                    !["cascaderTable"].includes(this.inTableType) // 老版级联表格类型不要“添加下级”图标
                     ? h("div", {
                         style: {
                             position: "absolute",
@@ -1264,6 +1203,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 +1220,7 @@ export default {
                         }, [
                             h("Icon", {
                                 style: {
-                                    fontWeight: "600",
+                                    fontWeight: "500",
                                     color: this.appColor
                                 },
                                 props: {
@@ -1295,9 +1235,85 @@ export default {
                             })
                         ])
                     ])
+                    : h("span", ""),
+
+                // 删除该行图标
+                (this.operationMap.canDelete && this.operationMap.canDelete.disabled !== true) &&
+                    !this.isSearching &&
+                    (column._key === "__index__" ? !this.showCreateBtnColKeys.length : this.showCreateBtnColKeys.includes(column._key)) &&
+                    this.hoverRecordMap[`${row._id}dsh${column._key}`] &&
+                    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"
+                    : ""
+                }` +
+                `${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"
+                        : ""
+                }`;
+        },
 
         /* ----------- 方法 ---------- */
         // 生成新的一行数据
@@ -1358,7 +1374,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 +1422,10 @@ export default {
         },
         // 加工单元格对应的配置
         getResetCol (row, rowIndex, col) {
-            let resetMap = {
-                select: {
-                    _optionKind: "dropdown"
-                },
-                checkbox: {
-                    _optionKind: "dropdown"
-                }
-            };
             return {
-                ...col,
-                ...(resetMap[col._type] || {}),
                 // isShare: this.isShare,
+                ...col,
+                _optionKind: "dropdown",
                 _heightAuto: this.heightAuto
             };
         },
@@ -1443,7 +1451,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) {

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

@@ -6,30 +6,53 @@ export default {
     props: {},
     data () {
         return {
-            searchMode: "flat" // "flat", "tree"
+            searchMode: "flat", // "flat", "tree"
+
+            baseOperationMap: {
+                canCreateChild: {
+                    name: "添加一行下级",
+                    type: "canCreateChild",
+                    btnType: "default",
+                    icon: "md-add-circle",
+                    size: "default",
+                    color: "#3DB8C5",
+                    disabled: false,
+                    event: "clickCreateChild"
+                }
+                // canDeleteChilds: {
+                //     name: "删除所有子级",
+                //     type: "canDeleteChilds",
+                //     btnType: "errorText",
+                //     icon: "ios-trash-outline",
+                //     size: "small",
+                //     color: "#E83636",
+                //     disabled: false,
+                //     event: "clickDeleteChilds"
+                // }
+            }
         };
     },
     computed: {
-        selfPropsObj () {
+        treeTableBasePropsObj () {
             return {
                 _treeForm: [],
-                ...(this.typePropsObj || {}),
-                ...this.commonPropsObj,
-
-                _maxLevel: this.commonPropsObj._maxLevel || 3 // 最大级数
+                _maxLevel: 3 // 最大级数
             };
         },
+        treeForm () {
+            return this.selfPropsObj._treeForm;
+        },
         maxLevel () {
-            return this.selfPropsObj._maxLevel;
+            return this.selfPropsObj._maxLevel || 3;
         },
 
         selfColumns () {
             return this.columns.map(column => {
-                // 层级表格类型，level字段的进行特殊处理（_treeForm加工成_data）
+                // 层级表格类型，level字段的进行特殊处理（treeForm加工成_data）
                 return column._key === "level"
                     ? {
                         ...column,
-                        _data: this.selfPropsObj._treeForm.map((treeFormItem, treeFormIndex) => ({
+                        _data: this.treeForm.map((treeFormItem, treeFormIndex) => ({
                             name: treeFormItem._name,
                             _key: (treeFormIndex + 1),
                             color: Object.keys(resourceData.colorMap)[treeFormIndex + 1]
@@ -37,6 +60,17 @@ export default {
                     }
                     : column;
             });
+        },
+        selfAllOperationMap () {
+            return {
+                canCreateChild: {
+                    ...this.baseOperationMap.canCreateChild,
+                    name: this.showMode === "form"
+                        ? this.baseOperationMap.canCreateChild.name.replace("行", "条")
+                        : this.baseOperationMap.canCreateChild.name
+                        // disabled: !!this.disabledCreateBtn
+                }
+            };
         }
     },
     created () { },
@@ -85,18 +119,18 @@ export default {
                 }
             });
         },
-        // 节点操作 -删除所有子行
-        clickDeleteChilds (operationItem, row, rowIndex, col) {
-            this.$Modal.confirm({
-                title: "警告",
-                content: "确定删除所有下级吗？",
-                onOk: () => {
-                    row.children.splice(0);
+        // // 节点操作 -删除所有子行
+        // clickDeleteChilds (operationItem, row, rowIndex, col) {
+        //     this.$Modal.confirm({
+        //         title: "警告",
+        //         content: "确定删除所有下级吗？",
+        //         onOk: () => {
+        //             row.children.splice(0);
 
-                    this.change("deleteChildRows", row, rowIndex, null);
-                }
-            });
-        },
+        //             this.change("deleteChildRows", row, rowIndex, null);
+        //         }
+        //     });
+        // },
 
         // 展开／隐藏节点
         toggleExpand (row, bool = true) {