bri-components 1.1.3 → 1.1.5

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

@@ -1,7 +1,10 @@
 <template>
     <div class="DshCard">
         <!-- 无数据 -->
-        <div v-if="!data.length" class="dsh-tip">{{noDataText}}</div>
+        <div
+            v-if="!data.length"
+            class="dsh-tip"
+        >{{noDataText}}</div>
 
         <!-- 有数据 -->
         <template v-else>
@@ -21,10 +24,11 @@
                 ></dsh-dropdown>
 
                 <!-- 背景图 -->
-                <div
-                    class="DshCard-item-image"
-                >
-                    <img :src="getCardBgImgSrc(dataItem)" alt="">
+                <div class="DshCard-item-image">
+                    <img
+                        :src="getCardBgImgSrc(dataItem)"
+                        alt=""
+                    >
                 </div>
 
                 <!-- 内容 -->
@@ -73,7 +77,10 @@
                                 v-html="colItem.formatter(dataItem, 0)"
                             ></div>
 
-                            <span v-else class="unit-value-text">{{ dataItem[colItem._key] }}</span>
+                            <span
+                                v-else
+                                class="unit-value-text"
+                            >{{ dataItem[colItem._key] }}</span>
                         </div>
                     </div>
                 </div>
@@ -151,69 +158,3 @@
         }
     };
 </script>
-
-<style lang="less" scoped>
-    .DshCard {
-        display: flex;
-        flex-wrap: wrap;
-        background-color: #ffffff;
-        padding: 0 40px;
-        &-item {
-            width: 250px;
-            height: 210px;
-            box-sizing: border-box;
-            margin: 10px 16px 30px;
-            border-radius: 6px;
-            overflow: hidden;
-            box-shadow: 0px 4px 8px 0px rgba(222, 222, 222, 0.75);
-            cursor: pointer;
-            display: flex;
-            flex-direction: column;
-            position: relative;
-
-            &-dropdown {
-                position: absolute;
-                top: 5px;
-                right: 5px;
-            }
-            &-image {
-                padding-top: 20px;
-                height: 122px;
-            }
-            &-info {
-                flex: 1;
-                padding: 8px 15px;
-                overflow: hidden;
-                background: #F7FBFF;
-                &-title {
-                    font-size: 14px;
-                    font-weight: 600;
-                }
-                &-col {
-                    height: 24px;
-                }
-
-                .unit {
-                    display: flex;
-                    flex-direction: row;
-                    &-label {
-                        max-width: 60px;
-                        font-weight: 400;
-                        color: #515A6E;
-                    }
-                    &-colon {
-
-                    }
-                    &-value {
-                        flex: 1;
-                    }
-                }
-            }
-        }
-    }
-</style>
-<style lang="less">
-    .DshCard {
-
-    }
-</style>

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

@@ -62,16 +62,10 @@
                 v-if="isLoading"
                 class="list-loading"
             >
-                <div
-                    class="v-table-loading"
-                    :style="{'opacity': 0.6}"
-                ></div>
-                <div class="v-table-loading-content" style="top: 30px">
+                <div class="list-loading-wrap"></div>
+                <div class="list-loading-content">
                     <span>
-                        <i
-                            class="v-icon-spin5 animate-loading-23"
-                            style="font-size: 28px;opacity:0.6;"
-                        ></i>
+                        <i class="list-loading-content-icon"></i>
                     </span>
                 </div>
             </div>
@@ -118,6 +112,7 @@
                                     {{ index + 1 }}
                                 </div>
                             </div>
+
                             <!-- 单元格 -->
                             <div
                                 v-for="(col) in selfColumns"
@@ -140,9 +135,11 @@
                                         :index="index"
                                         :render="col.renderBodyCell"
                                     ></dsh-td-render>
+
                                     <template v-else-if="col.formatter">
                                         <div v-html="col.formatter(row, index)"></div>
                                     </template>
