xiamen-sb-uniapp/pages/running-update/running-update.vue

<template>
    <view class="mx3">
        <view class="main-color-bg" style="height: 100rpx; margin: 0 -30rpx"></view>
        <view class="p3 bg-color-white" style="margin-top: -50rpx; border-radius: 20rpx">
            <u-form :model="form" ref="uForm" :label-width="150">
                <view class="main-color-text f-size-32 f-weight-6">基本信息</view>
                <u-form-item label="选择设备" right-icon="arrow-down-fill">
                    <u-input
                        v-model="form.running"
                        disabled
                        @click="runningState = true"
                        placeholder="请选择设备"
						type="select"
                    />
                    <u-select
                        v-model="runningState"
                        :list="runningList"
                        @confirm="runningSubmit"
                    ></u-select>
                </u-form-item>
                <!-- input -->
                <u-form-item label="设备编号">
                    <u-input v-model="form.bianhao" />
                </u-form-item>
                <view class="main-color-text f-size-32 f-weight-6 mt-2">施工信息</view>
                <!-- 下拉选择 -->
                <u-form-item label="施工内容" right-icon="arrow-down-fill">
                    <u-input
                        v-model="form.content"
                        disabled
                        @click="contentState = true"
                        placeholder="请选择施工内容"
						type="select"
                    />
                    <u-select
                        v-model="contentState"
                        :list="list"
                        @confirm="contentSubmit"
                    ></u-select>
                </u-form-item>
                <u-form-item label="施工里程">
                    <u-input v-model="form.mileage" placeholder="请输入里程" /><text
class="px3"
                        >至</text
                    >
                    <u-input v-model="form.mileage2" placeholder="请输入里程" />KM
                </u-form-item>
                <view class="main-color-text f-size-32 f-weight-6 mt-2">车辆运行检查</view>
                <!-- radio -->
                <u-form-item label="机油">
                    <u-radio-group v-model="form.value">
                        <u-radio
                            @change="radioChange"
                            v-for="(item, index) in radioList"
                            :key="index"
                            :name="item.name"
                        >
                            {{ item.name }}
                        </u-radio>
                    </u-radio-group>
                </u-form-item>
                <!-- textarea -->
                <u-form-item label="问题记录">
                    <u-input v-model="form.remarks" type="textarea" :height="50" />
                </u-form-item>
            </u-form>
            <view class="mt-3">
                <u-button @click="submit" type="primary" shape="circle">提交</u-button>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            form: {
                running: '',
                bianhao: '',
                remarks: '',
                content: '',
                value: '否',
                mileage: '',
                mileage2: ''
            },
            contentState: false,
            list: [
                {
                    value: '1',
                    label: '施工内容1'
                },
                {
                    value: '2',
                    label: '施工内容2'
                }
            ],
            runningState: false,
            runningList: [
                { value: '1', label: '设备1' },
                { value: '2', label: '设备2' }
            ],
            radioList: [
                {
                    name: '正常'
                },
                {
                    name: '不正常'
                }
            ]
        };
    },
    methods: {
        submit() {
            console.log(this.form);
        },
        // 选中某个单选框时，由radio时触发
        radioChange(e) {
            console.log(e);
        },
        // 点击左侧按钮改变索引
        handleDetail(index) {
            this.tabIndex = index;
        },
        // 施工内容
        contentSubmit(data) {
            this.form.content = data[0].label;
        },
        runningSubmit(data) {
            this.form.running = data[0].label;
        }
    }
};
</script>

<style></style>