bri-components 1.2.35 → 1.2.36

package/package.json

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

package/src/abolish/DshFlatTable.vue

@@ -593,22 +593,7 @@
             // 是否显示 单元格校验提示文字
             getRuleResult (col, row, showRuleMessage = this.showRuleMessage) {
                 if ((this.ruleRecordMap[`${row._id}dsh${col._key}`] || {}).showRuleMessage || showRuleMessage) {
-                    const val = row[col._key];
-                    const ruleConfig = this.$getFieldRuleConfig(col);
-                    // 为空 校验必填；不为空 格式校验 （不是必填也要校验格式）
-                    return this.$isEmptyData(val)
-                        ? {
-                            bool: !col._required,
-                            message: `${col._name}为必填项`
-                        }
-                        : ruleConfig.regs && ruleConfig.regs.length
-                            ? {
-                                bool: ruleConfig.regs.every(regItem => regItem.test(val)),
-                                message: col._regMessage || `${col._name}格式不正确`
-                            }
-                            : {
-                                bool: true
-                    };
+                    return this.$getFieldRuleResult(col, row);
                 } else {
                     return {
                         bool: true

package/src/components/form/DshForm.vue

@@ -5,6 +5,7 @@
         :model="formData"
         :rules="showRules ? rules : {}"
         @submit.native.prevent
+        @on-validate="validateCb"
     >
         <Row>
             <template v-if="displayFormList.length">
@@ -21,7 +22,7 @@
                             @click.native="clickControl(formItem)"
                         >
                             <dsh-form-unit
-                                ref="dshFormItem"
+                                ref="dshFormUnit"
                                 :canEdit="canEdit"
                                 :formData="formData"
                                 :formItem="formItem"
@@ -99,11 +100,11 @@
             DshFormUnit
         },
         props: {
-            // 启用该参数后，查看状态时，空值字段不显示
-            notShowEmpty: {
-                type: Boolean,
-                default: false
-            },
+            // // 启用该参数后，查看状态时，空值字段不显示
+            // notShowEmpty: {
+            //     type: Boolean,
+            //     default: false
+            // },
             canEdit: {
                 type: Boolean,
                 default: true
@@ -158,6 +159,10 @@
         data () {
             return {
                 rules: {},
+                errorObj: {
+                    errors: []
+                },
+
                 forceValidateTypes: [
                     "select", "cascader", "regions", "cascaders", "file", "coordinates", "editor",
                     "users", "departments", "labels", "flatTable", "reference", "referenceBy"
@@ -205,26 +210,56 @@
                 return this.$refs.form;
             },
             submit () {
-                this.$nextTick(() => {
-                    this.$refs.form.validate((valid) => {
-                        if (valid && this.validate()) {
-                            console.log(valid);
+                this.errorObj = {
+                    errors: []
+                };
+
+                this.$refs.form.validate(valid => {
+                    // 此函数有时早于某些字段的validateCb，不稳定，所以加setTimeout目的确保最后执行
+                    setTimeout(() => {
+                        // if (!valid) {
+                        //     this.displayFormList.forEach(formItem => {
+                        //         const resultObj = this.$getFieldRuleResult(formItem, this.formData);
+                        //         if (resultObj.bool === false) {
+                        //             this.errorObj.errors.push(resultObj);
+                        //         }
+                        //     });
+                        // }
+                        const selfValid = this.selfValidate((valid, errorFormList) => {
+                            if (valid === false) {
+                                errorFormList.forEach(formItem => {
+                                    this.errorObj.errors.push({
+                                        bool: false,
+                                        message: `${formItem._name} 内部校验不正确！`
+                                    });
+                                });
+                            }
+                        });
+
+                        if (valid && selfValid) {
                             this.rulesSuccess({});
                         } else {
-                            this.rulesFailed({
-                                errors: []
-                            });
+                            this.rulesFailed(this.errorObj);
                         }
-                    });
+                    }, 0);
                 });
             },
-            // 控件校验
-            validate (callback) {
+            // iview的校验回调
+            validateCb (prop, status, error) {
+                if (status === false) {
+                    this.errorObj.errors.push({
+                        bool: false,
+                        message: error
+                    });
+                }
+            },
+            // 控件自己的校验
+            selfValidate (callback) {
                 let bool = true;
                 let errorRefs = [];
 
-                if (this.$refs.dshFormItem) {
-                    errorRefs = this.$refs.dshFormItem.filter(refItem => !refItem.validate());
+                if (this.$refs.dshFormUnit) {
+                    errorRefs = this.$refs.dshFormUnit.filter(refItem => !refItem.validate());
                     bool = !errorRefs.length;
                 } else {
                     bool = true;
@@ -282,7 +317,7 @@
                 // 格式校验 （不依赖必填）
                 if (ruleConfig.regs.length) {
                     rules.push({
-                        message: formItem._regMessage || `${formItem._name}格式不正确`,
+                        message: formItem._regMessage || `${formItem._name} 格式不正确！`,
                         trigger: "blur",
                         transform: (val) => {
                             if (this.$isEmptyData(val)) {
@@ -302,7 +337,7 @@
                             fields: {
                                 lnglat: {
                                     required: true,
-                                    message: `${formItem._name}为必填项`,
+                                    message: `${formItem._name} 为必填项！`,
                                     type: "array"
                                 }
                             }
@@ -311,7 +346,7 @@
                             fields: {
                                 list: {
                                     required: true,
-                                    message: `${formItem._name}不能为空行！`,
+                                    message: `${formItem._name} 不能为空行！`,
                                     type: "array"
                                 }
                             }
@@ -319,7 +354,7 @@
                         referenceBy: {
                             fields: {
                                 count: {
-                                    message: `${formItem._name}必须关联数据！`,
+                                    message: `${formItem._name} 必须关联数据！`,
                                     type: "number",
                                     transform: (val) => {
                                         if (val && val > 0) {
@@ -335,7 +370,7 @@
 
                     rules.push({
                         required: true,
-                        message: `${formItem._name}为必填项！`,
+                        message: `${formItem._name} 为必填项！`,
                         trigger: "blur, change",
                         type: "string",
                         ...(subFieldsMap[formItem._type] || {}),

package/src/components/list/BriFlatTable.vue

@@ -423,22 +423,7 @@
             // 是否显示 单元格校验提示文字
             getRuleResult (col, row, showRuleMessage = this.showRuleMessage) {
                 if ((this.ruleRecordMap[`${row._id}dsh${col._key}`] || {}).showRuleMessage || showRuleMessage) {
-                    const val = row[col._key];
-                    const ruleConfig = this.$getFieldRuleConfig(col);
-                    // 为空 校验必填；不为空 格式校验 （不是必填也要校验格式）
-                    return this.$isEmptyData(val)
-                        ? {
-                            bool: !col._required,
-                            message: `${col._name}为必填项`
-                        }
-                        : ruleConfig.regs && ruleConfig.regs.length
-                            ? {
-                                bool: ruleConfig.regs.every(regItem => regItem.test(val)),
-                                message: col._regMessage || `${col._name}格式不正确`
-                            }
-                            : {
-                                bool: true
-                    };
+                    return this.$getFieldRuleResult(col, row);
                 } else {
                     return {
                         bool: true

package/src/components/small/DshTabs.vue

@@ -2,6 +2,7 @@
     <Tabs
         :class="['DshTabs', `DshTabs-${mode}`]"
         v-model="curTabKey"
+        :animated="false"
     >
         <TabPane
             v-for="tabItem in list"
@@ -67,6 +68,7 @@
                     return this.value;
                 },
                 set (tabKey) {
+                    // iview的组件有问题，重复点击tab的某一项，set函数还是会触发！
                     if (tabKey !== this.tmpTabKey) {
                         this.init(tabKey);
 
@@ -96,7 +98,7 @@
                             style: {
                                 padding: "0px 16px"
                             }
-                        }, tabItem.name + tabItem._key);
+                        }, tabItem.name);
                     }
                     : undefined;
             }
@@ -151,41 +153,23 @@
 
                 &-bar {
                     height: 100%;
-                    margin: 0;
-                    border-bottom: 0;
+                    border-bottom: 0px!important;
+                    margin-bottom: 0px!important;
 
                     .ivu-tabs-nav-right {
-                        height: 100%;
+                        margin-top: 8px;
+                        margin-left: 40px;
                     }
 
                     .ivu-tabs-nav-container {
                         height: 100%;
+                        overflow: visible;
 
                         .ivu-tabs-nav-wrap {
-                            .ivu-tabs-nav-scroll {
-                                .ivu-tabs-nav {
-                                    .ivu-tabs-ink-bar {
-                                        height: 0;
-                                        background-color: #FFF;
-                                    }
 
-                                    .ivu-tabs-tab {
-                                        padding: 12px 10px;
-                                        margin: 0 10px;
-                                        font-size: @textSize;
-
-                                        &-active,
-                                        &-focused {
-                                            color: @themeColor;
-                                            background-color: #FFF;
-                                        }
-                                    }
-                                }
-                            }
-
-                            &.ivu-tabs-nav-scrollable {
-                                .ivu-tabs-nav-prev,
-                                .ivu-tabs-nav-next {
+                            .ivu-tabs-nav {
+                                &-prev,
+                                &-next {
                                     height: 100%;
                                     display: flex;
                                     flex-direction: row;
@@ -197,6 +181,38 @@
                                         font-size: @largeTitleSize;
                                     }
                                 }
+
+                                &-scroll {
+                                    &-disabled {
+                                        display: none;
+                                    }
+
+                                    .ivu-tabs-nav {
+
+                                        .ivu-tabs-ink-bar {
+                                            height: 0;
+                                            background-color: #FFF;
+                                        }
+
+                                        .ivu-tabs-tab {
+                                            // display: inline-block;
+                                            // height: 44px;
+                                            padding: 0px!important;
+                                            margin-right: 1px!important;
+                                            // background-color: #E5E5E5;
+                                            text-align: center;
+                                            line-height: 44px;
+                                            font-size: @textSize;
+                                            color: @titleColor;
+
+                                            &-active,
+                                            &-focused {
+                                                color: @themeColor;
+                                                background-color: #FFF;
+                                            }
+                                        }
+                                    }
+                                }
                             }
                         }
                     }
@@ -209,6 +225,7 @@
                 color: #ffffff;
 
                 &-bar {
+
                     .ivu-tabs-nav-right {
 
                     }
@@ -216,23 +233,34 @@
                     .ivu-tabs-nav-container {
 
                         .ivu-tabs-nav-wrap {
-                            .ivu-tabs-nav-scroll {
-                                .ivu-tabs-nav {
-                                    .ivu-tabs-ink-bar {
 
-                                    }
+                            .ivu-tabs-nav {
+                                &-prev,
+                                &-next {
+                                    color: #ffffff;
+                                }
+
+                                &-scroll {
+                                    .ivu-tabs-nav {
+
+                                        .ivu-tabs-ink-bar {
 
-                                    .ivu-tabs-tab {
-                                        &:hover {
-                                            color: #ffffff;
                                         }
 
-                                        &-active,
-                                        &-focused {
-                                            color: @theme-active;
+                                        .ivu-tabs-tab {
+                                            color: #ffffff;
 
                                             &:hover {
+                                                color: #ffffff;
+                                            }
+
+                                            &-active,
+                                            &-focused {
                                                 color: @theme-active;
+
+                                                &:hover {
+                                                    color: @theme-active;
+                                                }
                                             }
                                         }
                                     }
@@ -247,16 +275,17 @@
         // 页面编辑版
         &-page {
             .ivu-tabs {
+
                 &-bar {
                     border-bottom: 0px!important;
                     margin-bottom: 0px!important;
-                    align-items: center;
-
-                    .ivu-tabs-nav-wrap {
 
+                    .ivu-tabs-nav-right {
+                        margin-left: 40px;
                     }
 
                     .ivu-tabs-nav-container {
+
                         .ivu-tabs-nav-wrap {
 
                             .ivu-tabs-nav {
@@ -275,15 +304,17 @@
                                         align-items: center;
 
                                         // tab切换下方下划线
-                                        .ivu-tabs-ink-bar-animated {
+                                        .ivu-tabs-ink-bar {
                                             display: none;
+                                            &-animated {
+                                                display: none;
+                                            }
                                         }
 
                                         // tab切换标签
                                         .ivu-tabs-tab {
                                             display: inline-block;
                                             height: 40px;
-                                            // width: fit-content;
                                             padding: 0px!important;
                                             margin-right: 1px!important;
                                             background-color: #E5E5E5;

package/src/components/small/DshTabsSet.vue

@@ -4,40 +4,41 @@
         <dsh-draggable
             v-model="list"
             class="DshTabsSet-draggable"
-            :style="{ minWidth: `${list.length * 110}px` }"
+            :style="{
+                minWidth: `${list.length * 110}px`
+            }"
             @change="$dispatchEvent(operationMap.drag, $event.moved.element, null, list)"
         >
             <span
                 v-for="(item, index) in list"
                 :key="item._id"
-                :class="[
-                    'DshTabsSet-item',
-                    { 'DshTabsSet-item-normal': item.screenType !== 'all' },
-                    { 'DshTabsSet-item-active': item.screenType !== 'all' && !!curItem && curItem._id === item._id },
-                    { 'DshTabsSet-item-isEdit': item.isEdit }
-                ]"
+                :class="{
+                    'item': true,
+                    'item-active': !!curItem && curItem._id === item._id ,
+                    'item-edit': item.isEdit
+                }"
                 @click="$dispatchEvent(operationMap.clickTab, item, index, list)"
             >
                 <Input
                     v-if="item.isEdit"
+                    class="item-input"
                     :ref="item._id"
-                    class="DshTabsSet-item-input"
                     v-model="item.name"
                     :placeholder="`输入${theme}名字……`"
                     @on-blur="$dispatchEvent(operationMap.nameBlur, item, index, list)"
-                    @on-change="$dispatchEvent(operationMap.update, item, index, list)"
+                    @on-change="$dispatchEvent(operationMap.changeVal, item, index, list)"
                     @click.native.stop="0"
                 />
                 <span
                     v-else
-                    class="DshTabsSet-item-name dsh-ellipsis"
+                    class="item-name dsh-ellipsis"
                 >{{ item.name }}</span>
 
                 <template v-if="!item.isEdit && item.screenType !== 'all'">
                     <Icon
-                        v-for="operationItem in $getOperationList(['delete', 'clickUpdate'])"
+                        v-for="operationItem in $getOperationList(['delete', 'update'])"
                         :key="operationItem.type"
-                        :class="[`DshTabsSet-item-${operationItem.type}`]"
+                        :class="[`item-${operationItem.type}`]"
                         :type="operationItem.icon"
                         :color="operationItem.color"
                         :size="operationItem.size || 18"
@@ -50,11 +51,11 @@
         --><span
                 v-for="operationItem in $getOperationList(['create'])"
                 :key="operationItem.type"
-                class="DshTabsSet-item DshTabsSet-item-create"
+                class="item item-create"
                 @click="$dispatchEvent(operationItem, null, null, list)"
             >
                 <Icon
-                    class="DshTabsSet-create-icon"
+                    class="item-create-icon"
                     :type="operationItem.icon"
                     :color="operationItem.color"
                     :size="operationItem.size"
@@ -119,10 +120,10 @@
                         color: "red",
                         event: "delete"
                     },
-                    update: {
+                    changeVal: {
                         name: "修改",
-                        type: "update",
-                        event: "update"
+                        type: "changeVal",
+                        event: "changeVal"
                     },
                     drag: {
                         name: "拖动",
@@ -130,9 +131,9 @@
                         event: "drag"
                     },
 
-                    clickUpdate: {
+                    update: {
                         name: "点击修改",
-                        type: "clickUpdate",
+                        type: "update",
                         icon: "md-create",
                         size: 12,
                         color: "#1b9aee",
@@ -183,7 +184,7 @@
                 }
             },
             // 修改
-            update (operationItem, data, index, list) {
+            changeVal (operationItem, data, index, list) {
                 this.change();
             },
             // 拖动
@@ -236,7 +237,7 @@
             display: flex;
         }
 
-        &-item {
+        .item {
             display: inline-block;
             min-width: 110px;
             height: 100%;
@@ -248,22 +249,9 @@
             cursor: pointer;
             overflow: hidden;
             position: relative;
-            &-normal:hover,
-            &-isEdit,
-            &-active {
-                background-color: @bgColor;
-                font-weight: 600;
-                color: #515a6e;
-            }
-            &:hover {
-                .DshTabsSet-item-delete,
-                .DshTabsSet-item-clickUpdate {
-                    display: inline-block;
-                }
-            }
 
             &-delete,
-            &-clickUpdate {
+            &-update {
                 display: none;
                 padding: 2px;
                 position: absolute;
@@ -272,7 +260,7 @@
             &-delete {
                 top: 2px;
             }
-            &-clickUpdate {
+            &-update {
                 bottom: 2px;
             }
             &-create {
@@ -282,30 +270,40 @@
                 &-icon {}
             }
 
-            &-name {}
-            &-input {}
-        }
-    }
-
-    .DshTabsSet {
-        .ivu-input-wrapper {
-            vertical-align: baseline;
-        }
-        &-item-input {
-            .ivu-input {
-                min-width: 150px;
-                height: 18px;
-                padding: 3px;
-                border: none;
-                border-radius: 0px;
+            &:hover,
+            &-active,
+            &-edit {
                 background-color: @bgColor;
-                line-height: 16px;
-                font-size: 12px;
+                font-weight: 600;
                 color: #515a6e;
-                &:focus {
-                    box-shadow: none;
+            }
+            &:hover {
+                .item-delete,
+                .item-update {
+                    display: inline-block;
                 }
             }
+
+            &-input {
+                .ivu-input-wrapper {
+                    vertical-align: baseline;
+                }
+                .ivu-input {
+                    min-width: 150px;
+                    height: 18px;
+                    padding: 3px;
+                    border: none;
+                    border-radius: 0px;
+                    background-color: @bgColor;
+                    line-height: 16px;
+                    font-size: 12px;
+                    color: #515a6e;
+                    &:focus {
+                        box-shadow: none;
+                    }
+                }
+            }
+            &-name {}
         }
     }
 </style>