handsontable.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
  1. <!--
  2. id: 选填,没有得话给随机id
  3. settting: handsontable得配置,其中必填data选项
  4. -->
  5. <template>
  6. <div style="height: 100%;width: 100%;">
  7. <div :id="id"></div>
  8. </div>
  9. </template>
  10. <script>
  11. import Handsontable from "handsontable-pro"
  12. import 'handsontable-pro/dist/handsontable.full.css'
  13. import zhCN from 'handsontable-pro/languages/zh-CN';
  14. import tools from '@/utils/scan/tools'
  15. import "@/assets/js/chosen.jquery.min";
  16. import "@/assets/js/handsontable-chosen-editor";
  17. import '@/assets/css/chosen.css'
  18. export default {
  19. props: {
  20. id: {
  21. type: String,
  22. default: function createRandomId() {
  23. return (Math.random() * 10000000).toString(16).substr(0, 4) + '-' + (new Date()).getTime() + '-' + Math.random().toString().substr(2, 5);
  24. }
  25. },
  26. // settings: {//必填
  27. // type: Object
  28. // }
  29. },
  30. data() {
  31. return {
  32. hot: null,
  33. filtersArr: [],
  34. data: [],
  35. deepArr: [], //删除存储数组
  36. }
  37. },
  38. created() {},
  39. mounted() {
  40. // console.log(handsontable)
  41. // this.init()
  42. },
  43. methods: {
  44. getElement() {
  45. return {
  46. width: document.getElementById(this.id).clientWidth,
  47. height: document.getElementById(this.id).parentNode.clientHeight
  48. }
  49. },
  50. // afterDocumentKeyDown(e) {
  51. // this.$emit("keyDown", e)
  52. // },
  53. trimmedRows() {
  54. var plugin = this.hot.getPlugin("trimRows").trimmedRows;
  55. let dataLength = this.hot.getSourceData().length;
  56. let dataArr = new Array();
  57. for (let i = 0; i < dataLength; i++) {
  58. dataArr.push(i);
  59. }
  60. if (plugin.length <= 0) {
  61. dataArr = undefined;
  62. } else {
  63. dataArr = this.array_diff(dataArr, plugin);
  64. }
  65. this.filtersArr = dataArr;
  66. return dataArr || [];
  67. },
  68. //去除数组中相同的元素
  69. array_diff(a, b) {
  70. for (var i = 0; i < b.length; i++) {
  71. for (var j = 0; j < a.length; j++) {
  72. if (a[j] == b[i]) {
  73. a.splice(j, 1);
  74. j = j - 1;
  75. }
  76. }
  77. }
  78. return a;
  79. },
  80. //右键删除
  81. removeFm(index, amout) {
  82. let delData = tools.differenceArr(this.data, this.deepArr)
  83. this.$emit("delete", delData)
  84. },
  85. //数据发生修改后(失焦)
  86. tdChange(changeData, source) {
  87. this.$emit("change", changeData, source)
  88. },
  89. /**
  90. * 获取被排序后的数组
  91. *
  92. * @param changeData 发生改变的数据
  93. * @param source 数组
  94. *
  95. * @return array 经过排序后或者经过搜索后的数组
  96. */
  97. getParam(changeData, source, hot, trimmedArr) {
  98. let param = "";
  99. //被筛选过后的数组
  100. // let trimmedArr = this.trimmedRows();
  101. //是否启用了排序
  102. let isSort = hot.getPlugin("columnSorting").isSorted();
  103. if (trimmedArr.length && isSort) {
  104. //排序后的数组
  105. let sortArr = hot.getPlugin("columnSorting").rowsMapper.__arrayMap;
  106. param = changeData.map(item => {
  107. return hot.getSourceDataAtRow(trimmedArr[sortArr[item[0]]]);
  108. });
  109. } else if (isSort) {
  110. //排序后的数组
  111. let sortArr = hot.getPlugin("columnSorting").rowsMapper.__arrayMap;
  112. param = changeData.map(item => {
  113. return hot.getSourceDataAtRow(sortArr[item[0]]);
  114. });
  115. } else if (trimmedArr.length) {
  116. param = changeData.map(item => {
  117. return hot.getSourceDataAtRow(trimmedArr[item[0]]);
  118. });
  119. } else {
  120. param = changeData.map(item => {
  121. return hot.getSourceDataAtRow(item[0]);
  122. });
  123. }
  124. return param;
  125. },
  126. /**
  127. *
  128. * @param {handsontable修改参数} changeData
  129. * @param {*} source
  130. * @param {handsontabele实例} hot
  131. * @param {排序数组} trimmedArr
  132. *
  133. * @return 修改数值的前一个对象
  134. */
  135. getUnshiftParam(changeData, source, hot, trimmedArr) {
  136. //是否启用了排序
  137. let isSort = hot.getPlugin("columnSorting").isSorted();
  138. if (trimmedArr.length && isSort) {
  139. //排序后的数组
  140. let sortArr = hot.getPlugin("columnSorting").rowsMapper.__arrayMap;
  141. return hot.getSourceDataAtRow(trimmedArr[sortArr[changeData[0][0] - 1]])
  142. } else if (isSort) {
  143. //排序后的数组
  144. let sortArr = hot.getPlugin("columnSorting").rowsMapper.__arrayMap;
  145. return hot.getSourceDataAtRow(sortArr[changeData[0][0] - 1])
  146. } else if (trimmedArr.length) {
  147. //进行了筛选
  148. return hot.getSourceDataAtRow(trimmedArr[changeData[0][0] - 1])
  149. } else {
  150. //没有进行排序和筛选
  151. return hot.getSourceDataAtRow(changeData[0][0] - 1);
  152. }
  153. },
  154. init(settings) {
  155. var hotElement = document.getElementById(this.id)
  156. this.data = settings.data
  157. this.deepArr = this.deepCopy(settings.data)
  158. var hotSettings = Object.assign({
  159. // width: this.getElement().width,
  160. rowHeaders: true,
  161. colHeaders: true,
  162. filters: true,
  163. height: this.getElement().height,
  164. columnSorting: true, //添加排序
  165. sortIndicator: true, //添加排序
  166. renderAllRows: true,
  167. autoColumnSize: true,
  168. language: "zh-CN",
  169. manualColumnResize: true,
  170. manualColumnMove: true,
  171. dropdownMenu: [
  172. "filter_by_condition",
  173. "filter_by_value",
  174. "filter_action_bar"
  175. ],
  176. afterOnCellMouseDown: this.tableDown, //鼠标单击
  177. afterChange: this.tdChange, //修改后
  178. afterRemoveRow: this.removeFm, //右键删除
  179. afterFilter: this.trimmedRows, //排序
  180. // afterDocumentKeyDown: this.afterDocumentKeyDown, //鼠标单击
  181. }, settings);
  182. hotSettings.maxRows = settings.maxRows
  183. if (!!this.hot && this.hot.hasOwnProperty('destroy')) {
  184. this.hot.destroy();
  185. this.hot = null
  186. }
  187. this.hot = new Handsontable(hotElement, hotSettings);
  188. // this.hot.view.wt.update('onCellDblClick', (row,cell) => {
  189. // //Get editor and begin edit mode on current cell (maintain current double click functionality)
  190. // var activeEditor = this.hot.getActiveEditor();
  191. // console.log(this.hot,activeEditor)
  192. // activeEditor.beginEditing();
  193. // this.onDblClick(activeEditor,row,cell)
  194. // //Do whatever you want...
  195. // });
  196. let pro = document.getElementById("hot-display-license-info");
  197. if (!!pro) {
  198. pro.parentNode.removeChild(pro);
  199. }
  200. return this.hot
  201. },
  202. //双击
  203. // onDblClick(activeEditor,row,cell){
  204. // console.log(111,activeEditor,row,cell)
  205. // },
  206. tableDown(el, rowArr) {
  207. if (rowArr.row < 0) {
  208. return false
  209. }
  210. let filter = this.filtersArr;
  211. //被筛选过后的数组
  212. let trimmedArr = this.trimmedRows();
  213. //是否启用了排序
  214. let isSort = this.hot
  215. .getPlugin("columnSorting")
  216. .isSorted();
  217. let myHotMainArr = this.hot.getSourceData()
  218. // debugger
  219. if (trimmedArr.length && isSort) {
  220. let sortArr = this.hot.getPlugin("columnSorting")
  221. .rowsMapper.__arrayMap;
  222. let infos = myHotMainArr[trimmedArr[sortArr[rowArr.row]]];
  223. this.getInfors(infos, rowArr);
  224. } else if (isSort) {
  225. //排序后的数组
  226. let sortArr = this.hot.getPlugin("columnSorting").rowsMapper.__arrayMap;
  227. let infos = myHotMainArr[sortArr[rowArr.row]];
  228. this.getInfors(infos, rowArr);
  229. } else if (trimmedArr.length) {
  230. let infos = myHotMainArr[trimmedArr[rowArr.row]];
  231. this.getInfors(infos, rowArr);
  232. } else {
  233. let infos = myHotMainArr[rowArr.row];
  234. this.getInfors(infos, rowArr);
  235. }
  236. },
  237. getInfors(obj, row) {
  238. this.$emit("mouseDown", obj, row)
  239. },
  240. //工具函数浅复制深拷贝,防止共用存储空间
  241. deepCopy(obj) {
  242. var out = [],
  243. i = 0,
  244. len = obj.length;
  245. for (; i < len; i++) {
  246. if (obj[i] instanceof Array) {
  247. out[i] = this.deepcopy(obj[i]);
  248. } else out[i] = obj[i];
  249. }
  250. return out;
  251. }
  252. }
  253. }
  254. </script>
  255. <style lang="scss">
  256. .htDropdownMenu:not(.htGhostTable) {
  257. z-index: 4060;
  258. }
  259. </style>