index.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597
  1. <template>
  2. <div class="relation-ship" v-loading="loading">
  3. <section style="margin-top: 20px">
  4. <el-button
  5. style="padding: 10px"
  6. icon="el-icon-back"
  7. @click="back"
  8. />
  9. <el-button
  10. type="primary"
  11. @click="addBtn"
  12. >添加关系
  13. </el-button>
  14. <el-button
  15. type="default"
  16. style="float: right"
  17. @click="excel"
  18. >
  19. Excel导出
  20. </el-button>
  21. </section>
  22. <section>
  23. <el-row>
  24. <el-col :span="12">
  25. <p class="border-left-8">主对象
  26. <span>{{MainObject}}</span></p>
  27. <label>所属建筑楼层:</label>
  28. <el-select disabled v-model="buildValue">
  29. <el-option
  30. v-for="item in options"
  31. :key="item.value"
  32. :label="item.label"
  33. :value="item.value"
  34. />
  35. </el-select>
  36. <label>类型:</label>
  37. <el-cascader
  38. :options="typeList"
  39. :props="props"
  40. collapse-tags
  41. clearable
  42. disabled
  43. />
  44. <el-input
  45. placeholder="请输入"
  46. @keyup.enter.native="queryTable(1)"
  47. v-model="mainValue"
  48. style="margin-left: 5px"
  49. class="min-margin"
  50. >
  51. <i
  52. slot="suffix"
  53. class="el-input__icon el-icon-search cursor"
  54. @click="queryTable(1)"
  55. />
  56. </el-input>
  57. </el-col>
  58. <el-col :span="12">
  59. <p class="border-left-8">从对象
  60. <span>{{FromObject}}</span></p>
  61. <label>所属建筑楼层:</label>
  62. <el-select disabled v-model="buildValue">
  63. <el-option
  64. v-for="item in options"
  65. :key="item.value"
  66. :label="item.label"
  67. :value="item.value"
  68. />
  69. </el-select>
  70. <label>类型:</label>
  71. <el-cascader
  72. :options="typeList"
  73. :props="props"
  74. collapse-tags
  75. clearable
  76. disabled
  77. />
  78. <el-input
  79. placeholder="请输入"
  80. @keyup.enter.native="queryTable(2)"
  81. v-model="formValue"
  82. style="margin-left: 5px"
  83. class="min-margin"
  84. >
  85. <i
  86. slot="suffix"
  87. class="el-input__icon el-icon-search cursor"
  88. @click="queryTable(2)"
  89. />
  90. </el-input>
  91. </el-col>
  92. </el-row>
  93. </section>
  94. <section class="table-list">
  95. <!-- :span-method="objectSpanMethod"
  96. -->
  97. <el-table
  98. :data="tableData"
  99. :span-method="objectSpanMethod"
  100. :header-cell-style="{background:'#e1e4e5',color:'#2b2b2b', lineHeight: '30px'}"
  101. :cell-style="cellStyle"
  102. class="table"
  103. >
  104. <el-table-column
  105. prop="Name"
  106. label="全局名称"
  107. width="180"
  108. align="left"
  109. min-width="100"
  110. >
  111. </el-table-column>
  112. <el-table-column
  113. prop="LocalId"
  114. label="本地编码"
  115. align="left"
  116. min-width="100"
  117. >
  118. </el-table-column>
  119. <el-table-column
  120. prop="LocalName"
  121. label="本地名称"
  122. align="left"
  123. min-width="100"
  124. >
  125. </el-table-column>
  126. <el-table-column
  127. prop="CADID"
  128. label="CADID"
  129. align="left"
  130. min-width="100"
  131. >
  132. </el-table-column>
  133. <el-table-column
  134. label="对象详情"
  135. prop="btn"
  136. align="left"
  137. min-width="90"
  138. >
  139. <template slot-scope="scope">
  140. <el-button
  141. type="text"
  142. size="mini"
  143. @click="lookOver(scope.$index, scope.row)">查看
  144. </el-button>
  145. </template>
  146. </el-table-column>
  147. <el-table-column
  148. class-name="td-bl"
  149. prop="cName"
  150. label="全局名称"
  151. width="180"
  152. align="left"
  153. >
  154. </el-table-column>
  155. <el-table-column
  156. prop="cLocalId"
  157. align="left"
  158. label="本地编码"
  159. >
  160. </el-table-column>
  161. <el-table-column
  162. prop="cLocalName"
  163. label="本地名称"
  164. align="left"
  165. >
  166. </el-table-column>
  167. <el-table-column
  168. prop="cCADID"
  169. label="CADID"
  170. align="left"
  171. >
  172. </el-table-column>
  173. <el-table-column
  174. label="对象详情"
  175. align="left"
  176. >
  177. <template slot-scope="scope">
  178. <el-button
  179. type="text"
  180. size="mini"
  181. @click="lookOver(scope.$index, scope.row)">查看
  182. </el-button>
  183. </template>
  184. </el-table-column>
  185. <el-table-column
  186. label="操作"
  187. align="left"
  188. >
  189. <template slot-scope="scope">
  190. <!-- <el-button-->
  191. <!-- size="mini"-->
  192. <!-- icon="el-icon-delete"-->
  193. <!-- @click="deleteObject(scope.$index, scope.row)">-->
  194. <!-- </el-button>-->
  195. <el-popconfirm
  196. title="确定删除吗?"
  197. @onConfirm="deleteObject(scope.$index, scope.row)"
  198. >
  199. <el-button slot="reference" size="mini" icon="el-icon-delete"/>
  200. </el-popconfirm>
  201. </template>
  202. </el-table-column>
  203. </el-table>
  204. </section>
  205. <!-- 分页 -->
  206. <!-- <el-pagination-->
  207. <!-- @size-change="handleSizeChange"-->
  208. <!-- @current-change="handleCurrentChange"-->
  209. <!-- :current-page="currentPage"-->
  210. <!-- :page-sizes="pageSizes"-->
  211. <!-- :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"-->
  212. <!-- style="float:right;margin-top:10px;padding:2px 5px;">-->
  213. <!-- </el-pagination>-->
  214. <exportExcel
  215. ref="export"
  216. :values="values"
  217. />
  218. <addRelationShip
  219. ref="addShipComponent"
  220. :values="values"
  221. @update="update"
  222. />
  223. <editRelationShip
  224. ref="editShipComponent"
  225. :values="values"
  226. />
  227. </div>
  228. </template>
  229. <script>
  230. import {mapGetters} from 'vuex'
  231. import exportExcel from "../../../components/relation/relationShip/Modal/exportExcel";
  232. import addRelationShip from "../../../components/relation/relationShip/Modal/addRelationShip";
  233. import editRelationShip from "../../../components/relation/relationShip/Modal/editRelationShip";
  234. import {relAdd, relDelete, relQuery} from "../../../api/relation/api";
  235. export default {
  236. name: "index",
  237. data() {
  238. return {
  239. MainObject: `(限制条件:对象类型的范围(包括:${localStorage.getItem('MainObject')}类型)`,
  240. FromObject: `(限制条件:对象类型的范围(包括:${localStorage.getItem('FromObject')}类型)`,
  241. pageSizes: [10, 20, 50, 100],
  242. pageSize: 50,
  243. currentPage: 1,
  244. total: 0,
  245. values: {
  246. relation_maintenance: '关系维护',
  247. optionTips: `请下载最新最新<${localStorage.getItem('RelationTypeName')}>数据进行手动维护`, //请下载最新最新 xxxx 数据进行手动维护
  248. currentNum: '当前关系数量:',
  249. download: '下载模板(含数据)',
  250. lastTime: '最后更新时间为', //最后更新时间为
  251. uploadTxt: '将Excel文件拖到此处,或<em>单击上传Excel文件<em>',
  252. uploadTips: '上传的Excel数据将完全覆盖当前关系表(关系表先前数据不会保留)',
  253. downloadFile: ' 下载报告文件',
  254. back: '返回',
  255. done: '完成',
  256. addShip: '添加关系',
  257. editShip: '编辑关系',
  258. codeTip: '请填写主被控设备对象识别编码',
  259. deviceTip: '请填写主被控设备对象设备号',
  260. codeTitle: '识别编码对应:',
  261. mainObject: '主对象:',
  262. affiliatedObject: '从对象:',
  263. pleaseEnter: '请输入',
  264. pleaseEnterCode: '请输入识别编码',
  265. add: '添加',
  266. cancel: '取消',
  267. delete: '删除关系'
  268. },
  269. mainValue: '',
  270. formValue: '',
  271. options: [
  272. {
  273. value: 'all',
  274. label: '全选'
  275. }, {
  276. value: '选项2',
  277. label: '双皮奶'
  278. }, {
  279. value: '选项3',
  280. label: '蚵仔煎'
  281. }, {
  282. value: '选项4',
  283. label: '龙须面'
  284. }, {
  285. value: '选项5',
  286. label: '北京烤鸭'
  287. }],
  288. buildValue: 'all',
  289. props: {multiple: true},
  290. typeList: [{
  291. value: 1,
  292. label: '东南',
  293. children: [
  294. {
  295. value: 2,
  296. label: '上海',
  297. }, {
  298. value: 7,
  299. label: '江苏',
  300. }, {
  301. value: 12,
  302. label: '浙江',
  303. }]
  304. }, {
  305. value: 17,
  306. label: '西北',
  307. children: [{
  308. value: 18,
  309. label: '陕西',
  310. }, {
  311. value: 21,
  312. label: '新疆维吾尔族自治区',
  313. }]
  314. }],
  315. tableData: [],
  316. loading: false,
  317. needMergeArr: ['Name', 'LocalId', 'LocalName', 'CADID','btn'],
  318. rowMergeArrs: {}
  319. // needMergeArr: ['name', 'id'], // 有合并项的列
  320. // rowMergeArrs: {}, // 包含需要一个或多个合并项信息的对象
  321. }
  322. },
  323. components: {exportExcel, addRelationShip, editRelationShip},
  324. created() {
  325. this.$store.dispatch('setBreadcrumb', [{
  326. label: '全部关系总览',
  327. path: '/relation/overview'
  328. }, {
  329. label: '全部关系总览',
  330. path: '/relation/overview'
  331. },
  332. {
  333. label: localStorage.getItem('RelationTypeName'),
  334. },
  335. ])
  336. this.init()
  337. },
  338. watch: {
  339. projectId() {
  340. this.init()
  341. }
  342. },
  343. computed: {
  344. ...mapGetters('layout', ["projectId"])
  345. },
  346. mounted() {
  347. // this.getSpanArr(this.tableData)
  348. },
  349. methods: {
  350. deepCopy(obj) {
  351. return JSON.parse(JSON.stringify(obj))
  352. },
  353. init() {
  354. this.loading = true
  355. let data = {
  356. projectId: this.projectId,
  357. ObjectType: 1,
  358. RelType: localStorage.getItem('RelManualType'),
  359. PageSize: this.pageSize,
  360. PageNumber: this.currentPage
  361. };
  362. relQuery(data, res => {
  363. this.filterTable(res)
  364. // this.total = res.Total
  365. this.loading = false
  366. })
  367. },
  368. filterTable(list) {
  369. let arr = []
  370. if(list.Content.length) {
  371. list.Content.forEach(i => {
  372. i.ObjectInfo && i.ObjectInfo.forEach(j => {
  373. arr.push({
  374. Name: i.Name,
  375. LocalName: i.LocalName,
  376. LocalId: i.LocalId,
  377. CADID: i.CADID,
  378. cName: j.Name,
  379. cLocalName: j.LocalName,
  380. cLocalId: j.LocalId,
  381. cCADID: j.CADID,
  382. Id: i.Id,
  383. cId: j.Id
  384. })
  385. })
  386. })
  387. this.tableData = this.deepCopy(arr)
  388. this.rowMergeArrs = this.rowMergeHandle(this.needMergeArr, this.tableData); // 处理数据
  389. } else {
  390. this.tableData = []
  391. }
  392. },
  393. back() {
  394. this.$router.go(-1)
  395. },
  396. addBtn() {
  397. this.$refs.addShipComponent.addShipDialog = true
  398. },
  399. excel() {
  400. this.$refs.export.dialogExport = true
  401. },
  402. queryTable(i) {
  403. let param = {}, RelType = localStorage.getItem('RelManualType');
  404. if (i === 1) {
  405. param = {
  406. ObjectType: 1,
  407. RelType,
  408. Vague: this.mainValue
  409. }
  410. } else {
  411. param = {
  412. ObjectType: 2,
  413. RelType,
  414. Vague: this.formValue
  415. }
  416. }
  417. relQuery(param, res => {
  418. this.filterTable(res)
  419. console.log(res, '==object==')
  420. })
  421. },
  422. // addShip(index) {
  423. // let that = this
  424. // relAdd(index).then(res => {
  425. // if (res.data.Result === "failure") {
  426. // if(res.data.ErrorType == 1) {
  427. // this.mainError = res.data.Message
  428. // debugger
  429. // } else if(res.data.ErrorType == 2) {
  430. //
  431. // } else {
  432. // debugger
  433. // this.$message.error(res.data.Message);
  434. //
  435. // }
  436. //
  437. // } else if (res.data.Result === "success") {
  438. // this.$message.success(res.data.Message);
  439. // this.init()
  440. // that.$refs.addShipComponent.addShipDialog = false
  441. // that.$refs.addShipComponent.codeValue = ''
  442. // that.$refs.addShipComponent.ruleForm.codeList = [{value:''}]
  443. // that.$refs.addShipComponent.ruleForm.main = ''
  444. // }
  445. // })
  446. // },
  447. //分页更换size
  448. handleSizeChange(val) {
  449. this.currentPage = 1;
  450. this.pageSize = val;
  451. this.init()
  452. },
  453. //分页更换页
  454. handleCurrentChange(val) {
  455. this.currentPage = val;
  456. this.init()
  457. },
  458. update() {
  459. this.init()
  460. },
  461. lookOver(index, row) {
  462. console.log(index, row)
  463. // this.$refs.editShipComponent.editShipDialog = true
  464. },
  465. deleteObject(index, row) {
  466. let param = {
  467. "FromId": row.Id,
  468. "RelType": localStorage.getItem('RelManualType'),
  469. "ToId": row.cId
  470. }
  471. relDelete(param, res => {
  472. this.init()
  473. })
  474. },
  475. cellStyle({row, column, rowIndex, columnIndex}) {
  476. if (column.label === '全局名称') {
  477. return {
  478. background: '#f9f9f9',
  479. color: '#606266',
  480. lineHeight: '30px'
  481. }
  482. }
  483. },
  484. objectSpanMethod({row, column, rowIndex, columnIndex}) {
  485. if (column.property === 'Name') return this.mergeAction('Name', rowIndex, column);
  486. if (column.property === 'LocalId' && row.LocalId != undefined) return this.mergeAction('LocalId', rowIndex, column);
  487. if (column.property === 'LocalName' && row.LocalName != undefined) return this.mergeAction('LocalName', rowIndex, column);
  488. if (column.property === 'CADID' && row.CADID != undefined) return this.mergeAction('CADID', rowIndex, column);
  489. if (column.property === 'btn') return this.mergeAction('Name', rowIndex, column);
  490. },
  491. mergeAction(val, rowIndex, colData) {
  492. let _row = this.rowMergeArrs[val].rowArr[rowIndex];
  493. let _col = _row > 0 ? 1 : 0;
  494. return [_row, _col];
  495. },
  496. rowMergeHandle(arr, data) {
  497. if (!Array.isArray(arr) && !arr.length) return false;
  498. if (!Array.isArray(data) && !data.length) return false;
  499. let needMerge = {};
  500. arr.forEach(i => {
  501. needMerge[i] = {
  502. rowArr: [],
  503. rowMergeNum: 0
  504. };
  505. data.forEach((item, index) => {
  506. if (index === 0) {
  507. needMerge[i].rowArr.push(1);
  508. needMerge[i].rowMergeNum = 0;
  509. } else {
  510. if (item[i] === data[index - 1][i]) {
  511. needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1;
  512. needMerge[i].rowArr.push(0);
  513. } else {
  514. needMerge[i].rowArr.push(1);
  515. needMerge[i].rowMergeNum = index;
  516. }
  517. }
  518. });
  519. });
  520. return needMerge;
  521. }
  522. }
  523. }
  524. </script>
  525. <style scoped lang="less">
  526. .relation-ship {
  527. @media screen and (max-width: 1500px) {
  528. .min-margin{
  529. margin-top: 10px;
  530. }
  531. }
  532. .cursor {
  533. cursor: pointer;
  534. }
  535. /deep/ .el-input__inner {
  536. width: 220px;
  537. }
  538. /deep/ .el-input {
  539. width: auto;
  540. }
  541. /deep/.el-table__body-wrappe {
  542. }
  543. .table-list {
  544. width: 100%;
  545. display: block;
  546. /*height: calc(100% - 71px);*/
  547. }
  548. .table {
  549. width: 100%;
  550. margin-top: 20px;
  551. .el-button {
  552. border: none;
  553. background: transparent;
  554. &:link, &:visited, &:hover, &:active {
  555. background: #f5f7fa;
  556. }
  557. }
  558. }
  559. .border-left-8 {
  560. border-left: 8px solid black;
  561. margin: 10px 0;
  562. font-weight: 600;
  563. text-indent: 10px;
  564. span {
  565. color: #AAAAAA;
  566. margin-left: 20px;
  567. }
  568. }
  569. }
  570. </style>