xiaoshi_system/src/views/report/components/dialog/addAndEditReport1.vue

<template>
  <div>
    <el-dialog :title="title" :visible.sync="showDialog" width="600px" :close-on-click-modal="false"  @close="handleClose(false)" >
        <el-form :model="form" :rules="rules" ref="reportForm" label-width="120px" v-loading="loading" :element-loading-text="load_text" element-loading-spinner="el-icon-loading"
        element-loading-background-color="rgba(0, 0, 0, 0.8)">
            <el-form-item :label="[3].includes(Number(form.type))?'标的产品':'标的专利'" prop="signPatentNo">
              <el-input v-model="form.signPatentNo" autocomplete="off" :placeholder="[3].includes(Number(form.type))?'请输入标的产品':'请输入标的专利'" @change="getPatentNo"></el-input>
              <!-- <p v-if="show==1" class="tips">查不到该专利请
                  <span @click="importPatentNo()">导入</span>
                </p>
              <p v-if="show==2" class="tips" style="color:black"><span @click="toPatentDetails(form.signPatentNo)">查看详情</span></p> -->
            </el-form-item>
            <el-form-item label="报告名称" prop="name">
              <el-input v-model="form.name" autocomplete="off" placeholder="请输入报告名称"></el-input>
            </el-form-item>
            <el-form-item label="是否完成" v-if="!form.id"> 
              <el-switch
                v-model="form.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="changeStatus"
                :active-value="3"
                :inactive-value="1">
              </el-switch>
            </el-form-item> 
            <template v-if="!form.id && form.status == 3">
                <div>
                    <el-form-item label="核心结论">
                        <el-checkbox-group v-model="form.conclusionIds">
                            <el-checkbox v-for="item in conclusion" :key="item.dictChildValue" :label="item.dictChildValue">{{ item.dictChildLabel }}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="结论论述">
                        <el-input v-model="form.cronConclusion" type="textarea" placeholder="请输入结论论述"></el-input>
                    </el-form-item>
                    <el-form-item label="后续跟进事项" v-if="$permission('/rms/matter')">
                        <span v-if="form.followUps"><span v-for="item in form.followUps" :key="item.followUpName" style="margin-right:10px">{{ item.followUpName}}</span></span> 
                        <span>
                            <el-popover
                            ref="popover"
                            placement="bottom"
                            @hide="hidePopover"
                            @show="showPopover"
                            trigger="click">
                            <div>
                                <addMatter :type="matterType" :sign="matterSign" @value="getMatter"></addMatter>
                            </div>
                            <el-button slot="reference">添加后续事项</el-button>
                        </el-popover>
                        </span>
                    </el-form-item>
                </div>
            </template>
            <el-form-item label="承担部门" prop="departmentId">
                <mySelectTree style="width:100%" v-model="form.departmentId" :options="departmentList"></mySelectTree>
            </el-form-item>
            <el-form-item label="负责人" prop="personId">
              <el-select style="width:100%" v-model="form.personId" placeholder="请选择负责人" filterable  :popper-append-to-body="false">
                <el-option v-for="item in personnelList" :key="item.id" :label="item.personnelName" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <template>
                <div>
                    <el-form-item label="委托方" prop="clientId" v-if="userinfo.tenantType == 1">
                        <el-select style="width:100%" v-model="form.clientId" placeholder="请选择委托方" filterable :popper-append-to-body="false">
                            <el-option v-for="item in clientList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="委托部门" prop="departmentId" v-else>
                        <mySelectTree style="width:100%" v-model="form.departmentId" :options="departmentList"></mySelectTree>
                    </el-form-item>
                </div>
            </template>
            
            <el-form-item label="产品/技术">
              <el-input v-model="form.proTec" autocomplete="off" placeholder="请输入产品/技术"></el-input>
            </el-form-item>
            <el-form-item label="应用场景">
              <el-checkbox-group v-model="form.scenarioList">
                <el-checkbox v-for="item in commonData.ENTERPRISE_APPLICATION_SCENARIO" :key="item.value" :label="parseInt(item.value)">{{ item.label }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="关联报告">
              <el-input v-model="form.associateReportName" autocomplete="off" placeholder="请输入关联报告"></el-input>
            </el-form-item>
            <el-form-item label="需要复制的选项" v-show="form.track">
              <el-select v-model="form.copyIds" multiple clearable placeholder="请选择需要复制的选项" :popper-append-to-body="false" @change="changeCopyIds">
                <el-option v-for="item in copyList" :key="item.dictChildValue" :label="item.dictChildLabel" :value="item.dictChildValue"></el-option>
              </el-select>
            </el-form-item>
            <template v-if="form.type==7">
                <div>
                    <el-form-item label="案件编号">
                        <el-input v-model="form.caseNumber" autocomplete="off" placeholder="请输入案件编号"></el-input>
                    </el-form-item>
                    <el-form-item label="发文序号">
                        <el-input v-model="form.issueNumber" autocomplete="off" placeholder="请输入发文序号"></el-input>
                    </el-form-item>
                    <el-form-item label="发明创造名称">
                        <el-input v-model="form.inventionName" autocomplete="off" placeholder="请输入发明创造名称"></el-input>
                    </el-form-item>
                    <el-form-item label="专利权人">
                        <el-input v-model="form.currentApplication" autocomplete="off" placeholder="请输入专利权人"></el-input>
                    </el-form-item>
                    <el-form-item label="无效宣告请求人">
                        <el-input v-model="form.invalidApplication" autocomplete="off" placeholder="请输入无效宣告请求人"></el-input>
                    </el-form-item>
                </div>
            </template>
            <el-form-item label="卷号" prop="volumeNumber" >
              <el-input v-model="form.volumeNumber" autocomplete="off" placeholder="请输入卷号"></el-input>
            </el-form-item>
            <el-form-item :label="(!form.id &&form.status==3)?'上传报告文档':'上传附件'">
              <div v-if="form.reportFiles" class="upload-file">
                <div v-for="item in form.reportFiles" style="margin:0;display:flex;justify-content:space-around;">
                  <p style="margin:0;width:calc(100% - 40px);overflow: hidden;white-space: nowrap;text-overflow:ellipsis;cursor: pointer">{{item.name?item.name+'.'+item.suffix:item.fileName}}</p> 
                    <Menu :data="item" @delFile="delFile"></Menu>
                </div>
              </div>
              <el-upload  ref="upload" class="upload-file" drag action="#" :auto-upload="false" :show-file-list="true" :on-change="onChange" multiple  :on-preview="handlePreview" :on-remove="handleRemove">
                <i :class="!file ? 'el-icon-upload' : 'el-icon-refresh'"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip"></div>
              </el-upload>
            </el-form-item>
            <el-form-item label="备注" prop="remark" >
              <el-input type='textarea' v-model="form.remark" autocomplete="off" placeholder="请输入备注"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" v-if="$reportPermission(form.id,[0,1])">
              <el-button @click="handleClose(false)">取 消</el-button>
              <el-button type="primary" @click="ifNext " v-if="form.type==7 && !form.id">下一步</el-button>
              <el-button type="primary" @click="submit "  v-else>确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  components: {},
  props: {},
  data() {
    return {
        //弹窗标题
        title:'',
        //控制弹窗是否打开
        showDialog:false,
        //表单数据
        form:{},
        //表单规则
        rules:{},
        //加载
        loading:false,
        //加载时显示的文字
        load_text:'加载中',
        //应用场景
        commonData:{},
        //核心结论
        conclusion:[],
        //部门数据
        departmentList:[],
        //需要复制的选项集合
        copyList:[],
        //人员列表
        personnelList:[],
        //客户列表
        clientList:[],
        //上传文件列表
        file:[],
        //核心结论类型字典
        reportAsDicItem:{
            "0":"INVALID_ASSESS",
            "1":"THIRD_ASSESS",
            "2":"STABILITY_ASSESS",
            "3":"FTO_ASSESS",
            "4":"TORT_ASSESS",
            "5":"AVOID_ASSESS",
            "7":"REINVALID_ASSESS",
        },
        //需要复制的内容字典
        reportAsDicItemCopy:{
            "0":"INVALID_COPY",
            "1":"THIRD_COPY",
            "2":"STABILITY_COPY",
            "3":"FTO_COPY",
            "4":"TORT_COPY",
            "5":"AVOID_COPY",
        },
    };
  },
  watch: {},
  computed: {
    ...mapGetters(['webSocket','userinfo']),
    dictMessage() {
      return this.$store.state.dictMessage.dictMessage
    },
  },
  created() {},
  mounted() {
    //获取字典项（接口还是通过字典获取）
    this.$api.getCommonData({ keys: 'QUERY_GROUP,ENTERPRISE_APPLICATION_SCENARIO,INVESTIGATION_TYPE' }).then(response => {
      this.commonData = response.data
    })
    // console.log(1)
    //获取所有人员列表（修改不要一次性获取，可以使用懒加载加远程搜索 ）
    this.getAllPersonnelList()
    //获取所有客户列表（修改不要一次性获取，可以使用懒加载加远程搜索 ）
    this.getAllClientList()
    //获取所有部门列表
    this.getAllDepartmentList()
  },
  methods: {
    //打开弹窗
    open(form){
        this.form = JSON.parse(JSON.stringify(form))
        var a = ''
        if (this.form.id) {
            if (this.$reportPermission(this.form.id,[0,1])) {
                a = '编辑'
            } else {
                a = '查看'
            }
        } else {
            a = '创建'
        }
        var reportType = this.dictMessage.REPORT_TYPE.filter(item=>{return item.dictChildValue == this.form.type})[0].dictChildLabel
        this.title = a + reportType + '报告'
        this.showDialog = true
    },
    //获取所有人员列表（修改不要一次性获取，可以使用懒加载加远程搜索 ）
    getAllPersonnelList(){},
    //获取所有客户列表（修改不要一次性获取，可以使用懒加载加远程搜索 ）
    getAllClientList(){},
    //获取所有部门列表
    getAllDepartmentList(){},
    //关闭弹窗
    handleClose(){
        this.showDialog = false
    },
    //切换是否完成状态
    changeStatus(val){
      
    },
    //获取专利号且填入报告名称
    getPatentNo(){
      if(!this.form.name){
        var a = this.dictMessage.REPORT_TYPE.filter(item=>{return item.dictChildValue == this.form.type})[0].dictChildLabel
        this.$set(this.form,'name',this.form.signPatentNo + a)
      }
    },
     //修改需要复制的选项
     changeCopyIds(val){
      if(Object.keys(this.copyIndex).length>0){
        var index = this.copyList.findIndex(item=>{
          return item.dictChildLabel == '对比文件'
        })
        if(index!=-1){
          var id = this.copyList[index].dictChildValue
          var index2 = this.copyList.findIndex(item=>{
              return item.dictChildLabel == '标引信息'
            })
          if(val.indexOf(id)!=-1){
            if(index2==-1){
              this.copyList.splice(index+1,0,this.copyIndex)
            }
          }else{
            if(index2!=-1){
              this.copyList.splice(index2,1)
              this.form.copyIds.splice(this.form.copyIds.indexOf(this.copyIndex.dictChildValue),1)
            }
          }
        }else{

        }
      }
    },
    //切换上传的文件
    onChange(file, fileList){

    },
    //删除未提交的附件
    handleRemove(file, fileList) {
      var index = this.file.findIndex(item=>{
        return item.uid == file.raw.uid
      })
      if(index!=-1){
        this.file.splice(index,1)
      }
    },
    //上传附件时查看附件内容
    handlePreview(file) {
          var item={
              name:file.name,
              suffix:'',
              downLoad:true
            }
            var index = file.raw.type.lastIndexOf('/')
            var type = file.raw.type.substring(index+1,file.raw.type.length)
            var arr = ['png','jpeg','bmp','jpg']
            if(arr.includes(type)){
              var FileUrl =  URL.createObjectURL(file.raw)
              var isPicture = 1
            }else if(type == 'pdf'){
              var FileUrl = URL.createObjectURL(file.raw)
              var isPicture = 0
            }else{
              return false
            }
            const router = this.$router.resolve({
                path: '/checkFile',
                query: {
                    row: JSON.stringify(item),
                    FileUrl: FileUrl,
                    isPicture:isPicture
                }
            })
            window.open(router.href, '_blank');
    },
    //创建无效应对报告下一步
    ifNext(){},
    //提交填写的信息
    submit(){},
  },
};
</script>
<style lang="scss" scoped>
</style>