RMS-FrontEnd/RMS-FrontEnd/src/views/report/components/patentTable.vue

<template>
    <div>
        <div style="display:flex;justify-content: flex-end;padding-bottom:20px">
            <!-- <el-button type="info" style="height:32px">
              <img src="../../../../../assets/img/filtrationSearch.png" alt="" style="width:20px">筛选 
            </el-button> -->
          
              <div class="btn1" @click="sift" style="width:80px;height:32px;display:flex;justify-content:space-around;border-radius:5px; cursor: pointer;margin-right: 10px; background-color: #909399;">
                <img src="@/assets/img/filtrationSearch.png" alt="" style="width:16px;height:16px;margin-top:9px;margin-left:8px"><p style="margin:0 8px 0 0;line-height:32px;color:white;font-size:14px">筛选 </p> 
                
              </div>
              <el-button type="primary" size="small" style="margin-right: 20px;" @click="choicePage">本页选择</el-button>
              <!-- <el-popover placement="bottom" title="" width="250" trigger="click">
                      <el-main class="patent-fast-edit-popover">
                            <div class="btn" @click="handleSelectNumber(0)">本页选择</div>
                            <div class="btn" @click="handleSelectNumber(1)">全部选择</div>
                            <el-divider></el-divider>
                    <div class="select-number">
                              <span>从</span>
                              <el-input size="mini" v-model="queryParams.startNumber"></el-input>
                              <span>到</span>
                              <el-input size="mini" v-model="queryParams.endNumber"></el-input>
                              <el-button type="text" size="" @click="handleSelectNumber(2)">确定</el-button>
                    </div>
                  </el-main>
                  <el-button type="info" size="small" class="margin-left_10" slot="reference">
                      选择专利<i class="el-icon-arrow-down el-icon--right"></i>
                   </el-button>
                </el-popover>-->
                <el-button type="text" size="small" class="margin-left_10" @click="handleCancelSelectNumber">取消选择</el-button>  
            </div>
         
          <el-table
            :data="tableData?tableData:choiceTableData"
            border
            :row-key="getRowKeys"
            v-loading="loading"
            style="min-width: 100%; overflow:auto">
            <el-table-column width="80" align="center">
              <template slot-scope="scope">
                <div>
                  <el-checkbox-group v-model="selected" style="display:inline-block">
                    <el-checkbox :label="scope.row.patentNo" :disabled="scope.row.disabled" @change="getFunInfo(scope.row.patentNo)">
                      <span v-if="choiceMark">{{ (scope.$index + 1) + ((choiceQueryParams.current - 1) * choiceQueryParams.size) }}</span>
                      <span v-else>{{ (scope.$index + 1) + ((queryParams.current - 1) * queryParams.size) }}</span>
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
              </template>
            </el-table-column>
              <el-table-column
                prop="patentNo"
                label="专利号"
                align="center"
                width="200px">
                <template slot-scope="scope">
                  <div>
                    <el-link type="primary"  @click="toPatentDetails(scope.row.patentNo)">{{scope.row.patentNo}}</el-link>
                  </div>
                <!-- <el-checkbox-group v-model="checkList" style="display:inline-block">
                    <el-checkbox :label="scope.row.patentNo" @change="getFunInfo(scope.row.patentNo)">
                          {{scope.row.patentNo}}
                    </el-checkbox>
                </el-checkbox-group> -->
                </template>
              </el-table-column>
            <!-- <el-table-column
              prop="patentNo"
              label="专利号"
              align="center"
              width="200px">
              <template slot-scope="scope">
                <el-checkbox-group v-model="selected" style="display:inline-block">
                    <el-checkbox :label="scope.row.patentNo" :disabled="scope.row.disabled" @change="getFunInfo(scope.row.patentNo)">
                          {{scope.row.patentNo}}
                    </el-checkbox>
                </el-checkbox-group>
              </template>
            </el-table-column> -->
            <el-table-column
              prop="name"
              label="专利标题"
              align="center"
              width="300px">
            </el-table-column>
            <el-table-column
              prop="simpleStatus"
              align="center"
              label="状态">
            </el-table-column>
          </el-table>

          <div class="pagination" v-if="choiceMark">
            <el-pagination :current-page.sync="choiceQueryParams.current" :page-size="choiceQueryParams.size" :total="Number(choiceTotal)" @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper" background></el-pagination>
          </div>
          

    <el-dialog v-if="choiceMark" title="筛选" :visible.sync="visible" width="600px"  :before-close="close" append-to-body>
      <div style="height: 180px;">
        <el-form ref="choiceForm" :model="choiceForm" label-width="80px" label-position="left">
          <el-form-item label="对比结果">
            <el-select v-model="choiceForm.compareResult" clearable @change="change" placeholder="请选择对比结果" style="width: 100%;">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
            </el-select>
            <!-- <el-input type="textarea" v-model="choiceForm.compareResult" placeholder="请输入查询内容"></el-input> -->
          </el-form-item>
          <el-form-item label="标题" >
            <el-input v-model="choiceForm.title" placeholder="请输入查询内容"></el-input>
          </el-form-item>
          <el-form-item label="专利号">
            <el-input v-model="choiceForm.patentNo" placeholder="请输入查询内容"></el-input>
          </el-form-item>
         
        </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="screen">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog v-else title="筛选" :visible.sync="visible" width="1000px" max-height="600" :before-close="close" append-to-body>
      <div style="height: 500px">
        <el-form ref="form" :model="form" label-width="80px" label-position="left">
          <el-form-item label="标题">
            <el-input type="textarea" v-model="form.patentName" placeholder="请输入查询内容"></el-input>
          </el-form-item>
          <el-form-item label="摘要">
            <el-input type="textarea" v-model="form.abstractStr" placeholder="请输入查询内容"></el-input>
          </el-form-item>
          <el-form-item label="专利号">
            <el-input type="textarea" v-model="form.patentNo" placeholder="请输入查询内容"></el-input>
          </el-form-item>
          <el-form-item label="申请号">
            <el-input type="textarea" v-model="form.applicationNo" placeholder="请输入查询内容"></el-input>
          </el-form-item>
          <el-form-item label="申请人">
            <el-input type="textarea" v-model="form.applicationName" placeholder="请输入查询内容"></el-input>
          </el-form-item>
          <el-form-item label="权利人">
            <el-input type="textarea" v-model="form.obligeeName" placeholder="请输入查询内容"></el-input>
          </el-form-item>
        </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="screen">确 定</el-button>
        </div>
    </el-dialog>
    </div>
