bri-components 1.5.21 → 1.6.0

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

@@ -1,260 +1,260 @@
-<template>
-    <!-- 单选模式 编辑 -->
-    <div
-        v-if="!multipleMode && canEdit"
-        class="DshInput"
-    >
-        <i-input
-            class="DshInput-edit"
-            v-model="value[controlKey]"
-            :type="subType"
-            :placeholder="selfPropsObj._placeholder"
-            :readonly="selfPropsObj._readonly"
-            :disabled="disabled"
-            :clearable="clearable"
-            :size="selfPropsObj._size"
-            :rows="selfPropsObj._rows"
-            :search="selfPropsObj._search"
-            :show-word-limit="selfPropsObj._showWordLimit"
-            :maxlength="selfPropsObj._maxlength"
-            :autosize="selfPropsObj._autosize"
-            @on-enter="onEnter"
-            @on-search="onSearch"
-            @on-focus="onFocus"
-            @on-change="onChange"
-            @on-blur="onBlur"
-            @on-clear="onClear"
-        >
-            <span
-                v-if="selfPropsObj._prepend"
-                slot="prepend"
-            >{{ selfPropsObj._prepend }}</span>
-
-            <span
-                v-if="selfPropsObj._append"
-                slot="append"
-            >{{ selfPropsObj._append }}</span>
-        </i-input>
-    </div>
-
-    <!-- 单选模式 查看 -->
-    <div
-        v-else-if="!multipleMode && !canEdit"
-        class="DshInput-show"
-    >
-        <!-- 有值 -->
-        <template v-if="!$isEmptyData(curVal)">
-            <!-- 高度自由时 -->
-            <template v-if="isHeightAuto">
-                <a
-                    v-if="subType === 'url'"
-                    :class="{
-                        ...commonClass,
-                        'DshInput-show-auto': true,
-                        'DshInput-show-auto-url': true
-                    }"
-                    @click="goHttpWindow($event)"
-                >
-                    {{ showVal }}
-                </a>
-
-                <div
-                    v-else
-                    :class="{
-                        ...commonClass,
-                        'DshInput-show-auto': true,
-                        'DshInput-show-auto-detail': isDetailShow,
-                        'DshInput-show-auto-text': ['text', 'textarea'].includes(subType)
-                    }"
-                    v-html="showVal"
-                ></div>
-            </template>
-
-            <!-- 高度不自由（不换行） -->
-            <bri-tooltip
-                v-else
-                :content="showVal"
-                :defaultDisabled="false"
-                :transfer="true"
-            >
-                <a
-                    v-if="subType === 'url'"
-                    :class="{
-                        ...commonClass,
-                        'DshInput-show-ellipsis': true,
-                        'DshInput-show-ellipsis-url': true
-                    }"
-                    @click="goHttpWindow($event)"
-                >
-                    {{ showVal }}
-                </a>
-
-                <div
-                    v-else
-                    :class="{
-                        ...commonClass,
-                        'DshInput-show-ellipsis': true
-                    }"
-                >
-                    {{ showVal }}
-                </div>
-            </bri-tooltip>
-        </template>
-
-        <!-- 无值 -->
-        <div
-            v-else
-            :class="commonClass"
-        >
-            {{ emptyShowVal }}
-        </div>
-    </div>
-
-    <!-- 多选模式 -->
-    <dsh-inputs
-        v-else
-        :canEdit="canEdit"
-        :value="value"
-        :propsObj="propsObj"
-        @change="change"
-    ></dsh-inputs>
-</template>
-
-<script>
-    import controlMixin from "../../mixins/controlMixin.js";
-    import DshInputs from "./BriInputs.vue";
-
-    export default {
-        name: "DshInput",
-        mixins: [
-            controlMixin
-        ],
-        components: {
-            DshInputs
-        },
-        props: {},
-        data () {
-            return {
-                changeStatus: false
-            };
-        },
-        computed: {
-            selfPropsObj () {
-                return {
-                    _textType: "default", // 子类型"default", "url"，只在type="text"有效
-
-                    _readonly: ["serialNumber"].includes(this.controlType),
-                    _showWordLimit: this.propsObj._showWordLimit || (!!this.propsObj._maxlength || this.propsObj._maxlength === 0),
-                    _autosize: {
-                        minRows: 2,
-                        maxRows: this.isUnitUpdate ? 40 : 30
-                    },
-                    _search: false,
-
-                    ...this.propsObj,
-                    ...this.commonDealPropsObj
-                };
-            },
-            subType () {
-                return ["textarea", "email", "password", "url", "number", "tel"].includes(this.controlType)
-                    ? this.controlType
-                    : ["text"].includes(this.controlType) && ["url"].includes(this.selfPropsObj._textType)
-                        ? "url"
-                        : ["serialNumber"].includes(this.controlType)
-                            ? "text"
-                            : "text";
-            }
-        },
-        created () {},
-        methods: {
-            onEnter (event) {
-                this.$emit("enter");
-
-                this.$emit("inputChange");
-                this.enterStatus = true; // 点击回车时，先走onEnter立马走了onSearch
-            },
-            onSearch (...params) {
-                // 点击回车时，先走onEnter立马走了onSearch
-                if (this.enterStatus !== true) {
-                    this.$emit("search");
-                    this.$emit("inputChange");
-                } else {
-                    this.enterStatus = false;
-                }
-            },
-
-            // 无参数
-            onFocus () {
-                this.$emit("focus");
-
-                // this.changeStatus = false;
-            },
-            // 无参数
-            onBlur () {
-                this.$emit("blur");
-
-                // if (this.changeStatus === true) {
-                //     this.change();
-                // }
-            },
-            // 参数event
-            onChange (event) {
-                this.quickChange(); // 立马触发
-
-                clearTimeout(this.timer);
-                this.timer = setTimeout(() => {
-                    // 对文本框进行前后空格处理（鞋写在上面不行，虽然input会早于onChange事件，但还是不行；值会更新，界面不更新）
-                    if (["text"].includes(this.controlType) && this.value[this.controlKey]) {
-                        this.value[this.controlKey] = this.value[this.controlKey].trim();
-                    }
-
-                    this.change();
-                    this.$emit("inputChange");
-                }, 800);
-
-                // this.changeStatus = true;
-            },
-
-            onClear () {
-                this.change();
-            },
-
-            // 超链接跳转
-            goHttpWindow (e) {
-                e.stopPropagation();
-                this.$postOpenLink(this.curVal);
-            }
-        }
-    };
-</script>
-
-<style lang="less">
-    @import url("../../control.less");
-
-    .DshInput {
-        #control-show();
-
-        &-show {
-            &-auto {
-                &-detail {
-                    max-height: 500px;
-                    overflow: auto;
-                }
-
-                &-text {
-                    white-space: pre-wrap!important;
-                }
-
-                &-url {
-                    color: @themeColor!important;
-                }
-            }
-
-            &-ellipsis {
-                &-url {
-                    color: @themeColor!important;
-                }
-            }
-        }
-    }
-</style>
+<template>
+    <!-- 单选模式 编辑 -->
+    <div
+        v-if="!multipleMode && canEdit"
+        class="DshInput"
+    >
+        <i-input
+            class="DshInput-edit"
+            v-model="value[controlKey]"
+            :type="subType"
+            :placeholder="selfPropsObj._placeholder"
+            :readonly="selfPropsObj._readonly"
+            :disabled="disabled"
+            :clearable="clearable"
+            :size="selfPropsObj._size"
+            :rows="selfPropsObj._rows"
+            :search="selfPropsObj._search"
+            :show-word-limit="selfPropsObj._showWordLimit"
+            :maxlength="selfPropsObj._maxlength"
+            :autosize="selfPropsObj._autosize"
+            @on-enter="onEnter"
+            @on-search="onSearch"
+            @on-focus="onFocus"
+            @on-change="onChange"
+            @on-blur="onBlur"
+            @on-clear="onClear"
+        >
+            <span
+                v-if="selfPropsObj._prepend"
+                slot="prepend"
+            >{{ selfPropsObj._prepend }}</span>
+
+            <span
+                v-if="selfPropsObj._append"
+                slot="append"
+            >{{ selfPropsObj._append }}</span>
+        </i-input>
+    </div>
+
+    <!-- 单选模式 查看 -->
+    <div
+        v-else-if="!multipleMode && !canEdit"
+        class="DshInput-show"
+    >
+        <!-- 有值 -->
+        <template v-if="!$isEmptyData(curVal)">
+            <!-- 高度自由时 -->
+            <template v-if="isHeightAuto">
+                <a
+                    v-if="subType === 'url'"
+                    :class="{
+                        ...commonClass,
+                        'DshInput-show-auto': true,
+                        'DshInput-show-auto-url': true
+                    }"
+                    @click="goHttpWindow($event)"
+                >
+                    {{ showVal }}
+                </a>
+
+                <div
+                    v-else
+                    :class="{
+                        ...commonClass,
+                        'DshInput-show-auto': true,
+                        'DshInput-show-auto-detail': isDetailShow,
+                        'DshInput-show-auto-text': ['text', 'textarea'].includes(subType)
+                    }"
+                    v-html="showVal"
+                ></div>
+            </template>
+
+            <!-- 高度不自由（不换行） -->
+            <bri-tooltip
+                v-else
+                :content="showVal"
+                :defaultDisabled="false"
+                :transfer="true"
+            >
+                <a
+                    v-if="subType === 'url'"
+                    :class="{
+                        ...commonClass,
+                        'DshInput-show-ellipsis': true,
+                        'DshInput-show-ellipsis-url': true
+                    }"
+                    @click="goHttpWindow($event)"
+                >
+                    {{ showVal }}
+                </a>
+
+                <div
+                    v-else
+                    :class="{
+                        ...commonClass,
+                        'DshInput-show-ellipsis': true
+                    }"
+                >
+                    {{ showVal }}
+                </div>
+            </bri-tooltip>
+        </template>
+
+        <!-- 无值 -->
+        <div
+            v-else
+            :class="commonClass"
+        >
+            {{ emptyShowVal }}
+        </div>
+    </div>
+
+    <!-- 多选模式 -->
+    <dsh-inputs
+        v-else
+        :canEdit="canEdit"
+        :value="value"
+        :propsObj="propsObj"
+        @change="change"
+    ></dsh-inputs>
+</template>
+
+<script>
+    import controlMixin from "../../mixins/controlMixin.js";
+    import DshInputs from "./BriInputs.vue";
+
+    export default {
+        name: "DshInput",
+        mixins: [
+            controlMixin
+        ],
+        components: {
+            DshInputs
+        },
+        props: {},
+        data () {
+            return {
+                changeStatus: false
+            };
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    _textType: "default", // 子类型"default", "url"，只在type="text"有效
+
+                    _readonly: ["serialNumber"].includes(this.controlType),
+                    _showWordLimit: this.propsObj._showWordLimit || (!!this.propsObj._maxlength || this.propsObj._maxlength === 0),
+                    _autosize: {
+                        minRows: 2,
+                        maxRows: this.isUnitUpdate ? 40 : 30
+                    },
+                    _search: false,
+
+                    ...this.propsObj,
+                    ...this.commonDealPropsObj
+                };
+            },
+            subType () {
+                return ["textarea", "email", "password", "url", "number", "tel"].includes(this.controlType)
+                    ? this.controlType
+                    : ["text"].includes(this.controlType) && ["url"].includes(this.selfPropsObj._textType)
+                        ? "url"
+                        : ["serialNumber"].includes(this.controlType)
+                            ? "text"
+                            : "text";
+            }
+        },
+        created () {},
+        methods: {
+            onEnter (event) {
+                this.$emit("enter");
+
+                this.$emit("inputChange");
+                this.enterStatus = true; // 点击回车时，先走onEnter立马走了onSearch
+            },
+            onSearch (...params) {
+                // 点击回车时，先走onEnter立马走了onSearch
+                if (this.enterStatus !== true) {
+                    this.$emit("search");
+                    this.$emit("inputChange");
+                } else {
+                    this.enterStatus = false;
+                }
+            },
+
+            // 无参数
+            onFocus () {
+                this.$emit("focus");
+
+                // this.changeStatus = false;
+            },
+            // 无参数
+            onBlur () {
+                this.$emit("blur");
+
+                // if (this.changeStatus === true) {
+                //     this.change();
+                // }
+            },
+            // 参数event
+            onChange (event) {
+                this.quickChange(); // 立马触发
+
+                clearTimeout(this.timer);
+                this.timer = setTimeout(() => {
+                    // 对文本框进行前后空格处理（鞋写在上面不行，虽然input会早于onChange事件，但还是不行；值会更新，界面不更新）
+                    if (["text"].includes(this.controlType) && this.value[this.controlKey]) {
+                        this.value[this.controlKey] = this.value[this.controlKey].trim();
+                    }
+
+                    this.change();
+                    this.$emit("inputChange");
+                }, 800);
+
+                // this.changeStatus = true;
+            },
+
+            onClear () {
+                this.change();
+            },
+
+            // 超链接跳转
+            goHttpWindow (e) {
+                e.stopPropagation();
+                this.$postOpenLink(this.curVal);
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    @import url("../../control.less");
+
+    .DshInput {
+        #control-show();
+
+        &-show {
+            &-auto {
+                &-detail {
+                    max-height: 500px;
+                    overflow: auto;
+                }
+
+                &-text {
+                    white-space: pre-wrap!important;
+                }
+
+                &-url {
+                    color: @themeColor!important;
+                }
+            }
+
+            &-ellipsis {
+                &-url {
+                    color: @themeColor!important;
+                }
+            }
+        }
+    }
+</style>