编辑弹出框选择数据

企业版代码不需要看此示例，看上面的【表单select下拉框table搜索】

点击弹出框 弹出框选择数据回写

代码目录结构

代码实现

1、生成【表.js】文件（Demo_Order.js）

import modelHeader from './orderModelHeader';
import { h, resolveComponent } from 'vue';
let extension = {
  components: {
    //查询界面扩展组件
    gridHeader: '',
    //自定义列表页面
    gridBody: '',
    gridFooter: '',
    //新建、编辑弹出框扩展组件
    modelHeader: modelHeader,
    modelBody: '',
    modelFooter: ''
  },
  methods: {
    onInit() {
      //弹出框添加选择数据的操作
      this.editFormOptions.forEach((option) => {
        option.forEach((item) => {
          if (item.field == 'PhoneNo') {
            //初始化弹出框选择器配置
            item.extra = {
              icon: 'el-icon-zoom-out', //显示图标
              text: '选择数据', //显示文本
              style: 'color: #3a8ee6;font-size: 13px;cursor: pointer;',
              //触发事件
              click: (item) => {
                this.$refs.modelHeader.open(this.editFormFields);
              }
            };
          }
        });
      });
    }
  }
};
export default extension;

2、自定义弹出框【orderModelHeader.vue】文件

<template>
  <vol-box :lazy="true" v-model="model"  title="选择客户" :width="1200" :padding="0" >
    <div>
      <customer ref="customer"></customer>
    </div>
    <template #footer>
      <div> <el-button type="primary"  @click="onSelect">确认</el-button></div></template>
  </vol-box>
</template>
<script>
import VolBox from '@/components/basic/VolBox.vue';

/******注意：如果出现提示没有权限的问题，见后台开发文档上的【重写后台权限】*****/

//直接引用生成的页面(也可以单独用table配置，单独配置下见下面【编辑弹出框明细表选择数据】)
import customer from '@/views/dbtest/customer/Demo_Customer';
//这里使用的vue2语法，也可以写成vue3语法
export default {
  components: {
    'vol-box': VolBox,
    customer
  },
  methods: {},
  data() {
    return {
      model: false, //弹出框
    };
  },
  methods: {
    open() {
      //打开主表选择数据
      this.model = true;
      
      //打开时刷新界面数据(2022.12.06)
      this.$nextTick(() => {
        this.$refs.customer && this.$refs.customer.$refs.grid.search();
      });
    },
   
    onSelect() {
      //主表的选择数据回写到主表的表单上
      let rows = this.$refs.customer.$refs.grid.getSelectRows();
      if (!rows.length) {
        return this.$message.error('请选择数据');
      }
      this.$emit('parentCall', ($parent) => {
        //如：回写编辑表单数据
        $parent.editFormFields.Customer = rows[0].Customer;
        $parent.editFormFields.CustomerId = rows[0].CustomerId;
        $parent.editFormFields.PhoneNo = rows[0].PhoneNo;
        this.model = false;
      });
    },
  }
};
</script>
<style lang="less" scoped>
.search-form {
  display: flex;
  padding: 10px;
  line-height: 34px;
  button {
    margin-left: 10px;
  }
}
</style>