|
@@ -1,303 +0,0 @@
|
|
-<template>
|
|
|
|
- <div id="deviceList">
|
|
|
|
- <el-row class="right">
|
|
|
|
- <!-- <span style="float:left;">当前选择的部件类型:{{page.total || '--'}}</span> -->
|
|
|
|
- <span>增加</span>
|
|
|
|
- <el-input v-model="addNum" style="width:40px;" size="small"></el-input>
|
|
|
|
- <span>个租户</span>
|
|
|
|
- <el-button @click="handleAddTableRow">增加</el-button>
|
|
|
|
- </el-row>
|
|
|
|
- <div class="tableBox">
|
|
|
|
- <div class="center middle_sty" style="flex:2;" v-show="tableData && !tableData.length">
|
|
|
|
- <p>
|
|
|
|
- <i class="icon-wushuju iconfont"></i>
|
|
|
|
- 暂无数据
|
|
|
|
- </p>
|
|
|
|
- </div>
|
|
|
|
- <div class="tableLeft" v-show="tableData && tableData.length">
|
|
|
|
- <handson-table ref="table"></handson-table>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <el-row class="center">
|
|
|
|
- <el-button type="primary" size="medium" @click="handleCreateTableData">创建租户</el-button>
|
|
|
|
- </el-row>
|
|
|
|
- </div>
|
|
|
|
-</template>
|
|
|
|
-<script>
|
|
|
|
-import tools from "@/utils/scan/tools"
|
|
|
|
-import handsonUtils from "@/utils/hasontableUtils"
|
|
|
|
-import showTools from "@/utils/handsontable/notShow"
|
|
|
|
-import text from "@/utils/handsontable/mainText"
|
|
|
|
-import session from "@/framework/utils/storage"
|
|
|
|
-
|
|
|
|
-import handsonTable from "@/components/common/handsontable"
|
|
|
|
-import { getRentTableHeader, createRentTableData } from "@/api/scan/request"
|
|
|
|
-import { mapGetters, mapActions } from "vuex";
|
|
|
|
-export default {
|
|
|
|
- components: {
|
|
|
|
- handsonTable
|
|
|
|
- },
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- buildId: null,//建筑id
|
|
|
|
- floorId: null,//楼层id
|
|
|
|
- addNum: 1,
|
|
|
|
- cenoteId: "",//租户类型id
|
|
|
|
- shaftId: "",//要操作的租户id
|
|
|
|
- isTableRightShow: false,
|
|
|
|
- relationids: "",
|
|
|
|
- onlyRead: false,
|
|
|
|
- allMess: true,
|
|
|
|
- isRentSave: false,//新增信息是否保存
|
|
|
|
- tableHeader: [],
|
|
|
|
- tableData: [{}],
|
|
|
|
- copyTableData: [],
|
|
|
|
- assetGroupList: [],
|
|
|
|
- graphyId: null
|
|
|
|
- };
|
|
|
|
- },
|
|
|
|
- computed: {
|
|
|
|
- ...mapGetters("layout", [
|
|
|
|
- "projectId",
|
|
|
|
- "secret",
|
|
|
|
- "userId"
|
|
|
|
- ])
|
|
|
|
- },
|
|
|
|
- created() {
|
|
|
|
- session.set("isRentSave", this.isRentSave)
|
|
|
|
- this.getTableHeader()
|
|
|
|
- },
|
|
|
|
- // watch: {
|
|
|
|
-
|
|
|
|
- // },
|
|
|
|
- methods: {
|
|
|
|
- // 获取表头数据(初始化表格)
|
|
|
|
- async getTableHeader() {
|
|
|
|
- let param = {
|
|
|
|
- ProjId: this.projectId,
|
|
|
|
- secret: this.secret,
|
|
|
|
- data: {
|
|
|
|
- "CollectFlag": this.allMess
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- await getRentTableHeader(param, res => {
|
|
|
|
- this.tableHeader = res.Content
|
|
|
|
- this.initTable()
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- // 创建租户数据
|
|
|
|
- async handleCreateTableData() {
|
|
|
|
- const params = {
|
|
|
|
- ProjId: this.projectId,
|
|
|
|
- secret: this.secret,
|
|
|
|
- data: this.tableData
|
|
|
|
- }
|
|
|
|
- await createRentTableData(params, (res) => {
|
|
|
|
- this.$message.success("添加成功!")
|
|
|
|
- this.isRentSave = true
|
|
|
|
- session.set("isRentSave", this.isRentSave)
|
|
|
|
- this.$router.push({ name: 'rentlist'})
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- // 删除表格行
|
|
|
|
- handleDeleteTableRow() {
|
|
|
|
- this.$message.success("删除成功")
|
|
|
|
- },
|
|
|
|
- // 添加行
|
|
|
|
- handleAddTableRow() {
|
|
|
|
- let addRowLength = this.addNum
|
|
|
|
- for(let i = 0; i < addRowLength; i++){
|
|
|
|
- this.tableData.push({})
|
|
|
|
- }
|
|
|
|
- this.initTable()
|
|
|
|
- },
|
|
|
|
- //修改
|
|
|
|
- handleUpdataTable(changeData, source) {
|
|
|
|
- if (!this.onlyRead) {
|
|
|
|
- if (changeData) {
|
|
|
|
- let trimmedArr = this.trimmedRows();
|
|
|
|
- let param = handsonUtils.getParam(changeData, source, this.tableExample, trimmedArr);
|
|
|
|
- let data = [];
|
|
|
|
- for (let i = 0; i < param.length; i++) {
|
|
|
|
- data.push(param[i]);
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- // 存在data进行修改请求
|
|
|
|
- if (data && data.length) {
|
|
|
|
- data.map((item, index) => {
|
|
|
|
- let key = changeData[index][1]
|
|
|
|
- item[key] = item[key] != ""? item[key]: null
|
|
|
|
- });
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- //关闭右侧关联元空间输入按钮
|
|
|
|
- handleCloseRight() {
|
|
|
|
- this.isTableRightShow = false
|
|
|
|
- },
|
|
|
|
- formatHeaderData(list) {//格式化表头显示的数据
|
|
|
|
- let arr = tools.copyArr(list)
|
|
|
|
- arr.map((item) => {
|
|
|
|
- item.Visible = true
|
|
|
|
- })
|
|
|
|
- let readArr = ["A1", "A2", "B1", "C5", "D1", "D2", "E1", "F1", "F2", "L", "L1", "L2", "M"]
|
|
|
|
- if (!this.onlyRead) {
|
|
|
|
- readArr.push("Own")
|
|
|
|
- }
|
|
|
|
- let data = showTools.changeHeader(arr, readArr, this.onlyRead, false, this.allMess)
|
|
|
|
- // data.unshift("关联的元空间");
|
|
|
|
- return data;
|
|
|
|
- },
|
|
|
|
- formatHeaderType(list) {//格式化表头头映射的数据
|
|
|
|
- let arr = tools.copyArr(list);
|
|
|
|
- arr.map((item) => { //缺少信息点
|
|
|
|
- item.Visible = true
|
|
|
|
- })
|
|
|
|
- let data = showTools.showHeaderTypes(arr, this.onlyRead, false, this.allMess)
|
|
|
|
- // data.unshift({
|
|
|
|
- // data: "SpaceCount",
|
|
|
|
- // readOnly: this.onlyRead
|
|
|
|
- // })
|
|
|
|
- return data;
|
|
|
|
- },
|
|
|
|
- initTable() {//实例化表格
|
|
|
|
- let settings = {
|
|
|
|
- data: this.tableData,
|
|
|
|
- colHeaders: this.formatHeaderData(this.tableHeader),
|
|
|
|
- columns: this.formatHeaderType(this.tableHeader),
|
|
|
|
- rowHeights: 30,
|
|
|
|
- maxRows: this.tableData.length,
|
|
|
|
- contextMenu: {
|
|
|
|
- items: {
|
|
|
|
- remove_row: {
|
|
|
|
- name: "删除租户"
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- // 事件
|
|
|
|
- afterChange: this.handleUpdataTable, //修改后
|
|
|
|
- afterFilter: this.trimmedRows, //排序前
|
|
|
|
- afterRemoveRow: this.handleDeleteTableRow, //右键删除
|
|
|
|
- afterOnCellMouseDown: this.handleTdClick //鼠标点击
|
|
|
|
- };
|
|
|
|
- this.$nextTick(() => {
|
|
|
|
- console.log(this.$refs.table);
|
|
|
|
- this.tableExample = this.$refs.table.init(settings);
|
|
|
|
- });
|
|
|
|
- },
|
|
|
|
- //获取到了正确的信息
|
|
|
|
- getInfors(infos, row) {
|
|
|
|
- //其他的开始判断
|
|
|
|
- let val = this.tableExample.colToProp(row.col);
|
|
|
|
- this.row = row.row //要操作的列号
|
|
|
|
- this.messKey = val //要操作的列类型
|
|
|
|
- this.shaftId = infos.ShaftID //要操作的数据id
|
|
|
|
- //点击关联的元空间
|
|
|
|
- // if (val === "SpaceCount") {
|
|
|
|
- // this.isTableRightShow = true;
|
|
|
|
- // }
|
|
|
|
- },
|
|
|
|
- //表格点击事件
|
|
|
|
- handleTdClick(el, rowArr) {
|
|
|
|
- //点击的是表头
|
|
|
|
- if (rowArr.row < 0) {
|
|
|
|
- return;
|
|
|
|
- }
|
|
|
|
- //被筛选过后的数组
|
|
|
|
- let trimmedArr = this.trimmedRows();
|
|
|
|
- //是否启用了排序
|
|
|
|
- let isSort = this.tableExample.getPlugin("columnSorting").isSorted();
|
|
|
|
- if (trimmedArr.length && isSort) {
|
|
|
|
- let sortArr = this.myHotArr.getPlugin("columnSorting").rowsMapper
|
|
|
|
- .__arrayMap;
|
|
|
|
- let infos = this.tableData[trimmedArr[sortArr[rowArr.row]]];
|
|
|
|
- this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
|
|
|
|
- } else if (isSort) {
|
|
|
|
- //排序后的数组
|
|
|
|
- let sortArr = this.tableExample.getPlugin("columnSorting").rowsMapper.__arrayMap;
|
|
|
|
- let infos = this.tableData[sortArr[rowArr.row]];
|
|
|
|
- this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
|
|
|
|
- } else if (trimmedArr.length) {
|
|
|
|
- let infos = this.tableData[trimmedArr[rowArr.row]];
|
|
|
|
- this.getInfors(infos, { row: trimmedArr[rowArr.row], col: rowArr.col });
|
|
|
|
- } else {
|
|
|
|
- let infos = this.tableData[rowArr.row];
|
|
|
|
- this.getInfors(infos, rowArr);
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- //获取被筛选掉的行号
|
|
|
|
- trimmedRows() {
|
|
|
|
- // var plugin = hot.getPlugin('trimRows').trimmedRows;//获取被筛选掉的行号
|
|
|
|
- var plugin = this.tableExample.getPlugin("trimRows").trimmedRows;
|
|
|
|
- let dataLength = this.tableData.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);
|
|
|
|
- }
|
|
|
|
- return dataArr || [];
|
|
|
|
- // var DataArray = new Array();
|
|
|
|
-
|
|
|
|
- // for (var i = 0; i < plugin.length; i++) {
|
|
|
|
- // // 通过行号获取数据
|
|
|
|
- // DataArray.push(this.tableExample.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;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-};
|
|
|
|
-</script>
|
|
|
|
-<style lang="less" scoped>
|
|
|
|
-#deviceList {
|
|
|
|
- overflow: hidden;
|
|
|
|
- height: 100%;
|
|
|
|
- background-color: #f6f6f6;
|
|
|
|
- position: relative;
|
|
|
|
- .search-header {
|
|
|
|
- overflow: hidden;
|
|
|
|
- padding:0 10px 10px 10px;
|
|
|
|
- border-bottom: 1px solid #bcbcbc;
|
|
|
|
- }
|
|
|
|
- .tableBox {
|
|
|
|
- display: flex;
|
|
|
|
- height: calc(100% - 100px);
|
|
|
|
- margin-top: 10px;
|
|
|
|
- .tableLeft {
|
|
|
|
- flex: 2;
|
|
|
|
- }
|
|
|
|
- .tableRight {
|
|
|
|
- flex: 1;
|
|
|
|
- // display: none;
|
|
|
|
- border-left: 1px solid #dadada;
|
|
|
|
- padding: 5px 15px;
|
|
|
|
- margin-right: 5px;
|
|
|
|
- box-shadow: 0px 1px 5px 0px rgba(59, 66, 84, 0.15);
|
|
|
|
- .table_right_box::after{
|
|
|
|
- display: block;
|
|
|
|
- content: "";
|
|
|
|
- clear: both;
|
|
|
|
- }
|
|
|
|
- .close_right {
|
|
|
|
- float: right;
|
|
|
|
- cursor: pointer;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-</style>
|
|
|