system.vue 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095
  1. <template>
  2. <div style="height: calc(100% - 44.5px);padding: 0px 10px 10px;box-sizing: border-box;">
  3. <div class="hanson-bar">
  4. <span>当前筛选条件下共{{page.total || '--'}}系统</span>
  5. <div style="float:right;overflow:hidden;">
  6. <el-button size="small" style="width: 80px" @click="addDevice" icon="iconfont icon-tianjia">添加系统</el-button>
  7. <el-button size="small" style="width: 80px" @click="reset" icon="iconfont icon-shuaxin">刷新</el-button>
  8. <el-button size="small" style="width: 80px" @click="undo" icon="iconfont icon-undo">撤销</el-button>
  9. </div>
  10. <div style="width:200px;color:gray;float:right;font-size:10px;">
  11. <span v-if="!onlyRead">隐藏自动填充的信息点:</span>
  12. <el-tooltip v-if="!onlyRead" :content="'' + (isWatch ? '隐藏' : '不隐藏')" placement="top">
  13. <el-checkbox v-model="isWatch" @change="changeWatch"></el-checkbox>
  14. <!-- <el-switch
  15. @change="changeWatch"
  16. v-model="isWatch"
  17. active-color="#13ce66"
  18. inactive-color="gray"
  19. ></el-switch> -->
  20. </el-tooltip>
  21. <span v-if="onlyRead">只看要采集的信息</span>
  22. <el-tooltip v-if="onlyRead" :content="'' + (allMess ? '部分' : '全集')" placement="top">
  23. <el-checkbox v-model="allMess" @change="changeWatch"></el-checkbox>
  24. <!-- <el-switch
  25. @change="changeWatch"
  26. v-model="allMess"
  27. active-color="#13ce66"
  28. inactive-color="gray"
  29. ></el-switch> -->
  30. </el-tooltip>
  31. </div>
  32. <div
  33. style="width:100px;cursor: pointer;float:right; font-size:14px;margin-right:10px"
  34. >
  35. <el-select v-model="onlyRead" @click="changeRead" size="small">
  36. <el-option
  37. v-for="item in options"
  38. :key="item.value"
  39. :label="item.label"
  40. :value="item.value">
  41. </el-option>
  42. </el-select>
  43. <!-- <p v-if="onlyRead" @click="changeRead">
  44. <i class="iconfont icon-yulan"></i>
  45. <span>只读模式</span>
  46. </p>
  47. <p v-else @click="changeRead">
  48. <i class="iconfont icon-yulan"></i>
  49. <span>编辑模式</span>
  50. </p> -->
  51. </div>
  52. </div>
  53. <qrcode :dialog="dialog" :addBody="true" ref="qrcode"></qrcode>
  54. <firm ref="firm" :dialog="dialog"></firm>
  55. <supply-dialog ref="supply" :dialog="dialog"></supply-dialog>
  56. <supplier-dialog ref="supplier" @changeSupplier="supplierChange" :dialog="dialog"></supplier-dialog>
  57. <guarantee-dialog ref="guarantee" :dialog="dialog"></guarantee-dialog>
  58. <upload-files-dialog ref="upload" @changeFile="fileChange" :keysArr="filesArr" :dialog="dialog"></upload-files-dialog>
  59. <upload-img-dialog @changeFile="imgChange" :keysArr="imgsArr" :dialog="dialog"></upload-img-dialog>
  60. <maintainer-dialog @changeMaintainer="changeMaintainer" ref="maintainer" :dialog="dialog"></maintainer-dialog>
  61. <insurer-dialog @changeInsurer="changeInsurer" ref="insurer" :dialog="dialog"></insurer-dialog>
  62. <pic-dialog :dialog="dialog" :keysArr="picsArr" @change="changePics"></pic-dialog>
  63. <!-- <div
  64. v-show="!main || !main.length"
  65. style="width:100%;text-align:center;font-size:30px;color:gray;"
  66. >请选择系统类型</div> -->
  67. <!-- <div
  68. v-show="!mess.deviceId && (!main || !main.length)"
  69. style="width:100%;text-align:center;font-size:30px;color:gray;"
  70. >请选择系统类型</div> -->
  71. <div class="center middle_sty" style="height: 91%" v-show="!mess.deviceId && (!main || !main.length)">
  72. <p>
  73. <i class="iconwushuju iconfont"></i>
  74. 请选择系统类型
  75. </p>
  76. </div>
  77. <div class="center middle_sty" style="height: 91%" v-show="mess.deviceId && (!main || !main.length)">
  78. <p>
  79. <i class="iconwushuju iconfont"></i>
  80. 暂无数据
  81. </p>
  82. </div>
  83. <div v-show="mess.deviceId && main && main.length" v-loading="loading" id="handsontable" ref="handsontable"></div>
  84. <div v-show="mess.deviceId && main && main.length" class="right">
  85. <my-pagination @change="getMain" :page="page"></my-pagination>
  86. </div>
  87. <dialog-assets
  88. :assetType="[this.mess.deviceId]"
  89. @close="getClose"
  90. v-if="dialog.addDevice"
  91. ref="assets"
  92. :dialog="dialog"
  93. ></dialog-assets>
  94. <details-dialog :iframeSrc="iframeSrc" v-if="dialog.details" :dialog="dialog"></details-dialog>
  95. <system-relevance @close="reset" :id="systemId" :dialog="dialog"></system-relevance>
  96. </div>
  97. </template>
  98. <script>
  99. import { getTableHeader, getBillSystemList, updateBusiness, BeatchQueryParam, delBatchList } from "@/api/scan/request";
  100. import tools from "@/utils/scan/tools";
  101. import handsonUtils from "@/utils/scan/hasontableUtils"
  102. import showTools from "@/utils/handsontable/notShow"
  103. import qrcode from "@/components/business_space/lib/qrcode";
  104. import firm from "@/components/business_space/dialogs/list/firm";
  105. import supplyDialog from "@/components/business_space/dialogs/list/supplyDialog";
  106. import supplierDialog from "@/components/business_space/dialogs/list/supplierDialog";
  107. import maintainerDialog from "@/components/business_space/dialogs/list/maintainerDialog";
  108. import insurerDialog from "@/components/business_space/dialogs/list/insurerDialog";
  109. import guaranteeDialog from "@/components/business_space/dialogs/list/guaranteeDialog";
  110. import uploadFilesDialog from "@/components/business_space/dialogs/list/filesDialog";
  111. import uploadImgDialog from "@/components/business_space/dialogs/list/uploadImgDialog";
  112. import picDialog from "@/components/business_space/dialogs/list/picDialog"
  113. import myPagination from "@/components/common/myPagination";
  114. import dialogAssets from "@/components/ledger/addDialog/dialogSystem";
  115. import detailsDialog from "@/components/business_space/lib/detailsDia"
  116. import systemRelevance from "@/components/ledger/tableTransfers"
  117. import Handsontable from "handsontable-pro"
  118. import 'handsontable-pro/dist/handsontable.full.css'
  119. import zhCN from 'handsontable-pro/languages/zh-CN';
  120. import {
  121. mapGetters,
  122. mapActions
  123. } from "vuex";
  124. //下拉插件
  125. // import "@/assets/js/chosen.jquery.min";
  126. // import "@/assets/js/handsontable-chosen-editor";
  127. export default {
  128. components: {
  129. qrcode, //二维码页面
  130. firm, //
  131. supplyDialog,
  132. supplierDialog,
  133. guaranteeDialog,
  134. uploadFilesDialog,
  135. maintainerDialog,
  136. insurerDialog,
  137. uploadImgDialog,
  138. picDialog,
  139. myPagination,
  140. dialogAssets,
  141. detailsDialog,
  142. systemRelevance
  143. },
  144. computed: {
  145. ...mapGetters("layout", [
  146. "projectId",
  147. "secret",
  148. "userId"
  149. ])
  150. },
  151. data() {
  152. return {
  153. options: [{
  154. value: true,
  155. label: '只读模式'
  156. }, {
  157. value: false,
  158. label: '编辑模式'
  159. }],
  160. main: [],
  161. mess: {},
  162. headers: null,
  163. page: {
  164. size: 50,
  165. sizes: [10, 30, 50, 100, 150, 200],
  166. total: 0,
  167. currentPage: 1
  168. },
  169. dialog: {
  170. qrcode: false, //二维码弹窗
  171. firm: false, //厂商弹窗
  172. supply: false, //选择供应合同
  173. supplier: false, //供应商选择
  174. guarantee: false, //选择保单
  175. maintainer: false, //选择维修商
  176. insurer: false, //选择保险公司
  177. uploadFiles: false,//上传文件
  178. uploadImgs: false,//上传单个图片
  179. pic: false, //多个图片
  180. addDevice: false,
  181. details: false,//详情页
  182. relevance: false,//关联设备
  183. },
  184. row: null,//被修改的row
  185. filesArr: [],//保存临时的文件key
  186. messKey: null,
  187. imgsArr: [],//临时保存的图片key数组
  188. picsArr: [],//临时设备图片keys数组
  189. noShowList: ["SysID", "SysName"],
  190. copyMain: null,
  191. iframeSrc: "",
  192. systemId: "",
  193. onlyRead: true,
  194. allMess: true,
  195. linkNameFalg: false,
  196. qrcodeUrl: "",//二维码图片地址
  197. isWatch: true,
  198. loading: false,
  199. };
  200. },
  201. created() {
  202. },
  203. mounted() { },
  204. methods: {
  205. //触发父组件change
  206. getClose(val) {
  207. this.$emit("close", val)
  208. },
  209. //获取表头
  210. getHeaderData(code) {
  211. this.mess = code
  212. if(this.mess.deviceId) {
  213. getTableHeader({
  214. code: this.mess.deviceId,
  215. ProjId: this.projectId
  216. }).then(res => {
  217. this.headers = res.data.Content;
  218. this.getMain()
  219. });
  220. }
  221. },
  222. changeRead() {
  223. this.onlyRead = !this.onlyRead
  224. this.getMain()
  225. },
  226. changeWatch() {
  227. this.reset()
  228. },
  229. //获取主体数据
  230. getMain() {
  231. let _this = this
  232. let param = {
  233. data: {
  234. customInfo: true,
  235. "limit": { // 分页查询, 选填.
  236. "skip": this.page.size * (this.page.currentPage - 1), // 跳过多少数据
  237. "count": this.page.size // 查询跳过300条数据之后的50条 (默认按照创建时间从大-->小排序)
  238. },
  239. criteria: {
  240. id: "",
  241. type: [this.mess.deviceId]
  242. }
  243. },
  244. secret: this.secret,
  245. ProjId: this.projectId
  246. }
  247. if (this.mess.buildId == "all") {
  248. param.data.criteria.id = this.mess.ProjId
  249. } else if (!this.mess.floorId && !this.mess.buildId) {
  250. param.data.criteria.id = this.mess.ProjId
  251. } else {
  252. param.data.criteria.id = this.mess.buildId
  253. }
  254. this.loading = true
  255. getBillSystemList(param, res => {
  256. if (_this.onlyRead) {
  257. this.getBatch(res.Content)
  258. }
  259. this.loading = false
  260. this.main = res.Content
  261. this.copyMain = tools.deepCopy(res.Content)
  262. this.page.total = res.Count
  263. if (!!this.hot) {
  264. this.hot.destroy();
  265. this.hot = null;
  266. }
  267. if (!!res.Content && res.Content.length) {
  268. this.initHot();
  269. }
  270. })
  271. },
  272. //撤回
  273. undo() {
  274. this.hot.undo();
  275. },
  276. //刷新
  277. reset() {
  278. if(this.mess.deviceId) {
  279. this.getMain();
  280. } else {
  281. this.$message({
  282. message: '请选择设备族',
  283. type: 'warning'
  284. });
  285. }
  286. },
  287. //添加设备
  288. addDevice() {
  289. this.dialog.addDevice = true
  290. this.$nextTick(() => {
  291. this.$refs.assets.step(0)
  292. })
  293. },
  294. /**
  295. * 表头文案处理函数
  296. * @param list header数组数据
  297. *
  298. * @return 处理好的文案
  299. */
  300. delHeader(list) {
  301. let arr = tools.copyArr(list)
  302. // 如果不是只读状态,添加四大厂商选择
  303. // if (!this.onlyRead) {
  304. // arr = showTools.assetToArr(arr)
  305. // }
  306. // console.log(arr)
  307. let readArr = ["A1", "A2", "B1", "C5", "D1", "D2", "X", "L", "L1", "L2", "F1", "F2"]
  308. let data = showTools.changeHeader(arr, readArr, this.onlyRead, this.isWatch, this.allMess)
  309. data.unshift("操作", "关联设备数量");
  310. return data;
  311. },
  312. /**
  313. * 表头数据处理函数
  314. * @param list header数组数据
  315. *
  316. * @return 处理好的数据格式
  317. */
  318. getType(list) {
  319. let arr = tools.copyArr(list)
  320. let data = showTools.showTypes(arr, this.onlyRead, this.isWatch, this.allMess)
  321. data.unshift(
  322. {
  323. data: "caozuo",
  324. renderer: tools.lookDetails,
  325. readOnly: true
  326. },
  327. {
  328. data: "count",
  329. renderer: tools.num,
  330. readOnly: true
  331. }
  332. );
  333. data = data.filter(item => item);
  334. if (this.onlyRead) {
  335. data.map(item => {
  336. item.readOnly = true
  337. })
  338. }
  339. return data;
  340. },
  341. changeItem(item) {
  342. //二维码
  343. if (item.infopoint_code == "EquipQRCode" && item.visible) {
  344. return {
  345. data: "infos." + item.infopoint_code,
  346. renderer: text.lookQRCode,
  347. readOnly: true
  348. }
  349. }
  350. //厂商选择
  351. // if ((item.infopoint_code == "Brand" || item.infopoint_code == "Specification") && item.visible) {
  352. // return {
  353. // data: "infos." + item.infopoint_code,
  354. // renderer: tools.lookDetails,
  355. // readOnly: true
  356. // }
  357. // }
  358. // if (item.infopoint_code == "SupplierContractID" && item.visible) {
  359. // return {
  360. // data: "infos." + item.infopoint_code,
  361. // renderer: tools.lookDetails,
  362. // readOnly: true
  363. // }
  364. // }
  365. if (item.infopoint_code == "InsuranceNum" && item.visible) {
  366. //选择保单
  367. return {
  368. data: "infos." + item.infopoint_code,
  369. renderer: tools.lookDetails,
  370. readOnly: true
  371. }
  372. }
  373. if ((item.infopoint_code == "InsuranceFile" || item.infopoint_code == "Archive") && item.visible) {
  374. return {
  375. data: "infos." + item.infopoint_code,
  376. renderer: tools.lookDetails,
  377. readOnly: true
  378. }
  379. }
  380. if (
  381. (
  382. item.infopoint_code == "InstallPic" ||
  383. item.infopoint_code == "InstallDrawing" ||
  384. item.infopoint_code == "Nameplate" ||
  385. item.infopoint_code == "Pic" ||
  386. item.infopoint_code == "Drawing"
  387. ) && item.visible
  388. ) {
  389. return {
  390. data: "infos." + item.infopoint_code,
  391. renderer: tools.lookDetails,
  392. readOnly: true
  393. }
  394. }
  395. if (
  396. (
  397. item.infopoint_code == "Maintainer" ||
  398. item.infopoint_code == "Supplier" ||
  399. item.infopoint_code == "Insurer" ||
  400. item.infopoint_code == "InsurerContactor"
  401. )
  402. && item.visible
  403. ) {
  404. return {
  405. data: "infos." + item.infopoint_code,
  406. }
  407. }
  408. if (item.collection_cmpt_code == "Enum" && item.visible) {
  409. return {
  410. data: "infos." + item.infopoint_code,
  411. renderer: this.customDropdownRenderer,
  412. editor: "chosen",
  413. chosenOptions: {
  414. // multiple: true,//多选
  415. data: item.dataSource || ""
  416. }
  417. };
  418. } else if (item.collection_cmpt_code == "Num" && item.visible) {
  419. return {
  420. data: "infos." + item.infopoint_code,
  421. type: "numeric",
  422. numericFormat: {
  423. pattern: "0,0.00"
  424. // culture: 'de-DE' // use this for EUR (German),
  425. // more cultures available on http://numbrojs.com/languages.html
  426. }
  427. };
  428. } else if (item.collection_cmpt_code == "Time" && item.visible) {
  429. return {
  430. data: "infos." + item.infopoint_code,
  431. type: "date",
  432. dateFormat: "YYYY-MM-DD",
  433. correctFormat: true
  434. };
  435. } else if (item.collection_cmpt_code == "text" && item.visible) {
  436. return {
  437. data: "infos." + item.infopoint_code
  438. };
  439. } else if (
  440. (item.info_point_code == "设备ID" ||
  441. item.info_point_code == "设备名称") && item.visible
  442. ) {
  443. return {
  444. data: "infos." + item.infopoint_code,
  445. readOnly: true
  446. };
  447. } else if (item.collection_cmpt_code == "checkBox" && item.visible) {
  448. return {
  449. data: "infos." + item.infopoint_code,
  450. renderer: this.customDropdownRenderer,
  451. editor: "chosen",
  452. chosenOptions: {
  453. multiple: true,//多选
  454. data: item.dataSource || ""
  455. }
  456. };
  457. } else if (item.collection_cmpt_code == "Own" && item.visible) {
  458. return {
  459. data: "infos." + item.infopoint_code,
  460. renderer: text.idType,
  461. }
  462. } else {
  463. return undefined
  464. }
  465. },
  466. //插件修改
  467. customDropdownRenderer(
  468. instance,
  469. td,
  470. row,
  471. col,
  472. prop,
  473. value,
  474. cellProperties
  475. ) {
  476. var selectedId;
  477. var optionsList = cellProperties.chosenOptions.data;
  478. if (
  479. typeof optionsList === "undefined" ||
  480. typeof optionsList.length === "undefined" ||
  481. !optionsList.length
  482. ) {
  483. Handsontable.renderers.TextRenderer(
  484. instance,
  485. td,
  486. row,
  487. col,
  488. prop,
  489. value,
  490. cellProperties
  491. );
  492. return td;
  493. }
  494. var values = (value + "").split(",");
  495. value = [];
  496. for (var index = 0; index < optionsList.length; index++) {
  497. if (values.indexOf(optionsList[index].code + "") > -1) {
  498. selectedId = optionsList[index].code;
  499. value.push(optionsList[index].name);
  500. }
  501. }
  502. value = value.join(", ");
  503. Handsontable.renderers.TextRenderer(
  504. instance,
  505. td,
  506. row,
  507. col,
  508. prop,
  509. value,
  510. cellProperties
  511. );
  512. return td;
  513. },
  514. messShow(item) {
  515. if (item.collection_cmpt_code == "Enum") {
  516. return {
  517. data: "infos." + item.infopoint_code,
  518. renderer: this.customDropdownRenderer,
  519. editor: "chosen",
  520. chosenOptions: {
  521. // multiple: true,//多选
  522. data: item.dataSource || ""
  523. }
  524. };
  525. } else if (item.collection_cmpt_code == "Num") {
  526. return {
  527. data: "infos." + item.infopoint_code,
  528. type: "numeric",
  529. numericFormat: {
  530. pattern: "0,0.00"
  531. // culture: 'de-DE' // use this for EUR (German),
  532. // more cultures available on http://numbrojs.com/languages.html
  533. }
  534. };
  535. } else if (item.collection_cmpt_code == "Time") {
  536. return {
  537. data: "infos." + item.infopoint_code,
  538. type: "date",
  539. dateFormat: "YYYY-MM-DD",
  540. correctFormat: true
  541. };
  542. } else if (item.collection_cmpt_code == "text") {
  543. return {
  544. data: "infos." + item.infopoint_code
  545. };
  546. } else if (
  547. (item.info_point_code == "设备ID" ||
  548. item.info_point_code == "设备名称")
  549. ) {
  550. return {
  551. data: "infos." + item.infopoint_code,
  552. readOnly: true
  553. };
  554. } else if (item.collection_cmpt_code == "checkBox") {
  555. return {
  556. data: "infos." + item.infopoint_code,
  557. renderer: this.customDropdownRenderer,
  558. editor: "chosen",
  559. chosenOptions: {
  560. multiple: true,//多选
  561. data: item.dataSource || ""
  562. }
  563. };
  564. } else {
  565. return {
  566. data: "infos." + item.infopoint_code,
  567. }
  568. }
  569. },
  570. //获取动态参数
  571. getBatch(data) {
  572. console.log(this.headers, data, "data22222")
  573. let param = {
  574. secret: this.secret,
  575. ProjId: this.projectId,
  576. data: {
  577. criterias: []
  578. }
  579. }
  580. if (!!data && data.length) {
  581. //一级遍历list
  582. data.map(item => {
  583. if (!!item.infos) {
  584. //二级遍历对象infos
  585. for (let key in item.infos) {
  586. //判断是否是设定参数和动态参数
  587. if (!!item.infos[key]) {
  588. this.headers.map(child => {
  589. //如果一级标签为动态参数或者设定参数放入数据等待请求
  590. if (key == child.infoPointCode && (child.InputMode == "L" || child.InputMode == "L1" || child.InputMode == "L2")) {
  591. param.data.criterias.push({
  592. id: item.id,
  593. code: key
  594. })
  595. }
  596. })
  597. }
  598. }
  599. }
  600. })
  601. if (param.data.criterias.length) {
  602. BeatchQueryParam(param, res => {
  603. if (!this.onlyRead) {
  604. return false
  605. }
  606. this.main = data.map(item => {
  607. res.Content.map(child => {
  608. if (item.id == child.id) {
  609. if (!!child.data || child.data == 0) {
  610. item.infos[child.code] = child.data
  611. } else {
  612. item.infos[child.code] = child.error ? "表号功能号格式错误" : "表号功能号不存在"
  613. }
  614. }
  615. })
  616. return item
  617. })
  618. console.log(this.main)
  619. this.hot.loadData(this.main)
  620. })
  621. }
  622. }
  623. },
  624. //初始化插件
  625. initHot() {
  626. var container = document.getElementById("handsontable");
  627. let winHeight = document.documentElement.clientHeight;
  628. this.hot = new Handsontable(container, {
  629. data: this.main,
  630. fixedColumnsLeft: 5,
  631. colHeaders: this.delHeader(this.headers), //表头文案
  632. columns: this.getType(this.headers), //数据显示格式
  633. filters: true,
  634. maxRows: this.main.length,
  635. height: winHeight - 335,
  636. columnSorting: true, //添加排序
  637. sortIndicator: true, //添加排序
  638. renderAllRows: true,
  639. // colWidths: 200,
  640. autoColumnSize: true,
  641. language: "zh-CN",
  642. manualColumnResize: true,
  643. manualColumnMove: true,
  644. dropdownMenu: [
  645. "filter_by_condition",
  646. "filter_by_value",
  647. "filter_action_bar"
  648. ],
  649. contextMenu: {
  650. items: {
  651. remove_row: {
  652. name: "删除该系统"
  653. }
  654. }
  655. },
  656. // 事件
  657. afterChange: this.tdChange, //修改后
  658. afterFilter: this.trimmedRows, //排序前
  659. afterRemoveRow: this.romoveFm, //右键删除
  660. afterOnCellMouseDown: this.eventClick //鼠标点击
  661. });
  662. let pro = document.getElementById("hot-display-license-info");
  663. if (!!pro) {
  664. pro.parentNode.removeChild(pro);
  665. }
  666. this.isLoading = false;
  667. },
  668. //表格中的点击
  669. eventClick(el, rowArr) {
  670. //点击的是表头
  671. if (rowArr.row < 0) {
  672. return;
  673. }
  674. //被筛选过后的数组
  675. let trimmedArr = this.trimmedRows();
  676. //是否启用了排序
  677. let isSort = this.hot.getPlugin("columnSorting").isSorted();
  678. if (trimmedArr.length && isSort) {
  679. let sortArr = this.myHotArr.getPlugin("columnSorting").rowsMapper
  680. .__arrayMap;
  681. let infos = this.main[trimmedArr[sortArr[rowArr.row]]];
  682. this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
  683. } else if (isSort) {
  684. //排序后的数组
  685. let sortArr = this.hot.getPlugin("columnSorting").rowsMapper.__arrayMap;
  686. let infos = this.main[sortArr[rowArr.row]];
  687. this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
  688. } else if (trimmedArr.length) {
  689. let infos = this.main[trimmedArr[rowArr.row]];
  690. this.getInfors(infos, { row: trimmedArr[rowArr.row], col: rowArr.col });
  691. } else {
  692. let infos = this.main[rowArr.row];
  693. this.getInfors(infos, rowArr);
  694. }
  695. },
  696. tdChange(changeData, source) {
  697. if (!this.onlyRead) {
  698. if (changeData) {
  699. let trimmedArr = this.trimmedRows();
  700. let param = handsonUtils.getParam(changeData, source, this.hot, trimmedArr);
  701. let data = [];
  702. for (let i = 0; i < param.length; i++) {
  703. data.push(param[i]);
  704. }
  705. //如果data中包含/且data长度为1,将其转换成.
  706. if (changeData.length == 1 && changeData[0][1].indexOf("/") > 0) {
  707. changeData[0][1] = changeData[0][1].split("/").join(".")
  708. }
  709. //存在data进行修改请求
  710. if (data && data.length) {
  711. this.updateBusiness(data, changeData);
  712. }
  713. }
  714. }
  715. },
  716. //删除资产
  717. async romoveFm() {
  718. this.$confirm('此操作将删除该系统, 是否继续?', '提示', {
  719. confirmButtonText: '确定',
  720. cancelButtonText: '取消',
  721. type: 'warning'
  722. }).then(() => {
  723. let params = tools.differenceArr(this.main, this.copyMain)
  724. console.log(params, "params")
  725. let param = {
  726. secret: this.secret,
  727. ProjId: this.projectId,
  728. data: {
  729. criterias: []
  730. }
  731. }
  732. for (let i = 0; i < params.length; i++) {
  733. param.data.criterias.push({ id: params[i].id })
  734. }
  735. this.removeSys(param)
  736. this.getMain()
  737. }).catch(() => {
  738. this.$message({
  739. type: 'info',
  740. message: '已取消删除'
  741. });
  742. });
  743. },
  744. async removeSys(param) {
  745. await delBatchList(param, res => {
  746. this.$message.success("删除成功")
  747. })
  748. },
  749. // 修改
  750. updateBusiness(data, change) {
  751. let param = {
  752. ProjId: this.mess.ProjId,
  753. secret: this.mess.secret,
  754. data: {
  755. criterias: []
  756. }
  757. };
  758. //生成对应修改数据
  759. data.map((item, index) => {
  760. let arr = change[index][1].split(".");
  761. let info = {};
  762. info[arr[1]] = [{ value: change[index][3] != "" ? change[index][3] : null }];
  763. param.data.criterias.push({
  764. id: item.id,
  765. infos: info
  766. });
  767. });
  768. console.log(param)
  769. param.data.criterias.map(item => {
  770. for (let k in item.infos) {
  771. if (item.infos[k] == "") {
  772. item.infos[k] = null
  773. }
  774. }
  775. })
  776. updateBusiness(param).then(res => {
  777. console.log(res);
  778. });
  779. },
  780. //获取到了正确的信息
  781. getInfors(infos, row) {
  782. //其他的开始判断
  783. let val = this.hot.colToProp(row.col);
  784. this.systemId = infos.id
  785. if (val == "count") {
  786. this.dialog.relevance = true
  787. }
  788. if (val == "caozuo") {
  789. window.open(`
  790. http://adm.sagacloud.cn:8058/system?id=${infos.id}&pid=${this.projectId}&secret=${this.secret}`,"_blank")
  791. // this.iframeSrc =
  792. // process.env.BASE_URL +
  793. // ":8889/#/details?perjectId=" +
  794. // this.projectId +
  795. // "&secret=" +
  796. // this.secret +
  797. // "&FmId=" +
  798. // infos.id +
  799. // "&type=1&code=" +
  800. // infos.category.substring(2, 4);
  801. // this.dialog.details = true
  802. }
  803. if (val == "infos.EquipQRCode") {
  804. this.dialog.qrcode = true;
  805. this.$refs.qrcode.getCanvas(1111);
  806. }
  807. // if (val == "infos.Brand" || val == "infos.Specification") {
  808. // this.dialog.firm = true;
  809. // }
  810. // if (val == "infos.SupplierContractID") {
  811. // this.dialog.supply = true;
  812. // }
  813. // if (val == "infos.InsuranceNum") {
  814. // //选择保单
  815. // this.dialog.guarantee = true;
  816. // }
  817. if (val == "infos.InsuranceFile" || val == "infos.Archive") {
  818. this.filesArr = this.main[row.row].infos ? (this.main[row.row].infos[val.split(".")[1]] ? [this.main[row.row].infos[val.split(".")[1]]] : []) : []
  819. this.dialog.uploadFiles = true
  820. }
  821. if (
  822. val == "infos.InstallLocation" ||
  823. val == "infos.InstallPic" ||
  824. val == "infos.InstallDrawing" ||
  825. val == "infos.Nameplate" ||
  826. val == "infos.Drawing"
  827. ) {
  828. if (val == "infos.Nameplate") {
  829. this.imgsArr = this.main[row.row].infos ? (this.main[row.row].infos[val.split(".")[1]] ? [this.main[row.row].infos[val.split(".")[1]].key] : []) : []
  830. } else {
  831. this.imgsArr = this.main[row.row].infos ? (this.main[row.row].infos[val.split(".")[1]] ? [this.main[row.row].infos[val.split(".")[1]]] : []) : []
  832. }
  833. this.dialog.uploadImgs = true
  834. }
  835. if (val == "infos.Pic") {
  836. // console.log(this.main[row.row].infos[val.split(".")[1]], "this.main[row.row].infos[val.split")
  837. this.picsArr = this.main[row.row].infos ? (this.main[row.row].infos[val.split(".")[1]] ? this.main[row.row].infos[val.split(".")[1]] : []) : []
  838. this.dialog.pic = true
  839. }
  840. // if (
  841. // val == "infos.Supplier"
  842. // ) {
  843. // this.dialog.supplier = true;
  844. // }
  845. // if (val == "infos.Maintainer") {
  846. // this.dialog.maintainer = true;
  847. // }
  848. // if (
  849. // val == "infos.Insurer" ||
  850. // val == "infos.InsurerContactor") {
  851. // this.dialog.insurer = true;
  852. // }
  853. this.row = row.row
  854. this.messKey = val
  855. console.log(val, row);
  856. },
  857. //获取被筛选掉的行号
  858. trimmedRows() {
  859. // var plugin = hot.getPlugin('trimRows').trimmedRows;//获取被筛选掉的行号
  860. var plugin = this.hot.getPlugin("trimRows").trimmedRows;
  861. let dataLength = this.main.length;
  862. let dataArr = new Array();
  863. for (let i = 0; i < dataLength; i++) {
  864. dataArr.push(i);
  865. }
  866. if (plugin.length <= 0) {
  867. dataArr = undefined;
  868. } else {
  869. dataArr = this.array_diff(dataArr, plugin);
  870. }
  871. return dataArr || [];
  872. // var DataArray = new Array();
  873. // for (var i = 0; i < plugin.length; i++) {
  874. // // 通过行号获取数据
  875. // DataArray.push(this.hot.getSourceDataAtRow(plugin[i]));
  876. // }
  877. },
  878. //如果选择供应商之后
  879. supplierChange(data) {
  880. for (let key in data) {
  881. if (key == 'name') {
  882. this.setDataToMain(data[key], "Supplier", this.row)
  883. }
  884. if (key == 'email') {
  885. this.setDataToMain(data[key], "SupplierEmail", this.row)
  886. }
  887. if (key == 'website') {
  888. this.setDataToMain(data[key], "SupplierWeb", this.row)
  889. }
  890. if (key == 'phone') {
  891. this.setDataToMain(data[key], "SupplierPhone", this.row)
  892. }
  893. if (key == 'fox') {
  894. this.setDataToMain(data[key], "SupplierFax", this.row)
  895. }
  896. if (key == 'man') {
  897. this.setDataToMain(data[key], "SupplierContactor", this.row)
  898. }
  899. }
  900. // tools.setItem(this.deviceType.code, this.main)
  901. },
  902. //保险商变更
  903. changeInsurer(data) {
  904. for (let key in data) {
  905. if (key == 'name') {
  906. this.setDataToMain(data[key], "Insurer", this.row)
  907. }
  908. if (key == 'email') {
  909. this.setDataToMain(data[key], "InsurerEmail", this.row)
  910. }
  911. if (key == 'website') {
  912. this.setDataToMain(data[key], "InsurerWeb", this.row)
  913. }
  914. if (key == 'phone') {
  915. this.setDataToMain(data[key], "InsurerPhone", this.row)
  916. }
  917. if (key == 'fox') {
  918. this.setDataToMain(data[key], "InsurerFax", this.row)
  919. }
  920. if (key == 'man') {
  921. this.setDataToMain(data[key], "InsurerContactor", this.row)
  922. }
  923. }
  924. // tools.setItem(this.deviceType.code, this.main)
  925. },
  926. //维修商变更
  927. changeMaintainer(data) {
  928. for (let key in data) {
  929. if (key == 'name') {
  930. this.setDataToMain(data[key], "Maintainer", this.row)
  931. }
  932. if (key == 'email') {
  933. this.setDataToMain(data[key], "MaintainerEmail", this.row)
  934. }
  935. if (key == 'website') {
  936. this.setDataToMain(data[key], "MaintainerWeb", this.row)
  937. }
  938. if (key == 'phone') {
  939. this.setDataToMain(data[key], "MaintainerPhone", this.row)
  940. }
  941. if (key == 'fox') {
  942. this.setDataToMain(data[key], "MaintainerFax", this.row)
  943. }
  944. if (key == 'man') {
  945. this.setDataToMain(data[key], "MaintainerContactor", this.row)
  946. }
  947. }
  948. // tools.setItem(this.deviceType.code, this.main)
  949. },
  950. //上传文件弹窗触发事件
  951. fileChange(keys) {
  952. this.setDataToMain(keys[0], this.messKey.split(".")[1], this.row)
  953. // tools.setItem(this.deviceType.code, this.main)
  954. },
  955. //上传图片弹窗触发事件
  956. imgChange(keys) {
  957. this.setDataToMain(keys[0], this.messKey.split(".")[1], this.row)
  958. // tools.setItem(this.deviceType.code, this.main)
  959. },
  960. //设备图片弹窗改变事件
  961. changePics(keys) {
  962. this.setDataToMain(keys, this.messKey.split(".")[1], this.row)
  963. // tools.setItem(this.deviceType.code, this.main)
  964. },
  965. //判断是否有值,有值赋值
  966. setDataToMain(data, key, row) {
  967. if (!!data && data != '--') {
  968. if (!!this.main[row].infos) {
  969. //falg确定每个的是否有值
  970. let falg = false
  971. if (!this.main[row].infos[key]) {
  972. falg = true
  973. }
  974. //铭牌照片特殊处理
  975. if (key == 'Nameplate') {
  976. this.main[row].infos[key] = {
  977. "systemId": "dataPlatform",
  978. "name": "铭牌照片",
  979. "type": "image",
  980. "key": data
  981. }
  982. } else {
  983. this.main[row].infos[key] = data
  984. }
  985. if (falg) {
  986. this.updateBusiness([this.main[row]], [[0, "infos." + key, null, data]])
  987. }
  988. } else {
  989. this.main[row].infos = {}
  990. if (key == 'Nameplate') {
  991. this.main[row].infos[key] = {
  992. "systemId": "dataPlatform",
  993. "name": "铭牌照片",
  994. "type": "image",
  995. "key": data
  996. }
  997. } else {
  998. this.main[row].infos[key] = data
  999. }
  1000. }
  1001. } else {
  1002. this.main[row].infos[key] = ''
  1003. }
  1004. }
  1005. },
  1006. watch: {
  1007. dialog: {
  1008. deep: true,
  1009. handler: function () {
  1010. // if (!this.dialog.relevance) {
  1011. // this.reset()
  1012. // }
  1013. }
  1014. },
  1015. projectId(){
  1016. this.main = []
  1017. this.mess.deviceId = null
  1018. this.page.total = 0
  1019. }
  1020. }
  1021. };
  1022. </script>
  1023. <style lang="less">
  1024. .hanson-bar {
  1025. height: 40px;
  1026. padding: 5px 10px;
  1027. font-size: 14px;
  1028. overflow: hidden;
  1029. margin-top: 0;
  1030. line-height: 40px;
  1031. .iconfont {
  1032. font-size: 12px;
  1033. }
  1034. .el-button {
  1035. // margin-right: 10px;
  1036. }
  1037. }
  1038. </style>