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

---

总结

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

一、步骤

1.第一步-新建modelBody组件

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

<template>
 <VolBox
   v-model="model"
   :lazy="true"
   title="选择产品信息"
   :height="800"
   :width="1000"
   :padding="15"
 >
   <!-- 设置查询条件 -->
   <div style="padding-bottom: 10px">
     <span style="margin-right: 20px">编号</span>
     <el-input
       placeholder="请输入产品编号"
       style="width: 200px"
       v-model="PRODUCT_CODE"
     />
     <span style="margin: 0 20px">名称</span>
     <el-input
       placeholder="请输入产品名称"
       style="width: 200px; margin-left: 10px"
       v-model="PRODUCT_NAME"
     />
     <span style="margin: 0 20px">型号</span>
     <el-input
       placeholder="请输入产品型号"
       style="width: 200px; margin-left: 10px"
       v-model="PRODUCT_TYPE"
     />
     <el-button
       type="primary"
       style="margin-left: 10px"
       size="small"
       icon="Search"
       @click="search"
       >搜索</el-button
     >
   </div>

   <!-- vol-table配置的这些属性见VolTable组件api文件 -->
   <vol-table
     ref="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组件api
            item.extra = {
              icon: "el-icon-zoom-out",
              text: "选择数据",
              style: "color:#2196F3;font-size: 12px;cursor: pointer;",
              click: item => {
                this.$refs.modelBody.openDemo("RD_PROJECT_ModelBody");
              }
            }
          }
        })
      })
}