legendremarks.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  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.$emit('queryView', false)
  77. // this.$emit('')
  78. // return
  79. this.visible = true
  80. this.remarksTexts = this.remarksText
  81. },
  82. // 更新底图备注
  83. markUpdate(val) {
  84. let params = {
  85. postParams: {
  86. graphId: this.$cookie.get('graphId'),
  87. projectId: this.$store.state.plazaId,
  88. Note: val
  89. }
  90. }
  91. updateRead(params).then(res => {
  92. // console.log('更新备注', res)
  93. this.$message({
  94. showClose: true,
  95. message: '更新成功',
  96. type: 'success'
  97. })
  98. this.$emit('queryMarks')
  99. this.visible = false
  100. })
  101. },
  102. // 点击保存
  103. handleOk() {
  104. this.markUpdate(this.remarksTexts)
  105. },
  106. onEditorReady(editor) {},
  107. onEditorBlur(val) {},
  108. onEditorFocus(val) {},
  109. onEditorChange(val) {
  110. val.quill.deleteText(200, 6)
  111. if (this.remarksTexts === '') {
  112. this.valLen = 0
  113. } else {
  114. this.valLen = val.quill.getLength() - 1
  115. }
  116. if (val.html) {
  117. this.remarksTexts = val.html
  118. }
  119. }
  120. },
  121. mounted() {}
  122. }
  123. </script>
  124. <style lang="less" >
  125. .editModel {
  126. .ant-modal-body {
  127. padding: 0 24px 35px !important;
  128. }
  129. .edit_container {
  130. .ql-editor {
  131. padding: 12px 15px 4px;
  132. }
  133. .ql-toolbar.ql-snow .ql-formats {
  134. margin-right: 0px;
  135. }
  136. }
  137. }
  138. </style>
  139. <style lang="less" scoped>
  140. .editModel {
  141. }
  142. .edit-x {
  143. position: absolute;
  144. width: 9px;
  145. height: 10px;
  146. color: #000000;
  147. right: 20px;
  148. top: 20px;
  149. cursor: pointer;
  150. }
  151. .edit_container {
  152. margin: 0px;
  153. .p1 {
  154. position: absolute;
  155. bottom: 65px;
  156. right: 30px;
  157. margin-bottom: 0;
  158. }
  159. }
  160. .edit-foot {
  161. height: 30px;
  162. width: 100%;
  163. margin-top: 20px;
  164. display: flex;
  165. justify-content: flex-end;
  166. padding-top: 10px;
  167. span {
  168. height: 32px;
  169. line-height: 32px;
  170. border-radius: 2px;
  171. width: 65px;
  172. text-align: center;
  173. font-size: 14px;
  174. font-family: PingFangSC-Regular, PingFang SC;
  175. font-weight: 400;
  176. cursor: pointer;
  177. }
  178. span:nth-of-type(1) {
  179. background: rgba(255, 255, 255, 1);
  180. border: 1px solid rgba(0, 0, 0, 0.15);
  181. margin-right: 8px;
  182. color: rgba(0, 0, 0, 0.65);
  183. }
  184. span:nth-of-type(2) {
  185. color: rgba(255, 255, 255, 1);
  186. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  187. }
  188. }
  189. .quill-editor {
  190. height: 130px;
  191. }
  192. // 修改保存按钮背景色
  193. /deep/ .ant-btn-primary {
  194. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  195. }
  196. </style>