|
@@ -0,0 +1,430 @@
|
|
|
|
+<template>
|
|
|
|
+ <div id="deviceList">
|
|
|
|
+ <el-row class="right">
|
|
|
|
+ <span style="float:left;">当前选择的分区类型:{{space.spaceName}}</span>
|
|
|
|
+ <el-select v-model="showType" @change="initTable" style="width:125px;margin-right:10px;vertical-align:bottom;">
|
|
|
|
+ <el-option v-for="item in showTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ <span>增加</span>
|
|
|
|
+ <el-input v-model="addNum" style="width:50px;" size="small"></el-input>
|
|
|
|
+ <span>个{{space.spaceName}}</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" class="create_button">创建业务空间</el-button>
|
|
|
|
+ </el-row>
|
|
|
|
+
|
|
|
|
+ <!--二维码弹窗 -->
|
|
|
|
+ <qrcode :dialog="myDialog" :qrcodeUrl="qrcodeUrl" :addBody="true" ref="qrcode"></qrcode>
|
|
|
|
+ <!--上传图片-->
|
|
|
|
+ <upload-img-dialog :read="false" @changeFile="imgChange" :keysArr="imgsArr" :dialog="myDialog" />
|
|
|
|
+ <!-- 不支持的输入方式 -->
|
|
|
|
+ <el-dialog title="临时维护信息点" :visible.sync="myDialog.update" @close="handleCloseUpdate" width="670px">
|
|
|
|
+ <el-row>
|
|
|
|
+ 该信息点未定义对应组件,现在维护数据不确定后续是否可用。如确实需要维护,请点击
|
|
|
|
+ <el-link @click="updateInputShow = true" type="primary" :underline="false">继续维护</el-link>
|
|
|
|
+ 。
|
|
|
|
+ </el-row>
|
|
|
|
+ <el-row style="margin-top:20px;" v-show="updateInputShow">
|
|
|
|
+ <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8}" placeholder="请输入内容"
|
|
|
|
+ v-model="updateInput"></el-input>
|
|
|
|
+ </el-row>
|
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
|
+ <el-button @click="myDialog.update = false">取 消</el-button>
|
|
|
|
+ <el-button type="primary" @click="handleClickUpdate">确 认</el-button>
|
|
|
|
+ </span>
|
|
|
|
+ </el-dialog>
|
|
|
|
+ </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 buildFloor from '@/utils/handsontable/buildFloorData'
|
|
|
|
+
|
|
|
|
+import handsonTable from "@/components/common/handsontable";
|
|
|
|
+import { getDataDictionary, zoneCreate } from "@/api/scan/request";
|
|
|
|
+import { mapGetters, mapActions } from "vuex";
|
|
|
|
+
|
|
|
|
+import qrcode from "@/components/ledger/lib/qrcode";
|
|
|
|
+import uploadImgDialog from "@/components/dialogs/list/uploadImgDialog";
|
|
|
|
+export default {
|
|
|
|
+ components: {
|
|
|
|
+ qrcode, //二维码页面
|
|
|
|
+ uploadImgDialog,
|
|
|
|
+ handsonTable
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ addNum: 1,
|
|
|
|
+ onlyRead: false,
|
|
|
|
+ showTypes: [{ value: "partInfo", label: '隐藏信息点' }, { value: "all", label: '全部' }, { value: "Visible", label: '只看采集信息' }],
|
|
|
|
+ tableHeader: [],
|
|
|
|
+ tableData: session.get("spaceAddData")
|
|
|
|
+ ? session.get("spaceAddData").length
|
|
|
|
+ ? session.get("spaceAddData")
|
|
|
|
+ : [{}]
|
|
|
|
+ : [{}],
|
|
|
|
+ copyTableData: [],
|
|
|
|
+ category: {}, //路由参数
|
|
|
|
+ myDialog: {
|
|
|
|
+ qrcode: false, //二维码弹窗
|
|
|
|
+ uploadImgs: false, //上传单个图片
|
|
|
|
+ update: false,//临时维护信息点
|
|
|
|
+ },
|
|
|
|
+ inputMap: {
|
|
|
|
+ flowBuild: {
|
|
|
|
+ InputMode: 'D1',
|
|
|
|
+ Editable:true,
|
|
|
|
+ InfoPointCode:"flowBuild",
|
|
|
|
+ InfoPointName:"建筑楼层",
|
|
|
|
+ Path:"flowBuild"
|
|
|
|
+ }
|
|
|
|
+ }, //信息点和输入方式映射表
|
|
|
|
+ updateInputShow: false, //是否显示临时维护输入框
|
|
|
|
+ updateInfoPoint: '',//临时维护信息点
|
|
|
|
+ updateInput: '', //临时维护信息点值
|
|
|
|
+ qrcodeUrl: "", //二维码图片地址
|
|
|
|
+ imgsArr: [], //临时保存的图片key数组
|
|
|
|
+ showType: this.$route.query.showType,
|
|
|
|
+ buildFloorData: [],
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ ...mapGetters("layout", ["projectId", "secret", "userId"])
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ this.space = this.$route.query;
|
|
|
|
+ buildFloor.getData(this.buildFloorData)
|
|
|
|
+ this.getTableHeader();
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ // 获取表头数据(初始化表格)
|
|
|
|
+ async getTableHeader() {
|
|
|
|
+ let params = {
|
|
|
|
+ data: {
|
|
|
|
+ Orders: "sort asc, InfoPointName desc",
|
|
|
|
+ PageNumber: 1,
|
|
|
|
+ PageSize: 1000
|
|
|
|
+ },
|
|
|
|
+ type: this.space.spaceType
|
|
|
|
+ };
|
|
|
|
+ await getDataDictionary(params, res => {
|
|
|
|
+ this.tableHeader = res.Content;
|
|
|
|
+ this.tableHeader.forEach(item => {
|
|
|
|
+ if (item.Path && item.InputMode) {
|
|
|
|
+ this.inputMap[item.Path] = item
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ this.initTable();
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ // 创建业务空间数据
|
|
|
|
+ async handleCreateTableData() {
|
|
|
|
+ let newData = this.tableData.filter(item => {
|
|
|
|
+ let keys = Object.keys(item);
|
|
|
|
+ keys.map(key => {
|
|
|
|
+ //将值为空字符串的属性删除
|
|
|
|
+ if (item[key] == "") {
|
|
|
|
+ delete item[key];
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ let newK = Object.keys(item)
|
|
|
|
+ if (newK.length) {
|
|
|
|
+ return item;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ if (!newData.length) {
|
|
|
|
+ this.$message("创建信息为空,请录入信息后再创建!");
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ let flag = false;
|
|
|
|
+ newData.map(item => {
|
|
|
|
+ if (!item.RoomLocalName) {
|
|
|
|
+ flag = true;
|
|
|
|
+ }
|
|
|
|
+ // 处理建筑-楼层
|
|
|
|
+ if (item.flowBuild) {
|
|
|
|
+ let bid = item.flowBuild.split("-");
|
|
|
|
+ item.BuildingId = item.flowBuild.split("-")[0]
|
|
|
|
+ if (bid[1]) {
|
|
|
|
+ item.FloorId = item.flowBuild.split("-")[1]
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ item.ObjectType = this.space.spaceType;
|
|
|
|
+ })
|
|
|
|
+ if (flag) {
|
|
|
|
+ this.$message.info("存在业务空间的本地名称为空,请检查")
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ //待接口修改为关联创建即可修改
|
|
|
|
+ let param = {
|
|
|
|
+ Content: newData
|
|
|
|
+ }
|
|
|
|
+ zoneCreate(param, res => {
|
|
|
|
+ this.$message.success('创建成功')
|
|
|
|
+ session.remove("spaceAddData")
|
|
|
|
+ this.$router.push({
|
|
|
|
+ name: "spacelist",
|
|
|
|
+ params: {
|
|
|
|
+ zone: this.space.spaceType,
|
|
|
|
+ buildFloorSelectd: ['all'],
|
|
|
|
+ isMyTab: '2'
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 删除表格行
|
|
|
|
+ handleDeleteTableRow() {
|
|
|
|
+ this.$message.success("删除成功");
|
|
|
|
+ this.formaTableData();
|
|
|
|
+ },
|
|
|
|
+ // 添加行
|
|
|
|
+ handleAddTableRow() {
|
|
|
|
+ let addRowLength = this.addNum;
|
|
|
|
+ for (let i = 0; i < addRowLength; i++) {
|
|
|
|
+ this.tableData.push({ Checked: 1 });
|
|
|
|
+ }
|
|
|
|
+ this.initTable();
|
|
|
|
+ this.formaTableData();
|
|
|
|
+ },
|
|
|
|
+ //修改
|
|
|
|
+ handleUpdataTable(changeData, source) {
|
|
|
|
+ if (!this.onlyRead && source != 'ObserveChanges.change') {
|
|
|
|
+ this.formaTableData();
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ //保存去掉空字段的新增数据
|
|
|
|
+ formaTableData() {
|
|
|
|
+ let newData = this.tableData.filter(item => {
|
|
|
|
+ let keys = Object.keys(item);
|
|
|
|
+ keys.map(key => {
|
|
|
|
+ //将值为空字符串的属性删除
|
|
|
|
+ if (item[key] == "") {
|
|
|
|
+ delete item[key];
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ if (keys.length && Object.keys(item).length) {
|
|
|
|
+ return item;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ session.set("spaceAddData", newData);
|
|
|
|
+ },
|
|
|
|
+ //格式化表头显示的数据
|
|
|
|
+ formatHeaderData(list) {
|
|
|
|
+ let arr = tools.copyArr(list);
|
|
|
|
+ let data = showTools.headerTextFilter(arr, 'space', this.onlyRead, this.showType, true);
|
|
|
|
+ data.unshift("所属建筑楼层");
|
|
|
|
+ return data;
|
|
|
|
+ },
|
|
|
|
+ formatHeaderType(list) {
|
|
|
|
+ //格式化表头头映射的数据
|
|
|
|
+ let arr = tools.copyArr(list);
|
|
|
|
+ let data = showTools.headerTypeFilter(arr, 'space', this.onlyRead, this.showType, true);
|
|
|
|
+ data.unshift({
|
|
|
|
+ data: "flowBuild",
|
|
|
|
+ renderer: tools.customDropdownRenderer,
|
|
|
|
+ editor: "chosen",
|
|
|
|
+ chosenOptions: {
|
|
|
|
+ data: this.buildFloorData
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ 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: this.onlyRead ? false :{
|
|
|
|
+ items: {
|
|
|
|
+ remove_row: {
|
|
|
|
+ name: "删除业务空间"
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 事件
|
|
|
|
+ afterChange: this.handleUpdataTable, //修改后
|
|
|
|
+ afterFilter: this.trimmedRows, //排序前
|
|
|
|
+ afterRemoveRow: this.handleDeleteTableRow, //右键删除
|
|
|
|
+ afterOnCellMouseDown: this.handleTdClick //鼠标点击
|
|
|
|
+ };
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.tableExample = this.$refs.table.init(settings);
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ //去除数组中相同的元素
|
|
|
|
+ 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;
|
|
|
|
+ },
|
|
|
|
+ //表格点击事件
|
|
|
|
+ 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 = 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 || [];
|
|
|
|
+ },
|
|
|
|
+ getInfors(infos, row) {
|
|
|
|
+ let val = this.tableExample.colToProp(row.col);
|
|
|
|
+ this.row = row.row;
|
|
|
|
+ this.messKey = val;
|
|
|
|
+ let inputData = this.inputMap[val];
|
|
|
|
+ switch (val) {
|
|
|
|
+ //空间二维码图片
|
|
|
|
+ case 'RoomQRCode':
|
|
|
|
+ this.qrcodeUrl = this.tableData[row.row].RoomQRCode;
|
|
|
|
+ if (!!this.qrcodeUrl) {
|
|
|
|
+ this.myDialog.qrcode = true;
|
|
|
|
+ } else {
|
|
|
|
+ this.$message("此空间没有二维码");
|
|
|
|
+ }
|
|
|
|
+ break;
|
|
|
|
+ case 'Pic':
|
|
|
|
+ let Pdata = tools.dataForKey(this.tableData[row.row], val);
|
|
|
|
+ this.imgsArr = Pdata ? Pdata : [];
|
|
|
|
+ this.myDialog.uploadImgs = true;
|
|
|
|
+ break;
|
|
|
|
+ default:
|
|
|
|
+ break;
|
|
|
|
+ }
|
|
|
|
+ if (!this.onlyRead && !inputData.Editable) {
|
|
|
|
+ this.$message("该信息点的值为自动生成,不可人工维护!");
|
|
|
|
+ return false;
|
|
|
|
+ }
|
|
|
|
+ if (!this.onlyRead && showTools.InputModeArr.indexOf(inputData.InputMode) == '-1') {
|
|
|
|
+ this.updateInfoPoint = val;
|
|
|
|
+ this.updateInput = tools.dataForKey(this.tableData[row.row], val);
|
|
|
|
+ this.myDialog.update = true;
|
|
|
|
+ return false;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ //关闭临时维护弹窗回调
|
|
|
|
+ handleCloseUpdate() {
|
|
|
|
+ this.updateInputShow = false
|
|
|
|
+ this.updateInfoPoint = ''
|
|
|
|
+ this.updateInput = ''
|
|
|
|
+ },
|
|
|
|
+ //更新临时维护信息点
|
|
|
|
+ handleClickUpdate() {
|
|
|
|
+ tools.setDataForKey(this.tableData[this.row], this.updateInfoPoint, this.updateInput)
|
|
|
|
+ this.handleUpdataTable([[this.row, this.updateInfoPoint, null, this.updateInput]], "edit")
|
|
|
|
+ this.updateInputShow = false
|
|
|
|
+ this.myDialog.update = false
|
|
|
|
+ this.updateInput = ''
|
|
|
|
+ },
|
|
|
|
+ utilToKey(key, name, data, messName) {
|
|
|
|
+ if (key == name) {
|
|
|
|
+ this.setDataToMain(data[key], messName, this.row);
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ //上传图片弹窗触发事件
|
|
|
|
+ imgChange(keys) {
|
|
|
|
+ this.setDataToMain(keys, 'Pic', this.row);
|
|
|
|
+ },
|
|
|
|
+ //判断是否有值,有值赋值
|
|
|
|
+ setDataToMain(data, key, row) {
|
|
|
|
+ if (!!data && data != "--") {
|
|
|
|
+ if (!!this.tableData[row]) {
|
|
|
|
+ //铭牌照片特殊处理
|
|
|
|
+ tools.setDataForKey(this.tableData[row], key, data)
|
|
|
|
+ // this.tableData[row][key] = data;
|
|
|
|
+ } else {
|
|
|
|
+ this.tableData[row] = {};
|
|
|
|
+ tools.setDataForKey(this.tableData[row], key, data)
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ tools.setDataForKey(this.tableData[row], key, "")
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+};
|
|
|
|
+</script>
|
|
|
|
+<style lang="less" scoped>
|
|
|
|
+#deviceList {
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ height: 100%;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ padding: 10px;
|
|
|
|
+ position: relative;
|
|
|
|
+ .right {
|
|
|
|
+ background: #fff;
|
|
|
|
+ }
|
|
|
|
+ .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: 1;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .create_button {
|
|
|
|
+ margin-top: 10px;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|