123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269 |
- <template>
- <div style="height: 100%; width: 100%">
- <div :id="id" style="overflow: auto"></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/old-adm/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)
- );
- },
- },
-
-
-
- },
- data() {
- return {
- hot: null,
- filtersArr: [],
- data: [],
- deepArr: [],
- };
- },
- created() {},
- mounted() {
-
-
- },
- methods: {
- getElement() {
- return {
- width: document.getElementById(this.id).clientWidth,
- height: document.getElementById(this.id).parentNode.clientHeight,
- };
- },
-
-
-
- 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);
- },
-
- getParam(changeData, source, hot, trimmedArr) {
- let param = "";
-
-
-
- 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;
- },
-
- 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(
- {
-
- 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,
-
- },
- settings
- );
- hotSettings.maxRows = settings.maxRows;
- if (!!this.hot && this.hot.hasOwnProperty("destroy")) {
- this.hot.destroy();
- this.hot = null;
- }
- this.hot = new Handsontable(hotElement, hotSettings);
-
-
-
-
-
-
-
-
- let pro = document.getElementById("hot-display-license-info");
- if (!!pro) {
- pro.parentNode.removeChild(pro);
- }
- return this.hot;
- },
-
-
-
-
- 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();
-
- 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="less">
- .htDropdownMenu:not(.htGhostTable) {
- z-index: 4060;
- }
- </style>
|