JSBCDemo.vue

<template>
  <a-card title="即时保存示例" :bordered="false">
    <!--
      【即时保存大体思路】：
      1. JVxeTable 上必须加 keep-source 属性
      2. 监听 edit-closed事件，这个事件是在编辑完成后触发
      3. 在这个事件里面判断数据是否更改，如果更改了就调用接口进行保存操作
    -->
    <j-vxe-table
      toolbar
      :toolbarConfig="toolbarConfig"

      row-number
      row-selection
      keep-source
      async-remove

      :height="340"
      :loading="loading"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="pagination"

      @save="handleTableSave"
      @remove="handleTableRemove"
      @edit-closed="handleEditClosed"
      @pageChange="handlePageChange"
      @selectRowChange="handleSelectRowChange"
    />
  </a-card>
</template>

<script>
  import { getAction, postAction, putAction } from '@api/manage'
  import { JVXETypes } from '@/components/jeecg/JVxeTable'

  // 即时保存示例
  export default {
    name: 'JSBCDemo',
    data() {
      return {
        // 工具栏的按钮配置
        toolbarConfig: {
          // add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮
          btn: ['add', 'save', 'remove', 'clearSelection']
        },
        // 是否正在加载
        loading: false,
        // 分页器参数
        pagination: {
          // 当前页码
          current: 1,
          // 每页的条数
          pageSize: 200,
          // 可切换的条数
          pageSizeOptions: ['10', '20', '30', '100', '200'],
          // 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
          total: 0,
        },
        // 选择的行
        selectedRows: [],
        // 数据源，控制表格的数据
        dataSource: [],
        // 列配置，控制表格显示的列
        columns: [
          {key: 'num', title: '序号', width: '80px'},
          {
            // 字段key，跟后台数据的字段名匹配
            key: 'ship_name',
            // 列的标题
            title: '船名',
            // 列的宽度
            width: '180px',
            // 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
            type: JVXETypes.input
          },
          {key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input},
          {key: 'len', title: '长', width: '80px', type: JVXETypes.input},
          {key: 'ton', title: '吨', width: '120px', defaultValue: 233, type: JVXETypes.input},
          {key: 'payer', title: '付款方', width: '120px', defaultValue: '张三', 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},
        ],
        // 查询url地址
        url: {
          getData: '/mock/vxe/getData',
          // 模拟保存单行数据（即时保存）
          saveRow: '/mock/vxe/immediateSaveRow',
          // 模拟保存整个表格的数据
          saveAll: '/mock/vxe/immediateSaveAll',
        },
      }
    },
    created() {
      this.loadData()
    },
    methods: {

      // 加载数据
      loadData() {
        // 封装查询条件
        let formData = {
          pageNo: this.pagination.current,
          pageSize: this.pagination.pageSize
        }
        // 调用查询数据接口
        this.loading = true
        getAction(this.url.getData, formData).then(res => {
          if (res.success) {
            // 后台查询回来的 total，数据总数量
            this.pagination.total = res.result.total
            // 将查询的数据赋值给 dataSource
            this.dataSource = res.result.records
            // 重置选择
            this.selectedRows = []
          } else {
            this.$error({title: '主表查询失败', content: res.message})
          }
        }).finally(() => {
          // 这里是无论成功或失败都会执行的方法，在这里关闭loading
          this.loading = false
        })
      },

      // 【整体保存】点击保存按钮时触发的事件
      handleTableSave({$table, target}) {
        // 校验整个表格
        $table.validate().then((errMap) => {
          // 校验通过
          if (!errMap) {
            // 获取所有数据
            let tableData = target.getTableData()
            console.log('当前保存的数据是：', tableData)
            // 获取新增的数据
            let newData = target.getNewData()
            console.log('-- 新增的数据：', newData)
            // 获取删除的数据
            let deleteData = target.getDeleteData()
            console.log('-- 删除的数据：', deleteData)

            // 【模拟保存】
            this.loading = true
            postAction(this.url.saveAll, tableData).then(res => {
              if (res.success) {
                this.$message.success(`保存成功！`)
              } else {
                this.$message.warn(`保存失败：` + res.message)
              }
            }).finally(() => {
              this.loading = false
            })
          }
        })
      },

      // 触发单元格删除事件
      handleTableRemove(event) {

        // 把 event.deleteRows 传给后台进行删除（注意：这里不会传递前端逻辑新增的数据，因为不需要请求后台删除）
        console.log('待删除的数据: ', event.deleteRows)
        // 也可以只传ID，因为可以根据ID删除
        let deleteIds = event.deleteRows.map(row => row.id)
        console.log('待删除的数据ids: ', deleteIds)

        // 模拟请求后台删除
        this.loading = true
        window.setTimeout(() => {
          this.loading = false
          this.$message.success('删除成功')
          // 假设后台返回删除成功，必须要调用 confirmRemove() 方法，才会真正在表格里移除（会同时删除选中的逻辑新增的数据）
          event.confirmRemove()
        }, 1000)
      },

      // 单元格编辑完成之后触发的事件
      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)
              console.log('即时保存数据：', row)
              putAction(this.url.saveRow, row).then(res => {
                if (res.success) {
                  this.$message.success(`"${column.title}"保存成功！`)
                  // 局部更新单元格为已保存状态
                  $table.reloadRow(row, null, field)
                } else {
                  this.$message.warn(`"${column.title}"保存失败：` + res.message)
                }
              }).finally(() => {
                hideLoading()
              })
            }
          })
        }
      },

      // 当分页参数变化时触发的事件
      handlePageChange(event) {
        // 重新赋值
        this.pagination.current = event.current
        this.pagination.pageSize = event.pageSize
        // 查询数据
        this.loadData()
      },

      // 当选择的行变化时触发的事件
      handleSelectRowChange(event) {
        this.selectedRows = event.selectedRows
      },

    },
  }
</script>

<style scoped>

</style>