bri-components 1.0.5 → 1.1.0

package/src/components/list/BriTable.vue

@@ -0,0 +1,184 @@
+<template>
+    <div class="bri-table">
+        <ve-table
+            class="bri-table-content"
+            :class="[selfClassName, selfPropsObj.className]"
+            :table-data="data"
+            :footer-data="footerData"
+            :columns="columnsList"
+            :show-header="selfPropsObj.showHeader"
+            :fixed-header="selfPropsObj.fixedHeader"
+            :fixed-footer="selfPropsObj.fixedFooter"
+            :scroll-width="selfPropsObj.scrollWidth"
+            :max-height="selfPropsObj.maxHeight"
+            :row-key-field-name="selfPropsObj.rowKeyFieldName"
+            :border-around="selfPropsObj.borderAround"
+            :border-x="selfPropsObj.borderX"
+            :border-y="selfPropsObj.borderY"
+            :cellSpanOption="selfPropsObj.cellSpanOption"
+            :columnHiddenOption="selfPropsObj.columnHiddenOption"
+            :cellStyleOption="cellStyleOption"
+            :rowStyleOption="rowStyleOption"
+            :expandOption="selfPropsObj.expandOption"
+            :checkbox-option="checkboxOption"
+            :radioOption="selfPropsObj.radioOption"
+            :sortOption="sortOption"
+            :cellSelectionOption="selfPropsObj.cellSelectionOption"
+            :editOption="selfPropsObj.editOption"
+            :contextmenuHeaderOption="selfPropsObj.contextmenuHeaderOption"
+            :contextmenuBodyOption="selfPropsObj.contextmenuBodyOption"
+            :event-custom-option="eventCustomOption"
+            :cellAutofillOption="selfPropsObj.cellAutofillOption"
+            :clipboardOption="selfPropsObj.clipboardOption"
+            :columnWidthResizeOption="columnWidthResizeOption"
+        ></ve-table>
+        <!-- loading -->
+        <div v-if="isLoading" class="bri-table-empty bri-table-loading">
+            <slot name="loading">正在加载中，请稍后...</slot>
+        </div>
+        <!-- empty -->
+        <div v-else-if="!data.length" class="bri-table-empty">
+            <slot name="empty">{{ noDataText }}</slot>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "BriTable",
+        props: {
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            isLoading: Boolean,
+            noDataText: {
+                type: String,
+                default: "暂无数据"
+            },
+            columns: Array,
+            data: Array,
+            footerData: Array
+        },
+        data () {
+            // 中文文档https://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/api
+            return {
+            };
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    rowKeyFieldName: "_id",
+                    scrollWidth: "0",
+                    borderY: true,
+                    cellSelectionOption: {
+                        enable: false
+                    },
+                    ...this.propsObj
+                };
+            },
+            columnsList () {
+                return this.columns;
+            },
+
+            // 当前表格状态
+            currentState () {
+                return this.propsObj.state || this.state;
+            },
+            selfClassName () {
+                if (this.loading || !this.data.length) {
+                    return "bri-table-onlyhead";
+                } else {
+                    return "";
+                }
+            },
+
+            rowStyleOption () {
+                return {
+                    clickHighlight: false,
+                    ...(this.propsObj.rowStyleOption || {})
+                };
+            },
+
+            cellStyleOption () {
+                return {
+                    headerCellClass: () => {
+                        return "bri-table-th";
+                    },
+                    bodyCellClass: ({rowIndex}) => {
+                        return "bri-table-td";
+                    },
+                    ...(this.propsObj.cellStyleOption || {})
+                };
+            },
+            // 自定义表格事件，也可配置鼠标事件
+            eventCustomOption () {
+                return {
+                    bodyRowEvents: ({ row, rowIndex }) => {
+                        return {
+                            click: (event) => {
+                                this.$emit("click-row", row, rowIndex, event);
+                            },
+                            dblclick: (event) => {
+                                this.$emit("db-click-row", row, rowIndex, event);
+                            }
+                        };
+                    },
+                    ...(this.propsObj.eventCustomOption || {})
+                };
+            },
+            // 全选配置项
+            checkboxOption () {
+                return {
+                    // 行选择改变事件
+                    selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
+                        this.$emit(
+                            "selectChange",
+                            this.data.filter(dataItem => selectedRowKeys.includes(dataItem[this.selfPropsObj.rowKeyFieldName])),
+                            { row, isSelected, selectedRowKeys }
+                        );
+                    },
+                    // 全选改变事件
+                    selectedAllChange: ({ isSelected, selectedRowKeys }) => {
+                        this.$emit(
+                            "selectAll",
+                            this.data.filter(dataItem => selectedRowKeys.includes(dataItem[this.selfPropsObj.rowKeyFieldName])),
+                            { isSelected, selectedRowKeys }
+                        );
+                    },
+                    ...(this.propsObj.checkboxOption || {})
+                };
+            },
+            // 列宽改变设置项
+            columnWidthResizeOption () {
+                return {
+                    enable: true,
+                    minWidth: 80,
+                    sizeChange: ({ column, differWidth, columnWidth }) => {
+                        this.$emit("size-change", column, differWidth, columnWidth);
+                    },
+                    ...(this.propsObj.columnWidthResizeOption || {})
+                };
+            },
+            sortOption () {
+                return {
+                    sortChange: (params) => {
+                        let sortObj =
+                            Object.keys(params)
+                                .filter(attr => !!params[attr])
+                                .reduce((obj, attr) => {
+                                    return { sortType: params[attr], field: attr };
+                                }, {});
+                        this.$emit("sort-change", sortObj);
+                    },
+                    ...(this.propsObj.sortOption || {})
+                };
+            }
+        },
+        mounted () {
+        },
+        methods: {}
+    };
+</script>

