Vol开发文档3.5
Series

明细表弹出框批量选择数据

文档说明

注意：这是最新版本vue3语法的实现方式，旧版本或者在[表.jsx]中实现弹出框，见旧版本文档,查看open in new window

1.效果截图

1.配置选择按钮

2.弹用弹出框

3.文件目录结构

2.代码实现

MES_ProductionOrder.vue(生成的vue文件)
<template>
  <div class="grid">
    <view-grid ref="grid" :columns="columns" :detail="detail" :editFormFields="editFormFields"
      :editFormOptions="editFormOptions" :searchFormFields="searchFormFields" :searchFormOptions="searchFormOptions"
      :table="table" :extend="extend" :onInit="onInit" :onInited="onInited" :searchBefore="searchBefore"
      :searchAfter="searchAfter" :addBefore="addBefore" :updateBefore="updateBefore" :rowClick="rowClick"
      :modelOpenBefore="modelOpenBefore" :modelOpenAfter="modelOpenAfter">
    </view-grid>
  </div>
  <!-- 明细表选择物料 -->
  <select-material ref="materialRef" @onSelect="onSelect"></select-material>
</template>
<script setup lang="jsx">
//明细表选择物料页面
import SelectMaterial from './MES_ProductionOrderSelectSelectMaterial.vue'
//下面import的extend、viewOptions两个文件不替换了
import extend from '@/extension/mes/mes/MES_ProductionOrder.jsx'
import viewOptions from './MES_ProductionOrder/options.js'
import { ref, reactive, getCurrentInstance, watch, onMounted } from 'vue'
const grid = ref(null)
const { proxy } = getCurrentInstance()
//http请求，proxy.http.post/get
const {table,editFormFields, editFormOptions,searchFormFields,
  searchFormOptions,columns,detail
} = reactive(viewOptions())

let gridRef //对应[表.jsx]文件中this.使用方式一样
//生成对象属性初始化
const onInit = async ($vm) => {
  gridRef = $vm
}
const materialRef = ref()
//生成对象属性初始化后,操作明细表配置用到
const onInited = async () => {
  //设置明细表高度
  gridRef.detailOptions.height = 300;
  //设置弹出框宽度
  gridRef.boxOptions.width = 1000
  //通过弹出框选择数据
  gridRef.detailOptions.buttons.unshift({
    name: '选择物料', //按钮名称
    icon: 'el-icon-plus', //按钮图标，参照iview图标
    hidden: false, //是否隐藏按钮(如果想要隐藏按钮，在onInited方法中遍历buttons，设置hidden=true)
    onClick: () => {
      //触发事件
      materialRef.value.open()
    }
  })
}

//选择物料回调
const onSelect = (rows) => {
  //转换数据格式与当前明细表字段一致
  rows = rows.map((c) => {
    return {
      MaterialName: c.MaterialName,
      MaterialCode: c.MaterialCode,
      MaterialSpecification: c.Specification,
      Unit: c.Unit
    }
  })
  //写入明细表
  gridRef.getTable().rowData.unshift(...rows)
}

const searchBefore = async (param) => {
  //界面查询前,可以给param.wheres添加查询参数
  //返回false，则不会执行查询
  return true
}
const searchAfter = async (rows, result) => {
  return true
}
const addBefore = async (formData) => {
  //新建保存前formData为对象，包括明细表，可以给给表单设置值，自己输出看formData的值
  return true
}
const updateBefore = async (formData) => {
  //编辑保存前formData为对象，包括明细表、删除行的Id
  return true
}
const footerRef = ref()
//查询界面点击行事件,加载明细表数据
const rowClick = ({ row, column, event }) => {
  //查询界面点击行事件
  // grid.value.toggleRowSelection(row); //单击行时选中当前行;
  footerRef.value.gridRowClick(row)
}
const modelOpenBefore = async (row) => {
  //弹出框打开后方法
  return true //返回false，不会打开弹出框
}
const modelOpenAfter = (row) => {
  //弹出框打开后方法,设置表单默认值,按钮操作等
}
defineExpose({})
</script>
************************************************************************************************************************

