工作内容
- 用vue重构ifish编辑水产品详细信息管理页面，此页面表单字段多
](http://upload-images.jianshu.io/upload_images/5206256-76a6f2ded8c4b30b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 相比ng2 + bootstrap的老页面vue + element ui更加清晰简洁
- 生产方式选项可以通过用户选择的类型自动显示对应的
表单
QQ20170322-184646.png
QQ20170322-184656.png
<el-col :span="6" v-show="dataInfo.producePattern === 'FEED'">
<el-form-item label="饲养方式">
<el-select placeholder="请选择饲养方式" v-model="dataInfo.feedPattern">
<el-option label="网箱" value="CRIB"></el-option>
<el-option label="池塘" value="POOL"></el-option>
<el-option label="滩涂" value="INTERTIDAL"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6" v-show="dataInfo.producePattern === 'CATCH'">
<el-form-item label="捕捞方式">
<el-select placeholder="请选择捕捞方式" v-model="dataInfo.catchPattern">
<el-option label="拖网" value="TRAWL"></el-option>
<el-option label="刺网" value="GILLNET"></el-option>
<el-option label="围网" value="PURSENET"></el-option>
</el-select>
</el-form-item>
</el-col>
总结
- 不足
- 暂未实现保存已经pdf上传的功能
- 进展
- 对element ui的表单控件进行熟悉
- 完成了ifish后台最复杂的一个页面
