表单查询多个按钮条件制约

 

整体思路：设置变量保存不同情况的数据，根据条件再选择不同情况的数据进行页面展示。 

1.不点击查询按钮，直接点击划拨项目或者出让项目情况：

        在不点击查询按钮的情况下不需要表单的数据，即表单数据为空，因此传入按钮对应方法的参数value为undefined，查询结果变量也为空，即根据划拨还是出让进行表单值为空的查询，结果进行显示即可。（此时注意要将此结果拷贝一份给一个新定义变量，后续条件判断会使用到，并且在点击划拨时将一个全局变量hb设置为true，cr设置为false；点击出让时刚好相反，后续在先点击划拨或者出让后再点击查询有用）

 2.点击查询，再点击划拨项目或出让项目情况：

        点击查询时，将表单数据进行拷贝，因为表单数据是双向绑定，在不知情的情况下输入了数据就会改变原始正确的表单数据。在查询方法中查询出只有表单条件的数据进行页面显示；然后给拷贝的表单数据分别加入划拨项目和出让项目的条件后调用这两个方法并把数据传入，在划拨项目和出让项目方法中判断到传入的参数对象不为空，则使用这个传入的参数进行条件查询，将查询的数据分别保存的新建变量里面。

        接着在点击了查询后再点击划拨或者出让的时候，相应的划拨或者出让方法会进行判断，判断点击查询时保存的结果是否为空（为空表示没有点击查询直接点击的划拨或者出让，逻辑为情况1，不为空表示点击了查询后再点击划拨或者出让），不为空，则显示在查询方法中调用的划拨或者出让查询出来的结果（已经保存在变量中了），直接进行页面数据展示。

3.先点击划拨项目或者出让项目，再在此基础上筛选表单查询条件：

        先点击划拨或者出让方法逻辑同情况1，两种方法不论先点击哪个方法，已经将查询的数据拷贝到了新变量，那么在此基础上再点击查询，查询方法就要进行判断了，只有当划拨或者出让查询的结果不为空时才能再此数据上再筛选查询的条件数据。那么如何判断是点击了划拨再点击查询还是点击了出让再点击查询的呢？在情况1中有说，有标志着点击了划拨和出让的变量hb，cr，因此在查询方法条件判断的时候，当hb为true和划拨数据不为空时，即可进行划拨条件加表单查询条件的数据查询，结果进行页面展示；当cr为true和出让数据不为空时，即可进行出让条件加表单查询条件的数据查询，结果进行页面展示。

4.重置按钮：

        在重置按钮中不仅仅是清空表单数据，更重要的是将所以情况逻辑的还原为初始状态，将点击查询的得到的数据变量初始化为空对象，还原划拨和出让方法点击标记变量为false，结果显示页面的数据还原为最初的状态。

查询按钮代码展示：

async searchClick () {
			if (JSON.stringify(this.search4) != "{}" || this.hb == true) {
				this.searchForm.xmlb = 1
				this.callGritdata = await this.searchBody(this.searchForm)
			} else if (JSON.stringify(this.search5) != "{}" || this.cr == true) {
				this.searchForm.xmlb = 2
				this.callGritdata = await this.searchBody(this.searchForm)
			} else {
				this.search1 = await this.searchBody(this.searchForm)
				let oldSearch1 = JSON.parse(JSON.stringify(this.searchForm))
				let oldSearch2 = JSON.parse(JSON.stringify(this.searchForm))
				this.oldSearch1 = oldSearch1
				this.oldSearch2 = oldSearch2
				this.oldSearch1.xmlb = 1
				this.transferPro(this.oldSearch1)
				this.oldSearch2.xmlb = 2
				this.assignPro(this.oldSearch2)
				this.callGritdata = this.search1
			}
		},

划拨项目按钮代码展示：

async transferPro (value) {
			if (typeof (value) != "undefined") {
				this.search2 = await this.searchBody(this.oldSearch1)
			} else if (JSON.stringify(this.search1) != "{}") {
				this.callGritdata = this.search2
			} else {
				this.searchForm = {}
				this.searchForm.xmlb = 1
				this.callGritdata = await this.searchBody(this.searchForm)
				this.hb = true
				this.cr = false
				this.search4 = JSON.parse(JSON.stringify(this.callGritdata))
			}
		},

出让项目按钮代码展示：

async assignPro (value) {
			if (typeof (value) != "undefined") {
				this.search3 = await this.searchBody(this.oldSearch2)
			} else if (JSON.stringify(this.search1) != "{}") {
				this.callGritdata = this.search3
			} else {
				this.searchForm = {}
				this.searchForm.xmlb = 2
				this.callGritdata = await this.searchBody(this.searchForm)
				this.hb = false
				this.cr = true
				this.search5 = JSON.parse(JSON.stringify(this.callGritdata))
			}
		},

重置按钮代码展示：

async resetForm () {
			this.search1 = {}
			this.hb = false
			this.cr = false
			this.$refs.form.resetFields()
		},

结束！