bri-components 1.6.9 → 1.6.11

package/package.json

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

package/src/components/controls/base/DshSelect/DshSelectAll.vue

@@ -11,8 +11,14 @@
             :stop-propagation="true"
             :events-enabled="true"
         >
-            <div class="DshSelectAll-input" @click="clickInput">
-                <div v-if="inputData.length" class="DshSelectAll-input-selected dsh-ellipsis">
+            <div
+                class="DshSelectAll-input"
+                @click="clickInput"
+            >
+                <div
+                    v-if="inputData.length"
+                    class="DshSelectAll-input-selected dsh-ellipsis"
+                >
                     <Tag
                         v-for="(item, index) in inputData"
                         :key="item._key"
@@ -30,9 +36,13 @@
                     :size="selfPropsObj._size"
                 ></Input>
             </div>
+
             <DropdownMenu slot="list">
                 <!-- 用了transfer="true"，防止点击面板冒泡关闭 -->
-                <div class="DshSelectAll-down-box" @click.stop="0">
+                <div
+                    class="DshSelectAll-down-box"
+                    @click.stop="0"
+                >
                     <div class="DshSelectAll-down-all">
                         <Checkbox
                             :indeterminate="indeterminate"
@@ -40,10 +50,14 @@
                             @click.prevent.native="handleCheckAll"
                         >全选</Checkbox>
                     </div>
-                    <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
+                    <CheckboxGroup
+                        v-model="checkAllGroup"
+                        @on-change="checkAllGroupChange"
+                    >
                         <div
                             v-for="dataItem in dropDownData"
-                            :key="dataItem._key">
+                            :key="dataItem._key"
+                        >
                             <Checkbox :label="dataItem._key">
                                 <span>{{ dataItem._name || dataItem.name }}</span>
                             </Checkbox>

package/src/components/controls/controlMap.js

@@ -77,8 +77,8 @@ const pathMap = {
         DshLabels: "./senior/DshLabels.vue",
         DshPackage: "./senior/DshPackage.vue",
         flatTable: "./senior/flatTable.vue",
-        cascaderTable: "./senior/cascaderTable",
-        DshCorrelation: "./senior/correlation"
+        cascaderTable: "./senior/cascaderTable.vue",
+        DshCorrelation: "./senior/correlation.vue"
     },
     extra: {
         DshThemeColor: "./extra/DshThemeColor.vue",

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

@@ -97,7 +97,14 @@ export default {
             return this.tableDataObj.rowspanMap || {};
         },
         allListData () {
-            this.data.forEach((row) => {
+            this.data.forEach((row, index, list) => {
+                row.__position__ = list.length <= 1
+                    ? ""
+                    : index === 0
+                        ? "first"
+                        : index === list.length - 1
+                            ? "last"
+                            : "center";
                 this.fixRowData(row);
             });
             this.initFlag = false;
@@ -378,6 +385,22 @@ export default {
                 }
             });
         },
+        // 点击 -下移
+        clickMoveDown (operationItem, row, rowIndex, column) {
+            const list = this.data;
+            list.splice(rowIndex, 1);
+            list.splice(rowIndex + 1, 0, row);
+
+            this.change("moveDown", row, rowIndex, null);
+        },
+        // 点击 -上移
+        clickMoveUp (operationItem, row, rowIndex, column) {
+            const list = this.data;
+            list.splice(rowIndex, 1);
+            list.splice(rowIndex - 1, 0, row);
+
+            this.change("moveUp", row, rowIndex, null);
+        },
         quickChangeVal (operationItem, row, rowIndex, column, params) {
             if (["text", "textarea", "idcard", "email", "phone", "url", "password"].includes(column._type)) {
                 this.dealRuleRecord(row, column);
@@ -504,6 +527,17 @@ export default {
                         rowItem[column._key] = this.$deepCopy(row[column._key]);
                 });
             }
+        },
+        // 比较两行某列的值是否相等
+        isCompareSame (column, row, compareRow) {
+            const curColKey = column ? column._key : undefined;
+            const curColType = column ? column._type : undefined;
+
+            return this.$isEmptyData(compareRow[curColKey]) && this.$isEmptyData(row[curColKey])
+                ? true
+                : ["users", "departments"].includes(curColType)
+                    ? compareRow[curColKey].length === row[curColKey].length && compareRow[curColKey].every((item, index) => item._key === row[curColKey][index]._key)
+                    : compareRow[curColKey] === row[curColKey];
         }
     }
 };

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

