bri-components 1.3.30 → 1.3.32

package/src/components/list/DshTreeTable.vue

@@ -1,14 +1,24 @@
 <template>
     <div class="DshTreeTable">
+        <div class="DshTreeTable-top">
+            <div class="DshTreeTable-top-total">{{ rowsNumStr }}</div>
+
+            <dsh-buttons
+                class="DshTreeTable-top-btns"
+                itemClass="DshTreeTable-top-btns-item"
+                :list="$getOperationList(topOperationBtns)"
+                @click="$dispatchEvent($event)"
+            ></dsh-buttons>
+        </div>
+
         <!-- 搜索条件 -->
-        <template v-if="searchFormList.length">
-            <dsh-default-search
-                :formList="searchFormList"
-                :initValue="[]"
-                :labelWidth="searchLabelWidth"
-                @change="searchCb"
-            ></dsh-default-search>
-        </template>
+        <dsh-default-search
+            v-if="searchFormList.length && !isEnlarge"
+            :formList="searchFormList"
+            :initValue="advSearchObj.conditions"
+            :labelWidth="searchLabelWidth"
+            @change="searchCb"
+        ></dsh-default-search>
 
         <!-- 表格 -->
         <bri-table
@@ -20,6 +30,54 @@
             @changeSelect="changeSelect"
             @selectAll="changeSelect"
         ></bri-table>
+
+        <!-- 添加行 -->
+        <dsh-buttons
+            v-if="!isSearching"
+            class="DshFlatTable-create"
+            :list="$getOperationList(['canCreate'])"
+            @click="$dispatchEvent($event)"
+        ></dsh-buttons>
+
+        <!-- 全屏模式 -->
+        <dsh-modal
+            v-model="isEnlarge"
+            mode="custom"
+            :propsObj="modalPropsObj"
+        >
+            <template v-if="isEnlargeFlag">
+                <!-- 搜索条件 -->
+                <template v-if="searchFormList.length">
+                    <dsh-default-search
+                        :formList="searchFormList"
+                        :initValue="advSearchObj.conditions"
+                        :labelWidth="searchLabelWidth"
+                        @change="searchCb"
+                    ></dsh-default-search>
+                </template>
+
+                <!-- 表格 -->
+                <bri-table
+                    class="DshTreeTable-main"
+                    :columns="showColumns"
+                    :data="listData"
+                    :footer-data="footerData"
+                    :propsObj="tablePropsObj"
+                    @changeSelect="changeSelect"
+                    @selectAll="changeSelect"
+                ></bri-table>
+
+                <!-- 添加行 -->
+                <dsh-buttons
+                    class="DshFlatTable-create"
+                    :list="$getOperationList(['canCreate'])"
+                    @click="$dispatchEvent($event)"
+                ></dsh-buttons>
+            </template>
+        </dsh-modal>
+
+        <!-- 各种模态框共用 -->
+        <dsh-render :render="dshRender"></dsh-render>
     </div>
 </template>
 