package/src/components/list/DshBox/DshPanel.vue

@@ -1,9 +1,9 @@
 <template>
     <div class="DshPanel">
         <div
-            class="DshPanel-group"
             v-for="(groupItem, groupIndex) in data"
             :key="groupIndex"
+            class="DshPanel-group"
         >
             <!-- 组 标头 -->
             <div
@@ -192,10 +192,9 @@
 
                 getBgColor (groupItem) {
                     return this.groupFieldObj._useColor
-                        ? this.colorMap[(this.groupFieldObj._data.find(item => item._key === groupItem._key) || { color: "color-default" }).color]
-                        : "color-default";
-                },
-                colorMap: resourceData.colorMap
+                        ? resourceData.colorMap[(this.groupFieldObj._data.find(item => item._key === groupItem._key) || { color: "color-default" }).color]
+                        : resourceData.colorMap["color-default"];
+                }
             };
         },
         computed: {
@@ -385,10 +384,6 @@
                     height: 40px;
                     padding: 0px 10px;
                     text-align: center;
-
-                    .ivu-btn {
-                        background: transparent;
-                    }
                 }
             }
         }

package/src/components/list/DshBox/DshTable.vue

@@ -3,26 +3,18 @@
         class="DshTable"
         style="width: 100%; height: 100%;"
     >
-        <ev-table
+        <bri-table
             :className="propsObj.className"
             :data="data"
-            :columnsList="selfColumns"
-            :fixTitle="fixTitle"
-            :showSort="propsObj.showSort"
-            :tableBgColor="propsObj.tableBgColor"
-            :title-bg-color="propsObj.titleBgColor"
-            :title-font-color="propsObj.titleFontColor"
-            :odd-bg-color="propsObj.oddBgColor"
-            :even-bg-color="propsObj.evenBgColor"
-            :row-hover-color="propsObj.rowHoverColor"
-            :row-click-color="propsObj.rowClickColor"
-            :noDataText="propsObj.noDataText"
-            :is-loading="propsObj.isLoading"
-            :selectChange="changeSelect"
-            :selectAll="changeSelect"
+            :columns="selfColumns"
+            :propsObj="propsObj"
+            :isLoading="isLoading"
+            :noDataText="noDataText"
+            @selectChange="changeSelect"
+            @selectAll="changeSelect"
             @click-row="clickRow"
             @sort-change="changeSort"
-        ></ev-table>
+        ></bri-table>
     </div>
 </template>
 
@@ -59,7 +51,9 @@
                 default () {
                     return {};
                 }
