index.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485
  1. <template>
  2. <div id="deviceList">
  3. <!-- <div class="search-header">
  4. <floor-cascader @change="changeFloor"></floor-cascader>
  5. </div> -->
  6. <el-row class="right">
  7. <span style="float:left;">当前筛选条件下共{{page.total || '--'}}租户</span>
  8. <el-select v-model="onlyRead" @change="getTableHeader" style="width:100px;margin-right:10px;vertical-align:bottom;">
  9. <el-option
  10. v-for="item in options"
  11. :key="item.value"
  12. :label="item.label"
  13. :value="item.value">
  14. </el-option>
  15. </el-select>
  16. <div v-show="onlyRead" style="width:200px;display:inline-block;text-align:left;color:gray;">
  17. <span>只看要采集的信息</span>
  18. <el-checkbox v-model="allMess" @change="getTableHeader"></el-checkbox>
  19. </div>
  20. <el-button @click="handleCreateTableData">添加租户</el-button>
  21. <el-button @click="getTableHeader">刷新</el-button>
  22. <el-button v-show="!onlyRead" @click="undo">撤销</el-button>
  23. </el-row>
  24. <div class="tableBox">
  25. <div class="center middle_sty" style="flex:2;" v-show="tableData && !tableData.length">
  26. <p>
  27. <i class="iconwushuju iconfont"></i>
  28. 暂无数据
  29. </p>
  30. </div>
  31. <div class="tableLeft" v-show="tableData && tableData.length">
  32. <handson-table ref="table"></handson-table>
  33. </div>
  34. <div class="tableRight">
  35. <div v-show="isTableRightShow">
  36. <div class="table_right_box"><span class="iconfont close_right" @click="handleCloseRight">&#xe66b;</span></div>
  37. <h5>管理租赁空间</h5>
  38. <p style="margin-bottom: 10px;">以下为关联的业务空间id</p>
  39. <el-input
  40. type="textarea"
  41. :autosize="{ minRows: 6, maxRows: 10}"
  42. :disabled="onlyRead"
  43. placeholder="请输入业务空间id,以“,”分割"
  44. v-model="roomId">
  45. </el-input>
  46. <el-row class="right" v-show="!onlyRead">
  47. <el-button @click="handleCloseRight">取消</el-button>
  48. <el-button type="primary" @click="saveSpaceList">保存</el-button>
  49. </el-row>
  50. </div>
  51. </div>
  52. </div>
  53. <el-pagination
  54. class="right"
  55. v-show="tableData && tableData.length"
  56. @size-change="handleSizeChange"
  57. @current-change="handleCurrentChange"
  58. :current-page="page.pageNumber"
  59. :page-sizes="page.pageSizes"
  60. :page-size="page.pageSize"
  61. layout="total, sizes, prev, pager, next, jumper"
  62. :total="page.total">
  63. </el-pagination>
  64. </div>
  65. </template>
  66. <script>
  67. import tools from "@/utils/scan/tools"
  68. import handsonUtils from "@/utils/hasontableUtils"
  69. import showTools from "@/utils/handsontable/notShow"
  70. import text from "@/utils/handsontable/mainText"
  71. import floorCascader from "@/components/ledger/lib/floorCascader"
  72. import handsonTable from "@/components/common/handsontable"
  73. import { getRentTableHeader, getRentTableData, updataRentTableData, deleteRentTableData, saveRentRelateSpace } from "@/api/scan/request"
  74. import { mapGetters, mapActions } from "vuex";
  75. export default {
  76. components: {
  77. floorCascader,
  78. handsonTable
  79. },
  80. data() {
  81. return {
  82. buildId: null,//建筑id
  83. floorId: null,//楼层id
  84. tenantID: "",//要操作的租户id
  85. isTableRightShow: false,
  86. roomId: "",//关联的空间id
  87. options: [{
  88. value: true,
  89. label: '只读模式'
  90. }, {
  91. value: false,
  92. label: '编辑模式'
  93. }],
  94. onlyRead: true,
  95. allMess: true,
  96. tableHeader: [],
  97. page: {
  98. pageSize: 50,
  99. pageSizes: [10, 20, 50, 100],
  100. pageNumber: 1,
  101. total: 0
  102. },
  103. tableData: [],
  104. copyTableData: []
  105. };
  106. },
  107. computed: {
  108. ...mapGetters("layout", [
  109. "projectId",
  110. "secret",
  111. "userId"
  112. ])
  113. },
  114. created() {
  115. this.getTableHeader()
  116. },
  117. watch: {
  118. projectId() {
  119. this.getTableHeader()
  120. }
  121. },
  122. methods: {
  123. // 获取表头数据(初始化表格)
  124. async getTableHeader() {
  125. let param = {
  126. ProjId: this.projectId,
  127. secret: this.secret,
  128. data: {
  129. "CollectFlag": this.allMess
  130. }
  131. }
  132. await getRentTableHeader(param, res => {
  133. this.tableHeader = res.Content;
  134. this.getTableData()
  135. })
  136. },
  137. async getTableData() {//获取表格数据
  138. let data = {
  139. Filters: `ProjectId='${this.projectId}'`,
  140. PageNumber: this.page.pageNumber,
  141. PageSize: this.page.pageSize
  142. }
  143. const params = {
  144. ProjId: this.projectId,
  145. secret: this.secret,
  146. data: data
  147. }
  148. await getRentTableData(params, (res) => {
  149. this.tableData = res.Content
  150. this.copyTableData = tools.deepCopy(res.Content)
  151. this.page.pageNumber = res.PageNumber
  152. this.page.total = res.Total
  153. if(this.tableData && this.tableData.length){
  154. this.initTable()
  155. }
  156. })
  157. },
  158. // 修改表格内容
  159. async updateTableData(data, change) {
  160. let param = {
  161. ProjId: this.projectId,
  162. secret: this.secret,
  163. data: {
  164. Content: [],
  165. Projection: []
  166. }
  167. };
  168. //生成要修改字段列表
  169. change.map((item) => {
  170. if(item[1] && param.data.Projection.indexOf(item[1]) == -1) {
  171. param.data.Projection.push(item[1])
  172. }
  173. })
  174. //生成对应修改数据
  175. data.map((item, index) => {
  176. let keyarr = change[index][1].split(".")
  177. if (keyarr && keyarr.length > 1) {
  178. item[keyarr[0]][keyarr[1]] = item[keyarr[0]][keyarr[1]] != ""? item[keyarr[0]][keyarr[1]]: null
  179. } else {
  180. item[keyarr[0]] = item[keyarr[0]] != ""? item[keyarr[0]]: null
  181. }
  182. param.data.Content.push(item);
  183. });
  184. await updataRentTableData(param, (res) => {
  185. })
  186. },
  187. //保存元空间关联
  188. async saveSpaceList() {
  189. let data = {
  190. TenantID: this.tenantID,
  191. RoomID: this.roomId
  192. }
  193. const params = {
  194. ProjId: this.projectId,
  195. secret: this.secret,
  196. data: data
  197. }
  198. await saveRentRelateSpace(params, (res) => {
  199. this.$message.success("关联成功!")
  200. this.getTableHeader()
  201. })
  202. },
  203. // 删除表格数据
  204. async deleteTableData(params) {
  205. await deleteRentTableData(params, (res) => {
  206. this.$message.success("删除成功")
  207. this.getTableHeader()
  208. })
  209. },
  210. // 添加租户数据
  211. handleCreateTableData() {
  212. this.$router.push({ name: 'rentadd' })
  213. },
  214. // 删除表格行
  215. handleDeleteTableRow() {
  216. let params = tools.differenceArr(this.tableData, this.copyTableData)
  217. if (params.length < 1) {
  218. return
  219. }
  220. let param = {
  221. ProjId: this.projectId,
  222. secret: this.secret,
  223. data: []
  224. }
  225. params.map(item => {
  226. param.data.push(item.TenantID)
  227. })
  228. this.$confirm("此操作将删除租户,是否继续?", "提示", {
  229. confirmButtonText: '确定',
  230. cancelButtonText: '取消',
  231. type: 'warning'
  232. }).then(() => {
  233. this.deleteTableData(param)
  234. }).catch(() => {
  235. this.getTableHeader()
  236. this.$message("取消删除")
  237. })
  238. },
  239. //修改
  240. handleUpdataTable(changeData, source) {
  241. if (!this.onlyRead) {
  242. if (changeData) {
  243. let trimmedArr = this.trimmedRows();
  244. let param = handsonUtils.getParam(changeData, source, this.tableExample, trimmedArr);
  245. let data = [];
  246. for (let i = 0; i < param.length; i++) {
  247. data.push(param[i]);
  248. }
  249. //如果data中包含/且data长度为1,将其转换成.
  250. if (changeData.length == 1 && changeData[0][1].indexOf("/") > 0) {
  251. changeData[0][1] = changeData[0][1].split("/").join(".")
  252. }
  253. // 存在data进行修改请求
  254. if (data && data.length) {
  255. this.updateTableData(data, changeData);
  256. }
  257. }
  258. }
  259. },
  260. //撤回
  261. undo() {
  262. this.tableExample.undo();
  263. },
  264. //切换租户类型
  265. changeFloor(value) {
  266. if (value[0]) {
  267. this.buildId = value[0]
  268. }
  269. if (value[1]) {
  270. this.floorId = value[1]
  271. } else {
  272. this.floorId = null
  273. }
  274. this.getTableHeader()
  275. },
  276. //关闭右侧关联元空间输入按钮
  277. handleCloseRight() {
  278. this.isTableRightShow = false
  279. },
  280. //切换每页显示多少条数据
  281. handleSizeChange(val) {
  282. this.page.pageSize = val
  283. this.getTableHeader()
  284. },
  285. //切换页数
  286. handleCurrentChange(val) {
  287. this.page.pageNumber = val
  288. this.getTableHeader()
  289. },
  290. formatHeaderData(list) {//格式化表头显示的数据
  291. let arr = tools.copyArr(list)
  292. arr.map((item) => {
  293. item.Visible = true
  294. })
  295. let readArr = ["A1", "A2", "B1", "C5", "D1", "D2", "E1", "F1", "F2", "L", "L1", "L2", "X"]
  296. if (!this.onlyRead) {
  297. readArr.push("Own")
  298. }
  299. let data = showTools.changeHeader(arr, readArr, this.onlyRead, false, this.allMess)
  300. data.unshift("操作","所属楼层","租赁空间");
  301. return data;
  302. },
  303. formatHeaderType(list) {//格式化表头头映射的数据
  304. let arr = tools.copyArr(list);
  305. arr.map((item) => { //缺少信息点
  306. item.Visible = true
  307. })
  308. let readArr = ["A1", "A2", "B1", "C5", "D1", "D2", "E1", "F1", "F2", "L", "L1", "L2", "X"]
  309. let data = showTools.showHeaderTypes(arr, readArr, this.onlyRead, false, this.allMess)
  310. data.unshift({
  311. data: "caozuo",
  312. renderer: tools.lookDetails,
  313. readOnly: true
  314. }, {
  315. data: "FloorId",
  316. readOnly: true
  317. }, {
  318. data: "RoomCount",
  319. renderer: tools.num,
  320. readOnly: true
  321. })
  322. return data;
  323. },
  324. initTable() {//实例化表格
  325. let settings = {
  326. data: this.tableData,
  327. colHeaders: this.formatHeaderData(this.tableHeader),
  328. columns: this.formatHeaderType(this.tableHeader),
  329. rowHeights: 30,
  330. maxRows: this.tableData.length,
  331. contextMenu: {
  332. items: {
  333. remove_row: {
  334. name: "删除租户"
  335. }
  336. }
  337. },
  338. // 事件
  339. afterChange: this.handleUpdataTable, //修改后
  340. afterFilter: this.trimmedRows, //排序前
  341. afterRemoveRow: this.handleDeleteTableRow, //右键删除
  342. afterOnCellMouseDown: this.handleTdClick //鼠标点击
  343. };
  344. this.$nextTick(() => {
  345. console.log(this.$refs.table);
  346. this.tableExample = this.$refs.table.init(settings);
  347. });
  348. },
  349. //获取到了正确的信息
  350. getInfors(infos, row) {
  351. //其他的开始判断
  352. let val = this.tableExample.colToProp(row.col);
  353. this.row = row.row //要操作的列号
  354. this.messKey = val //要操作的列类型
  355. this.tenantID = infos.TenantID //要操作的数据id
  356. //点击操作跳转详情
  357. if (val === "caozuo") {
  358. window.open(`${process.env.BASE_URL}:8889/#/details?perjectId=${this.projectId}&secret=${this.secret}&FmId=${this.tenantID}&type=0&code=VOTn`,"_blank")
  359. }
  360. //点击关联的元空间
  361. if (val === "RoomCount") {
  362. if(infos && infos.RoomID) {
  363. this.roomId = infos.RoomID
  364. } else {
  365. this.roomId = ""
  366. }
  367. this.isTableRightShow = true;
  368. }
  369. },
  370. //表格点击事件
  371. handleTdClick(el, rowArr) {
  372. //点击的是表头
  373. if (rowArr.row < 0) {
  374. return;
  375. }
  376. //被筛选过后的数组
  377. let trimmedArr = this.trimmedRows();
  378. //是否启用了排序
  379. let isSort = this.tableExample.getPlugin("columnSorting").isSorted();
  380. if (trimmedArr.length && isSort) {
  381. let sortArr = this.myHotArr.getPlugin("columnSorting").rowsMapper
  382. .__arrayMap;
  383. let infos = this.tableData[trimmedArr[sortArr[rowArr.row]]];
  384. this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
  385. } else if (isSort) {
  386. //排序后的数组
  387. let sortArr = this.tableExample.getPlugin("columnSorting").rowsMapper.__arrayMap;
  388. let infos = this.tableData[sortArr[rowArr.row]];
  389. this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
  390. } else if (trimmedArr.length) {
  391. let infos = this.tableData[trimmedArr[rowArr.row]];
  392. this.getInfors(infos, { row: trimmedArr[rowArr.row], col: rowArr.col });
  393. } else {
  394. let infos = this.tableData[rowArr.row];
  395. this.getInfors(infos, rowArr);
  396. }
  397. },
  398. //获取被筛选掉的行号
  399. trimmedRows() {
  400. // var plugin = hot.getPlugin('trimRows').trimmedRows;//获取被筛选掉的行号
  401. var plugin = this.tableExample.getPlugin("trimRows").trimmedRows;
  402. let dataLength = this.tableData.length;
  403. let dataArr = new Array();
  404. for (let i = 0; i < dataLength; i++) {
  405. dataArr.push(i);
  406. }
  407. if (plugin.length <= 0) {
  408. dataArr = undefined;
  409. } else {
  410. dataArr = this.array_diff(dataArr, plugin);
  411. }
  412. return dataArr || [];
  413. // var DataArray = new Array();
  414. // for (var i = 0; i < plugin.length; i++) {
  415. // // 通过行号获取数据
  416. // DataArray.push(this.tableExample.getSourceDataAtRow(plugin[i]));
  417. // }
  418. },
  419. //去除数组中相同的元素
  420. array_diff(a, b) {
  421. for (var i = 0; i < b.length; i++) {
  422. for (var j = 0; j < a.length; j++) {
  423. if (a[j] == b[i]) {
  424. a.splice(j, 1);
  425. j = j - 1;
  426. }
  427. }
  428. }
  429. return a;
  430. }
  431. }
  432. };
  433. </script>
  434. <style lang="less" scoped>
  435. #deviceList {
  436. overflow: hidden;
  437. height: 100%;
  438. background-color: #fff;
  439. padding: 10px;
  440. position: relative;
  441. .right {
  442. background: #fff;
  443. }
  444. .search-header {
  445. overflow: hidden;
  446. padding:0 10px 10px 10px;
  447. border-bottom: 1px solid #bcbcbc;
  448. }
  449. .tableBox {
  450. display: flex;
  451. height: calc(100% - 95px);
  452. margin-top: 10px;
  453. .tableLeft {
  454. flex: 2;
  455. margin-right: 20px;
  456. }
  457. .tableRight {
  458. flex: 1;
  459. // display: none;
  460. border-left: 1px solid #dadada;
  461. padding: 5px 15px;
  462. margin-right: 5px;
  463. box-shadow: 0px 1px 5px 0px rgba(59, 66, 84, 0.15);
  464. .table_right_box::after{
  465. display: block;
  466. content: "";
  467. clear: both;
  468. }
  469. .close_right {
  470. float: right;
  471. cursor: pointer;
  472. }
  473. }
  474. }
  475. }
  476. .el-pagination button, .el-pagination span:not([class*=suffix]) {
  477. vertical-align: middle;
  478. }
  479. </style>