增加vue3版本明细表从弹出框中选择数据(见菜单：主从一对一(2))

Vol.Vue3版本/src/extension/order/SellOrder2.js

@@ -1,4 +1,7 @@
 import gridFooter from "./SellOrder2/SellOrder2GridFooter.vue"
+
+//自定义从表选择数据源页面
+import modelBody from "./SellOrder2/SellOrder2ModelBody.vue"
 import { h, resolveComponent } from 'vue';
 let extension = {
   components: {//动态扩充组件或组件路径
@@ -18,7 +21,7 @@ let extension = {
     gridFooter: gridFooter,
     //弹出框(修改、编辑、查看)header、content、footer对应位置扩充的组件
     modelHeader: "",
-    modelBody: '',
+    modelBody: modelBody,//自定义从表选择数据源页面
     modelFooter: "",
   },
   text: "点击主表行加载明细表数据,如果本地看不到此菜单,可以按照演示环境配置下此页面菜单",
@@ -33,11 +36,36 @@ let extension = {
       this.detailOptions.clickEdit = true;
       //设置主表合计
       this.summary = true;
-
     },
     onInited() {
       //调整界面table高度
       this.height = this.height - 310;
+
+      //明细表选择数据源操作
+      //获取明细表备注列，给备注列添加选择数据操作
+      let _column = this.detailOptions.columns.find(x => { return x.field == "Remark" });
+      _column.title="(备注)点击选择数据"
+      //移除编辑操作
+      _column.edit = null;
+      //给备注列添加选择数据操作
+      _column.render = (h, { row, column, index }) => {
+        return h("div", { style: {} },
+          [
+            h("i", {
+              class: ["el-icon-zoom-out"],
+              style: {
+                cursor: "pointer",
+                "margin-right": "8px",
+                color: "#409eff",
+              },
+              onClick: (e) => {
+                e.stopPropagation();
+                //弹出选择数据源
+                this.$refs.modelBody.open(row);
+              },
+            }),
+          ], row.Remark)
+      };
     },
     // rowDbClick({ row, column, event }){//双击事件
     // },

Vol.Vue3版本/src/extension/order/SellOrder2/SellOrder2ModelBody.vue

@@ -0,0 +1,126 @@
+<template>
+  <VolBox
+    v-model="model"
+    title="选择数据"
+    :height="530"
+    :width="1100"
+    :padding="10"
+  >
+    <!-- 设置查询条件 -->
+    <div style="padding-bottom: 10px">
+      <span style="margin-right: 20px">请选择数据</span>
+      <el-input
+        placeholder="商品名称"
+        style="width: 200px"
+        v-model="ProductName"
+      />
+      <el-button
+        type="primary"
+        style="margin-left: 10px"
+        size="medium"
+        icon="el-icon-zoom-out"
+        @click="search"
+        >搜索</el-button
+      >
+    </div>
+    <!-- vol-table配置的这些属性见VolTable组件api文件 -->
+    <vol-table
+      ref="mytable"
+      :loadKey="true"
+      :columns="columns"
+      :pagination="pagination"
+      :pagination-hide="false"
+      :max-height="380"
+      :url="url"
+      :index="true"
+      :single="true"
+      :defaultLoadPage="false"
+      @loadBefore="loadTableBefore"
+    ></vol-table>
+    <template #footer>
+      <div>
+        <el-button
+          size="mini"
+          type="primary"
+          icon="el-icon-plus"
+          @click="addRow()"
+          >添加选择的数据</el-button
+        >
+        <el-button size="mini" icon="el-icon-close" @click="model = false"
+          >关闭</el-button
+        >
+      </div>
+    </template>
+  </VolBox>
+</template>
+<script>
+import VolBox from "@/components/basic/VolBox.vue";
+import VolTable from "@/components/basic/VolTable.vue";
+export default {
+  components: {
+    VolBox: VolBox,
+    VolTable: VolTable,
+  },
+  data() {
+    return {
+      model: false,
+      ProductName: "",
+      //从后台接口加载数据,这里的接口用的框架自带的查询，也可以自定义接口，见App_ExpertModelBody.vue中调用的后台getSelectorDemo方法
+      url: "api/sellorderlist/getPageData",
+      columns: [
+        {
+          field: "ProductName",
+          title: "商品名称",
+          type: "string",
+          bind: { key: "pn", data: [] },
+          width: 150,
+          sort: true,
+        },
+        { field: "MO", title: "批次", width: 100, sort: true },
+        { field: "Qty", title: "数量", width: 90, sort: true },
+        { field: "Weight", title: "重量", twidth: 90, sort: true },
+        { field: "Remark", title: "备注", width: 120, sort: true },
+        { field: "Creator", title: "创建人", width: 130, sort: true },
+        {
+          field: "CreateDate",
+          title: "创建时间",
+          type: "datetime",
+          width: 145,
+          sort: true,
+        },
+      ],
+      pagination: {},
+      row: {}, //明细表选择的行
+    };
+  },
+  methods: {
+    open(row) {
+      this.row = row;
+      this.model = true;
+      //打开弹出框时，加载table数据
+      this.$nextTick(() => {
+        this.$refs.mytable.load();
+      });
+    },
+    search() {
+      this.$refs.mytable.load();
+    },
+    addRow() {
+      var rows = this.$refs.mytable.getSelected();
+      if (!rows || rows.length == 0) {
+        return this.$Message.error("请选择行数据");
+      }
+      //给当前行设置值
+      Object.assign(this.row, rows[0]);
+      this.model = false;
+    },
+    loadTableBefore(params) {
+      //查询前，设置查询条件
+      params.wheres = [
+        { name: "ProductName", value: this.ProductName, displayType: "like" },
+      ];
+      return true;
+    },
+  },
+};
+</script>

Vol.Vue3版本/src/extension/order/SellOrder3.js

@@ -19,8 +19,6 @@ let extension = {
     },
     //方式1,通过select选择触发显示与隐藏
     onInit() {
-      //点击单元格编辑与结束编辑(默认是点击单元格编辑，鼠标离开结束编辑)
-      this.detailOptions.clickEdit = true;
       //设置为单选，用于明细表加载数据时获取主表选行的id
       this.single = true;
     },