Blame view

ant-design-vue-jeecg/src/views/jeecg/JVxeDemo/demo/SocketReload.vue 3.54 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
<template>
  <a-card title="无痕刷新示例" :bordered="false">

    <div style="margin-bottom: 8px;">
      <span>启用数据变动特效:</span>
      <a-switch v-model="reloadEffect"/>
    </div>

    <!--
      【即时保存大体思路】:
      1. 该功能依赖于【即时保存】功能,请先看即时保存示例
      2. 必须要有 socket-reload 属性,且设为 true
      3. 必须要有 socket-key 属性,该属性为当前表格的唯一标识,
         系统会自动更新所有 socket-key 相同的表格
      4. 在局部保存 edit-closed 事件中,
         保存成功后调用 socketSendUpdateRow 方法,将当前 row 传递过去即可 (见第 108 行)
    -->
    <j-vxe-table
      ref="table"
      row-number
      row-selection

      keep-source
      socket-reload
      socket-key="demo-socket-reload"
      :reload-effect="reloadEffect"

      :height="340"
      :loading="loading"
      :columns="columns"
      :dataSource="dataSource"
      @edit-closed="handleEditClosed"
    />
  </a-card>
</template>

<script>
肖超群 authored
38
39
import {getAction} from '@api/manage'
import {JVXETypes} from '@/components/jeecg/JVxeTable'
肖超群 authored
40
肖超群 authored
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
// 无痕刷新示例
export default {
  name: 'SocketReload',
  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', type: JVXETypes.input},
        {key: 'len', title: '长', width: '80px', type: JVXETypes.input},
        {key: 'ton', title: '吨', width: '120px', type: JVXETypes.input},
        {key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input},
        {key: 'count', title: '数', width: '40px'},
        {key: 'company', title: '公司', minWidth: '180px', type: JVXETypes.input},
        {key: 'trend', title: '动向', width: '120px', type: JVXETypes.input},
      ],
      // 查询url地址
      url: {
        getData: '/mock/vxe/getData',
肖超群 authored
62
      },
肖超群 authored
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
      // 是否启用日历刷新效果
      reloadEffect: false,
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    // 加载数据
    loadData() {
      let formData = {pageNo: 1, pageSize: 200}
      this.loading = true
      getAction(this.url.getData, formData).then(res => {
        if (res.success) {
          this.dataSource = res.result.records
        } else {
          this.$error({title: '主表查询失败', content: res.message})
肖超群 authored
80
        }
肖超群 authored
81
82
83
84
      }).finally(() => {
        this.loading = false
      })
    },
肖超群 authored
85
肖超群 authored
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
    // 单元格编辑完成之后触发的事件
    handleEditClosed(event) {
      let {$table, row, column} = event

      let field = column.property
      let cellValue = row[field]
      // 判断单元格值是否被修改
      if ($table.isUpdateByRow(row, field)) {
        // 校验当前行
        $table.validate(row).then((errMap) => {
          // 校验通过
          if (!errMap) {
            // 【模拟保存】(此处需要替换成真实的请求)
            let hideLoading = this.$message.loading(`正在保存"${column.title}"`, 0)
            setTimeout(() => {
              hideLoading()
              this.$message.success(`"${column.title}"保存成功!`)
              // 局部更新单元格为已保存状态
              $table.reloadRow(row, null, field)
              // 发送更新消息
              this.$refs.table.socketSendUpdateRow(row)
            }, 555)
          }
        })
      }
肖超群 authored
111
    },
肖超群 authored
112
113
114

  },
}
肖超群 authored
115
116
117
118
119
</script>

<style scoped>

</style>