bri-components 1.3.81 → 1.3.83

package/package.json

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

package/src/components/form/DshForm.vue

@@ -199,7 +199,7 @@
 
                 forceValidateTypes: [
                     "select", "region", "cascader", "regions", "cascaders", "file", "coordinates", "editor",
-                    "users", "departments", "labels", "flatTable", "reference", "referenceBy"
+                    "users", "departments", "labels", "flatTable", "cascaderTable", "reference", "referenceBy"
                 ],
                 ignoreProperties: [
                     "_name", "_key", "_default", "_required", "_regStr", "_regMessage", "_span", "_br", "_line", "_noLabel", "_clearable",

package/src/components/list/BriTable.vue

@@ -189,11 +189,11 @@
         methods: {
             // hidden columns
             hideColumnsByKeys (keys = []) {
-                this.$refs["briTable"].hideColumnsByKeys(keys);
+                this.$refs.briTable.hideColumnsByKeys(keys);
             },
             // show cloumns
             showColumnsByKeys (keys = []) {
-                this.$refs["briTable"].showColumnsByKeys(keys);
+                this.$refs.briTable.showColumnsByKeys(keys);
             }
         }
     };

package/src/components/list/DshFlatTable.vue

@@ -9,29 +9,62 @@
             :render="topSearchRender"
         ></dsh-render>
 
-        <!-- 表格 -->
-        <bri-table
-            v-show="showListData.length"
-            ref="briTable"
-            class="DshFlatTable-main"
-            :columns="showColumns"
-            :data="renderedListData"
-            :footer-data="footerData"
-            :propsObj="tablePropsObj"
-            @changeSelect="changeSelect"
-            @selectAll="changeSelect"
-        ></bri-table>
-        <bri-table
-            v-show="!showListData.length"
-            ref="briTable"
-            class="DshFlatTable-main"
-            :columns="showColumns"
-            :data="showListData"
-            :footer-data="footerData"
-            :propsObj="tablePropsObj"
-            @changeSelect="changeSelect"
-            @selectAll="changeSelect"
-        ></bri-table>
+        <!-- 表单展示模式 -->
+        <div
+            v-if="showMode === 'form'"
+            class="DshFlatTable-form"
+        >
+            <div
+                v-for="(row, rowIndex) in showListData"
+                :key="row._id"
+                class="item"
+            >
+                <dsh-form
+                    :canEdit="getRowCanEdit(row)"
+                    :formData="row"
+                    :formList="getRowFormList(row)"
+                    :allFormList="columns"
+                    :inTableType="inTableType"
+                    :allListRows="allListData"
+                    :rowIndex="rowIndex"
+                    :parentFormList="allFormList"
+                    :parentObj="parentObj"
+                ></dsh-form>
+
+                <dsh-icons
+                    v-if="$getOperationList(['canCreate', 'canDelete']).length"
+                    class="item-icons"
+                    itemClass="item-icons-item"
+                    :list="$getOperationList(['canCreate', 'canDelete'])"
+                    @click="$dispatchEvent($event, row, rowIndex)"
+                ></dsh-icons>
+            </div>
+        </div>
+
+        <!-- 表格展示模式 -->
+        <template v-else>
+            <bri-table
+                v-show="showListData.length"
+                ref="briTable"
+                class="DshFlatTable-main"
+                :columns="showColumns"
+                :data="renderedListData"
+                :footer-data="footerData"
+                :propsObj="tablePropsObj"
+                @changeSelect="changeSelect"
+                @selectAll="changeSelect"
+            ></bri-table>
+            <bri-table
+                v-show="!showListData.length"
+                class="DshFlatTable-main"
+                :columns="showColumns"
+                :data="showListData"
+                :footer-data="footerData"
+                :propsObj="tablePropsObj"
+                @changeSelect="changeSelect"
+                @selectAll="changeSelect"
+            ></bri-table>
+        </template>
 
         <!-- 添加行 -->
         <dsh-render :render="createOperationRender"></dsh-render>
@@ -58,6 +91,7 @@
 
                 <!-- 表格 -->
                 <bri-table
+                    v-show="showListData.length"
                     class="DshFlatTable-main"
                     :columns="showColumns"
                     :data="renderedListData"
@@ -66,6 +100,16 @@
                     @changeSelect="changeSelect"
                     @selectAll="changeSelect"
                 ></bri-table>
+                <bri-table
+                    v-show="!showListData.length"
+                    class="DshFlatTable-main"
+                    :columns="showColumns"
+                    :data="showListData"
+                    :footer-data="footerData"
+                    :propsObj="tablePropsObj"
+                    @changeSelect="changeSelect"
+                    @selectAll="changeSelect"
+                ></bri-table>
 
                 <!-- 添加行 -->
                 <dsh-render :render="createOperationRender"></dsh-render>
