uni-app开发日志：将schema2code生成的新增页和修改页整合成一页

本文主要是介绍uni-app开发日志：将schema2code生成的新增页和修改页整合成一页，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

有没有想过，add和edit页面其实没多大差别？
我之前自研的系统add和edit都是一个页面，只要判断一下当前有没有id传递来，为空来就是新增。
这样如果页面修改时，才能尽量少改动代码，少出错。

对比add.vue和edit.vue

其实代码几乎没差别，主要就是edit.vue多了一个获取id和依靠id获取具体数据，不一样之处一个是新建入库一个是修改库中数据。
我现在把不一样的代码列出来。

// html部分一模一样
<template>
...
</template>
<script>
...
// edit.vue多一个获取id
onLoad(e) {if (e.id) {const id = e.idthis.formDataId = idthis.getDetail(id)}
},
...
methods: {...// add.vue是新增，edit.vue是修改	// 这是add.vuesubmitForm(value) {// 使用 clientDB 提交数据return db.collection(dbCollectionName).add(value).then((res) => {uni.showToast({title: '新增成功'})this.getOpenerEventChannel().emit('refreshData')setTimeout(() => uni.navigateBack(), 500)}).catch((err) => {uni.showModal({content: err.message || '请求服务失败',showCancel: false})})}// 这是edit.vuesubmitForm(value) {// 使用 clientDB 提交数据return db.collection(dbCollectionName).doc(this.formDataId).update(value).then((res) => {uni.showToast({title: '修改成功'})this.getOpenerEventChannel().emit('refreshData')setTimeout(() => uni.navigateBack(), 500)}).catch((err) => {uni.showModal({content: err.message || '请求服务失败',showCancel: false})})},// edit.vue的方法中还多了一个获取内容的方法/*** 获取表单数据* @param {Object} id*/getDetail(id) {uni.showLoading({mask: true})db.collection(dbCollectionName).doc(id).field("parent_id,key,name,icon,description,remark,sort,is_hot_show,is_display,status,is_deleted").get().then((res) => {const data = res.result.data[0]if (data) {this.formData = data}}).catch((err) => {uni.showModal({content: err.message || '请求服务失败',showCancel: false})}).finally(() => {uni.hideLoading()})}...
}
</script>

代码合并

好了，有了如上的分析，那修改就再简单不过了：直接在edit.vue上修改。

• 其它地方都不需要改动。
• 在submitForm(value)方法里，判断一下id是否存在。
  • 如果不存在则为新增，把add.vue中该方法下的内容复制来即可；
  • 如果为修改，那就是原来代码；
• 最后在list.vue上修改一下新增按钮的链接就行。

// 只需要把add.vue的submitForm中的内容复制到edit.vue来就行了/*** 提交表单*/
submitForm(value) {// 判断一下formDataId不为空就是修改，为空就是新增// 使用 clientDB 提交数据if(this.formDataId && this.formDataId !== ''){return db.collection(dbCollectionName).doc(this.formDataId).update(value).then((res) => {uni.showToast({title: '修改成功'})this.getOpenerEventChannel().emit('refreshData')setTimeout(() => uni.navigateBack(), 500)}).catch((err) => {uni.showModal({content: err.message || '请求服务失败',showCancel: false})})}else{return db.collection(dbCollectionName).add(value).then((res) => {uni.showToast({title: '新增成功'})this.getOpenerEventChannel().emit('refreshData')setTimeout(() => uni.navigateBack(), 500)}).catch((err) => {uni.showModal({content: err.message || '请求服务失败',showCancel: false})})}
},

在list.vue页面上找到新增，把add.vue改成edit.vue就ok啦

// 把原来的add改为edit
<button class="uni-button" type="default" size="mini" @click="navigateTo('./edit)">新增</button>

测试成功，完美。

当然，我自己做的系统，权限系统是在页面里面进行判断是否授权，而现在是根据路由来，那该add.vue还是add.vue吧，不多想了

这篇关于uni-app开发日志：将schema2code生成的新增页和修改页整合成一页的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---