addLegend.vue 7.7 KB

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