123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260 |
- <!--
- id: 选填,没有得话给随机id
- settting: handsontable得配置,其中必填data选项
- -->
- <template>
- <div style="height: 100%;width: 100%;">
- <div :id="id"></div>
- </div>
- </template>
- <script>
- import Handsontable from "handsontable-pro"
- import 'handsontable-pro/dist/handsontable.full.css'
- import zhCN from 'handsontable-pro/languages/zh-CN';
- import tools from '@/utils/scan/tools'
- import "@/assets/js/chosen.jquery.min";
- import "@/assets/js/handsontable-chosen-editor";
- import '@/assets/css/chosen.css'
- export default {
- props: {
- id: {
- type: String,
- default: function createRandomId() {
- return (Math.random() * 10000000).toString(16).substr(0, 4) + '-' + (new Date()).getTime() + '-' + Math.random().toString().substr(2, 5);
- }
- },
- // settings: {//必填
- // type: Object
- // }
- },
- data() {
- return {
- hot: null,
- filtersArr: [],
- data: [],
- deepArr: [], //删除存储数组
- }
- },
- created() {},
- mounted() {
- // console.log(handsontable)
- // this.init()
- },
- methods: {
- getElement() {
- return {
- width: document.getElementById(this.id).clientWidth,
- height: document.getElementById(this.id).parentNode.clientHeight
- }
- },
- // afterDocumentKeyDown(e) {
- // this.$emit("keyDown", e)
- // },
- trimmedRows() {
- var plugin = this.hot.getPlugin("trimRows").trimmedRows;
- let dataLength = this.hot.getSourceData().length;
- let dataArr = new Array();
- for (let i = 0; i < dataLength; i++) {
- dataArr.push(i);
- }
- if (plugin.length <= 0) {
- dataArr = undefined;
- } else {
- dataArr = this.array_diff(dataArr, plugin);
- }
- this.filtersArr = dataArr;
- return dataArr || [];
- },
- //去除数组中相同的元素
- array_diff(a, b) {
- for (var i = 0; i < b.length; i++) {
- for (var j = 0; j < a.length; j++) {
- if (a[j] == b[i]) {
- a.splice(j, 1);
- j = j - 1;
- }
- }
- }
- return a;
- },
- //右键删除
- removeFm(index, amout) {
- let delData = tools.differenceArr(this.data, this.deepArr)
- this.$emit("delete", delData)
- },
- //数据发生修改后(失焦)
- tdChange(changeData, source) {
- this.$emit("change", changeData, source)
- },
- /**
- * 获取被排序后的数组
- *
- * @param changeData 发生改变的数据
- * @param source 数组
- *
- * @return array 经过排序后或者经过搜索后的数组
- */
- getParam(changeData, source, hot, trimmedArr) {
- let param = "";
- //被筛选过后的数组
- // let trimmedArr = this.trimmedRows();
- //是否启用了排序
- let isSort = hot.getPlugin("columnSorting").isSorted();
- if (trimmedArr.length && isSort) {
- //排序后的数组
- let sortArr = hot.getPlugin("columnSorting").rowsMapper.__arrayMap;
- param = changeData.map(item => {
- return hot.getSourceDataAtRow(trimmedArr[sortArr[item[0]]]);
- });
- } else if (isSort) {
- //排序后的数组
- let sortArr = hot.getPlugin("columnSorting").rowsMapper.__arrayMap;
- param = changeData.map(item => {
- return hot.getSourceDataAtRow(sortArr[item[0]]);
- });
- } else if (trimmedArr.length) {
- param = changeData.map(item => {
- return hot.getSourceDataAtRow(trimmedArr[item[0]]);
- });
- } else {
- param = changeData.map(item => {
- return hot.getSourceDataAtRow(item[0]);
- });
- }
- return param;
- },
- /**
- *
- * @param {handsontable修改参数} changeData
- * @param {*} source
- * @param {handsontabele实例} hot
- * @param {排序数组} trimmedArr
- *
- * @return 修改数值的前一个对象
- */
- getUnshiftParam(changeData, source, hot, trimmedArr) {
- //是否启用了排序
- let isSort = hot.getPlugin("columnSorting").isSorted();
- if (trimmedArr.length && isSort) {
- //排序后的数组
- let sortArr = hot.getPlugin("columnSorting").rowsMapper.__arrayMap;
- return hot.getSourceDataAtRow(trimmedArr[sortArr[changeData[0][0] - 1]])
- } else if (isSort) {
- //排序后的数组
- let sortArr = hot.getPlugin("columnSorting").rowsMapper.__arrayMap;
- return hot.getSourceDataAtRow(sortArr[changeData[0][0] - 1])
- } else if (trimmedArr.length) {
- //进行了筛选
- return hot.getSourceDataAtRow(trimmedArr[changeData[0][0] - 1])
- } else {
- //没有进行排序和筛选
- return hot.getSourceDataAtRow(changeData[0][0] - 1);
- }
- },
- init(settings) {
- var hotElement = document.getElementById(this.id)
- this.data = settings.data
- this.deepArr = this.deepCopy(settings.data)
- var hotSettings = Object.assign({
- // width: this.getElement().width,
- rowHeaders: true,
- colHeaders: true,
- filters: true,
- height: this.getElement().height,
- columnSorting: true, //添加排序
- sortIndicator: true, //添加排序
- renderAllRows: true,
- autoColumnSize: true,
- language: "zh-CN",
- manualColumnResize: true,
- manualColumnMove: true,
- dropdownMenu: [
- "filter_by_condition",
- "filter_by_value",
- "filter_action_bar"
- ],
- afterOnCellMouseDown: this.tableDown, //鼠标单击
- afterChange: this.tdChange, //修改后
- afterRemoveRow: this.removeFm, //右键删除
- afterFilter: this.trimmedRows, //排序
- // afterDocumentKeyDown: this.afterDocumentKeyDown, //鼠标单击
- }, settings);
- hotSettings.maxRows = settings.maxRows
- if (!!this.hot && this.hot.hasOwnProperty('destroy')) {
- this.hot.destroy();
- this.hot = null
- }
- this.hot = new Handsontable(hotElement, hotSettings);
- // this.hot.view.wt.update('onCellDblClick', (row,cell) => {
- // //Get editor and begin edit mode on current cell (maintain current double click functionality)
- // var activeEditor = this.hot.getActiveEditor();
- // console.log(this.hot,activeEditor)
- // activeEditor.beginEditing();
- // this.onDblClick(activeEditor,row,cell)
- // //Do whatever you want...
- // });
- let pro = document.getElementById("hot-display-license-info");
- if (!!pro) {
- pro.parentNode.removeChild(pro);
- }
- return this.hot
- },
- //双击
- // onDblClick(activeEditor,row,cell){
- // console.log(111,activeEditor,row,cell)
- // },
- tableDown(el, rowArr) {
- if (rowArr.row < 0) {
- return false
- }
- let filter = this.filtersArr;
- //被筛选过后的数组
- let trimmedArr = this.trimmedRows();
- //是否启用了排序
- let isSort = this.hot
- .getPlugin("columnSorting")
- .isSorted();
- let myHotMainArr = this.hot.getSourceData()
- // debugger
- if (trimmedArr.length && isSort) {
- let sortArr = this.hot.getPlugin("columnSorting")
- .rowsMapper.__arrayMap;
- let infos = myHotMainArr[trimmedArr[sortArr[rowArr.row]]];
- this.getInfors(infos, rowArr);
- } else if (isSort) {
- //排序后的数组
- let sortArr = this.hot.getPlugin("columnSorting").rowsMapper.__arrayMap;
- let infos = myHotMainArr[sortArr[rowArr.row]];
- this.getInfors(infos, rowArr);
- } else if (trimmedArr.length) {
- let infos = myHotMainArr[trimmedArr[rowArr.row]];
- this.getInfors(infos, rowArr);
- } else {
- let infos = myHotMainArr[rowArr.row];
- this.getInfors(infos, rowArr);
- }
- },
- getInfors(obj, row) {
- this.$emit("mouseDown", obj, row)
- },
- //工具函数浅复制深拷贝,防止共用存储空间
- deepCopy(obj) {
- var out = [],
- i = 0,
- len = obj.length;
- for (; i < len; i++) {
- if (obj[i] instanceof Array) {
- out[i] = this.deepcopy(obj[i]);
- } else out[i] = obj[i];
- }
- return out;
- }
- }
- }
- </script>
- <style lang="scss">
- .htDropdownMenu:not(.htGhostTable) {
- z-index: 4060;
- }
- </style>
|