需求
为保安人员研发一款巡逻记录小应用,巡逻的内容从服务器端获取,对应每个巡逻内容须提交巡逻结果和一张印证图片。
思路
从后台拉取数据动态生成单选组,并绑定数据属性,每一个单选组对应一个文件上传功能。具体为:根据后台拉取的单选组内容,在data()中动态创建一个json数据,包含单选项目本身的内容、存储用户选择值和对应的图片保存路径。
代码
html部分:
<template>
<div style="text-align: left;padding-bottom: 50px;">
<!-- //设置巡逻时间 -->
<mt-datetime-picker ref="picker" type="datetime" @confirm="handleConfirm" v-model="defaultDatetime">
</mt-datetime-picker>
<mt-field label="巡逻时间" v-model="form.ptime" @click.native="selectDatetime"></mt-field>
<div v-for="item in form.results" style="border-bottom: 1px solid #999;">
<!--将已经动态创建的data属性动态绑定到单选按钮组中-->
<mt-radio align="left" :title="pinjie(item.id,item.content)" v-model="item.value" :options="['正常','异常,已报告']">
</mt-radio>
<!-- 提交图片按钮 -->
<mt-button size="small" type="default" @click="selectFile(item.label)"><span class="fa fa-photo"></span>
</mt-button>
<!-- 隐藏的文件上传标签 -->
<input @change="uploadFile($event,item.label)" type="file" :ref="item.label"
style="border-bottom: 1px solid #999999;display: none;" accept=".jpg,.jpeg,.png" />
<!-- 回显图片 -->
<img :src="item.imgurl" :ref="setImgRef(item.label)" height="40px" />
</div>
<div style="text-align: center;padding-top: 10px;">
<mt-button type="default" @click="reset()">重 置</mt-button>  
<mt-button type="primary" @click="submit()">提 交</mt-button>
</div>
</div>
</template>
<