bri-components 1.3.23 → 1.3.25

package/src/components/list/DshTreeTable.vue

@@ -0,0 +1,217 @@
+<template>
+    <div class="DshTreeTable">
+        <bri-table
+            class="DshTreeTable-main"
+            :columns="showColumns"
+            :data="listData"
+            :footer-data="footerData"
+            :propsObj="tablePropsObj"
+            @changeSelect="changeSelect"
+            @selectAll="changeSelect"
+        ></bri-table>
+    </div>
+</template>
+
+<script>
+    import DshFlatTableMixin from "./mixins/DshFlatTableMixin.js";
+    import tableMixin from "./mixins/tableMixin.js";
+    import DshListUnit from "../unit/DshListUnit.vue";
+
+    export default {
+        name: "DshTreeTable",
+        mixins: [
+            DshFlatTableMixin,
+            tableMixin
+        ],
+        components: {
+            DshListUnit
+        },
+        props: {},
+        data () {
+            return {};
+        },
+        computed: {
+            listData () {
+                return this.$getTreeFlatArr(this.data, "__isExpand__");
+            },
+
+            selfPropsObj () {
+                return {
+                    ...this.commonPropsObj,
+
+                    _maxLevel: this.commonPropsObj._maxLevel || 3
+                };
+            },
+            maxLevel () {
+                return this.selfPropsObj._maxLevel;
+            },
+            tablePropsObj () {
+                return {
+                    maxHeight: this.contentHeight,
+                    // rowStyleOption: {
+                    //     hoverHighlight: true,
+                    //     clickHighlight: true,
+                    //     stripe: true // 斑马纹
+                    // },
+                    cellStyleOption: {
+                        bodyCellClass: ({ row, column, rowIndex }) => {
+                            return "bri-table-td" +
+                                `${
+                                    this.canEdit
+                                        ? " bri-table-td-edit"
+                                        : " bri-table-td-show"
+                                }` +
+                                `${
+                                    ["__isExpand__"].includes(column._key)
+                                        ? " bri-table-td-normal"
+                                        : ["__index__"].includes(column._key)
+                                            ? " bri-table-td-index"
+                                            : ""
+                                }`;
+                        }
+                    },
+                    // 通过实例方法 hideColumnsByKeys(keys)将列隐藏，通过实例方法 showColumnsByKeys(keys)将隐藏的列显示
+                    columnHiddenOption: {
+                        defaultHiddenColumnKeys: []
+                    }
+                };
+            },
+            showColumns () {
+                return [
+                    ...(this.useSelection === true ? [this.selectionColumn] : []),
+                    this.expandColumn,
+                    ...(this.useIndex === true ? [this.indexColumn] : []),
+                    ...this.$transformToColumns(this.contentColumns),
+                    ...(this.$getOperationList(["canDelete"]).length ? [this.operationColumn] : [])
+                ];
+            },
+            expandColumn () {
+                return {
+                    // title: "开／合",
+                    _key: "__isExpand__",
+                    key: "__isExpand__",
+                    field: "__isExpand__",
+                    width: 46,
+                    align: "center",
+                    fixed: "left",
+                    renderBodyCell: ({ row, column, rowIndex }, h) => {
+                        return row.children && row.children.length
+                            ? h("Icon", {
+                                style: {
+                                    width: "14px",
+                                    height: "14px",
+                                    cursor: "pointer",
+                                    transform: row.__isExpand__ ? "rotate(90deg)" : "rotate(0deg)",
+                                    transition: "transform 0.4s"
+                                },
+                                props: {
+                                    type: "ios-arrow-forward",
+                                    size: "14"
+                                },
+                                on: {
+                                    click: () => {
+                                        this.toggleExpand(row, !row.__isExpand__);
+                                    }
+                                }
+                            })
+                            : h("span", "");
+                    }
+                };
+            },
+            indexColumn () {
+                return {
+                    title: "序号",
+                    _key: "__index__",
+                    key: "__index__",
+                    field: "__index__",
+                    width: 28 + 16 + (this.maxLevel - 1) * 36,
+                    align: "left",
+                    fixed: "left",
+                    renderBodyCell: ({ row, column, rowIndex }, h) => {
+                        return [
+                            h("div", {
+                                style: {
+                                    paddingLeft: `${(row.level - 1) * 16}px`,
+                                    fontWeight: "500"
+                                }
+                            }, row.__treeIndex__),
+
+                            // 添加符
+                            row.level < this.maxLevel
+                                ? h("div", {
+                                    style: {
+                                        position: "absolute",
+                                        bottom: "0px",
+                                        right: "0px",
+                                        display: "inline-block",
+                                        width: "16px",
+                                        height: " 16px",
+                                        border: "1px solid #dcdee2",
+                                        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"
+                                        },
+                                        props: {
+                                            type: "ios-add", // "md-add-circle"
+                                            size: "14"
+                                        },
+                                        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);
+                                            }
+                                        }
+                                    })
+                                ])
+                                : h("span", "")
+                        ];
+                    }
+                };
+            }
+        },
+        created () {},
+        methods: {
+            toggleExpand (row, bool = true) {
+                this.$set(row, "__isExpand__", bool);
+
+                // this.$set(row, "__isRendered__", true);
+                // row.children.forEach(subRow => {
+                //     this.$set(subRow, "__isShow__", bool);
+                // });
+            }
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+    .DshTreeTable {
+        &-main {
+            width: 100%;
+            height: auto;
+        }
+
+        &-create {
+            margin-top: 8px;
+        }
+    }
+</style>

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

@@ -30,13 +30,20 @@ export default {
                 return {};
             }
         },
