新页面编辑说明

此页面文档仅限于【代码生成器编辑模式选择新页面编辑时生效】
同样自动生成代码，支持一对多、多对多功能,根据业务自定义扩展
业务实现文件位置:views->类库名(代码生成器选择的类库)->文件夹名(代码生成器输入的文件夹名)->表名->edit.vue

Props参数

属性	说明	类型	默认
`value`	编辑主键；与路由 `query.id` 二选一	`any`	`null`
`keyField`	主键字段名	`String`	`""`
`tableName`	物理表名（`api/{tableName}/...`）	`String`	`""`
`tableCNName`	表中文名（标题）	`String`	`"表名"`
`labelPosition`	标签位置，如 `left`、`top`	`String`	`""`
`labelWidth`	标签宽度（px）	`Number`	`100`
`formFields`	表单字段对象	`Object`	`{}`
`formOptions`	表单配置二维数组	`Array`	`[]`
`select2Count`	字典项超过该数时改用 select2	`Number`	`5000`

组件方法 (Methods)

保存时 addBefore 与 addBeforeAsync、updateBefore 与 updateBeforeAsync 会并行判断，任一为 false 即中止保存。主表删除实参均为当前行 currentRow（业务里若写成多参数，仅第一个形参接到该对象）。

方法名	说明	签名 / 要点
`onInit`	字典与数据加载流程开始前，最早可改 `detailOptions`、按钮等	`async ($vm) => void`
`onInited`	字典已拉取且主表数据加载逻辑已启动之后	`async ($vm) => void`
`searchBefore`	编辑态拉主表行数据前	`async (params) => boolean`，`false` 中止
`searchAfter`	新建初始化、接口返回后等多处调用	见 `VolEditProvider.getFormData`：`searchAfter(result)`、`searchAfter(result.rows, result)`、`searchAfter(formFields, [])` 等
`loadFormBefore`	真正请求主表行前	`(params, callback) => void`，`callback(false)` 中止
`loadFormAfter`	主表行已赋到表单后	`(result, callback) => void`
`modelOpenAfter`	模型数据打开后	`(row, currentAction, isCopyClick) => boolean`
`submitBefore`	保存总闸（可选）	`async (formData, isAdd, isCopyClick) => boolean`
`addBefore`	新建保存前	`async (formData, unusedCallback, isCopyClick) => boolean`
`addBeforeAsync`	新建保存前（与 `addBefore` 并行判断的异步版本）	同上
`addAfter`	新建保存接口成功后	`async (res) => boolean`
`updateBefore`	编辑保存前	`async (formData, unusedCallback) => boolean`
`updateBeforeAsync`	编辑保存前（与 `updateBefore` 并行判断的异步版本）	同上
`updateAfter`	编辑保存接口成功后	`async (res) => boolean`
`delBefore`	主表删除，弹出确认框之前	`async (currentRow) => boolean`，`false` 中止删除
`delAfter`	主表删除接口返回成功之后	`async (currentRow) => boolean`，`false` 可中断后续逻辑
`auditBefore`	审核请求发出之前	`async (keys, rows) => boolean`
`auditAfter`	审核接口返回成功之后	`async (res, rows) => boolean`
`loadTableBefore`	明细请求发出前	`(params, callback, table, item) => void`
`loadTableAfter`	明细接口返回后	`(rows, result, callback, table, item) => void`
`searchDetailBefore`	明细加载前（接在 `loadTableBefore` 之后）	`(param, callback, table, item) => void`，须 `callback(true/false)`
`searchDetailAfter`	明细加载后	`(result, table, item) => void`（以 `VolEditExposeMethods` 为准）
`addRow`	明细新增行默认数据	`(table, ops) => object`
`detailAddRowBefore`	点击「添加行」前合并默认值	`(table, item) => object \| void`，可 `return { 字段: 值 }`
`delRowBefore`	明细删行，弹出确认前（与 `detailDelRowBefore` 链式判断）	`async (selectRows, table, item) => boolean`
`delRowAfter`	明细删行已从表格移除后	`(selectRows, table, item) => void`
`detailDelRowBefore`	明细工具栏删行，确认前（与 `delRowBefore` 链式判断）	`async (selectRows, table, item) => boolean`
`detailDelRowAfter`	明细工具栏删行，移除后	`(selectRows, table, item) => void`
`beginEdit`	明细单元格进入编辑前	`(row, column, index) => boolean`
`endEditBefore`	明细单元格结束编辑前	`(row, column, index) => boolean`
`rowClick`	行点击	`({ row, column, event, index }) => boolean`
`selectable`	行是否可选	`(rows) => boolean`
`importBefore`	导入总闸	`(formData) => boolean`
`importDetailBefore`	明细 Excel 导入前	`(formData, isAddFlag) => boolean`
`importDetailAfter`	明细 Excel 导入完成后	`(importData, detailItem) => boolean`
`printBefore`	打印前	`(rows) => boolean`
`sortEnd`	明细拖拽排序结束（内部会先调用）	`(rows, newIndex, oldIndex) => void`
`onSortEnd`	明细拖拽排序结束（与 `sortEnd` 均会调用，并 `$emit('onSortEnd', …)`）	`(rows, newIndex, oldIndex) => void`
`detailSortEnd`	预留；当前内部排序回调未接	`(rows, newIndex, oldIndex) => void`
`dicInited`	表单或明细字典加载完成	`(res, table) => boolean`，有 `table` 时为明细字典
`detailRowChange`	明细勾选变化	`(rows, item) => void`
`tabClick`	主表表单分组 Tab	`(name) => void`
`detailTabsClick`	一对多 Tab 切换	`(table) => void`
`tabsClick`	明细 Tab 切换的后备钩子	`(table) => void`