+
                                     <Tooltip
                                         v-else-if="row[col._key]"
                                         :transfer="true"
@@ -153,9 +150,9 @@
                                     >
                                         <div class="list-tooltip-box">{{ row[col._key] }}</div>
                                     </Tooltip>
+
                                     <!-- <dsh-unit
                                         :key="col._key"
-                                        :mode="mode"
                                         :canEdit="false"
                                         :formData="row"
                                         :formItem="col"
@@ -173,7 +170,7 @@
                     v-else
                     class="list-noData"
                 >
-                    {{noDataText}}
+                    {{ noDataText }}
                 </div>
             </template>
         </div>
@@ -189,13 +186,6 @@
             // DshUnit
         },
         props: {
-            // mode: {
-            //     type: String,
-            //     default: "default",
-            //     validator: function (value) {
-            //         return ["default"].indexOf(value) !== -1;
-            //     }
-            // },
             isLoading: {
                 type: Boolean,
                 default: false
@@ -256,9 +246,6 @@
                 }
             },
 
-            // isLoading () {
-            //     return this.propsObj.isLoading;
-            // },
             multiple () {
                 return this.propsObj.multiple !== false;
             },
@@ -325,118 +312,3 @@
         }
     };
 </script>
-
-<style lang="less" scoped>
-    @height:44px;
-    .DshList {
-        .list {
-            &-loading {
-                min-height: 100px;
-            }
-
-            &-cols,
-            &-rows {
-                position: relative;
-                &-left {
-                    width: 48px;
-                    text-align: center;
-                    position: absolute;
-                    left: 0;
-                    top: 0;
-                    label {
-                        display: inline-block;
-                        height: 36px;
-                        padding: 9px 5px;
-                        margin: 0px;
-                        line-height: 18px;
-                    }
-                }
-
-                .row {
-                    width: 100%;
-                    // height: 36px;
-                    // padding: 9px 5px;
-                    line-height: 20px;
-                    display: flex;
-                    justify-content: space-between;
-                    &-item {
-                        min-width: 120px;
-                        height: 100%;
-                        padding: 0 16px;
-                        font-size: 14px;
-                        align-items: center;
-                    }
-                }
-            }
-
-            &-cols {
-                height: @height;
-                background: #f0f0f0;
-                &-left {}
-                &-right {}
-
-                .row {
-                    font-weight: 700;
-                    &-item {
-                        padding: 10px 16px;
-                        border-top: 1px #e5e5e5 solid;
-                        border-bottom: 1px #f0f0f0 solid;
-                        border-left: 1px #e5e5e5 solid;
-
-                        &:last-child{
-                           border-right: 1px #e5e5e5 solid;
-                        }
-
-                        &-inner {
-                            .dsh-ellipsis{
-                                font-size: 14px;
-                                color: #666;
-                                font-weight: 700;
-                                line-height: 24px;
-                            }
-                        }
-                    }
-                }
-            }
-
-            &-rows {
-                &-left {
-                    label {
-                        height: 44px;
-                        line-height: 20px;
-                    }
-                }
-                &-right {}
-
-                .row {
-                    height: 44px;
-                    line-height: 20px;
-
-                    cursor: pointer;
-                    &-item {
-                        display: flex;
-                        border: 1px solid #E5E5E5;
-                        border-width: 0 0 1px 1px;
-
-                        &:last-child{
-                            border-width: 0 1px 1px 1px;
-                        }
-
-                        &-inner {
-                            width: 100%;
-                            font-size: 14px;
-                            color: #333;
-                            font-weight: 400;
-                            line-height: 24px;
-                        }
-                    }
-                }
-            }
-
-            &-noData {
-                padding: 10px 0px;
-                text-align: center;
-            }
-        }
-    }
-</style>

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

@@ -279,113 +279,3 @@
         }
     };
 </script>
