Vol.Pro开发文档

功能说明：在当前页面调用其他表的新建编辑弹出框

代码生成器界面将需要调用的表，【编辑模式】选择【新页面编辑】，并点击生成页面
如：在 a 页面要打开 b 页面的新建编辑弹出框，那么将 b 页面代码生成【编辑模式】选择【新页面编辑】

调用新建操作

每次打开页面都新建数据
实现方式：新建一个vue文件(可参照自定义弹出框示例)，配置下面内容，再引用生成的edit.vue文件

自定义页面配置

<template>
  <vol-box :lazy="false" v-model="model" title="弹出框" :width="1200" :padding="0">
    <div style="height:550px"> <edit ref="editRef"> </edit></div>
    <template #footer>
      <div>
        <el-button type="primary" size="small" @click="model=false">确认</el-button>
      </div>
    </template>
  </vol-box>
</template>
<script setup>
import { ref,defineExpose } from 'vue'
import VolBox from '@/components/basic/VolBox.vue'
//引用生成的新页面编辑(改为本地生成edit.vue文件路径)
import edit from '@/views/dbtest/product/Demo_Product/Edit.vue'
const model=ref(true)
const editRef = ref()
//打开弹出框并重置表编辑页面
const reset=()=>{
    model.value=true;
    editRef.value && editRef.value.edit.value.reset()
}
reset();
defineExpose({
  reset
})
</script>

生成表的[edit.vue]文件配置

这里是生成的表 edit.vue 文件页面：import edit from '@/views/路径/表/Edit.vue'

<template>
  <vol-edit ref="edit">
  </vol-edit>
</template>
<script setup lang="jsx">
//生成的edit.vue文件只需要加上：defineExpose({edit})，其他不变
defineExpose({edit})
</script>

调用编辑操作

每次打开页面编辑对应id的数据
实现方式：新建一个vue文件(可参照自定义弹出框示例)，配置下面内容，再引用生成的edit.vue文件

自定义页面配置

//在自定义的vue页面添加此配置
<template>
  <vol-box :lazy="false" v-model="model" title="弹出框" :width="1200" :padding="0">
    <div style="height:550px"><edit ref="editRef" :value="id"> </edit></div>
    <template #footer>
      <div>
        <el-button type="primary" size="small" @click="model=false">确认</el-button>
      </div>
    </template>
  </vol-box>
</template>
<script setup>
//每次打开页面，都根据id加载编辑数据
import { ref,defineExpose } from 'vue'

import VolBox from '@/components/basic/VolBox.vue'
//引用生成的新页面编辑
import edit from '@/views/dbtest/product/Demo_Product/Edit.vue'
const model=ref(true)
const editRef = ref()

//编辑数据编辑：请将id设置需要编辑的主键值，id值变化会自动刷新
const id = ref()
const reset = () => {
  id.value = 'e59b385c-f88f-4ba4-80ac-131f1e48a24c'
}
//给id设置值
reset();

defineExpose({
  reset
})
</script>

生成表的[edit.vue]文件配置

这里是生成的表 edit.vue 文件页面：import edit from '@/views/路径/表/Edit.vue'

//在生成的edit.vue文件添加defineExpose({edit})配置
<template>
  <vol-edit ref="edit">
  </vol-edit>
</template>
<script setup lang="jsx">
//生成的edit.vue文件只需要加上：defineExpose({edit})，其他不变
defineExpose({edit})
</script>

调用新建操作

调用编辑操作

ON THIS PAGE