bri-components 1.3.26 → 1.3.28

package/src/components/list/DshCascaderTable.vue

@@ -197,23 +197,15 @@
 </template>
 
 <script>
-    import DshListUnit from "../unit/DshListUnit.vue";
+    import tableBaseMixin from "./mixins/tableBaseMixin.js";
 
     export default {
         name: "DshCascaderTable",
-        components: {
-            DshListUnit
-        },
+        mixins: [
+            tableBaseMixin
+        ],
+        components: {},
         props: {
-            canEdit: {
-                type: Boolean,
-                default: true
-            },
-            useCol: {
-                type: Boolean,
-                default: false
-            },
-
             data: {
                 type: Object,
                 default () {
@@ -236,32 +228,10 @@
                 default () {
                     return [];
                 }
-            },
-            propsObj: {
-                type: Object,
-                default () {
-                    return {};
-                }
-            },
-
-            parentFormList: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
-            parentObj: {
-                type: Object,
-                default () {
-                    return {};
-                }
             }
         },
         data () {
             return {
-                showRuleMessage: false, // 显示校验文字
-                ruleRecordMap: {},
-
                 widthMap: this.$getModFieldPropertyMap("width"),
                 boxWidth: 0,
                 getColOperationNames (col) {
@@ -363,46 +333,28 @@
         computed: {
             selfPropsObj () {
                 return {
-                    // isShare: false, // 是否是分享页在用
-
-                    _showRequired: true, // 表头显示校验符号*
-                    _showDescription: true, // 表头显示提示
-                    _headHeightAuto: false, // 表头高度自适应
-                    _heightAuto: false, // 单元格高度自适应
-                    _disabledBtns: false, // 禁用增删按钮
-                    ...this.propsObj,
+                    _useCol: true,
+                    ...this.commonPropsObj,
 
                     _contentHeight: this.propsObj._contentHeight || 400 // 表格最大高度
                 };
             },
-            // isShare () {
-            //     return this.selfPropsObj.isShare;
-            // },
-            contentHeight () {
-                return this.selfPropsObj._contentHeight;
-            },
-            showRequired () {
-                return this.selfPropsObj._showRequired;
-            },
-            showDescription () {
-                return this.selfPropsObj._showDescription;
-            },
-            headHeightAuto () {
-                return this.selfPropsObj._headHeightAuto;
-            },
-            heightAuto () {
-                return this.selfPropsObj._heightAuto;
-            },
-            disabledBtns () {
-                return this.selfPropsObj._disabledBtns;
+            useCol () {
+                return this.selfPropsObj._useCol;
             },
 
             columns () {
                 return this.transformColumns(this.treeColumns);
             },
+            filterColumns () {
+                return this.columns.filter(col => col.colType === "data");
+            },
             treeData () {
                 return this.transforBriTreeData();
             },
+            listData () {
+                return this.rows;
+            },
             rows () {
                 return this.transformRows();
             },
@@ -456,16 +408,34 @@
                 };
                 loop(this.data.tree);
             },
-            // 共外部使用
-            validate () {
-                this.showRuleMessage = true;
-
-                const subColumns = this.columns.filter(col => col.colType === "data");
-                return this.rows.every((row, rowIndex) =>
-                    subColumns.every(col => this.getColRuleResult(col, row[col.nodeKey], rowIndex, true).bool)
-                );
+            // 整行校验结果
+            getRowRuleResult (row, rowIndex) {
+                return this.filterColumns.every(col => this.getColRuleResult(col, row[col.nodeKey], rowIndex).bool);
+            },
+            // 单元格校验结果
+            getColRuleResult (col, row, rowIndex) {
+                if ((this.ruleRecordMap[`${row._id}dsh${col._key}`] || {}).showRuleMessage || this.showRuleMessage) {
+                    return this.$getFieldRuleResult({
+                        ...col,
+                        _regStr: col._regStr && [";", "；"].some(symbol => col._regStr.includes(symbol))
+                            ? col._regStr
+                                .replace(/\n/g, "")
+                                .split(";")
+                                .reduce((arr, item) => arr.concat(item.split("；")), [])[rowIndex]
+                            : col._regStr,
+                        _regMessage: col._regMessage && [";", "；"].some(symbol => col._regMessage.includes(symbol))
+                            ? col._regMessage
+                                .replace(/\n/g, "")
+                                .split(";")
+                                .reduce((arr, item) => arr.concat(item.split("；")), [])[rowIndex]
+                            : col._regMessage
+                    }, row);
+                } else {
+                    return {
+                        bool: true
+                    };
+                }
             },
-
             // 点击表头
             clickTh (operationItem, col) {
                 this.$emit("clickTh", col);
@@ -586,30 +556,6 @@
             controlBlur (operationItem, col, row, params) {
                 this.$set(this.ruleRecordMap, `${row._id}dsh${col._key}`, { showRuleMessage: true });
             },
-            // 是否显示 单元格校验提示文字
-            getColRuleResult (col, row, rowIndex, showRuleMessage = this.showRuleMessage) {
-                if ((this.ruleRecordMap[`${row._id}dsh${col._key}`] || {}).showRuleMessage || showRuleMessage) {
-                    return this.$getFieldRuleResult({
-                        ...col,
-                        _regStr: col._regStr && [";", "；"].some(symbol => col._regStr.includes(symbol))
-                            ? col._regStr
-                                .replace(/\n/g, "")
-                                .split(";")
-                                .reduce((arr, item) => arr.concat(item.split("；")), [])[rowIndex]
-                            : col._regStr,
-                        _regMessage: col._regMessage && [";", "；"].some(symbol => col._regMessage.includes(symbol))
-                            ? col._regMessage
-                                .replace(/\n/g, "")
-                                .split(";")
-                                .reduce((arr, item) => arr.concat(item.split("；")), [])[rowIndex]
-                            : col._regMessage
-                    }, row);
-                } else {
-                    return {
-                        bool: true
-                    };
-                }
-            },
 
             /* ---- 工具方法 ---- */
             // 合并表头

package/src/components/list/DshFlatTable.vue

@@ -20,19 +20,16 @@
 </template>
 
 <script>
-    import DshFlatTableMixin from "./mixins/DshFlatTableMixin.js";
-    import tableMixin from "./mixins/tableMixin.js";
-    import DshListUnit from "../unit/DshListUnit.vue";
+    import tableBaseMixin from "./mixins/tableBaseMixin.js";
+    import flatTableMixin from "./mixins/flatTableMixin.js";
 
     export default {
         name: "DshFlatTable",
         mixins: [
-            DshFlatTableMixin,
-            tableMixin
+            tableBaseMixin,
+            flatTableMixin
         ],
-        components: {
-            DshListUnit
-        },
+        components: {},
         props: {},
         data () {
             return {};

package/src/components/list/DshTreeTable.vue

@@ -1,5 +1,16 @@
 <template>
     <div class="DshTreeTable">
+        <!-- 搜索条件 -->
+        <template v-if="searchFormList.length">
+            <dsh-default-search
+                :formList="searchFormList"
+                :initValue="[]"
+                :labelWidth="searchLabelWidth"
+                @change="searchCb"
+            ></dsh-default-search>
+        </template>
+
+        <!-- 表格 -->
         <bri-table
             class="DshTreeTable-main"
             :columns="showColumns"
@@ -13,30 +24,68 @@
 </template>
 
 <script>
-    import DshFlatTableMixin from "./mixins/DshFlatTableMixin.js";
-    import tableMixin from "./mixins/tableMixin.js";
-    import DshListUnit from "../unit/DshListUnit.vue";
+    import tableBaseMixin from "./mixins/tableBaseMixin.js";
+    import flatTableMixin from "./mixins/flatTableMixin.js";
 
     export default {
         name: "DshTreeTable",
         mixins: [
-            DshFlatTableMixin,
-            tableMixin
+            tableBaseMixin,
+            flatTableMixin
         ],
-        components: {
-            DshListUnit
-        },
+        components: {},
         props: {},
         data () {
-            return {};
+            return {
+                advSearchObj: {
+                    logic: "and",
+                    conditions: []
+                }
+            };
         },
         computed: {
+            isSearching () {
+                return this.searchFormList.length && this.advSearchObj.conditions.some(conditionItem => conditionItem.fieldValue.length);
+            },
             listData () {
-                return this.$getTreeFlatArr(this.data, "__isExpand__");
+                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__)
+                );
+            },
+            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__: "——"
+                        })
+                    ]
+                    : [];
             },
 
             selfPropsObj () {
                 return {
+                    _searchFields: [], // 作为搜索的字段
+                    _searchLabelWidth: 100, // 搜索的label宽度
                     ...this.commonPropsObj,
 
                     _maxLevel: this.commonPropsObj._maxLevel || 3
@@ -45,6 +94,21 @@
             maxLevel () {
                 return this.selfPropsObj._maxLevel;
             },
+            searchLabelWidth () {
+                return this.selfPropsObj._searchLabelWidth;
+            },
+            searchFormList () {
+                return this.selfPropsObj._searchFields
+                    .map(fieldKey => this.columns.find(column => column._key === fieldKey))
+                    .filter(column => !!column)
+                    .map(column => {
+                        return {
+                            ...column,
+                            _span: 6
+                        };
+                });
+            },
+
             tablePropsObj () {
                 return {
                     maxHeight: this.contentHeight,
@@ -56,14 +120,11 @@
                     cellStyleOption: {
                         bodyCellClass: ({ row, column, rowIndex }) => {
                             return "bri-table-td" +
-                                `${
-                                    this.canEdit
-                                        ? " bri-table-td-edit"
-                                        : " bri-table-td-show"
-                                }` +
+                                `${this.canEdit ? " bri-table-td-edit" : " bri-table-td-show"}` +
+                                `${row.__isShow__ === false ? " bri-table-td-hide" : ""}` +
                                 `${
                                     ["__isExpand__"].includes(column._key)
-                                        ? " bri-table-td-normal"
+                                        ? " bri-table-td-expand"
                                         : ["__index__"].includes(column._key)
                                             ? " bri-table-td-index"
                                             : ""
@@ -76,6 +137,9 @@
                     }
                 };
             },
+            filterColumns () {
+                return this.columns;
+            },
             showColumns () {
                 return [
                     ...(this.useSelection === true ? [this.selectionColumn] : []),
@@ -91,22 +155,22 @@
                     _key: "__isExpand__",
                     key: "__isExpand__",
                     field: "__isExpand__",
-                    width: 46,
+                    width: 48,
                     align: "center",
                     fixed: "left",
                     renderBodyCell: ({ row, column, rowIndex }, h) => {
                         return row.children && row.children.length
                             ? h("Icon", {
                                 style: {
-                                    width: "14px",
-                                    height: "14px",
+                                    width: "16px",
+                                    height: "16px",
                                     cursor: "pointer",
                                     transform: row.__isExpand__ ? "rotate(90deg)" : "rotate(0deg)",
                                     transition: "transform 0.4s"
                                 },
                                 props: {
                                     type: "ios-arrow-forward",
-                                    size: "14"
+                                    size: "18"
                                 },
                                 on: {
                                     click: () => {
@@ -137,7 +201,7 @@
                             }, row.__treeIndex__),
 
                             // 添加符
-                            row.level < this.maxLevel
+                            row.level < this.maxLevel && !this.isSearching
                                 ? h("div", {
                                     style: {
                                         position: "absolute",
@@ -164,21 +228,7 @@
                                         },
                                         on: {
                                             click: () => {
-                                                // 新增行里的输入框，第一次输入会失去光标的bug，需要$set
-                                                const rowDefault = this.$deepCopy(this.rowDefault);
-                                                this.columns.forEach(column => {
-                                                    // 用$set也可以
-                                                    rowDefault[column._key] = rowDefault[column._key];
-                                                });
-
-                                                row.children.push({
-                                                    _id: this.$ObjectID().str,
-                                                    level: row.level + 1,
-                                                    children: [],
-                                                    ...rowDefault
-                                                });
-
-                                                this.toggleExpand(row, true);
+                                                this.clickCreate(this.operationMap.canCreate, row, rowIndex);
                                             }
                                         }
                                     })
@@ -191,13 +241,126 @@
         },
         created () {},
         methods: {
+            // 默认筛选回调
+            searchCb (conditions) {
+                this.advSearchObj = {
+                    ...this.advSearchObj,
+                    conditions: conditions
+                };
+            },
             toggleExpand (row, bool = true) {
+                this.$set(row, "__isRendered__", true);// 作用不大 可有可无
                 this.$set(row, "__isExpand__", bool);
 
-                // this.$set(row, "__isRendered__", true);
-                // row.children.forEach(subRow => {
-                //     this.$set(subRow, "__isShow__", 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: []
+                });
+
+                this.toggleExpand(row, true);
+            },
+            // 点击 -删除行
+            clickDelete (operationItem, row, rowIndex) {
+                this.$Modal.confirm({
+                    title: "警告",
+                    content: "确定删除吗？",
+                    onOk: () => {
+                        const parentNode = this.getParentNode(this.data, row);
+                        const index = parentNode.children.findIndex(childNode => childNode._id === row._id);
+                        parentNode.children.splice(index, 1);
+                        console.log(index);
+                        console.log(parentNode);
+                    }
+                });
+            },
+
+            /* ------ 工具方法 ------- */
+            getCalcuTree (tree = [], columns) {
+                const loop = (list = []) =>
+                    list.reduce((newList, node) => {
+                        if (node.children && node.children.length) {
+                            node.isLeaf = false;
+                            node.children = loop(node.children);
+
+                            columns.reduce((newNode, col) => {
+                                if (col._type === "number" && ![undefined, null, "", "no"].includes(col._summaryType)) {
+                                    newNode[col._key] = col._type === "number" && ![undefined, null, "", "no"].includes(col._summaryType)
+                                        ? this.$calNumList(
+                                            node.children.map(subNode => subNode[col._key]),
+                                            col._summaryType,
+                                            { ...col, _defaultDigit: 2 },
+                                            false
+                                        )
+                                        : newNode[col._key];
+                                }
+
+                                return newNode;
+                            }, node);
+                        } else {
+                            node.isLeaf = true;
+                        }
+
+                        return [
+                            ...newList,
+                            node
+                        ];
+                    }, []);
+
+                return loop(tree);
+            },
+            getParentNode (tree = [], curNode) {
+                if (curNode.level === 1) {
+                    return {
+                        children: tree
+                    };
+                } else {
+                    let parentNode;
+
+                    const loop = (list = []) => {
+                        return list.some(node => {
+                            if (node.level === curNode.level - 1) {
+                                const isExist = node.children.some(childNode => childNode._id === curNode._id);
+                                parentNode = node;
+                                return isExist;
+                            } else {
+                                return loop(node.children);
+                            }
+                        });
+                    };
+
+                    loop(tree);
+                    return parentNode;
+                }
+            },
+            toggleDescendantsShow (node, bool) {
+                const loop = (node, isFirstSon) => {
+                    if (node.children && node.children.length) {
+                        node.children.forEach(subNode => {
+                            if (isFirstSon) {
+                                this.$set(subNode, "__isRendered__", true);
+                                this.$set(subNode, "__isShow__", bool);
+                            } else {
+                                if (bool) {
+                                    this.$set(subNode, "__isShow__", subNode.__isTmpShow__);
+                                } else {
+                                    this.$set(subNode, "__isTmpShow__", subNode.__isShow__);
+                                    this.$set(subNode, "__isShow__", false);
+                                }
+                            }
+
+                            loop(subNode);
+                        });
+                    }
+                };
+
+                loop(node, true);
             }
         }
     };