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

<template>
  <div>
    <el-dialog :title="title" v-draggable :visible.sync="visible" width="1000px" custom-class="checkFile" :before-close="close" :modal="false" :close-on-click-modal="false" :modal-append-to-body="false">
        <el-form :model="form" ref="form" label-width="100px" label-position="left">
        
        <!-- <el-form-item label="选择颜色" class="item">
            <el-input type="color" v-model="form.color"  style="user-select:none;width: 100px;" @input="changeColor()"/>
        </el-form-item> -->
        <el-form-item label="选中文本" class="item">
            <el-input v-model="form.evidenceText" placeholder="请输入备注" type="textarea" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="位置/附图号" class="item">
            <el-input v-model="form.fieldName" placeholder="请输入备注" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="解析过程" class="item">
            <el-input v-model="form.common" placeholder="请输入解析过程" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="代表图" class="item">
            <el-upload ref="upload" action="#" :auto-upload="false" :on-change="change" list-type="picture" :show-file-list="false">
                    <span style="display:flex;flex-direction:row;flex-wrap:wrap;">
                        <span class="avatar" v-if="form.fileGuid"
                            style="margin-left:10px">
                            <span class="deleteImg">
                            <span>
                                <i class="el-icon-zoom-in" @click.stop="handlePictureCardPreview()"></i>
                                <i class="el-icon-delete" @click.stop="handleRemove()"></i>
                            </span>
                            </span>
                            <el-image ref="image" class="img" :src="$commonJS.checkViewer(form.fileGuid)" :preview-src-list="[$commonJS.checkViewer(form.fileGuid)]"></el-image>
                        </span>
                        <i class="el-icon-plus avatar-uploader-icon" v-if="!form.fileGuid"></i>
                    </span>
                </el-upload>
        </el-form-item>
        <el-form-item label="权利特征" class="item" style="margin-bottom:5px">
            <span v-for="item in form.features">[{{item.rightName}}]
            <el-tooltip class="item" effect="dark" :content="item.content" placement="top">
                        <span>特征{{item.featuresOrder}}</span>
                        </el-tooltip>  
            &nbsp;&nbsp;</span>
        </el-form-item>
        </el-form>

        <!-- 特征 -->
        <div style="height:500px" v-if="visible">
            <splitPage ref="splitPage" @getCheckList="getCheckList" :isEdit="false" :tableData="features" :isResult="9" :patentNo="patentNo" :columnList="columnList" :checkFeatures="checkFeatures" :checkData="checkData">
                <!-- <div slot="handleLeft">
                    <span>标的专利：</span><el-link type="primary" @click="toPatentDetails(patentNo)">{{ patentNo }}</el-link>
                </div>
                <div slot="handleRight"></div> -->
            </splitPage>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" v-if="form.id" @click="delContrast(form)">删 除</el-button>
            <el-button type="primary" :loading="btnLoading" @click="submit">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import splitPage from '@/views/report/components/splitPage/splitPage.vue';
