bri-components 1.0.3 → 1.1.0

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

@@ -1,16 +1,16 @@
 <template>
     <div class="DshPanel">
         <div
-            class="DshPanel-group"
             v-for="(groupItem, groupIndex) in data"
             :key="groupIndex"
+            class="DshPanel-group"
         >
             <!-- 组 标头 -->
             <div
                 class="DshPanel-group-title"
                 :style="{
                     backgroundColor: getBgColor(groupItem),
-                    color: colorMap[getBgColor(groupItem)] || '#fff'
+                    color: '#ffffff'
                 }"
             >
                 <span class="DshPanel-group-title-name">
@@ -45,7 +45,7 @@
                     class="dsh-tip"
                     style="position: absolute; top: 0px; left: 0px; width: 100%;"
                 >
-                    {{noDataText}}
+                    {{ noDataText }}
                 </div>
 
                 <!-- 拖拽 -->
@@ -64,15 +64,15 @@
                         @scroll.native="groupScroll(groupItem, groupIndex, $event)"
                     >
                         <div
-                            class="list-item"
                             v-for="(dataItem, dataIndex) in groupItem.list"
                             :key="dataItem._id"
                             :id="dataItem._id"
+                            class="item"
                             @click="clickRow(dataItem, dataIndex)"
                         >
                             <!-- 下拉操作 -->
                             <dsh-dropdown
-                                class="list-item-dropdown"
+                                class="item-dropdown"
                                 :dropdownObj="dropdownObj"
                                 :list="operationList"
                                 @click="$dshEmit($event, dataItem, dataIndex)"
@@ -80,11 +80,11 @@
                             ></dsh-dropdown>
 
                             <!-- 标题 -->
-                            <div class="list-item-title dsh-ellipsis">{{ dataItem[titleField] }}</div>
+                            <div class="item-title dsh-ellipsis">{{ dataItem[titleField] }}</div>
 
                             <!-- 显示字段 -->
                             <div
-                                class="list-item-cols unit"
+                                class="item-cols unit"
                                 v-for="colItem in selfColumns"
                                 :key="colItem._key"
                             >
@@ -124,33 +124,21 @@
                         </div>
                     </transition-group>
                 </dsh-draggable>
+
                 <!-- 组 操作按钮（添加） -->
                 <dsh-buttons
-                    class="DshPanel-group-list-btns"
+                    class="list-btns"
                     :list="groupBtnOperationList"
                     @click="$dshEmit($event, { [groupField]: groupItem._key })"
                 ></dsh-buttons>
             </div>
-
         </div>
     </div>
 </template>
 
 <script>
-    // 浅色转化为对应深色
-    const colorMap = {
-        "#CDE6FF": "#6DAEF2",
-        "#C1FCFF": "#40CBD2",
-        "#C5FFD9": "#50C979",
-        "#FFEDC8": "#FFC53B",
-        "#FFDCAC": "#FF9300",
-        "#FFD3B6": "#FA6400",
-        "#EEB0FF": "#B620E0",
-        "#D1B3FF": "#7E41DF",
-        "#B1C7FF": "#25428D",
-        "#DCDCDC": "#5D5D5D"
+    import { resourceData } from "bri-datas";
 
-    };
     export default {
         name: "DshPanel",
         props: {
@@ -204,10 +192,9 @@
 
                 getBgColor (groupItem) {
                     return this.groupFieldObj._useColor
-                        ? (this.groupFieldObj._data.find(item => item._key === groupItem._key) || { color: "#ccc" }).color
-                        : "#ccc";
-                },
-                colorMap
+                        ? resourceData.colorMap[(this.groupFieldObj._data.find(item => item._key === groupItem._key) || { color: "color-default" }).color]
+                        : resourceData.colorMap["color-default"];
+                }
             };
         },
         computed: {
@@ -293,7 +280,7 @@
     };
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
     .DshPanel {
         min-width: 100%;
         height: 100%;
@@ -317,6 +304,7 @@
                 display: flex;
                 border-radius: 10px 10px 0px 0px;
                 font-size: 14px;
+
                 &-name {
                     max-width: 120px;
                 }
@@ -330,78 +318,74 @@
                 flex: 1;
                 min-height: 0px;
                 border: 1px dashed #cccccc;
-                padding: 10px 10px 40px;
                 border-top: none;
-                position: relative;
+                display: flex;
+                flex-direction: column;
 
                 .list-drag {
                     width: 100%;
-                    height: 100%;
+                    flex: 1;
+                    min-height: 0px;
+
                     &-transition {
                         display: block;
                         width: 100%;
                         height: 100%;
+                        padding: 10px;
                         overflow: auto;
-                    }
-                }
-                .list-item {
-                    margin-bottom: 10px;
-                    height: 60px;
-                    background: #FFFFFF;
-                    border: 1px solid rgba(102, 110, 126, 0.1);
-                    border-radius: 4px;
-                    cursor: pointer;
-                    position: relative;
-                    padding: 10px 17px;
 
-                    &-dropdown {
-                        position: absolute;
-                        top: 5px;
-                        right: 5px;
-                    }
+                        .item {
+                            height: 60px;
+                            padding: 10px 17px;
+                            margin-bottom: 10px;
+                            border: 1px solid rgba(102, 110, 126, 0.1);
+                            border-radius: 4px;
+                            background: #FFFFFF;
+                            cursor: pointer;
+                            position: relative;
 
-                    &-title {
-                        width: calc(100% - 22px);
-                        font-size: 14px;
-                        font-family: Source Han Sans CN;
-                        font-weight: 500;
-                        color: #515A6E;
-                        margin-bottom: 2px;
-                    }
+                            &-dropdown {
+                                position: absolute;
+                                top: 5px;
+                                right: 5px;
+                            }
 
-                    &-cols {
-                    }
-                    .unit {
-                        display: flex;
-                        flex-direction: row;
-                        color: #515A6E;
-                        &-label {
-                            max-width: 60px;
-                        }
-                        &-colon {
+                            &-title {
+                                width: calc(100% - 22px);
+                                margin-bottom: 2px;
+                                font-family: Source Han Sans CN;
+                                font-size: 14px;
+                                font-weight: 500;
+                                color: #515A6E;
+                            }
 
-                        }
-                        &-value {
-                            flex: 1;
+                            &-cols {}
+
+                            .unit {
+                                display: flex;
+                                flex-direction: row;
+                                color: #515A6E;
+                                &-label {
+                                    max-width: 60px;
+                                }
+                                &-colon {
+
+                                }
+                                &-value {
+                                    flex: 1;
+                                }
+                            }
                         }
                     }
                 }
-                &-btns {
+
+                .list-btns {
                     width: 100%;
+                    height: 40px;
+                    padding: 0px 10px;
                     text-align: center;
-                    height: 33px;
                 }
             }
-
-        }
-    }
-</style>
-<style lang="less">
-    .DshPanel {
-        &-group-list-btns {
-            .ivu-btn {
-                background: transparent;
-            }
         }
     }
 </style>

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/list/DshFlatTable.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="`DshFlatTable control-${mode}`">
+    <div :class="`DshFlatTable control-default`">
         <!-- 表格内容 -->
         <div class="DshFlatTable-block">
             <table