-
-<style lang="less">
-    .DshPanel {
-        min-width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: row;
-
-        &-group {
-            width: 300px;
-            min-width: 300px;
-            max-width: 300px;
-            height: 100%;
-            padding: 10px;
-            overflow: hidden;
-            display: flex;
-            flex-direction: column;
-
-            &-title {
-                width: 100%;
-                height: 50px;
-                padding: 15px 10px;
-                display: flex;
-                border-radius: 10px 10px 0px 0px;
-                font-size: 14px;
-
-                &-name {
-                    max-width: 120px;
-                }
-                &-number {
-                    font-weight: bold;
-                }
-            }
-
-            &-list {
-                width: 100%;
-                flex: 1;
-                min-height: 0px;
-                border: 1px dashed #cccccc;
-                border-top: none;
-                display: flex;
-                flex-direction: column;
-
-                .list-drag {
-                    width: 100%;
-                    flex: 1;
-                    min-height: 0px;
-
-                    &-transition {
-                        display: block;
-                        width: 100%;
-                        height: 100%;
-                        padding: 10px;
-                        overflow: auto;
-
-                        .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;
-
-                            &-dropdown {
-                                position: absolute;
-                                top: 5px;
-                                right: 5px;
-                            }
-
-                            &-title {
-                                width: calc(100% - 22px);
-                                margin-bottom: 2px;
-                                font-family: Source Han Sans CN;
-                                font-size: 14px;
-                                font-weight: 500;
-                                color: #515A6E;
-                            }
-
-                            &-cols {}
-
-                            .unit {
-                                display: flex;
-                                flex-direction: row;
-                                color: #515A6E;
-                                &-label {
-                                    max-width: 60px;
-                                }
-                                &-colon {
-
-                                }
-                                &-value {
-                                    flex: 1;
-                                }
-                            }
-                        }
-                    }
-                }
-
-                .list-btns {
-                    width: 100%;
-                    height: 40px;
-                    padding: 0px 10px;
-                    text-align: center;
-                }
-            }
-        }
-    }
-</style>

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

@@ -1,8 +1,5 @@
 <template>
-    <div
-        class="DshTable"
-        style="width: 100%; height: 100%;"
-    >
+    <div class="DshTable">
         <bri-table
             :className="propsObj.className"
             :data="data"

package/src/components/list/ZTree.vue

@@ -470,61 +470,3 @@
         }
     };
 </script>
-
-<style lang="less" scoped>
-    .ZTree {
-        max-width: 1200px;
-        min-width: 720px;
-        height: 100%;
-        margin: 0px auto;
-        background: #fff;
-        display: flex;
-        flex-direction: column;
-        &-action {
-            padding: 10px;
-            display: flex;
-            justify-content: flex-end;
-        }
-
-        &-tree {
-            width: 100%;
-            flex: 1;
-            min-height: 0px;
-            overflow: auto;
-        }
-    }
-</style>
-<style lang="less">
-    .ZTree {
-        &-action-create {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-
-            .ivu-icon {
-                font-size: 20px;
-                font-weight: bold;
-                margin-right: -10px;
-                vertical-align: middle;
-                transform: translate(0, -1px);
-            }
-        }
-
-        &-tree {
-            .ivu-tree-title {
-                width: calc(100% - 18px);
-            }
-            .ivu-tree-arrow {
-                margin-top: 5px;
-            }
-        }
-        &-dropdown-menu.DshColorPanel-list {
-            width: 242px!important;
-        }
-    }
-    .ZTree-create-content {
-        .textRight {
-            text-align: right;
-        }
-    }
-</style>

package/src/components/other/BriSvg.vue

@@ -0,0 +1,28 @@
+<template>
+    <svg class="bri" aria-hidden="true">
+        <use :href="href"></use>
+    </svg>
+</template>
+
+<script>
+
+    export default {
+        name: "imgscg",
+        components: {},
+        props: {
+            src: String
+        },
+        computed: {
+            // 这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法
+            // 浏览器渲染 SVG 的性能一般，还不如 png。
+            href () {
+                return `#bri-${this.src}`;
+            }
+        },
+        data () {
+            return {};
+        },
+        created () {},
+        methods: {}
+    };
+</script>

