import-panel.js 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.default = void 0;
  6. var _ui = require("../../../ui");
  7. var _xeUtils = _interopRequireDefault(require("xe-utils"));
  8. var _utils = require("../../../ui/src/utils");
  9. var _log = require("../../../ui/src/log");
  10. function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
  11. const {
  12. getI18n,
  13. getIcon,
  14. globalMixins,
  15. renderEmptyElement
  16. } = _ui.VxeUI;
  17. var _default = exports.default = {
  18. name: 'VxeTableImportPanel',
  19. mixins: [globalMixins.sizeMixin],
  20. props: {
  21. defaultOptions: Object,
  22. storeData: Object
  23. },
  24. components: {
  25. // VxeModal,
  26. // VxeRadio
  27. },
  28. inject: {
  29. $xeTable: {
  30. default: null
  31. }
  32. },
  33. data() {
  34. return {
  35. loading: false
  36. };
  37. },
  38. computed: {
  39. selectName() {
  40. return `${this.storeData.filename}.${this.storeData.type}`;
  41. },
  42. hasFile() {
  43. return this.storeData.file && this.storeData.type;
  44. },
  45. parseTypeLabel() {
  46. const {
  47. storeData
  48. } = this;
  49. const {
  50. type,
  51. typeList
  52. } = storeData;
  53. if (type) {
  54. const selectItem = _xeUtils.default.find(typeList, item => type === item.value);
  55. return selectItem ? selectItem.label : '*.*';
  56. }
  57. return `*.${typeList.map(item => item.value).join(', *.')}`;
  58. }
  59. },
  60. created() {
  61. const $xeTableImportPanel = this;
  62. const VxeUIModalComponent = _ui.VxeUI.getComponent('VxeModal');
  63. const VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton');
  64. const VxeUISelectComponent = _ui.VxeUI.getComponent('VxeSelect');
  65. $xeTableImportPanel.$nextTick(() => {
  66. if (!VxeUIModalComponent) {
  67. (0, _log.errLog)('vxe.error.reqComp', ['vxe-modal']);
  68. }
  69. if (!VxeUIButtonComponent) {
  70. (0, _log.errLog)('vxe.error.reqComp', ['vxe-button']);
  71. }
  72. if (!VxeUISelectComponent) {
  73. (0, _log.errLog)('vxe.error.reqComp', ['vxe-select']);
  74. }
  75. });
  76. },
  77. render(h) {
  78. const $xeTable = this.$parent;
  79. const $xeGrid = $xeTable.$xeGrid;
  80. const $xeGantt = $xeTable.$xeGantt;
  81. const {
  82. hasFile,
  83. loading,
  84. parseTypeLabel,
  85. defaultOptions,
  86. storeData,
  87. selectName
  88. } = this;
  89. const slots = defaultOptions.slots || {};
  90. const topSlot = slots.top;
  91. const bottomSlot = slots.bottom;
  92. const defaultSlot = slots.default;
  93. const footerSlot = slots.footer;
  94. return h('vxe-modal', {
  95. ref: 'modal',
  96. props: {
  97. id: 'VXE_IMPORT_MODAL',
  98. value: storeData.visible,
  99. title: getI18n('vxe.import.impTitle'),
  100. width: 540,
  101. minWidth: 360,
  102. minHeight: 240,
  103. mask: true,
  104. lockView: true,
  105. showFooter: true,
  106. escClosable: true,
  107. maskClosable: true,
  108. showMaximize: true,
  109. resize: true,
  110. loading
  111. },
  112. on: {
  113. input(value) {
  114. storeData.visible = value;
  115. },
  116. show: this.showEvent
  117. },
  118. scopedSlots: {
  119. default: () => {
  120. const params = {
  121. $table: $xeTable,
  122. $grid: $xeGrid,
  123. $gantt: $xeGantt,
  124. options: defaultOptions,
  125. params: defaultOptions.params
  126. };
  127. return h('div', {
  128. class: 'vxe-table-export--panel'
  129. }, [topSlot ? h('div', {
  130. class: 'vxe-table-export--panel-top'
  131. }, $xeTable.callSlot(topSlot, params, h)) : renderEmptyElement(this), h('div', {
  132. class: 'vxe-table-export--panel-body'
  133. }, defaultSlot ? $xeTable.callSlot(defaultSlot, params, h) : [h('table', {
  134. class: 'vxe-table-export--panel-table',
  135. attrs: {
  136. cellspacing: 0,
  137. cellpadding: 0,
  138. border: 0
  139. }
  140. }, [h('tbody', [h('tr', [h('td', getI18n('vxe.import.impFile')), h('td', [hasFile ? h('div', {
  141. class: 'vxe-table-export--selected--file',
  142. attrs: {
  143. title: selectName
  144. }
  145. }, [h('span', selectName), h('i', {
  146. class: getIcon().INPUT_CLEAR,
  147. on: {
  148. click: this.clearFileEvent
  149. }
  150. })]) : h('button', {
  151. ref: 'fileBtn',
  152. class: 'vxe-table-export--select--file',
  153. attrs: {
  154. type: 'button'
  155. },
  156. on: {
  157. click: this.selectFileEvent
  158. }
  159. }, getI18n('vxe.import.impSelect'))])]), h('tr', [h('td', getI18n('vxe.import.impType')), h('td', parseTypeLabel)]), h('tr', [h('td', getI18n('vxe.import.impMode')), h('td', [h('vxe-select', {
  160. props: {
  161. value: defaultOptions.mode,
  162. options: storeData.modeList
  163. },
  164. on: {
  165. modelValue(value) {
  166. defaultOptions.mode = value;
  167. }
  168. }
  169. })])])])])]), bottomSlot ? h('div', {
  170. class: 'vxe-table-export--panel-bottom'
  171. }, $xeTable.callSlot(bottomSlot, params, h)) : renderEmptyElement(this)]);
  172. },
  173. footer: () => {
  174. const params = {
  175. $table: $xeTable,
  176. $grid: $xeGrid,
  177. $gantt: $xeGantt,
  178. options: defaultOptions,
  179. params: defaultOptions.params
  180. };
  181. return h('div', {
  182. class: 'vxe-table-export--panel-footer'
  183. }, footerSlot ? $xeTable.callSlot(footerSlot, params, h) : [h('div', {
  184. class: 'vxe-table-export--panel-btns'
  185. }, [h('vxe-button', {
  186. on: {
  187. click: this.cancelEvent
  188. }
  189. }, getI18n('vxe.import.impCancel')), h('vxe-button', {
  190. props: {
  191. status: 'primary',
  192. disabled: !hasFile || loading
  193. },
  194. on: {
  195. click: this.importEvent
  196. }
  197. }, getI18n('vxe.import.impConfirm'))])]);
  198. }
  199. }
  200. });
  201. },
  202. methods: {
  203. clearFileEvent() {
  204. Object.assign(this.storeData, {
  205. filename: '',
  206. sheetName: '',
  207. type: ''
  208. });
  209. },
  210. selectFileEvent() {
  211. const $xeTable = this.$parent;
  212. $xeTable.readFile(this.defaultOptions).then(params => {
  213. const {
  214. file
  215. } = params;
  216. Object.assign(this.storeData, (0, _utils.parseFile)(file), {
  217. file
  218. });
  219. }).catch(e => e);
  220. },
  221. showEvent() {
  222. this.$nextTick(() => {
  223. const {
  224. $refs
  225. } = this;
  226. const targetElem = $refs.fileBtn;
  227. if (targetElem) {
  228. targetElem.focus();
  229. }
  230. });
  231. },
  232. cancelEvent() {
  233. this.storeData.visible = false;
  234. },
  235. importEvent() {
  236. const $xeTable = this.$parent;
  237. this.loading = true;
  238. $xeTable.importByFile(this.storeData.file, Object.assign({}, $xeTable.importOpts, this.defaultOptions)).then(() => {
  239. this.loading = false;
  240. this.storeData.visible = false;
  241. }).catch(() => {
  242. this.loading = false;
  243. });
  244. }
  245. }
  246. };