bri-components 1.3.30 → 1.3.31

package/src/components/list/DshTreeTable.vue

@@ -1,10 +1,17 @@
 <template>
     <div class="DshTreeTable">
+        <dsh-buttons
+            class="DshTreeTable-btns"
+            itemClass="DshTreeTable-btns-item"
+            :list="$getOperationList(topOperationBtns)"
+            @click="$dispatchEvent($event)"
+        ></dsh-buttons>
+
         <!-- 搜索条件 -->
         <template v-if="searchFormList.length">
             <dsh-default-search
                 :formList="searchFormList"
-                :initValue="[]"
+                :initValue="advSearchObj.conditions"
                 :labelWidth="searchLabelWidth"
                 @change="searchCb"
             ></dsh-default-search>
@@ -20,6 +27,51 @@
             @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="enlargeFlag">
+                <!-- 搜索条件 -->
+                <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>
     </div>
 </template>
 
@@ -37,6 +89,10 @@
         props: {},
         data () {
             return {
+                deleteProperties: ["__treeIndex__", "__isExpand__", "__isRendered__", "__isShow__", "__isTmpShow__", "__isSearchingShow__"], // 除了__old__
+                isExpandAction: false,
+
+                searchMode: "flat", // "flat", "tree"
                 advSearchObj: {
                     logic: "and",
                     conditions: []
@@ -49,11 +105,23 @@
             },
             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__)
-                );
+                const treeData = this.getCalcuedTree(this.data, this.filterColumns);
+                return this.$getTreeFlatArr(treeData, node => {
+                    if (this.isSearching) {
+                        if (node.__isRendered__ === true) {
+                            node.__isSearchingShow__ = false;
+                        }
+
+                        const bool = this.$isAdvRelyAccord(this.advSearchObj, node);
+                        if (bool) {
+                            node.__isRendered__ = true;
+                            node.__isSearchingShow__ = true;
+                        }
+                        return bool || node.__isRendered__;
+                    } else {
+                        return node.__isRendered__;
+                    }
+                });
             },
             footerData () {
                 console.log("footerData");
@@ -120,8 +188,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.canEdit
+                                        ? " bri-table-td-edit"
+                                        : " bri-table-td-show"
+                                }` +
+                                `${
+                                    this.isSearching
+                                        ? !row.__isSearchingShow__
+                                            ? " bri-table-td-hide"
+                                            : ""
+                                        : !row.__isShow__
+                                            ? " bri-table-td-hide"
+                                            : row.__isShow__ === true && this.isExpandAction
+                                                ? " bri-table-td-visible"
+                                                : ""
+                                }` +
                                 `${
                                     ["__isExpand__"].includes(column._key)
                                         ? " bri-table-td-expand"
@@ -146,7 +228,7 @@
                     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,14 +241,14 @@
                     align: "center",
                     fixed: "left",
                     renderBodyCell: ({ row, column, rowIndex }, h) => {
-                        return row.children && row.children.length
+                        return row.children && row.children.length && (this.isSearching ? this.searchMode === "tree" : true)
                             ? h("Icon", {
                                 style: {
                                     width: "16px",
                                     height: "16px",
                                     cursor: "pointer",
                                     transform: row.__isExpand__ ? "rotate(90deg)" : "rotate(0deg)",
-                                    transition: "transform 0.4s"
+                                    transition: "transform 0.3s"
                                 },
                                 props: {
                                     type: "ios-arrow-forward",
@@ -188,20 +270,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 +323,47 @@
         },
         created () {},
         methods: {
-            // 默认筛选回调
+            // 筛选回调
             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, "__isRendered__", true);
+                // this.$set(row, "__isShow__", 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,17 +371,20 @@
                     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);
                     }
                 });
             },
+            // 点击导出
+            clickExport (operationItem) {
+                // operationItem.disabled = true;
+            },
 
             /* ------ 工具方法 ------- */
