修改页面，风格统一

src/utils/model/retrieval/search.vue

@@ -1,94 +1,62 @@
 <template>
   <div class="searchComponent">
     <div class="field">
-      <el-select
-        v-model="label"
-        size="small"
-        @change="getObject"
-      >
-        <el-option
-          v-for="item in SearchFields"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        ></el-option>
+      <el-select v-model="label" size="small" @change="getObject">
+        <el-option v-for="item in SearchFields" :key="item.value" :label="item.label" :value="item.value"></el-option>
       </el-select>
     </div>
     <div class="value">
-      <div
-        v-if="field.type == 2"
-        style="display: flex; width: 100%"
-      >
-        <el-date-picker
-          v-model="value"
-          type="date"
-          style="width: 100%"
-          size="small"
-          value-format="yyyy-MM-dd"
-          :placeholder="getPlaceholder()"
-        >
+      <div v-if="field.type == 2" style="display: flex; width: 100%">
+        <el-date-picker v-model="value" type="date" style="width: 100%" size="small" value-format="yyyy-MM-dd"
+          :placeholder="getPlaceholder()">
         </el-date-picker>
       </div>
       <div v-else-if="field.type == 3" style="width: 100%">
-        <el-select
-          v-model="value"
-          size="small"
-          multiple
-          filterable
-          collapse-tags
-          :placeholder="getPlaceholder()"
-          style="width: 100%"
-        >
-            <el-option
-                v-for="item in field.options || []"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-            >
-            </el-option>
+        <el-select v-model="value" size="small" multiple filterable collapse-tags :placeholder="getPlaceholder()"
+          style="width: 100%">
+          <el-option v-for="item in field.options || []" :key="item.value" :label="item.label" :value="item.value">
+          </el-option>
         </el-select>
       </div>
       <div v-else style="width: 100%">
-        <el-input
-          size="small"
-          style="width: 100%"
-          v-model="value"
-          :placeholder="getPlaceholder()"
-        ></el-input>
+        <el-input size="small" style="width: 100%" v-model="value" :placeholder="getPlaceholder()"></el-input>
       </div>
     </div>
     <div class="btn">
-        <el-button size="small" type="primary" @click="search" class="indicia-top-button" style="width:100%" :disabled="disabled">搜 索</el-button>
+      <el-button size="small" type="primary" @click="search" class="indicia-top-button" style="width:100%"
+        :disabled="disabled">搜 索</el-button>
     </div>
-    <div class="option" v-if="searchOptions.length>0">
-        <el-popover placement="bottom" title="" width="300" trigger="hover" class="margin-left_10">
-            <div class="main">
-                <div v-for="(item, index) in searchOptions" :key="item.value" class="box">
-                  <el-alert type="success" :closable="false" >
-                    <div class="content">
-                      <div class="color-black">{{ item.label }}</div>
-                      <b class="padding-right_10">AND</b>
-                      <span class="color-black">
-                        <span v-if="item.type == 3">
-                          <span class="padding_0_5">(</span>
-                          <span v-for="(data, i) in item.searchValue" :key="data.label">
-                            <span class="query-data-label" @click="handleCancelQueryParams(item, index, i)">{{ data.label }}<i class="el-icon-close"></i></span>
-                            <b v-if="item.searchValue.length - 1 > i" class="padding_0_5 color-primary">OR</b>
-                          </span>
-                          <span class="padding_0_5">)</span>
-                        </span>
-                        <span v-else>
-                            <span class="query-data-label" @click="handleCancelQueryParams(item, index)">{{ item.searchValue.label }}<i class="el-icon-close"></i></span>
-                        </span>
-                      </span>
-                    </div>
-                  </el-alert>
-                </div>
-            </div>
-            <el-button slot="reference" size="small" type="primary" style="width:100%">
-                    检索条件<i class="el-icon-arrow-down el-icon--right"></i>
-            </el-button>
-        </el-popover>
+    <div class="option" v-if="searchOptions.length > 0">
+      <el-popover placement="bottom" title="" width="300" trigger="hover" class="margin-left_10">
+        <div class="main">
+          <div v-for="(item, index) in searchOptions" :key="item.value" class="box">
+            <el-alert type="success" :closable="false">
+              <div class="content">
+                <div class="color-black">{{ item.label }}</div>
+                <b class="padding-right_10">AND</b>
+                <span class="color-black">
+                  <span v-if="item.type == 3">
+                    <span class="padding_0_5">(</span>
+                    <span v-for="(data, i) in item.searchValue" :key="data.label">
+                      <span class="query-data-label" @click="handleCancelQueryParams(item, index, i)">{{ data.label }}<i
+                          class="el-icon-close"></i></span>
+                      <b v-if="item.searchValue.length - 1 > i" class="padding_0_5 color-primary">OR</b>
+                    </span>
+                    <span class="padding_0_5">)</span>
+                  </span>
+                  <span v-else>
+                    <span class="query-data-label" @click="handleCancelQueryParams(item, index)">{{ item.searchValue.label
+                    }}<i class="el-icon-close"></i></span>
+                  </span>
+                </span>
+              </div>
+            </el-alert>
+          </div>
+        </div>
+        <el-button slot="reference" size="small" type="primary" style="width:100%">
+          检索条件<i class="el-icon-arrow-down el-icon--right"></i>
+        </el-button>
+      </el-popover>
     </div>
   </div>
 </template>
@@ -102,149 +70,149 @@ export default {
         return [];
       },
     },
