bri-components 1.3.88 → 1.3.90

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bri-components",
-    "version": "1.3.88",
+    "version": "1.3.90",
     "author": "dengshanghui",
     "description": "a component lib for vue project",
     "main": "src/index.js",

package/src/components/form/DshForm.vue

@@ -201,8 +201,7 @@
                     "users", "departments", "labels", "flatTable", "cascaderTable", "reference", "referenceBy"
                 ],
                 ignoreProperties: [
-                    "_name", "_key", "_default", "_required", "_regStr", "_regMessage", "_span", "_br", "_line", "_noLabel", "_clearable",
-                    "_disabledBtns", "_disabledOldDataRow"
+                    "_name", "_key", "_span", "_br", "_line", "_noLabel", "_required", "_regStr", "_regMessage", "_clearable", "_default"
                 ]
                 // subIgnoreProperties: []
             };

package/src/components/list/DshFlatTable.vue

@@ -19,7 +19,13 @@
                 :key="row._id"
                 class="item"
             >
+                <div class="item-index">
+                    <p>第{{ rowIndex + 1 }}条</p>
+                    <span></span>
+                </div>
+
                 <dsh-form
+                    class="item-form"
                     :canEdit="getRowCanEdit(row)"
                     :formData="row"
                     :formList="getRowFormList(row)"
@@ -121,6 +127,7 @@
 <script>
     import tableBaseMixin from "./mixins/tableBaseMixin.js";
     import DshFlatTableMixin from "./mixins/DshFlatTableMixin.js";
+    import DshDivider from "../controls/base/DshDivider.vue";
 
     export default {
         name: "DshFlatTable",
@@ -128,7 +135,9 @@
             tableBaseMixin,
             DshFlatTableMixin
         ],
