Blame view

ant-design-vue-jeecg/src/views/jeecg/JVxeDemo/demo/PopupSubTable.vue 8.63 KB
肖超群 authored
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<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>
肖超群 authored
121
122
import {getAction} from '@api/manage'
import {JVXETypes} from '@/components/jeecg/JVxeTable'
肖超群 authored
123
肖超群 authored
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
// 弹出子表示例
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,
肖超群 authored
153
        loading: false,
肖超群 authored
154
155
        pagination: {current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0},
        selectedRows: [],
肖超群 authored
156
157
        dataSource: [],
        columns: [
肖超群 authored
158
159
160
161
162
163
          {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},
肖超群 authored
164
        ],
肖超群 authored
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
      },
      // 查询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: '必须输入序号'},
        ],
      },
    }
  },
肖超群 authored
193
肖超群 authored
194
195
196
197
  created() {
    this.loadData()
  },
  methods: {
肖超群 authored
198
肖超群 authored
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
    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
      })
    },
肖超群 authored
221
肖超群 authored
222
223
224
225
226
227
228
229
230
231
    // 查询子表数据
    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
肖超群 authored
232
233
234
        getAction(this.url.getData, formData).then(res => {
          if (res.success) {
            // 将查询的数据赋值给 dataSource
肖超群 authored
235
            this.subTable.dataSource = res.result.records
肖超群 authored
236
237
238
239
240
          } else {
            this.$error({title: '主表查询失败', content: res.message})
          }
        }).finally(() => {
          // 这里是无论成功或失败都会执行的方法,在这里关闭loading
肖超群 authored
241
          this.subTable.loading = false
肖超群 authored
242
        })
肖超群 authored
243
244
245
246
247
        return true
      } else {
        return false
      }
    },
肖超群 authored
248
肖超群 authored
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
    // 详细信息里点了确认按钮
    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)
肖超群 authored
265
        } else {
肖超群 authored
266
267
          callback(false)
          this.$message.warn('校验失败')
肖超群 authored
268
        }
肖超群 authored
269
      })
肖超群 authored
270
    },
肖超群 authored
271
272
273

  },
}
肖超群 authored
274
275
276
277
278
</script>

<style scoped>

</style>