xiaoshi_system/src/views/project/patentDetails/components/patentMessage/pageProduct.vue

<template>
  <div class="height_100">
    <el-container>
        <el-header>
            <div id="step1">
                <mySearch style="width: 500px" :SearchFields="searchFiled" @search="search" :searchValue="searchOption"></mySearch>
            </div>
        </el-header>
        <el-main v-DivHeight="getDivHeight">
            <el-table :data="data" header-row-class-name="custom-table-header"  v-if="showTable" :maxHeight="tableHeight" @sort-change="sortChange" border>
                <el-table-column label="#" width="60" type="index" align="center">
                    <template slot-scope="scope">
                    <span>{{ (scope.$index + 1) + ((queryParams.current - 1) * queryParams.size) }}</span>
                    </template>
                </el-table-column>

                <el-table-column v-for="item in column" :render-header="$commonJS.renderHeaderMethods" :key="item.value" :prop="item.value" :label="item.name" align="center" sortable="custom">
                    <template slot-scope="scope">
                    <div v-if="['name'].includes(item.value)">
                        <el-link @click="handleItem(scope.row, '2')" type="primary">
                        <span  v-html="$commonJS.getColumnData(scope.row, item)"></span>
                        </el-link>
                    </div>
                    <div v-else v-html="$commonJS.getColumnData(scope.row, item)">
                    </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="150px">
                    <template slot-scope="scope">
                    <el-dropdown split-button type="primary" size="small" @click="handleCommand('0', scope.row)"
                        @command="handleCommand($event, scope.row)">
                        <span>编 辑</span>
                        <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 command="3">产品的营销数据</el-dropdown-item>
                        <el-dropdown-item command="4">营销数据的趋势图</el-dropdown-item>
                        <el-dropdown-item command="5">专利布局可视化</el-dropdown-item>
                        <el-dropdown-item command="6">商品化专利</el-dropdown-item>
                        <el-dropdown-item command="7" divided style="color:red">删 除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    </template>
                </el-table-column>
                </el-table>
        </el-main>
        <el-footer class="pagination">
            <el-pagination background layout="total,sizes, prev, pager, next, jumper" :current-page.sync="queryParams.current" :page-size.sync="queryParams.size" @current-change="handleCurrentChange" :total="total">
            </el-pagination>
        </el-footer>
    </el-container>
    <marketing ref="marketing"></marketing>
    <addEditProduct ref="addEditProduct" @getMessage="getList"></addEditProduct>
    <myImageViewer v-if="showImg" :on-close="closeViewer" :src="imgSrc"></myImageViewer>
  </div>
</template>

<script>
import { getTableHeight } from '@/views/components/mixins'
import mixins from '@/views/product/components/mixins/index'
import fun from '@/views/product/components/mixins/fun'
import product from '@/views/product/components/mixins/product'

import marketing from '@/views/product/components/dialog/marketing.vue'
import addEditProduct from '@/views/product/components/dialog/addEditProduct.vue'
export default {
  components: {
    marketing,
    addEditProduct
  },
  props: {
    patentNo:{}
  },
  mixins:[getTableHeight,mixins,fun,product],
  data() {
    return {
        showTable:true,
        column:[
          {
            value:'name',
            type:'String',
            name:'类别名称'
          },
          {
            value:'marketTime',
            type:'DateTime',
            name:'上市时间'
          },
          {
            value:'companyName',
            type:'String',
            name:'所属公司'
          },
          {
            value:'licenseRate',
            type:'String',
            name:'许可费率'
          },
          {
            value:'description',
            type:'String',
            name:'产品说明'
          },
          {
            value:'createName',
            type:'String',
            name:'创建人'
          },
          {
            value:'createTime',
            type:'DataTime',
            name:'创建时间'
          },
        ],
        searchFiled:[],
        //检索条件
        searchOption: {},
        queryParams:{
            size:10,
            current:1
        },
        total:0,
        tableData:[],
        // 排序数组
        sort: [
            {
            "orderBy": "createTime",
            "orderType": 1
            }
        ],
    };
  },
  watch: {
    patentNo(){
        this.getList()
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.getList()
  },
  methods: {
    //获取检索条件检索
    search(val) {
        let params = {}
        if(val.length>0){
            val.forEach(item => {
                if (item.type == 3) {
                    params[item.value]=item.searchValue.map(itemValue => {
                    return itemValue.value
                    })
                } else {
                    params[item.value]=item.searchValue.label
                }
            })
        }
        this.searchOption = this.$commonJS.ArrayToArray(val)
        this.queryParams.current = 1
        this.getList()
    },
    getList(){

    },
    handleCurrentChange(val){
        this.queryParams.current = val
        this.getList()
    },
    async handleCommand( option, row ){
        if(!(await this.$permission.producePermission(row.id,2))){
            this.$showPermissionDialog()
            return false
        }
        switch (option) {
            case '0'://编辑
                this.$refs.addEditProduct.open(row)
            break;
            case '1'://预览图片
                this.checkImage(row)
            break;
            case '2'://产品架构
                this.toFramework(row,2)
            break;
            case '3'://产品的营销数据
                this.$refs.marketing.open(row)
            break;
            case '4'://产品的营销数据趋势图
                this.showTrend(row,2)
            break;
            case '5'://专利布局可视化

            break;
            case '6'://商品化专利
                this.toCommodity(row)
            break;
            case '7'://删除产品
                this.deletes(row)
            break;
            
            default:
            break;
        }
    },
    // 排序方法
    sortChange({ column, prop, order }) {
      //如需要多个字段排序，则不需要清空
      var params = {
        sort:this.sort,
        column,
        prop,
        order,
      }
      this.sort = this.$commonJS.getSortData(params)
      this.getList()
    },
  },
};
</script>
<style lang="scss" scoped>
</style>