batchDialog.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652
  1. <template>
  2. <el-dialog
  3. title="批量维护信息点"
  4. :visible.sync="batchDialog"
  5. class="batchContainer"
  6. >
  7. <el-steps
  8. :active="active"
  9. align-center
  10. >
  11. <el-step
  12. @click.native="active = 0"
  13. description="填写需维护的信息点"
  14. />
  15. <el-step
  16. @click.native="active = 1"
  17. description="选择批量维护的对象实例"
  18. />
  19. </el-steps>
  20. <hr>
  21. <div
  22. v-show="active === 0"
  23. style="overflow: hidden"
  24. >
  25. <section>
  26. <p class="text-message">维护只有单值的信息点</p>
  27. <span class="small">请选择需维护的信息点</span>
  28. <el-checkbox
  29. :indeterminate="isIndeterminate"
  30. v-model="checkAll"
  31. @change="handleCheckChange"
  32. >
  33. 全部选择
  34. </el-checkbox>
  35. <div style="margin: 15px "></div>
  36. <el-checkbox-group
  37. v-model="checkedCities"
  38. @change="handleCheckedCitiesChange"
  39. >
  40. <el-checkbox
  41. v-for="(city,index) in newFirm"
  42. :label="city"
  43. :key="index"
  44. >
  45. <span @click="fourVendors(city.code)"> {{city.name}}:</span>
  46. <span>{{city.rname}}</span>
  47. </el-checkbox>
  48. </el-checkbox-group>
  49. </section>
  50. <!--维护有多个值的信息-->
  51. <section>
  52. <p class="text-message">维护有多个值的信息点</p>
  53. <span class="small">选择值的更新方式</span>
  54. <el-radio-group
  55. v-model="radio"
  56. @change="maintenance"
  57. >
  58. <el-radio :label="1">以增量方式维护</el-radio>
  59. <el-radio :label="2">以覆盖方式维护</el-radio>
  60. </el-radio-group>
  61. <div style="margin: 15px "></div>
  62. <div class="checkbox">
  63. <p>
  64. <el-checkbox
  65. v-model="videoModel.archive"
  66. @change="multiple('archive')"
  67. > <!--设备文档-->
  68. {{information.archive.name}}
  69. </el-checkbox>
  70. <span
  71. class="text-color"
  72. v-for="item in information.archive.Archive"
  73. >{{item.Name | filterImgName}}</span>
  74. </p>
  75. <p>
  76. <el-checkbox
  77. v-model="videoModel.checkReport"
  78. @change="multiple('checkReport')"
  79. ><!--安装质检报告-->
  80. {{information.checkReport.name}}
  81. </el-checkbox>
  82. <span
  83. class="text-color"
  84. v-for="item in information.checkReport.CheckReport"
  85. >{{item.Name | filterImgName}}</span>
  86. </p>
  87. <p>
  88. <el-checkbox
  89. v-model="videoModel.drawing"
  90. @change="multiple('drawing')"
  91. ><!--设备图纸-->
  92. {{information.drawing.name}}
  93. </el-checkbox>
  94. <span
  95. class="text-color"
  96. v-for="item in information.drawing.Drawing"
  97. >{{item.Key | filterImgName}}</span>
  98. </p>
  99. <p>
  100. <el-checkbox
  101. v-model="videoModel.installDrawing"
  102. @change="multiple('installDrawing')"
  103. ><!--安装图纸-->
  104. {{information.installDrawing.name}}
  105. </el-checkbox>
  106. <span
  107. class="text-color"
  108. v-for="item in information.installDrawing.InstallDrawing"
  109. >{{item.Key | filterImgName}}</span>
  110. </p>
  111. <p>
  112. <el-checkbox
  113. v-model="videoModel.installPic"
  114. @change="multiple('installPic')"
  115. ><!--安装照片-->
  116. {{information.installPic.name}}
  117. </el-checkbox>
  118. <span
  119. class="text-color"
  120. v-for="item in information.installPic.InstallPic"
  121. >{{item.Key | filterImgName}}</span>
  122. </p>
  123. <p>
  124. <el-checkbox
  125. v-model="videoModel.insuranceFile"
  126. @change="multiple('insuranceFile')"
  127. ><!--保险文件-->
  128. {{information.insuranceFile.name}}
  129. </el-checkbox>
  130. <span
  131. class="text-color"
  132. v-for="item in information.insuranceFile.InsuranceFile"
  133. >{{item.Name | filterImgName}}</span>
  134. </p>
  135. <p>
  136. <el-checkbox
  137. v-model="videoModel.pic"
  138. @change="multiple('pic')"
  139. ><!--设备照片-->
  140. {{information.pic.name}}
  141. </el-checkbox>
  142. <span
  143. class="text-color"
  144. v-for="item in information.pic.Pic"
  145. >{{item.Key | filterImgName}}</span>
  146. </p>
  147. <p>
  148. <el-checkbox
  149. v-model="videoModel.nameplate"
  150. @change="multiple('nameplate')"><!--设备铭牌照片-->
  151. {{information.nameplate.name}}
  152. </el-checkbox>
  153. <span
  154. class="text-color"
  155. v-for="item in information.nameplate.Nameplate"
  156. >{{item.Key | filterImgName}}</span>
  157. </p>
  158. </div>
  159. <!-- test-->
  160. <!-- <br><br>-->
  161. <!-- <div class="checkbox">-->
  162. <!-- <p v-for="(item,index) in newEnclosure">-->
  163. <!-- <el-checkbox-->
  164. <!-- v-model="item.Path"-->
  165. <!-- @change="multiple(item.InfoPointCode)"-->
  166. <!-- > &lt;!&ndash;设备文档&ndash;&gt;-->
  167. <!-- {{item.InfoPointName}}-->
  168. <!-- </el-checkbox>-->
  169. <!--&lt;!&ndash; <span&ndash;&gt;-->
  170. <!--&lt;!&ndash; class="text-color"&ndash;&gt;-->
  171. <!--&lt;!&ndash; v-for="item in information.archive.Archive"&ndash;&gt;-->
  172. <!--&lt;!&ndash; >{{item.Name | filterImgName}}</span> &ndash;&gt;-->
  173. <!-- <span-->
  174. <!-- class="text-color"-->
  175. <!-- ></span>-->
  176. <!-- </p>-->
  177. <!-- </div>-->
  178. <!-- /test-->
  179. </section>
  180. <el-button
  181. class="next-step"
  182. @click="next"
  183. >下一步
  184. </el-button>
  185. </div>
  186. <div
  187. v-show="active === 1"
  188. class="all-message"
  189. >
  190. <el-table
  191. ref="multipleTable"
  192. :data="tableData"
  193. max-height="300"
  194. tooltip-effect="dark"
  195. style="width:100%;margin-bottom: 10px"
  196. @selection-change="handleSelectionChange"
  197. >
  198. <el-table-column
  199. type="selection"
  200. width="55"
  201. />
  202. <el-table-column
  203. label="设备本地名称"
  204. width=""
  205. >
  206. <template slot-scope="scope">{{scope.row.EquipLocalName}}</template>
  207. </el-table-column>
  208. <el-table-column
  209. prop="EquipLocalID"
  210. label="设备本地编码"
  211. width="120"
  212. />
  213. <el-table-column
  214. prop="build"
  215. label="所属建筑楼层"
  216. show-overflow-tooltip
  217. />
  218. </el-table>
  219. <my-pagination
  220. @change="getAllData"
  221. :page="page"
  222. ></my-pagination>
  223. <el-button
  224. type="primary"
  225. @click="maintenanceSelect"
  226. style="margin-top:10px"
  227. >维护已选
  228. </el-button>
  229. <el-button
  230. @click="active = 0"
  231. style="margin-right: 10px;margin-top:10px"
  232. >上 一 步
  233. </el-button>
  234. </div>
  235. </el-dialog>
  236. </template>
  237. <script>
  238. import myPagination from "@/components/ledger/lib/myPagination"
  239. export default {
  240. name: "batchDialog",
  241. props: ['firmName', 'allObject', 'page', 'information','newEnclosure'],
  242. components: {myPagination},
  243. data() {
  244. return {
  245. batchDialog: false,//dialog
  246. active: 0,//进度条
  247. checkAll: false,//全选
  248. isIndeterminate: true,
  249. checkedCities: [],//选择的项,单项
  250. firm: [
  251. {
  252. name: "生产厂家/品牌型号",
  253. code: "DPManufacturerID",
  254. num: 2,
  255. }, {
  256. name: "供应商信息",
  257. code: "DPSupplierID",
  258. num: 8
  259. }, {
  260. name: "维修商信息",
  261. code: "DPMaintainerID",
  262. num: 35
  263. }, {
  264. name: "保险公司信息",
  265. code: "DPInsurerID",
  266. num: 42
  267. }
  268. ],
  269. radio: 1, //1增加,2覆盖
  270. checkedFile: [],//多项
  271. multipleSelection: [],//checkbox选择的对象数组
  272. filterList: [],//过滤单项选择的值
  273. deviceList: [],//过滤全选数据
  274. onlySelect: [],//检测是否有勾选单值信息
  275. videoModel: {
  276. archive: false,
  277. checkReport: false,
  278. drawing: false,
  279. installDrawing: false,
  280. insuranceFile: false,
  281. installPic: false,
  282. nameplate: false,
  283. pic: false
  284. },
  285. }
  286. },
  287. watch: {
  288. information() {
  289. return this.information
  290. },
  291. },
  292. computed: {
  293. newFirm() {
  294. this.firm.map(item => {
  295. if (item.num === this.firmName.num) {
  296. item.rname = this.firmName.name
  297. item.info = this.firmName
  298. }
  299. return item
  300. })
  301. return this.firm
  302. },
  303. tableData() {
  304. this.allObject.map(item => {
  305. let build = ''
  306. if (item.Building && item.Floor) {
  307. build = item.Building.BuildLocalName + ' - ' + item.Floor.FloorLocalName
  308. } else if (item.Building) {
  309. build = item.Building.BuildLocalName
  310. } else if (item.Floor) {
  311. build = item.Floor.FloorLocalName
  312. } else {
  313. build = '-'
  314. }
  315. item.build = build
  316. return item
  317. })
  318. return this.allObject
  319. },
  320. },
  321. filters: {
  322. filterImgName(value) {
  323. if (value.length > 16) {
  324. return value.substring(0, 12) + '...'
  325. } else {
  326. return value
  327. }
  328. }
  329. },
  330. methods: {
  331. next() { //下一步按钮
  332. // if (this.active++ > 1) this.active = 0
  333. this.deviceList = this.firm.filter(item => item.info)
  334. // if (!this.onlySelect.length) { //对单项全选进行过滤
  335. // this.$message({
  336. // message: '还没有选择单值信息哦',
  337. // type: 'warning'
  338. // });
  339. // return false
  340. // }
  341. let fillIn = this.onlySelect.some(i => !i.info)
  342. if (fillIn) {
  343. this.$message({
  344. message: '请填写勾选信息',
  345. type: 'warning'
  346. });
  347. return false
  348. }
  349. // if (!this.deviceList.length) { //对单项全选进行过滤
  350. // this.$message({
  351. // message: '单值信息没有填写哦',
  352. // type: 'warning'
  353. // });
  354. // return false
  355. // }
  356. if (this.checkAll) { // 如果单项全选
  357. if (this.deviceList.length < 4) { //对单项全选进行过滤
  358. this.$message({
  359. message: '单值的信息点存在未填写',
  360. type: 'warning'
  361. });
  362. return false
  363. } else {
  364. this.active++
  365. }
  366. } else {
  367. this.active++
  368. }
  369. },
  370. handleCheckChange(val) { //全选
  371. this.checkedCities = val ? this.firm : []
  372. this.isIndeterminate = false
  373. },
  374. handleCheckedCitiesChange(value) { //维护单项触发
  375. this.onlySelect = value
  376. this.filterList = value.filter(item => item.info)
  377. let checkCount = value.length
  378. this.checkAll = checkCount === this.firm.length
  379. this.isIndeterminate = checkCount > 0 && checkCount < this.firm.length
  380. },
  381. handleCheckedFileChange(value) { //维护多项触发
  382. },
  383. fourVendors(code) {
  384. this.$emit('code', code)
  385. },
  386. // 选择维护方式
  387. maintenance(val) {
  388. },
  389. maintenanceSelect() { //维护已选
  390. if (!this.multipleSelection.length) {
  391. this.$message({
  392. message: '还没有选择实例哦',
  393. type: 'warning'
  394. });
  395. return false
  396. }
  397. let arr = []
  398. // DPSupplierID 供应商 DPManufacturerID 生产商 DPBrandID 品牌
  399. // DPSpecificationID 型号 DPInsurerID 保险商 DPMaintainerID 维修商
  400. this.multipleSelection.forEach(item => {
  401. let EquipID = item.EquipID
  402. arr.push({EquipID})
  403. })
  404. let Id = {}
  405. let single = {};
  406. // this.filterList 单选数组,取到需要数据
  407. // 过滤数组,取对象
  408. this.checkedCities.filter(item => item.num === 2).forEach(i => { //型号
  409. if (i.info) {
  410. let {venderName, brandName, Specification, venderId, brandId, specificationId} = i.info
  411. single.EquipManufactor = {
  412. Manufacturer: venderName,
  413. Brand: brandName,
  414. Specification: Specification
  415. }
  416. Id.DPManufacturerID = venderId
  417. Id.DPBrandID = brandId
  418. Id.DPSpecificationID = specificationId
  419. }
  420. })
  421. this.checkedCities.filter(item => item.num === 8).forEach(i => { //供应商8
  422. if (i.info) {
  423. let {website, name, venderId} = i.info
  424. single.SupplyPurchase = {
  425. SupplierWeb: website,
  426. Supplier: name,
  427. }
  428. Id.DPSupplierID = venderId
  429. }
  430. })
  431. this.checkedCities.filter(item => item.num === 35).forEach(i => { //维修商
  432. if (i.info) {
  433. let {name, venderId} = i.info
  434. single.OperationMainte = {
  435. Maintainer: name
  436. }
  437. Id.DPMaintainerID = venderId
  438. }
  439. })
  440. let insurance = this.checkedCities.filter(item => item.num === 42)
  441. if (insurance.length) {
  442. insurance.forEach(i => { //保险
  443. if (i.info) {
  444. let {website, name, venderId} = i.info
  445. single.InsuranceDoc = {
  446. Insurer: name,
  447. InsurerWeb: website,
  448. InsuranceFile: this.information.insuranceFile.InsuranceFile.length && this.radio === 2 ? this.information.insuranceFile.InsuranceFile : undefined
  449. }
  450. Id.DPInsurerID = venderId
  451. }
  452. })
  453. } else {
  454. if (this.radio === 2 && this.information.insuranceFile.InsuranceFile.length) {
  455. single.InsuranceDoc = {
  456. InsuranceFile: this.information.insuranceFile.InsuranceFile.length ? this.information.insuranceFile.InsuranceFile : undefined
  457. }
  458. }
  459. }
  460. // this.information 多选信息
  461. let {archive, checkReport, drawing, installDrawing, installPic, insuranceFile, nameplate, pic} = this.information
  462. let multiple = {
  463. InsuranceDoc: insuranceFile.InsuranceFile.length || this.videoModel.insuranceFile ? {
  464. InsuranceFile: (insuranceFile.InsuranceFile.length && this.videoModel.insuranceFile) ? insuranceFile.InsuranceFile : undefined
  465. } : undefined,
  466. PhotoDoc: archive.Archive.length || drawing.Drawing.length || nameplate.Nameplate.length || pic.Pic.length ? {
  467. Archive: (archive.Archive.length && this.videoModel.archive) ? archive.Archive : undefined,
  468. Drawing: (drawing.Drawing.length && this.videoModel.drawing) ? drawing.Drawing : undefined,
  469. Nameplate: (nameplate.Nameplate.length && this.videoModel.nameplate) ? nameplate.Nameplate : undefined,
  470. Pic: (pic.Pic.length && this.videoModel.pic) ? pic.Pic : undefined
  471. } : undefined,
  472. Siteinstall: installPic.InstallPic.length || installDrawing.InstallDrawing.length || checkReport.CheckReport.length ? {
  473. InstallPic: (installPic.InstallPic.length && this.videoModel.installPic) ? installPic.InstallPic : undefined,
  474. InstallDrawing: (installDrawing.InstallDrawing.length && this.videoModel.installDrawing) ? installDrawing.InstallDrawing : undefined,
  475. CheckReport: (checkReport.CheckReport.length && this.videoModel.checkReport) ? checkReport.CheckReport : undefined
  476. } : undefined
  477. }
  478. let LedgerParam = {}
  479. if (this.radio === 1) { //组装数据,根据是覆盖该是增量,1是增量
  480. // 1:单选数据
  481. let arr1 = this.deepCopy(arr).map(item => ({
  482. ...Id,
  483. ...item,
  484. LedgerParam: {...single}
  485. }))
  486. // 2:多选数据
  487. let {InsuranceDoc, PhotoDoc, Siteinstall} = multiple
  488. let arr2 = this.deepCopy(arr).map(item => ({
  489. ...item,
  490. ...InsuranceDoc,
  491. ...PhotoDoc,
  492. ...Siteinstall
  493. // LedgerParam: {...multiple}
  494. }))
  495. this.$emit('upDataDevice', 1, arr1, arr2)
  496. }
  497. if (this.radio === 2) {
  498. let {InsuranceDoc, PhotoDoc, Siteinstall} = multiple
  499. LedgerParam = {
  500. ...single,
  501. ...PhotoDoc,
  502. ...Siteinstall
  503. };
  504. let arr3 = this.deepCopy(arr).map(item => ({
  505. ...Id,
  506. ...item,
  507. LedgerParam: {...LedgerParam}
  508. }))
  509. this.$emit('upDataDevice', 2, arr3)
  510. }
  511. this.closeDialog()
  512. },
  513. closeDialog() { //关闭弹窗,返回初始状态
  514. this.batchDialog = false
  515. this.clearData()
  516. },
  517. clearData() { //清空规则 filterList
  518. this.active = 0
  519. this.checkedCities = []//清空单项的checkbox
  520. this.firm.forEach(item => {
  521. item.rname = ''
  522. item.info = ''
  523. })
  524. // this.filterList = []
  525. this.onlySelect = []
  526. // this.deviceList = []
  527. this.radio = 1 //返回到默认增量
  528. // this.multipleSelection = [] //清空实例内容
  529. this.videoModel = {
  530. archive: false,
  531. checkReport: false,
  532. drawing: false,
  533. installDrawing: false,
  534. insuranceFile: false,
  535. installPic: false,
  536. nameplate: false,
  537. pic: false
  538. }
  539. let {archive, checkReport, drawing, installDrawing, installPic, insuranceFile, nameplate, pic} = this.information
  540. archive.Archive = []
  541. checkReport.CheckReport = []
  542. drawing.Drawing = []
  543. installDrawing.InstallDrawing = []
  544. installPic.InstallPic = []
  545. insuranceFile.InsuranceFile = []
  546. nameplate.Nameplate = []
  547. pic.Pic = []
  548. },
  549. handleSelectionChange(val) {
  550. this.multipleSelection = val
  551. },
  552. getAllData() {
  553. this.$emit('getAllData')
  554. },
  555. multiple(val) {
  556. this.$emit('multiple', val)
  557. },
  558. deepCopy(obj) {
  559. return JSON.parse(JSON.stringify(obj))
  560. }
  561. }
  562. }
  563. </script>
  564. <style scoped lang="less">
  565. .batchContainer {
  566. /deep/ .el-step__description {
  567. margin: 2% 0;
  568. }
  569. .text-color {
  570. color: #409EFF
  571. }
  572. .el-checkbox-group {
  573. display: flex;
  574. justify-content: space-between;
  575. flex-direction: row;
  576. flex-wrap: wrap;
  577. .el-checkbox {
  578. width: 43%;
  579. }
  580. .el-checkbox:last-of-type {
  581. margin-right: 30px;
  582. }
  583. }
  584. .next-step {
  585. display: block;
  586. float: right;
  587. }
  588. .checkbox {
  589. display: flex;
  590. justify-content: space-between;
  591. flex-direction: row;
  592. flex-wrap: wrap;
  593. p {
  594. width: 50%;
  595. }
  596. .el-checkbox:last-of-type {
  597. margin-right: 10px;
  598. }
  599. }
  600. .text-message {
  601. overflow: hidden;
  602. margin-top: 10px;
  603. color: #333;
  604. border-left: 8px solid #333;
  605. text-indent: 10px;
  606. font-weight: 600;
  607. }
  608. .small {
  609. font-size: 12px;
  610. color: #555;
  611. }
  612. .all-message {
  613. overflow: hidden;
  614. button {
  615. float: right;
  616. padding: 10px;
  617. margin-left: 5px;
  618. }
  619. }
  620. }
  621. </style>