英语门户网站织梦源码,电子商务网站开发背景意义,wordpress如何导出,湖北工程建设信息网目录 总结一、步骤1.第一步-新建modelBody组件2.第二步-编写表的扩展js 总结
新建modelBody组件#xff0c;编写表的扩展js
一、步骤
1.第一步-新建modelBody组件
复制如下代码 修改相关内容
templateVolBoxv-modelmodel:lazytrueti… 目录 总结一、步骤1.第一步-新建modelBody组件2.第二步-编写表的扩展js 总结
新建modelBody组件编写表的扩展js
一、步骤
1.第一步-新建modelBody组件
复制如下代码 修改相关内容
templateVolBoxv-modelmodel:lazytruetitle选择产品信息:height800:width1000:padding15!-- 设置查询条件 --div stylepadding-bottom: 10pxspan stylemargin-right: 20px编号/spanel-inputplaceholder请输入产品编号stylewidth: 200pxv-modelPRODUCT_CODE/span stylemargin: 0 20px名称/spanel-inputplaceholder请输入产品名称stylewidth: 200px; margin-left: 10pxv-modelPRODUCT_NAME/span stylemargin: 0 20px型号/spanel-inputplaceholder请输入产品型号stylewidth: 200px; margin-left: 10pxv-modelPRODUCT_TYPE/el-buttontypeprimarystylemargin-left: 10pxsizesmalliconSearchclicksearch搜索/el-button/div!-- vol-table配置的这些属性见VolTable组件api文件 --vol-tablerefmytable:loadKeytrue:columnscolumns:paginationpagination:pagination-hidefalse:max-height380:urlurl:indextrue:singletrue:defaultLoadPagedefaultLoadPageloadBeforeloadTableBeforeloadAfterloadTableAfter/vol-table!-- 设置弹出框的操作按钮 --template #footerdivel-button typeprimary clickaddRow()添加选择的数据/el-buttonel-button clickmodel false关闭/el-button/div/template/VolBox
/template
script
import VolBox from /components/basic/VolBox.vue;
import VolTable from /components/basic/VolTable.vue;
export default {components: {VolBox: VolBox,VolTable: VolTable,},data() {return {model: false,defaultLoadPage: true, //第一次打开时不加载table数据openDemo手动调用查询table数据PRODUCT_CODE: , //查询条件字段 产品详细信息编号PRODUCT_NAME: , //查询条件字段 产品详细信息名称PRODUCT_TYPE: , //查询条件字段 产品型号modelType: ,url: api/CY_RD_PRODUCT_INFO/GetPageData, //加载数据的接口columns: [{field: PRODUCT_ID,title: ID,type: long,width: 80,hidden: true,readonly: true,require: true,align: left,},{field: PRODUCT_CODE,title: 产品编码,type: string,link: true,width: 110,align: left,sort: true,},{field: PRODUCT_TYPE,title: 产品型号,type: string,bind: { key: 产品型号, data: [] },width: 110,align: left,},{field: PRODUCT_NAME,title: 产品名称,type: string,bind: { key: 产品名称, data: [] },width: 110,align: left,},{field: PRODUCT_CATEGID,title: 产品类别,type: string,bind: {key: 产品分类,data: [{ key: 1, value: 电能表 },{ key: 2, value: 采集终端 },{ key: 3, value: 电流互感器 },{ key: 4, value: 电压互感器 },],},width: 110,align: left,},{field: PRODUCT_DESIGN_BASIS,title: 产品设计依据,type: string,width: 110,align: left,},],pagination: {}, //分页配置见voltable组件api};},methods: {openDemo(_modelType) {this.modelType _modelType;this.model true;//打开弹出框时加载table数据this.$refs.mytable this.$refs.mytable.load();},search() {//点击搜索this.$refs.mytable.load();},addRow() {var rows this.$refs.mytable.getSelected();if (!rows || rows.length 0) {return this.$message.error(请选择行数据);}//获取回写到明细表的字段//使用数组的map()方法对rows数组进行遍历并返回一个新的数组。let _rows rows.map((row) {console.log(row);return {PRODUCT_CODE: row.PRODUCT_CODE,PRODUCT_TYPE: row.PRODUCT_TYPE,PRODUCT_DESIGN_FUNCTION_BASIS: row.PRODUCT_DESIGN_BASIS,};});//回写数据到表单this.$emit(parentCall, ($parent) {//将选择的数据合并到表单中(注意框架生成的代码都是大写后台自己写的接口是小写的)//enable是数字类型框架绑定下拉框的时候要转换成字符串// $parent.editFormFields.Development_project_no rows[0].Development_project_no;// $parent.editFormFields.Product_code rows[0].Product_code;$parent.getRow(_rows, this.modelType);});//关闭当前窗口this.model false;},//这里是从api查询后返回数据的方法loadTableAfter(row) {},loadTableBefore(params) {//查询前设置查询条件if (this.PRODUCT_CODE) {params.wheres.push({name: PRODUCT_CODE,value: this.PRODUCT_CODE,displayType: like,});}if (this.PRODUCT_NAME) {params.wheres.push({name: PRODUCT_NAME,value: this.PRODUCT_NAME,displayType: like,});}if (this.PRODUCT_TYPE) {params.wheres.push({name: PRODUCT_TYPE,value: this.PRODUCT_TYPE,displayType: like,});}return true;},},
};
/script
2.第二步-编写表的扩展js
导入刚创建的model子组件
import App_ExpertModelBody from /extension/business/cy_dev_business/extend/RD_PROJECT_ModelBody注册组件
components: {//查询界面扩展组件gridHeader: ,gridBody: ,gridFooter: ,//新建、编辑弹出框扩展组件modelHeader: ,modelBody: App_ExpertModelBody,modelFooter: ,},添加回写方法
getRow(rows, modelType) {if (modelType RD_PROJECT_ModelBody) {//将选择的数据合并到表单中(注意框架生成的代码都是大写后台自己写的接口是小写的)this.editFormFields.PRODUCT_CODE rows[0].PRODUCT_CODE;this.editFormFields.PRODUCT_TYPE rows[0].PRODUCT_TYPE;this.editFormFields.PRODUCT_DESIGN_FUNCTION_BASIS rows[0].PRODUCT_DESIGN_FUNCTION_BASIS;}},添加选择数据的字段
onInit() {//选择数据源功能this.editFormOptions.forEach(x {x.forEach(item {if (item.field PRODUCT_CODE) {//给编辑表单设置[选择数据]操作,extra具体配置见volform组件apiitem.extra {icon: el-icon-zoom-out,text: 选择数据,style: color:#2196F3;font-size: 12px;cursor: pointer;,click: item {this.$refs.modelBody.openDemo(RD_PROJECT_ModelBody);}}}})})
}
