index.vue 18 KB

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