bri-components 1.3.57 → 1.3.61

package/src/components/list/DshFlatTable.vue

@@ -1,12 +1,13 @@
 <template>
     <div class="DshFlatTable">
-        <!-- 操作按钮 -->
-        <dsh-buttons
-            class="DshFlatTable-btns"
-            itemClass="DshFlatTable-btns-item"
-            :list="$getOperationList(topOperationBtns)"
-            @click="$dispatchEvent($event)"
-        ></dsh-buttons>
+        <!-- 顶部 -->
+        <dsh-render :render="getTableTopRender()"></dsh-render>
+
+        <!-- 搜索条件 -->
+        <dsh-render
+            v-if="!this.isEnlarge"
+            :render="topSearchRender"
+        ></dsh-render>
 
         <!-- 表格 -->
         <bri-table
@@ -20,19 +21,25 @@
         ></bri-table>
 
         <!-- 添加行 -->
-        <dsh-buttons
-            class="DshFlatTable-create"
-            :list="$getOperationList(['canCreate'])"
-            @click="$dispatchEvent($event, null, null, allListData)"
-        ></dsh-buttons>
+        <dsh-render :render="createOperationRender"></dsh-render>
 
-        <!-- 全屏查看 -->
+        <!-- 全屏模式 -->
         <dsh-modal
+            class="DshFlatTable-fullscreen"
             v-model="isEnlarge"
             :mode="modalPropsObj.mode"
             :propsObj="modalPropsObj"
         >
-            <template v-if="isEnlargeFlag">
+            <div
+                v-if="isEnlargeFlag"
+                class="DshFlatTable-fullscreen-inner"
+            >
+                <!-- 顶部 -->
+                <dsh-render :render="getTableTopRender(true)"></dsh-render>
+
+                <!-- 搜索条件 -->
+                <dsh-render :render="topSearchRender"></dsh-render>
+
                 <!-- 表格 -->
                 <bri-table
                     class="DshFlatTable-main"
@@ -45,29 +52,18 @@
                 ></bri-table>
 
                 <!-- 添加行 -->
-                <dsh-buttons
-                    class="DshFlatTable-create"
-                    :list="$getOperationList(['canCreate'])"
-                    @click="$dispatchEvent($event, null, null, allListData)"
-                ></dsh-buttons>
-            </template>
+                <dsh-render :render="createOperationRender"></dsh-render>
+            </div>
         </dsh-modal>
 
-        <!-- 导入模态框 -->
-        <flat-table-import-modal
-            v-if="showImportModal"
-            v-model="showImportModal"
-            :propsObj="propsObj"
-            :importParams="importParams"
-            @importCb="importCb"
-        ></flat-table-import-modal>
+        <!-- 各种模态框共用 -->
+        <dsh-render :render="dshRender"></dsh-render>
     </div>
 </template>
 
 <script>
     import tableBaseMixin from "./mixins/tableBaseMixin.js";
     import flatTableMixin from "./mixins/flatTableMixin.js";
-    import flatTableImportModal from "./common/flatTableImportModal.vue";
 
     export default {
         name: "DshFlatTable",
@@ -75,9 +71,7 @@
             tableBaseMixin,
             flatTableMixin
         ],
