index_1.vue 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303
  1. <template>
  2. <div id="deviceList">
  3. <el-row class="right">
  4. <!-- <span style="float:left;">当前选择的部件类型:{{page.total || '--'}}</span> -->
  5. <span>增加</span>
  6. <el-input v-model="addNum" style="width:40px;" size="small"></el-input>
  7. <span>个租户</span>
  8. <el-button @click="handleAddTableRow">增加</el-button>
  9. </el-row>
  10. <div class="tableBox">
  11. <div class="center middle_sty" style="flex:2;" v-show="tableData && !tableData.length">
  12. <p>
  13. <i class="icon-wushuju iconfont"></i>
  14. 暂无数据
  15. </p>
  16. </div>
  17. <div class="tableLeft" v-show="tableData && tableData.length">
  18. <handson-table ref="table"></handson-table>
  19. </div>
  20. </div>
  21. <el-row class="center">
  22. <el-button type="primary" size="medium" @click="handleCreateTableData">创建租户</el-button>
  23. </el-row>
  24. </div>
  25. </template>
  26. <script>
  27. import tools from "@/utils/scan/tools"
  28. import handsonUtils from "@/utils/hasontableUtils"
  29. import showTools from "@/utils/handsontable/notShow"
  30. import text from "@/utils/handsontable/mainText"
  31. import session from "@/framework/utils/storage"
  32. import handsonTable from "@/components/common/handsontable"
  33. import { getRentTableHeader, createRentTableData } from "@/api/scan/request"
  34. import { mapGetters, mapActions } from "vuex";
  35. export default {
  36. components: {
  37. handsonTable
  38. },
  39. data() {
  40. return {
  41. buildId: null,//建筑id
  42. floorId: null,//楼层id
  43. addNum: 1,
  44. cenoteId: "",//租户类型id
  45. shaftId: "",//要操作的租户id
  46. isTableRightShow: false,
  47. relationids: "",
  48. onlyRead: false,
  49. allMess: true,
  50. isRentSave: false,//新增信息是否保存
  51. tableHeader: [],
  52. tableData: [{}],
  53. copyTableData: [],
  54. assetGroupList: [],
  55. graphyId: null
  56. };
  57. },
  58. computed: {
  59. ...mapGetters("layout", [
  60. "projectId",
  61. "secret",
  62. "userId"
  63. ])
  64. },
  65. created() {
  66. session.set("isRentSave", this.isRentSave)
  67. this.getTableHeader()
  68. },
  69. // watch: {
  70. // },
  71. methods: {
  72. // 获取表头数据(初始化表格)
  73. async getTableHeader() {
  74. let param = {
  75. ProjId: this.projectId,
  76. secret: this.secret,
  77. data: {
  78. "CollectFlag": this.allMess
  79. }
  80. }
  81. await getRentTableHeader(param, res => {
  82. this.tableHeader = res.Content
  83. this.initTable()
  84. })
  85. },
  86. // 创建租户数据
  87. async handleCreateTableData() {
  88. const params = {
  89. ProjId: this.projectId,
  90. secret: this.secret,
  91. data: this.tableData
  92. }
  93. await createRentTableData(params, (res) => {
  94. this.$message.success("添加成功!")
  95. this.isRentSave = true
  96. session.set("isRentSave", this.isRentSave)
  97. this.$router.push({ name: 'rentlist'})
  98. })
  99. },
  100. // 删除表格行
  101. handleDeleteTableRow() {
  102. this.$message.success("删除成功")
  103. },
  104. // 添加行
  105. handleAddTableRow() {
  106. let addRowLength = this.addNum
  107. for(let i = 0; i < addRowLength; i++){
  108. this.tableData.push({})
  109. }
  110. this.initTable()
  111. },
  112. //修改
  113. handleUpdataTable(changeData, source) {
  114. if (!this.onlyRead) {
  115. if (changeData) {
  116. let trimmedArr = this.trimmedRows();
  117. let param = handsonUtils.getParam(changeData, source, this.tableExample, trimmedArr);
  118. let data = [];
  119. for (let i = 0; i < param.length; i++) {
  120. data.push(param[i]);
  121. }
  122. // 存在data进行修改请求
  123. if (data && data.length) {
  124. data.map((item, index) => {
  125. let key = changeData[index][1]
  126. item[key] = item[key] != ""? item[key]: null
  127. });
  128. }
  129. }
  130. }
  131. },
  132. //关闭右侧关联元空间输入按钮
  133. handleCloseRight() {
  134. this.isTableRightShow = false
  135. },
  136. formatHeaderData(list) {//格式化表头显示的数据
  137. let arr = tools.copyArr(list)
  138. arr.map((item) => {
  139. item.Visible = true
  140. })
  141. let readArr = ["A1", "A2", "B1", "C5", "D1", "D2", "E1", "F1", "F2", "L", "L1", "L2", "M"]
  142. if (!this.onlyRead) {
  143. readArr.push("Own")
  144. }
  145. let data = showTools.changeHeader(arr, readArr, this.onlyRead, false, this.allMess)
  146. // data.unshift("关联的元空间");
  147. return data;
  148. },
  149. formatHeaderType(list) {//格式化表头头映射的数据
  150. let arr = tools.copyArr(list);
  151. arr.map((item) => { //缺少信息点
  152. item.Visible = true
  153. })
  154. let data = showTools.showHeaderTypes(arr, this.onlyRead, false, this.allMess)
  155. // data.unshift({
  156. // data: "SpaceCount",
  157. // readOnly: this.onlyRead
  158. // })
  159. return data;
  160. },
  161. initTable() {//实例化表格
  162. let settings = {
  163. data: this.tableData,
  164. colHeaders: this.formatHeaderData(this.tableHeader),
  165. columns: this.formatHeaderType(this.tableHeader),
  166. rowHeights: 30,
  167. maxRows: this.tableData.length,
  168. contextMenu: {
  169. items: {
  170. remove_row: {
  171. name: "删除租户"
  172. }
  173. }
  174. },
  175. // 事件
  176. afterChange: this.handleUpdataTable, //修改后
  177. afterFilter: this.trimmedRows, //排序前
  178. afterRemoveRow: this.handleDeleteTableRow, //右键删除
  179. afterOnCellMouseDown: this.handleTdClick //鼠标点击
  180. };
  181. this.$nextTick(() => {
  182. console.log(this.$refs.table);
  183. this.tableExample = this.$refs.table.init(settings);
  184. });
  185. },
  186. //获取到了正确的信息
  187. getInfors(infos, row) {
  188. //其他的开始判断
  189. let val = this.tableExample.colToProp(row.col);
  190. this.row = row.row //要操作的列号
  191. this.messKey = val //要操作的列类型
  192. this.shaftId = infos.ShaftID //要操作的数据id
  193. //点击关联的元空间
  194. // if (val === "SpaceCount") {
  195. // this.isTableRightShow = true;
  196. // }
  197. },
  198. //表格点击事件
  199. handleTdClick(el, rowArr) {
  200. //点击的是表头
  201. if (rowArr.row < 0) {
  202. return;
  203. }
  204. //被筛选过后的数组
  205. let trimmedArr = this.trimmedRows();
  206. //是否启用了排序
  207. let isSort = this.tableExample.getPlugin("columnSorting").isSorted();
  208. if (trimmedArr.length && isSort) {
  209. let sortArr = this.myHotArr.getPlugin("columnSorting").rowsMapper
  210. .__arrayMap;
  211. let infos = this.tableData[trimmedArr[sortArr[rowArr.row]]];
  212. this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
  213. } else if (isSort) {
  214. //排序后的数组
  215. let sortArr = this.tableExample.getPlugin("columnSorting").rowsMapper.__arrayMap;
  216. let infos = this.tableData[sortArr[rowArr.row]];
  217. this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
  218. } else if (trimmedArr.length) {
  219. let infos = this.tableData[trimmedArr[rowArr.row]];
  220. this.getInfors(infos, { row: trimmedArr[rowArr.row], col: rowArr.col });
  221. } else {
  222. let infos = this.tableData[rowArr.row];
  223. this.getInfors(infos, rowArr);
  224. }
  225. },
  226. //获取被筛选掉的行号
  227. trimmedRows() {
  228. // var plugin = hot.getPlugin('trimRows').trimmedRows;//获取被筛选掉的行号
  229. var plugin = this.tableExample.getPlugin("trimRows").trimmedRows;
  230. let dataLength = this.tableData.length;
  231. let dataArr = new Array();
  232. for (let i = 0; i < dataLength; i++) {
  233. dataArr.push(i);
  234. }
  235. if (plugin.length <= 0) {
  236. dataArr = undefined;
  237. } else {
  238. dataArr = this.array_diff(dataArr, plugin);
  239. }
  240. return dataArr || [];
  241. // var DataArray = new Array();
  242. // for (var i = 0; i < plugin.length; i++) {
  243. // // 通过行号获取数据
  244. // DataArray.push(this.tableExample.getSourceDataAtRow(plugin[i]));
  245. // }
  246. },
  247. //去除数组中相同的元素
  248. array_diff(a, b) {
  249. for (var i = 0; i < b.length; i++) {
  250. for (var j = 0; j < a.length; j++) {
  251. if (a[j] == b[i]) {
  252. a.splice(j, 1);
  253. j = j - 1;
  254. }
  255. }
  256. }
  257. return a;
  258. }
  259. }
  260. };
  261. </script>
  262. <style lang="less" scoped>
  263. #deviceList {
  264. overflow: hidden;
  265. height: 100%;
  266. background-color: #f6f6f6;
  267. position: relative;
  268. .search-header {
  269. overflow: hidden;
  270. padding:0 10px 10px 10px;
  271. border-bottom: 1px solid #bcbcbc;
  272. }
  273. .tableBox {
  274. display: flex;
  275. height: calc(100% - 100px);
  276. margin-top: 10px;
  277. .tableLeft {
  278. flex: 2;
  279. }
  280. .tableRight {
  281. flex: 1;
  282. // display: none;
  283. border-left: 1px solid #dadada;
  284. padding: 5px 15px;
  285. margin-right: 5px;
  286. box-shadow: 0px 1px 5px 0px rgba(59, 66, 84, 0.15);
  287. .table_right_box::after{
  288. display: block;
  289. content: "";
  290. clear: both;
  291. }
  292. .close_right {
  293. float: right;
  294. cursor: pointer;
  295. }
  296. }
  297. }
  298. }
  299. </style>