handsontable.vue 8.3 KB

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