bri-components 1.3.60 → 1.3.62

package/src/components/list/DshTreeTable.vue

@@ -1,38 +1,13 @@
 <template>
     <div class="DshTreeTable">
-        <div class="DshTreeTable-top">
-            <div class="DshTreeTable-top-status">
-                <span class="summary">{{ rowsNumStr }};</span>
-
-                <div
-                    v-if="searchFormList.length"
-                    class="logic"
-                >
-                    <div class="logic-title">{{ selfLogicPropsObj._name }}:</div>
-                    <dsh-select
-                        class="logic-option"
-                        :value="dftAdvSearch"
-                        :propsObj="selfLogicPropsObj"
-                    ></dsh-select>
-                </div>
-            </div>
-
-            <dsh-buttons
-                class="DshTreeTable-top-btns"
-                itemClass="DshTreeTable-top-btns-item"
-                :list="$getOperationList(topOperationBtns)"
-                @click="$dispatchEvent($event)"
-            ></dsh-buttons>
-        </div>
+        <!-- 顶部 -->
+        <dsh-render :render="getTableTopRender()"></dsh-render>
 
         <!-- 搜索条件 -->
-        <dsh-default-search
-            v-if="searchFormList.length && !isEnlarge"
-            :formList="searchFormList"
-            :initValue="dftAdvSearch.conditions"
-            :labelWidth="searchLabelWidth"
-            @change="searchCb"
-        ></dsh-default-search>
+        <dsh-render
+            v-if="!this.isEnlarge"
+            :render="topSearchRender"
+        ></dsh-render>
 
         <!-- 表格 -->
         <bri-table
@@ -46,12 +21,7 @@
         ></bri-table>
 
         <!-- 添加行 -->
-        <dsh-buttons
-            v-if="!isSearching"
-            class="DshTreeTable-create"
-            :list="$getOperationList(['canCreate'])"
-            @click="$dispatchEvent($event)"
-        ></dsh-buttons>
+        <dsh-render :render="createOperationRender"></dsh-render>
 
         <!-- 全屏模式 -->
         <dsh-modal
@@ -64,33 +34,11 @@
                 v-if="isEnlargeFlag"
                 class="DshTreeTable-fullscreen-inner"
             >
-                <div class="DshTreeTable-top">
-                    <div class="DshTreeTable-top-status">
-                        <span class="summary">{{ rowsNumStr }};</span>
-
-                        <div
-                            v-if="searchFormList.length"
-                            class="logic"
-                        >
-                            <div class="logic-title">{{ selfLogicPropsObj._name }}:</div>
-                            <dsh-select
-                                class="logic-option"
-                                :value="dftAdvSearch"
-                                :propsObj="selfLogicPropsObj"
-                            ></dsh-select>
-                        </div>
-                    </div>
-                </div>
+                <!-- 顶部 -->
+                <dsh-render :render="getTableTopRender(true)"></dsh-render>
 
                 <!-- 搜索条件 -->
-                <template v-if="searchFormList.length">
-                    <dsh-default-search
-                        :formList="searchFormList"
-                        :initValue="dftAdvSearch.conditions"
-                        :labelWidth="searchLabelWidth"
-                        @change="searchCb"
-                    ></dsh-default-search>
-                </template>
+                <dsh-render :render="topSearchRender"></dsh-render>
 
                 <!-- 表格 -->
                 <bri-table
@@ -104,11 +52,7 @@
                 ></bri-table>
 
                 <!-- 添加行 -->
-                <dsh-buttons
-                    class="DshTreeTable-create"
-                    :list="$getOperationList(['canCreate'])"
-                    @click="$dispatchEvent($event)"
-                ></dsh-buttons>
+                <dsh-render :render="createOperationRender"></dsh-render>
             </div>
         </dsh-modal>
 
@@ -119,515 +63,33 @@
 
 <script>
     import tableBaseMixin from "./mixins/tableBaseMixin.js";
