addsystem.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536
  1. <template>
  2. <div id="deviceList">
  3. <el-row class="right">
  4. <el-col span="4">
  5. <span style="float: left"
  6. >当前选择的系统类型:{{ category.categoryName }}</span
  7. >
  8. </el-col>
  9. <el-col span="20" style="text-align: right">
  10. <el-select
  11. :disabled="showType === 'all'"
  12. v-model="showType"
  13. @change="initTable"
  14. style="width: 140px; margin-right: 10px; vertical-align: bottom"
  15. >
  16. <el-option
  17. v-for="item in showTypes"
  18. :key="item.value"
  19. :label="item.label"
  20. :value="item.value"
  21. ></el-option>
  22. </el-select>
  23. <span>增加</span>
  24. <el-input-number
  25. v-model="addNum"
  26. :controls="false"
  27. style="width: 50px"
  28. :min="1"
  29. :max="50"
  30. ></el-input-number>
  31. <span>个{{ category.categoryName }}</span>
  32. <el-button @click="handleAddTableRow">增加</el-button>
  33. </el-col>
  34. </el-row>
  35. <div class="tableBox">
  36. <div
  37. class="center middle_sty"
  38. style="flex: 2"
  39. v-show="tableData && !tableData.length"
  40. >
  41. <p>
  42. <i class="icon-wushuju iconfont"></i>
  43. 暂无数据
  44. </p>
  45. </div>
  46. <div class="tableLeft" v-show="tableData && tableData.length">
  47. <handson-table ref="table"></handson-table>
  48. </div>
  49. </div>
  50. <el-row class="center">
  51. <el-button
  52. type="primary"
  53. size="medium"
  54. @click="handleCreateTableData"
  55. class="create_button"
  56. :disabled="createDisable"
  57. >创建系统</el-button
  58. >
  59. </el-row>
  60. <!-- 上传图片组件 -->
  61. <upload-img-dialog
  62. :read="onlyRead ? true : false"
  63. @changeFile="imgChange"
  64. :keysArr="imgsArr"
  65. firmDataType="row"
  66. :dialog="myDialog"
  67. ></upload-img-dialog>
  68. <!-- 关联楼层 -->
  69. <editSysfloor
  70. ref="editFloor"
  71. @relateSuccess="relateSuccess"
  72. :isCreate="true"
  73. ></editSysfloor>
  74. <!-- 多选枚举类型维护 -->
  75. <menum
  76. :dialog="myDialog"
  77. :updateInfoData="updateInfoData"
  78. :updateInput="updateInput"
  79. @change="handleChangeMenum"
  80. ></menum>
  81. </div>
  82. </template>
  83. <script>
  84. import tools from "@/utils/old-adm/scan/tools";
  85. import showTools from "@/utils/old-adm/handsontable/notShow";
  86. import text from "@/utils/old-adm/handsontable/mainText";
  87. import session from "@/utils/storageUtil";
  88. import editSysfloor from "@/components/old-adm/ledger/components/lib/editSysFloor";
  89. import uploadImgDialog from "@/components/old-adm/dialogs/list/uploadImgDialog";
  90. import handsonTable from "@/components/old-adm/common/handsontable";
  91. import Dict from "@/controller/old-adm/dicController";
  92. import Scan from "@/controller/old-adm/ScanController";
  93. import { mapGetters, mapActions } from "vuex";
  94. import BuildController from "@/controller/old-adm/buildController";
  95. import menum from "@/components/old-adm/dialogs/list/menum";
  96. const { getDataDictionary } = Dict;
  97. const { createSystemBuildFloor } = Scan;
  98. export default {
  99. components: {
  100. handsonTable,
  101. menum,
  102. editSysfloor,
  103. uploadImgDialog,
  104. },
  105. data() {
  106. return {
  107. addNum: 1,
  108. onlyRead: false,
  109. showTypes: [
  110. { value: "Visible", label: "只看需交付的" },
  111. { value: "all", label: "全部" },
  112. ],
  113. tableHeader: [],
  114. tableData: session.get("systemAddData")
  115. ? session.get("systemAddData").length
  116. ? session.get("systemAddData")
  117. : [{}]
  118. : [{}],
  119. copyTableData: [],
  120. category: "", //当前设备类
  121. myDialog: {
  122. qrcode: false, //二维码弹窗
  123. uploadFiles: false, //上传文件
  124. uploadImgs: false, //上传单个图片
  125. pic: false, //多个图片
  126. addDevice: false,
  127. systemType: false,
  128. details: false, //详情页
  129. changeRea: false,
  130. lookPic: false, //图片查看
  131. menum: false, //临时多选枚举类型信息点
  132. },
  133. inputMap: {
  134. flowBuild: {
  135. editable: true,
  136. code: "flowBuild",
  137. name: "建筑楼层",
  138. path: "flowBuild",
  139. category: "STATIC",
  140. dataType: "ENUM",
  141. },
  142. }, //信息点和输入方式映射表
  143. qrcodeUrl: "", //二维码图片地址
  144. filesArr: [], //保存临时的文件key
  145. imgsArr: [], //临时保存的图片key数组
  146. picsArr: [], //临时设备图片keys数组
  147. systemId: null,
  148. graphyId: null,
  149. id: 0,
  150. showType: this.$route.query.showType,
  151. EquipmentList: [],
  152. createDisable: false,
  153. updateInfoData: {}, //当前信息点信息
  154. updateInfoPoint: "", //临时维护信息点键
  155. updateInput: "", //临时维护信息点值
  156. };
  157. },
  158. computed: {
  159. ...mapGetters("layout", ["projectId", "secret", "userId"]),
  160. },
  161. created() {
  162. this.category = this.$route.query;
  163. this.getBuildData();
  164. this.getTableHeader();
  165. },
  166. methods: {
  167. //获取建筑数据
  168. getBuildData() {
  169. let param = {
  170. pageNumber: 1,
  171. pageSize: 1000,
  172. projection: ["id", "localName"],
  173. };
  174. const res = BuildController.buildingQuery(param);
  175. let data = res.content.map((t) => {
  176. return {
  177. Code: t.id,
  178. Name: t.localName,
  179. };
  180. });
  181. data.unshift({ Code: "", Name: "未明确建筑" });
  182. this.buildingData = data;
  183. },
  184. // 获取表头数据(初始化表格)
  185. async getTableHeader() {
  186. let params = {
  187. orders: "sort asc, name desc",
  188. pageNumber: 1,
  189. pageSize: 1000,
  190. type: this.category.category,
  191. };
  192. await getDataDictionary(params, (res) => {
  193. this.tableHeader = res.content;
  194. this.tableHeader.forEach((item) => {
  195. if (item.path) {
  196. this.inputMap[item.path] = item;
  197. }
  198. });
  199. this.initTable();
  200. });
  201. },
  202. // 创建设备数据
  203. async handleCreateTableData() {
  204. let params = {};
  205. let newData = this.tableData.filter((item) => {
  206. let keys = Object.keys(item);
  207. keys.map((key) => {
  208. //将值为空字符串的属性删除
  209. if (item[key] == "") {
  210. delete item[key];
  211. }
  212. });
  213. let newK = Object.keys(item);
  214. if (newK.length) {
  215. return item;
  216. }
  217. });
  218. if (!newData.length) {
  219. this.$message("创建信息为空,请录入信息后再创建!");
  220. return;
  221. }
  222. let flag = false;
  223. newData.map((item) => {
  224. if (!item.localName) {
  225. flag = true;
  226. }
  227. item.classCode = this.category.category;
  228. });
  229. if (flag) {
  230. this.$message.info("存在系统的本地名称为空,请检查");
  231. return;
  232. }
  233. params.content = newData;
  234. this.createDisable = true;
  235. createSystemBuildFloor(params, (res) => {
  236. this.createDisable = false;
  237. this.$message.success("创建成功");
  238. session.remove("systemAddData");
  239. this.$router.push({
  240. name: "systemlist",
  241. params: { SysType: this.category.category },
  242. });
  243. });
  244. },
  245. // 删除表格行
  246. handleDeleteTableRow(a, b, c, d) {
  247. if (d && d === "ContextMenu.removeRow") {
  248. this.$message.success("删除成功");
  249. this.formaTableData();
  250. }
  251. },
  252. // 添加行
  253. handleAddTableRow() {
  254. let addRowLength = this.addNum;
  255. for (let i = 0; i < addRowLength; i++) {
  256. this.tableData.push({});
  257. }
  258. this.initTable();
  259. this.formaTableData();
  260. },
  261. //修改
  262. handleUpdataTable(changeData, source) {
  263. this.formaTableData();
  264. },
  265. //保存去掉空字段的新增数据
  266. formaTableData() {
  267. let newData = this.tableData.filter((item) => {
  268. let keys = Object.keys(item);
  269. keys.map((key) => {
  270. //将值为空字符串的属性删除
  271. if (item[key] == "") {
  272. delete item[key];
  273. }
  274. });
  275. if (keys.length && Object.keys(item).length) {
  276. return item;
  277. }
  278. });
  279. session.set("systemAddData", newData);
  280. },
  281. //格式化表头显示的数据
  282. formatHeaderData(list) {
  283. let arr = tools.copyArr(list);
  284. let data = showTools.headerTextFilter(
  285. arr,
  286. "system",
  287. this.onlyRead,
  288. this.showType
  289. );
  290. data.unshift("所属建筑楼层");
  291. return data;
  292. },
  293. formatHeaderType(list) {
  294. //格式化表头头映射的数据
  295. let arr = tools.copyArr(list);
  296. let data = showTools.headerTypeFilter(
  297. arr,
  298. "system",
  299. this.onlyRead,
  300. this.showType
  301. );
  302. data.unshift({
  303. data: "buildingFloorInfoList",
  304. renderer: text.sysInBuildFloor,
  305. });
  306. return data;
  307. },
  308. initTable() {
  309. //实例化表格
  310. let settings = {
  311. data: this.tableData,
  312. colHeaders: this.formatHeaderData(this.tableHeader),
  313. columns: this.formatHeaderType(this.tableHeader),
  314. rowHeights: 30,
  315. fillHandle: "vertical", //允许纵向填充
  316. maxRows: this.tableData.length,
  317. contextMenu: this.onlyRead
  318. ? false
  319. : {
  320. items: {
  321. remove_row: {
  322. name: "删除该系统",
  323. },
  324. },
  325. },
  326. autoColumnSize: true,
  327. language: "zh-CN",
  328. manualColumnResize: true,
  329. manualColumnMove: true,
  330. // 事件
  331. afterChange: this.handleUpdataTable, //修改后
  332. afterFilter: this.trimmedRows, //排序前
  333. afterRemoveRow: this.handleDeleteTableRow, //右键删除
  334. afterOnCellMouseDown: this.handleTdClick, //鼠标点击
  335. };
  336. this.$nextTick(() => {
  337. this.tableExample = this.$refs.table.init(settings);
  338. });
  339. },
  340. //去除数组中相同的元素
  341. array_diff(a, b) {
  342. for (var i = 0; i < b.length; i++) {
  343. for (var j = 0; j < a.length; j++) {
  344. if (a[j] == b[i]) {
  345. a.splice(j, 1);
  346. j = j - 1;
  347. }
  348. }
  349. }
  350. return a;
  351. },
  352. //表格点击事件
  353. handleTdClick(el, rowArr) {
  354. //点击的是表头
  355. if (rowArr.row < 0) {
  356. return;
  357. }
  358. //被筛选过后的数组
  359. let trimmedArr = this.trimmedRows();
  360. //是否启用了排序
  361. let isSort = this.tableExample.getPlugin("columnSorting").isSorted();
  362. if (trimmedArr.length && isSort) {
  363. let sortArr =
  364. this.myHotArr.getPlugin("columnSorting").rowsMapper.__arrayMap;
  365. let infos = this.tableData[trimmedArr[sortArr[rowArr.row]]];
  366. this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
  367. } else if (isSort) {
  368. //排序后的数组
  369. let sortArr =
  370. this.tableExample.getPlugin("columnSorting").rowsMapper.__arrayMap;
  371. let infos = this.tableData[sortArr[rowArr.row]];
  372. this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
  373. } else if (trimmedArr.length) {
  374. let infos = this.tableData[trimmedArr[rowArr.row]];
  375. this.getInfors(infos, { row: trimmedArr[rowArr.row], col: rowArr.col });
  376. } else {
  377. let infos = this.tableData[rowArr.row];
  378. this.getInfors(infos, rowArr);
  379. }
  380. },
  381. //获取被筛选掉的行号
  382. trimmedRows() {
  383. var plugin = this.tableExample.getPlugin("trimRows").trimmedRows;
  384. let dataLength = this.tableData.length;
  385. let dataArr = new Array();
  386. for (let i = 0; i < dataLength; i++) {
  387. dataArr.push(i);
  388. }
  389. if (plugin.length <= 0) {
  390. dataArr = undefined;
  391. } else {
  392. dataArr = this.array_diff(dataArr, plugin);
  393. }
  394. return dataArr || [];
  395. },
  396. getInfors(infos, row) {
  397. let val = this.tableExample.colToProp(row.col);
  398. let inputData = this.inputMap[val];
  399. this.row = row.row;
  400. this.messKey = val;
  401. switch (val) {
  402. //操作
  403. case "caozuo":
  404. // window.open(`http://adm.sagacloud.cn:8058/spread?id=${infos.EquipID}&pid=${this.projectId}&secret=${this.secret}`,"_blank")
  405. this.$message("开发中...");
  406. break;
  407. //设备二维码图片
  408. // case 'EquipQRCode':
  409. // case "defaultQRCode":
  410. // this.qrcodeUrl = this.tableData[row.row].EquipQRCode;
  411. // if (!!this.qrcodeUrl) {
  412. // this.myDialog.qrcode = true;
  413. // } else {
  414. // this.$message("此设备没有设备二维码");
  415. // }
  416. // break;
  417. //关联设备数量
  418. case "count":
  419. if (!this.onlyRead) {
  420. this.myDialog.relevance = true;
  421. }
  422. break;
  423. //所属建筑楼层
  424. case "buildingFloorInfoList":
  425. if (!this.onlyRead) {
  426. this.$refs.editFloor.showDialog(this.tableData[row.row]);
  427. }
  428. break;
  429. //系统图(F2)
  430. case "infos.systemChart":
  431. let SSPPdata = tools.dataForKey(this.tableData[row.row], val);
  432. this.imgsArr = SSPPdata ? SSPPdata : [];
  433. this.myDialog.uploadImgs = true;
  434. return false;
  435. default:
  436. break;
  437. }
  438. // 维护多选枚举值
  439. if (!this.onlyRead && inputData.dataType == "MENUM") {
  440. this.updateInfoData = inputData;
  441. this.updateInfoPoint = val;
  442. this.updateInput = tools.dataForKey(this.tableData[row.row], val);
  443. this.myDialog.menum = true;
  444. return false;
  445. }
  446. if (!this.onlyRead && !inputData.editable) {
  447. this.$confirm("该信息点的值为自动生成,不可人工维护!", "提示", {
  448. confirmButtonText: "我知道了",
  449. showCancelButton: false,
  450. type: "warning",
  451. center: true,
  452. }).then(() => {
  453. return false;
  454. });
  455. }
  456. },
  457. //多选枚举类型值修改
  458. handleChangeMenum(newValue) {
  459. tools.setDataForKey(
  460. this.tableData[this.row],
  461. this.updateInfoPoint,
  462. newValue
  463. );
  464. this.handleUpdataTable(
  465. [[this.row, this.updateInfoPoint, null, newValue]],
  466. "edit"
  467. );
  468. this.myDialog.menum = false;
  469. this.updateInput = "";
  470. },
  471. //上传图片弹窗触发事件
  472. imgChange(keys) {
  473. this.setDataToMain(keys, this.messKey, this.row);
  474. },
  475. //建筑楼层
  476. relateSuccess(data) {
  477. this.tableData[this.row].buildingFloorInfoList = data;
  478. this.tableExample.render();
  479. },
  480. //判断是否有值,有值赋值
  481. setDataToMain(data, key, row) {
  482. if (!!data && data != "--") {
  483. if (!!this.tableData[row]) {
  484. tools.setDataForKey(this.tableData[row], key, data);
  485. this.handleUpdataTable([[row, key, null, data]], "edit");
  486. } else {
  487. this.tableData[row] = {};
  488. tools.setDataForKey(this.tableData[row], key, data);
  489. }
  490. } else {
  491. tools.setDataForKey(this.tableData[row], key, "");
  492. }
  493. },
  494. },
  495. };
  496. </script>
  497. <style lang="less" scoped>
  498. #deviceList {
  499. overflow: hidden;
  500. height: 100%;
  501. background-color: #fff;
  502. padding: 10px;
  503. position: relative;
  504. .right {
  505. background: #fff;
  506. padding: 16px;
  507. line-height: 32px;
  508. }
  509. .search-header {
  510. overflow: hidden;
  511. padding: 0 10px 10px 10px;
  512. border-bottom: 1px solid #bcbcbc;
  513. }
  514. .tableBox {
  515. display: flex;
  516. height: calc(100% - 100px);
  517. margin-top: 10px;
  518. .tableLeft {
  519. flex: 1;
  520. }
  521. }
  522. .create_button {
  523. padding-top: 10px;
  524. }
  525. }
  526. </style>