Blame view

ant-design-vue-jeecg/src/views/jeecg/JVxeDemo/layout-demo/ErpTemplate.vue 9.56 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
<template>

  <a-card :bordered="false">
    <j-vxe-table
      toolbar
      :toolbarConfig="toolbarConfig"

      row-number
      row-selection
      row-selection-type="radio"
      highlight-current-row
      click-select-row
      :height="tableHeight"
      :loading="table1.loading"
      :columns="table1.columns"
      :dataSource="table1.dataSource"
      :pagination="table1.pagination"
      :expand-config="expandConfig"
      style="margin-bottom: 8px"

      @pageChange="handleTable1PageChange"
      @selectRowChange="handleTable1SelectRowChange"
    ></j-vxe-table>

    <a-tabs v-show="subTabs.show" :class="{'sub-tabs':true, 'un-expand': !subTabs.expand}">
      <a-tab-pane tab="子表1" key="1">
        <j-vxe-table
          toolbar
          row-number
          row-selection
          height="auto"
          :maxHeight="350"
          :loading="table2.loading"
          :columns="table2.columns"
          :dataSource="table2.dataSource"
          :pagination="table2.pagination"
          @pageChange="handleTable2PageChange"
          @selectRowChange="handleTable2SelectRowChange"
        />
      </a-tab-pane>
      <a-tab-pane tab="子表2" key="2">
        <h1>这里是子表2</h1>
        <h1>这里是子表2</h1>
        <h1>这里是子表2</h1>
        <h1>这里是子表2</h1>
        <h1>这里是子表2</h1>
        <h1>这里是子表2</h1>
      </a-tab-pane>
    </a-tabs>

  </a-card>
</template>

