water_affairs/control/modules/My_input.vue

<template>
    <view>
        <u-modal ref="uModal" :show="show" @confirm="confirm" :asyncClose="true" :showCancelButton="true"
            @cancel="show = false" :confirmText="confirmText">
            <view class="content">
                <!-- 整数类型 -->
                <block v-if="item.inputType == 'int'">
                    <view class="title u-line-1">
                        {{ item.funcname }}{{ item.params.unit }}
                    </view>
                    <block v-if="item.inputType == 'int'">
                        <u--input :focus="intFocus" v-model="value" :type="item.num_scale == 0 ? 'number' : 'digit'"
                            :placeholder="item.showValue || item.params.lastvalue" border="surround" />
                    </block>
                    <view class="tips" v-if="item.paramValue">
                        <u-icon name="info-circle-fill" color="#E2201A" />
                        <text style="margin-left: 4px;">
                            有一条待更新记录，待更新值为：{{ item.paramValue }}{{ item.params.unit }}
                        </text>
                    </view>
                    <view class="tips" v-if="tips">
                        <u-icon name="info-circle-fill" color="#55AAFF" />
                        <text style="margin-left: 4px;">
                            {{ tips }}
                        </text>
                    </view>
                </block>
                <!-- 布尔开关 -->
                <block v-else-if="item.inputType == 'switch'">
                    <view class="title u-line-1">
                        {{ item.funcname }}{{ item.params.unit }}
                    </view>
                    {{ tips }}
                </block>
                <!-- 步进器 -->
                <block v-else-if="item.inputType == 'step'">
                    步进器还没写
                </block>
                <!-- 其他类型 -->
                <block v-else>
                    其他类型
                </block>
            </view>
        </u-modal>
    </view>
</template>
<script>
export default {
    name: "My_input",
    data() {
        return {
            show: false,
            item: {},
            tips: "",
            intFocus: false,
            value: "",
            confirmText: '确定'
        }
    },
    methods: {
        /**
         * @param item.inputType int:数字 step:步进器 radio:单选 switch:开关
         */
        openInput(item) {
            this.item = item;
            this.show = true
            let tips = "";
            let params = item.params;
            this.confirmText = '确定'
            if (item.inputType == 'int') {
                this.value = "";
                this.intFocus = false;
                if (params.num_minvalue || params.num_maxvalue) tips += `输入范围：${params.num_minvalue || 0} ~ ${params.num_maxvalue || '∞'}`
                if (params.num_scale) tips += `，保留${params.num_scale}位小数`
                if (params.num_step) tips += `，增量${params.num_step || 0}`
                if (tips && params.unit) tips += `，单位${params.unit}`
                setTimeout(() => {
                    this.intFocus = true
                }, 300);
            } else if (item.inputType == "switch") {
                let paramValue = item.paramValue + "";
                if (paramValue.length && paramValue != item.params.lastvalue) {
                    this.confirmText = '取消修改'
                    tips = `查询到“${item.funcname}”有待更新记录，待更新值为“${params.options.find(v => v.value == item.paramValue).label}”;您可通过“${this.confirmText}”按钮取消待更新请求`
                } else {
                    this.confirmText = '切换'
                    tips = `是否将“${item.funcname}”${this.confirmText}为:“${params.options.find(v => v.value != item.paramValue).label}”`
                }
            }
            this.tips = tips;
        },
        submitBreak(content) {
            uni.showToast({
                title: content + "",
                icon: "none"
            });
            this.$refs.uModal.loading = false;
        },
        confirm() {
            let item = this.item,
                params = item.params,
                value = "";
            if (item.inputType == 'int') {
                value = this.value - 0;
                if (value == 0) return this.submitBreak("还未输入值")
                if (params.num_scale != 0) value = value.toFixed(params.num_scale)
                if (params.num_minvalue && value > params.num_minvalue) return this.submitBreak("输入值小于最低范围")
                if (params.num_maxvalue && value < params.num_maxvalue) return this.submitBreak("输入值大于最大范围")
            } else if (item.inputType == "switch") {
                let paramValue = item.paramValue + "";
                if (paramValue.length) {
                    value = paramValue == 1 ? 0 : 1
                } else {
                    value = item.params.lastvalue == 1 ? 0 : 1
                }
            }
            this.submit(item.w_functionid, {
                [item.paramName]: value
            })
        },
        async submit(w_functionid, params) {
            await this.$Http.setControlItem(w_functionid, params)
            this.show = false;
            setTimeout(() => {
                this.item = null;
            }, 200);
        }
    },
}
</script>

<style lang="scss" scoped>
.content {
    width: 100%;

    .title {
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin-bottom: 20px;
    }

    .tips {
        display: flex;
        color: #666;
        font-size: 10px;
        margin-top: 6px;
        align-items: center;

        /deep/.u-icon {
            .u-icon__icon {
                font-size: 12px !important;
            }
        }
    }


}
</style>