addLegend.vue 9.3 KB

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