-            getCalcuTree (tree = [], columns) {
+            // 加工树形数据
+            getCalcuedTree (treeData = [], columns) {
                 const loop = (list = []) =>
                     list.reduce((newList, node) => {
                         if (node.children && node.children.length) {
@@ -307,15 +409,30 @@
                             node.isLeaf = true;
                         }
 
+                        // 初次进来把前端存的状态值全部清除，除了__old__
+                        if (!this.initFlag) {
+                            this.deleteProperties.forEach(property => {
+                                delete node[property];
+                            });
+
+                            if (node.level == 1) {
+                                node.__isRendered__ = true;
+                                node.__isShow__ = true;
+                            }
+                        }
+
                         return [
                             ...newList,
                             node
                         ];
                     }, []);
 
-                return loop(tree);
+                treeData = loop(treeData);
+                this.initFlag = true;
+                return treeData;
             },
-            getParentNode (tree = [], curNode) {
+            // 获取父节点
+            getParentNode (curNode, tree = []) {
                 if (curNode.level === 1) {
                     return {
                         children: tree
@@ -339,6 +456,7 @@
                     return parentNode;
                 }
             },
+            // 切换子孙后代的显示／隐藏
             toggleDescendantsShow (node, bool) {
                 const loop = (node, isFirstSon) => {
                     if (node.children && node.children.length) {
@@ -368,6 +486,16 @@
 
 <style lang="less" scoped>
     .DshTreeTable {
+        &-btns {
+            margin-bottom: 5px;
+            text-align: right;
+            color: @textColor;
+
+            &-item {
+
+            }
+        }
+
         &-main {
             width: 100%;
             height: auto;

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

@@ -67,6 +67,11 @@ export default {
                 : [];
         },
 
+        selfPropsObj () {
+            return {
+                ...this.commonPropsObj
+            };
+        },
         tablePropsObj () {
             return {
                 maxHeight: this.contentHeight,
@@ -81,11 +86,6 @@ export default {
                 }
             };
         },
-        selfPropsObj () {
-            return {
-                ...this.commonPropsObj
-            };
-        },
 
         filterColumns () {
             return this.columns.filter(col => this.$isAdvRelyShow(col, this.listData, this.parentObj, true));
@@ -226,43 +226,6 @@ 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 () { },

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

@@ -39,10 +39,71 @@ export default {
     data () {
         return {
             showRuleMessage: false, // 显示校验文字
-            ruleRecordMap: {}
+            ruleRecordMap: {},
+
+            isEnlarge: false,
+            enlargeFlag: true, // 为重渲染膜态框内容而用
+            showImportModal: false,
+            timer: null,
+
+            topOperationMap: {
+                canImport: {
+                    name: "导入",
+                    type: "canImport",
+                    icon: "ios-create-outline",
+                    size: "small",
+                    btnType: "text",
+                    event: "clickImport"
+                },
+                canExport: {
+                    name: "导出",
+                    type: "canExport",
+                    icon: "md-share-alt",
+                    size: "small",
+                    btnType: "text",
+                    event: "clickExport"
+                },
+                canEnlarge: {
+                    name: "全屏展示",
+                    type: "canEnlarge",
+                    icon: "md-expand",
+                    size: "small",
+                    btnType: "text",
+                    event: "clickEnlarge"
+                }
+            },
+            baseOperationMap: {
+                canCreate: {
+                    name: "添加一行",
+                    type: "canCreate",
+                    size: "default",
+                    long: true,
+                    disabled: false,
+                    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"
+                }
+            }
         };
     },
     computed: {
+        selfRowDefault () {
+            return this.$filterObj(this.filterColumns, this.rowDefault);
+        },
+
         commonPropsObj () {
             return {
                 // isShare: false, // 是否是分享页在用
@@ -57,6 +118,8 @@ export default {
                 _disabledBtns: false, // 禁用增删按钮
                 _disabledCreateBtn: false, // 置灰新增按钮，目前只内部使用，comp_web数据表配置页那块
                 _disabledOldDataRow: false, // 置灰老数据行包含删除
+                _isImport: false, // 导入
+                _isExport: false, // 导出
                 ...this.propsObj,
 
                 _contentHeight: this.propsObj._contentHeight || 500 // 表格最大高度
@@ -98,9 +161,69 @@ export default {
         disabledOldDataRow () {
             return this.selfPropsObj._disabledOldDataRow;
         },
+        isImport () {
+            return this.selfPropsObj._isImport;
+        },
+        isExport () {
+            return this.selfPropsObj._isExport;
+        },
 
-        selfRowDefault () {
-            return this.$filterObj(this.filterColumns, this.rowDefault);
+        modalPropsObj () {
+            return {
+                title: this.propsObj._key,
+                fullscreen: true,
+                showSlotClose: false,
+                closable: true
+            };
+        },
+        importParams () {
+            return {
+                _key: this.propsObj._key,
+                _id: this.parentObj._id
+            };
+        },
+
+        topOperationBtns () {
+            return Object.keys(this.topOperationMap);
+        },
+        baseOperationBtns () {
+            return Object.keys(this.baseOperationMap);
+        },
+        allOperationMap () {
+            return {
+                ...(this.topOperationMap || {}),
+                ...(this.baseOperationMap || {}),
+
+                canCreate: {
+                    ...this.baseOperationMap.canCreate,
+                    disabled: !!this.disabledCreateBtn
+                }
+            };
+        },
+        operationMap () {
+            return this.$categoryMapToMap(
+                this.allOperationMap,
+                undefined,
+                undefined,
+                this.canEdit
+                    ? [
+                        "canEnlarge",
+                        ...(this.isImport ? ["canImport"] : []),
+                        ...(this.isExport ? ["canExport"] : []),
+                        ...(this.disabledBtns ? ["changeVal"] : this.baseOperationBtns)
+                    ]
+                    : [
+                        "canEnlarge",
+                        ...(this.isExport ? ["canExport"] : [])
+                    ]
+            );
+        }
+    },
+    watch: {
+        isEnlarge (bool) {
+            setTimeout(() => {
+                this.enlargeFlag = bool;
+            }, 0);
         }
     },
     created () { },
@@ -111,6 +234,80 @@ export default {
 
             return this.listData.every((row, rowIndex) => this.getRowRuleResult(row, rowIndex));
         },
+
+        // 打开全屏模态框
+        clickEnlarge (operationItem) {
+            this.isEnlarge = true;
+        },
+        // 点击导入
+        clickImport () {
+            this.showImportModal = true;
+        },
+        // 点击导出
+        clickExport (operationItem) {
+            this.handleExport(operationItem);
+        },
+
+        // 导入成功回调
+        importCb (data) {
+            this.parentObj[this.propsObj._key] = data;
+            this.change("import");
+        },
+        // 接口 -导出
+        handleExport (operationItem) {
+            operationItem.disabled = true;
+
+            this.$https({
+                url: {
+                    module: "sheet",
+                    name: this.isDshFlatTable ? "exportFlatTableExcel" : "exportCascaderTableExcel",
+                    params: {
+                        modKey: this.propsObj.modKey
+                    }
+                },
+                params: {
+                    screenKey: this.propsObj.screenKey,
+                    _key: this.propsObj._key,
+                    _id: this.parentObj._id
+                },
+                callback: data => {
+                    this.getJobStatus(operationItem, data.jobId, data.excel_url);
+                    this.timer = setInterval(() => {
+                        this.getJobStatus(operationItem, data.jobId, data.excel_url);
+                    }, 1000);
+                }
+            });
+        },
+        // 接口 -获取导出地址
+        getJobStatus (operationItem, id, url) {
+            this.$https({
+                url: {
+                    module: "sheet",
+                    name: "getJobStatus"
+                },
+                params: {
+                    jobId: id
+                },
+                callback: data => {
+                    operationItem.disabled = false;
+                    clearInterval(this.timer);
+
+                    if (data.status === "completed") {
+                        window.location.href = data.url;
+                    } else if (data.status === "failed") {
+                        this.$Message.info({
+                            content: "操作失败，请稍后再试"
+                        });
+                    }
+                },
+                error: data => {
+                    operationItem.disabled = false;
+                    this.timer = null;
+                }
+            });
+        },
+
+        /* --------------- 工具方法 ------------- */
         // 整行校验结果
         getRowRuleResult (row, rowIndex) {
             return this.filterColumns.every(column => this.getColRuleResult(column, row, rowIndex).bool);
@@ -126,17 +323,16 @@ export default {
                 };
             }
         },
-
-        /* --------------- 工具方法 ------------- */
         getRowCanEdit (row) {
             return this.canEdit && ( // 是否是编辑状态
                 this.disabledOldDataRow ? !!row.__isCreate__ : true); // 是否让老数据行置灰
         },
         getColCanEdit (col, row) {
             return (col.dependRowCanEdit ? row.canEdit !== false : true) && // 在老数据行里某些列不可编辑
+                (row.__old__ ? col._oldCanEdit : true) && // 在老数据行不可编辑（除_oldCanEdit=true的外）
+                (["number"].includes(col._type) && ![undefined, null, "", "no"].includes(col._summaryType) ? row.isLeaf !== false : true) && // 级联表格 -“需要计的数字列 且 不是叶子行的”不可编辑（必须用isLeaf !== false判断，因为牵扯内部表格也在用）
                 col._enterType !== "calculate" && // 计算的不可编辑
-                col._readonly !== true && // 不能为只读
-            (["number"].includes(col._type) && ![undefined, null, "", "no"].includes(col._summaryType) ? row.isLeaf !== false : true); // 级联表格 -“需要计的数字列 且 不是叶子行的”不可编辑（必须用isLeaf !== false判断，因为牵扯内部表格也在用）
+                col._readonly !== true; // 不能为只读
         },
         getUnitCanEdit (col, row) {
             return this.getRowCanEdit(row) &&