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.id
		this.formDataId = id
		this.getDetail(id)
	}
},
...
methods: {
	...
	// add.vue是新增，edit.vue是修改	
	// 这是add.vue
	submitForm(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.vue
	submitForm(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吧，不多想了