-    import flatTableMixin from "./mixins/flatTableMixin.js";
+    import DshTreeTableMixin from "./mixins/DshTreeTableMixin.js";
 
     export default {
         name: "DshTreeTable",
         mixins: [
             tableBaseMixin,
-            flatTableMixin
+            DshTreeTableMixin
         ],
         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 () {
-                return this.$getTreeFlatArr(this.allTreeData);
-            },
-            renderedListData () {
-                return this.allListData.filter(row => {
-                    if (this.isSearching) {
-                        const bool = this.$isAdvRelyAccord(this.finalTableAdvSearch, row);
-
-                        // 重置
-                        row.__isSearchShow__ = false;
-                        if (bool) {
-                            row.__isRendered__ = true;
-                            row.__isSearchShow__ = true;
-                        }
-
-                        return bool || row.__isRendered__;
-                    } else {
-                        return row.__isRendered__;
-                    }
-                });
-            },
-            showListData () {
-                return this.renderedListData.filter(row =>
-                    this.isSearching ? !!row.__isSearchShow__ : !!row.__isShow__
-                );
-            },
-            rowsNum () {
-                return this.isSearching
-                    ? this.showListData.length
-                    : this.allListData.length;
-            },
-            rowsNumStr () {
-                return `当前范围“${this.isSearching ? "筛选" : "全部"}”, 共 ${this.rowsNum} 行`;
-            },
-            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", "")
-                        ];
-                    }
-                };
-            }
+            return {};
         },
+        computed: {},
         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) {
-                                // subRow.__isRendered__ = true;
-                                // subRow.__isShow__ = bool;
-                                // subRow.__isTmpShow__ = bool;
-                                this.$set(subRow, "__isRendered__", true);
-                                this.$set(subRow, "__isShow__", bool);
-                                this.$set(subRow, "__isTmpShow__", bool);
-                            } else {
-                                if (bool) {
-                                    // subRow.__isShow__ = subRow.__isTmpShow__;
-                                    this.$set(subRow, "__isShow__", subRow.__isTmpShow__);
-                                } else {
-                                    // subRow.__isShow__ = false;
-                                    this.$set(subRow, "__isShow__", false);
-                                }
-                            }
-
-                            loop(subRow);
-                        });
-                    }
-                };
-
-                loop(row, true);
-            }
-        }
+        methods: {}
     };
 </script>
 
 <style lang="less" scoped>
     .DshTreeTable {
-        &-top {
-            margin-bottom: 3px;
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-            align-items: center;
-
-            &-status {
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-
-                .summary {
-                    font-weight: 500;
-                }
-
-                .logic {
-                    display: flex;
-                    flex-direction: row;
-                    align-items: center;
-                    margin-left: 16px;
-
-                    &-title {
-
-                    }
-
-                    &-option {
-                        margin-left: 8px;
-                        margin-top: -4px;
-                    }
-                }
-            }
-
-            &-btns {
-                text-align: right;
-                color: @textColor;
-
-                &-item {
-
-                }
-            }
-        }
 
         &-main {
             width: 100%;
             height: auto;
         }
 
-        &-create {
-            margin-top: 3px;
-        }
-
         &-fullscreen {
             &-inner {
                 padding: 10px 20px;

package/src/components/list/common/{flatTableImportModal.vue → importModal.vue}

@@ -1,7 +1,7 @@
 <template>
-    <div class="flatTableImportModal">
+    <div class="importModal">
         <dsh-modal
-            class="flatTableImportModal-modal"
+            class="importModal-modal"
             v-model="showModal"
             :mode="modalPropsObj.mode"
             :propsObj="modalPropsObj"
@@ -34,10 +34,10 @@
                 </Upload>
 
                 <div v-if="file !== null">
-                    <div class="flatTableImportModal-file">
+                    <div class="importModal-file">
                         <span>文件名称: {{ file.name }}</span>
                         <Icon
-                            class="flatTableImportModal-file-cancel"
+                            class="importModal-file-cancel"
                             type="ios-close"
                             @click="cacelUpload"
                         />
@@ -75,7 +75,7 @@
 
 <script>
     export default {
-        name: "flatTableImportModal",
+        name: "importModal",
         props: {
             value: {
                 type: Boolean,
@@ -237,7 +237,7 @@
 </script>
 
 <style lang="less">
-    .flatTableImportModal {
+    .importModal {
 
     }
 </style>