batchDialog.vue 14 KB

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