wms / wms4_changchunanbofu · Files

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