{"version":3,"sources":["webpack:///./src/views/jeecg/JVxeDemo/demo/JSBCDemo.vue?91a9","webpack:///src/views/jeecg/JVxeDemo/demo/JSBCDemo.vue","webpack:///./src/views/jeecg/JVxeDemo/demo/JSBCDemo.vue?aa73","webpack:///./src/views/jeecg/JVxeDemo/demo/JSBCDemo.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","attrs","toolbarConfig","loading","columns","dataSource","pagination","on","handleTableSave","handleTableRemove","handleEditClosed","handlePageChange","handleSelectRowChange","staticRenderFns","component"],"mappings":"uHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,SAAS,CAACE,MAAM,CAAC,MAAQ,SAAS,UAAW,IAAQ,CAACF,EAAG,cAAc,CAACE,MAAM,CAAC,QAAU,GAAG,cAAgBN,EAAIO,cAAc,aAAa,GAAG,gBAAgB,GAAG,cAAc,GAAG,eAAe,GAAG,OAAS,IAAI,QAAUP,EAAIQ,QAAQ,QAAUR,EAAIS,QAAQ,WAAaT,EAAIU,WAAW,WAAaV,EAAIW,YAAYC,GAAG,CAAC,KAAOZ,EAAIa,gBAAgB,OAASb,EAAIc,kBAAkB,cAAcd,EAAIe,iBAAiB,WAAaf,EAAIgB,iBAAiB,gBAAkBhB,EAAIiB,0BAA0B,IACxkBC,EAAkB,G,wBCoCtB,GACE,KAAF,WACE,KAFF,WAGI,MAAJ,CAEM,cAAN,CAEQ,IAAR,0CAGM,SAAN,EAEM,WAAN,CAEQ,QAAR,EAEQ,SAAR,IAEQ,gBAAR,6BAEQ,MAAR,GAGM,aAAN,GAEM,WAAN,GAEM,QAAN,CACA,CAAQ,IAAR,MAAQ,MAAR,KAAQ,MAAR,QACA,CAEQ,IAAR,YAEQ,MAAR,KAEQ,MAAR,QAEQ,KAAR,cAEA,CAAQ,IAAR,OAAQ,MAAR,KAAQ,MAAR,OAAQ,KAAR,cACA,CAAQ,IAAR,MAAQ,MAAR,IAAQ,MAAR,OAAQ,KAAR,cACA,CAAQ,IAAR,MAAQ,MAAR,IAAQ,MAAR,QAAQ,aAAR,IAAQ,KAAR,cACA,CAAQ,IAAR,QAAQ,MAAR,MAAQ,MAAR,QAAQ,aAAR,KAAQ,KAAR,cACA,CAAQ,IAAR,QAAQ,MAAR,IAAQ,MAAR,QACA,CACQ,IAAR,UACQ,MAAR,KAGQ,SAAR,QACQ,KAAR,cAEA,CAAQ,IAAR,QAAQ,MAAR,KAAQ,MAAR,QAAQ,KAAR,eAGM,IAAN,CACQ,QAAR,oBAEQ,QAAR,6BAEQ,QAAR,gCAIE,QAhEF,WAiEI,KAAJ,YAEE,QAAF,CAGI,SAHJ,WAGM,IAAN,OAEA,GACQ,OAAR,wBACQ,SAAR,0BAGM,KAAN,WACM,OAAN,OAAM,CAAN,sCACA,WAEU,EAAV,gCAEU,EAAV,4BAEU,EAAV,iBAEU,EAAV,QAAY,MAAZ,SAAY,QAAZ,eAEA,oBAEQ,EAAR,eAKI,gBA7BJ,YA6BM,IAAN,6BAEM,EAAN,6BAEQ,IAAR,GAEU,IAAV,mBAGA,eAGA,kBAIU,EAAV,WACU,OAAV,OAAU,CAAV,mCACA,UACc,EAAd,0BAEc,EAAd,oCAEA,oBACY,EAAZ,mBAOI,kBA5DJ,SA4DA,GAAM,IAAN,OAKA,8BAAQ,OAAR,QAIM,KAAN,WACM,OAAN,uBACQ,EAAR,WACQ,EAAR,yBAEQ,EAAR,kBACA,MAII,iBA/EJ,SA+EA,GAAM,IAAN,OACA,8BAEA,aACA,KAEA,sBAEQ,EAAR,8BAEU,IAAV,GAEY,IAAZ,oDAEY,OAAZ,OAAY,CAAZ,mCACA,WACgB,EAAhB,+CAEgB,EAAhB,qBAEgB,EAAhB,yDAEA,oBACc,YAQV,iBA9GJ,SA8GA,GAEM,KAAN,6BACM,KAAN,+BAEM,KAAN,YAII,sBAvHJ,SAuHA,GACM,KAAN,+BChO+X,I,YCO3XC,EAAY,eACd,EACApB,EACAmB,GACA,EACA,KACA,WACA,MAIa,aAAAC,E","file":"js/chunk-2d225006.cd405049.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('a-card',{attrs:{\"title\":\"即时保存示例\",\"bordered\":false}},[_c('j-vxe-table',{attrs:{\"toolbar\":\"\",\"toolbarConfig\":_vm.toolbarConfig,\"row-number\":\"\",\"row-selection\":\"\",\"keep-source\":\"\",\"async-remove\":\"\",\"height\":340,\"loading\":_vm.loading,\"columns\":_vm.columns,\"dataSource\":_vm.dataSource,\"pagination\":_vm.pagination},on:{\"save\":_vm.handleTableSave,\"remove\":_vm.handleTableRemove,\"edit-closed\":_vm.handleEditClosed,\"pageChange\":_vm.handlePageChange,\"selectRowChange\":_vm.handleSelectRowChange}})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <a-card title=\"即时保存示例\" :bordered=\"false\">\n    <!--\n      【即时保存大体思路】：\n      1. JVxeTable 上必须加 keep-source 属性\n      2. 监听 edit-closed事件，这个事件是在编辑完成后触发\n      3. 在这个事件里面判断数据是否更改，如果更改了就调用接口进行保存操作\n    -->\n    <j-vxe-table\n      toolbar\n      :toolbarConfig=\"toolbarConfig\"\n\n      row-number\n      row-selection\n      keep-source\n      async-remove\n\n      :height=\"340\"\n      :loading=\"loading\"\n      :columns=\"columns\"\n      :dataSource=\"dataSource\"\n      :pagination=\"pagination\"\n\n      @save=\"handleTableSave\"\n      @remove=\"handleTableRemove\"\n      @edit-closed=\"handleEditClosed\"\n      @pageChange=\"handlePageChange\"\n      @selectRowChange=\"handleSelectRowChange\"\n    />\n  </a-card>\n</template>\n\n<script>\n  import { getAction, postAction, putAction } from '@api/manage'\n  import { JVXETypes } from '@/components/jeecg/JVxeTable'\n\n  // 即时保存示例\n  export default {\n    name: 'JSBCDemo',\n    data() {\n      return {\n        // 工具栏的按钮配置\n        toolbarConfig: {\n          // add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮\n          btn: ['add', 'save', 'remove', 'clearSelection']\n        },\n        // 是否正在加载\n        loading: false,\n        // 分页器参数\n        pagination: {\n          // 当前页码\n          current: 1,\n          // 每页的条数\n          pageSize: 200,\n          // 可切换的条数\n          pageSizeOptions: ['10', '20', '30', '100', '200'],\n          // 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）\n          total: 0,\n        },\n        // 选择的行\n        selectedRows: [],\n        // 数据源，控制表格的数据\n        dataSource: [],\n        // 列配置，控制表格显示的列\n        columns: [\n          {key: 'num', title: '序号', width: '80px'},\n          {\n            // 字段key，跟后台数据的字段名匹配\n            key: 'ship_name',\n            // 列的标题\n            title: '船名',\n            // 列的宽度\n            width: '180px',\n            // 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框\n            type: JVXETypes.input\n          },\n          {key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input},\n          {key: 'len', title: '长', width: '80px', type: JVXETypes.input},\n          {key: 'ton', title: '吨', width: '120px', defaultValue: 233, type: JVXETypes.input},\n          {key: 'payer', title: '付款方', width: '120px', defaultValue: '张三', type: JVXETypes.input},\n          {key: 'count', title: '数', width: '40px'},\n          {\n            key: 'company',\n            title: '公司',\n            // 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列\n            // 如果要做占满表格的列可以这么写\n            minWidth: '180px',\n            type: JVXETypes.input\n          },\n          {key: 'trend', title: '动向', width: '120px', type: JVXETypes.input},\n        ],\n        // 查询url地址\n        url: {\n          getData: '/mock/vxe/getData',\n          // 模拟保存单行数据（即时保存）\n          saveRow: '/mock/vxe/immediateSaveRow',\n          // 模拟保存整个表格的数据\n          saveAll: '/mock/vxe/immediateSaveAll',\n        },\n      }\n    },\n    created() {\n      this.loadData()\n    },\n    methods: {\n\n      // 加载数据\n      loadData() {\n        // 封装查询条件\n        let formData = {\n          pageNo: this.pagination.current,\n          pageSize: this.pagination.pageSize\n        }\n        // 调用查询数据接口\n        this.loading = true\n        getAction(this.url.getData, formData).then(res => {\n          if (res.success) {\n            // 后台查询回来的 total，数据总数量\n            this.pagination.total = res.result.total\n            // 将查询的数据赋值给 dataSource\n            this.dataSource = res.result.records\n            // 重置选择\n            this.selectedRows = []\n          } else {\n            this.$error({title: '主表查询失败', content: res.message})\n          }\n        }).finally(() => {\n          // 这里是无论成功或失败都会执行的方法，在这里关闭loading\n          this.loading = false\n        })\n      },\n\n      // 【整体保存】点击保存按钮时触发的事件\n      handleTableSave({$table, target}) {\n        // 校验整个表格\n        $table.validate().then((errMap) => {\n          // 校验通过\n          if (!errMap) {\n            // 获取所有数据\n            let tableData = target.getTableData()\n            console.log('当前保存的数据是：', tableData)\n            // 获取新增的数据\n            let newData = target.getNewData()\n            console.log('-- 新增的数据：', newData)\n            // 获取删除的数据\n            let deleteData = target.getDeleteData()\n            console.log('-- 删除的数据：', deleteData)\n\n            // 【模拟保存】\n            this.loading = true\n            postAction(this.url.saveAll, tableData).then(res => {\n              if (res.success) {\n                this.$message.success(`保存成功！`)\n              } else {\n                this.$message.warn(`保存失败：` + res.message)\n              }\n            }).finally(() => {\n              this.loading = false\n            })\n          }\n        })\n      },\n\n      // 触发单元格删除事件\n      handleTableRemove(event) {\n\n        // 把 event.deleteRows 传给后台进行删除（注意：这里不会传递前端逻辑新增的数据，因为不需要请求后台删除）\n        console.log('待删除的数据: ', event.deleteRows)\n        // 也可以只传ID，因为可以根据ID删除\n        let deleteIds = event.deleteRows.map(row => row.id)\n        console.log('待删除的数据ids: ', deleteIds)\n\n        // 模拟请求后台删除\n        this.loading = true\n        window.setTimeout(() => {\n          this.loading = false\n          this.$message.success('删除成功')\n          // 假设后台返回删除成功，必须要调用 confirmRemove() 方法，才会真正在表格里移除（会同时删除选中的逻辑新增的数据）\n          event.confirmRemove()\n        }, 1000)\n      },\n\n      // 单元格编辑完成之后触发的事件\n      handleEditClosed(event) {\n        let {$table, row, column} = event\n\n        let field = column.property\n        let cellValue = row[field]\n        // 判断单元格值是否被修改\n        if ($table.isUpdateByRow(row, field)) {\n          // 校验当前行\n          $table.validate(row).then((errMap) => {\n            // 校验通过\n            if (!errMap) {\n              // 【模拟保存】\n              let hideLoading = this.$message.loading(`正在保存\"${column.title}\"`, 0)\n              console.log('即时保存数据：', row)\n              putAction(this.url.saveRow, row).then(res => {\n                if (res.success) {\n                  this.$message.success(`\"${column.title}\"保存成功！`)\n                  // 局部更新单元格为已保存状态\n                  $table.reloadRow(row, null, field)\n                } else {\n                  this.$message.warn(`\"${column.title}\"保存失败：` + res.message)\n                }\n              }).finally(() => {\n                hideLoading()\n              })\n            }\n          })\n        }\n      },\n\n      // 当分页参数变化时触发的事件\n      handlePageChange(event) {\n        // 重新赋值\n        this.pagination.current = event.current\n        this.pagination.pageSize = event.pageSize\n        // 查询数据\n        this.loadData()\n      },\n\n      // 当选择的行变化时触发的事件\n      handleSelectRowChange(event) {\n        this.selectedRows = event.selectedRows\n      },\n\n    },\n  }\n</script>\n\n<style scoped>\n\n</style>","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./JSBCDemo.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./JSBCDemo.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./JSBCDemo.vue?vue&type=template&id=1ee4436f&scoped=true&\"\nimport script from \"./JSBCDemo.vue?vue&type=script&lang=js&\"\nexport * from \"./JSBCDemo.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"1ee4436f\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}