bri-components 1.1.2 → 1.1.4

package/src/styles/components/small/DshModal.less

@@ -0,0 +1,207 @@
+.DshModal {
+    &-header {
+        width: 100%;
+        height: 100%;
+    }
+    &-close {
+        padding: 2px;
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        cursor: pointer;
+    }
+
+    &-default,
+    &-middle,
+    &-large,
+    &-small {
+        .ivu-modal-wrap {
+            .ivu-modal {
+                margin: auto;
+                position: absolute;
+                top: 0px;
+                bottom: 0px;
+                left: 0px;
+                right: 0px;
+                .ivu-modal-content {
+                    width: 100%;
+                    height: 100%;
+                    display: flex;
+                    flex-direction: column;
+                    .ivu-modal-close {}
+
+                    .ivu-modal-header {
+                        width: 100%;
+                        height: 44px;
+                        padding: 10px 40px 10px 16px;
+                    }
+                    .ivu-modal-body {
+                        width: 100%;
+                        flex: 1;
+                        min-height: 200px;
+                        padding: 0px;
+                        overflow: auto;
+                    }
+                    .ivu-modal-footer {
+                        width: 100%;
+                        height: 50px;
+                    }
+                }
+            }
+        }
+    }
+
+    &-default {
+        .ivu-modal-wrap {
+            .ivu-modal {
+                width: 750px !important;
+                height: 550px !important;
+                max-height: 100%;
+                max-width: 100%;
+            }
+        }
+    }
+    &-small {
+         .ivu-modal-wrap {
+             .ivu-modal {
+                // width: 500px !important;
+                height: 400px !important;
+                max-height: 100%;
+                max-width: 100%;
+                .ivu-modal-content{
+                    .DshModal-close {
+                        top: 20px;
+                        right: 24px;
+                        color: rgba(0,0,0,0.6);
+                        font-size: 16px!important;
+                    }
+
+                    .ivu-modal-header {
+                        width: 100%;
+                        height: 44px;
+                        padding: 20px 24px 0px 24px;
+                        border-bottom: none;
+                        &-inner {
+                            color: rgba(0,0,0,0.9);
+                            font-size: 16px;
+                            font-weight: 500;
+                            line-height: 24px;
+                            height: 24px;
+                        }
+                    }
+                    .ivu-modal-body {
+                        padding: 16px 24px 20px;
+                    }
+                }
+            }
+        }
+    }
+    &-middle {
+         .ivu-modal-wrap {
+             .ivu-modal {
+                width: 1000px !important;
+                height: 800px !important;
+                max-height: 100%;
+                max-width: 100%;
+            }
+        }
+    }
+    &-large {
+         .ivu-modal-wrap {
+             .ivu-modal {
+                width: 80% !important;
+                height: 90% !important;
+                min-width: 1000px !important;
+                max-height: 100%;
+                max-width: 100%;
+            }
+        }
+    }
+    &-auto {
+         .ivu-modal-wrap {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+             .ivu-modal {
+                top: 0px;
+                max-height: 100%;
+            }
+        }
+    }
+}
+
+.bri-modal-flex {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .ivu-modal {
+        top: 0px
+    }
+
+    .ivu-modal-content {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .ivu-modal-body {
+        flex: 1;
+        overflow: auto;
+        padding: 0px;
+    }
+}
+
+// 默认模态框brimodal
+.bri-modal {
+    .ivu-modal-header {
+        padding: 14px 36px;
+
+        .ivu-modal-header-inner {
+            color: @titleColor;
+            font-size: @titleSize;
+            font-weight: bold;
+        }
+    }
+
+    .ivu-modal-body {
+        padding: 16px;
+    }
+
+    .ivu-modal-footer {
+        display: flex;
+        justify-content: space-between;
+        padding: 20px;
+
+        button {
+            width: 48%;
+            height: 44px;
+            line-height: 44px;
+        }
+    }
+
+    &-content {
+        padding: 20px 0;
+    }
+
+    &-footer {
+        display: flex;
+        justify-content: space-between;
+        padding: 20px 0;
+
+        button {
+            flex: 1;
+            margin: 0 10px;
+            height: 44px;
+            line-height: 44px;
+
+            &:first-child {
+                margin-left: 0;
+            }
+
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+}

package/src/styles/components/unit/DshFormItem.less

@@ -42,6 +42,8 @@
 
         &-name {
             font-size: @textSize;
+            .dsh-ellipsis();
+
             &-edit {
                 color: @textColor;
             }

package/src/styles/reset.less

@@ -60,6 +60,20 @@ li {
     }
 }
 
+.bri-scrollbar3 {
+    overflow: auto;
+    &::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+    }
+
+    &:-webkit-scrollbar-thumb {
+        border-radius: 3px;
+        background: rgba(51, 51, 51, .1);
+        background-clip: border-box;
+    }
+}
+
 .dsh-scrollbar3::-webkit-scrollbar {
     height: 3px;
     width: 3px;

package/src/styles/variables.less

@@ -11,6 +11,7 @@
 
 // 背景色
 @bgColor               : #F5F5F5;
+@hoverBg               : #F0F0F0;
 @white                 : #FFF;
 @black                 : #000;
 

package/src/utils/table.js

@@ -1,6 +1,7 @@
 /* -------------------- 表格 -------------- */
 // 转化表单字段属性 to 表格参数, 是否需要过滤tag
 const transformToColumns = function (form) {
+    let headerFilter = this.listPropsObj && this.listPropsObj.headerFilter;
     return form
         .filter(col => col._type !== "tag")
         .map(col => {
@@ -12,7 +13,7 @@ const transformToColumns = function (form) {
                 key: col._key,
                 align: col._align || typeData.align,
                 width: col._width || typeData.width,
-                sortBy: col._sortBy || typeData.sortBy,
+                sortBy: headerFilter ? col._sortBy || typeData.sortBy : undefined,
 
                 ...(
                     col._type
@@ -36,7 +37,7 @@ const transformToColumns = function (form) {
                                 renderBodyCell: ({ row, column, rowIndex }, h) => {
                                     return h("dsh-unit", {
                                         props: {
-                                            isUnit: true,
+                                            canEdit: false,
                                             rowIndex: rowIndex,
                                             formData: row,
                                             formItem: col
@@ -49,7 +50,7 @@ const transformToColumns = function (form) {
                 ...(
                     ["select", "checkbox"].includes(col._type)
                         ? {
-                            filter: {
+                            filter: headerFilter ? {
                                 isMultiple: true,
                                 maxHeight: 300,
                                 filterList: col._data.map(item => ({
@@ -78,7 +79,7 @@ const transformToColumns = function (form) {
                                     };
                                     this.filterReset && this.filterReset(conditionItem);
                                 }
-                            }
+                            } : null
                         }
                         : {}
                 ),

package/src/components/controls/base/DshLabels.vue

@@ -1,309 +0,0 @@
-<!-- 动态标签 -->
-<template>
-    <div
-        ref="dshLabelsRef"
-        class="DshLabels"
-    >
-        <!-- 编辑 -->
-        <template v-if="canEdit">
-            <!-- 编辑区 -->
-            <Input
-                v-show="status === 'edit'"
-                v-model="curVal"
-                ref="dshLabelsInput"
-                class="DshLabels-input"
-                type="text"
-                :icon="selfPropsObj._inputIcon"
-                :placeholder="selfPropsObj._placeholder"
-                :disabled="!finalCanEdit"
-                @on-enter="onClick"
-                @on-click="onClick"
-                @on-change="onChange"
-                @on-focus="onChange"
-            ></Input>
-
-            <!-- 查看区 -->
-            <div
-                v-show="status === 'show'"
-                :class="{
-                    'DshLabels-show':true,
-                    'DshLabels-showReadOnly':!finalCanEdit
-                }"
-                @click="clickAdd"
-            >
-                <div
-                    class="DshLabels-show-content"
-                    @click="clickAdd"
-                >
-                    <span
-                        v-for="labelItem in val"
-                        :key="labelItem._key"
-                        class="DshLabels-show-content-item"
-                    >
-                        <span
-                            class="DshLabels-show-content-item-content"
-                            :title="labelItem.name"
-                            @click.stop="clickEdit(labelItem)"
-                        >
-                            {{ labelItem.name }}
-                        </span>
-                        <Icon
-                            class="DshLabels-show-content-item-del"
-                            type="ios-close"
-                            size="20"
-                            @click.stop="clickDelete(labelItem)"
-                        />
-                    </span>
-                </div>
-                <div
-                    v-if="canEdit"
-                    class="DshLabels-show-add"
-                >
-                    <Icon
-                        type="md-create"
-                        @click="clickAdd"
-                    />
-                </div>
-
-            </div>
-
-            <!-- 数据选择区：接口依据用户输入返回数据 -->
-            <div
-                v-if="ShowTagList"
-                ref="searchResultRef"
-                class="DshLabels-searchResult"
-                :style="{
-                    width: getStyle()
-                }"
-            >
-                <Icon
-                    type="md-close"
-                    class="DshLabels-searchResult-close"
-                    @click="closeTagList"
-                />
-                <ul
-                    v-if="list&&list.length>0"
-                    class="DshLabels-searchResult-list"
-                >
-                    <li
-                        v-for="item in list"
-                        :key="item._id"
-                        :class="{'selected':item.selected}"
-                        @click="clickTag(item)"
-                    >{{ item.name }}
-                    </li>
-                </ul>
-                <div
-                    v-else
-                    class="DshLabels-searchResult-nodata"
-                >
-                    无匹配数据
-                </div>
-            </div>
-        </template>
-
-        <!-- 查看 -->
-        <div
-            v-else
-            :class="{'DshLabels-view':true,
-                'DshLabels-view-readonly': $isReadonly(canEdit, selfPropsObj),
-                'DshLabels-view-disabled': $isDisabled(canEdit, selfPropsObj),
-            }"
-        >
-            <template v-if="val.length">
-                <Tag
-                    v-for="tagItem in val"
-                    :key="tagItem._key"
-                    size="medium"
-                    class="DshLabels-view-tag"
-                >
-                    {{ tagItem.name }}
-                </Tag>
-            </template>
-
-            <div
-                v-else
-                class="DshLabels-view-nodata"
-            >
-                <template v-if="isUnit">
-                    -
-                </template>
-                <template v-else>
-                    暂无内容
-                </template>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    import controlMixin from "../controlMixin.js";
-
-    export default {
-        name: "DshLabels",
-        mixins: [controlMixin],
-
-        data () {
-            return {
-                status: "", // edit/show
-                curVal: "",
-                curKey: "", // 当前正在修改label的_key
-                ShowTagList: false,
-                list: []
-            };
-        },
-        computed: {
-            selfPropsObj () {
-                return {
-                    ...this.propsObj,
-                    ...this.commonDealPropsObj,
-                    _inputIcon: !this.propsObj._onlySelect ? "md-add" : ""
-                };
-            },
-            modKey () {
-                return this.propsObj.modKey;
-            },
-            val: {
-                get () {
-                    return this.value[this.propsObj._key] || [];
-                },
-                set (val) {
-                    this.value[this.propsObj._key] = val;
-                }
-            }
-        },
-        created () {
-            this.init();
-        },
-        methods: {
-            init () {
-                this.status = this.canEdit && !this.val.length
-                    ? "edit"
-                    : "show";
-
-            },
-            // 确认输入
-            onClick () {
-                if (this.finalCanEdit && !this.selfPropsObj._onlySelect) {
-                    if (this.curVal.trim().length > 0) {
-                        this.status = "show";
-                        let labelItem = {_key: "", name: ""};
-                        labelItem._key = this.curKey || this.$randomB36("Labels");
-                        labelItem.name = this.curVal.trim();
-                        labelItem.labelType = this.selfPropsObj._labelType;
-                        this.val = this.val.concat([labelItem]);
-                        this.ShowTagList = false;
-                        this.change();
-                    } else {
-                        this.status = "show";
-                        this.ShowTagList = false;
-                    }
-                }
-            },
-            onChange () {
-                this.getListData();
-            },
-            getListData () {
-                this.$https({
-                    url: {
-                        module: "sheet",
-                        name: "memberAll"
-                    },
-                    params: {
-                        search: {
-                            entityKey: this.entityKey, // 当前工作表关联的数据表Key
-                            modKey: this.modKey,
-                            name: this.curVal,
-                            fieldKey: this.selfPropsObj._key === "_default" ? this.value._key : (this.selfPropsObj.__realKey__ || this.selfPropsObj._key), // 当前字段Key
-                            labelType: this.selfPropsObj._labelType
-                        },
-                        pagination: {
-                            page: 1,
-                            pagesize: 999
-                        }
-                    },
-                    callback: data => {
-                        // 当前已选择的标签
-                        let keysArr = this.val.map(item => item._key);
-                        if (data.list.length > 0) {
-                            this.list = data.list.map(item => ({
-                                ...item,
-                                selected: !!keysArr.includes(item._key)
-                            }));
-                        } else {
-                            this.list = [];
-                        }
-                        this.ShowTagList = true;
-                        // this.ShowTagList = !this.ShowTagList;
-                    }
-                });
-            },
-            clickTag (item) {
-                if (this.finalCanEdit) {
-                    this.status = "show";
-                    let keysArr = this.val.map(i => i._key);
-                    if (!keysArr.includes(item._key)) {
-                        this.val = this.val.concat(this.list.filter(listItem => listItem._key == item._key));
-                        this.ShowTagList = false;
-                        this.change();
-                    } else {
-                        this.ShowTagList = false;
-                        this.status = "show";
-                        this.curVal = "";
-                    }
-                }
-            },
-            clickEdit (labelItem) {
-                if (this.finalCanEdit) {
-                    this.status = "edit";
-                    this.curVal = labelItem.name;
-                    this.curKey = labelItem._key;
-                    this.val = this.val.filter(i => i._key != labelItem._key);
-                }
-            },
-            // 切换为输入框编辑模式
-            clickAdd () {
-                if (this.finalCanEdit) {
-                    this.status = "edit";
-                    this.curVal = "";
-                    this.$nextTick(() => {
-                        this.$refs.dshLabelsInput.focus({
-                            cursor: "start"
-                        });
-                    });
-
-                    this.$debounce(this.getListData(), 100);
-                }
-            },
-            clickDelete (labelItem) {
-                if (this.finalCanEdit) {
-                    this.val = this.val.filter(i => i._key != labelItem._key);
-
-                    if (!this.val.length) {
-                        this.curVal = "";
-                        this.status = "edit";
-                        this.change();
-                    }
-                    this.change();
-                }
-            },
-            closeTagList () {
-                this.ShowTagList = false;
-                this.status = "show";
-            },
-            getStyle () {
-                this.$nextTick(() => {
-                    this.$refs.searchResultRef.style.width = `${this.$refs.dshLabelsRef.offsetWidth}px`;
-                    this.$refs.searchResultRef.style.top = `${this.$refs.dshLabelsRef.getBoundingClientRect().top + 34}px`;
-                });
-            }
-        },
-        watch: {
-            value (newVal, oldVal) {
-                if (newVal !== oldVal) {
-                    this.init();
-                }
-            }
-        }
-    };
-</script>

package/src/components/controls/base/YSerialNumber.vue

@@ -1,36 +0,0 @@
-<template>
-    <div class="YSerialNumber">
-        <dsh-input
-            :value="value"
-            :propsObj="propsObj"
-            :canEdit="false"
-        ></dsh-input>
-    </div>
-</template>
-
-<script>
-    import controlMixin from "../controlMixin.js";
-
-    export default {
-        name: "YSerialNumber",
-        mixins: [controlMixin],
-        props: {},
-        data () {
-            return {};
-        },
-        computed: {},
-        created () {},
-        methods: {}
-    };
-</script>
-
-<style lang="less" scoped>
-    .YSerialNumber {
-        width: 100%;
-    }
-</style>
-<style lang="less">
-    .YSerialNumber {
-
-    }
-</style>

package/src/components/controls/base/controlShow.vue

@@ -1,52 +0,0 @@
-<template>
-    <div class="controlShow">
-        <Ctooltip
-            :transfer="true"
-            maxWidth="200"
-            :content="showVal"
-        >
-            <div
-                v-if="$isFormItemHasData(showVal)"
-                class="dsh-ellipsis controlShow-val"
-            >
-                {{ showVal }}
-            </div>
-            <div
-                v-else
-                class="controlShow-nodata dsh-ellipsis"
-            >
-                {{noDataText}}
-            </div>
-        </Ctooltip>
-    </div>
-</template>
-
-<script>
-
-    export default {
-        name: "controlShow",
-        props: {
-            showVal: String,
-            propsObj: {
-                type: Object,
-                default: () => {
-                    return {};
-                }
-            },
-            isUnit: Boolean
-        },
-        data () {
-            return {
-            };
-        },
-        computed: {
-            noDataText () {
-                return this.isUnit ? "-" : "暂无内容";
-            }
-        },
-        created () {
-        },
-        methods: {
-        }
-    };
-</script>