bri-components 1.3.60 → 1.3.62

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

@@ -0,0 +1,124 @@
+export default {
+    mixins: [],
+    components: {},
+    props: {},
+    data () {
+        return {};
+    },
+    computed: {
+        allListData () {
+            console.log("allListData");
+            this.data.forEach(item => {
+                !item._id && this.$set(item, "_id", this.$ObjectID().str);
+
+                if (this.initFlag) {
+                    item.__old__ = true; // 标记老数据（initFlag不用在data中声明）
+                    item.__isRendered__ = true;
+                    item.__isShow__ = true;
+                    item.__isTmpShow__ = true;
+                    item.__isSearchShow__ = false;
+                }
+            });
+
+            this.initFlag = false;
+            return this.data;
+        },
+        footerData () {
+            return this.isSearching
+                ? []
+                : this.useSummary && this.allListData.length
+                    ? [
+                        this.filterColumns.reduce((obj, col) => {
+                            return {
+                                ...obj,
+                                [col._key]: col._type === "number" && ![undefined, null, "", "no"].includes(col._summaryType)
+                                    ? this.$calNumList(
+                                        this.allListData.map(item => item[col._key]),
+                                        col._summaryType,
+                                        { ...col, _defaultDigit: 2 }
+                                    )
+                                    : (obj[col._key] || "--")
+                            };
+                        }, {
+                            _id: this.$ObjectID().str,
+                            __index__: "汇总",
+                            __operation__: "——"
+                        })
+                    ]
+                    : [];
+        },
+
+        tablePropsObj () {
+            return {
+                maxHeight: this.contentHeight,
+                cellStyleOption: {
+                    bodyCellClass: ({ column, row, rowIndex }) => {
+                        return "bri-table-td" +
+                            `${this.getRowCanEdit(row)
+                                ? " bri-table-td-edit"
+                                : ""
+                            }` +
+                            `${this.isSearching
+                                ? !row.__isSearchShow__
+                                    ? " bri-table-td-hide"
+                                    : ""
+                                : ""
+                            }`;
+                    }
+                }
+            };
+        },
+        showColumns () {
+            return [
+                ...(this.useSelection === true ? [this.selectionColumn] : []),
+                ...(this.useIndex === true ? [this.indexColumn] : []),
+                ...this.$transformToColumns(this.contentColumns),
+                ...(this.$getOperationList(["canDelete"]).length ? [this.operationColumn] : [])
+            ];
+        },
+        indexColumn () {
+            return {
+                title: "序号",
+                _key: "__index__",
+                key: "__index__",
+                field: "__index__",
+                width: 76,
+                align: "center",
+                fixed: "left",
+                renderBodyCell: ({ column, row, rowIndex }) => ++rowIndex
+            };
+        }
+    },
+    created () { },
+    methods: {
+        // 点击 -添加行
+        clickCreate (operationItem, row, rowIndex) {
+            const list = this.allListData;
+            const newRow = {
+                ...this.$deepCopy(this.selfRowDefault),
+                _id: this.$ObjectID().str,
+                __isRendered__: true,
+                __isShow__: true,
+                __isTmpShow__: true,
+                __isSearchShow__: false
+            };
+            const newRowIndex = rowIndex == null ? list.length : rowIndex + 1;
+            list.splice(newRowIndex, 0, newRow);
+            this.$forceUpdate(); // 自定义页中点击添加一行没有更新页面
+
+            this.change("createRow", null, newRow, newRowIndex);
+        },
+        // 点击 -删除行
+        clickDelete (operationItem, row, rowIndex) {
+            this.$Modal.confirm({
+                title: "提示",
+                content: "确定删除吗？",
+                onOk: () => {
+                    this.allListData.splice(rowIndex, 1);
+
+                    this.change("deleteRow", null, row, rowIndex);
+                }
+            });
+        }
+    }
+};

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

