123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195 |
- /**
- *@author:Guoxiaohuan
- *@date:2020.05.27
- *@info:楼层功能-编辑图例备注
- */
- <template>
- <div class='editModel'>
- <a-modal v-model='visible' :title='title' :closable='false' :maskClosable='false' :width='648' :footer='null'>
- <div class='edit-x' @click='handlCancel'>X</div>
- <div class='edit_container' style='width:600px;height:156px'>
- <quill-editor
- v-model='remarksTexts'
- :options='editorOption'
- @blur='onEditorBlur($event)'
- @focus='onEditorFocus($event)'
- @change='onEditorChange($event)'
- @ready='onEditorReady($event)'
- ></quill-editor>
- <p class='p1'>{{valLen||remarksText.length}}/200</p>
- </div>
- <div class='edit-foot'>
- <span @click='handlCancel'>取消</span>
- <span @click='handleOk'>保存</span>
- </div>
- </a-modal>
- </div>
- </template>
- <script>
- import { updateRead } from '@/api/public.js'
- import { mapGetters } from 'vuex'
- export default {
- name: 'EditdMarks',
- data() {
- return {
- valLen: 0, //输入字数限制
- remarksTexts: '', //展示的备注
- editorOption: {
- modules: {
- toolbar: [['bold', 'underline'], [{ color: [] }]]
- },
- theme: 'snow',
- placeholder: '请输入内容...'
- },
- title: '编辑图例备注',
- visible: false
- }
- },
- computed: {
- ...mapGetters(['remarksText'])
- },
- methods: {
- // 点击取消
- handlCancel() {
- if (this.remarksTexts != this.remarksText) {
- this.$confirm('是否保存编辑后的备注?', '提示', {
- confirmButtonText: '保存',
- cancelButtonText: '取消',
- type: 'warning'
- })
- .then(() => {
- this.handleOk()
- })
- .catch(() => {
- this.$message({
- type: 'info',
- message: '已取消保存'
- })
- this.visible = false
- })
- } else {
- this.visible = false
- }
- },
- // val为传过来的备注
- showModal() {
- this.visible = true
- this.remarksTexts = this.remarksText
- },
- // 更新底图备注
- markUpdate(val) {
- let params = {
- postParams: {
- graphId: this.$cookie.get('graphId'),
- projectId: this.$store.state.plazaId,
- Note: val
- }
- }
- updateRead(params).then(res => {
- // console.log('更新备注', res)
- this.$message({
- showClose: true,
- message: '更新成功',
- type: 'success'
- })
- this.$emit('queryMarks')
- this.visible = false
- })
- },
- // 点击保存
- handleOk() {
- this.markUpdate(this.remarksTexts)
- },
- onEditorReady(editor) {},
- onEditorBlur(val) {},
- onEditorFocus(val) {},
- onEditorChange(val) {
- val.quill.deleteText(200, 6)
- if (this.remarksTexts === '') {
- this.valLen = 0
- } else {
- this.valLen = val.quill.getLength() - 1
- }
- if (val.html) {
- this.remarksTexts = val.html
- }
- }
- },
- mounted() {}
- }
- </script>
- <style lang="less" >
- .editModel {
- .ant-modal-body {
- padding: 0 24px 35px !important;
- }
- .edit_container {
- .ql-editor {
- padding: 12px 15px 4px;
- }
- .ql-toolbar.ql-snow .ql-formats {
- margin-right: 0px;
- }
- }
- }
- </style>
- <style lang="less" scoped>
- .editModel {
- }
- .edit-x {
- position: absolute;
- width: 9px;
- height: 10px;
- color: #000000;
- right: 20px;
- top: 20px;
- cursor: pointer;
- }
- .edit_container {
- margin: 0px;
- .p1 {
- position: absolute;
- bottom: 65px;
- right: 30px;
- margin-bottom: 0;
- }
- }
- .edit-foot {
- height: 30px;
- width: 100%;
- margin-top: 20px;
- display: flex;
- justify-content: flex-end;
- padding-top: 10px;
- span {
- height: 32px;
- line-height: 32px;
- border-radius: 2px;
- width: 65px;
- text-align: center;
- font-size: 14px;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- cursor: pointer;
- }
- span:nth-of-type(1) {
- background: rgba(255, 255, 255, 1);
- border: 1px solid rgba(0, 0, 0, 0.15);
- margin-right: 8px;
- color: rgba(0, 0, 0, 0.65);
- }
- span:nth-of-type(2) {
- color: rgba(255, 255, 255, 1);
- background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
- }
- }
- .quill-editor {
- height: 130px;
- }
- // 修改保存按钮背景色
- /deep/ .ant-btn-primary {
- background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
- }
- </style>
|