index.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591
  1. <template>
  2. <div id="deviceList">
  3. <el-row class="left">
  4. <span style="float:right;">当前选择的部件类型:{{category.Name}}</span>
  5. <el-select v-model="showType" @change="initTable" style="width:130px;margin-right:10px;vertical-align:bottom;">
  6. <el-option v-for="item in showTypes" :key="item.value" :label="item.label" :value="item.value">
  7. </el-option>
  8. </el-select>
  9. <span>增加</span>
  10. <el-input v-model="addNum" style="width:40px;" size="small"></el-input>
  11. <span>个{{category.Name}}</span>
  12. <el-button @click="handleAddTableRow">增加</el-button>
  13. </el-row>
  14. <div class="tableBox">
  15. <div class="center middle_sty" style="flex:2;" v-show="tableData && !tableData.length">
  16. <p>
  17. <i class="iconwushuju iconfont"></i>
  18. 暂无数据
  19. </p>
  20. </div>
  21. <div class="tableLeft" v-show="tableData && tableData.length">
  22. <handson-table ref="table"></handson-table>
  23. </div>
  24. </div>
  25. <el-row class="center">
  26. <el-button type="primary" size="medium" @click="handleCreateTableData" class="create_button">创建部件</el-button>
  27. </el-row>
  28. <!-- 二维码弹窗 -->
  29. <qrcode :dialog="myDialog" :qrcodeUrl="qrcodeUrl" :addBody="true" ref="qrcode"></qrcode>
  30. <!-- 型号弹窗 -->
  31. <firm :mess="{deviceId: firmId}" ref="firm" @changeFirm="firmChange" :dialog="myDialog"></firm>
  32. <!-- 供应商合同弹窗 -->
  33. <supply-dialog ref="supply" @change="supplyChange" :id="id" :dialog="myDialog"></supply-dialog>
  34. <!-- 供应商弹窗 -->
  35. <supplier-dialog ref="supplier" @changeSupplier="supplierChange" :dialog="myDialog"></supplier-dialog>
  36. <guarantee-dialog :id="id" ref="guarantee" @change="guaranteeChange" :dialog="myDialog"></guarantee-dialog>
  37. <upload-files-dialog :read="onlyRead ? true : false" ref="upload" @changeFile="fileChange" :keysArr="filesArr" :dialog="myDialog">
  38. </upload-files-dialog>
  39. <upload-img-dialog :read="onlyRead ? true : false" @changeFile="imgChange" :keysArr="imgsArr" :dialog="myDialog"></upload-img-dialog>
  40. <maintainer-dialog @changeMaintainer="changeMaintainer" ref="maintainer" :dialog="myDialog"></maintainer-dialog>
  41. <insurer-dialog @changeInsurer="changeInsurer" ref="insurer" :dialog="myDialog"></insurer-dialog>
  42. <pic-dialog :read="onlyRead ? true : false" :dialog="myDialog" :keysArr="picsArr" @change="changePics"></pic-dialog>
  43. <details-dialog :iframeSrc="iframeSrc" v-if="myDialog.details" :dialog="myDialog"></details-dialog>
  44. </div>
  45. </template>
  46. <script>
  47. import tools from "@/utils/scan/tools";
  48. import handsonUtils from "@/utils/hasontableUtils";
  49. import showTools from "@/utils/handsontable/notShow";
  50. import text from "@/utils/handsontable/mainText";
  51. import session from "@/framework/utils/storage";
  52. import handsonTable from "@/components/common/handsontable";
  53. import {
  54. getDataDictionary,
  55. createPart,
  56. createPropertyData,
  57. getEquipBelongs
  58. } from "@/api/scan/request";
  59. import { mapGetters, mapActions } from "vuex";
  60. import qrcode from "@/components/ledger/lib/qrcode";
  61. import firm from "@/components/dialogs/list/firm";
  62. import supplyDialog from "@/components/dialogs/list/supplyDialog";
  63. import supplierDialog from "@/components/dialogs/list/supplierDialog";
  64. import maintainerDialog from "@/components/dialogs/list/maintainerDialog";
  65. import insurerDialog from "@/components/dialogs/list/insurerDialog";
  66. import guaranteeDialog from "@/components/dialogs/list/guaranteeDialog";
  67. import uploadFilesDialog from "@/components/dialogs/list/filesDialog";
  68. import uploadImgDialog from "@/components/dialogs/list/uploadImgDialog";
  69. import picDialog from "@/components/dialogs/list/picDialog";
  70. export default {
  71. components: {
  72. qrcode, //二维码页面
  73. firm, //品牌型号弹窗
  74. supplyDialog,
  75. supplierDialog,
  76. maintainerDialog,
  77. insurerDialog,
  78. guaranteeDialog,
  79. uploadFilesDialog,
  80. uploadImgDialog,
  81. picDialog,
  82. handsonTable
  83. },
  84. data() {
  85. return {
  86. addNum: 1,
  87. onlyRead: false,
  88. tableHeader: [],
  89. tableData: session.get("partsAddData")
  90. ? session.get("partsAddData").length
  91. ? session.get("partsAddData")
  92. : [{ Checked: 1 }]
  93. : [{ Checked: 1 }],
  94. showTypes: [
  95. {value: "partInfo", label: '隐藏信息点'},
  96. {value: "Visible", label: '只看采集信息'},
  97. {value: "all", label: '全部'}
  98. ],
  99. showType: "partInfo",
  100. copyTableData: [],
  101. category: "", //当前设备类
  102. myDialog: {
  103. qrcode: false, //二维码弹窗
  104. firm: false, //厂商弹窗
  105. supply: false, //选择供应合同
  106. supplier: false, //供应商选择
  107. guarantee: false, //选择保单
  108. maintainer: false, //选择维修商
  109. insurer: false, //选择保险公司
  110. uploadFiles: false, //上传文件
  111. uploadImgs: false, //上传单个图片
  112. pic: false, //多个图片
  113. addDevice: false,
  114. systemType: false,
  115. details: false, //详情页
  116. changeRea: false,
  117. lookPic: false //图片查看
  118. },
  119. qrcodeUrl: "", //二维码图片地址
  120. filesArr: [], //保存临时的文件key
  121. imgsArr: [], //临时保存的图片key数组
  122. picsArr: [], //临时设备图片keys数组
  123. systemId: null,
  124. graphyId: null,
  125. id: 0,
  126. EquipmentList: [],
  127. firmId: "" //品牌型号所需字段--族id三位编码(传设备类id或部件类id)
  128. };
  129. },
  130. computed: {
  131. ...mapGetters("layout", ["projectId", "secret", "userId"])
  132. },
  133. created() {
  134. this.category = this.$route.params;
  135. this.category.ParentId = this.category.Code.substr(0, 4);
  136. this.getBelongs();
  137. this.getTableHeader();
  138. },
  139. methods: {
  140. //查询部件类对应的 族
  141. getBelongs() {
  142. let params = {
  143. data: {
  144. Filters: `EquipCode='${this.category.Code}'`,
  145. PageNumber: 1,
  146. PageSize: 50
  147. }
  148. }
  149. getEquipBelongs(params, res => {
  150. this.firmId = res.Content[0].Family;
  151. })
  152. },
  153. // 获取表头数据(初始化表格)
  154. async getTableHeader() {
  155. let params = {
  156. data: {
  157. PageNumber: 1,
  158. PageSize: 500
  159. },
  160. type: this.category.Code
  161. // Filters: `type='Equipment' or type='${this.category.Code}'`
  162. };
  163. await getDataDictionary(params, res => {
  164. this.tableHeader = res.Content;
  165. this.initTable();
  166. });
  167. },
  168. // 创建部件数据
  169. async handleCreateTableData() {
  170. let newData = this.tableData.filter(item => {
  171. let keys = Object.keys(item);
  172. keys.map(key => {
  173. //将值为空字符串的属性删除
  174. if (item[key] == "") {
  175. delete item[key];
  176. }
  177. });
  178. let newK = Object.keys(item)
  179. if ((item.Checked && newK.length > 1) || (!item.Checked && newK.length)) {
  180. return item;
  181. }
  182. });
  183. if (!newData.length) {
  184. this.$message("创建信息为空,请录入信息后再创建!");
  185. return;
  186. }
  187. let flag = false;
  188. newData.map(item => {
  189. if (item.Checked && !item.EquipLocalName) {
  190. flag = true;
  191. }
  192. })
  193. if (flag) {
  194. this.$message.info("存在设备的本地名称为空,请检查")
  195. return;
  196. }
  197. for (let i = 0; i < newData.length; i++) {
  198. let params = newData[i]
  199. params.ParentId = this.category.deviceId, //当前设备id
  200. params.Category = this.category.Code //当前部件分类
  201. params.Family = this.firmId;
  202. await createPart([params], async res => {
  203. if (newData[i].Checked) {//同时创建资产
  204. params.EquipID = res.EntityList[0].EquipID
  205. await createPropertyData([params], res => { })
  206. }
  207. this.$router.push({
  208. path: "/ledger/partsmanage",
  209. query: {
  210. deviceId: this.category.deviceId,
  211. typeId: this.category.ParentId
  212. }
  213. });
  214. session.remove("partsAddData")
  215. })
  216. // if (newData[i].Checked) {//同时创建资产
  217. // await createPropertyData([params], async res => {
  218. // params.PropertyId = res.Id
  219. // })
  220. // }
  221. // else {
  222. // await createPart(params, res => {
  223. // if (i == newData.length - 1) {
  224. // this.$router.push({
  225. // path: "/ledger/partsmanage",
  226. // query: {
  227. // deviceId: this.category.deviceId,
  228. // typeId: this.category.ParentId
  229. // }
  230. // });
  231. // session.remove("partsAddData")
  232. // }
  233. // });
  234. // }
  235. }
  236. },
  237. // 删除表格行
  238. handleDeleteTableRow() {
  239. this.$message.success("删除成功");
  240. this.formaTableData();
  241. },
  242. // 添加行
  243. handleAddTableRow() {
  244. let addRowLength = this.addNum;
  245. for (let i = 0; i < addRowLength; i++) {
  246. this.tableData.push({ Checked: 1 });
  247. }
  248. this.initTable();
  249. this.formaTableData();
  250. },
  251. //修改
  252. handleUpdataTable(changeData, source) {
  253. this.formaTableData();
  254. },
  255. //保存去掉空字段的新增数据
  256. formaTableData() {
  257. let newData = this.tableData.filter(item => {
  258. let keys = Object.keys(item);
  259. keys.map(key => {
  260. //将值为空字符串的属性删除
  261. if (item[key] == "") {
  262. delete item[key];
  263. }
  264. });
  265. if (keys.length && Object.keys(item).length) {
  266. return item;
  267. }
  268. });
  269. session.set("partsAddData", newData);
  270. },
  271. //格式化表头显示的数据
  272. formatHeaderData(list) {
  273. let arr = tools.copyArr(list)
  274. let data = showTools.headerTextFilter(arr, "parts", this.onlyRead, this.showType, true)
  275. data.unshift("同时创建资产")
  276. return data
  277. },
  278. formatHeaderType(list) {
  279. //格式化表头头映射的数据
  280. let arr = tools.copyArr(list);
  281. let data = showTools.headerTypeFilter(arr, "parts", this.onlyRead, this.showType, true)
  282. data.unshift({
  283. type: "checkbox",
  284. checkedTemplate: 1,
  285. uncheckedTemplate: 0,
  286. data: "Checked",
  287. label: {
  288. position: "after"
  289. }
  290. });
  291. return data;
  292. },
  293. initTable() {
  294. //实例化表格
  295. let settings = {
  296. data: this.tableData,
  297. colHeaders: this.formatHeaderData(this.tableHeader),
  298. columns: this.formatHeaderType(this.tableHeader),
  299. rowHeights: 30,
  300. maxRows: this.tableData.length,
  301. contextMenu: {
  302. items: {
  303. remove_row: {
  304. name: "删除部件"
  305. }
  306. }
  307. },
  308. // 事件
  309. afterChange: this.handleUpdataTable, //修改后
  310. afterFilter: this.trimmedRows, //排序前
  311. afterRemoveRow: this.handleDeleteTableRow, //右键删除
  312. afterOnCellMouseDown: this.handleTdClick //鼠标点击
  313. };
  314. this.$nextTick(() => {
  315. this.tableExample = this.$refs.table.init(settings);
  316. });
  317. },
  318. //去除数组中相同的元素
  319. array_diff(a, b) {
  320. for (var i = 0; i < b.length; i++) {
  321. for (var j = 0; j < a.length; j++) {
  322. if (a[j] == b[i]) {
  323. a.splice(j, 1);
  324. j = j - 1;
  325. }
  326. }
  327. }
  328. return a;
  329. },
  330. //选择型号修改
  331. firmChange(data) {
  332. tools.setDataForKey(this.tableData[this.row], "LedgerParam.EquipManufactor.Brand", data.brand)
  333. tools.setDataForKey(this.tableData[this.row], "LedgerParam.EquipManufactor.Specification", data.name)
  334. tools.setDataForKey(this.tableData[this.row], "DPManufacturerID", data.venderId)
  335. },
  336. //供应商变更
  337. supplierChange(data) {
  338. tools.setDataForKey(this.tableData[this.row], "LedgerParam.SupplyPurchase.Supplier", data.name)
  339. tools.setDataForKey(this.tableData[this.row], "DPSupplierID", data.venderId)
  340. },
  341. //保险商变更
  342. changeInsurer(data) {
  343. tools.setDataForKey(this.tableData[this.row], "LedgerParam.InsuranceDoc.Insurer", data.name)
  344. tools.setDataForKey(this.tableData[this.row], "DPInsurerID", data.venderId)
  345. },
  346. //维修商变更
  347. changeMaintainer(data) {
  348. tools.setDataForKey(this.tableData[this.row], "LedgerParam.OperationMainte.Maintainer", data.name)
  349. tools.setDataForKey(this.tableData[this.row], "DPMaintainerID", data.venderId)
  350. },
  351. supplyChange(data) {
  352. let changeData = { id: data };
  353. this.utilToKey("id", "id", changeData, "SupplierContractID");
  354. },
  355. //保险合同
  356. guaranteeChange(data) {
  357. for (let key in data) {
  358. this.utilToKey(key, "insuranceNo", data, "InsuranceNum");
  359. if (key == "contractFile") {
  360. if (!!data[key]) {
  361. data[key] = [data[key]];
  362. }
  363. }
  364. this.utilToKey(key, "contractFile", data, "InsuranceFile");
  365. }
  366. },
  367. //上传文件弹窗触发事件
  368. fileChange(keys) {
  369. this.setDataToMain(keys, this.messKey, this.row);
  370. },
  371. //上传图片弹窗触发事件
  372. imgChange(keys) {
  373. this.setDataToMain(keys, this.messKey, this.row);
  374. },
  375. //设备图片弹窗改变事件
  376. changePics(keys) {
  377. this.setDataToMain(keys, this.messKey, this.row);
  378. },
  379. //表格点击事件
  380. handleTdClick(el, rowArr) {
  381. //点击的是表头
  382. if (rowArr.row < 0) {
  383. return;
  384. }
  385. //被筛选过后的数组
  386. let trimmedArr = this.trimmedRows();
  387. //是否启用了排序
  388. let isSort = this.tableExample.getPlugin("columnSorting").isSorted();
  389. if (trimmedArr.length && isSort) {
  390. let sortArr = this.myHotArr.getPlugin("columnSorting").rowsMapper
  391. .__arrayMap;
  392. let infos = this.tableData[trimmedArr[sortArr[rowArr.row]]];
  393. this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
  394. } else if (isSort) {
  395. //排序后的数组
  396. let sortArr = this.tableExample.getPlugin("columnSorting").rowsMapper
  397. .__arrayMap;
  398. let infos = this.tableData[sortArr[rowArr.row]];
  399. this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
  400. } else if (trimmedArr.length) {
  401. let infos = this.tableData[trimmedArr[rowArr.row]];
  402. this.getInfors(infos, { row: trimmedArr[rowArr.row], col: rowArr.col });
  403. } else {
  404. let infos = this.tableData[rowArr.row];
  405. this.getInfors(infos, rowArr);
  406. }
  407. },
  408. //获取被筛选掉的行号
  409. trimmedRows() {
  410. var plugin = this.tableExample.getPlugin("trimRows").trimmedRows;
  411. let dataLength = this.tableData.length;
  412. let dataArr = new Array();
  413. for (let i = 0; i < dataLength; i++) {
  414. dataArr.push(i);
  415. }
  416. if (plugin.length <= 0) {
  417. dataArr = undefined;
  418. } else {
  419. dataArr = this.array_diff(dataArr, plugin);
  420. }
  421. return dataArr || [];
  422. },
  423. getInfors(infos, row) {
  424. //其他的开始判断
  425. let val = this.tableExample.colToProp(row.col);
  426. //设备二维码图片
  427. if (val == "EquipQRCode") {
  428. this.myDialog.qrcode = true;
  429. this.$refs.qrcode.getCanvas(1111);
  430. }
  431. //关联系统
  432. if (val == "linkSystem") {
  433. // this.systemList = this.tableData[row.row].linkSystem || [];
  434. this.myDialog.systemType = true;
  435. }
  436. //品牌型号弹窗
  437. if (val == "DPManufacturerID") {
  438. this.myDialog.firm = true;
  439. }
  440. //供应商信息弹窗
  441. if (val == "DPSupplierID") {
  442. this.myDialog.supplier = true;
  443. }
  444. //维修商信息弹窗
  445. if (val == "DPMaintainerID") {
  446. this.myDialog.maintainer = true;
  447. }
  448. //保险公司信息
  449. if (val == "DPInsurerID") {
  450. this.myDialog.insurer = true;
  451. }
  452. //供应合同编号
  453. if (val == "LedgerParam.SupplyPurchase.SupplierContractID") {
  454. let falg = null;
  455. let data = this.tableData[row.row].DPSupplierID;
  456. if (data) {
  457. falg = data.split("-")[0];
  458. }
  459. if (!!falg) {
  460. this.id = falg;
  461. this.myDialog.supply = true;
  462. } else {
  463. this.$message("请先选择供应商");
  464. }
  465. }
  466. //保险单号
  467. if (val == "LedgerParam.InsuranceDoc.InsuranceNum") {
  468. //选择保单
  469. let falg = null;
  470. let data = this.tableData[row.row].DPInsurerID
  471. if (data) {
  472. falg = data.split("-")[0];
  473. }
  474. if (!!falg) {
  475. this.id = falg;
  476. this.myDialog.guarantee = true;
  477. } else {
  478. this.$message("请先选择保险商");
  479. }
  480. }
  481. //保险文件--设备文档--安装质检报告
  482. if (
  483. val == "LedgerParam.InsuranceDoc.InsuranceFile" ||
  484. val == "LedgerParam.PhotoDoc.Archive" ||
  485. val == "LedgerParam.Siteinstall.CheckReport"
  486. ) {
  487. let data = tools.dataForKey(this.tableData[row.row], val)
  488. this.filesArr = data ? data : []
  489. // this.filesArr = this.tableData[row.row].infos
  490. // ? this.tableData[row.row].infos[val.split(".")[1]]
  491. // ? [this.tableData[row.row].infos[val.split(".")[1]]]
  492. // : []
  493. // : [];
  494. this.myDialog.uploadFiles = true;
  495. }
  496. //安装照片--安装图纸--设备铭牌照片--设备图纸
  497. if (
  498. val == "LedgerParam.Siteinstall.InstallPic" ||
  499. val == "LedgerParam.Siteinstall.InstallDrawing" ||
  500. val == "LedgerParam.PhotoDoc.Nameplate" ||
  501. val == "LedgerParam.PhotoDoc.Drawing"
  502. ) {
  503. let data = tools.dataForKey(this.tableData[row.row], val)
  504. this.imgsArr = data ? data : []
  505. // if (val == "LedgerParam.PhotoDoc.Nameplate") {
  506. // this.imgsArr = this.tableData[row.row].infos
  507. // ? this.tableData[row.row].infos[val.split(".")[1]]
  508. // ? [this.tableData[row.row].infos[val.split(".")[1]].key]
  509. // : []
  510. // : [];
  511. // } else {
  512. // this.imgsArr = this.tableData[row.row].infos
  513. // ? this.tableData[row.row].infos[val.split(".")[1]]
  514. // ? [this.tableData[row.row].infos[val.split(".")[1]]]
  515. // : []
  516. // : [];
  517. // }
  518. this.myDialog.uploadImgs = true;
  519. }
  520. //设备照片
  521. if (val == "LedgerParam.PhotoDoc.Pic") {
  522. let data = tools.dataForKey(this.tableData[row.row], val)
  523. this.picsArr = data ? data : []
  524. // this.picsArr = this.tableData[row.row].infos
  525. // ? this.tableData[row.row].infos[val.split(".")[1]]
  526. // ? this.tableData[row.row].infos[val.split(".")[1]]
  527. // : []
  528. // : [];
  529. this.myDialog.pic = true;
  530. }
  531. this.row = row.row;
  532. this.messKey = val;
  533. },
  534. utilToKey(key, name, data, messName) {
  535. if (key == name) {
  536. this.setDataToMain(data[key], messName, this.row);
  537. }
  538. },
  539. //判断是否有值,有值赋值
  540. setDataToMain(data, key, row) {
  541. if (!!data && data != "--") {
  542. if (!!this.tableData[row]) {
  543. //铭牌照片特殊处理
  544. tools.setDataForKey(this.tableData[row], key, data)
  545. // this.tableData[row][key] = data;
  546. } else {
  547. this.tableData[row] = {};
  548. tools.setDataForKey(this.tableData[row], key, data)
  549. }
  550. } else {
  551. tools.setDataForKey(this.tableData[row], key, "")
  552. }
  553. }
  554. }
  555. };
  556. </script>
  557. <style lang="less" scoped>
  558. #deviceList {
  559. overflow: hidden;
  560. height: 100%;
  561. background-color: #fff;
  562. padding: 10px;
  563. position: relative;
  564. .right {
  565. background: #fff;
  566. }
  567. .search-header {
  568. overflow: hidden;
  569. padding: 0 10px 10px 10px;
  570. border-bottom: 1px solid #bcbcbc;
  571. }
  572. .tableBox {
  573. display: flex;
  574. height: calc(100% - 100px);
  575. margin-top: 10px;
  576. .tableLeft {
  577. flex: 1;
  578. }
  579. }
  580. .create_button {
  581. margin-top: 10px;
  582. }
  583. }
  584. </style>