index.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460
  1. <template>
  2. <div id="deviceList">
  3. <div class="search-header">
  4. <cenote-type @change="changeFloor"></cenote-type>
  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;font-size:12px;">
  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="spaceList">
  45. </el-input>
  46. <el-row class="right" v-show="!onlyRead">
  47. <el-button @click="handleCloseRight">取消</el-button>
  48. <el-button @click="saveSpaceList" type="primary">保存</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 cenoteType from "@/components/ledger/lib/cenoteType";
  72. import handsonTable from "@/components/common/handsontable";
  73. import { getDataDictionary, getCenoteTableHeader, getCenoteTableData, updataCenoteTableData, deleteCenoteTableData, saveCenoteRelateSpace } from "@/api/scan/request"
  74. import { mapGetters, mapActions } from "vuex";
  75. export default {
  76. components: {
  77. cenoteType,
  78. handsonTable
  79. },
  80. data() {
  81. return {
  82. cenoteId: "",//竖井类型id
  83. shaftId: "",//要操作的竖井id
  84. isTableRightShow: false,
  85. spaceList: "",
  86. options: [{
  87. value: true,
  88. label: '只读模式'
  89. }, {
  90. value: false,
  91. label: '编辑模式'
  92. }],
  93. onlyRead: true,
  94. allMess: true,
  95. tableHeader: [],
  96. page: {
  97. pageSize: 50,
  98. pageSizes: [10, 20, 50, 100],
  99. pageNumber: 1,
  100. total: 0
  101. },
  102. tableData: [],
  103. copyTableData: [],
  104. tableExample:null
  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.param.ProjId = this.projectId;
  120. // }
  121. // },
  122. methods: {
  123. // 获取表头数据(初始化表格)
  124. async getTableHeader() {
  125. let param = {
  126. PageNumber: 1,
  127. PageSize: 500,
  128. Filters: `type='Shaft'`
  129. }
  130. await getDataDictionary(param).then( res => {
  131. this.tableHeader = res.data.Content;
  132. this.getTableData()
  133. })
  134. },
  135. async getTableData() {//获取表格数据
  136. let data = {
  137. Filters: this.cenoteId? `ProjectId='${this.projectId}';structureInfo.ShaftFuncType='${this.cenoteId}'`: `ProjectId='${this.projectId}'`,
  138. PageNumber: this.page.pageNumber,
  139. PageSize: this.page.pageSize
  140. }
  141. const params = {
  142. ProjId: this.projectId,
  143. secret: this.secret,
  144. data: data
  145. }
  146. await getCenoteTableData(params, (res) => {
  147. this.tableData = res.Content
  148. this.copyTableData = tools.deepCopy(res.Content)
  149. this.page.pageNumber = res.PageNumber
  150. this.page.total = res.Total
  151. if(this.tableData && this.tableData.length){
  152. this.initTable()
  153. }
  154. })
  155. },
  156. // 修改表格内容
  157. async updateTableData(data, change) {
  158. let param = {
  159. ProjId: this.projectId,
  160. secret: this.secret,
  161. data: {
  162. Content: [],
  163. Projection: []
  164. }
  165. };
  166. //生成要修改字段列表
  167. change.map((item) => {
  168. if(item[1] && param.data.Projection.indexOf(item[1]) == -1) {
  169. param.data.Projection.push(item[1])
  170. }
  171. })
  172. //生成对应修改数据
  173. data.map((item, index) => {
  174. // param.data.Projection.map(value => {
  175. // let itemData = tools.dataForKey(item, value)
  176. // tools.setDataForKey(item, value, itemData == "" ? null : itemData)
  177. // })
  178. // let keyarr = change[index][1].split(".")
  179. // if (keyarr && keyarr.length > 1) {
  180. // item[keyarr[0]][keyarr[1]] = item[keyarr[0]][keyarr[1]] != ""? item[keyarr[0]][keyarr[1]]: null
  181. // } else {
  182. // item[keyarr[0]] = item[keyarr[0]] != ""? item[keyarr[0]]: null
  183. // }
  184. param.data.Content.push(item);
  185. })
  186. await updataCenoteTableData(param, (res) => {
  187. })
  188. },
  189. // 删除表格数据
  190. async deleteTableData(params) {
  191. await deleteCenoteTableData(params, (res) => {
  192. this.$message.success("删除成功!")
  193. this.getTableHeader()
  194. })
  195. },
  196. //保存元空间关联
  197. async saveSpaceList() {
  198. let data = {
  199. ShaftId: this.shaftId,
  200. SpaceId: this.spaceList
  201. }
  202. const params = {
  203. ProjId: this.projectId,
  204. secret: this.secret,
  205. data: data
  206. }
  207. await saveCenoteRelateSpace(params, (res) => {
  208. this.$message.success("关联成功!")
  209. this.getTableHeader()
  210. })
  211. },
  212. // 添加竖井
  213. handleCreateTableData() {
  214. this.$router.push({ name: 'cenoteadd'})
  215. },
  216. // 删除表格行
  217. handleDeleteTableRow() {
  218. let params = tools.differenceArr(this.tableData, this.copyTableData)
  219. if (params.length < 1 || this.tableData > this.copyTableData) {
  220. return
  221. }
  222. let param = {
  223. ProjId: this.projectId,
  224. secret: this.secret,
  225. data: []
  226. }
  227. params.map(item => {
  228. param.data.push(item.ShaftID)
  229. })
  230. this.$confirm("此操作将删除竖井,是否继续?", "提示", {
  231. confirmButtonText: '确定',
  232. cancelButtonText: '取消',
  233. type: 'warning'
  234. }).then(() => {
  235. this.deleteTableData(param)
  236. }).catch(() => {
  237. this.getTableHeader()
  238. this.$message("取消删除")
  239. })
  240. },
  241. //修改
  242. handleUpdataTable(changeData, source) {
  243. if (!this.onlyRead) {
  244. if (changeData) {
  245. let trimmedArr = this.trimmedRows();
  246. let param = handsonUtils.getParam(changeData, source, this.tableExample, trimmedArr);
  247. let data = [];
  248. for (let i = 0; i < param.length; i++) {
  249. data.push(param[i]);
  250. }
  251. //如果data中包含/且data长度为1,将其转换成.
  252. if (changeData.length == 1 && changeData[0][1].indexOf("/") > 0) {
  253. changeData[0][1] = changeData[0][1].split("/").join(".")
  254. }
  255. // 存在data进行修改请求
  256. if (data && data.length) {
  257. this.updateTableData(data, changeData);
  258. }
  259. }
  260. }
  261. },
  262. //撤回
  263. undo() {
  264. this.tableExample.undo();
  265. },
  266. //切换竖井类型
  267. changeFloor(value) {
  268. this.cenoteId = value.Id
  269. this.getTableHeader()
  270. },
  271. //关闭右侧关联元空间输入按钮
  272. handleCloseRight() {
  273. this.isTableRightShow = false
  274. this.spaceList = ""
  275. },
  276. //切换每页显示多少条数据
  277. handleSizeChange(val) {
  278. this.page.pageSize = val
  279. this.getTableHeader()
  280. },
  281. //切换页数
  282. handleCurrentChange(val) {
  283. this.page.pageNumber = val
  284. this.getTableHeader()
  285. },
  286. formatHeaderData(list) {//格式化表头显示的数据
  287. let arr = tools.copyArr(list)
  288. arr.map((item) => {
  289. item.Visible = true
  290. })
  291. let readArr = ["A1", "A2", "B1", "C5", "D1", "D2", "E1", "F1", "F2", "L", "L1", "L2", "M"]
  292. let data = showTools.changeHeader(arr, readArr, this.onlyRead, false, this.allMess)
  293. data.unshift("关联的元空间");
  294. return data;
  295. },
  296. formatHeaderType(list) {//格式化表头头映射的数据
  297. let arr = tools.copyArr(list);
  298. arr.map((item) => { //缺少信息点
  299. item.Visible = true
  300. })
  301. let readArr = ["A1", "A2", "B1", "C5", "D1", "D2", "E1", "F1", "F2", "L", "L1", "L2", "M"]
  302. let data = showTools.showHeaderTypes(arr, readArr, this.onlyRead, false, this.allMess)
  303. data.unshift({
  304. data: "SpaceCount",
  305. renderer: tools.num,
  306. readOnly: true
  307. })
  308. return data;
  309. },
  310. initTable() {//实例化表格
  311. let settings = {
  312. data: this.tableData,
  313. colHeaders: this.formatHeaderData(this.tableHeader),
  314. columns: this.formatHeaderType(this.tableHeader),
  315. rowHeights: 30,
  316. maxRows: this.tableData.length,
  317. contextMenu: {
  318. items: {
  319. remove_row: {
  320. name: "删除竖井"
  321. }
  322. }
  323. },
  324. // 事件
  325. afterChange: this.handleUpdataTable, //修改后
  326. // afterFilter: this.trimmedRows, //排序前
  327. afterRemoveRow: this.handleDeleteTableRow, //右键删除
  328. afterOnCellMouseDown: this.handleTdClick //鼠标点击
  329. };
  330. this.$nextTick(() => {
  331. console.log(this.$refs.table);
  332. this.tableExample = this.$refs.table.init(settings);
  333. });
  334. },
  335. //获取到了正确的信息
  336. getInfors(infos, row) {
  337. //其他的开始判断
  338. let val = this.tableExample.colToProp(row.col)
  339. this.shaftId = infos.ShaftID //要操作的数据id
  340. //点击关联的元空间
  341. if (val === "SpaceCount") {
  342. this.spaceList = infos.SpaceList
  343. this.isTableRightShow = true
  344. }
  345. },
  346. //表格点击事件
  347. handleTdClick(el, rowArr) {
  348. //点击的是表头
  349. if (rowArr.row < 0) {
  350. return;
  351. }
  352. //被筛选过后的数组
  353. let trimmedArr = this.trimmedRows();
  354. //是否启用了排序
  355. let isSort = this.tableExample.getPlugin("columnSorting").isSorted();
  356. if (trimmedArr.length && isSort) {
  357. let sortArr = this.myHotArr.getPlugin("columnSorting").rowsMapper
  358. .__arrayMap;
  359. let infos = this.tableData[trimmedArr[sortArr[rowArr.row]]];
  360. this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
  361. } else if (isSort) {
  362. //排序后的数组
  363. let sortArr = this.tableExample.getPlugin("columnSorting").rowsMapper.__arrayMap;
  364. let infos = this.tableData[sortArr[rowArr.row]];
  365. this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
  366. } else if (trimmedArr.length) {
  367. let infos = this.tableData[trimmedArr[rowArr.row]];
  368. this.getInfors(infos, { row: trimmedArr[rowArr.row], col: rowArr.col });
  369. } else {
  370. let infos = this.tableData[rowArr.row];
  371. this.getInfors(infos, rowArr);
  372. }
  373. },
  374. //获取被筛选掉的行号
  375. trimmedRows() {
  376. // var plugin = hot.getPlugin('trimRows').trimmedRows;//获取被筛选掉的行号
  377. var plugin = this.tableExample.getPlugin("trimRows").trimmedRows;
  378. let dataLength = this.tableData.length;
  379. let dataArr = new Array();
  380. for (let i = 0; i < dataLength; i++) {
  381. dataArr.push(i);
  382. }
  383. if (plugin.length <= 0) {
  384. dataArr = undefined;
  385. } else {
  386. dataArr = this.array_diff(dataArr, plugin);
  387. }
  388. return dataArr || [];
  389. // var DataArray = new Array();
  390. // for (var i = 0; i < plugin.length; i++) {
  391. // // 通过行号获取数据
  392. // DataArray.push(this.tableExample.getSourceDataAtRow(plugin[i]));
  393. // }
  394. },
  395. //去除数组中相同的元素
  396. array_diff(a, b) {
  397. for (var i = 0; i < b.length; i++) {
  398. for (var j = 0; j < a.length; j++) {
  399. if (a[j] == b[i]) {
  400. a.splice(j, 1);
  401. j = j - 1;
  402. }
  403. }
  404. }
  405. return a;
  406. }
  407. }
  408. };
  409. </script>
  410. <style lang="less" scoped>
  411. #deviceList {
  412. overflow: hidden;
  413. height: 100%;
  414. background-color: #fff;
  415. padding: 10px;
  416. position: relative;
  417. .right {
  418. background: #fff;
  419. }
  420. .search-header {
  421. overflow: hidden;
  422. padding-bottom: 10px;
  423. border-bottom: 1px solid #bcbcbc;
  424. }
  425. .tableBox {
  426. display: flex;
  427. height: calc(100% - 140px);
  428. margin-top: 10px;
  429. .tableLeft {
  430. flex: 2;
  431. margin-right: 20px;
  432. }
  433. .tableRight {
  434. flex: 1;
  435. // display: none;
  436. border-left: 1px solid #dadada;
  437. padding: 5px 15px;
  438. margin-right: 5px;
  439. box-shadow: 0px 1px 5px 0px rgba(59, 66, 84, 0.15);
  440. .table_right_box::after{
  441. display: block;
  442. content: "";
  443. clear: both;
  444. }
  445. .close_right {
  446. float: right;
  447. cursor: pointer;
  448. }
  449. }
  450. }
  451. }
  452. .el-pagination button, .el-pagination span:not([class*=suffix]) {
  453. vertical-align: middle;
  454. }
  455. </style>