addLegend.vue 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  1. <template>
  2. <div class='add-legend'>
  3. <el-dialog :title='title' :visible.sync='dialogVisible'>
  4. <!-- <add-list v-show='title=="" && GraphCategoryId' ref='searchList' :GraphCategoryId='GraphCategoryId' @mesg='mesg'></add-list> -->
  5. <add-form
  6. ref='add'
  7. :InfosList='InfosList'
  8. :InfoTypeIdList='InfoTypeIdList'
  9. :ruleForm='info'
  10. @addSuccess='addSuccess'
  11. @updateSuccess='updateSuccess'
  12. :title='title'
  13. ></add-form>
  14. <span slot='footer' class='dialog-footer'>
  15. <el-button @click='dialogVisible = false,cancal()' size='small'>取 消</el-button>
  16. <el-button type='primary' @click='save' size='small'>确 定</el-button>
  17. </span>
  18. </el-dialog>
  19. <TransferSelectModal
  20. defaultExpandAll
  21. default-expand-all
  22. v-if='treeData.length'
  23. :modalShow='modalShow4'
  24. placeholder='搜索'
  25. :linkage='false'
  26. :lastStage='true'
  27. :data='treeData'
  28. @cancel='treeCancel'
  29. @confirm='treeConfirm'
  30. :key='new Date().getTime()'
  31. />
  32. </div>
  33. </template>
  34. <script>
  35. import addForm from './addForm'
  36. import addList from '../legendRules/addList'
  37. import { groupByCategory, updateRelation } from '@/api/legendLibrary.js'
  38. export default {
  39. data() {
  40. return {
  41. dialogVisible: false,
  42. InfoTypeIdList: [],
  43. InfosList: [],
  44. info: {
  45. Name: '',
  46. Type: 'None',
  47. Unit: '',
  48. FillColor: '#ffffff',
  49. Color: '#ffffff',
  50. Url: '',
  51. LineWidth: '',
  52. LineDash: '',
  53. InfoTypeId: [], //铺位可视化typeid
  54. InfoLocal: [], //工程信息化位置与设备分类
  55. InfoSystem: [] //工程信息化专业/系统
  56. },
  57. title: '',
  58. GraphCategoryId: 'DTXT',
  59. modalShow4: false,
  60. treeData: []
  61. }
  62. },
  63. components: { addForm, addList },
  64. methods: {
  65. open(row, title, GraphCategoryId) {
  66. this.title = title
  67. this.GraphCategoryId = GraphCategoryId
  68. //console.log(title)
  69. if (GraphCategoryId) {
  70. groupByCategory({}).then(res => {
  71. this.treeData = []
  72. this.treeData = res.Data.map(i => this.getTree(i))
  73. })
  74. //treeSelect
  75. this.modalShow4 = true
  76. this.info = {
  77. Name: '',
  78. Type: 'None',
  79. Unit: '',
  80. FillColor: '#ffffff',
  81. Color: '#ffffff',
  82. Url: '',
  83. InfoTypeId: [], //铺位可视化typeid
  84. InfoLocal: [], //工程信息化位置与设备分类
  85. InfoSystem: [] //工程信息化专业/系统
  86. }
  87. } else if (title == '添加图例库') {
  88. this.dialogVisible = true
  89. this.InfoTypeIdList = []
  90. this.InfosList = []
  91. this.info = {
  92. Name: '',
  93. Type: 'None',
  94. Unit: '',
  95. FillColor: '#ffffff',
  96. Color: '#ffffff',
  97. Url: '',
  98. InfoTypeId: [], //铺位可视化typeid
  99. InfoLocal: [], //工程信息化位置与设备分类
  100. InfoSystem: [] //工程信息化专业/系统
  101. }
  102. } else if (title == '修改图例库') {
  103. this.dialogVisible = true
  104. this.info = row
  105. this.InfosList = []
  106. this.InfoTypeIdList = []
  107. // this.InfosList = [...row.InfoLocal.map(({ id }) => id), ...row.InfoSystem]
  108. this.InfosList = [...row.InfoLocal.map(({ id }) => id)]
  109. this.InfoTypeIdList = row.InfoTypeId
  110. console.log(this.InfosList, this.InfoTypeIdList)
  111. console.log(this.info)
  112. // 图例库规则中的transform
  113. } else if (title == '' && this.$refs.searchList) {
  114. this.$refs.searchList.queryAll()
  115. }
  116. },
  117. getTree(data) {
  118. return {
  119. id: data.Id,
  120. name: data.Name,
  121. children: data.Children && data.Children.length > 0 ? data.Children.map(i => this.getTree(i)) : []
  122. }
  123. },
  124. cancal() {
  125. this.info = {
  126. Name: '',
  127. Type: 'None',
  128. Unit: '',
  129. FillColor: '#ffffff',
  130. Color: '#ffffff',
  131. Url: '',
  132. InfoTypeId: [], //铺位可视化typeid
  133. InfoLocal: [], //工程信息化位置与设备分类
  134. InfoSystem: [] //工程信息化专业/系统
  135. }
  136. this.InfoTypeIdList = []
  137. this.InfosList = []
  138. this.$refs.add.fileList = []
  139. },
  140. mesg() {
  141. this.$emit('mesg')
  142. },
  143. updateSuccess() {
  144. this.$emit('updateSuccess')
  145. },
  146. addSuccess() {
  147. this.$emit('addSuccess')
  148. this.cancal()
  149. },
  150. save() {
  151. // FillColor,Color,Name
  152. if (this.info.Name == '') {
  153. this.$message.info('请填写图例名称')
  154. return false
  155. } else {
  156. if (this.info.Type != 'Image' && this.info.Type != 'None') {
  157. this.$refs.add.saveImg()
  158. } else {
  159. if (this.title == '添加图例库') {
  160. this.$refs.add.create()
  161. this.$emit('addSuccess')
  162. } else if (this.title == '修改图例库') {
  163. this.$refs.add.update()
  164. this.$emit('updateSuccess')
  165. }
  166. }
  167. this.dialogVisible = false
  168. // if (!this.title || this.info.Type == 'None') {
  169. // this.$refs.add.create()
  170. // }
  171. }
  172. },
  173. treeConfirm(ids, dataObj) {
  174. let postParams = {
  175. GraphCategoryId: this.GraphCategoryId.join(' '),
  176. GraphElementIds: ids
  177. }
  178. updateRelation({ postParams }).then(res => {
  179. if (res.Result == 'success') {
  180. this.$message.success('添加成功!')
  181. this.$emit('mesg')
  182. }
  183. })
  184. },
  185. treeCancel() {
  186. this.modalShow4 = false
  187. }
  188. }
  189. }
  190. </script>
  191. <style lang='less' scoped>
  192. .add-legend {
  193. }
  194. </style>
  195. <style lang='less'>
  196. .add-legend {
  197. .el-dialog {
  198. width: 840px;
  199. height: 509px;
  200. }
  201. .el-dialog__footer {
  202. position: absolute;
  203. bottom: 20px;
  204. right: 20px;
  205. }
  206. }
  207. </style>