addLegend.vue 7.7 KB

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