xiaoshi_system/src/views/components/dialog/menuDialog/annotation.vue

<template>
  <div>
    <el-dialog title="批注" v-draggable :visible.sync="visible" width="500px" custom-class="checkFile"
      :before-close="cancel" :modal="false" :close-on-click-modal="false" :modal-append-to-body="false">
      <div
        style="display:flex;justify-content: space-between;font-size:14px;border-bottom: 1px white solid;padding-bottom: 5px;">
        <p style="font-weight:800;margin:0">{{ userinfo.name }}</p>
        <p style="margin:0">{{ getDate() }}</p>
      </div>
      <div>
        <p style="display: flex;align-items: center;"><span style="width: 60px;">内容：</span><span
            style="width: 100%;"><el-input type="textarea" v-model="mark.markSelectText" readonly
              rows="2"></el-input></span></p>
      </div>
      <div>
        <p><span>颜色：</span>
          <span>
            <el-input type="color" size="small" class="changeColor" v-model="mark.markColor"
              style="user-select:none;width:100px"> </el-input>
          </span>
        </p>
        <p><span>类型：</span>
          <span>
            <el-radio-group v-model="mark.markType">
              <el-radio :label="2">波浪线</el-radio>
              <el-radio :label="0">下划线</el-radio>
              <el-radio :label="1">高亮</el-radio>
            </el-radio-group>
          </span>
        </p>
      </div>
      <div>
        <p style="display:flex">
          <!-- createFrom  0默认(专利)1专题库2报告 -->
          <span>可见范围：</span>
          <span>
            <el-radio-group v-model="mark.publicScope">
              <!-- <el-radio :label="1">{{ createFromText[mark.createFrom] }}</el-radio>
              <el-radio :label="0">非{{ createFromText[mark.createFrom] }}</el-radio> -->
              <el-radio :label="1">当前位置可见</el-radio>
              <el-radio :label="0">全部位置可见</el-radio>
            </el-radio-group>
          </span>
        </p>
        <p>
          <span>使用权限：</span>
          <span>
            <el-switch v-model="mark.isPublic" active-color="#13ce66" inactive-color="#ff4949" active-text="所有人可见">
            </el-switch>
            <!-- <el-radio-group v-model="mark.isPublic">
              <el-radio :label="1">所有人可见</el-radio>
              <el-radio :label="0">本人可见</el-radio>
            </el-radio-group> -->
          </span>
        </p>
      </div>
      <div style="user-select: none;">
        <p style="margin-bottom:5px">标注：</p>
        <el-input v-model="mark.markNoteText" type="textarea" class="my-input-preview"></el-input>
      </div>
      <div style="display:flex;justify-content: flex-end;align-items:center;">
        <el-button type="text" @click="cancel">取消</el-button>
        <el-button type="text" v-if="mark.id" @click="handleDelete">删除</el-button>
        <el-button type="text" @click="submit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      // 控制弹窗开关
      visible: false,
      // 批注的内容
      mark: {},
      // 可见范围
      createFromText: {
        '0': '本专利可见',
        '1': '本专利数据库可见',
        '2': '本报告可见',
      }
    }
  },
  computed: {
    ...mapGetters(['userinfo', 'contextMenu']),
    // 批注相关信息
    piZhuContrastList() {
      return this.$store.state.highlight.piZhuContrastList
    },
  },
  mounted() {

  },
  methods: {
    // 点击波浪线等样式直接调用
    submit2(markType) {
      this.getData(markType)
      this.submit()
    },
    // 查询批注
    queryScratchWords() {
      let params = {
        patentNo: this.contextMenu.mark.patentNo,
        projectId: this.contextMenu.mark.projectId
      }
      this.$api.queryScratchWords(params).then(response => {
        if (response.code == 200) {
          if (this.piZhuContrastList.length > 0) {
            var a = this.piZhuContrastList.filter(item => {
              return item.patentNo != params.patentNo
            }).concat(response.data.data)
          } else {
            var a = response.data.data
          }
          this.$store.commit('SET_PATENT_PIZHU_CONTRAST', a)
        }
      })
    },
    // 确定
    submit() {
      // console.log(this.mark.id);
      if (this.mark.id) {
        this.$api.updateDimension(this.mark).then(response => {
          if (response.code == 200) {
            this.$message.success('修改批注成功')
            let index = this.piZhuContrastList.findIndex(item => {
              return item.id == this.mark.id
            })
            if (index != -1) {
              this.piZhuContrastList.splice(index, 1, this.mark)
            }
            this.cancel()
          }
        }).catch(error => {
          this.$message.error('修改批注失败')
        })
      } else {
        this.$api.addScratchWords(this.mark).then(response => {
          if (response.code == 200) {
            this.$message.success('添加批注成功')
            var piZhuContrastList = this.piZhuContrastList
            this.mark.id = response.data.data
            piZhuContrastList.push(this.mark)
            this.$store.commit('SET_PATENT_PIZHU_CONTRAST', piZhuContrastList)
            this.cancel()
          }
        }).catch(error => {
          // this.$message.error('添加批注失败')
        })
      }
    },
    // 删除
    handleDelete() {
      let ids = [this.mark.id]
      this.$api.removeScratchWords(ids).then(response => {
        if (response.code == 200) {
          this.$message.success('删除批注成功')
          let index = this.piZhuContrastList.findIndex(item => {
            return item.id == this.mark.id
          })
          if (index != -1) {
            this.piZhuContrastList.splice(index, 1)
          }
          this.cancel()
        }
      }).catch(error => {
        this.$message.error('删除批注失败')
      })
    },
    // 取消
    cancel() {
      this.visible = false
    },
    // 显示时间
    getDate() {
      let date = new Date()
      var Y = date.getFullYear().toString()
      var m = (date.getMonth() + 1) > 9 ? (date.getMonth() + 1).toString() : "0" + (date.getMonth() + 1)
      var d = date.getDate() > 9 ? date.getDate().toString() : "0" + date.getDate()
      var H = date.getHours() > 9 ? date.getHours().toString() : "0" + date.getHours()
      var M = date.getMinutes() > 9 ? date.getMinutes().toString() : "0" + date.getMinutes()
      var S = date.getSeconds() > 9 ? date.getSeconds().toString() : "0" + date.getSeconds()
      return Y + '-' + m + '-' + d + ' ' + H + ':' + M + ':' + S
    },
    // 处理数据
    getData(markType) {
      let mark = this.contextMenu.mark
      this.mark = {
        Id: mark.Id,
        id: mark.id,//已添加数据的id
        patentNo: mark.patentNo,//专利号
        isPublic: mark.id ? mark.isPublic : mark.permissionType,//是否所有人可见
        markColor: mark.markColor,//标注颜色
        markNoteText: mark.markNoteText,//标注备注
        markType: (markType ==0 ||markType)?markType:mark.markType,//标注方式（波浪线）
        markSelectField: mark.id ? mark.markSelectField : mark.column,//标注栏位
        markSelectText: mark.id ? mark.markSelectText : mark.text,//标注文本
        markSite: mark.id ? mark.markSite : mark.position,//选中文本的起始位置
        publicScope: mark.id ? mark.publicScope : 1,//标注的权限范围（本专利可见、本专题库可见、本报告可见都是传1，在所有地方可见是传0）
        createFrom: mark.createFrom,//是在哪里进行的标注
        projectId: mark.projectId,//项目id
        patentTitle:mark.patentTitle,//当前专利标题
      }
    },
    // 打开弹窗
    open() {
      // console.log(this.projectId, this.contextMenu, this.contextMenu.mark.createFrom);
      this.getData()
      // console.log(this.mark, this.contextMenu.mark.createFrom);
      this.visible = true
    },
  },
}
</script>

<style lang="scss" scoped></style>