<script>
肖超群 authored
55
56
import {JVXETypes} from '@/components/jeecg/JVxeTable'
import {getAction} from '@api/manage'
肖超群 authored
57
肖超群 authored
58
59
60
61
62
63
64
65
66
67
export default {
  name: 'ErpTemplate',
  data() {
    return {
      toolbarConfig: {
        // prefix 前缀;suffix 后缀
        slot: ['prefix', 'suffix'],
        // add 新增按钮;remove 删除按钮;clearSelection 清空选择按钮
        btn: ['add', 'remove', 'clearSelection']
      },
肖超群 authored
68
肖超群 authored
69
70
71
72
      expandConfig: {
        // 是否只能同时展开一行
        accordion: true
      },
肖超群 authored
73
肖超群 authored
74
75
76
77
78
79
80
81
      // 子表 tabs
      subTabs: {
        show: false,
        // 是否展开
        expand: true,
        // 是否自动展开
        autoExpand: true,
      },
肖超群 authored
82
肖超群 authored
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
      table1: {
        // 是否正在加载
        loading: false,
        // 分页器参数
        pagination: {
          // 当前页码
          current: 1,
          // 每页的条数
          pageSize: 200,
          // 可切换的条数
          pageSizeOptions: ['10', '20', '30', '100', '200'],
          // 数据总数(目前并不知道真实的总数,所以先填写0,在后台查出来后再赋值)
          total: 0,
          showTotal: (total, range) => {
            // 此处为 jsx 语法
            let text = <span>{range[0] + '-' + range[1] + ' 共 ' + total + ' 条'}</span>
            // 判断子表是否显示,如果显示就渲染展开收起按钮
            if (this.subTabs.show) {
              let expand = (<span>
肖超群 authored
102
103
104
105
106
107
                <a-button type="link" onClick={this.handleToggleTabs}>
                  <a-icon type={this.subTabs.expand ? 'up' : 'down'}/>
                  <span>{this.subTabs.expand ? '收起' : '展开'}</span>
                </a-button>
                <a-checkbox vModel={this.subTabs.autoExpand}>自动展开</a-checkbox>
              </span>)
肖超群 authored
108
109
110
111
112
113
              // 返回多个dom用数组
              return [expand, text]
            } else {
              // 直接返回单个dom
              return text
            }
肖超群 authored
114
115
          },
        },
肖超群 authored
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
        // 选择的行
        selectedRows: [],
        // 数据源,控制表格的数据
        dataSource: [],
        // 列配置,控制表格显示的列
        columns: [
          {key: 'num', title: '序号', width: '80px'},
          {
            // 字段key,跟后台数据的字段名匹配
            key: 'ship_name',
            // 列的标题
            title: '船名',
            // 列的宽度
            width: '180px',
            // 如果加上了该属性,就代表当前单元格是可编辑的,type就是表单的类型,input就是简单的输入框
            type: JVXETypes.input
          },
          {key: 'call', title: '呼叫', width: '990px', type: JVXETypes.input},
          {key: 'len', title: '长', width: '80px', type: JVXETypes.inputNumber},
          {key: 'ton', title: '吨', width: '120px', type: JVXETypes.inputNumber},
          {key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input},
          {key: 'count', title: '数', width: '40px'},
          {
            key: 'company',
            title: '公司',
            // 最小宽度,与宽度不同的是,这个不是固定的宽度,如果表格有多余的空间,会平均分配给设置了 minWidth 的列
            // 如果要做占满表格的列可以这么写
            minWidth: '180px',
            type: JVXETypes.input
          },
          {key: 'trend', title: '动向', width: '120px', type: JVXETypes.input},
        ],
肖超群 authored
148
      },
肖超群 authored
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
      // 子级表的配置信息 (配置和主表的完全一致,就不写冗余的注释了)
      table2: {
        currentRowId: null,
        loading: false,
        pagination: {current: 1, pageSize: 10, pageSizeOptions: ['5', '10', '20', '30'], 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: '所属港区', width: '120px', type: JVXETypes.input},
        ],
      },
      currentSubRow: null,
      // 查询url地址
      url: {
        getData: '/mock/vxe/getData',
      },
    }
  },
  computed: {
    tableHeight() {
      let {show, expand} = this.subTabs
      return show ? (expand ? 350 : 482) : 482
肖超群 authored
176
    },
肖超群 authored
177
178
179
180
181
  },
  created() {
    this.loadTable1Data()
  },
  methods: {
肖超群 authored
182
肖超群 authored
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
    // 加载table1【主表】的数据
    loadTable1Data() {
      // 封装查询条件
      let formData = {
        pageNo: this.table1.pagination.current,
        pageSize: this.table1.pagination.pageSize
      }
      // 调用查询数据接口
      this.table1.loading = true
      getAction(this.url.getData, formData).then(res => {
        if (res.success) {
          // 后台查询回来的 total,数据总数量
          this.table1.pagination.total = res.result.total
          // 将查询的数据赋值给 dataSource
          this.table1.dataSource = res.result.records
          // 重置选择
          this.table1.selectedRows = []
        } else {
          this.$error({title: '主表查询失败', content: res.message})
肖超群 authored
202
        }
肖超群 authored
203
204
205
206
207
      }).finally(() => {
        // 这里是无论成功或失败都会执行的方法,在这里关闭loading
        this.table1.loading = false
      })
    },
肖超群 authored
208
肖超群 authored
209
210
211
212
213
    // 查询子表数据
    loadSubData(row) {
      if (row) {
        // 这里一定要做限制,限制不能重复查询,否者会出现死循环
        if (this.table2.currentRowId === row.id) {
肖超群 authored
214
215
          return true
        }
肖超群 authored
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
        this.table2.currentRowId = row.id
        this.loadTable2Data()
        return true
      } else {
        return false
      }
    },
    // 查询子表数据
    loadTable2Data() {
      let table2 = this.table2
      let formData = {
        parentId: table2.currentRowId,
        pageNo: this.table2.pagination.current,
        pageSize: this.table2.pagination.pageSize
      }
      table2.loading = true
      getAction(this.url.getData, formData).then(res => {
        if (res.success) {
          // 将查询的数据赋值给 dataSource
          table2.selectedRows = []
          table2.dataSource = res.result.records
          table2.pagination.total = res.result.total
        } else {
          this.$error({title: '子表查询失败', content: res.message})
肖超群 authored
240
        }
肖超群 authored
241
242
243
244
245
      }).finally(() => {
        // 这里是无论成功或失败都会执行的方法,在这里关闭loading
        table2.loading = false
      })
    },
肖超群 authored
246
247
肖超群 authored
248
249
250
251
252
253
254
255
256
257
258
259
260
    // table1【主表】当选择的行变化时触发的事件
    handleTable1SelectRowChange(event) {
      this.table1.selectedRows = event.selectedRows
      this.subTabs.show = true
      if (this.subTabs.autoExpand) {
        this.subTabs.expand = true
      }
      this.loadSubData(event.selectedRows[0])
    },
    // table2【子表】当选择的行变化时触发的事件
    handleTable2SelectRowChange(event) {
      this.table2.selectedRows = event.selectedRows
    },
肖超群 authored
261
肖超群 authored
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
    handleTable1PageChange(event) {
      // 重新赋值
      this.table1.pagination.current = event.current
      this.table1.pagination.pageSize = event.pageSize
      // 查询数据
      this.loadTable1Data()
    },
    // 当table2【子表】分页参数变化时触发的事件
    handleTable2PageChange(event) {
      // 重新赋值
      this.table2.pagination.current = event.current
      this.table2.pagination.pageSize = event.pageSize
      // 查询数据
      this.loadTable2Data()
    },
肖超群 authored
277
肖超群 authored
278
279
280
    // 展开或收起子表tabs
    handleToggleTabs() {
      this.subTabs.expand = !this.subTabs.expand
肖超群 authored
281
282
    },
肖超群 authored
283
284
285
  },

}
肖超群 authored
286
287
288
</script>

<style lang="less" scoped>
肖超群 authored
289
290
291
292
293
.sub-tabs {
  &.un-expand {
    /deep/ .ant-tabs-content {
      height: 0 !important;
    }
肖超群 authored
294
肖超群 authored
295
296
297
    /deep/ .ant-tabs-bar {
      border-color: transparent !important;
    }
肖超群 authored
298
肖超群 authored
299
300
301
    /deep/ .ant-tabs-ink-bar {
      background-color: transparent !important;
    }
肖超群 authored
302
肖超群 authored
303
304
    /deep/ .ant-tabs-tab {
      display: none !important;
肖超群 authored
305
306
    }
  }
肖超群 authored
307
}
肖超群 authored
308
</style>