legendremarks.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. /**
  2. *@author:Guoxiaohuan
  3. *@date:2020.05.27
  4. *@info:楼层功能-编辑图例备注
  5. */
  6. <template>
  7. <div class='editModel'>
  8. <a-modal v-model='visible' :title='title' :closable='false' :maskClosable='false' :width='648' :footer='null'>
  9. <div class='edit-x' @click='handlCancel'>X</div>
  10. <div class='edit_container' style='width:600px;height:156px'>
  11. <quill-editor
  12. v-model='remarksTexts'
  13. :options='editorOption'
  14. @blur='onEditorBlur($event)'
  15. @focus='onEditorFocus($event)'
  16. @change='onEditorChange($event)'
  17. @ready='onEditorReady($event)'
  18. ></quill-editor>
  19. <p class='p1'>{{valLen||remarksText.length}}/200</p>
  20. </div>
  21. <div class='edit-foot'>
  22. <span @click='handlCancel'>取消</span>
  23. <span @click='handleOk'>保存</span>
  24. </div>
  25. </a-modal>
  26. </div>
  27. </template>
  28. <script>
  29. import { updateRead } from '@/api/public.js'
  30. import { mapGetters } from 'vuex'
  31. export default {
  32. name: 'EditdMarks',
  33. data() {
  34. return {
  35. valLen: 0, //输入字数限制
  36. remarksTexts: '', //展示的备注
  37. editorOption: {
  38. modules: {
  39. toolbar: [['bold', 'underline'], [{ color: [] }]]
  40. },
  41. theme: 'snow',
  42. placeholder: '请输入内容...'
  43. },
  44. title: '编辑图例备注',
  45. visible: false
  46. }
  47. },
  48. computed: {
  49. ...mapGetters(['remarksText'])
  50. },
  51. methods: {
  52. // 点击取消
  53. handlCancel() {
  54. if (this.remarksTexts != this.remarksText) {
  55. this.$confirm('是否保存编辑后的备注?', '提示', {
  56. confirmButtonText: '保存',
  57. cancelButtonText: '取消',
  58. type: 'warning'
  59. })
  60. .then(() => {
  61. this.handleOk()
  62. })
  63. .catch(() => {
  64. this.$message({
  65. type: 'info',
  66. message: '已取消保存'
  67. })
  68. this.visible = false
  69. })
  70. } else {
  71. this.visible = false
  72. }
  73. },
  74. // val为传过来的备注
  75. showModal() {
  76. this.visible = true
  77. this.remarksTexts = this.remarksText
  78. },
  79. // 更新底图备注
  80. markUpdate(val) {
  81. let params = {
  82. postParams: {
  83. graphId: this.$cookie.get('graphId'),
  84. projectId: this.$store.state.plazaId,
  85. Note: val
  86. }
  87. }
  88. updateRead(params).then(res => {
  89. // console.log('更新备注', res)
  90. this.$message({
  91. showClose: true,
  92. message: '更新成功',
  93. type: 'success'
  94. })
  95. this.$emit('queryMarks')
  96. this.visible = false
  97. })
  98. },
  99. // 点击保存
  100. handleOk() {
  101. this.markUpdate(this.remarksTexts)
  102. },
  103. onEditorReady(editor) {},
  104. onEditorBlur(val) {},
  105. onEditorFocus(val) {},
  106. onEditorChange(val) {
  107. val.quill.deleteText(200, 6)
  108. if (this.remarksTexts === '') {
  109. this.valLen = 0
  110. } else {
  111. this.valLen = val.quill.getLength() - 1
  112. }
  113. if (val.html) {
  114. this.remarksTexts = val.html
  115. }
  116. }
  117. },
  118. mounted() {}
  119. }
  120. </script>
  121. <style lang="less" >
  122. .editModel {
  123. .ant-modal-body {
  124. padding: 0 24px 35px !important;
  125. }
  126. .edit_container {
  127. .ql-editor {
  128. padding: 12px 15px 4px;
  129. }
  130. .ql-toolbar.ql-snow .ql-formats {
  131. margin-right: 0px;
  132. }
  133. }
  134. }
  135. </style>
  136. <style lang="less" scoped>
  137. .editModel {
  138. }
  139. .edit-x {
  140. position: absolute;
  141. width: 9px;
  142. height: 10px;
  143. color: #000000;
  144. right: 20px;
  145. top: 20px;
  146. cursor: pointer;
  147. }
  148. .edit_container {
  149. margin: 0px;
  150. .p1 {
  151. position: absolute;
  152. bottom: 65px;
  153. right: 30px;
  154. margin-bottom: 0;
  155. }
  156. }
  157. .edit-foot {
  158. height: 30px;
  159. width: 100%;
  160. margin-top: 20px;
  161. display: flex;
  162. justify-content: flex-end;
  163. padding-top: 10px;
  164. span {
  165. height: 32px;
  166. line-height: 32px;
  167. border-radius: 2px;
  168. width: 65px;
  169. text-align: center;
  170. font-size: 14px;
  171. font-family: PingFangSC-Regular, PingFang SC;
  172. font-weight: 400;
  173. cursor: pointer;
  174. }
  175. span:nth-of-type(1) {
  176. background: rgba(255, 255, 255, 1);
  177. border: 1px solid rgba(0, 0, 0, 0.15);
  178. margin-right: 8px;
  179. color: rgba(0, 0, 0, 0.65);
  180. }
  181. span:nth-of-type(2) {
  182. color: rgba(255, 255, 255, 1);
  183. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  184. }
  185. }
  186. .quill-editor {
  187. height: 130px;
  188. }
  189. // 修改保存按钮背景色
  190. /deep/ .ant-btn-primary {
  191. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  192. }
  193. </style>