picDialog.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. <!--
  2. 上传图片的弹窗
  3. -->
  4. <template>
  5. <el-dialog title="上传图片" :visible.sync="dialog.pic" width="500px;">
  6. <div style="max-height:500px;overflow-y:auto;">
  7. <div>
  8. <h3>设备图片</h3>
  9. <upload-imgs
  10. :readOnly="read"
  11. :keysArr="picArrs"
  12. @change="imageItem"
  13. />
  14. </div>
  15. <!-- max="6"-->
  16. <div>
  17. <h3>视频</h3>
  18. <upload-imgs
  19. :accept="'video/*'"
  20. type="video"
  21. :keysArr="videoArr"
  22. @change="videoItem"
  23. :videoPicArr="videoPicArr"
  24. :readOnly="read"
  25. />
  26. <!-- max="2"-->
  27. </div>
  28. </div>
  29. </el-dialog>
  30. </template>
  31. <script>
  32. import uploadImgs from "@/components/ledger/lib/uploadImgsName";
  33. export default {
  34. components: {
  35. uploadImgs
  36. },
  37. props: {
  38. dialog: {
  39. type: Object,
  40. default: function () {
  41. return {
  42. pic: true
  43. };
  44. }
  45. },
  46. keysArr: {
  47. type: Array,
  48. default: function () {
  49. return []
  50. }
  51. },
  52. read: {
  53. type: Boolean,
  54. default: false
  55. },
  56. firmDataType: {
  57. type: String
  58. },
  59. information: {
  60. type: Object
  61. },
  62. infoType: {
  63. type: String
  64. }
  65. },
  66. data() {
  67. return {
  68. picArrs: [],
  69. panoramaArr: [],
  70. videoArr: [],
  71. videoPicArr: [],
  72. changeKeys: []
  73. };
  74. },
  75. created() {
  76. },
  77. mounted() {
  78. },
  79. methods: {
  80. imageItem(images) {
  81. this.picArrs = images
  82. this.change()
  83. },
  84. panoramaItem(images) {
  85. this.panoramaArr = images
  86. this.change()
  87. },
  88. videoItem(videos, pe, pics) {
  89. this.videoArr = videos
  90. this.videoPicArr = pics
  91. this.change()
  92. },
  93. change() {
  94. // let picsArr = this.getArr(this.picArrs, "设备图片", "image")
  95. // let videos = this.getArr(this.videoArr, "视频", "video")
  96. // let videoPics = this.getArr(this.videoPicArr, "视频资料", "image_video")
  97. // let panoramas = this.getArr(this.panoramaArr, "全景照片", "panorama")
  98. let picsArr = this.picArrs
  99. let videos = this.videoArr
  100. let videoPics = this.videoPicArr
  101. let panoramas = this.panoramaArr
  102. this.changeKeys = picsArr.concat(videos).concat(videoPics).concat(panoramas)
  103. if (this.firmDataType === 'dialog') {
  104. // this.information.pic.Pic = this.changeKeys
  105. // this.$emit("change", this.information, this.firmDataType)
  106. // this.$emit("change", this.information, this.firmDataType, this.changeKeys)
  107. this.$emit("change", this.infoType, this.firmDataType, this.changeKeys)
  108. } else {
  109. this.$emit("change", this.changeKeys)
  110. }
  111. },
  112. getArr(arr, name, type) {
  113. return arr.map(item => {
  114. return {
  115. "SystemId": "dataPlatform",
  116. "Name": name,
  117. "Type": type,
  118. "Key": item,
  119. }
  120. })
  121. },
  122. //将父组件传来的数据进行分组
  123. fatherTochild() {
  124. this.panoramaArr = []
  125. this.videoArr = []
  126. this.videoPicArr = []
  127. this.picArrs = []
  128. if (this.keysArr instanceof Array) {
  129. this.keysArr.map(item => {
  130. if (item.Type == 'panorama') {
  131. this.panoramaArr.push(item)
  132. } else if (item.Type == "video") {
  133. this.videoArr.push(item)
  134. } else if (item.Type == 'image_video') {
  135. this.videoPicArr.push(item)
  136. } else {
  137. this.picArrs.push(item)
  138. }
  139. })
  140. } else {
  141. this.panoramaArr = []
  142. this.videoArr = []
  143. this.videoPicArr = []
  144. this.picArrs = []
  145. }
  146. }
  147. },
  148. watch: {
  149. dialog: {
  150. deep: true,
  151. handler: function () {
  152. if (this.dialog.pic) {
  153. this.fatherTochild()
  154. }
  155. }
  156. }
  157. }
  158. };
  159. </script>
  160. <style>
  161. </style>