import { mapGetters } from "vuex";
export default {
  components: {
    splitPage
  },
  props: {},
  data() {
    return {
        form:{},
        title:'添加对比',
        visible:false,
        features:[],
        projectId:0,
        patentNo:'',
        loading:false,
        selected:[],
        columnList:[
            {
                name: "结论",
                type: "Array",
                value: 'conclusion',
                disabled:true,
                options:[
                    {
                        label:'公开',
                        value:'公开'
                    },
                    {
                        label:'部分公开',
                        value:'部分公开'
                    },
                ]
            },
        ],
        checkData:[],
        checkFeatures:[],
        btnLoading:false
    };
  },
  watch: {},
  computed: {
    ...mapGetters(["contextMenu",'highlight']),
  },
  created() {},
  mounted() {
  },
  methods: {
    open(){
        this.getData()
        this.visible = true
    },
    close(){
        this.visible = false
    },
    getFeature(){
      let params = {
        patentNo:this.patentNo,
        projectId: this.projectId,
      }
      this.$api.getSpiltFeature(params).then(res => {
        if (res.code == 200) {
          if (res.data.data.length > 0) {
            var data = []
            res.data.data.forEach(RightVosItem => {
              if (RightVosItem.features.length > 0) {
                RightVosItem.features.forEach(FeaturesItem => {
                  FeaturesItem.featureId = FeaturesItem.id
                  FeaturesItem.pRightName = RightVosItem.rightName
                  FeaturesItem.pSignPatentNo = RightVosItem.signPatentNo
                  FeaturesItem.pPatentNo = RightVosItem.patentNo
                  FeaturesItem.pContentOut = RightVosItem.contentOut
                  FeaturesItem.pContent = RightVosItem.content
                  FeaturesItem.pProjectId = RightVosItem.projectId
                  FeaturesItem.pType = RightVosItem.type
                  FeaturesItem.pSort = RightVosItem.sort

                  FeaturesItem.conclusion = ''

                  this.hasOwn(FeaturesItem)
                  data.push(FeaturesItem)
                })
              }
            })
            this.features = data
          }
        }
      })
    
    },
    hasOwn(item) {
      if (!item.hasOwnProperty("explainText")) {
        item.explainText = ''
      }
    },
    getData(){
        var mark = this.contextMenu.mark
        this.patentNo = mark.patentNo
        if(this.projectId){
            if(this.projectId != mark.projectId){
                this.projectId = mark.projectId
                this.getFeature()
            }
        }else{
            this.projectId = mark.projectId
            this.getFeature()
        }
        
        this.form = {
            literatureId:mark.literatureId,
            fieldName:mark.scratchField,
            position:mark.position,
            markType:mark.scratchType,
            markColor:mark.color,
            evidenceText:mark.text,
            id:mark.id
        }
    },
    submit(){
        this.$refs.splitPage.getCheckList()
    },
    //获取子组件选中的特征
    getCheckList(data){
        this.form.assoFeatureList = data.map(item=>{
            return {
                featureId:item.featureId,
                conclusion:item.conclusion
            }
        })
        this.btnLoading = true
        this.$api.addCompareRecord(this.form).then(response=>{
            if(response.code == 200){
                this.changeHighlight(response.data.data)
                this.btnLoading = false
                this.close()
            }
        }).catch(error=>{
            this.btnLoading = false
        })
    },
    changeHighlight(id,type){
        var contrastList = this.highlight.contrastList
        var message = ''
        if(this.form.id){
            var index = contrastList.findIndex(item=>{
                return item.id == this.form.id
            })
            if(type){
                message = '删除成功'
                contrastList.splice(index,1)
            }else{
                message = '更新成功'
                contrastList.splice(index,1,this.form)
            }
        }else{
            message = '新增成功'
            this.form.id = id
            contrastList.push(this.form)
        }
        this.$message.success(message)
        this.$store.commit("SET_CONTEXT_MENU",contrastList)
    },
    //文件上传
    change(file,fileList){
        let formData = new FormData()
        formData.append('sourceId',this.$constants.sourceId)
        formData.append('files',file.raw)
        this.$api.uploadFile(formData).then(response=>{
            if(response.code == 200){
                this.$set(this.form,'fileGuid',response.data[0])
            }
        })
    },
    handleRemove() {
        this.$set(this.form,'fileGuid','')
    },
    handlePictureCardPreview() {
        this.$refs.image.showViewer = true
    },
    delContrast(){
        var ids = [this.form.id]
        this.$confirm('确认删除该数据吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.$api.removeCompareRecord(ids).then(response => {
                this.changeHighlight(this.form.id,'删除')
                this.close()
            }).catch(error => {
            })
        })
    }
  },
};
</script>
<style lang="scss" scoped>
.avatar-uploader-icon {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}

.avatar {
  position: relative;
  width: 148px;
  height: 148px;
  display: block;
}

.avatar:hover .deleteImg {
  display: block;
}

.deleteImg {
  display: none;
  font-size: 30px;
  width: 148px;
  height: 148px;
  background-color: black;
  opacity: 0.6;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  z-index: 999;
}

.avatar .img {
  width: 148px;
  height: 148px;
}

.deleteImg span i {
  margin-left: 10px;
  color: #fff;
}

.deleteImg span {
  display: flex;
  align-items: center;
  /*垂直居中*/
  justify-content: center;
  /*水平居中*/
  width: 100%;
  height: 100%;
}
</style>