addproperty.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438
  1. <template>
  2. <div id="deviceList">
  3. <el-row class="right">
  4. <span style="float:left;">当前选择的设备族:{{ category.name }}</span>
  5. <el-select v-model="showType" @change="initTable" style="width:125px;margin-right:10px;vertical-align:bottom;">
  6. <el-option v-for="item in showTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
  7. </el-select>
  8. <span>增加</span>
  9. <el-input-number v-model="addNum" :controls="false" style="width:50px;" :min="1" :max="50"></el-input-number>
  10. <span>个{{ category.name }}</span>
  11. <el-button @click="handleAddTableRow">增加</el-button>
  12. </el-row>
  13. <div class="tableBox">
  14. <div class="center middle_sty" style="flex:2;" v-show="tableData && !tableData.length">
  15. <p>
  16. <i class="icon-wushuju iconfont"></i>
  17. 暂无数据
  18. </p>
  19. </div>
  20. <div class="tableLeft" v-show="tableData && tableData.length">
  21. <handson-table ref="table"></handson-table>
  22. </div>
  23. </div>
  24. <el-row class="center">
  25. <el-button type="primary" size="medium" @click.prevent.once="handleCreateTableData" class="create_button">创建资产</el-button>
  26. </el-row>
  27. <upload-files-dialog :read="onlyRead ? true : false" ref="upload" @changeFile="fileChange" :keysArr="filesArr"
  28. :dialog="myDialog"></upload-files-dialog>
  29. <upload-img-dialog :read="onlyRead ? true : false" @changeFile="imgChange" :keysArr="imgsArr"
  30. :dialog="myDialog"></upload-img-dialog>
  31. <pic-dialog :read="onlyRead ? true : false" :dialog="myDialog" :keysArr="picsArr" @change="changePics"></pic-dialog>
  32. <details-dialog :iframeSrc="iframeSrc" v-if="myDialog.details" :dialog="myDialog"></details-dialog>
  33. </div>
  34. </template>
  35. <script>
  36. import tools from "@/utils/scan/tools"
  37. import handsonUtils from "@/utils/hasontableUtils"
  38. import showTools from "@/utils/handsontable/notShow"
  39. import text from "@/utils/handsontable/mainText"
  40. import session from "@/framework/utils/storage"
  41. import buildFloor from '@/utils/handsontable/buildFloorData'
  42. import handsonTable from "@/components/common/handsontable"
  43. import { createPropertyData } from "@/api/scan/request"
  44. import { getDataDictionary } from "@/api/dict";
  45. import { mapGetters, mapActions } from "vuex"
  46. import uploadFilesDialog from "@/components/dialogs/list/filesDialog"
  47. import uploadImgDialog from "@/components/dialogs/list/uploadImgDialog"
  48. import picDialog from "@/components/dialogs/list/picDialog"
  49. export default {
  50. components: {
  51. uploadFilesDialog,
  52. uploadImgDialog,
  53. picDialog,
  54. handsonTable
  55. },
  56. data() {
  57. return {
  58. addNum: 1,
  59. onlyRead: false,
  60. showTypes: [
  61. { value: "all", label: '全部' },
  62. { value: "Visible", label: '只看采集信息' }
  63. ],
  64. buildFloorData: [],
  65. tableHeader: [],
  66. tableData: session.get("propertyAddData")
  67. ? session.get("propertyAddData").length
  68. ? session.get("propertyAddData")
  69. : [{}]
  70. : [{}],
  71. copyTableData: [],
  72. category: "", //当前设备类
  73. myDialog: {
  74. uploadFiles: false, //上传文件
  75. uploadImgs: false, //上传单个图片
  76. pic: false, //多个图片
  77. addDevice: false,
  78. systemType: false,
  79. details: false, //详情页
  80. lookPic: false //图片查看
  81. },
  82. inputMap: {
  83. flowBuild: {
  84. editable: true,
  85. code: "flowBuild",
  86. name: "建筑楼层",
  87. path: "flowBuild",
  88. category: 'STATIC',
  89. dataType: "ENUM"
  90. }
  91. }, //信息点和输入方式映射表
  92. qrcodeUrl: "", //二维码图片地址
  93. filesArr: [], //保存临时的文件key
  94. imgsArr: [], //临时保存的图片key数组
  95. picsArr: [], //临时设备图片keys数组
  96. systemId: null,
  97. graphyId: null,
  98. id: 0,
  99. showType: this.$route.query.showType,
  100. EquipmentList: []
  101. };
  102. },
  103. computed: {
  104. ...mapGetters("layout", ["projectId", "secret", "userId"])
  105. },
  106. created() {
  107. this.category = this.$route.query;
  108. buildFloor.getData(this.buildFloorData)
  109. this.getTableHeader();
  110. },
  111. methods: {
  112. // 获取表头数据(初始化表格)
  113. async getTableHeader() {
  114. let params = {
  115. orders: "sort asc, name desc",
  116. pageNumber: 1,
  117. pageSize: 1000,
  118. type: this.category.Family
  119. };
  120. await getDataDictionary(params, res => {
  121. this.tableHeader = res.content;
  122. this.tableHeader.forEach(item => {
  123. if (item.path) {
  124. this.inputMap[item.path] = item;
  125. }
  126. })
  127. this.initTable();
  128. });
  129. },
  130. // 创建资产数据
  131. async handleCreateTableData() {
  132. let params = {}
  133. let newData = this.tableData.filter(item => {
  134. let keys = Object.keys(item)
  135. keys.map(key => {
  136. //将值为空字符串的属性删除
  137. if (item[key] == "") {
  138. delete item[key];
  139. }
  140. });
  141. let newK = Object.keys(item)
  142. if (keys.length && newK.length) {
  143. return item;
  144. }
  145. })
  146. if (!newData.length) {
  147. this.$message("创建信息为空,请录入信息后再创建!");
  148. return;
  149. }
  150. let flag = false;
  151. newData.map(item => {
  152. item.family = this.category.Family
  153. if (!item.localName) {
  154. flag = true
  155. }
  156. // 处理建筑-楼层
  157. if (item.flowBuild) {
  158. let BuildingId = item.flowBuild.split("-")[0]
  159. let FloorId = item.flowBuild.split("-")[1]
  160. if (BuildingId && FloorId) {
  161. item.buildingId = BuildingId
  162. item.gloorId = FloorId
  163. } else if (BuildingId && !FloorId) {
  164. item.buildingId = BuildingId
  165. }
  166. }
  167. })
  168. // 添加资产
  169. if (flag) {
  170. this.$message.info("存在设备的本地名称为空,请检查")
  171. return;
  172. }
  173. params.content = newData
  174. await createPropertyData(params, res => {
  175. this.$message.success("添加成功!")
  176. session.remove("propertyAddData")
  177. this.$router.push({
  178. name: "propertyLedger",
  179. params: { Family: this.category.Family }
  180. })
  181. })
  182. },
  183. // 删除表格行
  184. handleDeleteTableRow() {
  185. this.$message.success("删除成功")
  186. this.formaTableData()
  187. },
  188. // 添加行
  189. handleAddTableRow() {
  190. let addRowLength = this.addNum
  191. for (let i = 0; i < addRowLength; i++) {
  192. this.tableData.push({})
  193. }
  194. this.initTable()
  195. this.formaTableData()
  196. },
  197. //修改
  198. handleUpdataTable(changeData, source) {
  199. if (!this.onlyRead && source != 'ObserveChanges.change') {
  200. this.formaTableData()
  201. }
  202. },
  203. //保存去掉空字段的新增数据
  204. formaTableData() {
  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. if (keys.length && Object.keys(item).length) {
  214. return item;
  215. }
  216. })
  217. session.set("propertyAddData", newData);
  218. },
  219. //格式化表头显示的数据
  220. formatHeaderData(list) {
  221. let arr = tools.copyArr(list)
  222. let data = showTools.headerTextFilter(arr, 'property', this.onlyRead, this.showType, true)
  223. data.unshift("所属建筑楼层")
  224. return data
  225. },
  226. //格式化表头头映射的数据
  227. formatHeaderType(list) {
  228. let arr = tools.copyArr(list)
  229. let data = showTools.headerTypeFilter(arr, 'property', this.onlyRead, this.showType, true)
  230. data.unshift({
  231. data: "flowBuild",
  232. renderer: tools.customDropdownRenderer,
  233. editor: "chosen",
  234. chosenOptions: {
  235. data: this.buildFloorData
  236. }
  237. })
  238. return data
  239. },
  240. initTable() {
  241. //实例化表格
  242. let settings = {
  243. data: this.tableData,
  244. colHeaders: this.formatHeaderData(this.tableHeader),
  245. columns: this.formatHeaderType(this.tableHeader),
  246. rowHeights: 30,
  247. maxRows: this.tableData.length,
  248. contextMenu: this.onlyRead ? false : {
  249. items: {
  250. remove_row: {
  251. name: "删除资产"
  252. }
  253. }
  254. },
  255. // 事件
  256. afterChange: this.handleUpdataTable, //修改后
  257. afterFilter: this.trimmedRows, //排序前
  258. afterRemoveRow: this.handleDeleteTableRow, //右键删除
  259. afterOnCellMouseDown: this.handleTdClick //鼠标点击
  260. };
  261. this.$nextTick(() => {
  262. this.tableExample = this.$refs.table.init(settings);
  263. });
  264. },
  265. //去除数组中相同的元素
  266. array_diff(a, b) {
  267. for (var i = 0; i < b.length; i++) {
  268. for (var j = 0; j < a.length; j++) {
  269. if (a[j] == b[i]) {
  270. a.splice(j, 1);
  271. j = j - 1;
  272. }
  273. }
  274. }
  275. return a;
  276. },
  277. //上传文件弹窗触发事件
  278. fileChange(keys) {
  279. this.setDataToMain(keys, this.messKey, this.row);
  280. },
  281. //上传图片弹窗触发事件
  282. imgChange(keys) {
  283. this.setDataToMain(keys, this.messKey, this.row);
  284. },
  285. //设备图片弹窗改变事件
  286. changePics(keys) {
  287. this.setDataToMain(keys, this.messKey, this.row);
  288. },
  289. //表格点击事件
  290. handleTdClick(el, rowArr) {
  291. //点击的是表头
  292. if (rowArr.row < 0) {
  293. return;
  294. }
  295. //被筛选过后的数组
  296. let trimmedArr = this.trimmedRows();
  297. //是否启用了排序
  298. let isSort = this.tableExample.getPlugin("columnSorting").isSorted();
  299. if (trimmedArr.length && isSort) {
  300. let sortArr = this.myHotArr.getPlugin("columnSorting").rowsMapper
  301. .__arrayMap;
  302. let infos = this.tableData[trimmedArr[sortArr[rowArr.row]]];
  303. this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
  304. } else if (isSort) {
  305. //排序后的数组
  306. let sortArr = this.tableExample.getPlugin("columnSorting").rowsMapper
  307. .__arrayMap;
  308. let infos = this.tableData[sortArr[rowArr.row]];
  309. this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
  310. } else if (trimmedArr.length) {
  311. let infos = this.tableData[trimmedArr[rowArr.row]];
  312. this.getInfors(infos, { row: trimmedArr[rowArr.row], col: rowArr.col });
  313. } else {
  314. let infos = this.tableData[rowArr.row];
  315. this.getInfors(infos, rowArr);
  316. }
  317. },
  318. //获取被筛选掉的行号
  319. trimmedRows() {
  320. var plugin = this.tableExample.getPlugin("trimRows").trimmedRows;
  321. let dataLength = this.tableData.length;
  322. let dataArr = new Array();
  323. for (let i = 0; i < dataLength; i++) {
  324. dataArr.push(i);
  325. }
  326. if (plugin.length <= 0) {
  327. dataArr = undefined;
  328. } else {
  329. dataArr = this.array_diff(dataArr, plugin);
  330. }
  331. return dataArr || [];
  332. },
  333. getInfors(infos, row) {
  334. let val = this.tableExample.colToProp(row.col);
  335. let inputData = this.inputMap[val];
  336. this.row = row.row;
  337. this.messKey = val;
  338. switch (val) {
  339. //保险文件--设备文档--安装质检报告
  340. case 'infos.insuranceFile': //保险文件
  341. case 'infos.archive': //设备文档
  342. case 'infos.checkReport': //安装质检报告
  343. case 'infos.maintainManual': //维修保养手册
  344. case 'infos.approachingAcceptance': //进场验收单
  345. case 'infos.acceptanceReport': //验收报告
  346. case 'infos.operationManual': //操作说明书
  347. case 'infos.originalCertificate': //原厂证明
  348. case 'infos.testReport': //检测报告
  349. case 'infos.productCertification': //产品合格证
  350. case 'infos.installInstruction': //安装说明书
  351. case 'infos.supplierContract': //供应合同
  352. case 'infos.drawing': //设备图纸
  353. case 'infos.installDrawing': //安装图纸
  354. let IPSdata = tools.dataForKey(this.tableData[row.row], val);
  355. this.filesArr = IPSdata ? IPSdata : [];
  356. this.myDialog.uploadFiles = true;
  357. break;
  358. //安装照片--设备铭牌照片
  359. case 'infos.installPic':
  360. case 'infos.nameplate':
  361. let SSPPdata = tools.dataForKey(this.tableData[row.row], val);
  362. this.imgsArr = SSPPdata ? SSPPdata : [];
  363. this.myDialog.uploadImgs = true;
  364. break;
  365. //设备照片
  366. case 'infos.pic':
  367. let Pdata = tools.dataForKey(this.tableData[row.row], val);
  368. this.picsArr = Pdata ? Pdata : [];
  369. this.myDialog.pic = true;
  370. break;
  371. default:
  372. break;
  373. }
  374. if (!this.onlyRead && !inputData.editable) {
  375. this.$message("该信息点的值为自动生成,不可人工维护!");
  376. return false;
  377. }
  378. },
  379. utilToKey(key, name, data, messName) {
  380. if (key == name) {
  381. this.setDataToMain(data[key], messName, this.row);
  382. }
  383. },
  384. //判断是否有值,有值赋值
  385. setDataToMain(data, key, row) {
  386. if (!!data && data != "--") {
  387. if (!!this.tableData[row]) {
  388. //铭牌照片特殊处理
  389. tools.setDataForKey(this.tableData[row], key, data)
  390. // this.tableData[row][key] = data;
  391. } else {
  392. this.tableData[row] = {};
  393. tools.setDataForKey(this.tableData[row], key, data)
  394. }
  395. } else {
  396. tools.setDataForKey(this.tableData[row], key, "")
  397. }
  398. }
  399. }
  400. };
  401. </script>
  402. <style lang="less" scoped>
  403. #deviceList {
  404. overflow: hidden;
  405. height: 100%;
  406. background-color: #fff;
  407. padding: 10px;
  408. position: relative;
  409. .right {
  410. background: #fff;
  411. }
  412. .search-header {
  413. overflow: hidden;
  414. padding: 0 10px 10px 10px;
  415. border-bottom: 1px solid #bcbcbc;
  416. }
  417. .tableBox {
  418. display: flex;
  419. height: calc(100% - 100px);
  420. margin-top: 10px;
  421. .tableLeft {
  422. flex: 1;
  423. }
  424. }
  425. .create_button {
  426. margin-top: 10px;
  427. }
  428. }
  429. </style>