123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655 |
- <template>
- <div id="handsontable" v-loading="isLoading">
- <div style="overflow:hidden;margin-bottom:10px;margin-right:20px;height:50px;">
- <el-button @click="undo" style="float:right;margin-top:5px;margin-left:10px;">撤回</el-button>
- <el-button @click="reset" style="float:right;margin-top:5px;">刷新</el-button>
- <el-button @click="addSp" style="float:right;margin-top:5px;">添加</el-button>
- </div>
- <div v-show="main &&main.length" :id="id"></div>
- <div class="center" v-show="!main || !main.length" style="height: 400px;padding-top:140px;box-sizing:border-box;">
- <i class="iconwushuju iconfont"></i>
- 暂无数据
- </div>
- <!-- <add-business :buildMess="buildMess" :dialog="dialog"></add-business> -->
- <div class="right" v-show="main && main.length">
- <my-pagination :page="page" @change="pageChange"></my-pagination>
- </div>
- <!-- 二维码弹窗 -->
- <qrcode :dialog="dialog" :qrcodeUrl="qrcodeUrl" :addBody="true" ref="qrcode"></qrcode>
- </div>
- </template>
- <script>
- // 引用handsontable插件
- import "@/assets/js/chosen.jquery.min";
- import tools from "@/utils/scan/tools";
- import "@/assets/js/handsontable-chosen-editor";
- import myPagination from "@/components/common/myPagination";
- import addBusiness from "@/components/business_space/dialogs/addDialog/businessDialog"
- import showTools from "@/utils/handsontable/notShow"
- import Handsontable from "handsontable-pro"
- import 'handsontable-pro/dist/handsontable.full.css'
- import zhCN from 'handsontable-pro/languages/zh-CN';
- import qrcode from "@/components/ledger/lib/qrcode";
- console.log(Handsontable,"Handsontable")
- import {
- updateBusiness,
- createBusiness,
- createBusinessList,
- delManySpace,
- isSpaceBuss
- } from "@/api/scan/request";
- import {
- mapGetters,
- mapActions
- } from "vuex";
- export default {
- props: {
- id: {
- type: String
- }
- },
- components: {
- qrcode, //二维码页面
- myPagination,
- addBusiness
- },
- computed: {
- ...mapGetters("layout", [
- "projectId",
- "secret",
- "userId"
- ])
- },
- data() {
- return {
- dialog: {
- qrcode: false, //二维码弹窗
- addDevice: false
- },
- qrcodeUrl: "",//二维码图片地址
- headers: null,
- main: null,
- hot: null,
- tableData: [],
- isLoading: true,
- allData: null,
- page: {
- size: 50,
- sizes: [10, 30, 50, 100, 150, 200],
- total: 2,
- currentPage: 1
- },
- param: {
- ProjId: this.projectId, //项目id
- UserId: this.userId, //用户id
- secret: this.secret
- },
- buildMess: null,
- filtersArr: [], //表格数据被过滤后的下标
- copyMain: null, //深拷贝数组
- activeType: {}
- };
- },
- created() {
- this.setData()
- },
- mounted() {},
- methods: {
- setData(){
- this.param.ProjId = this.projectId
- this.param.UserId = this.userId
- this.param.secret = this.secret
- },
- //获取表头
- getHeader(headers, activeTabType) {
- this.headers = headers.map(item => {
- let dataSoucse = item.DataSource
- console.log(dataSoucse)
- if (!dataSoucse) {
- return item
- }
- dataSoucse.map(keys => {
- if (!!keys.Content && keys.Content.length) {
- keys.Content.map(child => {
- dataSoucse.push({
- Code: child.Code,
- Name: child.Name,
- })
- if (!!child.Content && child.Content.length) {
- child.Content.map(node => {
- dataSoucse.push({
- Code: node.Code,
- Name: node.Name,
- })
- })
- }
- })
- }
- })
- return item
- });
- console.log(this.headers, "headers")
- this.activeType = activeTabType
- },
- getData(buildMess) {
- if (!!buildMess) {
- this.buildMess = buildMess;
- }
- let param = {
- id: this.buildMess.code,
- type: ["Sp"],
- data: {
- customInfo: true,
- criteria: {
- floor: this.buildMess.code, // 必填, 指定楼层id
- business_type: this.activeType.code, // 必填, 楼层下某个类型的业务空间PowerSupplyZone, 默认是空字符串
- rel_type: this.activeType.rel_type, // 必填, 指定业务类型的关系类型(参考数据平台),
- // 数字型字符串, 例如: 通用是99
- }
- },
- ProjId: this.param.ProjId,
- secret: this.param.secret
- };
- isSpaceBuss(param).then(res => {
- if (res.data.Result == "success") {
- this.allData = res.data.Content;
- this.page.total = res.data.Count;
- this.getMain(
- this.pagination(this.page.currentPage, this.page.size, this.allData)
- );
- } else {
- this.$message.error("请求错误");
- }
- });
- },
- //获取表格主体内容
- getMain(main) {
- this.main = main;
- if (this.main && this.main.length && this.main[0].id) {
- this.copyMain = tools.deepCopy(this.main);
- }
- this.isLoading = true;
- if (!!this.hot) {
- this.hot.destroy();
- this.hot = null;
- }
- this.$nextTick(() => {
- this.initHot();
- });
- },
- //初始化handsontable组件
- initHot() {
- let id = this.id
- console.log(id)
- var container = document.getElementById(this.id);
- let winHeight = document.documentElement.clientHeight;
- this.hot = new Handsontable(container, {
- data: this.main,
- colHeaders: this.delHeader(this.headers), //表头文案
- columns: this.getType(this.headers), //数据显示格式
- filters: true,
- maxRows: this.main.length,
- height: winHeight - 100 - 50 - 176,
- 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"
- ],
- contextMenu: {
- items: {
- remove_row: {
- name: "删除该业务空间"
- }
- }
- },
- // 事件
- afterChange: this.tdChange, //修改后
- afterFilter: this.trimmedRows, //排序前
- beforeRemoveRow: this.romoveFm, //右键删除
- afterOnCellMouseDown: this.eventClick //鼠标点击
- });
- let pro = document.getElementById("hot-display-license-info");
- if (!!pro) {
- pro.parentNode.removeChild(pro);
- }
- this.isLoading = false;
- },
- //表格中的查看详情
- eventClick(el, rowArr) {
- let filter = this.filtersArr;
- //被筛选过后的数组
- let trimmedArr = this.trimmedRows();
- //是否启用了排序
- let isSort = this.hot.getPlugin("columnSorting").isSorted();
- // debugger
- if (trimmedArr.length && isSort) {
- let sortArr = this.myHotArr.getPlugin("columnSorting").rowsMapper
- .__arrayMap;
- let infos = this.main[trimmedArr[sortArr[rowArr.row]]];
- this.getInfors(infos, rowArr);
- } else if (isSort) {
- //排序后的数组
- let sortArr = this.hot.getPlugin("columnSorting").rowsMapper.__arrayMap;
- let infos = this.main[sortArr[rowArr.row]];
- this.getInfors(infos, rowArr);
- } else if (trimmedArr.length) {
- let infos = this.main[trimmedArr[rowArr.row]];
- this.getInfors(infos, rowArr);
- } else {
- let infos = this.main[rowArr.row];
- this.getInfors(infos, rowArr);
- }
- },
- getInfors(infos, row) {
- let val = this.hot.colToProp(row.col);
- if (val == "point") {
- this.$emit("lookEqu", infos);
- } else if (val == "infos.RoomQRCode") {
- this.qrcodeUrl = this.main[row.row].infos.RoomQRCode
- if (!!this.qrcodeUrl) {
- this.dialog.qrcode = true;
- } else {
- this.$message("此设备没有设备二维码")
- }
- } else {
- return false;
- }
- },
- //表格发生更改
- tdChange(changeData, source) {
- let filter = this.filtersArr;
- if (changeData) {
- let param = this.getParam(changeData, source);
- let data = [];
- for (let i = 0; i < param.length; i++) {
- if (!!param[i].id) {
- data.push(param[i]);
- } else {
- this.createSq(param[i], changeData);
- }
- }
- if (data && data.length) {
- this.updateBusiness(data, changeData);
- }
- }
- },
- //右键删除
- romoveFm(index, amout, physicalRows, source) {
- if (physicalRows && physicalRows.length) {
- let items = [],
- text = null;
- physicalRows.map(item => {
- text = text ?
- this.copyMain[item].infos.RoomName + "、" + text :
- this.copyMain[item].infos.RoomName;
- items.push(this.copyMain[item].id);
- });
- this.$confirm("您正在删除" + text + ", 是否继续?", "提示", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning"
- })
- .then(() => {
- this.delBusiness(items);
- })
- .catch(() => {
- this.hot.loadData(tools.deepCopy(this.copyMain));
- });
- }
- },
- delBusiness(items) {
- let param = {
- ProjId: this.param.ProjId,
- secret: this.param.secret,
- data: {
- criteria: {
- ids: items
- }
- }
- };
- delManySpace(param)
- .then(res => {
- if (res.data.Result == "success") {
- this.$message.success("删除成功");
- this.getData();
- } else {
- this.$message.error("删除失败");
- }
- })
- .catch(() => {
- this.$message.error("请求发生错误");
- });
- },
- // 新建
- createSq(param, change) {
- let seedData = {
- building_id: this.buildMess.buildCode,
- floor_id: this.buildMess.code,
- business_type: this.activeType.code == "GeneralZone" ? null : this.activeType.code,
- infos: {}
- };
- for (let i = 0; i < change.length; i++) {
- let arr = change[i][1].split(".");
- seedData[arr[0]][arr[1]] = [{
- value: change[i][3] != "" ? change[i][3] : null
- }];
- }
- this.createSpace(seedData);
- },
- // 修改
- updateBusiness(data, change) {
- let param = {
- ProjId: this.param.ProjId,
- secret: this.param.secret,
- data: {
- criterias: []
- }
- };
- data.map((item, index) => {
- console.log(change[index][1]);
- let arr = change[index][1].split(".");
- let info = {};
- info[arr[1]] = [{
- value: change[index][3] != "" ? change[index][3] : null
- }];
- param.data.criterias.push({
- id: item.id,
- infos: info
- });
- });
- updateBusiness(param).then(res => {
- console.log(res);
- });
- },
- /** 请求部分 ------------------------------------ */
- createSpace(data) {
- let param = {
- ProjId: this.param.ProjId,
- secret: this.param.secret,
- data: {
- criterias: [data]
- }
- };
- createBusinessList(param).then(res => {
- if (res.data.Result == "success") {
- console.log(this.main);
- this.main.map(item => {
- if (!item.id) {
- item.id = res.data.id;
- item.infos.RoomID = res.data.id;
- item.infos.RoomName = res.data.RoomName;
- }
- });
- this.hot.loadData(this.main);
- this.reset()
- } else {
- this.$message.error("创建发生错误:" + res.data.ResultMsg);
- }
- });
- },
- /**
- * 获取被排序后的数组
- *
- * @param changeData 发生改变的数据
- * @param source 数组
- *
- * @return array 经过排序后或者经过搜索后的数组
- */
- getParam(changeData, source) {
- let param = "";
- //被筛选过后的数组
- let trimmedArr = this.trimmedRows();
- //是否启用了排序
- let isSort = this.hot.getPlugin("columnSorting").isSorted();
- if (trimmedArr.length && isSort) {
- //排序后的数组
- let sortArr = this.hot.getPlugin("columnSorting").rowsMapper.__arrayMap;
- param = changeData.map(item => {
- return this.hot.getSourceDataAtRow(trimmedArr[sortArr[item[0]]]);
- });
- } else if (isSort) {
- //排序后的数组
- let sortArr = this.hot.getPlugin("columnSorting").rowsMapper.__arrayMap;
- param = changeData.map(item => {
- return this.hot.getSourceDataAtRow(sortArr[item[0]]);
- });
- } else if (trimmedArr.length) {
- param = changeData.map(item => {
- return this.hot.getSourceDataAtRow(trimmedArr[item[0]]);
- });
- } else {
- param = changeData.map(item => {
- return this.hot.getSourceDataAtRow(item[0]);
- });
- }
- return param;
- },
- //获取被筛选掉的行号
- trimmedRows() {
- // var plugin = hot.getPlugin('trimRows').trimmedRows;//获取被筛选掉的行号
- var plugin = this.hot.getPlugin("trimRows").trimmedRows;
- let dataLength = this.main.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 || [];
- // var DataArray = new Array();
- // for (var i = 0; i < plugin.length; i++) {
- // // 通过行号获取数据
- // DataArray.push(this.hot.getSourceDataAtRow(plugin[i]));
- // }
- },
- //去除数组中相同的元素
- 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;
- },
- /**
- * 表头文案处理函数
- * @param list header数组数据
- *
- * @return 处理好的文案
- */
- delHeader(list) {
- let arr = tools.copyArr(list)
- // 如果不是只读状态,添加四大厂商选择
- let readArr = ["A1", "A2", "B1", "C5", "D1", "D2", "X", "L", "L1", "L2", "F1", "F2"]
- if (!this.onlyRead) {
- arr = showTools.arrToArr(arr)
- readArr.push("Own")
- }
- let data = showTools.changeHeader(arr, readArr, false, false, true, false, true)
- data.unshift("是否关联平面图", "与空间相关联的设备");
- console.log("header", data)
- return data;
- },
- /**
- * 表头数据处理函数
- * @param arr header数组数据
- *
- * @return 处理好的数据格式
- */
- getType(list) {
- let arr = tools.copyArr(list)
- let data = showTools.showTypes(arr, false, false, true, false)
- data.unshift({
- data: "hasSi",
- renderer: this.myRenderer,
- readOnly: true
- }, {
- data: "point",
- renderer: this.facilityRender,
- readOnly: true
- });
- data = data.filter(item => item);
- console.log(data)
- return data;
- },
- myRenderer(instance, td, row, col, prop, value, cellProperties) {
- if (value) {
- td.innerHTML = "已关联";
- } else {
- td.innerHTML = "未关联";
- }
- return td;
- },
- facilityRender(instance, td, row, col, prop, value, cellProperties) {
- td.style.color = "#409EFF";
- td.style.cursor = "pointer";
- td.innerHTML = "点击查看";
- return td;
- },
- //下拉插件修改
- customDropdownRenderer(
- instance,
- td,
- row,
- col,
- prop,
- value,
- cellProperties
- ) {
- var selectedId;
- var optionsList = cellProperties.chosenOptions.data;
- if (
- typeof optionsList === "undefined" ||
- typeof optionsList.length === "undefined" ||
- !optionsList.length
- ) {
- Handsontable.renderers.TextRenderer(
- instance,
- td,
- row,
- col,
- prop,
- value,
- cellProperties
- );
- return td;
- }
- var values = (value + "").split(",");
- value = [];
- for (var index = 0; index < optionsList.length; index++) {
- if (optionsList[index].content && optionsList[index].content.length) {
- for (let i = 0; i < optionsList[index].content.length; i++) {
- if (
- optionsList[index].content[i] &&
- optionsList[index].content[i].length
- ) {
- for (let j = 0; j < optionsList[index].content[i].length; j++) {
- if (
- values.indexOf(
- optionsList[index].content[i].content[j].code + ""
- ) > -1
- ) {
- selectedId = optionsList[index].content[i].content[j].code;
- value.push(optionsList[index].content[i].content[j].name);
- }
- }
- } else {
- if (
- values.indexOf(optionsList[index].content[i].code + "") > -1
- ) {
- selectedId = optionsList[index].content[i].code;
- value.push(optionsList[index].content[i].name);
- }
- }
- }
- } else {
- if (values.indexOf(optionsList[index].code + "") > -1) {
- selectedId = optionsList[index].code;
- value.push(optionsList[index].name);
- }
- }
- }
- value = value.join(", ");
- Handsontable.renderers.TextRenderer(
- instance,
- td,
- row,
- col,
- prop,
- value,
- cellProperties
- );
- return td;
- },
- /** 页面中的按钮事件--------------------------- */
- addSp() {
- // this.dialog.addDevice = true
- // this.hot.downloadFile()
- // this.hot.getPlugin('exportFile').downloadFile("csv", { columnHeaders: true, exportHiddenRows: true, exportHiddenColumns: true, rowHeaders: true })
- if (this.main && this.main.length && !!this.main[0].id) {
- this.hot.destroy();
- this.hot = null;
- this.main.unshift([]);
- this.getMain(this.main);
- } else {
- if (this.main && this.main.length) {
- this.$message.error("请添加完成后继续添加");
- } else {
- this.main.unshift([]);
- this.getMain(this.main);
- }
- }
- },
- //刷新
- reset() {
- this.getData();
- },
- //撤回操作
- undo() {
- this.hot.undo();
- },
- /** 分页事件------------------------ */
- pageChange() {
- this.getMain(
- this.pagination(this.page.currentPage, this.page.size, this.allData)
- );
- },
- pagination(pageNo, pageSize, array) {
- let offset = (pageNo - 1) * pageSize;
- return offset + pageSize >= array.length ?
- array.slice(offset, array.length) :
- array.slice(offset, offset + pageSize);
- }
- },
- watch: {
- projectId(){
- this.setData()
- this.main = null
- }
- }
- };
- </script>
- <style lang="less" scoped>
- #handsontable {
- .no-data {
- height: 150px;
- line-height: 150px;
- text-align: center;
- color: gray;
- }
- }
- </style>
|