package/src/components/other/DshEditPanel.vue

@@ -1,8 +1,18 @@
 <template>
     <div class="DshEditPanel">
-        <Form class="DshEditPanel-form" :model="value" :label-width="80" label-position="left">
+        <Form
+            class="DshEditPanel-form"
+            :model="value"
+            :label-width="80"
+            label-position="left"
+        >
             <FormItem label="应用名称">
-                <Input v-model="value.name" placeholder="请输入应用名称" autofocus @on-blur="onBlur(value)" />
+                <Input
+                    v-model="value.name"
+                    placeholder="请输入应用名称"
+                    autofocus
+                    @on-blur="onBlur(value)"
+                />
             </FormItem>
 
             <FormItem label="主题颜色">
@@ -13,7 +23,12 @@
                         class="DshEditPanel-colors-item"
                         @click="$dispatchEvent(operationMap.updateColor, colorItem.color, colorKey, value)"
                     >
-                        <div class="DshEditPanel-colors-item-content" :style="{ backgroundColor: colorItem.color }"></div>
+                        <div
+                            class="DshEditPanel-colors-item-content"
+                            :style="{
+                                backgroundColor: colorItem.color
+                            }"
+                        ></div>
                         <Icon
                             v-if="colorItem.color === value.color"
                             class="DshEditPanel-colors-item-icon"
@@ -36,7 +51,12 @@
                         }"
                         @click="$dispatchEvent(operationMap.updateIcon, iconItem, iconIndex, value)"
                     >
-                        <div class="DshEditPanel-icons-item-content" :style="{backgroundImage: 'url('+ $appData.themeColors[value.color].bgUrl +')'}">
+                        <div
+                            class="DshEditPanel-icons-item-content"
+                            :style="{
+                                backgroundImage: `url(${$appData.themeColors[value.color].bgUrl})`
+                            }"
+                        >
                             <Icon :custom="'bico-font ' + iconItem"></Icon>
                         </div>
                     </div>
@@ -47,7 +67,7 @@
         <!-- 操作按钮 -->
         <dsh-buttons
             class="bri-footer"
-            :list="$getOperationList(['cancel', 'confirm'])"
+            :list="$getOperationList(['canCancel', 'canConfirm'])"
             @click="$dispatchEvent($event)"
         ></dsh-buttons>
     </div>
@@ -55,8 +75,8 @@
 
 <script>
     export default {
-        components: {},
         name: "DshEditPanel",
+        components: {},
         props: {
             value: {
                 type: Object,
@@ -78,14 +98,14 @@
                         type: "updateIcon",
                         event: "clickUpdateIcon"
                     },
-                    cancel: {
+                    canCancel: {
                         name: "取消",
-                        type: "cancel",
+                        type: "canCancel",
                         event: "clickCancel"
                     },
-                    confirm: {
+                    canConfirm: {
                         name: "确定",
-                        type: "confirm",
+                        type: "canConfirm",
                         btnType: "primary",
                         event: "clickConfirm"
                     }
@@ -107,7 +127,9 @@
             },
 
             onBlur (value) {
-                value.name || (value.name = value.oldName || "未命名");
+                if (!value.name) {
+                    value.name = value.oldName || "未命名";
+                }
             },
             // 点击修改应用主题色
             clickUpdateColor (item, colorItem, colorKey, appObj) {

package/src/components/other/ZIframe.vue

@@ -7,6 +7,7 @@
             :src="url"
             frameborder="0"
             allowtransparency="true"
+            :allow="allow"
         ></iframe>
         <div
             v-else
@@ -33,6 +34,10 @@
             url: {
                 type: String,
                 required: true
+            },
+            allow: {
+                type: String,
+                default: "fullscreen"
             }
         },
         data () {