dzhh-frontend/.svn/pristine/f9/f913664d9329b7a82b7340de2f54ab8e1bb329de.svn-base

<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>