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

<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>
  import { getAction } from '@api/manage'
  import { JVXETypes } from '@/components/jeecg/JVxeTable'

  // 无痕刷新示例
  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',
        },
        // 是否启用日历刷新效果
        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})
          }
        }).finally(() => {
          this.loading = false
        })
      },

      // 单元格编辑完成之后触发的事件
      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)
            }
          })
        }
      },

    },
  }
</script>

<style scoped>

</style>