-    disabled:{
-        default:false
+    disabled: {
+      default: false
     },
-    searchValue:{
-        default: () => {
-            return {};
-        },
+    searchValue: {
+      default: () => {
+        return {};
+      },
     }
   },
   data() {
     return {
-        inner:false,
+      inner: false,
       label: '',
       value: null,
-      field:{},
-      searchOptions:[]
+      field: {},
+      searchOptions: []
     };
   },
   watch: {
-    SearchFields(){
-        this.getLabel()
+    SearchFields() {
+      this.getLabel()
     },
     searchValue: {
       deep: true,
       handler(n, o) {
-        if(!this.inner){
-           this.getSearchOptions() 
-        }else{
-            this.inner = false
+        if (!this.inner) {
+          this.getSearchOptions()
+        } else {
+          this.inner = false
         }
-        
+
       }
     }
   },
   computed: {},
-  created() {},
+  created() { },
   mounted() {
     this.getLabel()
     this.getSearchOptions()
   },
   methods: {
-    getSearchOptions(){
-        this.searchOptions = []
-        if(Object.keys(this.searchValue).length>0){
-            Object.keys(this.searchValue).forEach(key=>{
-                if(this.searchValue[key] || (typeof this.searchValue[key] == 'object' && this.searchValue[key].length>0)){
-                var field = this.SearchFields.find(item=>{
-                    return item.value == key
-                })
-                if(typeof this.searchValue[key] == 'object'){
-                   this.searchOptions.push(
-                        {
-                            ...field,
-                            searchValue : field.options.filter(item=>{
-                                return this.searchValue[key].indexOf(item.value)!=-1
-                            })
-                        }
-                    ) 
-                }else{
-                    this.searchOptions.push(
-                        {
-                            ...field,
-                            searchValue :{
-                                        label:this.searchValue[key]
-                                    }
-                        }
-                    ) 
-                }
-              }  
+    getSearchOptions() {
+      this.searchOptions = []
+      if (Object.keys(this.searchValue).length > 0) {
+        Object.keys(this.searchValue).forEach(key => {
+          if (this.searchValue[key] || (typeof this.searchValue[key] == 'object' && this.searchValue[key].length > 0)) {
+            var field = this.SearchFields.find(item => {
+              return item.value == key
             })
-        }
+            if (typeof this.searchValue[key] == 'object') {
+              this.searchOptions.push(
+                {
+                  ...field,
+                  searchValue: field.options.filter(item => {
+                    return this.searchValue[key].indexOf(item.value) != -1
+                  })
+                }
+              )
+            } else {
+              this.searchOptions.push(
+                {
+                  ...field,
+                  searchValue: {
+                    label: this.searchValue[key]
+                  }
+                }
+              )
+            }
+          }
+        })
+      }
     },
-    getLabel(){
-        if(this.SearchFields.length>0){
-            this.label = this.SearchFields[0].value
-            this.getObject(this.label)
-        }
+    getLabel() {
+      if (this.SearchFields.length > 0) {
+        this.label = this.SearchFields[0].value
+        this.getObject(this.label)
+      }
     },
     handleCancelQueryParams(data, index, i) {
-        this.inner = true
-      if(data.type==3){
-        data.searchValue.splice(i,1)
-        if(data.searchValue.length == 0){
-            this.searchOptions.splice(index,1)
+      this.inner = true
+      if (data.type == 3) {
+        data.searchValue.splice(i, 1)
+        if (data.searchValue.length == 0) {
+          this.searchOptions.splice(index, 1)
         }
-      }else{
-        this.searchOptions.splice(index,1)
+      } else {
+        this.searchOptions.splice(index, 1)
       }
-      this.$emit('search',this.searchOptions)
+      this.$emit('search', this.searchOptions)
     },
-    search(){
-        this.inner = true
-        if(this.value || this.value.length>0){
-            var searchValue = {}
-            if(this.field.type == 3){
-                searchValue = this.field.options.filter(item=>{
-                    return this.value.indexOf(item.value)!=-1
-                })
-            }else{
-                searchValue = {
-                    label:this.value
-                }
-            }
-            this.searchOptions.push(
-                {
-                    ...this.field,
-                    searchValue:searchValue
-                }
-            )
-            this.getValue()
+    search() {
+      this.inner = true
+      if (this.value || this.value.length > 0) {
+        var searchValue = {}
+        if (this.field.type == 3) {
+          searchValue = this.field.options.filter(item => {
+            return this.value.indexOf(item.value) != -1
+          })
+        } else {
+          searchValue = {
+            label: this.value
+          }
         }
-        
-        this.$emit('search',this.searchOptions)
+        this.searchOptions.push(
+          {
+            ...this.field,
+            searchValue: searchValue
+          }
+        )
+        this.getValue()
+      }
+
+      this.$emit('search', this.searchOptions)
     },
     getObject(val) {
-        this.field = this.SearchFields.find(item=>{
-            return item.value == val
-        })
-        this.getValue()
+      this.field = this.SearchFields.find(item => {
+        return item.value == val
+      })
+      this.getValue()
     },
-    getValue(){
-        if(this.field.type == 3){
-            this.value = []
-        }else{
-            this.value = ''
-        }
+    getValue() {
+      if (this.field.type == 3) {
+        this.value = []
+      } else {
+        this.value = ''
+      }
     },
-    getPlaceholder(){
-        var placeholder = '请输入'
-        if(this.field.placeholder){
-            placeholder = this.field.placeholder
-        }else{
-            if(this.field.type){
-                if(this.field.type == 1){
-                    placeholder = '请输入'
-                }else if(this.field.type == 2){
-                    placeholder = '请选择时间'
-                }else if(this.field.type == 3){
-                    placeholder = '请选择'
-                }
-            }
+    getPlaceholder() {
+      var placeholder = '请输入'
+      if (this.field.placeholder) {
+        placeholder = this.field.placeholder
+      } else {
+        if (this.field.type) {
+          if (this.field.type == 1) {
+            placeholder = '请输入'
+          } else if (this.field.type == 2) {
+            placeholder = '请选择时间'
+          } else if (this.field.type == 3) {
+            placeholder = '请选择'
+          }
         }
-        return placeholder
+      }
+      return placeholder
     }
   },
 };
@@ -254,42 +222,52 @@ export default {
   padding: 0 !important;
   height: 250px;
   overflow-y: auto;
+
   .box {
     margin-top: 10px;
+
     .content {
       line-height: 30px;
       font-size: 14px;
     }
   }
 }
+
 .query-data-label {
   cursor: pointer;
+
   &:hover {
     text-decoration: underline;
     color: red;
   }
 }
-.searchComponent{
-    padding:0 10px;
-    display: flex;
-    width:100%;
+
+.searchComponent {
+  padding: 0 10px;
+  display: flex;
+  // width: 100%;
 }
-.searchComponent>*{
-    margin-right:10px;
-    width:100%;
+
+.searchComponent>* {
+  margin-right: 10px;
+  width: 100%;
 }
-.value{
-    width:100%
+
+.value {
+  width: 100%
 }
-.btn{
-    width:100px;
-    margin-right:0;
+
+.btn {
+  width: 100px;
+  margin-right: 0;
 }
-.field{
-    max-width:150px;
+
+.field {
+  max-width: 150px;
 }
-.option{
-    width:100px;
-    margin-right:0;
+
+.option {
+  width: 100px;
+  margin-right: 0;
 }
 </style>

src/views/product/components/framework/framework.vue

@@ -1,82 +1,86 @@
 <template>
-  <div>
+  <div class="framework">
     <el-container>
       <el-header>
-         <div style="padding-left: 20px;">产品名称：{{ row.productName }}</div>
+        <div style="padding-left: 20px;">产品名称：{{ row.productName }}</div>
       </el-header>
       <el-container>
-        <el-aside width="450px" style="padding: 15px;height: 100vh;">
-            <frameworkTree :productsRow="row" :isDelete="isDelete" :tableRow="tableRow" :isEdit="isEdit" @table="getTable"></frameworkTree>
+        <el-aside width="450px" style="padding: 15px;">
+          <frameworkTree :productsRow="row" :isDelete="isDelete" :tableRow="tableRow" :isEdit="isEdit" @table="getTable">
+          </frameworkTree>
         </el-aside>
-        <el-main>
-          <div style="margin-bottom: 10px;">所属分类：{{ parentName }}</div>
-          <!-- 表格 -->
-          <el-table
-            :data="tableData.slice((queryParams.current-1)*queryParams.size,queryParams.current*queryParams.size)"
-            v-loading="loading"
-            border
-            header-row-class-name="custom-table-header"
-            style="width: 100%;margin-bottom: 10px;">
+        <el-container>
+          <el-main>
+            <div style="margin-bottom: 10px;">所属分类：{{ parentName }}</div>
+            <!-- 表格 -->
+            <el-table :data="tableData.slice((queryParams.current - 1) * queryParams.size, queryParams.current * queryParams.size)"
+              v-loading="loading" border header-row-class-name="custom-table-header" :row-class-name="tableRowClassName"
+              style="width: 100%;margin-bottom: 10px;">
+
+              <el-table-column prop="structureName" label="产品架构名称" align="center"> </el-table-column>
+              <el-table-column prop="createPersonName" label="创建人" align="center"> </el-table-column>
+              <el-table-column prop="createTime" label="创建时间" align="center"> </el-table-column>
+              <el-table-column prop="remark" label="产品架构说明" align="center"></el-table-column>
+              <el-table-column label="操作" width="180" align="center">
+                <template slot-scope="scope">
+                  <el-dropdown split-button type="primary" size="small" trigger="click"
+                    @command="handleCommand($event, scope.row)" @click="handleEdit(scope.row)">
+                    <p>编辑</p>
+                    <el-dropdown-menu slot="dropdown" style="text-align: center;">
+                      <el-dropdown-item command="1">预览图片</el-dropdown-item>
+                      <!-- <el-dropdown-item command="2">查看信息</el-dropdown-item> -->
+                      <el-dropdown-item :divided="true" command="3"> <span style="color: red;">删除</span> </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-main>
           
-            <el-table-column prop="structureName" label="产品架构名称"    align="center"> </el-table-column>
-            <el-table-column prop="createPersonName" label="创建人"  align="center"> </el-table-column>
-            <el-table-column prop="createTime" label="创建时间"  align="center"> </el-table-column>
-            <el-table-column prop="remark" label="产品架构说明" align="center"></el-table-column>
-            <el-table-column label="操作" width="180" align="center"> 
-              <template slot-scope="scope">
-                <el-dropdown split-button type="primary" size="small" trigger="click"  @command="handleCommand($event,scope.row)" @click="handleEdit(scope.row)">
-                  <p>编辑</p> 
-                  <el-dropdown-menu slot="dropdown" style="text-align: center;">
-                    <el-dropdown-item command="1">预览图片</el-dropdown-item>
-                    <!-- <el-dropdown-item command="2">查看信息</el-dropdown-item> -->
-                    <el-dropdown-item :divided="true" command="3" > <span style="color: red;">删除</span>  </el-dropdown-item>
-                  </el-dropdown-menu>
-                </el-dropdown>
-              </template>
-            </el-table-column>
-          </el-table>
-          <!-- 分页 -->
-          <div style="display: flex;justify-content: center;">
-            <el-pagination background layout="total,prev, pager, next,jumper" :total="total"
-              @current-change="handleCurrentChange" :current-page.sync ="queryParams.current" :page-size="queryParams.size">
-            </el-pagination>
-          </div>
-        </el-main>
+          <el-footer>
+            <div>
+              <el-pagination background layout="total,prev, pager, next,jumper" :total="total"
+                @current-change="handleCurrentChange" :current-page.sync="queryParams.current"
+                :page-size="queryParams.size">
+              </el-pagination>
+            </div>
+          </el-footer>
+        </el-container>
       </el-container>
     </el-container>
-   
+
   </div>
 </template>
 
 <script>
 import frameworkTree from '@/views/product/components/framework/frameworkTree.vue'
 export default {
-  props:['row'],
+  props: ['row'],
   components: {
     frameworkTree,
   },
   data() {
     return {
       tableData: [],
-      loading:false,
+      loading: false,
       queryParams: {
         size: 10,
-        current:1,
+        current: 1,
       },
       total: 0,
       rules: {
-        productName:[{ required: true, message: '请输入产品名称', trigger: 'blur' },],
-        elementName:[{ required: true, message: '请输入产品架构名称', trigger: 'blur' },],
+        productName: [{ required: true, message: '请输入产品名称', trigger: 'blur' },],
+        elementName: [{ required: true, message: '请输入产品架构名称', trigger: 'blur' },],
       },
       isDelete: false,//是否删除
       tableRow: {},
       isEdit: false,//是否编辑
       tab: [],
-      parentName:''
+      parentName: ''
     }
   },
- 
-  mounted() { 
+
+  mounted() {
   },
   methods: {
     // 子组件返回数据
@@ -84,16 +88,16 @@ export default {
       if (val) {
         this.total = val.children.length
         this.tableData = val.children
-        this.parentName = val.pathName?val.pathName:this.row.productName
+        this.parentName = val.pathName ? val.pathName : this.row.productName
       }
     },
     // 编辑架构
-    handleEdit(row) { 
+    handleEdit(row) {
       this.isEdit = !this.isEdit
-      this.tableRow=JSON.parse(JSON.stringify(row))
+      this.tableRow = JSON.parse(JSON.stringify(row))
     },
     // 编辑架构右侧下拉菜单
-    handleCommand(command, row) { 
+    handleCommand(command, row) {
       switch (command) {
         case '1'://预览图片
           this.commandPackage(row)
@@ -103,40 +107,57 @@ export default {
           break;
         case '3'://删除
           this.isDelete = !this.isDelete
-          this.tableRow=row
+          this.tableRow = row
           break;
-      
+
         default:
           break;
       }
     },
     // 下拉菜单图片预览
     commandPackage(row) {
-      if (row.pictures && row.pictures.length>0) {
-         var item = row.pictures[0]//图片每条信息
-          var FileUrl = this.$p + row.pictures[0].url//每张图片的url
-          var isPicture = 1
-          const router = this.$router.resolve({
-                path: '/checkFile',
-                query: {
-                    row: JSON.stringify(item),
-                    FileUrl: FileUrl,
-                    isPicture:isPicture,
-                }
-            })
-          window.open(router.href, '_blank');
-      }else{
+      if (row.pictures && row.pictures.length > 0) {
+        var item = row.pictures[0]//图片每条信息
+        var FileUrl = this.$p + row.pictures[0].url//每张图片的url
+        var isPicture = 1
+        const router = this.$router.resolve({
+          path: '/checkFile',
+          query: {
+            row: JSON.stringify(item),
+            FileUrl: FileUrl,
+            isPicture: isPicture,
+          }
+        })
+        window.open(router.href, '_blank');
+      } else {
         this.$message.info("暂无图片，请先上传图片再进行预览！")
       }
     },
-     // 分页
+    // 分页
     handleCurrentChange(val) {
       this.queryParams.current = val
     },
+    // row隔行变色
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex % 2 === 1) {
+        return 'height-row'
+      }
+    },
   },
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" >
+.framework {
+  height:100%;
+  .custom-table-header>th {
+    background: #deedff !important;
+    color: #7ba6d5 !important;
+    font-weight: 400 !important;
+  }
 
+  .height-row {
+    background: #f5faff !important;
+  }
+}
 </style>

src/views/product/components/marketingData.vue

@@ -1,354 +1,360 @@
 <template>
-    <div>
-        <div style="display: flex; justify-content: flex-end; margin-bottom: 20px">
-            <el-button @click="addData()">添加</el-button>
-        </div>
-        <el-table :data="tableData" border @sort-change="sortChange">
-            <el-table-column label="时间" prop="saleTime" align="center" sortable="custom">
-                <template slot-scope="scope">
-                    <span v-if="!scope.row.vVisible">{{ scope.row.saleTime }}</span>
-                    <el-date-picker
-                        style="width: 100%"
-                        v-else
-                        v-model="scope.row.saleTime"
-                        type="month"
-                        value-format="yyyy-MM"
-                        placeholder="选择日期时间"
-                    >
-                    </el-date-picker>
-                </template>
-            </el-table-column>
-            <el-table-column label="地区" prop="saleArea" align="center" width="120px" sortable="custom">
-                <template slot-scope="scope">
-                    <span v-if="!scope.row.vVisible">{{ scope.row.saleArea }}</span>
-                    <el-input v-else v-model="scope.row.saleArea" placeholder="请输入地区"></el-input>
-                </template>
-            </el-table-column>
-            <el-table-column label="销售量/件" prop="saleCount" align="center" width="120px" sortable="custom">
-                <template slot-scope="scope">
-                    <span v-if="!scope.row.vVisible">{{ scope.row.saleCount }}</span>
-                    <el-input v-else v-model="scope.row.saleCount" placeholder="请输入销售量/件"></el-input>
-                </template>
-            </el-table-column>
-            <el-table-column label="销售额/万元" prop="saleMoney" align="center" width="120px" sortable="custom">
-                <template slot-scope="scope">
-                    <span v-if="!scope.row.vVisible">{{ scope.row.saleMoney }}</span>
-                    <el-input v-else v-model="scope.row.saleMoney" placeholder="请输入销售额/万元"></el-input>
-                </template>
-            </el-table-column>
-            <el-table-column label="许可参考值" prop="reference" align="center" width="120px">
-                <template slot-scope="scope">
-                    <span>{{row.licenseRate==0||row.licenseRate?(Number(scope.row.saleMoney) * Number(row.licenseRate)).toFixed(2):'' }}</span>
-                </template>
-            </el-table-column>
-            <el-table-column label="自定义许可费" prop="customLicenseFee" align="center" width="200px">
-                <template slot-scope="scope">
-                    <span v-if="editId == scope.row.id"><el-input v-model="scope.row.customLicenseRates" placeholder="请输入自定义许可费率(许可费率介于0-1之间)" @blur="changeEditId(scope.row)" @change="inpBlur" autofocus=true></el-input></span>
-                    <span v-else>{{ scope.row.customLicenseRate==0||scope.row.customLicenseRate?(Number(scope.row.saleMoney) * Number(scope.row.customLicenseRate)).toFixed(2):'' }} <span><i class="el-icon-edit" @click="editCustomLicenseRate(scope.row)"></i></span> </span>
-                </template>
-            </el-table-column>
-            <el-table-column label="操作" width="160" align="center">
-                <template slot-scope="scope">
-                    <div class="special">
-                        <span
-                        v-if="!scope.row.vVisible"
-                        class="items"
-                        @click="edit(scope.row)"
-                        >编辑</span
-                        >
-                        <span v-else class="items" @click="submit1(scope.row)">保存</span>
-                        <span>&nbsp;|&nbsp;</span>
-                        <span class="items" @click="deleteIt(scope.row)"  v-if="!scope.row.vVisible">删除</span>
-                        <span v-else class="items" @click="getList">取消</span>
-                    </div>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div style="display: flex;justify-content: center;">
-            <el-pagination
-                background
-                layout="total,prev, pager, next,jumper"
-                :total="total"
-                @current-change="handleCurrentChange"
-                :current-page="queryParams.current" :page-size="queryParams.size">
-            </el-pagination>
-        </div>
-        <el-dialog :title="title" :visible.sync="visible" width="1000px" append-to-body :close-on-click-modal="false" :before-close="close">
-            <div>
-                <el-form ref="form" :model="form" :rules="rules">
-                    <el-form-item label="所属产品" prop="productName" v-if="form.productName">
-                        <el-input v-model="form.productName" :disabled="true"></el-input>
-                    </el-form-item>
-                    <el-form-item label="时间" prop="saleTime">
-                        <el-date-picker
-                            style="width: 100%"
-                            v-model="form.saleTime"
-                            type="month"
-                            value-format="yyyy-MM"
-                            placeholder="选择日期时间"
-                        >
-                     </el-date-picker>
-                    </el-form-item>
-                    <el-form-item label="地区" prop="saleArea" >
-                        <el-input v-model="form.saleArea"  placeholder="请输入地区"></el-input>
-                    </el-form-item>
-                    <el-form-item label="销售量/件" prop="saleCount">
-                        <el-input v-model="form.saleCount" placeholder="请输入销售量"></el-input>
-                    </el-form-item>
-                    <el-form-item label="销售额/万元" prop="saleMoney">
-                        <el-input v-model="form.saleMoney" placeholder="请输入销售额"></el-input>
-                    </el-form-item>
-                    <!-- <el-form-item label="许可参考值" prop="reference">
+  <div class="marketingData">
+    <div style="display: flex; justify-content: flex-end; margin-bottom: 20px">
+      <el-button @click="addData()">添加</el-button>
+    </div>
+    <el-table :data="tableData" border @sort-change="sortChange" :row-class-name="tableRowClassName" header-row-class-name="custom-table-header">
+      <el-table-column label="时间" prop="saleTime" align="center" sortable="custom">
+        <template slot-scope="scope">
+          <span v-if="!scope.row.vVisible">{{ scope.row.saleTime }}</span>
+          <el-date-picker style="width: 100%" v-else v-model="scope.row.saleTime" type="month" value-format="yyyy-MM"
+            placeholder="选择日期时间">
+          </el-date-picker>
+        </template>
+      </el-table-column>
+      <el-table-column label="地区" prop="saleArea" align="center" width="120px" sortable="custom">
+        <template slot-scope="scope">
+          <span v-if="!scope.row.vVisible">{{ scope.row.saleArea }}</span>
+          <el-input v-else v-model="scope.row.saleArea" placeholder="请输入地区"></el-input>
+        </template>
+      </el-table-column>
+      <el-table-column label="销售量/件" prop="saleCount" align="center" width="120px" sortable="custom">
+        <template slot-scope="scope">
+          <span v-if="!scope.row.vVisible">{{ scope.row.saleCount }}</span>
+          <el-input v-else v-model="scope.row.saleCount" placeholder="请输入销售量/件"></el-input>
+        </template>
+      </el-table-column>
+      <el-table-column label="销售额/万元" prop="saleMoney" align="center" width="120px" sortable="custom">
+        <template slot-scope="scope">
+          <span v-if="!scope.row.vVisible">{{ scope.row.saleMoney }}</span>
+          <el-input v-else v-model="scope.row.saleMoney" placeholder="请输入销售额/万元"></el-input>
+        </template>
+      </el-table-column>
+      <el-table-column label="许可参考值" prop="reference" align="center" width="120px">
+        <template slot-scope="scope">
+          <span>{{ row.licenseRate == 0 || row.licenseRate ? (Number(scope.row.saleMoney) *
+            Number(row.licenseRate)).toFixed(2) : '' }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="自定义许可费" prop="customLicenseFee" align="center" width="200px">
+        <template slot-scope="scope">
+          <span v-if="editId == scope.row.id"><el-input v-model="scope.row.customLicenseRates"
+              placeholder="请输入自定义许可费率(许可费率介于0-1之间)" @blur="changeEditId(scope.row)" @change="inpBlur"
+              autofocus=true></el-input></span>
+          <span v-else>{{ scope.row.customLicenseRate == 0 || scope.row.customLicenseRate ? (Number(scope.row.saleMoney) *
+            Number(scope.row.customLicenseRate)).toFixed(2) : '' }} <span><i class="el-icon-edit"
+                @click="editCustomLicenseRate(scope.row)"></i></span> </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="160" align="center">
+        <template slot-scope="scope">
+          <div class="special">
+            <span v-if="!scope.row.vVisible" class="items" @click="edit(scope.row)">编辑</span>
+            <span v-else class="items" @click="submit1(scope.row)">保存</span>
+            <span>&nbsp;|&nbsp;</span>
+            <span class="items" @click="deleteIt(scope.row)" v-if="!scope.row.vVisible">删除</span>
+            <span v-else class="items" @click="getList">取消</span>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div style="display: flex;justify-content: center;">
+      <el-pagination background layout="total,prev, pager, next,jumper" :total="total"
+        @current-change="handleCurrentChange" :current-page="queryParams.current" :page-size="queryParams.size">
+      </el-pagination>
+    </div>
+    <el-dialog :title="title" :visible.sync="visible" width="1000px" append-to-body :close-on-click-modal="false"
+      :before-close="close">
+      <div>
+        <el-form ref="form" :model="form" :rules="rules">
+          <el-form-item label="所属产品" prop="productName" v-if="form.productName">
+            <el-input v-model="form.productName" :disabled="true"></el-input>
+          </el-form-item>
+          <el-form-item label="时间" prop="saleTime">
+            <el-date-picker style="width: 100%" v-model="form.saleTime" type="month" value-format="yyyy-MM"
+              placeholder="选择日期时间">
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="地区" prop="saleArea">
+            <el-input v-model="form.saleArea" placeholder="请输入地区"></el-input>
+          </el-form-item>
+          <el-form-item label="销售量/件" prop="saleCount">
+            <el-input v-model="form.saleCount" placeholder="请输入销售量"></el-input>
+          </el-form-item>
+          <el-form-item label="销售额/万元" prop="saleMoney">
+            <el-input v-model="form.saleMoney" placeholder="请输入销售额"></el-input>
+          </el-form-item>
+          <!-- <el-form-item label="许可参考值" prop="reference">
                         <el-input v-model="form.reference" placeholder="请输入销售额"></el-input>
                     </el-form-item> -->
-                    <el-form-item label="自定义许可费率" prop="customLicenseRates">
-                        <el-input v-model="form.customLicenseRates" placeholder="请输入自定义许可费率(许可费率介于0-1之间)" ></el-input>
-                    </el-form-item>
-                </el-form>
-            </div> 
-            <div slot="footer" class="dialog-footer" style="display: flex;justify-content: flex-end;">
-                <el-button @click="close">取 消</el-button>
-                <el-button type="primary" @click="submit" :loading="btnLoading">确定</el-button>
-            </div> 
-        </el-dialog>
-    </div>
+          <el-form-item label="自定义许可费率" prop="customLicenseRates">
+            <el-input v-model="form.customLicenseRates" placeholder="请输入自定义许可费率(许可费率介于0-1之间)"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div slot="footer" class="dialog-footer" style="display: flex;justify-content: flex-end;">
+        <el-button @click="close">取 消</el-button>
+        <el-button type="primary" @click="submit" :loading="btnLoading">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 <script>
 export default {
-    props:['row'],
-    data() {
-        const customLicenseRateRule = (rule , value ,callback)=>{
-            if(value){
-                if (!isNaN(value)) {
-                if (value>=0 && value<=1) {
-                    this.form.customLicenseRates=value
-                    this.form.customLicenseRate=this.form.customLicenseRates
-                    callback()
-                } else {
-                    // if (value>1) {
-                    //   this.categoryForm.licenseRate=1
-                    // } else {
-                    //   this.categoryForm.licenseRate=0
-                    // }
-                    callback(new Error('输入错误，自定义许可费率介于0-1之间'))
-                }
-                } else {
-                // this.categoryForm.licenseRate=this.categoryForm.licenseRateA
-                callback(new Error('输入错误，自定义许可费率介于0-1之间'))
-                }
-            }else{
-                callback()
-            }
+  props: ['row'],
+  data() {
+    const customLicenseRateRule = (rule, value, callback) => {
+      if (value) {
+        if (!isNaN(value)) {
+          if (value >= 0 && value <= 1) {
+            this.form.customLicenseRates = value
+            this.form.customLicenseRate = this.form.customLicenseRates
+            callback()
+          } else {
+            // if (value>1) {
+            //   this.categoryForm.licenseRate=1
+            // } else {
+            //   this.categoryForm.licenseRate=0
+            // }
+            callback(new Error('输入错误，自定义许可费率介于0-1之间'))
+          }
+        } else {
+          // this.categoryForm.licenseRate=this.categoryForm.licenseRateA
+          callback(new Error('输入错误，自定义许可费率介于0-1之间'))
         }
-        return {
-            editId:null,
-            visible:false,
-            btnLoading:false,
-            title:'',
-            form:{},
-            queryParams:{
-                size:10,
-                current:1
-            },
-            total:0,
-            tableData:[],
-            rules:{
-                saleTime:[ {required: true, message: '请选择日期', trigger: 'change' }],
-                saleMoney:[{ required: true, message: '请输入销售额', trigger: 'blur' }],
-                customLicenseRates:[{required: false, validator:customLicenseRateRule, trigger: 'blur' }]
+      } else {
+        callback()
+      }
+    }
+    return {
+      editId: null,
+      visible: false,
+      btnLoading: false,
+      title: '',
+      form: {},
+      queryParams: {
+        size: 10,
+        current: 1
+      },
+      total: 0,
+      tableData: [],
+      rules: {
+        saleTime: [{ required: true, message: '请选择日期', trigger: 'change' }],
+        saleMoney: [{ required: true, message: '请输入销售额', trigger: 'blur' }],
+        customLicenseRates: [{ required: false, validator: customLicenseRateRule, trigger: 'blur' }]
+      }
+    }
+  },
+  watch: {
+    row(val) {
+      this.getList2()
+    },
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    //编辑自定义许可费
+    editCustomLicenseRate(row) {
+      this.$set(row, 'customLicenseRates', row.customLicenseRate)
+      this.editId = row.id
+    },
+    // 许可费率事件//优化
+    inpBlur(row) {
+      var val = row.customLicenseRates
+      if (val) {
+        if (!isNaN(val)) {
+          if (val >= 0 && val <= 1) {
+            row.customLicenseRate = val
+          } else {
+            if (val > 1) {
+              row.customLicenseRate = 1
+              row.customLicenseRates = 1
+            }
+            if (val < 0) {
+              row.customLicenseRate = 0
+              row.customLicenseRates = 0
             }
+          }
+        } else {
+          row.customLicenseRates = row.customLicenseRate ? row.customLicenseRate : ''
         }
+      }
+
     },
-    watch:{
-        row(val){
-            this.getList2()
-        },
+    //失去焦点
+    changeEditId(row) {
+      this.inpBlur(row)
+      if (this.editId) {
+        this.$set(this, 'editId', null)
+      }
+      this.update(row)
     },
-    mounted() {
-        this.getList()
+    //重新查询
+    getList2() {
+      this.queryParams.current = 1
+      this.getList()
     },
-    methods: {
-        //编辑自定义许可费
-        editCustomLicenseRate(row){
-            this.$set(row,'customLicenseRates',row.customLicenseRate)
-            this.editId = row.id
-        },
-        // 许可费率事件//优化
-        inpBlur(row) {
-            var val = row.customLicenseRates
-            if (val) {
-                if (!isNaN(val)) {
-                    if (val >= 0 && val <= 1) {
-                        row.customLicenseRate = val
-                    } else {
-                        if (val > 1) {
-                            row.customLicenseRate = 1
-                            row.customLicenseRates = 1
-                        }
-                        if (val < 0) {
-                            row.customLicenseRate = 0
-                            row.customLicenseRates = 0
-                        }
-                    }
-                } else {
-                    row.customLicenseRates = row.customLicenseRate?row.customLicenseRate:''
-                }
-            }
-            
-        },
-        //失去焦点
-        changeEditId(row){
-            this.inpBlur(row)
-            if(this.editId){
-               this.$set(this,'editId',null)
+    //获取营销数据
+    getList() {
+      this.queryParams.productId = this.row.id
+      this.$api.queryProductMarketData(this.queryParams).then(response => {
+        if (response.code == 200) {
+          this.tableData = response.data.list
+          this.total = response.data.totalSizes
+        }
+      })
+    },
+    // 分页
+    handleCurrentChange(val) {
+      this.queryParams.current = val
+      this.getList()
+    },
+    // 排序
+    sortChange({ column, prop, order }) {
+      if (!order) {
+        return false
+      }
+      const o = {
+        'descending': 'desc',
+        'ascending': 'asc',
+      }
+      // console.log({ column, prop, order })
+      this.queryParams.orderBy = prop
+      this.queryParams.orderType = o[order]
+      this.getList2()
+    },
+    //打开添加营销数据弹窗
+    addData() {
+      this.title = '添加' + this.row.productName + '营销数据'
+      this.form = {
+        productId: this.row.id,
+        productName: this.row.productName,
+        customLicenseRate: this.row.licenseRate,
+        customLicenseRates: this.row.licenseRate
+      }
+      this.visible = true
+    },
+    //关闭弹窗
+    close() {
+      this.btnLoading = false
+      this.visible = false
+      this.$refs.form.resetFields()
+      this.form = {}
+    },
+    //编辑销售量
+    edit(row) {
+      this.$set(row, 'vVisible', !row.vVisible)
+    },
+    //保存
+    submit1(row) {
+      var str = ''
+      if (!row.saleTime) {
+        str = str + '时间'
+      }
+      if (!row.saleMoney) {
+        if (str.length > 0) {
+          str = str + '和销售额'
+        } else {
+          str = str + '销售额'
+        }
+      }
+      if (str.length > 0) {
+        this.$alert(str + '不可为空', '提示', {
+          confirmButtonText: '确定',
+          callback: action => {
+          }
+        });
+        return false
+      }
+      this.update(row)
+    },
+    //更新营销数据
+    update(row) {
+      row.productId = this.row.id
+      this.$api.updateProductMarketData(row).then(response => {
+        if (response.code == 200) {
+          this.$message.success('修改成功！')
+          row.vVisible = false
+        } else {
+          this.$message.error('修改失败！')
+        }
+      }).catch(e => {
+        this.$message.error('修改失败！')
+      })
+    },
+    //删除营销数据
+    deleteIt(row) {
+      this.$confirm('确认删除本条数据吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$api.deleteProductMarketData({ id: row.id }).then(response => {
+          if (response.code == 200) {
+            this.$message.success('删除成功！')
+            if (this.tableData.length == 1 && this.queryParams.current != 1) {
+              this.queryParams.current -= 1
             }
-            this.update(row)
-        },
-        //重新查询
-        getList2(){
-            this.queryParams.current = 1
-            this.getList()
-        },
-        //获取营销数据
-        getList(){
-            this.queryParams.productId = this.row.id
-            this.$api.queryProductMarketData(this.queryParams).then(response=>{
-                if(response.code == 200){
-                    this.tableData = response.data.list
-                    this.total = response.data.totalSizes
-                }
-            })
-        },
-        // 分页
-        handleCurrentChange(val) {
-            this.queryParams.current = val
             this.getList()
-        },
-        // 排序
-        sortChange({ column, prop, order }) {
-            if (!order) {
-                return false
-            }
-            const o = {
-                'descending': 'desc',
-                'ascending': 'asc',
-            }
-            // console.log({ column, prop, order })
-            this.queryParams.orderBy = prop
-            this.queryParams.orderType = o[order]
-            this.getList2()
-        },
-        //打开添加营销数据弹窗
-        addData(){
-            this.title = '添加'+this.row.productName+'营销数据'
-            this.form = {
-                productId : this.row.id,
-                productName : this.row.productName,
-                customLicenseRate : this.row.licenseRate,
-                customLicenseRates : this.row.licenseRate
+          } else {
+            this.$message.error('删除失败！')
+          }
+        }).catch(e => {
+          this.$message.error('删除失败！')
+        })
+      })
+
+    },
+    //确认添加营销数据
+    submit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.btnLoading = true
+          this.$api.addNewProductMarketData(this.form).then(response => {
+            if (response.code == 200) {
+              this.$message.success('添加成功！')
+              this.getList()
+              this.close()
+            } else {
+              this.$message.error('添加失败！')
+              this.btnLoading = false
             }
-            this.visible = true
-        },
-        //关闭弹窗
-        close(){
+          }).catch(e => {
+            this.$message.error('添加失败！')
             this.btnLoading = false
-            this.visible = false
-            this.$refs.form.resetFields()
-            this.form = {}
-        },
-        //编辑销售量
-        edit(row) {
-            this.$set(row,'vVisible',!row.vVisible )
-        },
-        //保存
-        submit1(row){
-            var str = ''
-            if(!row.saleTime){
-                str = str + '时间'
-            }
-            if(!row.saleMoney){
-                if(str.length>0){
-                    str = str + '和销售额'
-                }else{
-                    str = str + '销售额'
-                }
-            }
-            if(str.length>0){
-                this.$alert(str+'不可为空', '提示', {
-                    confirmButtonText: '确定',
-                    callback: action => {
-                    }
-                });
-                return false
-            }
-            this.update(row)
-        },
-        //更新营销数据
-        update(row){
-            row.productId = this.row.id
-            this.$api.updateProductMarketData(row).then(response=>{
-                if(response.code == 200){
-                    this.$message.success('修改成功！')
-                    row.vVisible = false
-                }else{
-                    this.$message.error('修改失败！')
-                }
-            }).catch(e=>{
-                this.$message.error('修改失败！')
-            })
-        },
-        //删除营销数据
-        deleteIt(row){
-            this.$confirm('确认删除本条数据吗？', '提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'warning'
-            }).then(() => {
-                this.$api.deleteProductMarketData({id:row.id}).then(response=>{
-                    if(response.code == 200){
-                        this.$message.success('删除成功！')
-                        if(this.tableData.length==1&&this.queryParams.current!=1){
-                            this.queryParams.current -= 1
-                        }
-                        this.getList()
-                    }else{
-                        this.$message.error('删除失败！')
-                    }
-                }).catch(e=>{
-                    this.$message.error('删除失败！')
-                })
-            })
-           
-        },
-        //确认添加营销数据
-        submit(){
-            this.$refs.form.validate((valid) => {
-                if (valid) {
-                    this.btnLoading = true
-                    this.$api.addNewProductMarketData(this.form).then(response=>{
-                        if(response.code == 200){
-                            this.$message.success('添加成功！')
-                            this.getList()
-                            this.close()
-                        }else{
-                            this.$message.error('添加失败！')
-                            this.btnLoading = false
-                        }
-                    }).catch(e=>{
-                        this.$message.error('添加失败！')
-                        this.btnLoading = false
-                    })
-                } else {
-                    // console.log('error submit!!');
-                    return false;
-                }
-            });
+          })
+        } else {
+          // console.log('error submit!!');
+          return false;
         }
+      });
+    },
+    // row隔行变色
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex % 2 === 0) {
+        return 'height-row'
+      }
     },
+  },
 }
 </script>
+<style lang="scss">
+.marketingData {
+
+  .custom-table-header>th {
+    background: #deedff !important;
+    color: #7ba6d5 !important;
+    font-weight: 400 !important;
+  }
+
+  .height-row {
+    background: #f5faff !important;
+  }
+}
+</style>
 <style lang="scss" scoped>
-.items{
-    cursor: pointer;
+.items {
+  cursor: pointer;
 }
 </style>

src/views/product/components/mixins.js

@@ -1,23 +1,23 @@
 export const commonMethods = {
-    methods: {
-        getMind(row,val){//val为数据类型，1为产品类别，2为产品
-            row.type = val
-            this.$s.setSession('mindRow',row)
-            const router = this.$router.resolve({
-                  path: '/mindIndex',
-              })
-            window.open(router.href, '_blank');
-          },
-          showTrend(row,val){//val为数据类型，1为产品类别，2为产品
-            const router = this.$router.resolve({
-                path: '/chartIndex',
-                query:{
-                    id:row.id,
-                    type:val,
-                    name:row.productCategoryName || row.productName
-                }
-            })
-            window.open(router.href, '_blank');
-          }
+  methods: {
+    getMind(row, val) {//val为数据类型，1为产品类别，2为产品
+      row.type = val
+      this.$s.setSession('mindRow', row)
+      const router = this.$router.resolve({
+        path: '/mindIndex',
+      })
+      window.open(router.href, '_blank');
     },
+    showTrend(row, val) {//val为数据类型，1为产品类别，2为产品
+      const router = this.$router.resolve({
+        path: '/chartIndex',
+        query: {
+          id: row.id,
+          type: val,
+          name: row.productCategoryName || row.productName
+        }
+      })
+      window.open(router.href, '_blank');
+    }
+  },
 }

src/views/product/components/relatedPatents/components/table.vue

@@ -1,70 +1,88 @@
 <template>
-  <div style="padding:20px;background:white;height:100%">
+  <div style="padding:20px;background:white;height:100%" class="relatedPatentsTable">
     <div style="margin-bottom:20px" v-if="name">
-      <span><span>{{ name }}</span>{{structureId?'架构':'产品'}}的相关专利</span>
+      <span><span>{{ name }}</span>{{ structureId ? '架构' : '产品' }}的相关专利</span>
     </div>
-    <div style="display: flex;justify-content: space-between;flex-wrap: wrap;" v-if="!structureId">
-      <div :style="{ visibility: selectedTotal > 0 ? 'visible' : 'hidden' ,width:'150px'}">
+    <div style="width: 100%;display: flex;justify-content: space-between;" v-if="!structureId">
+      <mySearch :SearchFields="searchFiled" @search="search" :searchValue="searchOption" style="padding: 0;"></mySearch>
+      <div :style="{ visibility: selectedTotal > 0 ? 'visible' : 'hidden', width: '150px' }">
         <span>已勾选 <b>{{ selectedTotal }}</b> 条</span>
       </div>
       <!-- <div>
         
       </div> -->
       <!-- <div style="display: flex;"> -->
-        <!-- <div style="display: flex;margin-bottom: 20px;" >
+      <!-- <div style="display: flex;margin-bottom: 20px;" >
               <el-input v-model="paramsRuleForm.patentNo" size="small" style="width: 450px;" placeholder="请输入专利号进行添加（多个专利号同时添加中间请用符号“|”隔开）"></el-input>
           <el-tooltip class="item" effect="dark" content="将搜索的专利添加至该产品的相关专利中" placement="top">
             <el-button type="primary" size="small" @click="getListAdd" style="margin-left: 10px;"> 添 加 </el-button>
           </el-tooltip>
         </div> -->
-        <div style="display:flex;padding-bottom:20px">
-          <div style="margin-right: 10px;">
-            <!-- <el-button type="primary" size="small" @click="addRelevantPatents">新增</el-button> -->
-            <!-- <el-button type="primary" size="small" @click="savePatentList" :loading="btnLoading">保存</el-button> -->
-          </div>
-          <el-button size="small" type="warning" @click="handleFieldManage">显示栏位管理</el-button>
-          <!-- <el-button type="primary" size="small" style="margin-right:10px;width:70px" @click="importPatent(productId)">导入</el-button> -->
-          <el-dropdown @command="importPatent($event,productId)" type="primary" size="small" style="margin-right:10px;">
-                <el-button type="primary" size="small" >
-                  导入专利<i class="el-icon-arrow-down el-icon--right"></i>
-                </el-button>
-                <el-dropdown-menu  class="children_item">
-                <el-dropdown-item command="1">专利号导入</el-dropdown-item>
-                <el-dropdown-item command="2">Excel导入</el-dropdown-item>
-                <!-- <el-dropdown-item command="3">检索导入</el-dropdown-item> -->
+      <div style="display:flex;padding-bottom:20px">
+        <!-- <div style="margin-right: 10px;">
+          <el-button type="primary" size="small" @click="addRelevantPatents">新增</el-button>
+          <el-button type="primary" size="small" @click="savePatentList" :loading="btnLoading">保存</el-button>
+        </div> -->
+        <!-- <el-button size="small" type="warning" @click="handleFieldManage">显示栏位管理</el-button>
+        <el-dropdown @command="importPatent($event, productId)" type="primary" size="small" style="margin-right:10px;">
+          <el-button type="primary" size="small">
+            导入专利<i class="el-icon-arrow-down el-icon--right"></i>
+          </el-button>
+          <el-dropdown-menu class="children_item">
+            <el-dropdown-item command="1">专利号导入</el-dropdown-item>
+            <el-dropdown-item command="2">Excel导入</el-dropdown-item>
+            <el-dropdown-item command="3">检索导入</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown> -->
+        <!-- <div class="btn1" @click="sift"
+          style="width:80px;height:32px;display:flex;justify-content:space-around;border-radius:5px; cursor: pointer;">
+          <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-popover placement="bottom" title="" width="250" trigger="click">
+          <el-main class="patent-fast-edit-popover" v-loading="selectNumberLoading">
+            <div class="btn" @click="handleSelectNumber(-1)">取消选择</div>
+            <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" @change="change1"></el-input>
+              <span>到</span>
+              <el-input size="mini" v-model="queryParams.endNumber" @change="change2"></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-dropdown split-button type="primary" size="small" class="margin-left_10" @command="handleCommand($event)"
+          @click="handleDelete">
+          <p>删 除</p>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item>
+              <el-dropdown trigger="hover" placement="right-start">
+                <span>
+                  专利导入<i class="el-icon-arrow-right el-icon--right"></i>
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item @click.native="importPatent(1, productId)">专利号导入</el-dropdown-item>
+                  <el-dropdown-item @click.native="importPatent(2, productId)">Excel导入</el-dropdown-item>
                 </el-dropdown-menu>
               </el-dropdown>
-          <div class="btn1" @click="sift"
-            style="width:80px;height:32px;display:flex;justify-content:space-around;border-radius:5px; cursor: pointer;">
-            <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-popover placement="bottom" title="" width="250" trigger="click">
-            <el-main class="patent-fast-edit-popover" v-loading="selectNumberLoading">
-              <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" @change="change1"></el-input>
-                <span>到</span>
-                <el-input size="mini" v-model="queryParams.endNumber" @change="change2"></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>
-          <el-button type="primary" size="small" class="margin-left_10" @click.native="handleDelete">删除</el-button>
-        </div>
+            </el-dropdown-item>
+            <el-dropdown-item command="1">显示栏位管理</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
       <!-- </div> -->
     </div>
     <!-- 数据表格 -->
     <el-table :data="tableData" border :row-key="getRowKeys" v-loading="loading" ref="table" id="table"
-      header-row-class-name="custom-table-header" style="min-width: 100%; overflow:auto">
+      :row-class-name="tableRowClassName" header-row-class-name="custom-table-header"
+      style="min-width: 100%; overflow:auto">
       <el-table-column width="80" align="center" v-if="!structureId">
         <template slot-scope="scope">
           <div>
@@ -156,21 +174,22 @@
         <!-- <el-button type="primary" >确 定</el-button> -->
       </div>
     </el-dialog>
-    <patent-view-field @close="close" @reset="getPatentViewField(true)" @update="updatePatentViewField" ref="patentViewField" />
+    <patent-view-field @close="close" @reset="getPatentViewField(true)" @update="updatePatentViewField"
+      ref="patentViewField" />
   </div>
 </template>
 <script>
 import SelectedPatent from "./SelectedPatent.vue";
 import PatentViewField from "@/views/product/components/relatedPatents/components/dialog/PatentViewField.vue";
-import { patentViewList, patentKeywordsHighlight} from '@/views/workspace/folder/components/mixins'
+import { patentViewList, patentKeywordsHighlight } from '@/views/workspace/folder/components/mixins'
 
-export default{
+export default {
   components: {
     SelectedPatent,
     PatentViewField,
   },
   mixins: [patentViewList, patentKeywordsHighlight],
-  props: ['productId','structureId','name'],//name为产品名称或者架构名称
+  props: ['productId', 'structureId', 'name'],//name为产品名称或者架构名称
   data() {
     return {
       btnLoading: false,
@@ -194,7 +213,7 @@ export default{
         size: 10,
       },
       paramsRuleForm: {
-        productId:this.productId,
+        productId: this.productId,
       },
       queryParams: {
         state: 0,
@@ -230,12 +249,51 @@ export default{
       mergeObj: {},
       selectNumberLoading: false,
       tableHeight: null,
-      viewSelected:this.name + this.productId,
-      patentViewField:[],
-      fields:[],
+      viewSelected: this.name + this.productId,
+      patentViewField: [],
+      fields: [],
+      searchFiled: [
+        {
+          label: '标题',
+          value: 'patentName',
+          type: 1,
+          placeholder: '请输入标题查询'
+        },
+        {
+          label: '摘要',
+          value: 'abstractStr',
+          type: 1,
+          placeholder: '请输入摘要查询'
+        },
+        {
+          label: '专利号',
+          value: 'patentNo',
+          type: 1,
+          placeholder: '请输入专利号查询(多个专利号查询中间请用符号“|”隔开，示例：“专利号|专利号”)'
+        },
+        {
+          label: '申请号',
+          value: 'applicationNo',
+          type: 1,
+          placeholder: '请输入申请号查询'
+        },
+        {
+          label: '申请人',
+          value: 'applicationName',
+          type: 1,
+          placeholder: '请输入申请人查询(多个申请人查询中间请用符号“|”隔开，示例：“申请人|申请人”)'
+        },
+        {
+          label: '权利人',
+          value: 'obligeeName',
+          type: 1,
+          placeholder: '请输入权利人查询(多个权利人查询中间请用符号“|”隔开，示例：“权利人|权利人”)'
+        },
+      ],
+      searchOption: {},
     }
   },
-  computed:{
+  computed: {
     projectId() {
       return this.$store.state.patent.projectId
     },
@@ -248,6 +306,25 @@ export default{
     this.getPatentViewField()
   },
   methods: {
+    // 左侧搜索
+    search(val) {
+      var params = {}
+      if (val.length > 0) {
+        val.forEach(item => {
+          if (item.type == 3) {
+            params[item.value] = item.searchValue.map(item1 => {
+              return item1.value
+            })
+          } else {
+            params[item.value] = item.searchValue.label
+          }
+        });
+      }
+      this.searchOption = params
+      this.queryParams.current = 1
+      this.handleCancelSelectNumber()
+      this.getList()
+    },
     // 请求显示栏位管理数据
     async getPatentViewField(refresh) {
       let params = {
@@ -258,7 +335,7 @@ export default{
       }
       const { data } = await this.$api.getUserSettingField(params)
       this.patentViewField = data
-      
+
       // this.patentViewField = data.filter(item => {
       //   return item.type=='list'
       // })
@@ -267,19 +344,19 @@ export default{
     // 显示栏位管理
     async handleFieldManage() {
       await this.getPatentViewField()
-      this.$refs.patentViewField.open(this.patentViewField,this.viewSelected)
+      this.$refs.patentViewField.open(this.patentViewField, this.viewSelected)
     },
     // 更新显示栏位管理
     updatePatentViewField(data) {
       this.patentViewField = data.filter(item => {
-        return item.type=='list'
+        return item.type == 'list'
       })
-     this.handleFields(this.patentViewField)
+      this.handleFields(this.patentViewField)
     },
     handleFields(patentViewField) {
-      this.fields=[]
-      this.fields=patentViewField.filter(item => {
-        return item.hidden==false
+      this.fields = []
+      this.fields = patentViewField.filter(item => {
+        return item.hidden == false
       })
     },
     getColumnValue(row, column) {
@@ -332,9 +409,9 @@ export default{
       this.$api.getPatentById(val.id, { projectId: null }).then(response => {
         var router = this.$router.resolve({
           path: 'patentDetails',
-          query:{
-            patentId:val.id,
-            id:true
+          query: {
+            patentId: val.id,
+            id: true
           }
         })
         window.open(router.href, '_blank');
@@ -351,20 +428,22 @@ export default{
     //   })
     // },
     //专利号导入PatentNoImport、excel导入import、检索导入conditionImport
-    importPatent(type,productId,asCompare){
+    importPatent(type, productId, asCompare) {
       var typeList = {
-        '1':'/download',
-        '2':'/excelImport',
-        '3':'/searchIndex'
+        '1': '/PatentNoImport',
+        '2': '/import',
+        // '1': '/download',
+        // '2': '/excelImport',
+        '3': '/searchIndex'
       }
-        this.$router.push({
-          path: typeList[type],
-          query: {
-            productId: productId,
-            asCompare:asCompare,
-            option:8,
-          }
-        })
+      this.$router.push({
+        path: typeList[type],
+        query: {
+          productId: productId,
+          asCompare: asCompare,
+          option: 8,
+        }
+      })
     },
     // 查询并添加到相关专利
     getListAdd() {
@@ -391,7 +470,7 @@ export default{
     },
     alterMessage(messages, num) {
       messages = messages.join('， ')
-      if (num==1) {
+      if (num == 1) {
         this.$alert(`<span style='color:red'>${messages}</span> 等专利无法删除`, '提示', {
           dangerouslyUseHTMLString: true,
           confirmButtonText: '确定',
@@ -405,17 +484,17 @@ export default{
     },
     change1(val) {
       if (!isNaN(val)) {
-         if (!val || val <= 0) {
-          this.queryParams.startNumber=1
+        if (!val || val <= 0) {
+          this.queryParams.startNumber = 1
         } else {
-          if (this.queryParams.startNumber>this.total) {
-            this.queryParams.startNumber=this.total
+          if (this.queryParams.startNumber > this.total) {
+            this.queryParams.startNumber = this.total
           }
         }
       } else {
-        this.queryParams.startNumber=1
+        this.queryParams.startNumber = 1
       }
-     
+
     },
     change2(val) {
       if (!isNaN(val)) {
@@ -426,8 +505,8 @@ export default{
             this.queryParams.endNumber = this.total
           }
         }
-      }else {
-        this.queryParams.endNumber=this.total
+      } else {
+        this.queryParams.endNumber = this.total
       }
     },
     tableOffSetHeight() {
@@ -493,6 +572,9 @@ export default{
         params.field = params.tree
       }
       switch (type) {
+        case -1:
+          this.handleCancelSelectNumber()
+          break;
         case 0:
           this.queryParams.selecteds = this.tableData.map(item => item.patentNo);
           this.checkList = [...new Set(this.checkList.concat(this.queryParams.selecteds))]
@@ -811,27 +893,38 @@ export default{
 
     },
     // 删除proPatentDelete
-    handleDelete() { 
-        this.saveDeleteQueryParams()
-        this.$confirm('此操作将删除该产品相关专利，不可恢复， 是否继续?', '提示', {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'warning',
-        }).then(res => {
-          this.$api.proPatentDelete(this.queryParams).then(res => {
-            if (res.code == 200) {
-              if (res.data && !res.data.includes('删除成功')) {
-                this.alterMessage(res.data,1)
-              } else {
-                 this.$message.success('删除成功')
-              }
-              this.saveDelete()
+    handleDelete() {
+      this.saveDeleteQueryParams()
+      this.$confirm('此操作将删除该产品相关专利，不可恢复， 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }).then(res => {
+        this.$api.proPatentDelete(this.queryParams).then(res => {
+          if (res.code == 200) {
+            if (res.data && !res.data.includes('删除成功')) {
+              this.alterMessage(res.data, 1)
+            } else {
+              this.$message.success('删除成功')
             }
-          })
-        }).catch(err => {
-          this.$message.info('取消删除')
+            this.saveDelete()
+          }
         })
-       
+      }).catch(err => {
+        this.$message.info('取消删除')
+      })
+
+    },
+    // 删除下拉菜单
+    handleCommand(ev) {
+      switch (ev) {
+        case '1':
+          this.handleFieldManage()
+          break;
+
+        default:
+          break;
+      }
     },
     savePatentList() {//保存
       this.saveDeleteQueryParams()
@@ -850,14 +943,14 @@ export default{
       this.queryParams.productId = this.productId
     },
     saveDelete() {
-          this.startNumber = 1
-          this.endNumber = 0
-          this.selectedTotal = 0
-          this.quickSelect = false
-          this.queryParams.patentNos = []
-          this.queryParams.notInPatentNos = []
-          this.checkList = []
-          this.getList2()
+      this.startNumber = 1
+      this.endNumber = 0
+      this.selectedTotal = 0
+      this.quickSelect = false
+      this.queryParams.patentNos = []
+      this.queryParams.notInPatentNos = []
+      this.checkList = []
+      this.getList2()
     },
     getList2() {
       this.queryParams.current = 1
@@ -866,7 +959,11 @@ export default{
     async getList(key) {
       this.queryParams.productId = this.productId
       this.queryParams.structureId = this.structureId
-      let params = JSON.parse(JSON.stringify(this.queryParams))
+      // let params = JSON.parse(JSON.stringify(this.queryParams))
+      let params = {
+        ...JSON.parse(JSON.stringify(this.queryParams)),
+        ...this.searchOption
+      }
       //console.log(params);
       params.tree.map(tree => {
         let field = params.field.filter(item => item.key === tree.key)
@@ -900,6 +997,12 @@ export default{
     showPatent(even) {//选择下拉框
       //console.log(even);
     },
+    // row隔行变色
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex % 2 === 0) {
+        return 'height-row'
+      }
+    },
   },
   watch: {
     'tableData'(val, val1) {
@@ -914,62 +1017,73 @@ export default{
 </script>
 
 <style lang="scss" >
-.btn1 {
-  background: #909399;
-}
+.relatedPatentsTable {
+  .custom-table-header>th {
+    background: #deedff !important;
+    color: #7ba6d5 !important;
+    font-weight: 400 !important;
+  }
 
-.btn1:hover {
+  .height-row {
+    background: #f5faff !important;
+  }
 
-  background-color: #a4a7ab;
-}
+  .btn1 {
+    background: #909399;
+  }
 
-.patent-fast-edit-popover {
-  padding: 0 !important;
+  .btn1:hover {
+    background-color: #a4a7ab;
+  }
 
-  .btn {
-    color: #000;
-    line-height: 40px;
-    border-radius: 5px;
-    padding-left: 10px;
-    cursor: pointer;
+  .patent-fast-edit-popover {
+    padding: 0 !important;
 
-    &:hover {
-      background: #adadad;
-      color: #fff;
-    }
-  }
+    .btn {
+      color: #000;
+      line-height: 40px;
+      border-radius: 5px;
+      padding-left: 10px;
+      cursor: pointer;
 
-  .disabled {
-    cursor: not-allowed !important;
-  }
+      &:hover {
+        background: #adadad;
+        color: #fff;
+      }
+    }
 
-  .bottom {
-    text-align: right;
-    color: #1e9fff;
-    line-height: 40px;
-    padding-left: 10px;
-    font-size: 18px;
-  }
+    .disabled {
+      cursor: not-allowed !important;
+    }
 
-  .el-divider--horizontal {
-    margin: 10px 0 !important;
-  }
+    .bottom {
+      text-align: right;
+      color: #1e9fff;
+      line-height: 40px;
+      padding-left: 10px;
+      font-size: 18px;
+    }
 
-  .select-number {
-    .el-input {
-      width: 70px;
+    .el-divider--horizontal {
+      margin: 10px 0 !important;
     }
 
-    span {
-      padding: 0 3px;
+    .select-number {
+      .el-input {
+        width: 70px;
+      }
+
+      span {
+        padding: 0 3px;
+      }
     }
-  }
 
-}
+  }
 
-.patent-left {
-  margin-top: 69px;
-  overflow: hidden;
-  border-top: 1px solid rgb(228 231 237);
+  .patent-left {
+    margin-top: 69px;
+    overflow: hidden;
+    border-top: 1px solid rgb(228 231 237);
+  }
 }
 </style>

src/views/report/components/mixins.js

@@ -288,7 +288,7 @@ export const editContrast = {
 export const importPatent ={
   methods:{
     //专利号导入PatentNoImport、excel导入import、检索导入conditionImport
-    importPatent(type,reportId,asCompare){
+    importPatent(type, reportId, asCompare) {
       var typeList = {
         '1':'/PatentNoImport',
         '2':'/import',

src/views/report/reportDetails/components/ContrastPlan.vue

@@ -428,11 +428,9 @@ export default {
       },
       // 表格隔行变色
       tableRowClassName({ row, rowIndex }) {
-        // if (rowIndex % 2 === 0) {
-        //   return 'success-row1'
-        // } else  {
-        //   return ''
-        // }
+        if (rowIndex % 2 === 0) {
+          return 'height-row'
+        }
       },
       delPlan(id) {
         if(id){
@@ -691,7 +689,18 @@ export default {
     },
 }
 </script>
-<style>
+<style lang="scss">
+.plan{
+  .custom-table-header>th {
+    background: #deedff !important;
+    color: #7ba6d5 !important;
+    font-weight: 400 !important;
+  }
+
+  .height-row {
+    background: #f5faff !important;
+  }
+}
 .plan .el-table--enable-row-hover .el-table__body tr:hover>td{
   background-color: #ffffff !important;
 }

src/views/report/reportDetails/components/SelectedPatent.vue

@@ -1,16 +1,40 @@
 <!-- 报告详情中对比文件页面 -->
 <template>
-  <div style="">
-      <el-container>
-        <el-main style="position: relative;">
-          <div style="display:flex;flex-direction: row-reverse;align-items: center;margin-bottom:10px">
-            <div>
-              <el-tooltip class="item" effect="dark" :content="(showRight ? '隐藏' : '显示') + '右侧自定义栏位'" placement="top">
-                  <i :class="showRight ? 'el-icon-s-unfold' : 'el-icon-s-fold'" style="font-size: 25px; margin-left: 10px;color: #2f2f2f; cursor: pointer" @click="showRight = !showRight" ></i>
-              </el-tooltip>
-            </div>
-            <!-- <el-button @click="importPatent(reportId,true)" type="primary" size="small" style=" margin-left: 10px;" v-if="$reportPermission(reportId,[0,1])">导入</el-button> -->
-            <el-dropdown @command="importPatent($event,queryParams.reportId,1)" type="primary" size="small" style="margin-left:10px;" v-if="$reportPermission(queryParams.reportId,[0,1])">
+  <div style="" class="SelectedPatent">
+    <el-container>
+      <el-main style="position: relative;">
+        <div style="display:flex;justify-content: space-between;align-items: center;margin-bottom:10px">
+          <mySearch :SearchFields="searchFiled" @search="search" :searchValue="searchOption" style="padding: 0 ;"></mySearch>
+          <div style="display:flex;align-items: center;">
+            <el-dropdown split-button type="primary" size="small" @command="handleCommand($event)" @click="taskFeil">
+              <p v-if="(reportMessage.status != 3) && $reportPermission(queryParams.reportId, [0, 1])">任务分配</p>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item>
+                  <el-dropdown trigger="hover" placement="right-start">
+                    <span>
+                      专利导入<i class="el-icon-arrow-right el-icon--right"></i>
+                    </span>
+                    <el-dropdown-menu slot="dropdown">
+                      <el-dropdown-item
+                        @click.native="importPatent(1, $event, queryParams.reportId, 1)">专利号导入</el-dropdown-item>
+                      <el-dropdown-item
+                        @click.native="importPatent(2, $event, queryParams.reportId, 1)">Excel导入</el-dropdown-item>
+                      <el-dropdown-item
+                        @click.native="importPatent(3, $event, queryParams.reportId, 1)">检索导入</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                </el-dropdown-item>
+                <el-dropdown-item command="1">显示栏位管理</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+            <el-tooltip class="item" effect="dark" :content="(showRight ? '隐藏' : '显示') + '右侧自定义栏位'" placement="top">
+              <i :class="showRight ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
+                style="font-size: 25px; margin-left: 10px;color: #2f2f2f; cursor: pointer"
+                @click="showRight = !showRight"></i>
+            </el-tooltip>
+          </div>
+          <!-- <el-button @click="importPatent(reportId,true)" type="primary" size="small" style=" margin-left: 10px;" v-if="$reportPermission(reportId,[0,1])">导入</el-button> -->
+          <!-- <el-dropdown @command="importPatent($event,queryParams.reportId,1)" type="primary" size="small" style="margin-left:10px;" v-if="$reportPermission(queryParams.reportId,[0,1])">
                 <el-button type="primary" size="small" >
                   导入专利<i class="el-icon-arrow-down el-icon--right"></i>
                 </el-button>
@@ -26,60 +50,69 @@
                 <div class="btnSelected" @click="sift" style="width:80px;height:32px;right: 100px;display:flex;justify-content:space-around;border-radius:5px; cursor: pointer; ">
                   <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>
-            </div>
-          </div>
-          <customTable :height="height" :style="{height : (height-75) + 'px'}" :fieldsArr="fields"  @taskFeilParams="taskFeilParams" :reportMessage="reportMessage" :taskFeilSure="taskFeilSure" :taskSources="taskSources"  :signPatentNo="patentNo" :reportId="queryParams.reportId"  :activeName="activeName" :onChangesIn="onChangesIn" :queryParams="queryParams" :taskStatus="taskStatus" :formS="formS"></customTable>
-        </el-main>
-        <!-- <el-aside> -->
-          <div  :style="{width:showRight?'280px':'0px',height : height + 'px'}" style=" border-left:1px solid #e6e6e6;overflow: auto;">
-            <customFields :height="height" @on-change="treeFilterChange" :reportId="queryParams.reportId" :patentNo="patentNo" @onChange="onChanges" @search="search"  @onTaskStatus="onTaskStatus"></customFields>
-          </div>
-        <!-- </el-aside> -->
-      </el-container>
+            </div> -->
+        </div>
+        <customTable :height="height" :style="{ height: (height - 75) + 'px' }" :fieldsArr="fields"
+          @taskFeilParams="taskFeilParams" :reportMessage="reportMessage" :taskFeilSure="taskFeilSure"
+          :taskSources="taskSources" :signPatentNo="patentNo" :reportId="queryParams.reportId" :activeName="activeName"
+          :onChangesIn="onChangesIn" :queryParams="queryParams" :taskStatus="taskStatus" :formS="formS"></customTable>
+      </el-main>
+      <!-- <el-aside> -->
+      <div :style="{ width: showRight ? '280px' : '0px', height: height + 'px' }"
+        style=" border-left:1px solid #e6e6e6;overflow: auto;">
+        <customFields :height="height" @on-change="treeFilterChange" :reportId="queryParams.reportId" :patentNo="patentNo"
+          @onChange="onChanges" @search="searchQuery" @onTaskStatus="onTaskStatus"></customFields>
+      </div>
+      <!-- </el-aside> -->
+    </el-container>
+
+    <el-dialog title="筛选" :visible.sync="visible" width="1100px" max-height="800" :before-close="close">
+      <div>
+        <el-form ref="form" :model="form" label-width="100px" label-position="left">
+          <el-form-item label="标题">
+            <el-input type="" 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="" v-model="form.applicationName"
+              placeholder="请输入申请人查询(多个申请人查询中间请用符号“|”隔开，示例：“申请人|申请人”)"></el-input>
+          </el-form-item>
+          <el-form-item label="权利人">
+            <el-input type="" v-model="form.obligeeName"
+              placeholder="请输入权利人查询(多个权利人查询中间请用符号“|”隔开，示例：“权利人|权利人”)"></el-input>
+          </el-form-item>
+          <el-form-item label="专利号">
+            <el-input type="" v-model="form.patentNo" placeholder="请输入专利号查询(多个专利号查询中间请用符号“|”隔开，示例：“专利号|专利号”)"></el-input>
+          </el-form-item>
+          <el-form-item label="申请号">
+            <el-input type="" v-model="form.applicationNo" placeholder="请输入申请号查询"></el-input>
+          </el-form-item>
+          <el-form-item label="IPC分类号">
+            <el-input type="" v-model="form.numberIpc" placeholder="请输入IPC分类号查询"></el-input>
+          </el-form-item>
+          <el-form-item label="CPC分类号">
+            <el-input type="" v-model="form.numberCpc" placeholder="请输入CPC分类号查询"></el-input>
+          </el-form-item>
+          <el-form-item label="UPC分类号">
+            <el-input type="" v-model="form.numberUpc" placeholder="请输入UPC分类号查询"></el-input>
+          </el-form-item>
+
 
-      <el-dialog title="筛选" :visible.sync="visible" width="1100px" max-height="800" :before-close="close">
-          <div >
-            <el-form ref="form" :model="form" label-width="100px" label-position="left">
-              <el-form-item label="标题">
-                <el-input type="" 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="" v-model="form.applicationName" placeholder="请输入申请人查询(多个申请人查询中间请用符号“|”隔开，示例：“申请人|申请人”)" ></el-input>
-              </el-form-item>
-              <el-form-item label="权利人">
-                <el-input type="" v-model="form.obligeeName" placeholder="请输入权利人查询(多个权利人查询中间请用符号“|”隔开，示例：“权利人|权利人”)"></el-input>
-              </el-form-item>
-              <el-form-item label="专利号">
-                <el-input type="" v-model="form.patentNo" placeholder="请输入专利号查询(多个专利号查询中间请用符号“|”隔开，示例：“专利号|专利号”)"></el-input>
-              </el-form-item>
-              <el-form-item label="申请号">
-                <el-input type="" v-model="form.applicationNo" placeholder="请输入申请号查询"></el-input>
-              </el-form-item>
-              <el-form-item label="IPC分类号">
-                <el-input type="" v-model="form.numberIpc" placeholder="请输入IPC分类号查询"></el-input>
-              </el-form-item>
-              <el-form-item label="CPC分类号">
-                <el-input type="" v-model="form.numberCpc" placeholder="请输入CPC分类号查询"></el-input>
-              </el-form-item>
-              <el-form-item label="UPC分类号">
-                <el-input type="" v-model="form.numberUpc" placeholder="请输入UPC分类号查询"></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="sure" >确 定</el-button>
-            </div>
-      </el-dialog>
-      <!-- <el-dialog title="请求协同" :visible.sync="visibleWork" width="800px" max-height="800" :before-close="close"> -->
-        <sendCollaboration :visibleCollaborations="visibleWork" @collaboration="collaboration" :reportId="queryParams.reportId" :formS="formS" :onChangesIn="onChangesIn"></sendCollaboration>
-      <!-- </el-dialog> -->
-      <patent-view-field @close="close" @reset="getPatentViewField(true)" @update="updatePatentViewField" ref="patentViewField" />
+        </el-form>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="close">取 消</el-button>
+        <el-button type="primary" @click="sure">确 定</el-button>
+      </div>
+    </el-dialog>
+    <!-- <el-dialog title="请求协同" :visible.sync="visibleWork" width="800px" max-height="800" :before-close="close"> -->
+    <sendCollaboration :visibleCollaborations="visibleWork" @collaboration="collaboration"
+      :reportId="queryParams.reportId" :formS="formS" :onChangesIn="onChangesIn"></sendCollaboration>
+    <!-- </el-dialog> -->
+    <patent-view-field @close="close" @reset="getPatentViewField(true)" @update="updatePatentViewField"
+      ref="patentViewField" />
   </div>
 </template>
 
@@ -93,8 +126,8 @@ import PatentViewField from "@/views/product/components/relatedPatents/component
 import { PatentViewFieldJs } from "@/views/report/task/components/PatentViewField";
 
 export default {
-  props:["reportId","patentNo",'row','height'],
-  mixins:[importPatent,PatentViewFieldJs],
+  props: ["reportId", "patentNo", 'row', 'height'],
+  mixins: [importPatent, PatentViewFieldJs],
   components: {
     customTable,
     sendCollaboration,
@@ -104,26 +137,26 @@ export default {
   data() {
     return {
       form: {},
-      formS:{},
-      visible:false,
-      visibleWork:false,
+      formS: {},
+      visible: false,
+      visibleWork: false,
       activeName: 'first',
       // reportId:"",
-      signPatentNo:'',
+      signPatentNo: '',
       // tableData: [],
       // loading: false,
-      reportMessage:{},
+      reportMessage: {},
       queryParams: {
         taskId: "",
         size: "10",
         current: "1",
         total: 0,
-        tree:"",
+        tree: "",
         // type: '',
-        signPatentNo:this.patentNo,
-        reportId:this.reportId?this.reportId:this.$route.query.reportId,
-        taskStatus:"",
-        field:[],//数组，用来存放自定义字段勾选项进行筛选
+        signPatentNo: this.patentNo,
+        reportId: this.reportId ? this.reportId : this.$route.query.reportId,
+        taskStatus: "",
+        field: [],//数组，用来存放自定义字段勾选项进行筛选
       },
       onChangesIn: [],
       returnData: [],
@@ -133,7 +166,64 @@ export default {
       taskFeilSure: false,
       showRight: true,
       show: true,
-      taskSources:{},
+      taskSources: {},
+      searchFiled: [
+        {
+          label: '标题',
+          value: 'patentName',
+          type: 1,
+          placeholder: '请输入标题查询'
+        },
+        {
+          label: '摘要',
+          value: 'abstractStr',
+          type: 1,
+          placeholder: '请输入摘要查询'
+        },
+        {
+          label: '专利号',
+          value: 'patentNo',
+          type: 1,
+          placeholder: '请输入专利号查询(多个专利号查询中间请用符号“|”隔开，示例：“专利号|专利号”)'
+        },
+        {
+          label: '申请号',
+          value: 'applicationNo',
+          type: 1,
+          placeholder: '请输入申请号查询'
+        },
+        {
+          label: '申请人',
+          value: 'applicationName',
+          type: 1,
+          placeholder: '请输入申请人查询(多个申请人查询中间请用符号“|”隔开，示例：“申请人|申请人”)'
+        },
+        {
+          label: '权利人',
+          value: 'obligeeName',
+          type: 1,
+          placeholder: '请输入权利人查询(多个权利人查询中间请用符号“|”隔开，示例：“权利人|权利人”)'
+        },
+        {
+          label: 'IPC分类号',
+          value: 'numberIpc',
+          type: 1,
+          placeholder: '请输入IPC分类号查询'
+        },
+        {
+          label: 'CPC分类号',
+          value: 'numberCpc',
+          type: 1,
+          placeholder: '请输入CPC分类号查询'
+        },
+        {
+          label: 'UPC分类号',
+          value: 'numberUpc',
+          type: 1,
+          placeholder: '请输入UPC分类号查询'
+        },
+      ],
+      searchOption: {},
     }
   },
   created() {
@@ -142,18 +232,47 @@ export default {
     //接收从任务分配跳转数据
     // this.signPatentNo = this.$route.query.signPatentNo
     //console.log(this.$route.query.personId,this.row);
-    this.personId = this.$route.query.personId?this.$route.query.personId:this.$s.getSession('row').personId
-    this.reportMessage =this.row?this.row: (this.$s.getSession('row') ? this.$s.getSession('row') : this.$s.getSession('reportMessage'))
+    this.personId = this.$route.query.personId ? this.$route.query.personId : this.$s.getSession('row').personId
+    this.reportMessage = this.row ? this.row : (this.$s.getSession('row') ? this.$s.getSession('row') : this.$s.getSession('reportMessage'))
 
   },
   mounted() {
-    
+
   },
   methods: {
-    search(c){
-      this.taskSources={
-        taskSources:c.taskSources,
-        notAssignTypes:c.notAssignTypes
+    // 左侧搜索
+    search(val) {
+      var params = {}
+      if (val.length > 0) {
+        val.forEach(item => {
+          if (item.type == 3) {
+            params[item.value] = item.searchValue.map(item1 => {
+              return item1.value
+            })
+          } else {
+            params[item.value] = item.searchValue.label
+          }
+        });
+      }
+      this.searchOption = params
+      this.formS = params
+      // this.getList()
+    },
+    // 下拉菜单
+    handleCommand(ev) {
+      switch (ev) {
+        case '1':
+          this.handleFieldManage()
+          break;
+
+        default:
+          break;
+      }
+    },
+    searchQuery(c) {
+      this.taskSources = {
+        taskSources: c.taskSources,
+        notAssignTypes: c.notAssignTypes
       }
     },
     getList() { },
@@ -166,7 +285,7 @@ export default {
           patentNo: this.patentNo,
           personId: this.personId,
           reportName: this.reportMessage.name,
-          params:JSON.stringify(val),
+          params: JSON.stringify(val),
         }
       })
 
@@ -177,10 +296,10 @@ export default {
       //console.log(this.onChangesIn);
     },
     onTaskStatus(val) {
-      this.taskStatus=val
+      this.taskStatus = val
     },
     handleNodeClick(treeData) {
-        //console.log(treeData);
+      //console.log(treeData);
     },
     close() {
       this.visible = false
@@ -207,40 +326,42 @@ export default {
     // 任务分配
     taskFeil() {
       // //console.log("分配");
-      this.taskFeilSure=true
+      this.taskFeilSure = true
     },
     // 工作协同
-    taskWork() { 
+    taskWork() {
       this.visibleWork = true;
     },
-    collaboration(val) { 
-      this.visibleWork=val
+    collaboration(val) {
+      this.visibleWork = val
     },
-  
+
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .transition-box {
-    margin-bottom: 10px;
-    width: 200px;
-    height: 100px;
-    border-radius: 4px;
-    // background-color: #409EFF;
-    text-align: center;
-    color: #fff;
-    padding: 40px 20px;
-    box-sizing: border-box;
-    margin-right: 20px;
-  }
+  margin-bottom: 10px;
+  width: 200px;
+  height: 100px;
+  border-radius: 4px;
+  // background-color: #409EFF;
+  text-align: center;
+  color: #fff;
+  padding: 40px 20px;
+  box-sizing: border-box;
+  margin-right: 20px;
+}
 
-.el-header{
+.el-header {
   justify-content: end;
 }
+
 .el-header .el-form .el-form-item {
   margin-bottom: 10px !important;
 }
+
 // .el-form-item__content {
 //   margin: 10px;
 // }
@@ -254,8 +375,7 @@ export default {
 .btnSelected:hover {
   background-color: #a4a7ab;
 }
-.patent-tree-filter .patent-tree-filter-main{
-  padding: 0;
-}
 
-</style>
+.patent-tree-filter .patent-tree-filter-main {
+  padding: 0;
+}</style>

src/views/report/reportDetails/components/common/customTable.vue

@@ -3,57 +3,51 @@
     <!-- <el-button @click="fenBtn" type="primary" style="float: right;margin-bottom: 10px;">分配任务</el-button> -->
     <el-container>
       <el-main class="main" style="">
-         <el-table
-            border
-            style="width: 100%;"
-            ref="table"
-            class="table"
-            :height="height - 135"
-            :data="tableData"
-            v-loading="loading"
-            header-row-class-name="custom-table-header"
-            :default-sort="{ prop : 'date', order: 'descending' }"
-            @sort-change="sortChange">
-            <el-table-column prop="patentNo" sortable label="专利号" width="200" align="center">
-              <template slot-scope="scope">
-                <div>
-                  <el-link type="primary"  @click="toPatentDetails(scope.row.patentNo)">{{scope.row.patentNo}}</el-link>
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column prop="SysOrder" label="重要度" sortable width="100" align="center" v-if="reportMessage && [0,1,2].includes(reportMessage.type)">
-              <template slot-scope="scope">
-                <div>
-                  <span v-if="scope.row.SysOrder">D</span><span>{{ scope.row.SysOrder}}</span>
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column v-for="column in fieldsArr" :label="column.name" :key="column.key" show-overflow-tooltip align="center">
-              <template slot-scope="scope">
-                <div style="" v-for="data in getColumnValue(scope.row, column)">
-                  <template v-if="column.key === 'name'">
-                      <span v-html="getViewDom2(scope.row, 'name')"></span>
-                      <br>
-                      <el-link type="primary" @click.native="handleChange(scope.row, 'name')">
-                        <span v-if="!scope.row.change">切换译文</span>
-                        <span v-else>切换原文</span>
-                      </el-link>
-                    </template>
-                    <template v-else-if="column.key === 'abstractStr'">
-                      <span v-html="getViewDom2(scope.row, 'abstractStr')"></span>
-                      <br>
-                      <el-link type="primary" @click.native="handleChange(scope.row, 'abstractStr')">
-                        <span v-if="!scope.row.change2">切换译文</span>
-                        <span v-else>切换原文</span>
-                      </el-link>
-                    </template>
-                  <template v-else>
-                    <span v-html="getViewDom(data)"></span>
-                  </template>
-                </div>
-              </template> 
-            </el-table-column>
-            <!-- <el-table-column prop="name" sortable label="专利标题"  width="300" align="center"></el-table-column>
+        <el-table border style="width: 100%;" ref="table" class="table" :height="height - 135" :data="tableData"
+          v-loading="loading" :row-class-name="tableRowClassName" header-row-class-name="custom-table-header"
+          :default-sort="{ prop: 'date', order: 'descending' }" @sort-change="sortChange">
+          <el-table-column prop="patentNo" sortable label="专利号" width="200" align="center">
+            <template slot-scope="scope">
+              <div>
+                <el-link type="primary" @click="toPatentDetails(scope.row.patentNo)">{{ scope.row.patentNo }}</el-link>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="SysOrder" label="重要度" sortable width="100" align="center"
+            v-if="reportMessage && [0, 1, 2].includes(reportMessage.type)">
+            <template slot-scope="scope">
+              <div>
+                <span v-if="scope.row.SysOrder">D</span><span>{{ scope.row.SysOrder }}</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column v-for="column in fieldsArr" :label="column.name" :key="column.key" show-overflow-tooltip
+            align="center">
+            <template slot-scope="scope">
+              <div style="" v-for="data in getColumnValue(scope.row, column)">
+                <template v-if="column.key === 'name'">
+                  <span v-html="getViewDom2(scope.row, 'name')"></span>
+                  <br>
+                  <el-link type="primary" @click.native="handleChange(scope.row, 'name')">
+                    <span v-if="!scope.row.change">切换译文</span>
+                    <span v-else>切换原文</span>
+                  </el-link>
+                </template>
+                <template v-else-if="column.key === 'abstractStr'">
+                  <span v-html="getViewDom2(scope.row, 'abstractStr')"></span>
+                  <br>
+                  <el-link type="primary" @click.native="handleChange(scope.row, 'abstractStr')">
+                    <span v-if="!scope.row.change2">切换译文</span>
+                    <span v-else>切换原文</span>
+                  </el-link>
+                </template>
+                <template v-else>
+                  <span v-html="getViewDom(data)"></span>
+                </template>
+              </div>
+            </template>
+          </el-table-column>
+          <!-- <el-table-column prop="name" sortable label="专利标题"  width="300" align="center"></el-table-column>
             <el-table-column prop="applicationDate" sortable label="申请日"  width="150" align="center"></el-table-column>
             <el-table-column prop="publicDate" sortable label="公开日"  width="150" align="center"></el-table-column>
             <el-table-column prop="applicant" sortable label="权利人"  width="300" align="center">
@@ -63,20 +57,20 @@
                 </div>
               </template>
             </el-table-column> -->
-            <!-- <el-table-column prop="state" label="状态" sortable  align="center"></el-table-column> -->
-            <!-- <el-table-column prop="simpleStatus" label="状态" align="center" > -->
-              <!-- <template slot-scope="scope">
+          <!-- <el-table-column prop="state" label="状态" sortable  align="center"></el-table-column> -->
+          <!-- <el-table-column prop="simpleStatus" label="状态" align="center" > -->
+          <!-- <template slot-scope="scope">
                   <span>{{state[scope.row.status]}}</span>
               </template> -->
-            <!-- </el-table-column> -->
-				  </el-table>
-          
+          <!-- </el-table-column> -->
+        </el-table>
+
       </el-main>
       <el-footer class="footer" style="">
         <div style="text-align: center;">
-            <el-pagination background layout="total, prev, pager, next, jumper" :current-page.sync="queryParams.current"
-              :page-size.sync="queryParams.size" @current-change="handleCurrentChange" :total="queryParams.total">
-            </el-pagination>
+          <el-pagination background layout="total, prev, pager, next, jumper" :current-page.sync="queryParams.current"
+            :page-size.sync="queryParams.size" @current-change="handleCurrentChange" :total="queryParams.total">
+          </el-pagination>
         </div>
       </el-footer>
     </el-container>
@@ -87,32 +81,32 @@
 import { PatentDetails } from '@/views/workspace/folder/components/mixins';
 // import { Contrast } from '@/views/task/components/mixins';
 import { PatentViewFieldJs, } from "@/views/report/task/components/PatentViewField";
-import { changeTranslation, patentKeywordsHighlight} from '@/views/workspace/folder/components/mixins'
+import { changeTranslation, patentKeywordsHighlight } from '@/views/workspace/folder/components/mixins'
 export default {
-  mixins:[PatentDetails,PatentViewFieldJs,changeTranslation, patentKeywordsHighlight],
-  props:["fieldsArr","activeName","reportId","onChangesIn",'type','signPatentNo',"taskStatus","formS","taskFeilSure",'taskSources','reportMessage',"height"],//queryParams
+  mixins: [PatentDetails, PatentViewFieldJs, changeTranslation, patentKeywordsHighlight],
+  props: ["fieldsArr", "activeName", "reportId", "onChangesIn", 'type', 'signPatentNo', "taskStatus", "formS", "taskFeilSure", 'taskSources', 'reportMessage', "height"],//queryParams
   data() {
     return {
-      reportMessage1:this.reportMessage,
+      reportMessage1: this.reportMessage,
       tableData: [],
-      state:[],
+      state: [],
       loading: false,
       queryParams: {
-        signPatentNo:this.signPatentNo,
+        signPatentNo: this.signPatentNo,
         // taskId: this.taskId,
-        reportName:this.reportMessage.name,
+        reportName: this.reportMessage.name,
         reportId: this.reportId,
         applicationName: "",//申请人
         obligeeName: "",//权利人
-        patentNo:"",
-        applicationNo:"",
-        numberIpc:"",
-        numberCpc:"",
-        numberUpc:"",
-        patentName:"",
-        abstractStr:"",
+        patentNo: "",
+        applicationNo: "",
+        numberIpc: "",
+        numberCpc: "",
+        numberUpc: "",
+        patentName: "",
+        abstractStr: "",
         filedOptions: [],//数组，用来存放自定义字段勾选项进行筛选
-        taskStatus:"3",
+        taskStatus: "3",
         current: 1,
         size: 10,
         total: 0,
@@ -131,10 +125,16 @@ export default {
       return JSON.stringify(this.formS)
     }
   },
-  updated(){
+  updated() {
     this.$refs.table.doLayout()
   },
   methods: {
+    // row隔行变色
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex % 2 === 0) {
+        return 'height-row'
+      }
+    },
     //排序
     sortChange({ column, prop, order }) {
       if (!order) {
@@ -144,27 +144,31 @@ export default {
         'descending': 'desc',
         'ascending': 'asc',
       }
-      this.queryParams.orderType =  o[order]
+      this.queryParams.orderType = o[order]
       this.queryParams.orderItem = prop
-      this.queryParams.current=1
+      this.queryParams.current = 1
       this.getList()
     },
     handleCurrentChange(val) {
-      this.queryParams.current=val
+      this.queryParams.current = val
       this.getList()
     },
     getList() {
-      this.loading=true
+      this.loading = true
+      let params = {
+        ...JSON.parse(JSON.stringify(this.queryParams)),
+        ...this.formS
+      }
       // 需要根据报告id查询所有对比文件
-      this.$api.getSureCompareFile(this.queryParams).then(res => {
+      this.$api.getSureCompareFile(params).then(res => {
         // console.log(res);
         if (res.code == 200) {
-          this.queryParams.total =  res.data.total
+          this.queryParams.total = res.data.total
           this.tableData = res.data.records
-          this.loading=false
+          this.loading = false
         }
-      }).catch(error=>{
-        this.loading=false
+      }).catch(error => {
+        this.loading = false
       })
     },
     // fenBtn() {
@@ -178,12 +182,12 @@ export default {
     // }
   },
   watch: {
-    activeName(val){
-      this.queryParams.taskStatus = this.activeName=='first'?0:1
+    activeName(val) {
+      this.queryParams.taskStatus = this.activeName == 'first' ? 0 : 1
       this.getList()
     },
     onChangesIn(val) {
-      this.queryParams.filedOptions=val
+      this.queryParams.filedOptions = val
       this.getList()
     },
     taskStatus(val) {
@@ -191,11 +195,11 @@ export default {
       this.getList();
     },
     formTed(val) {
-      let value=JSON.parse(val)
-      if (Object.keys(value).length!=0) {
-        for (let key in value) {
-          this.queryParams[key]=value[key]
-        }
+      let value = JSON.parse(val)
+      if (Object.keys(value).length != 0) {
+        // for (let key in value) {
+        //   this.queryParams[key] = value[key]
+        // }
         this.getList()
       } else {
         this.getList()
@@ -203,10 +207,10 @@ export default {
     },
     taskFeilSure(val) {
       if (val) {
-        this.$emit("taskFeilParams",this.queryParams)
+        this.$emit("taskFeilParams", this.queryParams)
       }
     },
-    taskSources(val){
+    taskSources(val) {
       this.queryParams.taskSources = val.taskSources
       this.queryParams.notAssignTypes = val.notAssignTypes
       this.getList()
@@ -215,16 +219,26 @@ export default {
   }
 }
 </script>
-
 <style lang="scss">
-.customTable{
-  .el-table .cell.el-tooltip{
-    white-space: break-spaces; 
+.customTable {
+  .custom-table-header>th {
+    background: #deedff !important;
+    color: #7ba6d5 !important;
+    font-weight: 400 !important;
   }
-  .el-footer{
+
+  .height-row {
+    background: #f5faff !important;
+  }
+  .el-table .cell.el-tooltip {
+    white-space: break-spaces;
+  }
+
+  .el-footer {
     border: none;
   }
-  .el-main{
+
+  .el-main {
     padding: 0px;
   }
 }

src/views/report/reportDetails/components/reportFile.vue

@@ -1,272 +1,297 @@
 <template>
+  <div>
     <div>
-      <div>
-        <el-container class="project-file">
-          <el-header>
-            <el-form :inline="true" class="project-file-header-form">
-              <el-form-item label="名称">
-                <el-input v-model="queryParams.fileName" size="small" placeholder="请输入文件名称"></el-input>
-              </el-form-item>
-              <el-form-item>
-                <el-button type="" size="small" @click="getList">查询</el-button>
-                <el-button type="primary" size="small" @click="handleAdd()" v-if="$reportPermission(reportId,[0,1])">新增</el-button>
-              </el-form-item>
-            </el-form>
-          </el-header>
-          <el-main class="project-file-main">
-            <el-table v-loading="loading" :data="tableData" border header-row-class-name="custom-table-header">
-              <el-table-column type="index" label="#" width="55" align="center"></el-table-column>
-              <el-table-column prop="name" label="名称" align="center" show-overflow-tooltip>
-                <template slot-scope="scope" v-if="scope.row.reportFiles">
-                  <div>
-                    <span>{{scope.row.name}}</span>
-                  </div>
-                </template>
-              </el-table-column>
-              <el-table-column prop="suffix" label="类型" align="center" show-overflow-tooltip>
-                <template slot-scope="scope" v-if="scope.row.reportFiles">
-                  <div>
-                    <span>{{scope.row.reportFiles[0].suffix}}</span>
-                  </div>
-                </template>
-              </el-table-column>
-              <el-table-column prop="reportName" label="所属报告" align="center" show-overflow-tooltip></el-table-column>
-              <el-table-column prop="personName" label="创建人" align="center" show-overflow-tooltip></el-table-column>
-              <el-table-column prop="creationTime" label="创建时间" align="center" show-overflow-tooltip>
-                <template slot-scope="scope">
-                  <span>{{ scope.row.creationTime }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip></el-table-column>
-              <el-table-column label="操作" align="center" width="150">
-                <template slot-scope="scope">
-                  <el-dropdown  split-button type="primary" size="small" >
-                    <!-- <P @click="handleEdit(scope.row)" v-if="type == 0 ? $permission('/workspace/project/other_accessories/add')&&$r(projectId,[1,2]) :$permission('/workspace/project/report_manage/modify')&&$r(projectId,[1,2])">编辑</P> -->
-                    <!-- <P v-else :disabled="true">编辑</P> -->
-                    <P @click="handleEdit(scope.row)">编辑</P>
-  
-                    <el-dropdown-menu slot="dropdown" class="text-align_center">
-                      <el-dropdown-item @click.native="handleDownload(scope.row)" >下载</el-dropdown-item>
-                      <el-dropdown-item @click.native="preview(scope.row.reportFiles[0])" >预览</el-dropdown-item>
-                      <el-dropdown-item divided class="color-red" @click.native="handleDelete(scope.row)" >删除</el-dropdown-item>
-                    </el-dropdown-menu>
-                  </el-dropdown>
-                  <!-- <el-button  size="small" type="primary" @click="handleDownload(scope.row)">下载</el-button> -->
-                </template>
-              </el-table-column>
-            </el-table>
-            <div class="pagination">
-              <el-pagination :current-page.sync="queryParams.current" :page-size="queryParams.size" :total="total" @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper" background></el-pagination>
-            </div>
-          </el-main>
-        </el-container>
-      </div>
-  
-      <el-dialog :title="title" :visible.sync="dialogVisible" width="500px" append-to-body destroy-on-close :before-close="cancel">
-        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" label-position="left">
-          <el-form-item label="文件名称" prop="name">
-            <el-input v-model="ruleForm.name" placeholder="请输入文件名称"></el-input>
-          </el-form-item>
-          <el-form-item label="文件选择" class="margin-bottom_0" required>
-            <el-upload class="upload-file" drag action="#" :auto-upload="false" :show-file-list="false" :on-change="onChange">
-              <i :class="!ruleForm.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 v-model="ruleForm.remark" placeholder="请输入备注" type="textarea"></el-input>
-          </el-form-item>
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-          <el-button @click="cancel">取 消</el-button>
-          <el-button type="primary" @click="submit" :loading="btnLoading">确 定</el-button>
-        </div>
-      </el-dialog>
+      <el-container class="project-file">
+        <el-header>
+          <el-form :inline="true" class="project-file-header-form">
+            <el-form-item label="名称">
+              <el-input v-model="queryParams.fileName" size="small" placeholder="请输入文件名称"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="" size="small" @click="getList">查询</el-button>
+              <el-button type="primary" size="small" @click="handleAdd()"
+                v-if="$reportPermission(reportId, [0, 1])">新增</el-button>
+            </el-form-item>
+          </el-form>
+        </el-header>
+        <el-main class="project-file-main">
+          <el-table v-loading="loading" :data="tableData" border :row-class-name="tableRowClassName" header-row-class-name="custom-table-header">
+            <el-table-column type="index" label="#" width="55" align="center"></el-table-column>
+            <el-table-column prop="name" label="名称" align="center" show-overflow-tooltip>
+              <template slot-scope="scope" v-if="scope.row.reportFiles">
+                <div>
+                  <span>{{ scope.row.name }}</span>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="suffix" label="类型" align="center" show-overflow-tooltip>
+              <template slot-scope="scope" v-if="scope.row.reportFiles">
+                <div>
+                  <span>{{ scope.row.reportFiles[0].suffix }}</span>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="reportName" label="所属报告" align="center" show-overflow-tooltip></el-table-column>
+            <el-table-column prop="personName" label="创建人" align="center" show-overflow-tooltip></el-table-column>
+            <el-table-column prop="creationTime" label="创建时间" align="center" show-overflow-tooltip>
+              <template slot-scope="scope">
+                <span>{{ scope.row.creationTime }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip></el-table-column>
+            <el-table-column label="操作" align="center" width="150">
+              <template slot-scope="scope">
+                <el-dropdown split-button type="primary" size="small">
+                  <!-- <P @click="handleEdit(scope.row)" v-if="type == 0 ? $permission('/workspace/project/other_accessories/add')&&$r(projectId,[1,2]) :$permission('/workspace/project/report_manage/modify')&&$r(projectId,[1,2])">编辑</P> -->
+                  <!-- <P v-else :disabled="true">编辑</P> -->
+                  <P @click="handleEdit(scope.row)">编辑</P>
+
+                  <el-dropdown-menu slot="dropdown" class="text-align_center">
+                    <el-dropdown-item @click.native="handleDownload(scope.row)">下载</el-dropdown-item>
+                    <el-dropdown-item @click.native="preview(scope.row.reportFiles[0])">预览</el-dropdown-item>
+                    <el-dropdown-item divided class="color-red"
+                      @click.native="handleDelete(scope.row)">删除</el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+                <!-- <el-button  size="small" type="primary" @click="handleDownload(scope.row)">下载</el-button> -->
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="pagination">
+            <el-pagination :current-page.sync="queryParams.current" :page-size="queryParams.size" :total="total"
+              @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper" background></el-pagination>
+          </div>
+        </el-main>
+      </el-container>
     </div>
+
+    <el-dialog :title="title" :visible.sync="dialogVisible" width="500px" append-to-body destroy-on-close
+      :before-close="cancel">
+      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" label-position="left">
+        <el-form-item label="文件名称" prop="name">
+          <el-input v-model="ruleForm.name" placeholder="请输入文件名称"></el-input>
+        </el-form-item>
+        <el-form-item label="文件选择" class="margin-bottom_0" required>
+          <el-upload class="upload-file" drag action="#" :auto-upload="false" :show-file-list="false"
+            :on-change="onChange">
+            <i :class="!ruleForm.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 v-model="ruleForm.remark" placeholder="请输入备注" type="textarea"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="submit" :loading="btnLoading">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
   
 <script>
 import { downLoad2 } from "@/utils";
-import {File} from '@/views/workspace/components/menu/mixins'
+import { File } from '@/views/workspace/components/menu/mixins'
 export default {
   props: ['reportId2'],
-  mixins:[File],
-    data() {
-      return {
-        type:this.reportId2?this.reportId2: 0,
-        reportId:this.reportId2?this.reportId2: 0,
-        drawer: false,
-        loading: false,
-        btnLoading: false,
-        total: 0,
-        tableData: [],
-        queryParams: {
-          fileName: '',
-          type: this.reportId2?this.reportId2: 0,
-          size: 10,
-          current: 1,
-          reportID: this.reportId2?this.reportId2: 0,
-          order: 'desc'
-        },
-        title: '',
-        dialogVisible: false,
-        ruleForm: {},
-        rules: {
-          name: [{ required: true, message: '请输入文件名称', trigger: 'blur' },],
-        },
-        file:null
+  mixins: [File],
+  data() {
+    return {
+      type: this.reportId2 ? this.reportId2 : 0,
+      reportId: this.reportId2 ? this.reportId2 : 0,
+      drawer: false,
+      loading: false,
+      btnLoading: false,
+      total: 0,
+      tableData: [],
+      queryParams: {
+        fileName: '',
+        type: this.reportId2 ? this.reportId2 : 0,
+        size: 10,
+        current: 1,
+        reportID: this.reportId2 ? this.reportId2 : 0,
+        order: 'desc'
+      },
+      title: '',
+      dialogVisible: false,
+      ruleForm: {},
+      rules: {
+        name: [{ required: true, message: '请输入文件名称', trigger: 'blur' },],
+      },
+      file: null
+    }
+  },
+  watch: {
+
+  },
+  computed: {
+
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    // row隔行变色
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex % 2 === 0) {
+        return 'height-row'
       }
     },
-    watch:{
- 
+    close() {
+      this.drawer = false
+      this.$emit('close')
     },
-    computed: {
-  
+    open(id, type) {
+      this.type = type
+      this.reportId = id
+      this.queryParams.reportID = id
+      this.queryParams.type = type
+      this.drawer = true
+      this.getList()
     },
-    mounted() {
-        this.getList()
+    onChange(file, fileList) {
+      this.$set(this.ruleForm, 'name', file.name.substring(0, file.name.lastIndexOf(".")))
+      // this.$set(this.ruleForm, 'file', file.raw)
+      this.file = file.raw
     },
-    methods: {
-      close() {
-        this.drawer = false
-        this.$emit('close')
-      },
-      open(id, type) {
-        this.type = type
-        this.reportId = id
-        this.queryParams.reportID = id
-        this.queryParams.type = type
-        this.drawer = true
-        this.getList()
-      },
-      onChange(file, fileList) {
-        this.$set(this.ruleForm, 'name', file.name.substring(0, file.name.lastIndexOf(".")))
-        // this.$set(this.ruleForm, 'file', file.raw)
-        this.file = file.raw
-      },
-      getList() {
+    getList() {
+      this.loading = true
+      this.$api.CheckReportFileList(this.queryParams).then(response => {
+        this.tableData = response.data.records
+        this.total = response.data.total
+        this.loading = false
+      }).catch(error => {
+        this.loading = false
+      })
+    },
+    handleCurrentChange(val) {
+      this.queryParams.current = val;
+      this.getList();
+    },
+    cancel() {
+      this.$set(this.ruleForm, 'fileName', '')
+      this.file = null
+      // this.$set(this.ruleForm, 'file', null)
+      this.$set(this.ruleForm, 'remark', '')
+      this.$set(this.ruleForm, 'type', this.type)
+      this.$set(this.ruleForm, 'id', null)
+      this.$set(this.ruleForm, 'name', '')
+      this.dialogVisible = false
+    },
+    handleAdd() {
+      this.title = '新增'
+      this.$set(this.ruleForm, 'type', this.type)
+      this.dialogVisible = true
+    },
+    handleEdit(row) {
+      this.title = '编辑'
+      if (row.reportFiles) {
+        // row.name = row.reportFiles[0].name
+      } else {
+        row.name = ''
+      }
+      this.dialogVisible = true
+      this.ruleForm = { ...row }
+    },
+    handleDownload(row) {
+      downLoad2(row.reportFiles[0].url)
+    },
+    submit() {
+      if (!this.ruleForm.id && !this.file) {
+        this.$message.error('请选择文件')
+        return false
+      }
+
+      // formData.append('reportId', this.reportId)
+      // formData.append('name', this.ruleForm.name)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          let formData = new FormData()
+          if (this.file) {
+            formData.append('files', this.file)
+          }
+          this.ruleForm.reportID = this.reportId
+          formData.append('jsons', JSON.stringify(this.ruleForm))
+          // formData.append('type', this.ruleForm.type)
+          this.btnLoading = true
+          if (this.ruleForm.id) {
+            // formData.append('id', this.ruleForm.id)
+            // formData.append('url', this.ruleForm.url)
+            this.$api.EditReportFileList(formData).then(response => {
+              this.$message.success('编辑成功')
+              this.btnLoading = false
+              this.getList()
+              this.cancel()
+            }).catch(error => {
+              this.btnLoading = false
+            })
+          } else {
+            this.$api.AddReportFileList(formData).then(response => {
+              this.$message.success('新增成功')
+              this.btnLoading = false
+              this.getList()
+              this.cancel()
+            }).catch(error => {
+              this.btnLoading = false
+            })
+          }
+        }
+      })
+    },
+    handleDelete(row) {
+      this.$confirm('确认删除本条数据吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
         this.loading = true
-        this.$api.CheckReportFileList(this.queryParams).then(response => {
-          this.tableData = response.data.records
-          this.total = response.data.total
+        this.$api.DeleteReportFileList({ id: row.id }).then(response => {
+          this.$message.success('删除成功')
           this.loading = false
+          this.getList()
         }).catch(error => {
           this.loading = false
         })
-      },
-      handleCurrentChange(val) {
-        this.queryParams.current = val;
-        this.getList();
-      },
-      cancel() {
-        this.$set(this.ruleForm, 'fileName', '')
-        this.file = null
-        // this.$set(this.ruleForm, 'file', null)
-        this.$set(this.ruleForm, 'remark', '')
-        this.$set(this.ruleForm, 'type', this.type)
-        this.$set(this.ruleForm, 'id', null)
-        this.$set(this.ruleForm, 'name', '')
-        this.dialogVisible = false
-      },
-      handleAdd() {
-        this.title = '新增'
-        this.$set(this.ruleForm, 'type', this.type)
-        this.dialogVisible = true
-      },
-      handleEdit(row) {
-        this.title = '编辑'
-        if(row.reportFiles){
-          // row.name = row.reportFiles[0].name
-        }else{
-          row.name = ''
-        }
-        this.dialogVisible = true
-        this.ruleForm = { ...row }
-      },
-      handleDownload(row) {
-        downLoad2(row.reportFiles[0].url)
-      },
-      submit() {
-        if (!this.ruleForm.id && !this.file) {
-          this.$message.error('请选择文件')
-          return false
-        }
-        
-        // formData.append('reportId', this.reportId)
-        // formData.append('name', this.ruleForm.name)
-        this.$refs.ruleForm.validate((valid) => { 
-          if (valid) {
-            let formData = new FormData()
-            if (this.file) {
-              formData.append('files', this.file)
-            }
-            this.ruleForm.reportID = this.reportId
-            formData.append('jsons', JSON.stringify(this.ruleForm))
-            // formData.append('type', this.ruleForm.type)
-            this.btnLoading = true
-            if (this.ruleForm.id) {
-              // formData.append('id', this.ruleForm.id)
-              // formData.append('url', this.ruleForm.url)
-              this.$api.EditReportFileList(formData).then(response => {
-                this.$message.success('编辑成功')
-                this.btnLoading = false
-                this.getList()
-                this.cancel()
-              }).catch(error => {
-                this.btnLoading = false
-              })
-            } else {
-              this.$api.AddReportFileList(formData).then(response => {
-                this.$message.success('新增成功')
-                this.btnLoading = false
-                this.getList()
-                this.cancel()
-              }).catch(error => {
-                this.btnLoading = false
-              })
-            }
-          }
-        })
-      },
-      handleDelete(row) {
-        this.$confirm('确认删除本条数据吗？', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          this.loading = true
-          this.$api.DeleteReportFileList({ id: row.id }).then(response => {
-            this.$message.success('删除成功')
-            this.loading = false
-            this.getList()
-          }).catch(error => {
-            this.loading = false
-          })
-        })
-      }
+      })
     }
   }
-  </script>
+}
+</script>
   
-  <style lang="scss">
-  .project-file {
-    height: 100%;
-    .margin-bottom_0 {
-      margin-bottom: 0 !important;
-    }
-    .pagination {
-      text-align: center;
-      margin: 20px 0;
-    }
-    .project-file-header-form {
-      margin-left: 20px;
-    }
-    .project-file-main {
-      background: #fff;
-      padding: 5px 20px;
-      margin-top: 20px;
-    }
+<style lang="scss">
+.project-file {
+  height: 100%;
+
+  .custom-table-header>th {
+    background: #deedff !important;
+    color: #7ba6d5 !important;
+    font-weight: 400 !important;
+  }
+
+  .height-row {
+    background: #f5faff !important;
+  }
+
+  .margin-bottom_0 {
+    margin-bottom: 0 !important;
+  }
+
+  .pagination {
+    text-align: center;
+    margin: 20px 0;
+  }
+
+  .project-file-header-form {
+    margin-left: 20px;
+  }
+
+  .project-file-main {
+    background: #fff;
+    padding: 5px 20px;
+    margin-top: 20px;
   }
-  </style>
+}
+</style>
   

src/views/report/reportDetails/components/taskDetails.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 权限管理确认  任务：我处理的 -->
-  <div style="padding:20px">
+  <div style="padding:20px" class="taskDetails">
     <el-form :inline="true">
       <el-form-item style="width: 150px;">
         <el-select v-model="query" size="small">
@@ -8,21 +8,22 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <template v-if="query!='type'">
-          <el-input v-model="queryParams[query]" clearable size="small" :placeholder="query=='taskName'?'请输入任务名称':'请输入发起人名称'"></el-input>
+        <template v-if="query != 'type'">
+          <el-input v-model="queryParams[query]" clearable size="small"
+            :placeholder="query == 'taskName' ? '请输入任务名称' : '请输入发起人名称'"></el-input>
         </template>
         <template v-else>
           <el-select clearable v-model="queryParams[query]" size="small" placeholder="请选择任务类型">
-            <el-option v-for="(item,key) in reportType" :key="key" :label="item" :value="key"></el-option>
+            <el-option v-for="(item, key) in reportType" :key="key" :label="item" :value="key"></el-option>
           </el-select>
         </template>
-			</el-form-item>
-			<el-form-item>
-				<el-button type="primary" size="small" @click="getList">查询</el-button>
-			</el-form-item> 
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" size="small" @click="getList">查询</el-button>
+      </el-form-item>
     </el-form>
     <!-- 序号/任务名称/创建人/创建时间/状态/完成时间/操作 -->
-    <el-table border style="width: 100%;" :data="tableData" v-loading="loading"
+    <el-table border style="width: 100%;" :data="tableData" v-loading="loading" :row-class-name="tableRowClassName"
       header-row-class-name="custom-table-header" :default-sort="{ prop: 'date', order: 'descending' }">
       <el-table-column prop="id" type="index" label="序号" width="100" align="center"></el-table-column>
       <el-table-column prop="taskName" label="任务名称" width="230" align="center">
@@ -63,11 +64,7 @@
       <el-table-column prop="result" label="结果" sortable align="center">
         <template slot-scope="scope">
           <div v-if="scope.row.type == 0">
-            <span
-              v-if="btnObj.filter(item => { return item.value == scope.row.result }).length > 0">{{ btnObj.filter(item => {
-                return
-                item.value == scope.row.result
-              })[0].label }}</span>
+            <span v-if="btnObj.filter(item => { return item.value == scope.row.result }).length > 0">{{ btnObj.filter(item => { return item.value == scope.row.result })[0].label }}</span>
           </div>
           <div v-else>
             {{ status[scope.row.taskStatus] }}
@@ -98,9 +95,9 @@ export default {
       // ],
       query: 'taskName',
       queryOption: [
-        {value:'taskName',label:'名称'},
-        {value:'handlePersonName',label:'处理人'},
-        {value:'type',label:'类型'},
+        { value: 'taskName', label: '名称' },
+        { value: 'handlePersonName', label: '处理人' },
+        { value: 'type', label: '类型' },
       ],
       tableData: [],
       form: [],
@@ -172,6 +169,12 @@ export default {
     this.getList()
   },
   methods: {
+    // row隔行变色
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex % 2 === 0) {
+        return 'height-row'
+      }
+    },
     //查询任务
     getList() {
       this.loading = true
@@ -328,4 +331,16 @@ export default {
 };
 </script>
   
-<style lang="scss" scoped></style>
+<style lang="scss" >
+.taskDetails{
+  .custom-table-header>th {
+    background: #deedff !important;
+    color: #7ba6d5 !important;
+    font-weight: 400 !important;
+  }
+
+  .height-row {
+    background: #f5faff !important;
+  }
+}
+</style>