@@ -0,0 +1,410 @@
+export default {
+    mixins: [],
+    components: {},
+    props: {},
+    data () {
+        return {
+            deleteProperties: ["__treeIndex__", "__old__", "__isExpand__", "__isRendered__", "__isShow__", "__isTmpShow__", "__isSearchShow__"], // 除了__readonly__和__isQuote__不处理
+            isExpandAction: false,
+
+            searchMode: "flat" // "flat", "tree"
+
+        };
+    },
+    computed: {
+        selfPropsObj () {
+            return {
+                _maxLevel: 3, // 最大级数
+                ...this.commonPropsObj
+            };
+        },
+        maxLevel () {
+            return this.selfPropsObj._maxLevel || 3;
+        },
+
+        allTreeData () {
+            console.log("allTreeData");
+            return this.getCalcuedTree(this.data, this.columns);
+        },
+        allListData () {
+            console.log("allListData");
+            return this.$getTreeFlatArr(this.allTreeData);
+        },
+        footerData () {
+            console.log("footerData");
+            return this.isSearching
+                ? []
+                : this.useSummary && this.allListData.length
+                    ? [
+                        this.filterColumns.reduce((obj, col) => {
+                            return {
+                                ...obj,
+                                [col._key]: col._type === "number" && ![undefined, null, "", "no"].includes(col._summaryType)
+                                    ? this.$calNumList(
+                                        this.allListData
+                                            .filter(item => item.level === 1)
+                                            .map(item => item[col._key]),
+                                        col._summaryType,
+                                        { ...col, _defaultDigit: 2 }
+                                    )
+                                    : (obj[col._key] || "--")
+                            };
+                        }, {
+                            _id: this.$ObjectID().str,
+                            __index__: "汇总",
+                            __isExpand__: "-",
+                            __operation__: "——"
+                        })
+                    ]
+                    : [];
+        },
+
+        tablePropsObj () {
+            return {
+                maxHeight: this.contentHeight,
+                // rowStyleOption: {
+                //     hoverHighlight: true,
+                //     clickHighlight: true,
+                //     stripe: true // 斑马纹
+                // },
+                cellStyleOption: {
+                    bodyCellClass: ({ row, column, rowIndex }) => {
+                        return "bri-table-td" +
+                            `${this.getRowCanEdit(row)
+                                ? " bri-table-td-edit"
+                                : ""
+                            }` +
+                            `${this.isSearching
+                                ? !row.__isSearchShow__
+                                    ? " bri-table-td-hide"
+                                    : ""
+                                : !row.__isShow__
+                                    ? " bri-table-td-hide"
+                                    : this.isExpandAction
+                                        ? " bri-table-td-visible"
+                                        : ""
+                            }` +
+                            `${["__isExpand__"].includes(column._key)
+                                ? " bri-table-td-expand"
+                                : ["__index__"].includes(column._key)
+                                    ? " bri-table-td-index"
+                                    : ""
+                            }`;
+                    }
+                },
+                // 通过实例方法 hideColumnsByKeys(keys)将列隐藏，通过实例方法 showColumnsByKeys(keys)将隐藏的列显示
+                columnHiddenOption: {
+                    defaultHiddenColumnKeys: []
+                }
+            };
+        },
+        showColumns () {
+            return [
+                ...(this.useSelection === true ? [this.selectionColumn] : []),
+                this.expandColumn,
+                ...(this.useIndex === true ? [this.indexColumn] : []),
+                ...this.$transformToColumns(this.contentColumns),
+                ...(this.isSearching
+                    ? []
+                    : this.$getOperationList(["canDelete"]).length
+                        ? [this.operationColumn]
+                        : [])
+            ];
+        },
+        expandColumn () {
+            return {
+                // title: "开／合",
+                _key: "__isExpand__",
+                key: "__isExpand__",
+                field: "__isExpand__",
+                width: 48,
+                align: "center",
+                fixed: "left",
+                renderBodyCell: ({ row, column, rowIndex }, h) => {
+                    return this.isSearching && this.searchMode === "flat"
+                        ? h("span", "")
+                        : row.children && row.children.length
+                            ? h("Icon", {
+                                style: {
+                                    width: "16px",
+                                    height: "16px",
+                                    cursor: "pointer",
+                                    transform: row.__isExpand__ ? "rotate(90deg)" : "rotate(0deg)",
+                                    transition: "transform 0.3s"
+                                },
+                                props: {
+                                    type: "ios-arrow-forward",
+                                    size: "18"
+                                },
+                                on: {
+                                    click: () => {
+                                        this.toggleExpand(row, !row.__isExpand__);
+                                    }
+                                }
+                            })
+                            : h("span", "");
+                }
+            };
+        },
+        indexColumn () {
+            return {
+                title: "序号",
+                _key: "__index__",
+                key: "__index__",
+                field: "__index__",
+                width: 28 + 16 + (this.maxLevel - 1) * 38,
+                align: "left",
+                fixed: "left",
+                renderBodyCell: ({ row, column, rowIndex }, h) => {
+                    return [
+                        h("div", {
+                            style: {
+                                paddingLeft: `${(row.level - 1) * 18}px`,
+                                fontWeight: "500"
+                            }
+                        }, row.__treeIndex__),
+
+                        // 添加符
+                        this.operationMap.canCreate && row.level < this.maxLevel && !this.isSearching
+                            ? h("div", {
+                                style: {
+                                    position: "absolute",
+                                    bottom: "0px",
+                                    right: "0px",
+                                    display: "inline-block",
+                                    width: "16px",
+                                    height: " 16px",
+                                    border: "1px solid #dcdee2",
+                                    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"
+                                    },
+                                    props: {
+                                        type: "ios-add", // "md-add-circle"
+                                        size: "14"
+                                    },
+                                    on: {
+                                        click: () => {
+                                            this.clickCreate(this.operationMap.canCreate, row, rowIndex);
+                                        }
+                                    }
+                                })
+                            ])
+                            : h("span", "")
+                    ];
+                }
+            };
+        }
+    },
+    created () { },
+    methods: {
+        // 本身的初始化
+        selfReset () {
+            this.isExpandAction = false;
+            this.searchMode = "flat";
+            this.dftAdvSearch = {
+                logic: "and",
+                conditions: []
+            };
+        },
+
+        // 筛选回调
+        searchCb (conditions) {
+            this.isExpandAction = false;
+            this.dftAdvSearch.conditions = conditions;
+        },
+        // 展开／隐藏节点
+        toggleExpand (row, bool = true) {
+            this.isExpandAction = true;
+            // row.__isExpand__ = bool;
+            this.$set(row, "__isExpand__", bool);
+
+            this.toggleDescendantsShow(row, bool);
+        },
+
+        // 点击 -添加一行
+        clickCreate (operationItem, row, rowIndex) {
+            const newRow = {
+                ...this.$deepCopy(this.selfRowDefault),
+                _id: this.$ObjectID().str,
+                isLeaf: true,
+                children: [],
+                // __old__: false,
+                __isExpand__: false,
+                __isRendered__: true,
+                __isShow__: true,
+                __isTmpShow__: false,
+                __isSearchShow__: false
+            };
+
+            // !row代表最上级节点
+            if (!row) {
+                this.data.push({
+                    ...newRow,
+                    level: 1
+                });
+            } else {
+                row.children.push({
+                    ...newRow,
+                    level: row.level + 1
+                });
+
+                this.toggleExpand(row, true);
+            }
+        },
+        // 点击 -删除行
+        clickDelete (operationItem, row, rowIndex) {
+            this.$Modal.confirm({
+                title: "警告",
+                content: "确定删除吗？",
+                onOk: () => {
+                    const parentNode = this.getParentNode(row, this.data);
+                    const index = parentNode.children.findIndex(childNode => childNode._id === row._id);
+                    parentNode.children.splice(index, 1);
+                }
+            });
+        },
+
+        /* ------ 工具方法 ------- */
+        // 加工树形数据
+        getCalcuedTree (treeData = [], columns = []) {
+            const loop = (list = [], parentRow) =>
+                list.forEach((row) => {
+                    // 递归到叶子节点前 从上往下要处理的
+                    columns.reduce((newRow, col) => {
+                        const isNumberSummary = col._type === "number" && ![undefined, null, "", "no"].includes(col._summaryType);
+                        const isDateSummary = col._type === "date" && ![undefined, null, ""].includes(col._writeSort);
+
+                        if (isNumberSummary || isDateSummary) {
+                            const val = isNumberSummary
+                                ? newRow[col._key]
+                                : ["downToUp"].includes(col._writeSort)
+                                    ? newRow[col._key]
+                                    : !parentRow || parentRow[col._key]
+                                        ? newRow[col._key]
+                                        : undefined;
+
+                            this.$set(newRow, col._key, val);
+                        }
+
+                        return newRow;
+                    }, row);
+
+                    if (row.children && row.children.length) {
+                        row.isLeaf = false;
+                        loop(row.children, row);
+
+                        // 递归到叶子节点后 从下往上要处理的
+                        columns.reduce((newRow, col) => {
+                            const isNumberSummary = col._type === "number" && ![undefined, null, "", "no"].includes(col._summaryType);
+                            const isDateSummary = col._type === "date" && ![undefined, null, ""].includes(col._writeSort);
+
+                            if (isNumberSummary || isDateSummary) {
+                                const val = isNumberSummary
+                                    ? this.$calNumList(
+                                        newRow.children.map(subRow => subRow[col._key]),
+                                        col._summaryType,
+                                        { ...col, _defaultDigit: 2 },
+                                        false
+                                    )
+                                    : ["downToUp"].includes(col._writeSort)
+                                        ? this.$calDateList(
+                                            newRow.children.map(subRow => subRow[col._key]),
+                                            col._compareOperator,
+                                            col._dateType
+                                        )
+                                        : newRow[col._key];
+
+                                this.$set(newRow, col._key, val);
+                            }
+
+                            return newRow;
+                        }, row);
+                    } else {
+                        row.isLeaf = true;
+                    }
+
+                    // 初次进来把前端存的状态值全部清除（除了__readonly__）
+                    if (this.initFlag) {
+                        this.deleteProperties.forEach(property => {
+                            delete row[property];
+                        });
+
+                        row.__old__ = true; // 老的数据都打上标记 尽管不一定会用
+                        // row.__isExpand__ = false;
+                        // row.__isSearchShow__ = false;
+                        // 第一级的需要显示出来
+                        if (row.level == 1) {
+                            row.__isRendered__ = true;
+                            row.__isShow__ = true;
+                            row.__isTmpShow__ = true;
+                        } else {
+                            // row.__isRendered__ = false;
+                            // row.__isShow__ = false;
+                            // row.__isTmpShow__ = false;
+                        }
+                    }
+                });
+            loop(treeData);
+
+            this.initFlag = false;
+            return treeData;
+        },
+        // 获取父节点
+        getParentNode (curRow, tree = []) {
+            if (curRow.level === 1) {
+                return {
+                    children: tree
+                };
+            } else {
+                let parentNode;
+
+                const loop = (list = []) => {
+                    return list.some(row => {
+                        if (row.level === curRow.level - 1) {
+                            const isExist = row.children.some(childNode => childNode._id === curRow._id);
+                            parentNode = row;
+                            return isExist;
+                        } else {
+                            return loop(row.children);
+                        }
+                    });
+                };
+                loop(tree);
+
+                return parentNode;
+            }
+        },
+        // 切换子孙后代的显示／隐藏
+        toggleDescendantsShow (row, bool) {
+            const loop = (row, isFirstSon) => {
+                if (row.children && row.children.length) {
+                    row.children.forEach(subRow => {
+                        if (isFirstSon) {
+                            this.$set(subRow, "__isRendered__", true);
+                            this.$set(subRow, "__isShow__", bool);
+                            this.$set(subRow, "__isTmpShow__", bool);
+                        } else {
+                            if (bool) {
+                                this.$set(subRow, "__isShow__", subRow.__isTmpShow__);
+                            } else {
+                                this.$set(subRow, "__isShow__", false);
+                            }
+                        }
+
+                        loop(subRow);
+                    });
+                }
+            };
+
+            loop(row, true);
+        }
+    }
+};