index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407
  1. <template>
  2. <div id="deviceList">
  3. <el-row>
  4. <el-tabs @tab-click="handleClick" v-model="tabVal">
  5. <el-tab-pane label="用户管理" name="first"></el-tab-pane>
  6. <el-tab-pane label="配置管理" name="second"></el-tab-pane>
  7. <el-tab-pane label="角色管理" name="third"></el-tab-pane>
  8. <el-tab-pane label="定时任务补偿" name="fourth"></el-tab-pane>
  9. </el-tabs>
  10. </el-row>
  11. <el-row class="right">
  12. <div style="width:200px;display:inline-block;text-align:left;color:gray;">
  13. <span>隐藏自动填充的信息</span>
  14. <el-checkbox v-model="allMess" @change="getTableHeader"></el-checkbox>
  15. </div>
  16. <el-button @click="handleCreateTableData">添加部件</el-button>
  17. <el-button @click="getTableHeader">刷新</el-button>
  18. <el-button v-show="!onlyRead" @click="undo">撤销</el-button>
  19. </el-row>
  20. <div class="tableBox">
  21. <div class="center middle_sty" v-show="tableData && !tableData.length">
  22. <p>
  23. <i class="iconwushuju iconfont"></i>
  24. 暂无数据
  25. </p>
  26. </div>
  27. <div class="tableLeft" v-show="tableData && tableData.length">
  28. <handson-table ref="table"></handson-table>
  29. </div>
  30. </div>
  31. <el-pagination
  32. class="right"
  33. v-show="tableData && tableData.length"
  34. @size-change="handleSizeChange"
  35. @current-change="handleCurrentChange"
  36. :current-page="page.pageNumber"
  37. :page-sizes="page.pageSizes"
  38. :page-size="page.pageSize"
  39. layout="total, sizes, prev, pager, next, jumper"
  40. :total="page.total">
  41. </el-pagination>
  42. </div>
  43. </template>
  44. <script>
  45. import tools from "@/utils/scan/tools"
  46. import handsonUtils from "@/utils/hasontableUtils"
  47. import showTools from "@/utils/handsontable/notShow"
  48. import text from "@/utils/handsontable/mainText"
  49. import cenoteType from "@/components/ledger/lib/cenoteType";
  50. import handsonTable from "@/components/common/handsontable";
  51. import { getCenoteTableHeader, getCenoteTableData, updataCenoteTableData, deleteCenoteTableData, saveCenoteRelateSpace } from "@/api/scan/request"
  52. import { mapGetters, mapActions } from "vuex";
  53. export default {
  54. components: {
  55. cenoteType,
  56. handsonTable
  57. },
  58. data() {
  59. return {
  60. cenoteId: "",//部件类型id
  61. shaftId: "",//要操作的部件id
  62. isTableRightShow: false,
  63. spaceList: "",
  64. onlyRead: false,
  65. allMess: true,
  66. tableHeader: [],
  67. page: {
  68. pageSize: 50,
  69. pageSizes: [10, 20, 50, 100],
  70. pageNumber: 1,
  71. total: 0
  72. },
  73. tableData: [],
  74. copyTableData: [],
  75. tableExample:null,
  76. tabVal:'first'
  77. };
  78. },
  79. computed: {
  80. ...mapGetters("layout", [
  81. "projectId",
  82. "secret",
  83. "userId"
  84. ])
  85. },
  86. created() {
  87. this.getTableHeader()
  88. },
  89. methods: {
  90. //tab页点击事件
  91. handleClick(){
  92. console.log(this.tabVal)
  93. },
  94. // 获取表头数据(初始化表格)
  95. async getTableHeader() {
  96. let param = {
  97. ProjId: this.projectId,
  98. secret: this.secret,
  99. data: {
  100. "CollectFlag": this.allMess
  101. }
  102. }
  103. await getCenoteTableHeader(param, res => {
  104. this.tableHeader = res.Content;
  105. this.getTableData()
  106. })
  107. },
  108. async getTableData() {//获取表格数据
  109. let data = {
  110. Filters: this.cenoteId? `ProjectId='${this.projectId}';structureInfo.ShaftFuncType='${this.cenoteId}'`: `ProjectId='${this.projectId}'`,
  111. PageNumber: this.page.pageNumber,
  112. PageSize: this.page.pageSize
  113. }
  114. const params = {
  115. ProjId: this.projectId,
  116. secret: this.secret,
  117. data: data
  118. }
  119. await getCenoteTableData(params, (res) => {
  120. this.tableData = res.Content
  121. this.copyTableData = tools.deepCopy(res.Content)
  122. this.page.pageNumber = res.PageNumber
  123. this.page.total = res.Total
  124. if(this.tableData && this.tableData.length){
  125. this.initTable()
  126. }
  127. })
  128. },
  129. // 修改表格内容
  130. async updateTableData(data, change) {
  131. let param = {
  132. ProjId: this.projectId,
  133. secret: this.secret,
  134. data: {
  135. Content: [],
  136. Projection: []
  137. }
  138. };
  139. //生成要修改字段列表
  140. change.map((item) => {
  141. if(item[1] && param.data.Projection.indexOf(item[1]) == -1) {
  142. param.data.Projection.push(item[1])
  143. }
  144. })
  145. //生成对应修改数据
  146. data.map((item, index) => {
  147. let keyarr = change[index][1].split(".")
  148. if (keyarr && keyarr.length > 1) {
  149. item[keyarr[0]][keyarr[1]] = item[keyarr[0]][keyarr[1]] != ""? item[keyarr[0]][keyarr[1]]: null
  150. } else {
  151. item[keyarr[0]] = item[keyarr[0]] != ""? item[keyarr[0]]: null
  152. }
  153. param.data.Content.push(item);
  154. });
  155. await updataCenoteTableData(param, (res) => {
  156. })
  157. },
  158. // 删除表格数据
  159. async deleteTableData(params) {
  160. await deleteCenoteTableData(params, (res) => {
  161. this.$message.success("删除成功!")
  162. this.getTableHeader()
  163. })
  164. },
  165. //保存元空间关联
  166. async saveSpaceList() {
  167. let data = {
  168. ShaftId: this.shaftId,
  169. SpaceId: this.spaceList
  170. }
  171. const params = {
  172. ProjId: this.projectId,
  173. secret: this.secret,
  174. data: data
  175. }
  176. await saveCenoteRelateSpace(params, (res) => {
  177. this.$message.success("关联成功!")
  178. this.getTableHeader()
  179. })
  180. },
  181. // 添加部件
  182. handleCreateTableData() {
  183. this.$router.push({ name: 'addparts'})
  184. },
  185. // 删除表格行
  186. handleDeleteTableRow() {
  187. let params = tools.differenceArr(this.tableData, this.copyTableData)
  188. if (params.length < 1 || this.tableData > this.copyTableData) {
  189. return
  190. }
  191. let param = {
  192. ProjId: this.projectId,
  193. secret: this.secret,
  194. data: []
  195. }
  196. params.map(item => {
  197. param.data.push(item.ShaftID)
  198. })
  199. this.$confirm("此操作将删除部件,是否继续?", "提示", {
  200. confirmButtonText: '确定',
  201. cancelButtonText: '取消',
  202. type: 'warning'
  203. }).then(() => {
  204. this.deleteTableData(param)
  205. }).catch(() => {
  206. this.getTableHeader()
  207. this.$message("取消删除")
  208. })
  209. },
  210. //修改
  211. handleUpdataTable(changeData, source) {
  212. if (!this.onlyRead) {
  213. if (changeData) {
  214. let trimmedArr = this.trimmedRows();
  215. let param = handsonUtils.getParam(changeData, source, this.tableExample, trimmedArr);
  216. let data = [];
  217. for (let i = 0; i < param.length; i++) {
  218. data.push(param[i]);
  219. }
  220. //如果data中包含/且data长度为1,将其转换成.
  221. if (changeData.length == 1 && changeData[0][1].indexOf("/") > 0) {
  222. changeData[0][1] = changeData[0][1].split("/").join(".")
  223. }
  224. // 存在data进行修改请求
  225. if (data && data.length) {
  226. this.updateTableData(data, changeData);
  227. }
  228. }
  229. }
  230. },
  231. //撤回
  232. undo() {
  233. this.tableExample.undo();
  234. },
  235. //切换部件类型
  236. changeFloor(value) {
  237. this.cenoteId = value.Id
  238. this.getTableHeader()
  239. },
  240. //关闭右侧关联元空间输入按钮
  241. handleCloseRight() {
  242. this.isTableRightShow = false
  243. this.spaceList = ""
  244. },
  245. //切换每页显示多少条数据
  246. handleSizeChange(val) {
  247. this.page.pageSize = val
  248. this.getTableHeader()
  249. },
  250. //切换页数
  251. handleCurrentChange(val) {
  252. this.page.pageNumber = val
  253. this.getTableHeader()
  254. },
  255. formatHeaderData(list) {//格式化表头显示的数据
  256. let arr = tools.copyArr(list)
  257. arr.map((item) => {
  258. item.Visible = true
  259. })
  260. let readArr = ["A1", "A2", "B1", "C5", "D1", "D2", "E1", "F1", "F2", "L", "L1", "L2", "X"]
  261. if (!this.onlyRead) {
  262. readArr.push("Own")
  263. }
  264. let data = showTools.changeHeader(arr, readArr, this.onlyRead, false, this.allMess)
  265. data.unshift("关联的元空间");
  266. return data;
  267. },
  268. formatHeaderType(list) {//格式化表头头映射的数据
  269. let arr = tools.copyArr(list);
  270. arr.map((item) => { //缺少信息点
  271. item.Visible = true
  272. })
  273. let readArr = ["A1", "A2", "B1", "C5", "D1", "D2", "E1", "F1", "F2", "L", "L1", "L2", "X"]
  274. let data = showTools.showHeaderTypes(arr, readArr, this.onlyRead, false, this.allMess)
  275. data.unshift({
  276. data: "SpaceCount",
  277. renderer: tools.num,
  278. readOnly: true
  279. })
  280. return data;
  281. },
  282. initTable() {//实例化表格
  283. let settings = {
  284. data: this.tableData,
  285. colHeaders: this.formatHeaderData(this.tableHeader),
  286. columns: this.formatHeaderType(this.tableHeader),
  287. rowHeights: 30,
  288. maxRows: this.tableData.length,
  289. contextMenu: {
  290. items: {
  291. remove_row: {
  292. name: "删除部件"
  293. }
  294. }
  295. },
  296. // 事件
  297. afterChange: this.handleUpdataTable, //修改后
  298. afterRemoveRow: this.handleDeleteTableRow, //右键删除
  299. afterOnCellMouseDown: this.handleTdClick //鼠标点击
  300. };
  301. this.$nextTick(() => {
  302. console.log(this.$refs.table);
  303. this.tableExample = this.$refs.table.init(settings);
  304. });
  305. },
  306. //获取到了正确的信息
  307. getInfors(infos, row) {
  308. //其他的开始判断
  309. let val = this.tableExample.colToProp(row.col)
  310. this.shaftId = infos.ShaftID //要操作的数据id
  311. //点击关联的元空间
  312. if (val === "SpaceCount") {
  313. this.spaceList = infos.SpaceList
  314. this.isTableRightShow = true
  315. }
  316. },
  317. //表格点击事件
  318. handleTdClick(el, rowArr) {
  319. //点击的是表头
  320. if (rowArr.row < 0) {
  321. return;
  322. }
  323. //被筛选过后的数组
  324. let trimmedArr = this.trimmedRows();
  325. //是否启用了排序
  326. let isSort = this.tableExample.getPlugin("columnSorting").isSorted();
  327. if (trimmedArr.length && isSort) {
  328. let sortArr = this.myHotArr.getPlugin("columnSorting").rowsMapper
  329. .__arrayMap;
  330. let infos = this.tableData[trimmedArr[sortArr[rowArr.row]]];
  331. this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
  332. } else if (isSort) {
  333. //排序后的数组
  334. let sortArr = this.tableExample.getPlugin("columnSorting").rowsMapper.__arrayMap;
  335. let infos = this.tableData[sortArr[rowArr.row]];
  336. this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
  337. } else if (trimmedArr.length) {
  338. let infos = this.tableData[trimmedArr[rowArr.row]];
  339. this.getInfors(infos, { row: trimmedArr[rowArr.row], col: rowArr.col });
  340. } else {
  341. let infos = this.tableData[rowArr.row];
  342. this.getInfors(infos, rowArr);
  343. }
  344. },
  345. //获取被筛选掉的行号
  346. trimmedRows() {
  347. // var plugin = hot.getPlugin('trimRows').trimmedRows;//获取被筛选掉的行号
  348. var plugin = this.tableExample.getPlugin("trimRows").trimmedRows;
  349. let dataLength = this.tableData.length;
  350. let dataArr = new Array();
  351. for (let i = 0; i < dataLength; i++) {
  352. dataArr.push(i);
  353. }
  354. if (plugin.length <= 0) {
  355. dataArr = undefined;
  356. } else {
  357. dataArr = this.array_diff(dataArr, plugin);
  358. }
  359. return dataArr || [];
  360. },
  361. //去除数组中相同的元素
  362. array_diff(a, b) {
  363. for (var i = 0; i < b.length; i++) {
  364. for (var j = 0; j < a.length; j++) {
  365. if (a[j] == b[i]) {
  366. a.splice(j, 1);
  367. j = j - 1;
  368. }
  369. }
  370. }
  371. return a;
  372. }
  373. }
  374. };
  375. </script>
  376. <style lang="less" scoped>
  377. #deviceList {
  378. overflow: hidden;
  379. height: 100%;
  380. background-color: #fff;
  381. padding: 10px;
  382. position: relative;
  383. .right {
  384. background: #fff;
  385. }
  386. .search-header {
  387. overflow: hidden;
  388. padding:0 10px 10px 10px;
  389. border-bottom: 1px solid #bcbcbc;
  390. }
  391. .tableBox {
  392. display: flex;
  393. height: calc(100% - 150px);
  394. margin-top: 10px;
  395. .tableLeft {
  396. flex: 1;
  397. }
  398. }
  399. }
  400. .el-pagination button, .el-pagination span:not([class*=suffix]) {
  401. vertical-align: middle;
  402. }
  403. </style>