batchDialog.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537
  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 :title="city.rname">{{ city.rname | filterImgNames }}</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 v-for="(item,index) in newEnclosure">
  64. <el-checkbox v-model="form[item.path]">
  65. <span @click="multiple(item.path)" style="cursor: pointer">{{ item.name }}</span>
  66. <span
  67. class="text-color"
  68. v-for="i in item.value"
  69. >{{ i.Name | filterImgName }}</span>
  70. </el-checkbox>
  71. </p>
  72. </div>
  73. </section>
  74. <el-button
  75. class="next-step"
  76. @click="next"
  77. >下一步
  78. </el-button>
  79. </div>
  80. <div
  81. v-show="active === 1"
  82. class="all-message"
  83. >
  84. <el-table
  85. ref="multipleTable"
  86. :data="tableData"
  87. max-height="300"
  88. tooltip-effect="dark"
  89. style="width:100%;margin-bottom: 10px"
  90. @selection-change="handleSelectionChange"
  91. >
  92. <el-table-column
  93. type="selection"
  94. width="55"
  95. />
  96. <el-table-column
  97. label="设备本地名称"
  98. width=""
  99. >
  100. <template slot-scope="scope">{{ scope.row.localName }}</template>
  101. </el-table-column>
  102. <el-table-column
  103. prop="localId"
  104. label="设备本地编码"
  105. width="120"
  106. />
  107. <el-table-column
  108. prop="build"
  109. label="所属建筑楼层"
  110. show-overflow-tooltip
  111. />
  112. </el-table>
  113. <my-pagination
  114. @change="getAllData"
  115. :page="page"
  116. ></my-pagination>
  117. <el-button
  118. type="primary"
  119. @click="maintenanceSelect"
  120. style="margin-top:10px"
  121. >维护已选
  122. </el-button>
  123. <el-button
  124. @click="active = 0"
  125. style="margin-right: 10px;margin-top:10px"
  126. >上 一 步
  127. </el-button>
  128. </div>
  129. </el-dialog>
  130. </template>
  131. <script>
  132. import myPagination from "@/components/ledger/lib/myPagination"
  133. import tools from "@/utils/buildfloor/tools";
  134. export default {
  135. name: "batchDialog",
  136. props: ['firmName', 'allObject', 'page', 'information', 'newEnclosure'],
  137. components: { myPagination },
  138. data() {
  139. return {
  140. form: {},
  141. batchDialog: false,//dialog
  142. active: 0,//进度条
  143. checkAll: false,//全选
  144. isIndeterminate: true,
  145. checkedCities: [],//选择的项,单项
  146. firm: [
  147. {
  148. name: "生产厂家/品牌型号",
  149. code: "dpManufacturerId",
  150. num: 2,
  151. }, {
  152. name: "供应商信息",
  153. code: "dpSupplierId",
  154. num: 8
  155. }, {
  156. name: "维修商信息",
  157. code: "dpMaintainerId",
  158. num: 35
  159. }, {
  160. name: "保险公司信息",
  161. code: "dpInsurerId",
  162. num: 42
  163. }
  164. ],
  165. radio: 1, //1增加,2覆盖
  166. checkedFile: [],//多项
  167. multipleSelection: [],//checkbox选择的对象数组
  168. filterList: [],//过滤单项选择的值
  169. deviceList: [],//过滤全选数据
  170. onlySelect: [],//检测是否有勾选单值信息
  171. videoModel: {
  172. archive: false,
  173. checkReport: false,
  174. drawing: false,
  175. installDrawing: false,
  176. insuranceFile: false,
  177. installPic: false,
  178. nameplate: false,
  179. pic: false
  180. },
  181. }
  182. },
  183. watch: {
  184. information() {
  185. return this.information
  186. },
  187. newEnclosure: {
  188. immediate: true,
  189. handler(val) {
  190. this.newEnclosure = val
  191. }
  192. }
  193. },
  194. created() {
  195. this.$forceUpdate()
  196. },
  197. computed: {
  198. newFirm() {
  199. this.firm.map(item => {
  200. if (item.num === this.firmName.num) {
  201. item.rname = this.firmName.name
  202. item.info = this.firmName
  203. }
  204. return item
  205. })
  206. return this.firm
  207. },
  208. tableData() {
  209. this.allObject.map(item => {
  210. let build = ''
  211. if (item.building && item.floor) {
  212. build = item.building.localName + ' - ' + item.floor.localName
  213. } else if (item.building) {
  214. build = item.building.localName
  215. } else if (item.floor) {
  216. build = item.floor.localName
  217. } else {
  218. build = '-'
  219. }
  220. item.build = build
  221. return item
  222. })
  223. return this.allObject
  224. },
  225. },
  226. filters: {
  227. filterImgName(value) {
  228. if (value && value.length > 16) {
  229. return value.substring(0, 12) + '...'
  230. } else {
  231. return value
  232. }
  233. },
  234. filterImgNames(value) {
  235. if (value && value.length > 16) {
  236. return value.substring(0, 16) + '...'
  237. } else {
  238. return value
  239. }
  240. }
  241. },
  242. methods: {
  243. next() { //下一步按钮
  244. // if (this.active++ > 1) this.active = 0
  245. this.deviceList = this.firm.filter(item => item.info)
  246. // if (!this.onlySelect.length) { //对单项全选进行过滤
  247. // this.$message({
  248. // message: '还没有选择单值信息哦',
  249. // type: 'warning'
  250. // });
  251. // return false
  252. // }
  253. let fillIn = this.onlySelect.some(i => !i.info)
  254. if (fillIn) {
  255. this.$message({
  256. message: '请填写勾选信息',
  257. type: 'warning'
  258. });
  259. return false
  260. }
  261. // if (!this.deviceList.length) { //对单项全选进行过滤
  262. // this.$message({
  263. // message: '单值信息没有填写哦',
  264. // type: 'warning'
  265. // });
  266. // return false
  267. // }
  268. if (this.checkAll) { // 如果单项全选
  269. if (this.deviceList.length < 4) { //对单项全选进行过滤
  270. this.$message({
  271. message: '单值的信息点存在未填写',
  272. type: 'warning'
  273. });
  274. return false
  275. } else {
  276. this.active++
  277. }
  278. } else {
  279. this.active++
  280. }
  281. },
  282. handleCheckChange(val) { //全选
  283. this.checkedCities = val ? this.firm : []
  284. this.isIndeterminate = false
  285. },
  286. handleCheckedCitiesChange(value) { //维护单项触发
  287. this.onlySelect = value
  288. this.filterList = value.filter(item => item.info)
  289. let checkCount = value.length
  290. this.checkAll = checkCount === this.firm.length
  291. this.isIndeterminate = checkCount > 0 && checkCount < this.firm.length
  292. },
  293. handleCheckedFileChange(value) { //维护多项触发
  294. },
  295. fourVendors(code) {
  296. this.$emit('code', code)
  297. },
  298. // 选择维护方式
  299. maintenance(val) {
  300. },
  301. maintenanceSelect() { //维护已选
  302. if (!this.multipleSelection.length) {
  303. this.$message({
  304. message: '还没有选择实例哦',
  305. type: 'warning'
  306. });
  307. return false
  308. }
  309. let arr = []
  310. // dpSupplierId 供应商 dpManufacturerId 生产商 dpBrandId 品牌
  311. // dpSpecificationId 型号 dpInsurerId 保险商 dpMaintainerId 维修商
  312. this.multipleSelection.forEach(item => {
  313. let id = item.id
  314. arr.push({ id })
  315. })
  316. let Id = {}
  317. // let single = {};
  318. let equipManufactor, supplyPurchase, operationMainte, insuranceDoc;
  319. // this.filterList 单选数组,取到需要数据
  320. // 过滤数组,取对象
  321. this.checkedCities.filter(item => item.num === 2).forEach(i => { //型号
  322. if (i.info) {
  323. let { venderName, brandName, Specification, venderId, brandId, specificationId } = i.info
  324. equipManufactor = {
  325. manufacturer: venderName,
  326. brand: brandName,
  327. specification: Specification
  328. }
  329. Id.dpManufacturerId = venderId
  330. Id.dpBrandId = brandId
  331. Id.dpSpecificationId = specificationId
  332. }
  333. })
  334. this.checkedCities.filter(item => item.num === 8).forEach(i => { //供应商8
  335. if (i.info) {
  336. let { website, name, venderId } = i.info
  337. supplyPurchase = {
  338. supplierWeb: website,
  339. supplier: name,
  340. }
  341. Id.dpSupplierId = venderId
  342. }
  343. })
  344. this.checkedCities.filter(item => item.num === 35).forEach(i => { //维修商
  345. if (i.info) {
  346. let { name, venderId } = i.info
  347. operationMainte = {
  348. maintainer: name
  349. }
  350. Id.dpMaintainerId = venderId
  351. }
  352. })
  353. let insurance = this.checkedCities.filter(item => item.num === 42)
  354. let param = {}
  355. this.newEnclosure.forEach(({ path, value }) => param[path] = value)
  356. let file = param['infos.insuranceFile']
  357. if (insurance.length) {
  358. insurance.forEach(i => { //保险
  359. if (i.info) {
  360. let { website, name, venderId } = i.info
  361. insuranceDoc = {
  362. insurer: name,
  363. insurerWeb: website,
  364. insuranceFile: file && file.length > 0 && this.radio === 2 ? file : ''
  365. }
  366. Id.dpInsurerId = venderId
  367. }
  368. })
  369. } else {
  370. if (this.radio === 2 && file && file.length > 0) {
  371. insuranceDoc = {
  372. insuranceFile: file
  373. }
  374. }
  375. }
  376. // this.information 多选信息
  377. let valuable = [], newValuable = []
  378. valuable = this.newEnclosure.filter(i => this.form[i.path] && i.value).forEach(({ code, value }) => newValuable[code] = value);
  379. // console.log( newValuable,'多选信息')
  380. if (this.radio === 1) { //组装数据,根据是覆盖该是增量,1是增量
  381. // 1:单选数据
  382. let arr1 = this.deepCopy(arr).map(item => ({
  383. ...Id,
  384. ...item,
  385. infos: { ...equipManufactor, ...supplyPurchase, ...operationMainte, ...insuranceDoc }
  386. }))
  387. let arr2 = this.deepCopy(arr).map(item => ({
  388. ...item,
  389. ...newValuable
  390. }))
  391. this.$emit('upDataDevice', 1, arr1, arr2)
  392. }
  393. if (this.radio === 2) {
  394. let param = {}, singleList = {}
  395. this.newEnclosure.forEach(({ path, value }) => param[path] = value)
  396. singleList.infos = { ...equipManufactor, ...supplyPurchase, ...operationMainte, ...insuranceDoc }
  397. let pa = Object.assign(param, singleList)
  398. pa = tools.formatData(pa)
  399. let arr3 = this.deepCopy(arr).map(item => ({
  400. ...Id,
  401. ...item,
  402. ...pa,
  403. }))
  404. this.$emit('upDataDevice', 2, arr3)
  405. }
  406. this.closeDialog()
  407. },
  408. closeDialog() { //关闭弹窗,返回初始状态
  409. this.batchDialog = false
  410. this.clearData()
  411. },
  412. clearData() { //清空规则 filterList
  413. this.active = 0
  414. this.checkedCities = []//清空单项的checkbox
  415. this.firm.forEach(item => {
  416. item.rname = ''
  417. item.info = ''
  418. })
  419. // this.filterList = []
  420. this.onlySelect = []
  421. // this.deviceList = []
  422. this.radio = 1 //返回到默认增量
  423. //清空附件信息
  424. for (let i in this.form) {
  425. this.form[i] = false
  426. }
  427. this.newEnclosure.map(i => {
  428. this.$set(i, 'value', [])
  429. })
  430. },
  431. handleSelectionChange(val) {
  432. this.multipleSelection = val
  433. },
  434. getAllData() {
  435. this.$emit('getAllData')
  436. },
  437. multiple(val) {
  438. this.$emit('multiples', val)
  439. },
  440. deepCopy(obj) {
  441. return JSON.parse(JSON.stringify(obj))
  442. }
  443. }
  444. }
  445. </script>
  446. <style scoped lang="less">
  447. .batchContainer {
  448. /deep/ .el-table-column--selection .cell {
  449. padding: 0;
  450. }
  451. /deep/ .el-step__description {
  452. margin: 2% 0;
  453. }
  454. .text-color {
  455. color: #409EFF
  456. }
  457. .el-checkbox-group {
  458. display: flex;
  459. justify-content: space-between;
  460. flex-direction: row;
  461. flex-wrap: wrap;
  462. .el-checkbox {
  463. width: 43%;
  464. }
  465. .el-checkbox:last-of-type {
  466. margin-right: 30px;
  467. }
  468. }
  469. .next-step {
  470. display: block;
  471. float: right;
  472. }
  473. .checkbox {
  474. display: flex;
  475. justify-content: space-between;
  476. flex-direction: row;
  477. flex-wrap: wrap;
  478. p {
  479. width: 50%;
  480. }
  481. .el-checkbox:last-of-type {
  482. margin-right: 10px;
  483. }
  484. }
  485. .text-message {
  486. overflow: hidden;
  487. margin-top: 10px;
  488. color: #333;
  489. border-left: 8px solid #333;
  490. text-indent: 10px;
  491. font-weight: 600;
  492. }
  493. .small {
  494. font-size: 12px;
  495. color: #555;
  496. }
  497. .all-message {
  498. overflow: hidden;
  499. button {
  500. float: right;
  501. padding: 10px;
  502. margin-left: 5px;
  503. }
  504. }
  505. }
  506. </style>