-            }
+            },
+            isLoading: Boolean,
+            noDataText: String
         },
         data () {
             return {};
@@ -99,26 +93,24 @@
                         ...(
                             this.multiple
                                 ? [{
-                                    title: "多选",
-                                    _name: "多选",
-                                    type: "selection",
-                                    width: 45,
-                                    titleAlign: "left",
-                                    columnAlign: "left",
-                                    isFrozen: true
+                                    field: "selection",
+                                    key: "selection",
+                                    type: "checkbox",
+                                    width: 66,
+                                    align: "center",
+                                    fixed: "left"
                                 }]
                                 : []
                         ),
                         {
-                            field: "custome",
                             title: "序号",
-                            _name: "序号",
-                            width: 67,
-                            titleAlign: "center",
-                            columnAlign: "center",
-                            isFrozen: true,
-                            formatter: function (rowData, rowIndex, pagingIndex, field) {
-                                return rowIndex + 1;
+                            field: "custome",
+                            key: "customes",
+                            width: 78,
+                            align: "center",
+                            fixed: "left",
+                            renderBodyCell: ({ row, column, rowIndex }, h) => {
+                                return ++rowIndex;
                             }
                         },
 
@@ -129,8 +121,10 @@
                                 ? [
                                     {
                                         title: "操作",
-                                        _name: "操作",
-                                        type: "expend",
+                                        field: "operation",
+                                        key: "operation",
+                                        align: "center",
+                                        fixed: "right",
                                         width: Math.max(
                                             // 漏在外部按钮的宽度
                                             this.selfOperationList
@@ -141,11 +135,7 @@
                                                 4 // 留出4px空间，避免麻烦问题
                                             , 80
                                         ),
-                                        titleAlign: "center",
-                                        columnAlign: "center",
-                                        componentName: "dsh-td-render",
-                                        isFrozenRight: true,
-                                        render: (h, params) => {
+                                        renderBodyCell: (params, h) => {
                                             const totalOperationList = this.selfOperationList.map(operationItem => {
                                                 return {
                                                     ...operationItem,

package/src/components/list/DshCascaderTable.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        :class="`DshCascaderTable control-${mode}`"
+        class="DshCascaderTable"
         ref="DshCascaderTable"
     >
         <div :class="{
@@ -149,7 +149,6 @@
                                                 :style="getTdStyle(col, row)"
                                             >
                                                 <dsh-unit
-                                                    :mode="mode"
                                                     :canEdit="canEdit && (col.canEdit === undefined ? true : col.canEdit)"
                                                     :formData="row[col.nodeKey]"
                                                     :formItem="col"
@@ -186,10 +185,6 @@
             DshUnit
         },
         props: {
-            mode: {
-                type: String,
-                default: "default"
-            },
             useCol: {
                 type: Boolean,
                 default: false
@@ -232,7 +227,7 @@
         },
         data () {
             return {
-                widthMap: this.$getModFieldPropertyMap("unitWidth"),
+                widthMap: this.$getModFieldPropertyMap("width"),
                 boxWidth: 0,
                 getColOperationNames (col) {
                     return [
@@ -342,7 +337,7 @@
             },
 
             treeData () {
-                return this.transformTreeData();
+                return this.transforBriTreeData();
             },
             columns () {
                 return this.transformColumns(this.treeColumns);
@@ -520,7 +515,7 @@
             deleteSelfAndChildNodes (operationItem, row, rowIndex, col) {
                 let nodeData = this.getNodeData(row, rowIndex, col);
                 nodeData.brotherList.splice(nodeData.index, 1);
-                // 此处应该判断子节点是否是最后一个，是的话就要添加一个一直到叶子节点，不过现在只需要添加一个子节点，transformTreeData会捎带着处理了
+                // 此处应该判断子节点是否是最后一个，是的话就要添加一个一直到叶子节点，不过现在只需要添加一个子节点，transforBriTreeData会捎带着处理了
                 if (!nodeData.brotherList.length) {
                     let newNode = this.getNewNode(nodeData.level, nodeData.brotherList);
                     nodeData.brotherList.push(newNode);
@@ -532,7 +527,7 @@
             deleteChildNodes (operationItem, row, rowIndex, col) {
                 let nodeData = this.getNodeData(row, rowIndex, col);
                 nodeData.childList.splice(0);
-                // 删除完应该添加一个子节点一直到叶子节点，不过现在只需要添加一个子节点，transformTreeData会捎带着处理了
+                // 删除完应该添加一个子节点一直到叶子节点，不过现在只需要添加一个子节点，transforBriTreeData会捎带着处理了
                 let newNode = this.getNewNode(nodeData.level + 1, nodeData.childList);
                 nodeData.childList.push(newNode);
 
@@ -589,7 +584,7 @@
                 );
             },
             // 转化树数据
-            transformTreeData (treeForm = this.treeColumns, subForm = this.subColumns) {
+            transforBriTreeData (treeForm = this.treeColumns, subForm = this.subColumns) {
                 treeForm.forEach((treeFormItem, treeFormIndex) => {
                     treeFormItem.canDelete = true; // 每次计算，重置一下
                     treeFormItem.level = treeFormIndex + 1; // treeColumns更新,缺少level

package/src/components/other/BriTransfer.vue

@@ -0,0 +1,71 @@
+<template>
+    <div class="BriTransfer">
+        <Transfer
+            :data="selfData"
+            :target-keys="targetKeys"
+            :filterable="filterable"
+            :filter-method="filterMethod"
+            :titles="titles"
+            not-found-text="暂无数据"
+            @on-change="handleChange"
+        ></Transfer>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "BriTransfer",
+        props: {
+            data: {
+                type: Array,
+                default: () => {
+                    return [];
+                }
+            },
+            value: {
+                type: Array,
+                default: () => {
+                    return [];
+                }
+            },
+            filterMethod: {
+                type: Function,
+                default: () => {
+                    return {};
+                }
+            },
+            titles: {
+                type: Array,
+                default: () => {
+                    return ["源列表", "目的列表"];
+                }
+            },
+            filterable: Boolean
+        },
+        data () {
+            return {
+                targetKeys: []
+            };
+        },
+        computed: {
+            selfData () {
+                return this.data.map(item => {
+                    return {
+                        key: item._key,
+                        label: item._name || item.name || item.realname
+                    };
+                });
+            }
+        },
+        created () {
+            this.targetKeys = this.value;
+        },
+        methods: {
+            handleChange (newTargetKeys) {
+                this.targetKeys = newTargetKeys;
+                this.$emit("input", this.targetKeys);
+                this.$emit("change", this.targetKeys);
+            }
+        }
+    };
+</script>

package/src/components/small/BriButton.vue

@@ -0,0 +1,65 @@
+<template>
+    <Button
+        class="BriButton"
+        :class="selfPropsObj.class"
+        :type="selfPropsObj.btnType"
+        :shape="selfPropsObj.shape || shape"
+        :size="selfPropsObj.size || size"
+        :loading="selfPropsObj.loading"
+        :disabled="selfPropsObj.disabled"
+        :htmlType="selfPropsObj.htmlType"
+        :icon="selfPropsObj.icon || icon"
+        :customIcon="selfPropsObj.customIcon || customIcon"
+        :long="selfPropsObj.long"
+        :ghost="selfPropsObj.ghost"
+        @click="dispatchEvent"
+    >
+        <slot></slot>
+    </Button>
+</template>
+
+<script>
+    import controlMixin from "../controls/controlMixin.js";
+    export default {
+        name: "BriButton",
+        mixins: [controlMixin],
+        props: {
+            type: {
+                type: String,
+                default: "primary"
+            },
+            icon: String,
+            shape: String,
+            size: String,
+            customIcon: String
+        },
+        data () {
+            return {};
+        },
+        computed: {
+            selfPropsObj () {
+                let defaultType = this.propsObj.btnType || this.type;
+                let setType = this.propsObj.btnType || this.type;
+                if (["cancel"].includes(defaultType)) {
+                    setType = "primary";
+                } else if (["errorLine"].includes(defaultType)) {
+                    setType = "default";
+                } else if (["linkText", "primaryText", "errorText"].includes(defaultType)) {
+                    setType = "text";
+                }
+                return {
+                    class: ["cancel", "linkText", "primaryText", "errorLine", "errorText"].includes(defaultType) ? `ivu-btn-${defaultType}` : "",
+                    ...this.propsObj,
+                    btnType: setType,
+                    customIcon: this.propsObj.customIcon ? `bico-font ${this.propsObj.customIcon}` : undefined
+                };
+            }
+        },
+        created () {},
+        methods: {
+            dispatchEvent () {
+                this.$emit("click", this.selfPropsObj);
+            }
+        }
+    };
+</script>

package/src/components/small/BriTree.vue

@@ -0,0 +1,42 @@
+<template>
+    <Tree
+        class="BriTree"
+        :data="val"
+        :multiple="propsObj.multiple"
+        :showCheckbox="propsObj.showCheckbox"
+        :checkStrictly="propsObj.checkStrictly"
+        :checkDirectly="propsObj.checkDirectly"
+        :emptyText="propsObj.emptyText"
+        :childrenKey="propsObj.childrenKey"
+        :loadData="propsObj.loadData"
+        :render="propsObj.render"
+        :selectNode="propsObj.selectNode"
+        :expandNode="propsObj.expandNode"
+    ></Tree>
+</template>
+
+<script>
+    import controlMixin from "../controls/controlMixin.js";
+    export default {
+        name: "BriTree",
+        mixins: [controlMixin],
+        props: {
+        },
+        data () {
+            return {};
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    ...this.propsObj
+                };
+            },
+            val () {
+                return this.value[this.propsObj._key];
+            }
+        },
+        created () {},
+        methods: {
+        }
+    };
+</script>

package/src/components/small/Ctooltip.vue

@@ -6,7 +6,7 @@
         :content="content"
         :placement="placement"
         :transfer="transfer"
-        :maxWidth="maxWidth"
+        :max-width="maxWidth"
     >
         <div
             ref="ellipsisContent"