index.vue 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300
  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="iconwushuju 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 create_button">
  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 { getDataDictionary, 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. addNum: 1,
  42. isTableRightShow: false,
  43. relationids: "",
  44. onlyRead: false,
  45. showType: "all",
  46. tableHeader: [],
  47. tableData: session.get("rentAddData")? session.get("rentAddData").length? session.get("rentAddData"): [{}]: [{}],
  48. copyTableData: []
  49. };
  50. },
  51. computed: {
  52. ...mapGetters("layout", [
  53. "projectId",
  54. "secret",
  55. "userId"
  56. ])
  57. },
  58. created() {
  59. this.getTableHeader()
  60. },
  61. // watch: {
  62. // },
  63. methods: {
  64. // 获取表头数据(初始化表格)
  65. async getTableHeader() {
  66. let param = {
  67. data: {
  68. PageNumber: 1,
  69. PageSize: 500,
  70. },
  71. type: 'Tenant'
  72. }
  73. await getDataDictionary(param, res => {
  74. this.tableHeader = res.Content
  75. this.initTable()
  76. })
  77. },
  78. // 创建租户数据
  79. async handleCreateTableData() {
  80. let newData = this.tableData.filter((item) => {
  81. let keys = Object.keys(item)
  82. keys.map((key) => { //将值为空字符串的属性删除
  83. if(item[key] == "") {
  84. delete item[key]
  85. }
  86. })
  87. if(keys.length && Object.keys(item).length) {
  88. return item
  89. }
  90. })
  91. if(!newData.length) {
  92. this.$message("创建信息为空,请录入信息后再创建!")
  93. return
  94. }
  95. await createRentTableData(newData, (res) => {
  96. this.$message.success("添加成功!")
  97. session.remove("rentAddData")
  98. this.$router.push({ name: 'rentlist'})
  99. })
  100. },
  101. // 删除表格行
  102. handleDeleteTableRow() {
  103. this.$message.success("删除成功")
  104. this.formaTableData()
  105. },
  106. // 添加行
  107. handleAddTableRow() {
  108. let addRowLength = this.addNum
  109. for(let i = 0; i < addRowLength; i++){
  110. this.tableData.push({})
  111. }
  112. this.initTable()
  113. this.formaTableData()
  114. },
  115. //修改
  116. handleUpdataTable(changeData, source) {
  117. this.formaTableData()
  118. },
  119. //保存去掉空字段的新增数据
  120. formaTableData() {
  121. let newData = this.tableData.filter((item) => {
  122. let keys = Object.keys(item)
  123. keys.map((key) => { //将值为空字符串的属性删除
  124. if(item[key] == "") {
  125. delete item[key]
  126. }
  127. })
  128. if(keys.length && Object.keys(item).length) {
  129. return item
  130. }
  131. })
  132. session.set("rentAddData", newData)
  133. },
  134. //关闭右侧关联元空间输入按钮
  135. handleCloseRight() {
  136. this.isTableRightShow = false
  137. },
  138. formatHeaderData(list) {//格式化表头显示的数据
  139. let arr = tools.copyArr(list)
  140. let data = showTools.headerTextFilter(arr, "tenant", this.onlyRead, this.showType)
  141. // data.unshift("关联的元空间");
  142. return data;
  143. },
  144. formatHeaderType(list) {//格式化表头头映射的数据
  145. let arr = tools.copyArr(list);
  146. let data = showTools.headerTypeFilter(arr, "tenant", this.onlyRead, this.showType)
  147. // data.unshift({
  148. // data: "SpaceCount",
  149. // readOnly: this.onlyRead
  150. // })
  151. return data;
  152. },
  153. initTable() {//实例化表格
  154. let settings = {
  155. data: this.tableData,
  156. colHeaders: this.formatHeaderData(this.tableHeader),
  157. columns: this.formatHeaderType(this.tableHeader),
  158. rowHeights: 30,
  159. maxRows: this.tableData.length,
  160. contextMenu: {
  161. items: {
  162. remove_row: {
  163. name: "删除租户"
  164. }
  165. }
  166. },
  167. // 事件
  168. afterChange: this.handleUpdataTable, //修改后
  169. afterFilter: this.trimmedRows, //排序前
  170. afterRemoveRow: this.handleDeleteTableRow, //右键删除
  171. afterOnCellMouseDown: this.handleTdClick //鼠标点击
  172. };
  173. this.$nextTick(() => {
  174. console.log(this.$refs.table);
  175. this.tableExample = this.$refs.table.init(settings);
  176. });
  177. },
  178. //获取到了正确的信息
  179. getInfors(infos, row) {
  180. //其他的开始判断
  181. let val = this.tableExample.colToProp(row.col);
  182. this.row = row.row //要操作的列号
  183. this.messKey = val //要操作的列类型
  184. //点击关联的元空间
  185. // if (val === "SpaceCount") {
  186. // this.isTableRightShow = true;
  187. // }
  188. },
  189. //表格点击事件
  190. handleTdClick(el, rowArr) {
  191. //点击的是表头
  192. if (rowArr.row < 0) {
  193. return;
  194. }
  195. //被筛选过后的数组
  196. let trimmedArr = this.trimmedRows();
  197. //是否启用了排序
  198. let isSort = this.tableExample.getPlugin("columnSorting").isSorted();
  199. if (trimmedArr.length && isSort) {
  200. let sortArr = this.myHotArr.getPlugin("columnSorting").rowsMapper
  201. .__arrayMap;
  202. let infos = this.tableData[trimmedArr[sortArr[rowArr.row]]];
  203. this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
  204. } else if (isSort) {
  205. //排序后的数组
  206. let sortArr = this.tableExample.getPlugin("columnSorting").rowsMapper.__arrayMap;
  207. let infos = this.tableData[sortArr[rowArr.row]];
  208. this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
  209. } else if (trimmedArr.length) {
  210. let infos = this.tableData[trimmedArr[rowArr.row]];
  211. this.getInfors(infos, { row: trimmedArr[rowArr.row], col: rowArr.col });
  212. } else {
  213. let infos = this.tableData[rowArr.row];
  214. this.getInfors(infos, rowArr);
  215. }
  216. },
  217. //获取被筛选掉的行号
  218. trimmedRows() {
  219. // var plugin = hot.getPlugin('trimRows').trimmedRows;//获取被筛选掉的行号
  220. var plugin = this.tableExample.getPlugin("trimRows").trimmedRows;
  221. let dataLength = this.tableData.length;
  222. let dataArr = new Array();
  223. for (let i = 0; i < dataLength; i++) {
  224. dataArr.push(i);
  225. }
  226. if (plugin.length <= 0) {
  227. dataArr = undefined;
  228. } else {
  229. dataArr = this.array_diff(dataArr, plugin);
  230. }
  231. return dataArr || [];
  232. // var DataArray = new Array();
  233. // for (var i = 0; i < plugin.length; i++) {
  234. // // 通过行号获取数据
  235. // DataArray.push(this.tableExample.getSourceDataAtRow(plugin[i]));
  236. // }
  237. },
  238. //去除数组中相同的元素
  239. array_diff(a, b) {
  240. for (var i = 0; i < b.length; i++) {
  241. for (var j = 0; j < a.length; j++) {
  242. if (a[j] == b[i]) {
  243. a.splice(j, 1);
  244. j = j - 1;
  245. }
  246. }
  247. }
  248. return a;
  249. }
  250. }
  251. };
  252. </script>
  253. <style lang="less" scoped>
  254. #deviceList {
  255. overflow: hidden;
  256. height: 100%;
  257. background-color: #fff;
  258. padding: 10px;
  259. position: relative;
  260. .right {
  261. background: #fff;
  262. }
  263. .search-header {
  264. overflow: hidden;
  265. padding:0 10px 10px 10px;
  266. border-bottom: 1px solid #bcbcbc;
  267. }
  268. .tableBox {
  269. display: flex;
  270. height: calc(100% - 100px);
  271. margin-top: 10px;
  272. .tableLeft {
  273. flex: 2;
  274. }
  275. .tableRight {
  276. flex: 1;
  277. // display: none;
  278. border-left: 1px solid #dadada;
  279. padding: 5px 15px;
  280. margin-right: 5px;
  281. box-shadow: 0px 1px 5px 0px rgba(59, 66, 84, 0.15);
  282. .table_right_box::after{
  283. display: block;
  284. content: "";
  285. clear: both;
  286. }
  287. .close_right {
  288. float: right;
  289. cursor: pointer;
  290. }
  291. }
  292. }
  293. .create_button{
  294. margin-top: 10px;
  295. }
  296. }
  297. </style>