addLegend.vue 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275
  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. InfoTypeId: [], //铺位可视化typeid
  82. InfoLocal: [], //工程信息化位置与设备分类
  83. InfoSystem: [] //工程信息化专业/系统
  84. },
  85. title: '',
  86. GraphCategoryId: 'DTXT',
  87. modalShow4: false,
  88. treeData: [],
  89. tableData: []
  90. }
  91. },
  92. components: { addForm, addList },
  93. methods: {
  94. open(row, title, GraphCategoryId) {
  95. this.title = title
  96. this.GraphCategoryId = GraphCategoryId
  97. //console.log(title)
  98. let getParams = {
  99. categoryId: String(this.GraphCategoryId)
  100. }
  101. if (GraphCategoryId) {
  102. groupByCategory({ getParams }).then(res => {
  103. this.treeData = []
  104. this.treeData = res.Data.map(i => this.getTree(i))
  105. })
  106. //获取图例列表
  107. let postParams = this.GraphCategoryId
  108. let data = {}
  109. queryRelation({ data, postParams }).then(res => {
  110. this.tableData = res.data.Content
  111. })
  112. //treeSelect
  113. this.modalShow4 = true
  114. this.info = {
  115. Name: '',
  116. Type: 'None',
  117. Unit: '',
  118. FillColor: '#ffffff',
  119. Color: '#ffffff',
  120. Url: '',
  121. InfoTypeId: [], //铺位可视化typeid
  122. InfoLocal: [], //工程信息化位置与设备分类
  123. InfoSystem: [] //工程信息化专业/系统
  124. }
  125. } else if (title == '添加图例库') {
  126. this.dialogVisible = true
  127. this.InfoTypeIdList = []
  128. this.InfosList = []
  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. } else if (title == '修改图例库') {
  141. this.dialogVisible = true
  142. this.info = row
  143. this.InfosList = []
  144. this.InfoTypeIdList = []
  145. // this.InfosList = [...row.InfoLocal.map(({ id }) => id), ...row.InfoSystem]
  146. this.InfosList = row.InfoLocal ? [...row.InfoLocal.map(({ id }) => id)] : []
  147. this.InfoTypeIdList = row.InfoTypeId
  148. // 图例库规则中的transform
  149. } else if (title == '' && this.$refs.searchList) {
  150. this.$refs.searchList.queryAll()
  151. }
  152. },
  153. getTree(data) {
  154. return {
  155. id: data.Id,
  156. name: data.Name,
  157. children: data.Children && data.Children.length > 0 ? data.Children.map(i => this.getTree(i)) : []
  158. }
  159. },
  160. cancal() {
  161. this.info = {
  162. Name: '',
  163. Type: 'None',
  164. Unit: '',
  165. FillColor: '#ffffff',
  166. Color: '#ffffff',
  167. Url: '',
  168. InfoTypeId: [], //铺位可视化typeid
  169. InfoLocal: [], //工程信息化位置与设备分类
  170. InfoSystem: [] //工程信息化专业/系统
  171. }
  172. this.InfoTypeIdList = []
  173. this.InfosList = []
  174. this.$refs.add.fileList = []
  175. this.$emit('cancal', this.info)
  176. },
  177. mesg() {
  178. this.$emit('mesg')
  179. },
  180. updateSuccess() {
  181. this.$emit('updateSuccess')
  182. },
  183. addSuccess() {
  184. this.$emit('addSuccess')
  185. this.cancal()
  186. },
  187. isCreateOrUpdate() {
  188. if (this.title == '添加图例库') {
  189. this.$refs.add.create()
  190. this.$emit('addSuccess')
  191. } else if (this.title == '修改图例库') {
  192. this.$refs.add.update()
  193. this.$emit('updateSuccess')
  194. }
  195. },
  196. save() {
  197. // FillColor,Color,Name
  198. if (this.info.Name == '') {
  199. this.$message.info('请填写图例名称')
  200. return false
  201. } else {
  202. if (this.info.Type != 'None') {
  203. this.$refs.add.saveImg()
  204. } else {
  205. this.isCreateOrUpdate()
  206. }
  207. this.dialogVisible = false
  208. }
  209. },
  210. treeConfirm(ids, dataObj) {
  211. let tableList = [],
  212. list = [],
  213. totalLst = []
  214. dataObj.forEach(i => {
  215. list.push({
  216. Id: i.id,
  217. name: i.name
  218. })
  219. })
  220. tableList = [...list, ...this.tableData]
  221. tableList.forEach((i, index) => {
  222. totalLst.push({
  223. GraphElementId: i.Id,
  224. OrderId: index
  225. })
  226. })
  227. let postParams = {
  228. GraphCategoryId: this.GraphCategoryId[0],
  229. GraphRelations: totalLst
  230. }
  231. console.log(totalLst, 'list')
  232. updateRelation({ postParams }).then(res => {
  233. if (res.Result == 'success') {
  234. this.$message.success('添加成功!')
  235. this.$emit('mesg')
  236. }
  237. })
  238. },
  239. treeCancel() {
  240. this.modalShow4 = false
  241. }
  242. }
  243. }
  244. </script>
  245. <style lang='less' scoped>
  246. .add-legend {
  247. /deep/ .el-dialog {
  248. width: 890px;
  249. height: 509px;
  250. border-radius: 8px;
  251. .el-dialog__header {
  252. border-bottom: 1px solid #e4e5e7;
  253. }
  254. .el-dialog__body {
  255. padding-top: 16px !important;
  256. }
  257. .el-dialog__title {
  258. font-size: 16px;
  259. }
  260. }
  261. /deep/ .el-dialog__footer {
  262. position: absolute;
  263. bottom: 0;
  264. right: 20px;
  265. }
  266. }
  267. </style>