wms / wms4_global · Files

<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>