-        parentObj: {
+        propsObj: {
             type: Object,
             default () {
                 return {};
             }
         },
-        propsObj: {
+
+        parentFormList: {
+            type: Array,
+            default () {
+                return [];
+            }
+        },
+        parentObj: {
             type: Object,
             default () {
                 return {};
@@ -80,7 +87,7 @@ export default {
                 _heightAuto: false, // 单元格高度自适应
                 _useSelection: false, // 使用选择列
                 _useIndex: true, // 使用序号列
-                _useSummary: false, // 使用汇总行
+                _useSummary: true, // 使用汇总行
                 _disabledBtns: false, // 禁用增删按钮
                 _disabledCreateBtn: false, // 置灰新增按钮，目前只内部使用，comp_web数据表配置页那块
                 _disabledOldDataRow: false, // 置灰老数据行包含删除
@@ -115,6 +122,7 @@ export default {
         },
 
         filterColumns () {
+            console.log(this.listData);
             return this.columns.filter(col => this.$isAdvRelyShow(col, this.listData, this.parentObj, true));
         },
         selfRowDefault () {
@@ -174,10 +182,15 @@ export default {
         /* --------------- 工具方法 ------------- */
         getRowCanEdit (row) {
             return this.canEdit && // 是否是编辑状态
-            (!this.disabledOldDataRow || !!row.__isCreate__); // 是否让老数据行置灰
+            (this.disabledOldDataRow ? !!row.__isCreate__ : true); // 是否让老数据行置灰
         },
         getColCanEdit (col, row) {
-            return (!col.dependRowCanEdit || row.canEdit !== false);// 在老数据行里某些列不可编辑
+            return col.dependRowCanEdit ? row.canEdit !== false : true;// 在老数据行里某些列不可编辑
+        },
+        getUnitCanEdit (col, row) {
+            return this.getRowCanEdit(row) &&
+                this.getColCanEdit(col, row) &&
+                this.$isAdvRelyShow(col, row, this.parentObj, true);
         },
         isShowCompare (col, row, oldRow = {}) {
             return this.useCampare && ["number"].includes(col._type) &&

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

@@ -0,0 +1,279 @@
+export default {
+    mixins: [],
+    components: {},
+    props: {},
+    data () {
+        return {};
+    },
+    computed: {
+        footerData () {
+            if (this.useSummary && this.listData.length) {
+                return [
+                    this.filterColumns.reduce((obj, col) => {
+                        return {
+                            ...obj,
+                            [col._key]: col._type === "number"
+                                ? this.$calNumList(this.listData.map(item => item[col._key]), col._summaryType, { ...col, _defaultDigit: 2 })
+                                : (obj[col._key] || "--")
+                        };
+                    }, {
+                        _id: this.$ObjectID().str,
+                        __index__: "汇总",
+                        __isExpand__: "-",
+                        __operation__: "——"
+                    })
+                ];
+            } else {
+                return [];
+            }
+        },
+
+        tablePropsObj () {
+            return {
+                maxHeight: this.contentHeight,
+                cellStyleOption: {
+                    bodyCellClass: ({ row, column, rowIndex }) => {
+                        return "bri-table-td" +
+                            `${this.canEdit
+                                ? " bri-table-td-edit"
+                                : " bri-table-td-show"
+                            }`;
+                    }
+                }
+            };
+        },
+        selfPropsObj () {
+            return {
+                ...this.commonPropsObj
+            };
+        },
+        showRequired () {
+            return this.selfPropsObj._showRequired;
+        },
+        showDescription () {
+            return this.selfPropsObj._showDescription;
+        },
+        headHeightAuto () {
+            return this.selfPropsObj._headHeightAuto;
+        },
+        heightAuto () {
+            return this.selfPropsObj._heightAuto;
+        },
+
+        showColumns () {
+            return [
+                ...(this.useSelection === true ? [this.selectionColumn] : []),
+                ...(this.useIndex === true ? [this.indexColumn] : []),
+                ...this.$transformToColumns(this.contentColumns),
+                ...(this.$getOperationList(["canDelete"]).length ? [this.operationColumn] : [])
+            ];
+        },
+        selectionColumn () {
+            return {
+                _key: "__selection__",
+                key: "__selection__",
+                field: "__selection__",
+                type: "checkbox",
+                width: 66,
+                align: "center",
+                fixed: "left"
+            };
+        },
+        indexColumn () {
+            return {
+                title: "序号",
+                _key: "__index__",
+                key: "__index__",
+                field: "__index__",
+                width: 76,
+                align: "center",
+                fixed: "left",
+                renderBodyCell: ({ row, column, rowIndex }) => ++rowIndex
+            };
+        },
+        operationColumn () {
+            return {
+                title: "操作",
+                _key: "__operation__",
+                key: "__operation__",
+                field: "__operation__",
+                align: "center",
+                fixed: "right",
+                width: 100,
+                renderBodyCell: ({ row, column, rowIndex }, h) => {
+                    const operationList = this.$getOperationList(["canDelete"]);
+
+                    return h("dsh-buttons", {
+                        props: {
+                            list: operationList.map(btnItem => ({
+                                ...btnItem,
+                                disabled: this.disabledOldDataRow && !row.__isCreate__
+                            }))
+                        },
+                        on: {
+                            click: (operationItem) => {
+                                this.$dispatchEvent(operationItem, row, rowIndex, this.listData);
+                            }
+                        }
+                    });
+                }
+            };
+        },
+        contentColumns () {
+            return this.filterColumns.map(colItem => ({
+                filter: undefined,
+                sortBy: undefined,
+                renderBodyCell: ({ row, column, rowIndex }, h) => {
+                    column = this.$transformFieldProperty(column, row, this.parentObj);
+                    column = this.resetCol(column, row);
+                    const unitCanEdit = this.getUnitCanEdit(column, row);
+
+                    return [
+                        this.isShowCompare(column, row, this.oldListData[rowIndex])
+                            ? h("Tooltip", {
+                                style: {
+                                    width: "100%"
+                                },
+                                props: {
+                                    content: this.$isEmptyData(this.oldListData[rowIndex][column._key])
+                                        ? ""
+                                        : this.oldListData[rowIndex][column._key],
+                                    transfer: true,
+                                    maxWidth: 200,
+                                    placement: "top"
+                                },
+                                scopedSlots: {
+                                    default: props => h("dsh-list-unit", {
+                                        props: {
+                                            canEdit: unitCanEdit,
+                                            formData: row,
+                                            formItem: column,
+                                            rowIndex: rowIndex,
+                                            allFormList: this.columns,
+                                            parentListData: this.listData,
+                                            parentFormList: this.parentFormList,
+                                            parentObj: this.parentObj
+                                        },
+                                        on: {
+                                            blur: () => this.controlBlur(null, column, row, arguments),
+                                            change: () => this.$dispatchEvent(this.operationMap.changeVal, column, row, rowIndex, arguments)
+                                        }
+                                    })
+                                }
+                            })
+                            : h("dsh-list-unit", {
+                                props: {
+                                    canEdit: unitCanEdit,
+                                    formData: row,
+                                    formItem: column,
+                                    rowIndex: rowIndex,
+                                    allFormList: this.columns,
+                                    parentListData: this.listData,
+                                    parentFormList: this.parentFormList,
+                                    parentObj: this.parentObj
+                                },
+                                on: {
+                                    blur: () => this.controlBlur(null, column, row, arguments),
+                                    change: () => this.$dispatchEvent(this.operationMap.changeVal, column, row, rowIndex, arguments)
+                                }
+                            }),
+
+                        !this.getColRuleResult(column, row).bool
+                            ? h("span", {
+                                class: "bri-table-td-tip"
+                            }, this.getColRuleResult(column, row).message)
+                            : undefined
+                    ];
+                },
+                renderHeaderCell: ({ column }, h) => {
+                    column = this.$transformFieldProperty(column, undefined, this.parentObj);
+
+                    return this.$getHeadRender(h, column, {
+                        showRequired: this.showRequired,
+                        showDescription: this.showDescription,
+                        headHeightAuto: this.headHeightAuto
+                    });
+                },
+                ...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"
+                },
+                // expand: {
+                //     name: "展开",
+                //     type: "expand",
+                //     event: "clickExpand"
+                // },
+                changeVal: {
+                    name: "改变输入框值",
+                    type: "changeVal",
+                    event: "changeVal"
+                }
+            };
+        }
+    },
+    created () { },
+    methods: {
+        // 点击 -添加行
+        clickCreate (operationItem, row, index, list) {
+            const newRow = {
+                ...this.$deepCopy(this.selfRowDefault),
+                __isCreate__: true,
+                _id: this.$ObjectID().str
+            };
+            const newRowIndex = index == null ? list.length : index + 1;
+            list.splice(newRowIndex, 0, newRow);
+            this.$forceUpdate(); // 自定义页中点击添加一行没有更新页面
+
+            this.change("createRow", null, newRow, newRowIndex);
+        },
+        changeSelect (list) {
+            this.$emit("changeSelect", list);
+        },
+        // 表单控件值改变
+        changeVal (operationItem, col, row, rowIndex, params) {
+            this.$set(this.ruleRecordMap, `${row._id}dsh${col._key}`, { showRuleMessage: true });
+            this.change("changeVal", col, row, rowIndex, ...params);
+        },
+        // 表单控件失去焦点
+        controlBlur (operationItem, col, row, params) {
+            this.$set(this.ruleRecordMap, `${row._id}dsh${col._key}`, { showRuleMessage: true });
+        },
+
+        resetCol (col, row) {
+            let resetMap = {
+                select: {
+                    _optionKind: "dropdown"
+                },
+                checkbox: {
+                    _optionKind: "dropdown"
+                }
+            };
+            return {
+                ...col,
+                ...(resetMap[col._type] || {}),
+                // isShare: this.isShare,
+                _heightAuto: this.heightAuto
+            };
+        }
+    }
+};

package/src/components/unit/DshFormUnit.vue

@@ -77,6 +77,10 @@
                     :value="formData"
                     :propsObj="formItem"
                     :allFormList="allFormList"
+                    :rowIndex="rowIndex"
+                    :parentListData="parentListData"
+                    :parentFormList="parentFormList"
+                    :parentObj="parentObj"
                     @change="change"
                     @refChange="refChange"
                     @changeField="changeField"

package/src/components/unit/DshListUnit.vue

@@ -23,9 +23,11 @@
                     size: 'default',
                     inTable: true
                 }"
-                :rowIndex="rowIndex"
                 :allFormList="allFormList"
+                :rowIndex="rowIndex"
                 :parentListData="parentListData"
+                :parentFormList="parentFormList"
+                :parentObj="parentObj"
                 @blur="blur"
                 @change="change"
             ></component>
@@ -47,14 +49,7 @@
                 default: false
             },
 
-            indexStr: String,
-            rowIndex: Number,
-            parentListData: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            }
+            indexStr: String
         },
         data () {
             return {};

package/src/components/unit/unitMixin.js

@@ -24,6 +24,26 @@ export default {
             default () {
                 return [];
             }
+        },
+
+        rowIndex: Number,
+        parentListData: {
+            type: Array,
+            default () {
+                return [];
+            }
+        },
+        parentFormList: {
+            type: Array,
+            default () {
+                return [];
+            }
+        },
+        parentObj: {
+            type: Object,
+            default () {
+                return {};
+            }
         }
     },
     data () {

package/src/index.js

@@ -16,6 +16,7 @@ import DshTable from "./components/list/DshBox/DshTable.vue";
 import DshPage from "./components/list/DshPage.vue";
 import DshCrossTable from "./components/list/DshBox/DshCrossTable.vue";
 // import DshCascaderTable from "./components/list/DshCascaderTable.vue";
+// import DshTreeTable from "./components/list/DshTreeTable.vue";
 
 // form
 import DshForm from "./components/form/DshForm.vue";
@@ -230,6 +231,7 @@ export {
 
     DshFlatTable,
     // DshCascaderTable,
+    // DshTreeTable,
 
     BriCard,
     BriTree,

package/src/styles/components/list/BriTable.less

@@ -63,7 +63,7 @@
                     }
                     
                     // tbody.ve-table-body tr.ve-table-body-tr td.ve-table-body-td {
-                    //     padding: 4px 20px;
+                    //     padding: 4px 12px;
                     // }
                 }
             }
@@ -120,7 +120,7 @@
             line-height: 1;
             color: #ed4014;
             position: absolute;
-            top: calc(100% -15px);
+            top: calc(100% - 13px);
             left: 0px;
         }
 
@@ -146,6 +146,14 @@
         }
         &-show {
             padding: 4px 20px!important;
+            // padding: 4px 12px!important;
+        }
+        &-normal {
+            padding: 4px 8px!important;
+            // padding: 4px 12px!important;
+        }
+        &-index {
+            padding: 4px 16px 4px 12px!important;
         }
     }
 }

package/src/styles/global/text.less

@@ -34,7 +34,7 @@
     color: @textColor;
 }
 .dsh-hide {
-    display: none;;
+    display: none!important;
 }
 .dsh-subtip {
     width: 100%;