@@ -74,8 +74,6 @@
                                 class="td-inner"
                                 :style="{
                                     padding: '5px 8px 16px'
-                                    // margin: isShowCompare(col, row, oldListData[rowIndex]) ? '-1px' : undefined,
-                                    // border: isShowCompare(col, row, oldListData[rowIndex]) ? '1px solid #ed4014' : undefined
                                 }"
                             >
                                 <!--对比值 -->
@@ -89,12 +87,10 @@
                                 >
                                     <dsh-unit
                                         class="td-inner-compare-unit"
-                                        :mode="mode"
                                         :canEdit="getUnitCanEdit(col, row)"
                                         :parentData="listData"
                                         :formData="row"
                                         :formItem="col"
-                                        :isShare="isShare"
                                         :rowIndex="rowIndex"
                                         @blur="controlBlur(null, col, row, arguments)"
                                         @change="$dispatchEvent(operationMap.changeVal, col, row, rowIndex, arguments)"
@@ -103,12 +99,10 @@
 
                                 <dsh-unit
                                     v-else
-                                    :mode="mode"
                                     :canEdit="getUnitCanEdit(col, row)"
                                     :parentData="listData"
                                     :formData="row"
                                     :formItem="col"
-                                    :isShare="isShare"
                                     :rowIndex="rowIndex"
                                     @blur="controlBlur(null, col, row, arguments)"
                                     @change="$dispatchEvent(operationMap.changeVal, col, row, rowIndex, arguments)"
@@ -184,11 +178,6 @@
             DshUnit
         },
         props: {
-            mode: {
-                type: String,
-                default: "default"
-            },
-
             canEdit: {
                 type: Boolean,
                 default: true
@@ -229,8 +218,7 @@
                 default () {
                     return {};
                 }
-            },
-            isShare: Boolean
+            }
         },
         data () {
             return {
@@ -257,6 +245,7 @@
 
             selfPropsObj () {
                 return {
+                    isShare: false, // 是否是分享页在用
                     _contentHeight: 500,
                     _useSelection: false, // 使用选择列
                     _useIndex: true, // 使用序号列
@@ -268,6 +257,9 @@
                     ...this.propsObj
                 };
             },
+            isShare () {
+                return this.selfPropsObj.isShare;
+            },
             contentHeight () {
                 return this.selfPropsObj._contentHeight;
             },
@@ -289,10 +281,10 @@
             disabledOldDataRow () {
                 return this.selfPropsObj._disabledOldDataRow;
             },
-            useCampare () {
+
+            useCompare () {
                 return !!this.oldListData.length;
             },
-
             showColumns () {
                 const operationList = this.$getOperationList(["delete"]);
                 const showColumns = [
@@ -507,7 +499,7 @@
                 (!col.dependRowCanEdit || row.canEdit !== false); // 在老数据行里某些列不可编辑
             },
             isShowCompare (col, row, oldRow = {}) {
-                return this.useCampare && ["number"].includes(col._type) &&
+                return this.useCompare && ["number"].includes(col._type) &&
                     !(this.$isEmptyData(row[col._key]) && this.$isEmptyData(oldRow[col._key])) &&
                     row[col._key] !== oldRow[col._key];
             },

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>