index.vue 20 KB

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