@@ -109,6 +109,28 @@ export default {
             isEnlargeFlag: false, // 为重渲染膜态框内容而用
 
             baseOperationMap: {
+                canMoveUp: {
+                    name: "上移",
+                    tip: "上移",
+                    type: "canMoveUp",
+                    btnType: "primaryText",
+                    icon: "md-arrow-up",
+                    size: "small",
+                    triggerType: "hover",
+                    disabled: false,
+                    event: "clickMoveUp"
+                },
+                canMoveDown: {
+                    name: "下移",
+                    tip: "下移",
+                    type: "canMoveDown",
+                    btnType: "primaryText",
+                    icon: "md-arrow-down",
+                    size: "small",
+                    triggerType: "hover",
+                    disabled: false,
+                    event: "clickMoveDown"
+                },
                 canCreate: {
                     name: "添加一行",
                     tip: "添加一行",
@@ -244,12 +266,14 @@ export default {
                 _noborderColKeys: [], // 无边线的列
                 _bgColKeys: [], // 带背景色的列
 
-                _disabledBtns: false, // 禁用增删按钮
+                _disabledBtns: false, // 禁用增、删、上下移按功能
                 _showCreateBtnColKeys: [], // 显示增删图标的列
                 _useInsertInOperationCol: false, // 操作列出现插入行按钮
                 _disabledFootCreateBtn: false, // 禁用底部新增按钮
                 _disabledDeleteDftRow: false, // 默认的数据行禁止删除
                 _disabledDeleteOldRow: false, // 保存的数据行禁止删除
+                _useMoveBtns: false, // 使用上移、下移功能
+                _useMoveInOperationCol: false, // 操作列出现上移、下移按钮
                 _dftReadonly: false, // 默认的数据只读
                 _dftReadonlyColKeys: [], // 默认的数据只读的列
                 _oldReadonly: false, // 保存的数据只读
@@ -355,6 +379,13 @@ export default {
         disabledDeleteOldRow () {
             return this.isDftSet ? false : this.selfPropsObj._disabledDeleteOldRow;
         },
+        useMoveBtns () {
+            return this.selfPropsObj._useMoveBtns;
+        },
+        useMoveInOperationCol () {
+            return this.selfPropsObj._useMoveInOperationCol;
+        },
+
         dftReadonly () {
             return this.isDftSet ? false : this.selfPropsObj._dftReadonly;
         },
@@ -476,8 +507,8 @@ export default {
                 align: "center",
                 _fixed: "right",
                 fixed: "right",
-                _width: 100 + (this.rowOperationList.length - 1) * 110,
-                width: 100 + (this.rowOperationList.length - 1) * 110,
+                _width: 40 + this.rowOperationList.length * 70,
+                width: 40 + this.rowOperationList.length * 70,
                 renderBodyCell: ({ row, rowIndex, column }, h) => {
                     return this.operationTdCellRender(h, { row, rowIndex, column });
                 }
@@ -730,7 +761,8 @@ export default {
                     ...(
                         this.canEdit
                             ? [
-                                ...(this.disabledBtns ? [] : this.baseOperationBtns),
+                                ...(this.disabledBtns ? [] : this.baseOperationBtns.filter(btn => !["canMoveUp", "canMoveDown"].includes(btn))),
+                                ...(this.useMoveBtns ? ["canMoveUp", "canMoveDown"] : []),
                                 ...this.otherOperationBtns,
                                 ...(this.isQuote ? ["canQuote"] : []),
                                 ...(this.isImport ? ["canImport"] : [])
@@ -744,11 +776,11 @@ export default {
             );
         },
         rowOperationList () {
-            const btns = [
+            return this.$getOperationList([
+                ...(this.useMoveInOperationCol ? ["canMoveUp", "canMoveDown"] : []),
                 ...(this.useInsertInOperationCol ? ["canInsert"] : []),
                 "canDelete"
-            ];
-            return this.$getOperationList(btns);
+            ]);
         }
     },
     watch: {
@@ -1290,9 +1322,13 @@ export default {
         operationTdCellRender (h, { row, rowIndex, column }) {
             const operationList = this.rowOperationList.map(btnItem => ({
                 ...btnItem,
-                disabled: btnItem.type === "canDelete"
-                    ? !this.getRowDelBtnCanEdit(row, rowIndex)
-                    : btnItem.disabled
+                disabled: btnItem.type === "canMoveUp"
+                    ? !(this.getRowDelBtnCanEdit(row, rowIndex) && ["last", "center"].includes(row.__position__))
+                    : btnItem.type === "canMoveDown"
+                        ? !(this.getRowDelBtnCanEdit(row, rowIndex) && ["first", "center"].includes(row.__position__))
+                        : btnItem.type === "canDelete"
+                            ? !this.getRowDelBtnCanEdit(row, rowIndex)
+                            : btnItem.disabled
             }));
 
             return [
@@ -1312,38 +1348,45 @@ export default {
             const baseBool = !this.isSearching &&
                 (this.showCreateBtnColKeys.length ? this.showCreateBtnColKeys.includes(column._key) : ["__index__", "__treeIndex__"].includes(column._key));
             // this.hoverRecordMap[`${row._id}`];
+            let sortNum = -1;
 
             return [
                 // 插入一行图标
                 baseBool
-                    ? this.getOperationIconRender(h, { row, rowIndex, column }, "canInsert", iconSize)
+                    ? this.getOperationIconRender(h, { row, rowIndex, column }, "canInsert", iconSize, ++sortNum)
                     : h("span", ""),
 
                 // 添加一行下级图标
-                baseBool &&
-                    row.level < this.maxLevel &&
-                    !["cascaderTable"].includes(this.inTableType) // 老版级联表格类型不要“添加下级”图标
-                    ? this.getOperationIconRender(h, { row, rowIndex, column }, "canCreateChild", iconSize, true)
+                baseBool && ["treeTable"].includes(this.inTableType) && row.level < this.maxLevel // 只有层级表格要“添加下级”图标
+                    ? this.getOperationIconRender(h, { row, rowIndex, column }, "canCreateChild", iconSize, ++sortNum)
                     : h("span", ""),
 
                 // 删除该行图标
-                baseBool &&
-                    this.getRowDelBtnCanEdit(row, rowIndex) &&
-                    ["cascaderTable"].includes(this.inTableType)
-                    ? this.getOperationIconRender(h, { row, rowIndex, column }, "canDelete", iconSize, true)
+                baseBool && ["cascaderTable"].includes(this.inTableType) && this.getRowDelBtnCanEdit(row, rowIndex)
+                    ? this.getOperationIconRender(h, { row, rowIndex, column }, "canDelete", iconSize, ++sortNum)
+                    : h("span", ""),
+
+                // 下移图标
+                baseBool && !this.useMoveInOperationCol && this.getRowDelBtnCanEdit(row, rowIndex) && ["first", "center"].includes(row.__position__)
+                    ? this.getOperationIconRender(h, { row, rowIndex, column }, "canMoveDown", iconSize, ++sortNum)
+                    : h("span", ""),
+
+                // 上移图标
+                baseBool && !this.useMoveInOperationCol && this.getRowDelBtnCanEdit(row, rowIndex) && ["last", "center"].includes(row.__position__)
+                    ? this.getOperationIconRender(h, { row, rowIndex, column }, "canMoveUp", iconSize, ++sortNum)
                     : h("span", "")
             ];
         },
-        getOperationIconRender (h, { row, rowIndex, column }, operationType, iconSize = 14, isLeft = false) {
+        getOperationIconRender (h, { row, rowIndex, column }, operationType, iconSize = 14, sortNum = 0) {
             const operationItem = this.operationMap[operationType];
 
             return operationItem && operationItem.disabled !== true
                 ? h("div", {
-                    class: `dsh-color-border-${operationItem.btnType.includes("error") ? "error" : "primary"}`,
+                    class: `dsh-color-border-${operationItem.btnType.includes("error") ? "error" : "primary"}${operationItem.triggerType === "hover" ? " dsh-tr-hover-show" : ""}`,
                     style: {
                         position: "absolute",
                         bottom: "0px",
-                        right: isLeft ? `${iconSize + 3}px` : "0px",
+                        right: `${(iconSize + 3) * sortNum}px`,
                         width: `${iconSize + 2}px`,
                         height: `${iconSize + 2}px`,
                         borderRadius: "2px",
@@ -1593,31 +1636,6 @@ export default {
                 };
             }
         },
-        // 获取父级行
-        getParentRow (row, tree = []) {
-            if (row.level === 1) {
-                return {
-                    children: tree
-                };
-            } else {
-                let parentRow;
-
-                const loop = (list = []) => {
-                    return list.some(rowItem => {
-                        if (rowItem.level === row.level - 1) {
-                            const isExist = rowItem.children.some(childRowItem => childRowItem._id === row._id);
-                            parentRow = rowItem;
-                            return isExist;
-                        } else {
-                            return loop(rowItem.children);
-                        }
-                    });
-                };
-                loop(tree);
-
-                return parentRow;
-            }
-        },
         // // 单元格是否显示对比
         // isShowCompare ({ row, rowIndex, column }) {
         //     const oldRow = this.compareListData[rowIndex] || {};
@@ -1629,17 +1647,6 @@ export default {
         //         !(this.$isEmptyData(curVal) && this.$isEmptyData(oldVal)) &&
         //         curVal !== oldVal;
         // },
-        // 比较两行某列的值是否相等
-        isCompareSame (column, row, compareRow) {
-            const curColKey = column ? column._key : undefined;
-            const curColType = column ? column._type : undefined;
-
-            return this.$isEmptyData(compareRow[curColKey]) && this.$isEmptyData(row[curColKey])
-                ? true
-                : ["users", "departments"].includes(curColType)
-                    ? compareRow[curColKey].length === row[curColKey].length && compareRow[curColKey].every((item, index) => item._key === row[curColKey][index]._key)
-                    : compareRow[curColKey] === row[curColKey];
-        },
         // 行id + 分隔符 + 列key 组成键
         getMixKey (row, column, splitStr = "--") {
             return `${row._id}${splitStr}${column._key}`;

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

@@ -91,7 +91,7 @@ export default {
         },
 
         // 节点操作 -添加一行
-        clickCreate (operationItem, row, rowIndex, col) {
+        clickCreate (operationItem, row, rowIndex, column) {
             const list = row
                 ? this.getParentRow(row, this.data).children
                 : this.data;
@@ -104,7 +104,7 @@ export default {
             this.change("createRow", newRow, newRowIndex, null);
         },
         // 节点操作 -添加子行
-        clickCreateChild (operationItem, row, rowIndex, col) {
+        clickCreateChild (operationItem, row, rowIndex, column) {
             const list = row.children;
             const newRow = this.getNewRowData(row.level + 1, list);
             const newRowIndex = list.length;
@@ -116,21 +116,21 @@ export default {
             this.change("createChildRow", newRow, newRowIndex, null);
         },
         // 节点操作 -删除行
-        clickDelete (operationItem, row, rowIndex, col) {
+        clickDelete (operationItem, row, rowIndex, column) {
             this.$Modal.confirm({
                 title: "警告",
                 content: "确定删除该行及其所有下级吗？",
                 onOk: () => {
                     const parentRow = this.getParentRow(row, this.data);
-                    const index = parentRow.children.findIndex(childRowItem => childRowItem._id === row._id);
+                    const index = parentRow.children.findIndex(childRow => childRow._id === row._id);
                     parentRow.children.splice(index, 1);
 
                     this.change("deleteRow", row, rowIndex, null);
                 }
             });
-        }
+        },
         // // 节点操作 -删除所有子行
-        // clickDeleteChilds (operationItem, row, rowIndex, col) {
+        // clickDeleteChilds (operationItem, row, rowIndex, column) {
         //     this.$Modal.confirm({
         //         title: "警告",
         //         content: "确定删除所有下级吗？",
@@ -141,5 +141,49 @@ export default {
         //         }
         //     });
         // },
+        // 点击 -下移
+        clickMoveDown (operationItem, row, rowIndex, column) {
+            const parentRow = this.getParentRow(row, this.data);
+            const index = parentRow.children.findIndex(childRow => childRow._id === row._id);
+            parentRow.children.splice(index, 1);
+            parentRow.children.splice(index + 1, 0, row);
+
+            this.change("moveDown", row, rowIndex, null);
+        },
+        // 点击 -上移
+        clickMoveUp (operationItem, row, rowIndex, column) {
+            const parentRow = this.getParentRow(row, this.data);
+            const index = parentRow.children.findIndex(childRow => childRow._id === row._id);
+            parentRow.children.splice(index, 1);
+            parentRow.children.splice(index - 1, 0, row);
+
+            this.change("moveUp", row, rowIndex, null);
+        },
+
+        // 获取父级行
+        getParentRow (row, tree = []) {
+            if (row.level === 1) {
+                return {
+                    children: tree
+                };
+            } else {
+                let parentRow;
+
+                const loop = (list = []) => {
+                    return list.some(rowItem => {
+                        if (rowItem.level === row.level - 1) {
+                            const isExist = rowItem.children.some(childRow => childRow._id === row._id);
+                            parentRow = rowItem;
+                            return isExist;
+                        } else {
+                            return loop(rowItem.children);
+                        }
+                    });
+                };
+                loop(tree);
+
+                return parentRow;
+            }
+        }
     }
 };

package/src/components/other/DshVideoPlayer.vue

@@ -318,6 +318,28 @@
         },
         computed: {
             sourceType () {
+                // const a = [
+                //     {
+                //         src: "https://example.com/stream.m3u8",
+                //         type: "application/x-mpegURL"
+                //     },
+                //     {
+                //         src: "https://example.com/stream.mpd",
+                //         type: "application/dash+xml"
+                //     },
+                //     {
+                //         src: "https://example.com/video.mp4",
+                //         type: "video/mp4"
+                //     },
+                //     {
+                //         src: "https://example.com/stream.flv",
+                //         type: "video/flv"
+                //     },
+                //     {
+                //         src: "https://example.com/webrtc-stream",
+                //         type: "application/webrtc"
+                //     }
+                // ];
                 return this.videoType === "m3u8"
                     ? "application/x-mpegURL" // 告诉videojs,这是一个hls流
                     : "video/mp4";
@@ -385,6 +407,7 @@
         beforeDestroy () {
             if (this.player) {
                 this.player.dispose();
+                // this.player = null;
             }
         },
         methods: {
@@ -416,12 +439,11 @@
             },
             onPlayerReady () {
                 // console.log("Player ready", this.finalOptions);
-            },
-
-            playVideo () {
-                let video = document.getElementById("video");
-                video.play();
             }
+            // playVideo () {
+            //     let video = document.getElementById("video");
+            //     video.play();
+            // }
         }
     };
 </script>

package/src/styles/components/BriTable.less

@@ -14,15 +14,19 @@
     td {
         white-space: normal !important;
     }
+
     th.ve-table-fixed-right {
         box-shadow: -4px 0 6px -2px rgba(0, 0, 0, 0.1);
     }
+
     td.ve-table-fixed-right {
         box-shadow: -4px 0 6px -2px rgba(0, 0, 0, 0.1);
     }
+
     th.ve-table-last-left-fixed-column {
         box-shadow: 4px 0 7px -2px rgba(0, 0, 0, 0.1);
     }
+
     td.ve-table-last-left-fixed-column {
         box-shadow: 4px 0 7px -2px rgba(0, 0, 0, 0.1);
     }
@@ -41,7 +45,7 @@
                     thead.ve-table-header {
                         tr.ve-table-header-tr th.ve-table-header-th {
                             padding: 4px 8px;
-    
+
                             .ve-table-filter .ve-table-filter-icon {
                                 position: absolute;
                                 top: 0px;
@@ -61,7 +65,7 @@
                                 margin-bottom: auto;
                                 right: 17px;
                             }
-                            
+
                             // 排序
                             .ve-table-sort {
                                 height: 30px;
@@ -71,11 +75,11 @@
                                 margin-top: auto;
                                 margin-bottom: auto;
                                 right: 0px;
-    
+
                                 .icon-vet-sort-top-arrow:before {
                                     content: "\e6347";
                                 }
-    
+
                                 .icon-vet-sort-bottom-arrow:before {
                                     content: "\e6349";
                                 }
@@ -84,16 +88,29 @@
                     }
 
                     tbody.ve-table-body {
-                        tr.ve-table-body-tr, 
+
+                        tr.ve-table-body-tr,
                         tr.ve-table-expand-tr {
                             height: auto;
                             // position: relative;
 
+                            .dsh-tr-hover-show {
+                                display: none;
+                            }
+
+                            &:hover {
+                                .dsh-tr-hover-show {
+                                    display: block;
+                                }
+                            }
+
                             td.ve-table-body-td {
                                 height: 40px;
                                 padding: 4px 16px;
 
+
                                 &.bri-table-td-noborder {
+
                                     .ivu-input,
                                     textarea.ivu-input,
                                     .ivu-select-selection {
@@ -105,7 +122,7 @@
                                         line-height: 18px;
                                     }
 
-                                    .ivu-input-prefix, 
+                                    .ivu-input-prefix,
                                     .ivu-input-suffix {
                                         width: 0px;
                                         display: none;
@@ -115,6 +132,7 @@
                                         box-shadow: none;
                                     }
                                 }
+
                                 &.bri-table-td-bg {
                                     background-color: #fbfbfb;
                                 }
@@ -123,13 +141,13 @@
                     }
                 }
             }
-            
+
             &.ve-table-border-around {
                 border-radius: @borderRadius;
             }
         }
     }
-    
+
     &-click {
         td {
             cursor: pointer;
@@ -195,29 +213,30 @@
         height: 40px;
         padding: 4px 16px;
         position: relative;
-        
+
         // &-expand {
 
         // }
         &-treeIndex {
-            padding: 4px 16px 4px 12px!important;
+            padding: 4px 16px 4px 12px !important;
         }
+
         &-operation {
             .DshButtons-dropdown-more {
                 padding: 0px;
                 margin-left: 16px;
             }
-            
+
             &-btn {
                 margin-left: 16px;
                 padding: 0px;
-                
+
                 &:first-of-type {
                     margin: 0px;
                 }
             }
         }
-        
+
         &-tip {
             padding: 0px 0px 0px 16px;
             // text-align: left;
@@ -231,7 +250,7 @@
         }
 
         &-edit {
-            padding: 4px 16px 12px 16px!important;
+            padding: 4px 16px 12px 16px !important;
         }
 
         &-visible {
@@ -240,7 +259,7 @@
                     top: -49px;
                     opacity: 0.9;
                 }
-                
+
                 to {
                     top: 0px;
                     opacity: 1;
@@ -251,10 +270,11 @@
         }
 
         &-hide {
-            display: none!important;
+            display: none !important;
         }
 
         &-noborder {
+
             .ivu-input,
             textarea.ivu-input,
             .ivu-select-selection {
@@ -266,16 +286,17 @@
                 line-height: 18px;
             }
 
-            .ivu-input-prefix, 
+            .ivu-input-prefix,
             .ivu-input-suffix {
                 width: 0px;
                 display: none;
             }
-            
+
             .ivu-date-picker-focused input:not([disabled]) {
                 box-shadow: none;
             }
         }
+
         &-bg {
             background-color: #fbfbfb;
         }