JeecgBoot 2.3 里程碑版本发布，支持微服务和单体自由切换、提供新行编辑表格JVXETable

ant-design-vue-jeecg/src/views/jeecg/JVxeDemo/demo/PopupSubTable.vue

@@ -0,0 +1,278 @@
+<template>
+  <a-card title="弹出子表示例" :bordered="false">
+
+    <!--
+      【弹出子表大体思路】
+      1. 必须要有 click-row-show-sub-form 属性，如果该属性设为false，那么就不会弹出子表
+      2. 必须要有 sub-form 插槽，用于规定弹出子表的内容
+      3. highlight-current-row 属性可有可无，如果有则点击一行的时候，该行会背景色会常亮
+    -->
+
+    <!--
+      【弹出详细信息（既有主表的数据也有子表的）大体思路】
+      1. 必须要有 click-row-show-main-form 属性，如果该属性设为false，那么就不会弹出详细信息
+      2. 必须要有 main-form 插槽，用于规定弹出子表的内容
+      3. 可选 click-row-show-sub-form 属性，如果有该属性，就会显示子表，否者不显示
+    -->
+
+    <j-vxe-table
+      toolbar
+      row-number
+      row-selection
+
+      highlight-current-row
+      click-row-show-sub-form
+      click-row-show-main-form
+
+      :height="750"
+      :loading="loading"
+      :columns="columns"
+      :dataSource="dataSource"
+      @detailsConfirm="handleDetailsConfirm"
+    >
+
+      <!-- 主表单 -->
+      <template v-slot:mainForm="{row}">
+        <template v-if="row">
+          <a-form-model
+            ref="form2"
+            :model="row"
+            :rules="rules"
+            :label-col="labelCol"
+            :wrapper-col="wrapperCol"
+          >
+            <a-row :gutter="8">
+              <a-col :span="8">
+                <a-form-model-item label="ID" prop="id">
+                  <a-input v-model="row.id" disabled/>
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="8">
+                <a-form-model-item label="序号" prop="num">
+                  <a-input v-model="row.num"/>
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="8">
+                <a-form-model-item label="船名" prop="ship_name">
+                  <a-input v-model="row.ship_name"/>
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="8">
+                <a-form-model-item label="呼叫" prop="call">
+                  <a-input v-model="row.call"/>
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="8">
+                <a-form-model-item label="长" prop="len">
+                  <a-input v-model="row.len"/>
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="8">
+                <a-form-model-item label="吨" prop="ton">
+                  <a-input v-model="row.ton"/>
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="8">
+                <a-form-model-item label="付款方" prop="payer">
+                  <a-input v-model="row.payer"/>
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="8">
+                <a-form-model-item label="数" prop="count">
+                  <a-input v-model="row.count"/>
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="8">
+                <a-form-model-item label="公司" prop="company">
+                  <a-input v-model="row.company"/>
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="8">
+                <a-form-model-item label="动向" prop="trend">
+                  <a-input v-model="row.trend"/>
+                </a-form-model-item>
+              </a-col>
+            </a-row>
+          </a-form-model>
+        </template>
+
+      </template>
+
+      <!-- 子表单 -->
+      <template v-slot:subForm="{row}">
+        <template v-if="loadSubData(row)">
+          <j-vxe-table
+            ref="subFormTable"
+            height="auto"
+            :max-height="350"
+            :loading="subTable.loading"
+            :columns="subTable.columns"
+            :dataSource="subTable.dataSource"
+          />
+        </template>
+      </template>
+
+    </j-vxe-table>
+
+  </a-card>
+</template>
+
+<script>
+  import { getAction } from '@api/manage'
+  import { JVXETypes } from '@/components/jeecg/JVxeTable'
+
+  // 弹出子表示例
+  export default {
+    name: 'PopupSubTable',
+    data() {
+      return {
+        loading: false,
+        dataSource: [],
+        columns: [
+          {key: 'num', title: '序号', width: '80px'},
+          {key: 'ship_name', title: '船名', width: '180px', type: JVXETypes.input},
+          {key: 'call', title: '呼叫', width: '80px'},
+          {key: 'len', title: '长', width: '80px'},
+          {key: 'ton', title: '吨', width: '120px'},
+          {key: 'payer', title: '付款方', width: '120px'},
+          {key: 'count', title: '数', width: '40px'},
+          {
+            key: 'company',
+            title: '公司',
+            minWidth: '180px',
+            // 是否点击显示详细信息
+            // 只有当前单元格不能编辑的时候才能生效
+            // 如果不设的话，点击就只弹出子表，不会弹出主表的详细信息
+            showDetails: true
+          },
+          {key: 'trend', title: '动向', width: '120px'},
+        ],
+        // 子表的信息
+        subTable: {
+          currentRowId: null,
+          loading: false,
+          pagination: {current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0},
+          selectedRows: [],
+          dataSource: [],
+          columns: [
+            {key: 'dd_num', title: '调度序号', width: '120px'},
+            {key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input},
+            {key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input},
+            {key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input},
+            {key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input},
+            {key: 'port_area', title: '所属港区', minWidth: '120px', type: JVXETypes.input},
+          ],
+        },
+        // 查询url地址
+        url: {
+          getData: '/mock/vxe/getData',
+        },
+        // 主表form表单字段
+        mainForm: {
+          id: '',
+          num: '',
+          ship_name: '',
+          call: '',
+          len: '',
+          ton: '',
+          payer: '',
+          count: '',
+          company: '',
+          trend: '',
+        },
+        // form表单 col
+        labelCol: {span: 4},
+        wrapperCol: {span: 20},
+        rules: {
+          num: [
+            {required: true, message: '必须输入序号'},
+          ],
+        },
+      }
+    },
+
+    created() {
+      this.loadData()
+    },
+    methods: {
+
+      log: console.log,
+
+      // 加载数据
+      loadData() {
+        // 封装查询条件
+        let formData = {pageNo: 1, pageSize: 30}
+        // 调用查询数据接口
+        this.loading = true
+        getAction(this.url.getData, formData).then(res => {
+          if (res.success) {
+            // 将查询的数据赋值给 dataSource
+            this.dataSource = res.result.records
+            // 重置选择
+            this.selectedRows = []
+          } else {
+            this.$error({title: '主表查询失败', content: res.message})
+          }
+        }).finally(() => {
+          // 这里是无论成功或失败都会执行的方法，在这里关闭loading
+          this.loading = false
+        })
+      },
+
+      // 查询子表数据
+      loadSubData(row) {
+        if (row) {
+          // 这里一定要做限制，限制不能重复查询，否者会出现死循环
+          if (this.subTable.currentRowId === row.id) {
+            return true
+          }
+          this.subTable.currentRowId = row.id
+          let formData = {pageNo: 1, pageSize: 30, parentId: row.id}
+          this.subTable.loading = true
+          getAction(this.url.getData, formData).then(res => {
+            if (res.success) {
+              // 将查询的数据赋值给 dataSource
+              this.subTable.dataSource = res.result.records
+            } else {
+              this.$error({title: '主表查询失败', content: res.message})
+            }
+          }).finally(() => {
+            // 这里是无论成功或失败都会执行的方法，在这里关闭loading
+            this.subTable.loading = false
+          })
+          return true
+        } else {
+          return false
+        }
+      },
+
+      // 详细信息里点了确认按钮
+      handleDetailsConfirm({row, $table, callback}) {
+        console.log('保存的数据：', row)
+        // 校验当前行
+        $table.validate(row).then((errMap) => {
+          // 校验通过
+          if (!errMap) {
+            // 校验子表，如果需要的话，可以操作下面这个对象：
+            // this.$refs.subFormTable
+
+            callback(true)
+            this.loading = true
+            setTimeout(() => {
+              this.loading = false
+              this.$message.success('保存成功')
+            }, 1000)
+          } else {
+            callback(false)
+            this.$message.warn('校验失败')
+          }
+        })
+      },
+
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>