@@ -97,6 +141,13 @@
 
 <style lang="less" scoped>
     .DshFlatTable {
+        &-form {
+            .item {
+                border: 1px solid #E5E5E6;
+                margin-bottom: 5px;
+                position: relative;
+            }
+        }
 
         &-main {
             width: 100%;
@@ -110,3 +161,25 @@
         }
     }
 </style>
+<style lang="less">
+    .DshFlatTable {
+        &-form {
+            .item {
+                &-icons {
+                    position: absolute;
+                    top: -10px;
+                    right: -10px;
+                    line-height: 18px;
+                    z-index: 2;
+                    display: none;
+                }
+
+                &:hover {
+                    .item-icons {
+                        display: block !important;
+                    }
+                }
+            }
+        }
+    }
+</style>

package/src/components/list/DshTreeTable.vue

@@ -23,10 +23,9 @@
         ></bri-table>
         <bri-table
             v-show="!showListData.length"
-            ref="briTable"
             class="DshTreeTable-main"
             :columns="showColumns"
-            :data="renderedListData"
+            :data="showListData"
             :footer-data="footerData"
             :propsObj="tablePropsObj"
             @changeSelect="changeSelect"
@@ -58,6 +57,7 @@
 
                 <!-- 表格 -->
                 <bri-table
+                    v-show="showListData.length"
                     class="DshTreeTable-main"
                     :columns="showColumns"
                     :data="renderedListData"
@@ -66,6 +66,16 @@
                     @changeSelect="changeSelect"
                     @selectAll="changeSelect"
                 ></bri-table>
+                <bri-table
+                    v-show="!showListData.length"
+                    class="DshTreeTable-main"
+                    :columns="showColumns"
+                    :data="showListData"
+                    :footer-data="footerData"
+                    :propsObj="tablePropsObj"
+                    @changeSelect="changeSelect"
+                    @selectAll="changeSelect"
+                ></bri-table>
 
                 <!-- 添加行 -->
                 <dsh-render :render="createOperationRender"></dsh-render>

package/src/components/list/common/quoteListModal.vue

@@ -9,7 +9,7 @@
             :closable="true"
             :draggable="true"
         >
-            <div class="quoteListModal-drawer-body">
+            <div class="quoteListModal-body">
                 <div class="list">
                     <template v-if="listData.length">
                         <div
@@ -34,8 +34,8 @@
                 </div>
 
                 <dsh-buttons
-                    class="quoteListModal-drawer-body-btns"
-                    itemClass="quoteListModal-drawer-body-btns-item"
+                    class="quoteListModal-body-btns"
+                    itemClass="btns-item"
                     :list="$getOperationList()"
                     @click="$dispatchEvent($event)"
                 ></dsh-buttons>