完整绑定列表示例见上文「业务页最小结构」及仓库内 ERP_Suppliers/Edit.vue。表单分组在 onInit 或脚本里对 editFormOptions 设置 group；明细排序可在 onInit 中写 $vm.detailOptions.sortable = true（与 sortable 配置项配合）。

父组件通过 ref 主动调用的 save、search 等方法见下文「组件 ref 方法」，与上表「由组件回调的 Props 函数」区分。

数据插槽(slot)

插槽名	位置说明
`title`	标题行标题文字右侧
`btn`	顶部按钮区左侧（与内置按钮混排）
`btnRight`	顶部按钮区右侧（与内置按钮混排）
`header`	表单上方
`content`	表单与明细块之后
`detailsBtn`	一对多明细工具栏，作用域参数 `{ data }`
`detailContent`	主从子表标题区扩展
`footer`	滚动区最底部

常用方法

把下面方法复制到生成的Edit.vue文件中

刷新页面search

<template>
  <vol-edit ref="edit" :onInit="onInit"></vol-edit>
</template>
<script setup lang="jsx">
  //刷新主表表单及明细表表格数据
  gridRef.search()
</script>

刷新明细表loadDetail

<template>
  <vol-edit ref="edit" :onInit="onInit"></vol-edit>
</template>
<script setup lang="jsx">
//有多个明细表时才需要传表名
  gridRef.loadDetail("表名");
</script>

获取明细表数据

<template>
  <vol-edit ref="edit" :onInit="onInit"></vol-edit>
</template>
<script setup lang="jsx">
  const rows=gridRef.getTable("表名").rowData;//有多个明细表时才需要传表名
</script>

重置表单、明细表

<template>
  <vol-edit ref="edit" :onInit="onInit"></vol-edit>
</template>
<script setup lang="jsx">
  //会清空界面上表单与明细表格的数据
  gridRef.reset();
</script>

重置表单、明细表

<template>
  <vol-edit ref="edit" :onInit="onInit"></vol-edit>
</template>
<script setup lang="jsx">
  //会清空界面上表单与明细表格的数据
  gridRef.reset();
</script>


### 手动调用保存、删除数据

