bri-components 1.3.91 → 1.3.92

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

@@ -1,6 +1,7 @@
 import DshListUnit from "../../unit/DshListUnit.vue";
 import importModal from "../common/importModal.vue";
 import quoteListModal from "../common/quoteListModal.vue";
+import { mapGetters } from "vuex";
 
 export default {
     mixins: [],
@@ -67,8 +68,8 @@ export default {
             showRuleMessage: false, // 进行全体校验
             ruleRecordMap: {}, // 单元格是否发生校验的记录映射
             hoverRecordMap: {},
+            isExpandAction: false,
 
-            hideStatus: true,
             dftAdvSearch: {
                 logic: "and",
                 conditions: []
@@ -85,6 +86,7 @@ export default {
             },
 
             dshRenderName: undefined,
+            hideStatus: true,
             showQuoteModal: false,
             showImportModal: false,
             exportTimer: null,
@@ -138,7 +140,7 @@ export default {
                     name: "添加一行",
                     type: "canCreate",
                     btnType: "default",
-                    icon: "md-add-circle",
+                    icon: "md-add",
                     size: "default",
                     color: "#3DB8C5",
                     long: true,
@@ -149,6 +151,7 @@ export default {
                     name: "添加一行下级",
                     type: "canCreateChild",
                     btnType: "default",
+                    icon: "md-add-circle",
                     size: "default",
                     color: "#3DB8C5",
                     disabled: false,
@@ -173,6 +176,12 @@ export default {
         };
     },
     computed: {
+        ...mapGetters(["appObj"]),
+        appColor () {
+            const themeColorMap = this.$appData.themeColors || {};
+            return (themeColorMap[this.appObj.colorType] || { color: "#3DB8C5" }).color;
+        },
+
         dshRender () {
             return this[this.dshRenderName];
         },
@@ -201,7 +210,6 @@ export default {
             return this.columns.filter(column => column._mergeRow === true);
         },
         filterColumns () {
-            // console.log("filterColumns");
             return this.selfColumns.filter(col => this.$isAdvRelyShow(col, this.allListData, this.parentObj, true));
         },
 
@@ -262,7 +270,7 @@ export default {
             return this.selfPropsObj._showMode;
         },
         inTableType () {
-            return this.controlType === "cascaderTable" && !["old"].includes(this.subType)
+            return ["cascaderTable"].includes(this.controlType) && !["old"].includes(this.subType)
                 ? "treeTable"
                 : this.controlType;
         },
@@ -366,8 +374,28 @@ export default {
             return `当前${this.isSearching ? "筛选" : "全部"}数据, 共 ${this.rowsNum} ${this.showMode === "form" ? "条" : "行"}`;
         },
 
+        /* 数据 */
+        defaultListData () {
+            const loop = (tree = [], list = []) => {
+                return tree.reduce((newList, rowItem) => {
+                    newList = [...newList, rowItem];
+
+                    return rowItem.children && rowItem.children.length
+                        ? loop(rowItem.children, newList)
+                        : newList;
+                }, list);
+            };
+
+            return ["cascaderTable"].includes(this.controlType)
+                ? loop(this.selfPropsObj._default.tree)
+                : this.selfPropsObj._default.list;
+        },
+        defaultListDataIds () {
+            return this.defaultListData
+                .map(rowItem => rowItem._id)
+                .filter(id => !!id);
+        },
         renderedListData () {
-            // console.log("renderedListData");
             return this.allListData.filter(row => {
                 if (this.isSearching) {
                     const bool = this.$isAdvRelyAccord(this.finalTableAdvSearch, row);
@@ -384,7 +412,6 @@ export default {
             });
         },
         showListData () {
-            // console.log("showListData");
             return this.renderedListData.filter(row =>
                 this.isSearching
                     ? !!row.__isSearchShow__
@@ -431,23 +458,10 @@ export default {
                 columnHiddenOption: {
                     defaultHiddenColumnKeys: [...this.hideColKeys] // 必须这么写，不解构，切换一次隐藏／显示后，hideColKeys会变成空数组
                 },
-                cellStyleOption: {
-                    bodyCellClass: ({ column, row, rowIndex }) => {
-                        return "bri-table-td" +
-                            `${this.getRowCanEdit(row)
-                                ? " bri-table-td-edit"
-                                : ""
-                            }` +
-                            `${this.isSearching
-                                ? row.__isSearchShow__ === false
-                                    ? " bri-table-td-hide"
-                                    : ""
-                                : ""
-                            }`;
-                    }
-                },
+                cellStyleOption: this.cellStyleOption,
                 cellSpanOption: {
                     bodyCellSpan: ({ row, rowIndex, column }) => {
+                        // 合并单元格（单元格值为空时不合并）
                         if (column._mergeRow === true) {
                             if (this.$isEmptyData(row[column._key])) {
                                 return {
@@ -498,8 +512,38 @@ export default {
                 }
             };
         },
+        cellStyleOption () {
+            return {
+                bodyCellClass: ({ row, rowIndex, column }) => {
+                    return "bri-table-td" +
+                        `${column._mergeRow
+                            ? " 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"
+                                : ""
+                        }`;
+                }
+            };
+        },
         contentColumns () {
-            // console.log("contentColumns");
             return this.filterColumns.map(colItem => ({
                 filter: undefined,
                 sortBy: undefined,
@@ -512,14 +556,14 @@ export default {
                         headHeightAuto: this.headHeightAuto
                     });
                 },
-                renderBodyCell: ({ column, row, rowIndex }, h) => {
+                renderBodyCell: ({ row, rowIndex, column }, h) => {
                     column = this.$transformDynamicProperty(column, row, this.parentObj);
-                    column = this.resetCol(column, row);
-                    const unitCanEdit = this.getUnitCanEdit(column, row);
+                    column = this.getResetCol(column, row, rowIndex);
+                    const unitCanEdit = this.getUnitCanEdit(column, row, rowIndex);
                     const ruleResultObj = this.getColRuleResult(column, row, rowIndex);
 
                     return [
-                        this.isShowCompare(column, row, this.compareListData[rowIndex])
+                        this.isShowCompare(column, row, rowIndex)
                             ? h("Tooltip", {
                                 style: {
                                     width: "100%"
@@ -577,45 +621,8 @@ export default {
                             }, ruleResultObj.message)
                             : undefined,
 
-                        // 插入一行添加符
-                        (this.operationMap.canCreate && this.operationMap.canCreate.disabled !== true) &&
-                            !this.isSearching &&
-                            this.showCreateBtnColKeys.includes(column._key) &&
-                            this.hoverRecordMap[`${row._id}dsh${column._key}`]
-                            ? h("div", {
-                                style: {
-                                    position: "absolute",
-                                    bottom: "0px",
-                                    right: "0px",
-                                    display: "inline-block",
-                                    width: "16px",
-                                    height: " 16px",
-                                    // border: "1px solid #3DB8C5",
-                                    // backgroundColor: "#ffffff",
-                                    lineHeight: "12px",
-                                    cursor: "pointer",
-                                    verticalAlign: "middle",
-                                    transition: "color .2s ease-in-out,border-color .2s ease-in-out"
-                                }
-                            }, [
-                                h("Icon", {
-                                    style: {
-                                        fontWeight: "500",
-                                        color: "#3DB8C5"
-                                    },
-                                    props: {
-                                        type: "md-add-circle", // "ios-add"
-                                        size: "16"
-                                        // size: "14"
-                                    },
-                                    on: {
-                                        click: () => {
-                                            this.$dispatchEvent(this.operationMap.canCreate, row, rowIndex, column);
-                                        }
-                                    }
-                                })
-                            ])
-                            : h("span", "")
+                        // 添加符
+                        ...this.createIconRender(h, { row, rowIndex, column })
                     ];
                 },
                 ...colItem
@@ -641,15 +648,15 @@ export default {
                 align: "center",
                 fixed: "right",
                 width: 100,
-                renderBodyCell: ({ column, row, rowIndex }, h) => {
+                renderBodyCell: ({ row, rowIndex, column }, h) => {
                     const operationList = this.$getOperationList(["canDelete"]);
 
                     return h("dsh-buttons", {
                         props: {
                             list: operationList.map(btnItem => ({
                                 ...btnItem,
-                                disabled: !this.getRowBtnCanEdit(row) ||
-                                    (this.disabledDeleteDftRow ? this.isDftRowDisabled(row) : false)
+                                disabled: !this.getRowBtnCanEdit(row, rowIndex) ||
+                                    (this.disabledDeleteDftRow ? this.getRowIsDftDisabled(row, rowIndex) : false)
                             }))
                         },
                         on: {
@@ -800,6 +807,7 @@ export default {
             this.initFlag = true;
             this.showRuleMessage = false;
             this.ruleRecordMap = {};
+            this.isExpandAction = false;
             this.selfReset && this.selfReset();
         },
         // 共外部使用
@@ -826,8 +834,8 @@ export default {
             this.$set(this.ruleRecordMap, `${row._id}dsh${col._key}`, { showRuleMessage: true });
             this.change("changeVal", col, row, rowIndex, ...params);
         },
-        change (...params) {
-            this.$emit("change", { list: this.allListData, rowDefault: this.rowDefault }, ...params);
+        change (eventType, col, row, rowIndex, ...params) {
+            this.$emit("change", { list: this.allListData, rowDefault: this.rowDefault }, eventType, col, row, rowIndex, ...params);
         },
 
         /* ----------- 隐藏／显示字段 ---------- */
@@ -843,12 +851,6 @@ export default {
             }
         },
 
-        /* ----------- 全屏 ---------- */
-        // 打开全屏模态框
-        clickEnlarge (operationItem) {
-            this.isEnlarge = true;
-        },
-
         /* ----------- 引用 ---------- */
         // 点击引用
         clickQuote () {
@@ -891,7 +893,8 @@ export default {
                         content: "该数据下此内容为空，无法引用！",
                         onOk: () => { }
                     });
-                } else {
+                }
+                else {
                     if (["flatTable"].includes(this.controlType)) {
                         this.parentObj[this.controlKey] = {
                             ...fieldVal,
@@ -901,7 +904,8 @@ export default {
                                 __old__: false
                             }))
                         };
-                    } else if (["cascaderTable"].includes(this.controlType)) {
+                    }
+                    else if (["cascaderTable"].includes(this.controlType)) {
                         const transformData = (list = []) => {
                             const loop = (list = []) =>
                                 list.map(item => ({
@@ -971,7 +975,7 @@ export default {
             this.$https({
                 url: {
                     module: "sheet",
-                    name: ["flatTable"].includes(this.controlType) ? "exportFlatTableExcel" : "exportCascaderTableExcel"
+                    name: ["cascaderTable"].includes(this.controlType) ? "exportCascaderTableExcel" : "exportFlatTableExcel"
                 },
                 params: this.exportParams,
                 callback: data => {
@@ -1011,6 +1015,12 @@ export default {
             });
         },
 
+        /* ----------- 全屏 ---------- */
+        // 打开全屏模态框
+        clickEnlarge (operationItem) {
+            this.isEnlarge = true;
+        },
+
         /* ----------- 渲染函数 ---------- */
         getTableTopRender (isEnlarge = false) {
             return (h, params) => {
@@ -1103,7 +1113,7 @@ export default {
                 }
             });
         },
-        createOperationRender (h, params) {
+        createBtnRender (h, params) {
             return !this.isSearching && this.disabledFootCreateBtn !== true
                 ? h("dsh-buttons", {
                     style: {
@@ -1121,37 +1131,136 @@ export default {
                 })
                 : undefined;
         },
+        createIconRender (h, { row, rowIndex, column }) {
+            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}`]
+                    ? h("div", {
+                        style: {
+                            position: "absolute",
+                            bottom: "0px",
+                            right: "0px",
+                            width: "16px",
+                            height: "16px",
+                            border: `1px solid ${this.appColor}`,
+                            backgroundColor: "#ffffff",
+                            lineHeight: "12px",
+                            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: "14"
+                                },
+                                on: {
+                                    click: () => {
+                                        this.$dispatchEvent(this.operationMap.canCreate, row, rowIndex, column);
+                                    }
+                                }
+                            })
+                        ])
+                    ])
+                    : h("span", ""),
 
-        /* ----------- 工具方法 ---------- */
-        resetCol (col, row) {
-            let resetMap = {
-                select: {
-                    _optionKind: "dropdown"
-                },
-                checkbox: {
-                    _optionKind: "dropdown"
-                }
-            };
-            return {
-                ...col,
-                ...(resetMap[col._type] || {}),
-                // isShare: this.isShare,
-                _heightAuto: this.heightAuto
-            };
+                // 添加一行下级添加符
+                ["cascaderTable"].includes(this.controlType) &&
+                    (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
+                    ? h("div", {
+                        style: {
+                            position: "absolute",
+                            bottom: "0px",
+                            right: "17px",
+                            display: "inline-block",
+                            width: "16px",
+                            height: " 16px",
+                            border: `1px solid ${this.appColor}`,
+                            backgroundColor: "#ffffff",
+                            lineHeight: "12px",
+                            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: "600",
+                                    color: this.appColor
+                                },
+                                props: {
+                                    type: this.operationMap.canCreateChild.icon,
+                                    size: "14"
+                                },
+                                on: {
+                                    click: () => {
+                                        this.$dispatchEvent(this.operationMap.canCreateChild, row, rowIndex);
+                                    }
+                                }
+                            })
+                        ])
+                    ])
+                    : h("span", "")
+            ];
         },
-        isShowCompare (col, row, oldRow = {}) {
-            return this.useCampare && ["number"].includes(col._type) &&
-                !(this.$isEmptyData(row[col._key]) && this.$isEmptyData(oldRow[col._key])) &&
-                row[col._key] !== oldRow[col._key];
+
+        /* ----------- 方法 ---------- */
+        // 整行校验结果
+        getRowRuleResult (row, rowIndex) {
+            return this.filterColumns.every(column => this.getColRuleResult(column, row, rowIndex).bool);
+        },
+        getRowFormList (row, rowIndex) {
+            return this.selfColumns.map(column => {
+                column = this.$transformDynamicProperty(column, row, this.parentObj);
+                const unitCanEdit = this.getColCanEdit(column, row, rowIndex);
+
+                return {
+                    ...column,
+                    canEdit: unitCanEdit
+                };
+            });
         },
         // 是否禁止操作 在关于默认行方面
-        isDftRowDisabled (row) {
+        getRowIsDftDisabled (row, rowIndex) {
             return this.controlKey === "_default" ? false : row.__isDefault__;
         },
-        // 整行校验结果
-        getRowRuleResult (row, rowIndex) {
-            return this.filterColumns.every(column => this.getColRuleResult(column, row, rowIndex).bool);
+        // 行按钮是否可编辑（删除按钮可编辑 不代表行内容是可编辑的）
+        getRowBtnCanEdit (row, rowIndex) {
+            return this.canEdit && // 是编辑状态
+                (this.disabledOldDataRow ? row.__old__ !== true : true) && // 老数据行不置灰／置灰时是新增数据
+                row.__readonly__ !== true; // 不能为只读数据
+        },
+        // 行内容是否可编辑
+        getRowCanEdit (row, rowIndex) {
+            return this.getRowBtnCanEdit(row, rowIndex);
         },
+
         // 单元格校验结果
         getColRuleResult (col, row, rowIndex) {
             col = this.$transformDynamicProperty(col, row, this.parentObj);
@@ -1173,18 +1282,36 @@ export default {
                 };
             }
         },
-        // 行按钮是否可编辑（删除按钮可编辑 不代表行内容是可编辑的）
-        getRowBtnCanEdit (row) {
-            return this.canEdit && // 是编辑状态
-                (this.disabledOldDataRow ? row.__old__ !== true : true) && // 老数据行不置灰／置灰时是新增数据
-                row.__readonly__ !== true; // 不能为只读数据
+        // 单元格是否显示对比
+        isShowCompare (col, row, rowIndex) {
+            const oldRow = this.compareListData[rowIndex] || {};
+            const curVal = row[col._key];
+            const oldVal = oldRow[col._key];
+
+            return this.useCampare &&
+                ["number"].includes(col._type) &&
+                !(this.$isEmptyData(curVal) && this.$isEmptyData(oldVal)) &&
+                curVal !== oldVal;
         },
-        // 行内容是否可编辑
-        getRowCanEdit (row) {
-            return this.getRowBtnCanEdit(row);
+        // 加工单元格对应的配置
+        getResetCol (col, row, rowIndex) {
+            let resetMap = {
+                select: {
+                    _optionKind: "dropdown"
+                },
+                checkbox: {
+                    _optionKind: "dropdown"
+                }
+            };
+            return {
+                ...col,
+                ...(resetMap[col._type] || {}),
+                // isShare: this.isShare,
+                _heightAuto: this.heightAuto
+            };
         },
         // 列本身是否可编辑
-        getColCanEdit (col, row) {
+        getColCanEdit (col, row, rowIndex) {
             return (
                 ["treeTable"].includes(this.inTableType) && ["number", "date"].includes(col._type)
                     ? col._summaryType
@@ -1194,7 +1321,7 @@ export default {
                                 ? 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.getParentNode(row, this.allTreeData)[col._key])
+                                    : row.level === 1 || !this.$isEmptyData(this.getParentRow(row, this.data)[col._key])
                             : true
                     : true
             ) &&
@@ -1202,26 +1329,64 @@ export default {
                 (col._oldReadonly ? row.__old__ !== true : true) && // 老数据行里某些列不可编辑
                 (row.__isQuote__ ? !this.quoteDisabledColKeys.includes(col._key) : true) && // 引用过来的数据是否可编辑
                 !["calculate"].includes(col._enterType) && // 计算的不可编辑
-                col._readonly !== true && // 不能为只读
-                (!this.isDftRowDisabled(row) || col._readonlyOnDftRow !== true) && // 合并单元格的且不配置"新增数据的可编辑"的不可编辑
+                col._readonly !== true && // 只读
+                (!this.getRowIsDftDisabled(row) || col._readonlyOnDftRow !== true) && // 默认行的某列是否可编辑
                 col.canEdit !== false; // 字段本身编辑权限 考虑为undefined时候
         },
         // 单元格最终编辑状态
-        getUnitCanEdit (col, row) {
-            return this.getRowCanEdit(row) &&
-                this.getColCanEdit(col, row) &&
+        getUnitCanEdit (col, row, rowIndex) {
+            return this.getRowCanEdit(row, rowIndex) &&
+                this.getColCanEdit(col, row, rowIndex) &&
                 this.$isAdvRelyShow(col, row, this.parentObj, true);
         },
-        getRowFormList (row) {
-            return this.selfColumns.map(column => {
-                column = this.$transformDynamicProperty(column, row, this.parentObj);
-                const unitCanEdit = this.getColCanEdit(column, row);
 
+        /* ----------- 工具方法 ---------- */
+        // 获取父级行
+        getParentRow (row, tree = []) {
+            if (row.level === 1) {
                 return {
-                    ...column,
-                    canEdit: unitCanEdit
+                    children: tree
                 };
-            });
+            } else {
+                let parentRow;
+
+                const loop = (list = []) => {
+                    return list.some(rowItem => {
+                        if (rowItem.level === row.level - 1) {
+                            const isExist = rowItem.children.some(childRowItem => childRowItem._id === row._id);
+                            parentRow = rowItem;
+                            return isExist;
+                        } else {
+                            return loop(rowItem.children);
+                        }
+                    });
+                };
+                loop(tree);
+
+                return parentRow;
+            }
+        },
+        // 初始化时 修复数据
+        fixRowItem (row) {
+            // TODO：修正数据level属性，后期可以删除
+            if (["cascaderTable"].includes(this.controlType)) {
+                row.level = row.level || levelNum;
+            }
+
+            if (row._id) {
+                if (this.defaultListDataIds.includes(row._id)) {
+                    row.__isDefault__ = true;
+
+                    // 默认数据的id置换一遍，不然每条数据里该列表的id都是重复的
+                    row._id = this.$ObjectID().str;
+                }
+            } else {
+                row._id = this.$ObjectID().str;
+            }
+
+            // 除了__readonly__, __isDefault__, __old__, __isQuote__不处理
+            row.__old__ = this.controlKey === "_default" ? false : !this.parentObj.__isCreate__; // 标记老数据
+            row.__isDefault__ = this.controlKey === "_default" ? true : !!row.__isDefault__; // 标记默认数据（配置端默认值）
         }
     }
 };