明细表弹出框表格选择数据

文档说明

注意：这是最新版本vue3语法的实现方式，旧版本或者在[表.jsx]中实现弹出框，见旧版本文档,查看open in new window

1.效果截图

1.配置明细表表格选择按钮

2.弹用弹出框

3.文件目录结构

2.代码实现

MES_ProductionOrder.vue(生成的vue文件)
<template>
  <div class="grid">
    <view-grid ref="grid" :columns="columns" :detail="detail" :editFormFields="editFormFields"
      :editFormOptions="editFormOptions" :searchFormFields="searchFormFields" :searchFormOptions="searchFormOptions"
      :table="table" :extend="extend" :onInit="onInit" :onInited="onInited" :searchBefore="searchBefore"
      :searchAfter="searchAfter" :addBefore="addBefore" :updateBefore="updateBefore" :rowClick="rowClick"
      :modelOpenBefore="modelOpenBefore" :modelOpenAfter="modelOpenAfter">
    </view-grid>
  </div>
  <!-- 明细表选择物料 -->
  <select-material ref="materialRef" @onSelect="onSelect"></select-material>
</template>
<script setup lang="jsx">
//明细表选择物料页面
import SelectMaterial from './MES_ProductionOrderSelectSelectMaterial.vue'
//下面import的extend、viewOptions两个文件不替换了
import extend from '@/extension/mes/mes/MES_ProductionOrder.jsx'
import viewOptions from './MES_ProductionOrder/options.js'
import { ref, reactive, getCurrentInstance, watch, onMounted } from 'vue'
const grid = ref(null)
const { proxy } = getCurrentInstance()
//http请求，proxy.http.post/get
const {table,editFormFields, editFormOptions,searchFormFields,
  searchFormOptions,columns,detail
} = reactive(viewOptions())

let gridRef //对应[表.jsx]文件中this.使用方式一样
//生成对象属性初始化
const onInit = async ($vm) => {gridRef = $vm}
const materialRef = ref()
//生成对象属性初始化后,操作明细表配置用到
const onInited = async () => {
  //设置明细表高度
  gridRef.detailOptions.height = 300;
  //设置弹出框宽度
  gridRef.boxOptions.width = 1000

  //明细表行数据物料编码设置弹出框选择数据
  detail.columns.forEach((x) => {
    if (x.field == 'MaterialCode') {
      x.render = (h, { row, column, index }) => {
        x.edit = null;//设置当前字段不可编辑
        return (
          <div>
            <el-button link
              onClick={($e) => {
                $e.stopPropagation();
                //触发事件
                materialRef.value.open(row)
              }}
              class="el-icon-search"
              style="color: #2196F3;cursor: pointer;"
            ></el-button>
            <span style="margin-left:5px">{row.MaterialCode}</span>
          </div>
        );
      };
    }
  })
}
//表格回写事件
const onSelect=(row)=>{
   console.log('表格回写事件')
}


const searchBefore = async (param) => {
  //界面查询前,可以给param.wheres添加查询参数
  //返回false，则不会执行查询
  return true
}
const searchAfter = async (rows, result) => {
  return true
}
const addBefore = async (formData) => {
  //新建保存前formData为对象，包括明细表，可以给给表单设置值，自己输出看formData的值
  return true
}
const updateBefore = async (formData) => {
  //编辑保存前formData为对象，包括明细表、删除行的Id
  return true
}
const footerRef = ref()
//查询界面点击行事件,加载明细表数据
const rowClick = ({ row, column, event }) => {
  //查询界面点击行事件
  // grid.value.toggleRowSelection(row); //单击行时选中当前行;
  footerRef.value.gridRowClick(row)
}
const modelOpenBefore = async (row) => {
  //弹出框打开后方法
  return true //返回false，不会打开弹出框
}
const modelOpenAfter = (row) => {
  //弹出框打开后方法,设置表单默认值,按钮操作等
}
//监听表单输入，做实时计算
//watch(() => editFormFields.字段,(newValue, oldValue) => {	})
//对外暴露数据
defineExpose({})
</script>
ON THIS PAGE