```javascript
<template>
  <vol-edit ref="edit" :onInit="onInit"></vol-edit>
</template>
<script setup lang="jsx">
  //调用保存方法
  gridRef.save();

  //调用删除数据
  gridRef.del();
</script>

明细表提交所有数据

默认明细表只会提交修改过的数据

<template>
  <vol-edit ref="edit" :onInit="onInit"></vol-edit>
</template>
<script setup lang="jsx">
  let gridRef;
  const onInit=($vm)=>{
    gridRef=$vm;
    //主从表明细表(一对一)

    //设置明细表交所有表格数据
    gridRef.submitChangeRows=false;
    //一对多明细表设置提交所有表格数据
    gridRef.details[0].submitChangeRows=false;
 }

</script>

获取表单配置getFormOption

<template>
  <vol-edit ref="edit" :onInit="onInit"></vol-edit>
</template>
<script setup lang="jsx">

  const option= gridRef.getFormOption("字段");
  //具体配置信息可以看options.js中的editFormOptions参数
</script>

<template>
  <vol-edit ref="edit" :onInit="onInit"></vol-edit>
</template>
<script setup lang="jsx">
//更多表单、明细表属性方法配置见：http://doc.volcore.xyz/docs/web/  http://doc.volcore.xyz/docs/view-grid/
let gridRef;
//初始化配置
const onInit = async ($vm) => {
  gridRef = $vm;
  //明细表表格排序:http://doc.volcore.xyz/docs/view-grid/methods/detailSortEnd.html
  //明细表隐藏显示行号、checkbox复选框：http://doc.volcore.xyz/docs/web/table/showRowNum.html#table-隐藏-显示行号、checkbox-复选框
};
</script>

查询前searchBefore

<template>
  <vol-edit ref="edit" :searchBefore="searchBefore"></vol-edit>
</template>

<script setup lang="jsx">
//页面的表单查询前方法
const searchBefore = async (params) => {
  //查询条件及参数设置：http://doc.volcore.xyz/docs/view-grid/methods/searchBefore.html
  return true;
};
</script>

查询后方法searchAfter

<template>
  <vol-edit ref="edit" :searchAfter="searchAfter"></vol-edit>
</template>

<script setup lang="jsx">
//页面的表单查询后方法
const searchAfter = async (res) => {
  return true;
};
</script>

新建保存前addBefore

<template>
  <vol-edit ref="edit" :addBefore="addBefore"></vol-edit>
</template>

<script setup lang="jsx">
//保存参数设置：http://doc.volcore.xyz/docs/view-grid/methods/addBefore.html
const addBefore = async (formData, callback, isCopyClick) => {
  return true;
};
</script>

新建保存后addAfter

<template>
  <vol-edit ref="edit" :addAfter="addAfter"></vol-edit>
</template>

<script setup lang="jsx">
// res 为接口返回对象
const addAfter = async (res) => {
  return true;
};
</script>

编辑保存前updateBefore

<template>
  <vol-edit ref="edit" :updateBefore="updateBefore"></vol-edit>
</template>

<script setup lang="jsx">
 //保存参数设置：http://doc.volcore.xyz/docs/view-grid/methods/updateBefore.html
const updateBefore = async (formData) => {
  return true;
};
</script>

编辑保存后updateAfter

<template>
  <vol-edit ref="edit" :updateAfter="updateAfter"></vol-edit>
</template>

<script setup lang="jsx">
const updateAfter = async (res) => {
  return true;
};
</script>

主表删除前delBefore

<template>
  <vol-edit ref="edit" :delBefore="delBefore"></vol-edit>
</template>

<script setup lang="jsx">
// 实参为当前主表行 row false 中止删除
const delBefore = async (row) => {
  //http://doc.volcore.xyz/docs/view-grid/methods/delBefore.html
  return true;
};
</script>

主表删除后delAfter

<template>
  <vol-edit ref="edit" :delAfter="delAfter"></vol-edit>
</template>

<script setup lang="jsx">
const delAfter = async (row) => {
  return true;
};
</script>

明细表查询前searchDetailBefore

<template>
  <vol-edit ref="edit" :searchDetailBefore="searchDetailBefore"></vol-edit>
</template>

<script setup lang="jsx">
const searchDetailBefore = (params, callback, table, item) => {
  // params查询条件参数见：http://doc.volcore.xyz/docs/view-grid/methods/searchBefore.html
  //这里返回false不会执行明细表查询
  callback(true);
};
</script>

明细表查询后searchDetailAfter

<template>
  <vol-edit ref="edit" :searchDetailAfter="searchDetailAfter"></vol-edit>
</template>

<script setup lang="jsx">
const searchDetailAfter = (result,table, item) => {
  return true;
};
</script>

明细表添加行detailAddRowBefore

<template>
  <vol-edit ref="edit" :detailAddRowBefore="detailAddRowBefore"></vol-edit>
</template>

<script setup lang="jsx">
const detailAddRowBefore = (table, item) => {
  // return { 字段: 值 };
  // 如果需要完全自定义添加数据，这里return false
};
</script>

明细表删除前detailDelRowBefore

<template>
  <vol-edit ref="edit" :detailDelRowBefore="detailDelRowBefore"></vol-edit>
</template>

<script setup lang="jsx">
const detailDelRowBefore = async (rows, table, item) => {
  return true;
};
</script>

明细表删除后detailDelRowAfter

<template>
  <vol-edit ref="edit" :detailDelRowAfter="detailDelRowAfter"></vol-edit>
</template>

<script setup lang="jsx">
const detailDelRowAfter = (rows, table, item) => {};
</script>

明细单元格进入编辑前beginEdit

<template>
  <vol-edit ref="edit" :beginEdit="beginEdit"></vol-edit>
</template>

<script setup lang="jsx">
const beginEdit = (row, column, index) => {
  return true;
};
</script>

明细单元格结束编辑前endEditBefore

<template>
  <vol-edit ref="edit" :endEditBefore="endEditBefore"></vol-edit>
</template>

<script setup lang="jsx">
const endEditBefore = (row, column, index) => {
  return true;
};
</script>

明细行点击rowClick

<template>
  <vol-edit ref="edit" :rowClick="rowClick"></vol-edit>
</template>

<script setup lang="jsx">
const rowClick = ({ row, column, event, index }) => {
  return true;
};
</script>

明细表checkbox复选框是否可选中selectable

<template>
  <vol-edit ref="edit" :selectable="selectable"></vol-edit>
</template>

<script setup lang="jsx">
const selectable = (row, index, table, item) => {
  return true;
};
</script>

明细表导入前importDetailBefore

<template>
  <vol-edit ref="edit" :importDetailBefore="importDetailBefore"></vol-edit>
</template>

<script setup lang="jsx">
const importDetailBefore = (formData, isAdd) => {
  //参数配置见：http://doc.volcore.xyz/docs/view-grid/methods/importBefore.html

  return true;
};
</script>

明细表导入后importDetailAfter

<template>
  <vol-edit ref="edit" :importDetailAfter="importDetailAfter"></vol-edit>
</template>

<script setup lang="jsx">
const importDetailAfter = async (importData, detailItem) => {
  return true;
};
</script>

打印前printBefore

<template>
  <vol-edit ref="edit" :printBefore="printBefore"></vol-edit>
</template>

<script setup lang="jsx">
const printBefore = (rows) => {
  return true;
};
</script>

明细表表格拖动排序detailSortEnd

<template>
  <vol-edit ref="edit" :detailSortEnd="detailSortEnd"></vol-edit>
</template>

<script setup lang="jsx">
const detailSortEnd = (rows, newIndex, oldIndex) => {
  //注意需要在onInit方法中开启配置：  gridRef.detailOptions.sortable = true
  //见示例：http://doc.volcore.xyz/docs/view-grid/methods/detailSortEnd.html
};
</script>

数据源加载后dicInited

<template>
 <vol-edit ref="edit" :dicInited="dicInited"></vol-edit>
</template>

<script setup lang="jsx">
//页面加载时获取表单字典数据
//dicData返回的字典数据
//table，对应明细表的字典，table没有值时为表单加载的数据
const dicInited = (dicData, table) => {
}

</script>

明细表checkbox复选框选中事件detailRowChange

<template>
  <vol-edit ref="edit" :detailRowChange="detailRowChange"></vol-edit>
</template>

<script setup lang="jsx">
const detailRowChange = (rows, item) => {};
</script>

主表表单分组切换事件tabClick

<template>
  <vol-edit ref="edit" :tabClick="tabClick"></vol-edit>
</template>

<script setup lang="jsx">
const tabClick = (name) => {};
</script>

一对多明细表tab选项卡切换detailTabsClick

<template>
  <vol-edit ref="edit" :detailTabsClick="detailTabsClick"></vol-edit>
</template>

<script setup lang="jsx">
const detailTabsClick = (table) => {};
</script>

审批前auditBefore

<template>
  <vol-edit ref="edit" :auditBefore="auditBefore"></vol-edit>
</template>

<script setup lang="jsx">
const auditBefore = async (keys, rows) => {
  return true;
};
</script>

审批后auditAfter

<template>
  <vol-edit ref="edit" :auditAfter="auditAfter"></vol-edit>
</template>

<script setup lang="jsx">
const auditAfter = async (res, rows) => {
  return true;
};
</script>

initButtons(旧版初始化按钮,新版不用看)

<template>
  <vol-edit ref="edit" @initButtons="onInitButtons"></vol-edit>
</template>

<script setup lang="jsx">
const onInitButtons = (buttons) => {
  // buttons.splice / push 自定义按钮
};
</script>

initDetailButtonss(旧版初始化明细表按钮,新版不用看)

<template>
  <vol-edit ref="edit" @initDetailButtons="onInitDetailButtons"></vol-edit>
</template>

<script setup lang="jsx">
// 参数以运行版本为准：可能为 detailOptions 或 buttons 数组
const onInitDetailButtons = (payload, hasSave, hasDel) => {};
</script>

其他说明

新建判断：const isAdd = !route.query.id 与组件内部 isAdd 一致思路。
编辑主键：route.query.id 或 props.value。
HTTP / 消息：在 setup 中通过 getCurrentInstance().proxy 使用 proxy.http、proxy.$message 等与生成器一致。
只读相关：组件内部根据数据/路由会设置 buttons、detailOptions、列 readonly 等，可在 onInit 中二次调整。

更多表单字段类型、表格列配置见项目内其他专题文档；明细排序、查询钩子等可与 ViewGrid 文档交叉参考。

完整实现代码

<template>
  <vol-edit
    ref="edit"
    :keyField="key"
    :tableName="tableName"
    :tableCNName="tableCNName"
    :label-width="labelWidth"
    :labelPosition="labelPosition"
    :formFields="editFormFields"
    :formOptions="editFormOptions"
    :detail-height="detailHeight"
    :searchBefore="searchBefore"
    :searchAfter="searchAfter"
    :addBefore="addBefore"
    :addAfter="addAfter"
    :updateBefore="updateBefore"
    :updateAfter="updateAfter"
    :detail="detail"
    :details="details"
    :onInit="onInit"
    :onInited="onInited"
    :auditBefore="auditBefore"
    :auditAfter="auditAfter"
    :detailAddRowBefore="detailAddRowBefore"
    :delBefore="delBefore"
    :delAfter="delAfter"
    :detailDelRowBefore="detailDelRowBefore"
    :detailDelRowAfter="detailDelRowAfter"
    :detailSortEnd="detailSortEnd"
    :tabClick="tabClick"
    :detailTabsClick="detailTabsClick"
    :dicInited="dicInited"
    :detailRowChange="detailRowChange"
    :searchDetailBefore="searchDetailBefore"
    :searchDetailAfter="searchDetailAfter"
    :beginEdit="beginEdit"
    :endEditBefore="endEditBefore"
    :importDetailBefore="importDetailBefore"
    :importDetailAfter="importDetailAfter"
  >
    <template #header>
      <!-- 自定义数据槽显示 -->
    </template>
    <template #content>
      <!-- 自定义数据槽显示 -->
    </template>
    <template #footer>
      <!-- 自定义数据槽显示 -->
    </template>
  </vol-edit>
</template>

<script setup lang="jsx">
defineOptions({ name: "ERP_Suppliers_edit" });
import editOptions from "./options.js";
import { ref, reactive } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const isAdd = !route.query.id;
const {
  key,
  tableName,
  tableCNName,
  editFormFields,
  editFormOptions,
  detail,
  details,
} = reactive(editOptions());

const edit = ref(null);
//编辑表单文字宽度
const labelWidth = 90;
//编辑表单文字显示位置：left、top
const labelPosition = ref("");
//明细表高度
const detailHeight = 200;
//初始化配置
//更多表单、明细表属性方法配置见：http://doc.volcore.xyz/docs/web/  http://doc.volcore.xyz/docs/view-grid/
let gridRef;
const onInit = async ($vm) => {
  gridRef = $vm;
  //明细表表格排序:http://doc.volcore.xyz/docs/view-grid/methods/detailSortEnd.html
  gridRef.detailOptions.sortable = true;
  //明细表隐藏显示行号、checkbox复选框：http://doc.volcore.xyz/docs/web/table/showRowNum.html#table-隐藏-显示行号、checkbox-复选框
};
const onInited = async ($vm) => {};

//表单查询前方法
const searchBefore = async (params) => {
  //查询条件及参数设置：http://doc.volcore.xyz/docs/view-grid/methods/searchBefore.html
  return true;
};
//表单查询后方法
const searchAfter = async (res) => {
  return true;
};

//新建保存前方法
const addBefore = async (formData) => {
  //保存参数设置：http://doc.volcore.xyz/docs/view-grid/methods/addBefore.html
  return true;
};
//新建保存后方法
const addAfter = async (res) => {
  return true;
};

//新建保存前方法
const updateBefore = async (formData) => {
  //保存参数设置：http://doc.volcore.xyz/docs/view-grid/methods/addBefore.html
  return true;
};
//新建保存后方法
const updateAfter = async (res) => {
  return true;
};

//主表删除按钮删除前方法（组件传入实参为当前行 currentRow）
const delBefore = async (currentRow) => {
  console.log("delBefore");
  return true;
};
//主表删除按钮删除后
const delAfter = async (currentRow) => {
  return true;
};

//明细表点击添加行时，设置默认值
const detailAddRowBefore = (table, item) => {
  //return {字段:值}
  console.log("detailAddRowBefore");
};
//明细表删除按钮删除前方法
const detailDelRowBefore = async (rows, table, item) => {
  console.log("delRowBefore");
  return true;
};
//明细表删除按钮删除后
const detailDelRowAfter = (rows, table, item) => {};
//明细表表格拖拽排序
const detailSortEnd = (rows, newIndex, oldIndex) => {
  //参照:http://doc.volcore.xyz/docs/view-grid/methods/detailSortEnd.html
};

//主表表单分组切换事件
const tabClick = (name) => {
  //http://doc.volcore.xyz/docs/web/form/group.html#编辑表单分组显示一
  console.log(name);
};
//主表、明细表字典加载后方法,table:明细表的字典
const dicInited = (res, table) => {
  console.log(res);
  return true;
};
//明细表复选框选择事件
const detailRowChange = (rows, item) => {
  console.log("detailRowChange");
};
//一对多明细表tabs选项卡切换
const detailTabsClick = (table) => {};
//细表查询前方法
const searchDetailBefore = (param, callback, table, item) => {
  console.log("searchDetailBefore");
  callback(true);
};
//明细表查询后
const searchDetailAfter = (result,table, item) => {
  console.log("searchDetailAfter");
  return true;
};
//明细表表格进入编辑前方法
const beginEdit = (row, column, index) => {
  //可动态判断：http://doc.volcore.xyz/docs/view-grid/methods/checkEdit.html
  return true;
};
//明细表表格进入编辑后方法
const endEditBefore = (row, column, index) => {
  return true;
};
//明细表导入前方法
const importDetailBefore = (formData, isAddFlag) => {
  console.log("importDetailBefore");
  return true;
};
//明细表导入后方法
const importDetailAfter = async (importData, detailItem) => {
  console.log("importDetailAfter");
  return true;
};
const auditBefore = async (keys, rows) => {
  return true;
};
const auditAfter = async (res, rows) => {
  return true;
};
defineExpose({});
</script>

新页面编辑说明

ON THIS PAGE