@@ -74,12 +74,6 @@
                 curDataItem: undefined,
 
                 operationMap: {
-                    canReset: {
-                        name: "重 置",
-                        type: "canReset",
-                        size: "small",
-                        event: "clickReset"
-                    },
                     confirm: {
                         name: "确 认",
                         type: "confirm",
@@ -123,10 +117,6 @@
                 } else {
                     this.curDataItem = dataItem;
                 }
-            },
-            // 点击重置
-            clickReset () {
-
             },
             // 点击确认
             clickConfirm () {
@@ -155,47 +145,6 @@
 <style lang="less">
     .quoteListModal {
         &-drawer {
-            &-body {
-                width: 100%;
-                height: 100%;
-                padding: 20px;
-                overflow: auto;
-
-                .list {
-                    &-item {
-                        padding: 8px 12px;
-                        margin-bottom: 8px;
-                        border-radius: 4px;
-                        cursor: pointer;
-
-                        &-active {
-                            color: #ffffff;
-                            background-color: @theme-hover;
-                        }
-                    }
-
-                    &-nodata {
-                        #dsh-nodata();
-                    }
-                }
-
-                &-btns {
-                    position: absolute;
-                    bottom: 0px;
-                    left: 0px;
-                    .dsh-flex-row-start-stretch();
-                    width: calc(100% - 48px);
-                    height: 51px;
-                    margin: 25px 20px 25px 28px;
-
-                    &-item {
-                        flex: 1;
-                        margin: 5px;
-                        height: 40px;
-                    }
-                }
-            }
-
             .ivu-drawer-mask,
             .ivu-drawer-wrap {
                 z-index: 88888888;
@@ -212,5 +161,46 @@
                 font-weight: bold;
             }
         }
+
+        &-body {
+            width: 100%;
+            height: 100%;
+            padding: 20px;
+            overflow: auto;
+
+            .list {
+                &-item {
+                    padding: 8px 12px;
+                    margin-bottom: 8px;
+                    border-radius: 4px;
+                    cursor: pointer;
+
+                    &-active {
+                        color: #ffffff;
+                        background-color: @theme-hover;
+                    }
+                }
+
+                &-nodata {
+                    #dsh-nodata();
+                }
+            }
+
+            &-btns {
+                position: absolute;
+                bottom: 0px;
+                left: 0px;
+                .dsh-flex-row-start-stretch();
+                width: calc(100% - 48px);
+                height: 51px;
+                margin: 25px 20px 25px 28px;
+
+                .btns-item {
+                    flex: 1;
+                    min-width: 0px;
+                    height: 40px;
+                }
+            }
+        }
     }
 </style>

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

@@ -76,8 +76,9 @@ export default {
                         h("div", rowIndex + 1),
 
                         // 添加符
-                        // this.operationMap.canCreate && !this.isSearching && rowIndex !== this.allListData.length - 1
-                        this.operationMap.canCreate && !this.isSearching
+                        (this.operationMap.canCreate && this.operationMap.canCreate.disabled !== true) &&
+                            !this.isSearching
+                            // rowIndex !== this.allListData.length - 1
                             ? h("div", {
                                 style: {
                                     position: "absolute",
@@ -86,7 +87,7 @@ export default {
                                     display: "inline-block",
                                     width: "16px",
                                     height: " 16px",
-                                    border: "1px solid #dcdee2",
+                                    border: "1px solid #3DB8C5",
                                     backgroundColor: "#ffffff",
                                     lineHeight: "12px",
                                     cursor: "pointer",
@@ -96,7 +97,8 @@ export default {
                             }, [
                                 h("Icon", {
                                     style: {
-                                        fontWeight: "500"
+                                        fontWeight: "500",
+                                        color: "#3DB8C5"
                                     },
                                     props: {
                                         type: "md-add-circle", // "ios-add"
@@ -104,7 +106,7 @@ export default {
                                     },
                                     on: {
                                         click: () => {
-                                            this.clickCreate(this.operationMap.canCreate, row, rowIndex);
+                                            this.$dispatchEvent(this.operationMap.canCreate, row, rowIndex);
                                         }
                                     }
                                 })
@@ -119,7 +121,6 @@ export default {
     methods: {
         // 点击 -添加行
         clickCreate (operationItem, row, rowIndex) {
-            const list = this.allListData;
             const newRow = {
                 ...this.$deepCopy(this.selfRowDefault),
                 _id: this.$ObjectID().str,
@@ -128,9 +129,11 @@ export default {
                 __isTmpShow__: true,
                 __isSearchShow__: false
             };
-            const newRowIndex = rowIndex == null ? list.length : rowIndex + 1;
+            const list = this.data;
+            const newRowIndex = row
+                ? list.findIndex(rowItem => rowItem._id === row._id) + 1
+                : list.length;
             list.splice(newRowIndex, 0, newRow);
-            // this.$forceUpdate(); // 自定义页中点击添加一行没有更新页面
 
             this.change("createRow", null, newRow, newRowIndex);
         },
@@ -140,7 +143,7 @@ export default {
                 title: "提示",
                 content: "确定删除吗？",
                 onOk: () => {
-                    this.allListData.splice(rowIndex, 1);
+                    this.data.splice(rowIndex, 1);
 
                     this.change("deleteRow", null, row, rowIndex);
                 }

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

@@ -161,7 +161,47 @@ export default {
                         }, row.__treeIndex__),
 
                         // 添加符
-                        this.operationMap.canCreate && !this.isSearching && row.level < this.maxLevel
+                        (this.operationMap.canCreate && this.operationMap.canCreate.disabled !== true) &&
+                            !this.isSearching
+                            // rowIndex !== this.allListData.length - 1
+                            ? h("div", {
+                                style: {
+                                    position: "absolute",
+                                    bottom: "0px",
+                                    right: row.level < this.maxLevel ? "17px" : "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",
+                                        size: "14"
+                                    },
+                                    on: {
+                                        click: () => {
+                                            this.$dispatchEvent(this.operationMap.canCreate, row, rowIndex);
+                                        }
+                                    }
+                                })
+                            ])
+                            : h("span", ""),
+
+                        // 下级添加符
+                        (this.operationMap.canCreateChild && this.operationMap.canCreateChild.disabled !== true) &&
+                            !this.isSearching &&
+                            row.level < this.maxLevel
                             ? h("div", {
                                 style: {
                                     position: "absolute",
@@ -170,7 +210,7 @@ export default {
                                     display: "inline-block",
                                     width: "16px",
                                     height: " 16px",
-                                    border: "1px solid #dcdee2",
+                                    border: "1px solid #3DB8C5",
                                     backgroundColor: "#ffffff",
                                     lineHeight: "12px",
                                     cursor: "pointer",
@@ -180,15 +220,16 @@ export default {
                             }, [
                                 h("Icon", {
                                     style: {
-                                        fontWeight: "500"
+                                        fontWeight: "600",
+                                        color: "#3DB8C5"
                                     },
                                     props: {
-                                        type: "ios-add", // "md-add-circle"
+                                        type: "ios-add",
                                         size: "14"
                                     },
                                     on: {
                                         click: () => {
-                                            this.clickCreateChild(this.operationMap.canCreate, row, rowIndex);
+                                            this.$dispatchEvent(this.operationMap.canCreateChild, row, rowIndex);
                                         }
                                     }
                                 })
@@ -221,13 +262,35 @@ export default {
 
         // 点击 -添加一行
         clickCreate (operationItem, row, rowIndex) {
+            const newRow = {
+                ...this.$deepCopy(this.selfRowDefault),
+                _id: this.$ObjectID().str,
+                level: row ? row.level : 1,
+                isLeaf: true,
+                children: [],
+                // __old__: false,
+                __isExpand__: false,
+                __isRendered__: true,
+                __isShow__: true,
+                __isTmpShow__: false,
+                __isSearchShow__: false
+            };
+            const list = row
+                ? this.getParentNode(row, this.data).children
+                : this.data;
+            const newRowIndex = row
+                ? list.findIndex(rowItem => rowItem._id === row._id) + 1
+                : list.length;
+            list.splice(newRowIndex, 0, newRow);
 
+            this.change("createRow", null, newRow, newRowIndex);
         },
         // 点击 -添加子行
         clickCreateChild (operationItem, row, rowIndex) {
             const newRow = {
                 ...this.$deepCopy(this.selfRowDefault),
                 _id: this.$ObjectID().str,
+                level: row.level + 1,
                 isLeaf: true,
                 children: [],
                 // __old__: false,
@@ -237,21 +300,8 @@ export default {
                 __isTmpShow__: false,
                 __isSearchShow__: false
             };
-
-            // !row代表最上级节点
-            if (!row) {
-                this.data.push({
-                    ...newRow,
-                    level: 1
-                });
-            } else {
-                row.children.push({
-                    ...newRow,
-                    level: row.level + 1
-                });
-
-                this.toggleExpand(row, true);
-            }
+            row.children.push(newRow);
+            this.toggleExpand(row, true);
 
             this.change("createRow", null, newRow, row.children.length);
         },

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

@@ -137,11 +137,21 @@ export default {
                     name: "添加一行",
                     type: "canCreate",
                     btnType: "default",
+                    icon: "md-add-circle",
                     size: "default",
                     long: true,
                     disabled: false,
                     event: "clickCreate"
                 },
+                canCreateChild: {
+                    name: "添加子行",
+                    type: "canCreateChild",
+                    btnType: "default",
+                    size: "default",
+                    long: true,
+                    disabled: false,
+                    event: "clickCreateChild"
+                },
                 canDelete: {
                     name: "删除",
                     type: "canDelete",
@@ -193,7 +203,7 @@ export default {
                 _useIndex: true, // 使用序号列
                 _useSummary: false, // 使用汇总行
                 _disabledBtns: false, // 禁用增删按钮
-                _disabledCreateBtn: false, // 置灰新增按钮，目前只内部使用，comp_web数据表配置页那块
+                // _disabledCreateBtn: false, // 置灰新增按钮，目前只内部使用，comp_web数据表配置页那块
                 _disabledOldDataRow: false, // 置灰老数据行包含删除
 
                 _hideColKeys: [], // 隐藏／查看列字段的keys
@@ -223,9 +233,12 @@ export default {
                 ...this.commonPropsObj
             };
         },
+        showMode () {
+            return this.selfPropsObj._showMode;
+        },
         inTableType () {
-            return this.controlType === "cascaderTable" && ["treeTable"].includes(this.selfPropsObj._showMode)
-                ? this.selfPropsObj._showMode
+            return this.controlType === "cascaderTable" && ["treeTable"].includes(this.showMode)
+                ? this.showMode
                 : this.controlType;
         },
         // isShare () {
@@ -258,9 +271,9 @@ export default {
         disabledBtns () {
             return this.selfPropsObj._disabledBtns;
         },
-        disabledCreateBtn () {
-            return this.selfPropsObj._disabledCreateBtn;
-        },
+        // disabledCreateBtn () {
+        //     return this.selfPropsObj._disabledCreateBtn;
+        // },
         disabledOldDataRow () {
             return this.selfPropsObj._disabledOldDataRow;
         },
@@ -604,11 +617,15 @@ export default {
                 canHideOrShow: {
                     ...this.topOperationMap.canHideOrShow,
                     name: this.hideStatus ? "显示字段" : "隐藏字段"
-                },
-                canCreate: {
-                    ...this.baseOperationMap.canCreate,
-                    disabled: !!this.disabledCreateBtn
                 }
+                // canCreate: {
+                //     ...this.baseOperationMap.canCreate,
+                //     disabled: !!this.disabledCreateBtn
+                // },
+                // canCreateChild: {
+                //     ...this.baseOperationMap.canCreateChild,
+                //     disabled: !!this.disabledCreateBtn
+                // }
             };
         },
         operationMap () {
@@ -657,6 +674,7 @@ export default {
             this.initFlag = true;
             this.showRuleMessage = false;
             this.ruleRecordMap = {};
+            this.selfReset && this.selfReset();
         },
         // 共外部使用
         validate () {
@@ -688,15 +706,15 @@ export default {
 
         /* ----------- 隐藏／显示字段 ---------- */
         toggleHideOrShow () {
-            if (this.$refs["briTable"]) {
+            if (this.$refs.briTable) {
                 if (this.hideStatus === true) {
-                    this.$refs["briTable"].showColumnsByKeys(this.hideColKeys);
+                    this.$refs.briTable.showColumnsByKeys(this.hideColKeys);
                 } else {
-                    this.$refs["briTable"].hideColumnsByKeys(this.hideColKeys);
+                    this.$refs.briTable.hideColumnsByKeys(this.hideColKeys);
                 }
-            }
 
-            this.hideStatus = !this.hideStatus;
+                this.hideStatus = !this.hideStatus;
+            }
         },
 
         /* ----------- 全屏 ---------- */
@@ -753,7 +771,8 @@ export default {
                             ...fieldVal,
                             list: fieldVal.list.map(item => ({
                                 ...item,
-                                __isQuote__: true
+                                __isQuote__: true,
+                                __old__: false
                             }))
                         };
                     } else if (["cascaderTable"].includes(this.controlType)) {
@@ -762,7 +781,8 @@ export default {
                                 list.map(item => ({
                                     ...item,
                                     children: item.children ? loop(item.children) : item.children,
-                                    __isQuote__: true
+                                    __isQuote__: true,
+                                    __old__: false
                                 }));
 
                             return loop(list);
@@ -776,7 +796,6 @@ export default {
 
                     this.$Message.success("引用成功！");
                     this.reset();
-                    this.selfReset && this.selfReset();
                     this.change("quote");
                 }
             } else {
@@ -1060,6 +1079,17 @@ export default {
             return this.getRowCanEdit(row) &&
                 this.getColCanEdit(col, row) &&
                 this.$isAdvRelyShow(col, row, this.parentObj, true);
+        },
+        getRowFormList (row) {
+            return this.columns.map(column => {
+                column = this.$transformDynamicProperty(column, row, this.parentObj);
+                const unitCanEdit = this.getColCanEdit(column, row);
+
+                return {
+                    ...column,
+                    canEdit: unitCanEdit
+                };
+            });
         }
     }
 };

package/src/utils/table.js

@@ -8,12 +8,12 @@ const getHeadRender = function (h, column, {
     return h("div", {
         style: {
             display: "inline-block",
-            maxWidth: `calc(100% - ${column.sortBy || column.sortBy === "" || !!column.filter ? 10 : 0}px)`,
+            maxWidth: `calc(100% - ${column.sortBy || column.sortBy === "" || !!column.filter ? 4 : 0}px)`,
             paddingLeft: "8px",
-            paddingRight: `${(column.sortBy || column.sortBy === "" || !!column.filter ? 0 : 8) + (column._description ? 18 : 0)}px`,
+            paddingRight: `${8 + (column._description ? 18 : 0)}px`,
             verticalAlign: "middle",
             position: "relative",
-            marginRight: `${column.sortBy || column.sortBy === "" || !!column.filter ? 10 : 0}px`
+            marginRight: `${column.sortBy || column.sortBy === "" || !!column.filter ? 4 : 0}px`
         }
     }, [
         showRequired && column._required && h("i", {
@@ -161,7 +161,7 @@ const transformToColumns = function (form, {
 
                 ...col
             };
-    });
+        });
 };
 
 export default {