@@ -37,6 +95,10 @@
         props: {},
         data () {
             return {
+                deleteProperties: ["__treeIndex__", "__old__", "__isExpand__", "__isRendered__", "__isShow__", "__isTmpShow__", "__isSearchingShow__"], // 除了__old__
+                isExpandAction: false,
+
+                searchMode: "flat", // "flat", "tree"
                 advSearchObj: {
                     logic: "and",
                     conditions: []
@@ -45,41 +107,75 @@
         },
         computed: {
             isSearching () {
-                return this.searchFormList.length && this.advSearchObj.conditions.some(conditionItem => conditionItem.fieldValue.length);
+                return this.searchFormList.length && this.advSearchObj.conditions.some(conditionItem =>
+                    conditionItem.fieldValue.length && conditionItem.fieldValue.some(valItem => !this.$isEmptyData(valItem))
+                );
+            },
+            allTreeData () {
+                console.log("allTreeData");
+                return this.getCalcuedTree(this.data, this.filterColumns);
+            },
+            allListData () {
+                return this.$getTreeFlatArr(this.allTreeData);
             },
             listData () {
-                console.log("listData");
-                const treeData = this.getCalcuTree(this.data, this.filterColumns);
-                return this.$getTreeFlatArr(treeData, node =>
-                    (this.searchFormList.length ? this.$isAdvRelyAccord(this.advSearchObj, node) : true) &&
-                    (node.level === 1 || node.__isRendered__)
+                return this.allListData.filter(row => {
+                    if (this.isSearching) {
+                        // 重置__isSearchingShow__为false
+                        row.__isSearchingShow__ = false;
+
+                        const bool = this.$isAdvRelyAccord(this.advSearchObj, row);
+                        if (bool) {
+                            row.__isRendered__ = true;
+                            row.__isSearchingShow__ = true;
+                        }
+
+                        return bool || row.__isRendered__;
+                    } else {
+                        return row.__isRendered__;
+                    }
+                });
+            },
+            showListData () {
+                return this.listData.filter(row =>
+                    this.isSearching ? !!row.__isSearchingShow__ : !!row.__isShow__
                 );
             },
+            rowsNum () {
+                return this.isSearching
+                    ? this.showListData.length
+                    : this.allListData.length;
+            },
+            rowsNumStr () {
+                return `当前范围“${this.isSearching ? "筛选" : "全部"}”, 共 ${this.rowsNum} 行`;
+            },
             footerData () {
                 console.log("footerData");
-                return this.useSummary && this.listData.length
-                    ? [
-                        this.filterColumns.reduce((obj, col) => {
-                            return {
-                                ...obj,
-                                [col._key]: col._type === "number" && ![undefined, null, "", "no"].includes(col._summaryType)
-                                    ? this.$calNumList(
-                                        this.listData
-                                            .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__: "——"
-                        })
-                    ]
-                    : [];
+                return this.isSearching
+                    ? []
+                    : this.useSummary && this.listData.length
+                        ? [
+                            this.filterColumns.reduce((obj, col) => {
+                                return {
+                                    ...obj,
+                                    [col._key]: col._type === "number" && ![undefined, null, "", "no"].includes(col._summaryType)
+                                        ? this.$calNumList(
+                                            this.listData
+                                                .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__: "——"
+                            })
+                        ]
+                        : [];
             },
 
             selfPropsObj () {
@@ -120,8 +216,22 @@
                     cellStyleOption: {
                         bodyCellClass: ({ row, column, rowIndex }) => {
                             return "bri-table-td" +
-                                `${this.canEdit ? " bri-table-td-edit" : " bri-table-td-show"}` +
-                                `${row.__isShow__ === false ? " bri-table-td-hide" : ""}` +
+                                `${
+                                    this.getRowCanEdit(row)
+                                        ? " bri-table-td-edit"
+                                        : " bri-table-td-show"
+                                }` +
+                                `${
+                                    this.isSearching
+                                        ? !row.__isSearchingShow__
+                                            ? " bri-table-td-hide"
+                                            : ""
+                                        : !row.__isShow__
+                                            ? " bri-table-td-hide"
+                                            : this.isExpandAction
+                                                ? " bri-table-td-visible"
+                                                : ""
+                                }` +
                                 `${
                                     ["__isExpand__"].includes(column._key)
                                         ? " bri-table-td-expand"
@@ -146,7 +256,11 @@
                     this.expandColumn,
                     ...(this.useIndex === true ? [this.indexColumn] : []),
                     ...this.$transformToColumns(this.contentColumns),
-                    ...(this.$getOperationList(["canDelete"]).length ? [this.operationColumn] : [])
+                    ...(this.isSearching
+                        ? []
+                        : this.$getOperationList(["canDelete"]).length
+                            ? [this.operationColumn]
+                            : [])
                 ];
             },
             expandColumn () {
@@ -159,26 +273,28 @@
                     align: "center",
                     fixed: "left",
                     renderBodyCell: ({ row, column, rowIndex }, h) => {
-                        return row.children && row.children.length
-                            ? h("Icon", {
-                                style: {
-                                    width: "16px",
-                                    height: "16px",
-                                    cursor: "pointer",
-                                    transform: row.__isExpand__ ? "rotate(90deg)" : "rotate(0deg)",
-                                    transition: "transform 0.4s"
-                                },
-                                props: {
-                                    type: "ios-arrow-forward",
-                                    size: "18"
-                                },
-                                on: {
-                                    click: () => {
-                                        this.toggleExpand(row, !row.__isExpand__);
+                        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", "");
+                                })
+                                : h("span", "");
                     }
                 };
             },
@@ -188,20 +304,20 @@
                     _key: "__index__",
                     key: "__index__",
                     field: "__index__",
-                    width: 28 + 16 + (this.maxLevel - 1) * 36,
+                    width: 28 + 16 + (this.maxLevel - 1) * 38,
                     align: "left",
                     fixed: "left",
                     renderBodyCell: ({ row, column, rowIndex }, h) => {
                         return [
                             h("div", {
                                 style: {
-                                    paddingLeft: `${(row.level - 1) * 16}px`,
+                                    paddingLeft: `${(row.level - 1) * 18}px`,
                                     fontWeight: "500"
                                 }
                             }, row.__treeIndex__),
 
                             // 添加符
-                            row.level < this.maxLevel && !this.isSearching
+                            this.operationMap.canCreate && row.level < this.maxLevel && !this.isSearching
                                 ? h("div", {
                                     style: {
                                         position: "absolute",
@@ -241,30 +357,56 @@
         },
         created () {},
         methods: {
-            // 默认筛选回调
+            // 本身的初始化
+            selfReset () {
+                this.isExpandAction = false;
+                this.searchMode = "flat";
+                this.advSearchObj = {
+                    logic: "and",
+                    conditions: []
+                };
+            },
+
+            // 筛选回调
             searchCb (conditions) {
+                this.isExpandAction = false;
                 this.advSearchObj = {
                     ...this.advSearchObj,
                     conditions: conditions
                 };
             },
+            // 展开／隐藏节点
             toggleExpand (row, bool = true) {
-                this.$set(row, "__isRendered__", true);// 作用不大 可有可无
+                this.isExpandAction = true;
                 this.$set(row, "__isExpand__", bool);
 
                 this.toggleDescendantsShow(row, bool);
             },
+
             // 点击 -添加一行
             clickCreate (operationItem, row, rowIndex) {
-                row.children.push({
-                    _id: this.$ObjectID().str,
-                    ...this.$deepCopy(this.rowDefault),
-                    level: row.level + 1,
-                    isLeaf: true,
-                    children: []
-                });
+                // !row代表最上级节点
+                if (!row) {
+                    this.data.push({
+                        _id: this.$ObjectID().str,
+                        ...this.$deepCopy(this.rowDefault),
+                        level: 1,
+                        isLeaf: true,
+                        children: [],
+                        __isRendered__: true,
+                        __isShow__: true
+                    });
+                } else {
+                    row.children.push({
+                        _id: this.$ObjectID().str,
+                        ...this.$deepCopy(this.rowDefault),
+                        level: row.level + 1,
+                        isLeaf: true,
+                        children: []
+                    });
 
-                this.toggleExpand(row, true);
+                    this.toggleExpand(row, true);
+                }
             },
             // 点击 -删除行
             clickDelete (operationItem, row, rowIndex) {
@@ -272,22 +414,21 @@
                     title: "警告",
                     content: "确定删除吗？",
                     onOk: () => {
-                        const parentNode = this.getParentNode(this.data, row);
+                        const parentNode = this.getParentNode(row, this.data);
                         const index = parentNode.children.findIndex(childNode => childNode._id === row._id);
                         parentNode.children.splice(index, 1);
-                        console.log(index);
-                        console.log(parentNode);
                     }
                 });
             },
 
             /* ------ 工具方法 ------- */
-            getCalcuTree (tree = [], columns) {
+            // 加工树形数据
+            getCalcuedTree (treeData = [], columns) {
                 const loop = (list = []) =>
-                    list.reduce((newList, node) => {
+                    list.forEach((node) => {
                         if (node.children && node.children.length) {
                             node.isLeaf = false;
-                            node.children = loop(node.children);
+                            loop(node.children);
 
                             columns.reduce((newNode, col) => {
                                 if (col._type === "number" && ![undefined, null, "", "no"].includes(col._summaryType)) {
@@ -307,15 +448,29 @@
                             node.isLeaf = true;
                         }
 
-                        return [
-                            ...newList,
-                            node
-                        ];
-                    }, []);
+                        // 初次进来把前端存的状态值全部清除（除了__readonly__）
+                        if (this.initFlag) {
+                            this.deleteProperties.forEach(property => {
+                                delete node[property];
+                            });
 
-                return loop(tree);
+                            node.__old__ = true; // 老的数据都打上标记 尽管不一定会用
+                            // 第一级的需要显示出来
+                            if (node.level == 1) {
+                                node.__isRendered__ = true;
+                                node.__isShow__ = true;
+                                node.__isTmpShow__ = true;
+                            }
+                        }
+                    });
+
+                loop(treeData);
+                console.log("treeee");
+                this.initFlag = false;
+                return treeData;
             },
-            getParentNode (tree = [], curNode) {
+            // 获取父节点
+            getParentNode (curNode, tree = []) {
                 if (curNode.level === 1) {
                     return {
                         children: tree
@@ -334,11 +489,12 @@
                             }
                         });
                     };
-
                     loop(tree);
+
                     return parentNode;
                 }
             },
+            // 切换子孙后代的显示／隐藏
             toggleDescendantsShow (node, bool) {
                 const loop = (node, isFirstSon) => {
                     if (node.children && node.children.length) {
@@ -346,11 +502,11 @@
                             if (isFirstSon) {
                                 this.$set(subNode, "__isRendered__", true);
                                 this.$set(subNode, "__isShow__", bool);
+                                this.$set(subNode, "__isTmpShow__", bool);
                             } else {
                                 if (bool) {
                                     this.$set(subNode, "__isShow__", subNode.__isTmpShow__);
                                 } else {
-                                    this.$set(subNode, "__isTmpShow__", subNode.__isShow__);
                                     this.$set(subNode, "__isShow__", false);
                                 }
                             }
@@ -368,6 +524,26 @@
 
 <style lang="less" scoped>
     .DshTreeTable {
+        &-top {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+
+            &-total {
+                font-weight: 500;
+            }
+
+            &-btns {
+                text-align: right;
+                color: @textColor;
+
+                &-item {
+
+                }
+            }
+        }
+
         &-main {
             width: 100%;
             height: auto;

package/src/components/{controls/senior/flatTable → list/common}/flatTableImportModal.vue

@@ -237,15 +237,7 @@
 </script>
 
 <style lang="less">
-    .sheetBatchImportModal {
-        &-file {
-            position: relative;
+    .flatTableImportModal {
 
-            &-cancel {
-                cursor: pointer;
-                float: right;
-                font-size: @titleSize;
-            }
-        }
     }
 </style>

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

@@ -32,7 +32,13 @@ export default {
         listData () {
             this.data.forEach(item => {
                 !item._id && this.$set(item, "_id", this.$ObjectID().str);
+
+                if (!this.initFlag) {
+                    item.__old__ = true; // 标记老数据（initFlag不用在data中声明）
+                }
             });
+
+            this.initFlag = true;
             return this.data;
         },
         oldListData () {
@@ -67,13 +73,18 @@ export default {
                 : [];
         },
 
+        selfPropsObj () {
+            return {
+                ...this.commonPropsObj
+            };
+        },
         tablePropsObj () {
             return {
                 maxHeight: this.contentHeight,
                 cellStyleOption: {
                     bodyCellClass: ({ row, column, rowIndex }) => {
                         return "bri-table-td" +
-                            `${this.canEdit
+                            `${this.getRowCanEdit(row)
                                 ? " bri-table-td-edit"
                                 : " bri-table-td-show"
                             }`;
@@ -81,11 +92,6 @@ export default {
                 }
             };
         },
-        selfPropsObj () {
-            return {
-                ...this.commonPropsObj
-            };
-        },
 
         filterColumns () {
             return this.columns.filter(col => this.$isAdvRelyShow(col, this.listData, this.parentObj, true));
@@ -137,7 +143,7 @@ export default {
                         props: {
                             list: operationList.map(btnItem => ({
                                 ...btnItem,
-                                disabled: this.disabledOldDataRow && !row.__isCreate__
+                                disabled: !this.getRowCanEdit(row)
                             }))
                         },
                         on: {
@@ -226,55 +232,17 @@ export default {
                 },
                 ...colItem
             }));
-        },
-
-        allOperationMap () {
-            return {
-                canCreate: {
-                    name: "添加一行",
-                    type: "canCreate",
-                    size: "default",
-                    long: true,
-                    disabled: !!this.disabledCreateBtn,
-                    event: "clickCreate",
-                    btnType: "default"
-                },
-                canDelete: {
-                    name: "删除",
-                    type: "canDelete",
-                    btnType: "errorText",
-                    icon: "ios-trash-outline",
-                    size: "small",
-                    disabled: false,
-                    event: "clickDelete"
-                },
-                changeVal: {
-                    name: "改变输入框值",
-                    type: "changeVal",
-                    event: "changeVal"
-                }
-            };
-        },
-        operationMap () {
-            return this.canEdit
-                ? this.$categoryMapToMap(
-                    this.allOperationMap,
-                    null,
-                    this.disabledBtns ? ["canCreate", "canDelete"] : []
-                )
-                : {};
         }
     },
     created () { },
     methods: {
         // 点击 -添加行
-        clickCreate (operationItem, row, index, list) {
+        clickCreate (operationItem, row, rowIndex, list) {
             const newRow = {
                 ...this.$deepCopy(this.selfRowDefault),
-                __isCreate__: true,
                 _id: this.$ObjectID().str
             };
-            const newRowIndex = index == null ? list.length : index + 1;
+            const newRowIndex = rowIndex == null ? list.length : rowIndex + 1;
             list.splice(newRowIndex, 0, newRow);
             this.$forceUpdate(); // 自定义页中点击添加一行没有更新页面
 
@@ -283,7 +251,7 @@ export default {
         // 点击 -删除行
         clickDelete (operationItem, row, rowIndex, list) {
             this.$Modal.confirm({
-                title: "警告",
+                title: "提示",
                 content: "确定删除吗？",
                 onOk: () => {
                     list.splice(rowIndex, 1);