bri-components 1.5.22 → 1.6.0

package/src/components/unit/DshFormUnit.vue

@@ -1,398 +1,398 @@
-<template>
-    <div
-        :class="[
-            {
-                'DshFormUnit': true,
-                [`DshFormUnit-type-${formItem._type}`]: true,
-                'DshFormUnit-line': formItem._line,
-                'DshFormUnit-required': canEdit && formItem._required
-            },
-            formControlClass
-        ]"
-        :style="unitStyle"
-    >
-        <!-- label -->
-        <div
-            v-if="!formItem._noLabel"
-            class="DshFormUnit-label"
-            :style="labelStyle"
-        >
-            <!-- 左 -->
-            <span class="DshFormUnit-label-left">
-                <bri-tooltip
-                    :content="formItem._name"
-                    transfer
-                >
-                    <span :class="{
-                        'DshFormUnit-label-name': true,
-                        'DshFormUnit-label-name-edit': canEdit,
-                        'DshFormUnit-label-name-show': !canEdit
-                    }">
-                        <slot name="label">
-                            {{ formItem._name }}
-
-                            <!-- 有更新标记-->
-                            <span
-                                v-if="changedFields.includes(formItem._key)"
-                                class="DshFormUnit-label-name-sign"
-                            >!有更新</span>
-                        </slot>
-
-                        <!-- label后可自定义内容 -->
-                        <dsh-render :render="tipsRender(formItem, formData)"></dsh-render>
-                    </span>
-                </bri-tooltip>
-            </span>
-
-            <!-- 右 -->
-            <span class="DshFormUnit-label-right">
-                <slot name="extra">
-                    <bri-tooltip
-                        v-if="formItem._description"
-                        :content="formItem._description"
-                        maxWidth="400"
-                        transfer
-                    >
-                        <span class="DshFormUnit-label-description">
-                            {{ `* ${formItem._description}` }}
-                        </span>
-                    </bri-tooltip>
-                </slot>
-            </span>
-        </div>
-
-        <!-- 控件 -->
-        <div class="DshFormUnit-control">
-            <!-- 控件位置放置的dom -->
-            <slot name="control"></slot>
-
-            <slot>
-                <component
-                    class="DshFormUnit-control-component"
-                    :style="{
-                        'text-align': formItem._lineAlign
-                    }"
-                    ref="control"
-                    :is="curComponentName"
-                    :canEdit="canEdit"
-                    :value="formData"
-                    :propsObj="formItem"
-                    :allFormList="allFormList"
-                    :inTableType="inTableType"
-                    :allListRows="allListRows"
-                    :rowIndex="rowIndex"
-                    :parentFormList="parentFormList"
-                    :parentObj="parentObj"
-                    @change="change"
-                    @refChange="refChange"
-                    @changeField="changeField"
-                ></component>
-            </slot>
-        </div>
-
-        <!-- 角插槽 -->
-        <slot name="corner"></slot>
-    </div>
-</template>
-
-<script>
-    import unitMixin from "./unitMixin.js";
-
-    export default {
-        name: "DshFormUnit",
-        mixins: [
-            unitMixin
-        ],
-        props: {
-            // 实际最精确值是68px（label:30px, control:32px, 上下padding各: 2px 8px，因为ivu-form-item-content里line-height: 32px导致有问题，故先74px
-            height: {
-                type: [String, Number],
-                default: "74"
-            },
-            rowStyle: {
-                type: Object,
-                default () {
-                    return {};
-                }
-            },
-            labelStyle: {
-                type: Object,
-                default () {
-                    return {};
-                }
-            },
-            formControlClass: String
-        },
-        data () {
-            return {
-                showTipModal: false // tipsRender使用，不可删除
-            };
-        },
-        computed: {
-            unitStyle () {
-                return {
-                    width: `calc(${(this.formItem._br && this.formItem._span ? this.formItem._span / 24 : 1) * 100}% - 12px)`,
-                    height: this.formItem._formHeight
-                        ? `${this.formItem._formHeight}px`
-                        : (this.formItem._br || [undefined, 0, 24].includes(this.formItem._span)
-                            ? undefined
-                            : `${this.height - (this.canEdit ? 0 : 10)}px`// 去掉下padding
-                        ),
-                    minHeight: "42px",
-                    paddingBottom: this.canEdit ? undefined : "0px", // 详情查看页时，不要上下的padding，为了美观
-
-                    ...this.rowStyle
-                };
-            }
-        },
-        created () {},
-        methods: {
-            // 校验方法 -供外部使用
-            validate () {
-                return !this.$refs.control.validate || this.$refs.control.validate();
-            },
-
-            changeField (...params) {
-                this.$emit("changeField", ...params);
-            },
-            tipsRender (formItem, formData) {
-                return formItem._tipsRender
-                    ? formItem._tipsRender.call(this, formItem, formData)
-                    : formItem._openTip
-                        ? (h) => {
-                            return h("span", {
-                                class: "DshFormUnit-tip"
-                            }, [
-                                h("Icon", {
-                                    props: {
-                                        type: "md-help-circle"
-                                    },
-                                    style: {
-                                        cursor: "pointer"
-                                    },
-                                    on: {
-                                        click: () => {
-                                            this.clickOpenTip(formItem, formData);
-                                        }
-                                    }
-                                }),
-
-                                h("dsh-modal", {
-                                    class: "DshFormUnit-tip-modal",
-                                    props: {
-                                        value: this.showTipModal,
-                                        mode: "small",
-                                        propsObj: {
-                                            title: "温馨提示",
-                                            showSlotClose: false,
-                                            maskClosable: true
-                                        }
-                                    },
-                                    on: {
-                                        input: bool => {
-                                            this.showTipModal = bool;
-                                        }
-                                    }
-                                }, [
-                                    h("div", {
-                                        class: "wrap"
-                                    }, [
-                                        h("div", {
-                                            class: "wrap-content",
-                                            domProps: {
-                                                innerHTML: formItem._tipContent
-                                            }
-                                        }),
-                                        h("div", {
-                                            class: "wrap-btns"
-                                        }, [
-                                            h("Button", {
-                                                props: {
-                                                    type: "primary"
-                                                },
-                                                on: {
-                                                    click: () => {
-                                                        this.showTipModal = false;
-                                                    }
-                                                }
-                                            }, "我知道了")
-                                        ])
-                                    ])
-                                ])
-                            ]);
-                        }
-                        : undefined;
-            },
-            // 是否打开tip弹窗
-            clickOpenTip (formItem, formData) {
-                if (formItem._tipKind === "dynamic" && !formItem._tipContent) {
-                    if (formItem._tipUrl) {
-                        this.$https({
-                            url: {
-                                module: "customPage",
-                                name: formItem._tipUrl
-                            },
-                            params: {
-                                formData: formData,
-                                propsObj: formItem
-                            },
-                            callback: res => {
-                                this.showTipModal = true;
-                                formItem._tipContent = res;
-                            }
-                        });
-                    }
-                } else {
-                    this.showTipModal = true;
-                }
-            }
-        }
-    };
-</script>
-
-<style lang="less">
-    .DshFormUnit {
-        margin: 3px 6px; // 不可轻易改margin的左右值，上面style的width根据他calc
-        padding: 0px 10px 10px;
-
-        &-label {
-            padding: 5px 0px;
-            line-height: 20px;
-            font-size: @smallSize;
-            position: relative;
-            display: flex;
-            align-items: center;
-
-            &-left {
-                flex: 3;
-                min-width: 0px;
-            }
-
-            &-right {
-                flex: 1;
-                min-width: 0px;
-                padding-left: 10px;
-                text-align: right;
-            }
-
-            &-name {
-                .dsh-ellipsis();
-                font-size: @textSize;
-
-                &-edit {
-                    color: @textColor;
-                }
-
-                &-show {
-                    color: @contentColor;
-                }
-
-                &-sign {
-                    #dsh-sign-change();
-                }
-            }
-
-            &-description {
-                .dsh-ellipsis();
-                color: #60c0ec;
-            }
-        }
-
-        &-control {
-            // overflow: hidden;
-
-            &-component {
-
-            }
-        }
-
-        &-type {
-            &-tag {
-                padding: 2px 10px 6px;
-            }
-        }
-
-        // 左右显示时
-        &-line {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-
-            .DshFormUnit-label {
-                max-width: 280px;
-                margin: 0px 8px 0px -10px; // line模式下显示必填
-                padding-left: 10px;
-                font-size: @textSize;
-
-                &-left {
-                    flex: 1;
-                    min-width: 0px;
-                }
-
-                &-right {
-                    flex: none;
-                    max-width: 70px;
-                    min-width: 0px;
-                }
-            }
-
-            .DshFormUnit-control {
-                flex: 1;
-                min-width: 0px;
-
-                &-component {
-
-                }
-            }
-        }
-
-        &-required {
-            > .DshFormUnit-label {
-                &::before {
-                    position: absolute;
-                    left: -10px;
-
-                    content: '*';
-                    display: inline-block;
-                    width: 6px;
-                    line-height: 1.5;
-                    font-family: SimSun;
-                    font-weight: 500;
-                    font-size: @textSize;
-                    color: #E94829;
-                }
-            }
-        }
-
-        // 提示框的
-        &-tip {
-            &-modal {
-                .wrap {
-                    width: 100%;
-                    height: 100%;
-                    display: flex;
-                    flex-direction: column;
-
-                    &-content {
-                        flex: 1;
-                        min-height: 0px;
-                        padding: 0px 12px;
-                        overflow: auto;
-                    }
-
-                    &-btns {
-                        margin: 10px 0px;
-                        text-align: right;
-
-                        .ivu-btn {
-                            font-size: 16px;
-                            font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
-                            font-weight: 600;
-                            border-radius: 4px;
-                        }
-                    }
-                }
-            }
-        }
-    }
-</style>
+<template>
+    <div
+        :class="[
+            {
+                'DshFormUnit': true,
+                [`DshFormUnit-type-${formItem._type}`]: true,
+                'DshFormUnit-line': formItem._line,
+                'DshFormUnit-required': canEdit && formItem._required
+            },
+            formControlClass
+        ]"
+        :style="unitStyle"
+    >
+        <!-- label -->
+        <div
+            v-if="!formItem._noLabel"
+            class="DshFormUnit-label"
+            :style="labelStyle"
+        >
+            <!-- 左 -->
+            <span class="DshFormUnit-label-left">
+                <bri-tooltip
+                    :content="formItem._name"
+                    transfer
+                >
+                    <span :class="{
+                        'DshFormUnit-label-name': true,
+                        'DshFormUnit-label-name-edit': canEdit,
+                        'DshFormUnit-label-name-show': !canEdit
+                    }">
+                        <slot name="label">
+                            {{ formItem._name }}
+
+                            <!-- 有更新标记-->
+                            <span
+                                v-if="changedFields.includes(formItem._key)"
+                                class="DshFormUnit-label-name-sign"
+                            >!有更新</span>
+                        </slot>
+
+                        <!-- label后可自定义内容 -->
+                        <dsh-render :render="tipsRender(formItem, formData)"></dsh-render>
+                    </span>
+                </bri-tooltip>
+            </span>
+
+            <!-- 右 -->
+            <span class="DshFormUnit-label-right">
+                <slot name="extra">
+                    <bri-tooltip
+                        v-if="formItem._description"
+                        :content="formItem._description"
+                        maxWidth="400"
+                        transfer
+                    >
+                        <span class="DshFormUnit-label-description">
+                            {{ `* ${formItem._description}` }}
+                        </span>
+                    </bri-tooltip>
+                </slot>
+            </span>
+        </div>
+
+        <!-- 控件 -->
+        <div class="DshFormUnit-control">
+            <!-- 控件位置放置的dom -->
+            <slot name="control"></slot>
+
+            <slot>
+                <component
+                    class="DshFormUnit-control-component"
+                    :style="{
+                        'text-align': formItem._lineAlign
+                    }"
+                    ref="control"
+                    :is="curComponentName"
+                    :canEdit="canEdit"
+                    :value="formData"
+                    :propsObj="formItem"
+                    :allFormList="allFormList"
+                    :inTableType="inTableType"
+                    :allListRows="allListRows"
+                    :rowIndex="rowIndex"
+                    :parentFormList="parentFormList"
+                    :parentObj="parentObj"
+                    @change="change"
+                    @refChange="refChange"
+                    @changeField="changeField"
+                ></component>
+            </slot>
+        </div>
+
+        <!-- 角插槽 -->
+        <slot name="corner"></slot>
+    </div>
+</template>
+
+<script>
+    import unitMixin from "./unitMixin.js";
+
+    export default {
+        name: "DshFormUnit",
+        mixins: [
+            unitMixin
+        ],
+        props: {
+            // 实际最精确值是68px（label:30px, control:32px, 上下padding各: 2px 8px，因为ivu-form-item-content里line-height: 32px导致有问题，故先74px
+            height: {
+                type: [String, Number],
+                default: "74"
+            },
+            rowStyle: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            labelStyle: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            formControlClass: String
+        },
+        data () {
+            return {
+                showTipModal: false // tipsRender使用，不可删除
+            };
+        },
+        computed: {
+            unitStyle () {
+                return {
+                    width: `calc(${(this.formItem._br && this.formItem._span ? this.formItem._span / 24 : 1) * 100}% - 12px)`,
+                    height: this.formItem._formHeight
+                        ? `${this.formItem._formHeight}px`
+                        : (this.formItem._br || [undefined, 0, 24].includes(this.formItem._span)
+                            ? undefined
+                            : `${this.height - (this.canEdit ? 0 : 10)}px`// 去掉下padding
+                        ),
+                    minHeight: "42px",
+                    paddingBottom: this.canEdit ? undefined : "0px", // 详情查看页时，不要上下的padding，为了美观
+
+                    ...this.rowStyle
+                };
+            }
+        },
+        created () {},
+        methods: {
+            // 校验方法 -供外部使用
+            validate () {
+                return !this.$refs.control.validate || this.$refs.control.validate();
+            },
+
+            changeField (...params) {
+                this.$emit("changeField", ...params);
+            },
+            tipsRender (formItem, formData) {
+                return formItem._tipsRender
+                    ? formItem._tipsRender.call(this, formItem, formData)
+                    : formItem._openTip
+                        ? (h) => {
+                            return h("span", {
+                                class: "DshFormUnit-tip"
+                            }, [
+                                h("Icon", {
+                                    props: {
+                                        type: "md-help-circle"
+                                    },
+                                    style: {
+                                        cursor: "pointer"
+                                    },
+                                    on: {
+                                        click: () => {
+                                            this.clickOpenTip(formItem, formData);
+                                        }
+                                    }
+                                }),
+
+                                h("dsh-modal", {
+                                    class: "DshFormUnit-tip-modal",
+                                    props: {
+                                        value: this.showTipModal,
+                                        mode: "small",
+                                        propsObj: {
+                                            title: "温馨提示",
+                                            showSlotClose: false,
+                                            maskClosable: true
+                                        }
+                                    },
+                                    on: {
+                                        input: bool => {
+                                            this.showTipModal = bool;
+                                        }
+                                    }
+                                }, [
+                                    h("div", {
+                                        class: "wrap"
+                                    }, [
+                                        h("div", {
+                                            class: "wrap-content",
+                                            domProps: {
+                                                innerHTML: formItem._tipContent
+                                            }
+                                        }),
+                                        h("div", {
+                                            class: "wrap-btns"
+                                        }, [
+                                            h("Button", {
+                                                props: {
+                                                    type: "primary"
+                                                },
+                                                on: {
+                                                    click: () => {
+                                                        this.showTipModal = false;
+                                                    }
+                                                }
+                                            }, "我知道了")
+                                        ])
+                                    ])
+                                ])
+                            ]);
+                        }
+                        : undefined;
+            },
+            // 是否打开tip弹窗
+            clickOpenTip (formItem, formData) {
+                if (formItem._tipKind === "dynamic" && !formItem._tipContent) {
+                    if (formItem._tipUrl) {
+                        this.$https({
+                            url: {
+                                module: "customPage",
+                                name: formItem._tipUrl
+                            },
+                            params: {
+                                formData: formData,
+                                propsObj: formItem
+                            },
+                            callback: res => {
+                                this.showTipModal = true;
+                                formItem._tipContent = res;
+                            }
+                        });
+                    }
+                } else {
+                    this.showTipModal = true;
+                }
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .DshFormUnit {
+        margin: 3px 6px; // 不可轻易改margin的左右值，上面style的width根据他calc
+        padding: 0px 10px 10px;
+
+        &-label {
+            padding: 5px 0px;
+            line-height: 20px;
+            font-size: @smallSize;
+            position: relative;
+            display: flex;
+            align-items: center;
+
+            &-left {
+                flex: 3;
+                min-width: 0px;
+            }
+
+            &-right {
+                flex: 1;
+                min-width: 0px;
+                padding-left: 10px;
+                text-align: right;
+            }
+
+            &-name {
+                .dsh-ellipsis();
+                font-size: @textSize;
+
+                &-edit {
+                    color: @textColor;
+                }
+
+                &-show {
+                    color: @contentColor;
+                }
+
+                &-sign {
+                    #dsh-sign-change();
+                }
+            }
+
+            &-description {
+                .dsh-ellipsis();
+                color: #60c0ec;
+            }
+        }
+
+        &-control {
+            // overflow: hidden;
+
+            &-component {
+
+            }
+        }
+
+        &-type {
+            &-tag {
+                padding: 2px 10px 6px;
+            }
+        }
+
+        // 左右显示时
+        &-line {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .DshFormUnit-label {
+                max-width: 280px;
+                margin: 0px 8px 0px -10px; // line模式下显示必填
+                padding-left: 10px;
+                font-size: @textSize;
+
+                &-left {
+                    flex: 1;
+                    min-width: 0px;
+                }
+
+                &-right {
+                    flex: none;
+                    max-width: 70px;
+                    min-width: 0px;
+                }
+            }
+
+            .DshFormUnit-control {
+                flex: 1;
+                min-width: 0px;
+
+                &-component {
+
+                }
+            }
+        }
+
+        &-required {
+            > .DshFormUnit-label {
+                &::before {
+                    position: absolute;
+                    left: -10px;
+
+                    content: '*';
+                    display: inline-block;
+                    width: 6px;
+                    line-height: 1.5;
+                    font-family: SimSun;
+                    font-weight: 500;
+                    font-size: @textSize;
+                    color: #E94829;
+                }
+            }
+        }
+
+        // 提示框的
+        &-tip {
+            &-modal {
+                .wrap {
+                    width: 100%;
+                    height: 100%;
+                    display: flex;
+                    flex-direction: column;
+
+                    &-content {
+                        flex: 1;
+                        min-height: 0px;
+                        padding: 0px 12px;
+                        overflow: auto;
+                    }
+
+                    &-btns {
+                        margin: 10px 0px;
+                        text-align: right;
+
+                        .ivu-btn {
+                            font-size: 16px;
+                            font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
+                            font-weight: 600;
+                            border-radius: 4px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+</style>