grid---选择数据功能！！

总结

新建modelBody组件，编写表的扩展js

一、步骤

1.第一步-新建modelBody组件

复制如下代码修改相关内容

<template><VolBoxv-model="model":lazy="true"title="选择产品信息":height="800":width="1000":padding="15"><!-- 设置查询条件 --><div style="padding-bottom: 10px"><span style="margin-right: 20px">编号</span><el-inputplaceholder="请输入产品编号"style="width: 200px"v-model="PRODUCT_CODE"/><span style="margin: 0 20px">名称</span><el-inputplaceholder="请输入产品名称"style="width: 200px; margin-left: 10px"v-model="PRODUCT_NAME"/><span style="margin: 0 20px">型号</span><el-inputplaceholder="请输入产品型号"style="width: 200px; margin-left: 10px"v-model="PRODUCT_TYPE"/><el-buttontype="primary"style="margin-left: 10px"size="small"icon="Search"@click="search">搜索</el-button></div><!-- vol-table配置的这些属性见VolTable组件api文件 --><vol-tableref="mytable":loadKey="true":columns="columns":pagination="pagination":pagination-hide="false":max-height="380":url="url":index="true":single="true":defaultLoadPage="defaultLoadPage"@loadBefore="loadTableBefore"@loadAfter="loadTableAfter"></vol-table><!-- 设置弹出框的操作按钮 --><template #footer><div><el-button type="primary" @click="addRow()">添加选择的数据</el-button><el-button @click="model = 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");}}}})})
}