弹出框选择数据
文档说明
注意：这是最新版本vue3语法的实现方式，旧版本或者在[表.jsx]中实现弹出框，见旧版本文档,查看
1.效果截图
1.配置选择按钮
2.弹用弹出框
3.文件目录结构
2.代码实现
1. 实现思路：在生成的vue文件加上自定义弹出框引用其他生成的页面
2. 此处引用的是生成的页面，也可以在弹出框自定义table配置，见下面【弹出框选择数据(明细表)】
MES_ProductionOrder.vue(生成vue文件)
<template>
<!--将select-custom这段代码放在view-grid标签后面 -->
<!-- 弹出框(选择数据) -->
<select-custom ref="customRef" @onSelectCustom="onSelectCustom"></select-custom>
</template>
<script setup lang="jsx">
//将本地的onInit代码去掉，替换下面的这一段整代码
import SelectCustom from './MES_ProductionOrderSelectCustom.vue'
let gridRef
const onInit = async ($vm) => {
gridRef = $vm
const option = gridRef.getFormOption("CustomerName");
option.readonly = true;
option.extra = {
icon: 'el-icon-zoom-out', //显示图标
text: '选择', //显示文本
style: 'color: #3a8ee6;font-size: 13px;cursor: pointer;',
//触发事件
click: (item) => {
customRef.value.open();
}
};
}
//选择客户回调
const onSelectCustom = (rows) => {
editFormFields.CustomerName=rows[0].CustomerName;
//这里还可以给其他字段设置值editFormFields.字段=
}
</script>
MES_ProductionOrderSelectCustom.vue(弹出框选择数据文件)
<template>
<vol-box :lazy="true" v-model="model" title="选择客户" :width="1200" :padding="0">
<div><customer ref="customerRef"></customer></div>
<template #footer>
<div> <el-button type="primary" @click="onSelect">确认</el-button></div>
</template>
</vol-box>
</template>
<script setup>
import { ref, getCurrentInstance, nextTick } from 'vue'
const { proxy } = getCurrentInstance();
/******注意：如果出现提示没有权限的问题，见后台开发文档上的【重写后台权限】*****/
//直接引用生成的页面(也可以单独用table配置，单独配置下见下面【编辑弹出框明细表选择数据】)
import customer from '@/views/mes/mes/MES_Customer.vue';
//注意：1. '@/views/mes/mes/MES_Customer.vue'改为想要选择的vue文件
//2.在MES_Customer.vue的onInit中应该重新设置表格高度,代码实现如下：
// const onInited = async () => {
// //判断当前页面路由地址是不是选择的数据地址
// if (proxy.$route.path=='/MES_ProductionOrder') {
// //设置表格高度
// gridRef.height=350;
// //设置为单选
// gridRef.single=true;
// }
// }
const customerRef = ref();
const model = ref(false)
//回调
const emit = defineEmits('onSelectCustom')
const open = () => {
//打开主表选择数据
model.value = true;
//打开时刷新界面数据
nextTick(() => { customerRef.value?.$refs.grid?.search()});
}
//选择数据
const onSelect = () => {
//主表的选择数据回写到主表的表单上
let rows = customerRef.value.$refs.grid.getSelectRows();
if (!rows.length) {
return proxy.$message.error('请选择数据');
}
model.value=false;
emit('onSelectCustom', rows)
}
//暴露选择弹出框方法
defineExpose({open})
</script>
<style lang="less" scoped>
.search-form {
display: flex;
padding: 10px;
line-height: 34px;
button {
margin-left: 10px;
}
}
</style>