NCC前端调用查询弹框

news2024/11/23 11:25:33

系统自带的查询模板弹框调启使用
默认的查询模板是在单据模板的列表模板中，有个查询区域，查询区域就是查询模板内容
如果在列表页做客开新增按钮调启查询模板无问题，但是目前需求是需要再卡片页面下调启
系统标准的调启模板代码

//调用查询弹框 2024-11-12
props.search.openAdvSearch(AREA.card_query, true);

AREA.card_query 参数为区域编码 
如果查询列表调启 可直接赋值 AREA.queryArea  对应值：list_query 该值是
动态建模平台-客户化配置-模板管理-模板设置-集团下对应单据模板中的

在这里插入图片描述
6. 卡片下调用查询弹框需要现在卡片模板增加查询区域
1. 对应单据卡片模板，可以新复制一个模板
2. 动态建模平台- 开发配置- 应用管理 - 应用注册下找到对应的单据模板
3. 点击【设置页面模板】

选择左侧查询区拖拽指右侧，并添加对应的查询模板字段，注意右上角区域编码要维护card_query
8. 代码调用
index.js中增加查询区域

{/* 查询区 */}
引入
let { cardTable, form, transferTable, modal, cardPagination,search } = this.props;
const { NCCreateSearch } = search;

content 中添加
	<div className="nc-bill-search-area">
		{NCCreateSearch(AREA.card_query, {
			pkname: FIELD.pk_invoice,
			clickSearchBtn: this.searchBtnClick.bind(this),
			onAfterEvent: this.onAfterEvent.bind(this, this.props),
			renderCompleteEvent: this.renderCompleteEvent,
			statusChangeEvent: this.renderCompleteEvent,
			dataSource: dataSource,
			defaultConditionsNum: 4
		})}
	</div>

对应的按钮事件中调用代码及赋默认值


   //查询窗口设置默认值 2024-11-12
	props.search.setSearchValByField(AREA.card_query, FIELD.pk_org, {
		display: pk_org_name,
		value:pk_org
	});
	props.search.setSearchValByField(AREA.card_query, FIELD.pk_supplier, {
		display: supplier_name,
		value:pk_supplier
	});

	//调用查询弹框 2024-11-12
	props.search.openAdvSearch(AREA.card_query, true);

查询按钮事件

//查询弹框按钮 点击事件
	searchBtnClick(){
		//日期
		let dbilldate='';
		//获取查询弹框的查询参数
		let queryInfo = this.props.search.getQueryInfo(AREA.card_query); //必输项为空时，返回值为false
		console.log(queryInfo);
		if(queryInfo.querycondition && queryInfo.querycondition.conditions.length==3){
			if('dbilldate'===queryInfo.querycondition.conditions[2].field){
				dbilldate=queryInfo.querycondition.conditions[2].value.firstvalue;
			}
		}

		let pk_org = this.props.form.getFormItemsValue(AREA.card_head, FIELD.pk_org).value;
		let pk_org_name = this.props.form.getFormItemsValue(AREA.card_head, FIELD.pk_org).display;
		let pk_invoice = this.props.form.getFormItemsValue(AREA.card_head, FIELD.pk_invoice).value;
		let pk_supplier=this.props.form.getFormItemsValue(AREA.card_head, FIELD.pk_supplier).value;
		let supplier_name=this.props.form.getFormItemsValue(AREA.card_head, FIELD.pk_supplier).display;
		let vbillcode = this.props.form.getFormItemsValue(AREA.card_head, FIELD.vbillcode).value;
		
		//赋值弹框的显示参数
		this.state.JsModalCfg.show = true;
		this.state.JsModalCfg.title = supplier_name;
		this.state.JsModalCfg.billinfo={pk_invoice,vbillcode,pk_supplier,supplier_name,dbilldate};
		this.setState(this.state);
	};