-        components: {
-            flatTableImportModal
-        },
+        components: {},
         props: {},
         data () {
             return {};
@@ -90,23 +84,16 @@
 
 <style lang="less" scoped>
     .DshFlatTable {
-        &-btns {
-            margin-bottom: 3px;
-            text-align: right;
-            color: @textColor;
-
-            &-item {
-
-            }
-        }
 
         &-main {
             width: 100%;
             height: auto;
         }
 
-        &-create {
-            margin-top: 3px;
+        &-fullscreen {
+            &-inner {
+                padding: 10px 20px;
+            }
         }
     }
 </style>

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>
 
@@ -153,39 +97,9 @@
                 return this.getCalcuedTree(this.data, this.columns);
             },
             allListData () {
+                console.log("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
@@ -576,58 +490,12 @@
 
 <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>

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

@@ -9,10 +9,6 @@ export default {
             }
         }
     },
-    model: {
-        prop: "data",
-        event: "change"
-    },
     data () {
         return {};
     },
@@ -121,7 +117,8 @@ export default {
     created () { },
     methods: {
         // 点击 -添加行
-        clickCreate (operationItem, row, rowIndex, list) {
+        clickCreate (operationItem, row, rowIndex) {
+            const list = this.allListData;
             const newRow = {
                 ...this.$deepCopy(this.selfRowDefault),
                 _id: this.$ObjectID().str

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

@@ -1,10 +1,12 @@
 import DshListUnit from "../../unit/DshListUnit.vue";
+import importModal from "../common/importModal.vue";
 import quoteListModal from "../common/quoteListModal.vue";
 
 export default {
     mixins: [],
     components: {
         DshListUnit,
+        importModal,
         quoteListModal
     },
     props: {
@@ -298,7 +300,42 @@ export default {
         isSearching () {
             return this.$isAdvSearching(this.finalTableAdvSearch);
         },
+        rowsNum () {
+            return this.showListData.length;
+        },
+        rowsNumStr () {
+            return `当前“${this.isSearching ? "筛选" : "全部"}”范围, 共 ${this.rowsNum} 行`;
+        },
+
+        showListData () {
+            console.log("showListData");
+            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;
+                } else {
+                    return true;
+                }
+            });
+        },
+        renderedListData () {
+            console.log("renderedListData");
+            return this.allListData.filter(row =>
+                row.__isRendered__ || (
+                    this.isSearching
+                        ? this.$isAdvRelyAccord(this.finalTableAdvSearch, row)
+                        : false
+                )
+            );
+        },
         parentDataId () {
             return this.parentObj._id;
         },
@@ -347,7 +384,11 @@ export default {
         quoteParams () {
             return {
                 screenKey: this.allScreenKey,
-                fields: [...this.quoteListFields, this.controlKey, "createdAt"],
+                fields: [
+                    ...this.quoteListFields,
+                    this.controlKey,
+                    "createdAt"
+                ],
                 advSearch: {
                     logic: "and",
                     conditions: [
@@ -369,6 +410,7 @@ export default {
         },
 
         filterColumns () {
+            console.log("filterColumns");
             return this.columns.filter(col => this.$isAdvRelyShow(col, this.allListData, this.parentObj, true));
         },
         contentColumns () {
@@ -501,7 +543,7 @@ export default {
     methods: {
         baseInit () {
             this.dftAdvSearch = {
-                logic: this.tableAdvSearch.logic || "and",
+                logic: ["and", "or"].includes(this.tableAdvSearch.logic) ? this.tableAdvSearch.logic : "and",
                 conditions: this.tableAdvSearch.conditions.filter(conditionItem =>
                     this.searchListFields.includes(conditionItem.fieldKey)
                 )
@@ -534,24 +576,17 @@ export default {
             this.$set(this.ruleRecordMap, `${row._id}dsh${col._key}`, { showRuleMessage: true });
             this.change("changeVal", col, row, rowIndex, ...params);
         },
-        // 点击引用
-        clickQuote () {
-            this.dshRenderName = "quoteModalRender";
-            this.showQuoteModal = true;
-        },
-        // 点击导入
-        clickImport () {
-            this.showImportModal = true;
-        },
-        // 点击导出
-        clickExport (operationItem) {
-            this.handleExport(operationItem);
-        },
         // 打开全屏模态框
         clickEnlarge (operationItem) {
             this.isEnlarge = true;
         },
 
+        /* ----------- 引用 ---------- */
+        // 点击引用
+        clickQuote () {
+            this.dshRenderName = "quoteModalRender";
+            this.showQuoteModal = true;
+        },
         // 引用模态框渲染函数
         quoteModalRender (h, params) {
             return this.showQuoteModal
@@ -591,7 +626,7 @@ export default {
                             const loop = (list = []) =>
                                 list.map(item => ({
                                     ...item,
-                                    children: item.children && item.children.length ? loop(item.children) : item.children,
+                                    children: item.children ? loop(item.children) : item.children,
                                     __isQuote__: true
                                 }));
 
@@ -626,11 +661,42 @@ export default {
                 this.$Message.error("未选择引用数据！");
             }
         },
+
+        /* ----------- 导入 ---------- */
+        // 点击导入
+        clickImport () {
+            this.dshRenderName = "importModalRender";
+            this.showImportModal = true;
+        },
+        // 导入模态框渲染函数
+        importModalRender (h, params) {
+            return this.showImportModal
+                ? h("import-modal", {
+                    props: {
+                        value: this.showImportModal,
+                        propsObj: this.propsObj,
+                        listParams: this.importParams
+                    },
+                    on: {
+                        input: bool => {
+                            this.showImportModal = bool;
+                        },
+                        importCb: this.importCb
+                    }
+                })
+                : undefined;
+        },
         // 导入回调
         importCb (dataObj) {
             this.parentObj[this.controlKey] = dataObj;
             this.change("import");
         },
+
+        /* ----------- 导出 ---------- */
+        // 点击导出
+        clickExport (operationItem) {
+            this.handleExport(operationItem);
+        },
         // 接口 -导出
         handleExport (operationItem) {
             operationItem.disabled = true;
@@ -682,7 +748,118 @@ export default {
             });
         },
 
-        /* --------------- 工具方法 ------------- */
+        /* ----------- 渲染函数 ---------- */
+        getTableTopRender (isEnlarge = false) {
+            return (h, params) => {
+                return h("div", {
+                    style: {
+                        "margin-bottom": "3px",
+                        "display": "flex",
+                        "flex-direction": "row",
+                        "justify-content": "space-between",
+                        "align-items": "center"
+                    }
+                }, [
+                    // 左 -统计，逻辑
+                    this.topSummaryRender(h, params),
+
+                    // 右 -功能按钮
+                    isEnlarge ? undefined : this.topOperationRender(h, params)
+                ]);
+            };
+        },
+        topSearchRender (h, params) {
+            return this.searchFormList.length
+                ? h("dsh-default-search", {
+                    props: {
+                        formList: this.searchFormList,
+                        initValue: this.dftAdvSearch.conditions,
+                        labelWidth: this.searchLabelWidth
+                    },
+                    on: {
+                        change: this.searchCb
+                    }
+                })
+                : undefined;
+        },
+        topSummaryRender (h, params) {
+            return h("div", {
+                style: {
+                    "display": "flex",
+                    "flex-direction": "row",
+                    "align-items": "center"
+                }
+            }, [
+                h("span", {
+                    style: {
+                        "font-weight": "500"
+                    }
+                }, this.rowsNumStr + ";"),
+
+                this.searchFormList.length
+                    ? h("div", {
+                        style: {
+                            "display": "flex",
+                            "flex-direction": "row",
+                            "align-items": "center",
+                            "margin-left": "16px"
+                        }
+                    }, [
+                        h("div", {
+                            style: {
+                                "font-weight": "500"
+                            }
+                        }, this.selfLogicPropsObj._name + "："),
+                        h("dsh-select", {
+                            style: {
+                                "margin-left": "8px",
+                                "margin-top": "-4px"
+                            },
+                            props: {
+                                value: this.dftAdvSearch,
+                                propsObj: this.selfLogicPropsObj
+                            }
+                        })
+                    ])
+                    : undefined
+            ]);
+        },
+        topOperationRender (h, params) {
+            return h("dsh-buttons", {
+                style: {
+                    "text-align": "right"
+                },
+                props: {
+                    itemClass: undefined,
+                    list: this.$getOperationList(this.topOperationBtns)
+                },
+                on: {
+                    click: (event) => {
+                        this.$dispatchEvent(event);
+                    }
+                }
+            });
+        },
+        createOperationRender (h, params) {
+            return !this.isSearching
+                ? h("dsh-buttons", {
+                    style: {
+                        "margin-top": "3px"
+                    },
+                    props: {
+                        itemClass: undefined,
+                        list: this.$getOperationList(["canCreate"])
+                    },
+                    on: {
+                        click: (event) => {
+                            this.$dispatchEvent(event);
+                        }
+                    }
+                })
+                : undefined;
+        },
+
+        /* ----------- 工具方法 ---------- */
         resetCol (col, row) {
             let resetMap = {
                 select: {