</template>

<script>
import { PatentDetails } from '@/views/components/common/mixins';
export default{
  props:['tableData','isSubmit','queryParams','reportId',"choiceMarkA","isHandleSure"],
  mixins:[PatentDetails],
  data() {
    return {
      choiceTableData:[],
      choiceTotal:'',
      choiceMark:this.choiceMarkA,
      loading:false,
      visible:false,
      form: {},
      choiceForm: {},
      choiceFormS: {},
      // choiceScreen: false,
      // formS: {},
      // tableData:[],
      checkList:[],
      selected: [],
      formS: {},
      options: [
                {
                    value: 1,
                    label: '相同'
              },{
                    value: 3,
                    label: '等同'
              },{
                    value: 0,
                    label: '不相同'
                }, {
                    value: 2,
                    label: '待确定'
                }
      ],
      choiceQueryParams:{
                taskId:null,
                size:10,
                current:1,
                reportId:this.reportId,
                compareResult:null,
      },
    }
  },
  async mounted() {
    if (this.choiceMark) {
        await this.getList()
      }
    console.log(this.choiceTableData,this.tableData,this.selected,this.choiceMark,this.queryParams);
  },
  watch:{
    isSubmit(val){
      if(val){
        this.form = {}
        this.checkList=[]
        this.selected = []
      }
    },
    isHandleSure(val) {
      console.log(val);
      if (val) {
        console.log(this.selected,this.choiceFormS);
        let a = {
          selected:this.selected,
          choiceFormS:this.choiceFormS,
        }
        this.$emit("choiceFormSelected", a)
      }
    },
    // async choiceMark(val) {
    //   if (val) {
    //     await this.getList()
    //   }
    // }
  },
  methods: {
    // opens(data) {
    //   this.tableData=data
    // },
    async getList() {
            this.loading=true
      // if (this.choiceMark==true) {
            await this.$api.getComparedMessage(this.choiceQueryParams).then(response => { 
              if (response.code == 200) { 
                this.choiceTotal = response.data.total
                this.choiceTableData = response.data.records
                this.loading=false
              }      
            })
      // }
    },
    handleCurrentChange(val) {
      this.choiceQueryParams.current = val;
      this.getList();
    },
    
    handleCancelSelectNumber() {//取消选择
      this.checkList = []
      this.selected=[]
      this.$emit('PersonPatent',this.checkList)
      // this.getList()
    },
    getRowKeys(row) {
      return row.id
    },
    getFunInfo(patentNo) {
      // if (this.choiceMark) {
      //   if (this.selected.includes(patentNo)) {
      //     this.selected.splice(
      //       this.selected.indexOf(this.selected.find(function (element) {
      //         return element === patentNo;
      //       }
      //       )
      //       ), 1);

      //   } else {
      //     this.selected.push(patentNo)
      //   }
      //   this.$emit('onSelected',this.selected)
      // } else {
         if (this.checkList.includes(patentNo)) {
            this.checkList.splice(
              this.checkList.indexOf(this.checkList.find(function (element) {
                return element === patentNo;
              }
              )
              ), 1);

          } else {
            this.checkList.push(patentNo)
          }
      this.$emit('PersonPatent', this.checkList)
      if (this.choiceMark) {
        this.selected = this.checkList
        console.log(this.checkList,this.selected);
      }
        
      // }
      
     
    },
    sift() {
      this.visible = true
    },
    choicePage() {//本页选择
      if (this.choiceMark) {
        var choice = this.choiceTableData.map(item => item.patentNo);
      } else {
         var choice = this.tableData.map(item => item.patentNo);
      }
      
      this.selected = [...new Set(this.selected.concat(choice))]
      this.checkList = [...new Set(this.checkList.concat(choice))]
      this.$emit('PersonPatent',this.checkList)
      // this.getList()
    },
    close() {//筛选取消
      this.visible = false
      this.form = this.formS
      this.choiceForm = this.choiceFormS
    },
    screen() {//筛选确定
      // for (let key in this.form) {
      //   this.queryParams[key]=this.form[key]
      // }
      // this.queryParams.patentName=this.form.patentName
      // this.getList()
      if (this.choiceMark) {
        this.choiceFormS = JSON.parse(JSON.stringify(this.choiceForm))
        if (Object.keys(this.choiceFormS).length != 0) {
          for (let k in this.choiceFormS) {
            this.choiceQueryParams[k]=this.choiceFormS[k]
          }
        }
        // this.choiceQueryParams.patentNo=this.choiceFormS.patentNo//专利号
        // this.choiceQueryParams.patentNo=this.choiceFormS.patentNo//标题
        // this.choiceQueryParams.compareResult = this.choiceFormS.compareResult//比对结果
        this.getList()
        
        console.log(this.choiceFormS);
        this.visible = false
      } else {
        this.formS = JSON.parse(JSON.stringify(this.form))
        this.$emit("onForm", this.formS)
        this.visible = false
      }
      
      // this.form = {}
    },
    change(val) {
      console.log(val);
    },
   
  },
}
</script>