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.text" 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>
          <span>使用权限：</span>
          <span>
            <el-radio-group v-model="mark.permissionType">
              <el-radio :label="1">所有人可见</el-radio>
              <el-radio :label="0">本人可见</el-radio>
            </el-radio-group>
          </span>
        </p>
        <p style="display:flex" v-if="mark.createFrom">
          <!-- createFrom  0默认(专利)1专题库2报告 -->
          <span>可见范围：</span>
          <span>
            <el-switch v-model="mark.rangeType" active-color="#13ce66" inactive-color="#ff4949"
              :active-text="createFromText[mark.createFrom]">
            </el-switch>
          </span>
        </p>
      </div>
      <div style="user-select: none;">
        <p style="margin-bottom:5px">标注：</p>
        <el-input v-model="mark.remark" 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', 'projectId', 'contextMenu']),
  },
  mounted() {

  },
  methods: {
    // 确定
    submit() {
      console.log(this.mark);
      if (this.mark.id) {
        this.$api.edit(this.mark).then(response => {
          if (response.code == 200) {
            this.$message.success('修改批注成功')
            this.cancel()
          }
        }).catch(error => {
          this.$message.error('修改批注失败')
        })
      } else {
        this.$api.add(this.mark).then(response => {
          if (response.code == 200) {
            this.$message.success('添加批注成功')
            this.cancel()
          }
        }).catch(error => {
          this.$message.error('添加批注失败')
        })
      }
    },
    // 删除
    handleDelete() {
      console.log('批注删除');
      let ids = [this.mark.id]
      this.$api.dele(ids).then(response => {
        if (response.code == 200) {
          this.$message.success('删除批注成功')
          this.cancel()
        }
      }).catch(error => {
        this.$message.error('删除批注失败')
      })
    },
    // 取消
    cancel() {
      console.log(1);
      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
    },
    // 打开弹窗
    open() {
      console.log(this.projectId, this.contextMenu);
      this.mark = this.contextMenu.mark
      this.visible = true
    },
  },
}
</script>

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