-        components: {},
+        components: {
+            DshDivider
+        },
         props: {},
         data () {
             return {};
@@ -143,9 +152,61 @@
     .DshFlatTable {
         &-form {
             .item {
-                border: 1px solid #E5E5E6;
                 margin-bottom: 5px;
+                // border: 1px solid #E5E5E6;
                 position: relative;
+
+                &-index {
+                    min-width: 130px;
+                    max-width: 100%;
+                    height: 32px;
+                    padding: 0px 16px;
+                    color: @themeColor;
+
+                    p {
+                        height: 32px;
+                        line-height: 32px;
+                        font-size:14px;
+                    }
+
+                    span {
+                        display: block;
+                        width: 100%;
+                        height: 1px;
+                        background: linear-gradient(270deg,rgba(166,215,250,0) 0%,rgba(109,174,242,1) 100%) bottom left no-repeat;
+                        position: relative;
+
+                        &::before {
+                            position: absolute;
+                            left: 0px;
+                            top: -2px;
+                            content: "";
+                            width: 5px;
+                            height: 5px;
+                            border-radius: 5px;
+                            background: #6DAEF2;
+                        }
+                    }
+                }
+
+                &-form {
+
+                }
+
+                &-icons {
+                    position: absolute;
+                    top: 10px;
+                    right: 10px;
+                    line-height: 18px;
+                    z-index: 2;
+                    display: none;
+                }
+
+                &:hover {
+                    .item-icons {
+                        display: block !important;
+                    }
+                }
             }
         }
 
@@ -165,20 +226,7 @@
     .DshFlatTable {
         &-form {
             .item {
-                &-icons {
-                    position: absolute;
-                    top: -10px;
-                    right: -10px;
-                    line-height: 18px;
-                    z-index: 2;
-                    display: none;
-                }
 
-                &:hover {
-                    .item-icons {
-                        display: block !important;
-                    }
-                }
             }
         }
     }

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

@@ -13,6 +13,7 @@ export default {
 
                 if (this.initFlag) {
                     item.__old__ = true; // 标记老数据（initFlag不用在data中声明）
+                    item.__isDefault__ = item.__isDefault__ === undefined ? this.controlKey === "_default" : item.__isDefault__; // 配置端-默认数据打上标记
                 }
                 item.__isRendered__ = true;
                 item.__isShow__ = true;
@@ -75,10 +76,10 @@ export default {
                     return [
                         h("div", rowIndex + 1),
 
-                        // 添加符
+                        // 插入一行添加符
                         (this.operationMap.canCreate && this.operationMap.canCreate.disabled !== true) &&
-                            !this.isSearching
-                            // rowIndex !== this.allListData.length - 1
+                            !this.isSearching &&
+                            !this.showCreateBtnColKeys.length
                             ? h("div", {
                                 style: {
                                     position: "absolute",
@@ -106,7 +107,7 @@ export default {
                                     },
                                     on: {
                                         click: () => {
-                                            this.$dispatchEvent(this.operationMap.canCreate, row, rowIndex);
+                                            this.$dispatchEvent(this.operationMap.canCreate, row, rowIndex, column);
                                         }
                                     }
                                 })
@@ -120,14 +121,23 @@ export default {
     created () { },
     methods: {
         // 点击 -添加行
-        clickCreate (operationItem, row, rowIndex) {
+        clickCreate (operationItem, row, rowIndex, column) {
+            const mergeRowData = row
+                ? this.mergeRowColumns.reduce((obj, column) => {
+                    return column._canEditOnMergeRow === true
+                        ? obj
+                        : Object.assign(obj, { [column._key]: row[column._key] });
+                }, {})
+                : {};
             const newRow = {
                 ...this.$deepCopy(this.selfRowDefault),
+                ...this.$deepCopy(mergeRowData),
                 _id: this.$ObjectID().str,
                 __isRendered__: true,
                 __isShow__: true,
                 __isTmpShow__: true,
-                __isSearchShow__: false
+                __isSearchShow__: false,
+                __isDefault__: this.controlKey === "_default"
             };
             const list = this.data;
             const newRowIndex = row

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

@@ -179,10 +179,10 @@ export default {
                             }
                         }, row.__treeIndex__),
 
-                        // 添加符
+                        // 插入一行添加符
                         (this.operationMap.canCreate && this.operationMap.canCreate.disabled !== true) &&
-                            !this.isSearching
-                            // rowIndex !== this.allListData.length - 1
+                            !this.isSearching &&
+                            !this.showCreateBtnColKeys.length
                             ? h("div", {
                                 style: {
                                     position: "absolute",
@@ -210,14 +210,14 @@ export default {
                                     },
                                     on: {
                                         click: () => {
-                                            this.$dispatchEvent(this.operationMap.canCreate, row, rowIndex);
+                                            this.$dispatchEvent(this.operationMap.canCreate, row, rowIndex, column);
                                         }
                                     }
                                 })
                             ])
                             : h("span", ""),
 
-                        // 下级添加符
+                        // 插入一行下级添加符
                         (this.operationMap.canCreateChild && this.operationMap.canCreateChild.disabled !== true) &&
                             !this.isSearching &&
                             row.level < this.maxLevel
@@ -342,7 +342,7 @@ export default {
         /* ------ 工具方法 ------- */
         // 加工树形数据
         getCalcuedTree (treeData = [], cols = []) {
-            const loop = (list = [], parentRow) =>
+            const loop = (list = [], parentRow, levelNum = 1) =>
                 list.forEach((row) => {
                     // 递归到叶子节点前 从上往下执行 要处理的
                     cols.reduce((newRow, column) => {
@@ -365,7 +365,7 @@ export default {
 
                     if (row.children && row.children.length) {
                         row.isLeaf = false;
-                        loop(row.children, row);
+                        loop(row.children, row, levelNum + 1);
 
                         // 递归到叶子节点后到 从下往上执行 要处理的（非叶子节点）
                         cols.reduce((newRow, column) => {
@@ -416,14 +416,15 @@ export default {
                         }, row);
                     }
 
-                    // 初次进来把前端存的状态值全部清除（除了__readonly__和__isQuote__不处理）
                     if (this.initFlag) {
+                        // TODO：修正数据level属性，后期可以删除
+                        row.level = row.level || levelNum;
+
+                        // 初次进来把前端存的状态值全部清除（除了__readonly__和__isQuote__不处理）
                         this.deleteProperties.forEach(property => {
                             delete row[property];
                         });
-
                         row.__old__ = true; // 老的数据都打上标记 尽管不一定会用
-
                         // row.__isExpand__ = false;
                         // row.__isSearchShow__ = false;
                         // 第一级的需要显示出来

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

@@ -66,6 +66,7 @@ export default {
             initFlag: true,
             showRuleMessage: false, // 进行全体校验
             ruleRecordMap: {}, // 单元格是否发生校验的记录映射
+            hoverRecordMap: {},
 
             hideStatus: true,
             dftAdvSearch: {
@@ -139,16 +140,17 @@ export default {
                     btnType: "default",
                     icon: "md-add-circle",
                     size: "default",
+                    color: "#3DB8C5",
                     long: true,
                     disabled: false,
                     event: "clickCreate"
                 },
                 canCreateChild: {
-                    name: "添加子行",
+                    name: "添加一行下级",
                     type: "canCreateChild",
                     btnType: "default",
                     size: "default",
-                    long: true,
+                    color: "#3DB8C5",
                     disabled: false,
                     event: "clickCreateChild"
                 },
@@ -158,6 +160,7 @@ export default {
                     btnType: "errorText",
                     icon: "ios-trash-outline",
                     size: "small",
+                    color: "#E83636",
                     disabled: false,
                     event: "clickDelete"
                 },
@@ -194,6 +197,9 @@ export default {
         selfColumns () {
             return this.columns;
         },
+        mergeRowColumns () {
+            return this.columns.filter(column => column._mergeRow === true);
+        },
         filterColumns () {
             // console.log("filterColumns");
             return this.selfColumns.filter(col => this.$isAdvRelyShow(col, this.allListData, this.parentObj, true));
@@ -214,9 +220,12 @@ export default {
                 _useSummary: false, // 使用汇总行
                 _disabledBtns: false, // 禁用增删按钮
                 // _disabledCreateBtn: false, // 置灰新增按钮，目前只内部使用，comp_web数据表配置页那块
+                _disabledFootCreateBtn: false, // 禁用底部新增按钮
+                _disabledDeleteDftRow: false, // 默认数据行禁止删除
                 _disabledOldDataRow: false, // 置灰老数据行包含删除
-
+                _showCreateBtnColKeys: [], // 显示插入一行按钮的列
                 _hideColKeys: [], // 隐藏／查看列字段的keys
+
                 _searchList: [], // 作为搜索的字段
                 _searchLabelWidth: 100, // 搜索的label宽度
                 _tableAdvSearch: {
@@ -283,13 +292,22 @@ export default {
             return this.selfPropsObj._useSummary;
         },
         disabledBtns () {
-            return this.selfPropsObj._disabledBtns;
+            return this.controlKey === "_default" ? false : this.selfPropsObj._disabledBtns;
         },
         // disabledCreateBtn () {
         //     return this.selfPropsObj._disabledCreateBtn;
         // },
+        disabledFootCreateBtn () {
+            return this.selfPropsObj._disabledFootCreateBtn;
+        },
+        disabledDeleteDftRow () {
+            return this.selfPropsObj._disabledDeleteDftRow;
+        },
         disabledOldDataRow () {
-            return this.selfPropsObj._disabledOldDataRow;
+            return this.controlKey === "_default" ? false : this.selfPropsObj._disabledOldDataRow;
+        },
+        showCreateBtnColKeys () {
+            return this.selfPropsObj._showCreateBtnColKeys;
         },
         hideColKeys () {
             return this.selfPropsObj._hideColKeys || [];
@@ -345,7 +363,7 @@ export default {
                 : this.allListData.length;
         },
         rowsNumStr () {
-            return `当前“${this.isSearching ? "筛选" : "全部"}”范围, 共 ${this.rowsNum} 行`;
+            return `当前${this.isSearching ? "筛选" : "全部"}数据, 共 ${this.rowsNum} ${this.showMode === "form" ? "条" : "行"}`;
         },
 
         renderedListData () {
@@ -378,13 +396,16 @@ export default {
         },
         selfRowDefault () {
             return this.selfColumns.reduce((obj, column) => {
-                const defaultVal = this.rowDefault[column._key];
+                const dftInRowVal = this.rowDefault[column._key];
+                const dftVal = column._default;
                 const initDftVal = this.initDftValMap[column._type];
 
                 return Object.assign(obj, {
-                    [column._key]: this.$isEmptyData(defaultVal)
-                        ? initDftVal
-                        : defaultVal
+                    [column._key]: this.$isEmptyData(dftInRowVal)
+                        ? this.$isEmptyData(dftVal)
+                            ? initDftVal
+                            : dftVal
+                        : dftInRowVal
                 });
             }, {});
         },
@@ -424,6 +445,49 @@ export default {
                                 : ""
                             }`;
                     }
+                },
+                cellSpanOption: {
+                    bodyCellSpan: ({ row, column, rowIndex }) => {
+                        if (column._mergeRow === true) {
+                            if (
+                                rowIndex !== 0 &&
+                                row[column._key] === this.showListData[rowIndex - 1][column._key]
+                            ) {
+                                return {
+                                    rowspan: 0,
+                                    colspan: 0
+                                };
+                            } else {
+                                const newList = this.showListData.slice(rowIndex);
+                                const newIndex = newList.findIndex(rowItem => row[column._key] !== rowItem[column._key]);
+                                return {
+                                    rowspan: newIndex === -1 ? newList.length : newIndex,
+                                    colspan: 1
+                                };
+                            }
+                        }
+                    }
+                },
+                eventCustomOption: {
+                    bodyCellEvents: ({ row, column, rowIndex }) => {
+                        return {
+                            click: (event) => {
+                                // console.log("click::", row, column, rowIndex, event);
+                            },
+                            dblclick: (event) => {
+                                // console.log("dblclick::", row, column, rowIndex, event);
+                            },
+                            contextmenu: (event) => {
+                                // console.log("contextmenu::", row, column, rowIndex, event);
+                            },
+                            mouseenter: (event) => {
+                                this.$set(this.hoverRecordMap, `${row._id}dsh${column._key}`, true);
+                            },
+                            mouseleave: (event) => {
+                                this.$set(this.hoverRecordMap, `${row._id}dsh${column._key}`, false);
+                            }
+                        };
+                    }
                 }
             };
         },
@@ -432,6 +496,15 @@ export default {
             return this.filterColumns.map(colItem => ({
                 filter: undefined,
                 sortBy: undefined,
+                renderHeaderCell: ({ column }, h) => {
+                    column = this.$transformDynamicProperty(column, undefined, this.parentObj);
+
+                    return this.$getHeadRender(h, column, {
+                        showRequired: this.showRequired,
+                        showDescription: this.showDescription,
+                        headHeightAuto: this.headHeightAuto
+                    });
+                },
                 renderBodyCell: ({ column, row, rowIndex }, h) => {
                     column = this.$transformDynamicProperty(column, row, this.parentObj);
                     column = this.resetCol(column, row);
@@ -495,17 +568,48 @@ export default {
                             ? h("span", {
                                 class: "bri-table-td-tip"
                             }, ruleResultObj.message)
-                            : undefined
-                    ];
-                },
-                renderHeaderCell: ({ column }, h) => {
-                    column = this.$transformDynamicProperty(column, undefined, this.parentObj);
+                            : undefined,
 
-                    return this.$getHeadRender(h, column, {
-                        showRequired: this.showRequired,
-                        showDescription: this.showDescription,
-                        headHeightAuto: this.headHeightAuto
-                    });
+                        // 插入一行添加符
+                        (this.operationMap.canCreate && this.operationMap.canCreate.disabled !== true) &&
+                            !this.isSearching &&
+                            this.showCreateBtnColKeys.includes(column._key) &&
+                            this.hoverRecordMap[`${row._id}dsh${column._key}`]
+                            ? h("div", {
+                                style: {
+                                    position: "absolute",
+                                    bottom: "0px",
+                                    right: "0px",
+                                    display: "inline-block",
+                                    width: "16px",
+                                    height: " 16px",
+                                    // border: "1px solid #3DB8C5",
+                                    // backgroundColor: "#ffffff",
+                                    lineHeight: "12px",
+                                    cursor: "pointer",
+                                    verticalAlign: "middle",
+                                    transition: "color .2s ease-in-out,border-color .2s ease-in-out"
+                                }
+                            }, [
+                                h("Icon", {
+                                    style: {
+                                        fontWeight: "500",
+                                        color: "#3DB8C5"
+                                    },
+                                    props: {
+                                        type: "md-add-circle", // "ios-add"
+                                        size: "16"
+                                        // size: "14"
+                                    },
+                                    on: {
+                                        click: () => {
+                                            this.$dispatchEvent(this.operationMap.canCreate, row, rowIndex, column);
+                                        }
+                                    }
+                                })
+                            ])
+                            : h("span", "")
+                    ];
                 },
                 ...colItem
             }));
@@ -537,7 +641,8 @@ export default {
                         props: {
                             list: operationList.map(btnItem => ({
                                 ...btnItem,
-                                disabled: !this.getRowBtnCanEdit(row)
+                                disabled: !this.getRowBtnCanEdit(row) ||
+                                    (this.disabledDeleteDftRow ? row.__isDefault__ === true : false)
                             }))
                         },
                         on: {
@@ -625,15 +730,21 @@ export default {
                 canHideOrShow: {
                     ...this.topOperationMap.canHideOrShow,
                     name: this.hideStatus ? "显示字段" : "隐藏字段"
+                },
+                canCreate: {
+                    ...this.baseOperationMap.canCreate,
+                    name: this.showMode === "form"
+                        ? this.baseOperationMap.canCreate.name.replace("行", "条")
+                        : this.baseOperationMap.canCreate.name
+                        // disabled: !!this.disabledCreateBtn
+                },
+                canCreateChild: {
+                    ...this.baseOperationMap.canCreateChild,
+                    name: this.showMode === "form"
+                        ? this.baseOperationMap.canCreateChild.name.replace("行", "条")
+                        : this.baseOperationMap.canCreateChild.name
+                        // disabled: !!this.disabledCreateBtn
                 }
-                // canCreate: {
-                //     ...this.baseOperationMap.canCreate,
-                //     disabled: !!this.disabledCreateBtn
-                // },
-                // canCreateChild: {
-                //     ...this.baseOperationMap.canCreateChild,
-                //     disabled: !!this.disabledCreateBtn
-                // }
             };
         },
         operationMap () {
@@ -986,7 +1097,7 @@ export default {
             });
         },
         createOperationRender (h, params) {
-            return !this.isSearching
+            return !this.isSearching && this.disabledFootCreateBtn !== true
                 ? h("dsh-buttons", {
                     style: {
                         "margin-top": "3px"
@@ -1079,8 +1190,13 @@ export default {
                 !(["cascaderTable"].includes(this.controlType) && ["level", "children"].includes(col._key)) && // 级联表格类型，固定字段不编辑
                 (col._oldReadonly ? row.__old__ !== true : true) && // 老数据行里某些列不可编辑
                 (row.__isQuote__ ? !this.quoteDisabledColKeys.includes(col._key) : true) && // 引用过来的数据是否可编辑
-                col._enterType !== "calculate" && // 计算的不可编辑
+                !["calculate"].includes(col._enterType) && // 计算的不可编辑
                 col._readonly !== true && // 不能为只读
+                (
+                    col._mergeRow === true
+                        ? this.controlKey === "_default" || (col._canEditOnMergeRow === true && row.__isDefault__ !== true)
+                        : true
+                ) && // 合并单元格的且不配置"新增数据的可编辑"的不可编辑
                 col.canEdit !== false; // 字段本身编辑权限 考虑为undefined时候
         },
         // 单元格最终编辑状态