xiaoshi_system/src/views/report/components/patentList/patentList.vue

<template>
  <div class="height_100">
    <div class="height_100" style="display:flex">
      <div class="height_100" :style="{width:showRight?'calc( 100% - 300px )':'100%'}">
        <el-container>
          <el-header style="padding:0 10px !important;">
            <div id="step1">
              <mySearch style="width:500px" :SearchFields="searchFiled" @search="search" :searchValue="searchOption">
              </mySearch>
            </div>
            <div style="display:flex;align-items:center">
              <el-dropdown id="step4" trigger="click" split-button type="primary" size="small" @click="handleFieldManage"
                @command="handleCommand($event)">
                <span v-disabled="false">显示栏位管理</span>
                <el-dropdown-menu slot="dropdown" class="text-align_center">
                  <el-dropdown-item command="1">任务分配</el-dropdown-item>
                  <el-dropdown-item>
                    <el-dropdown trigger="hover" placement="right-start" @command="handleCommand($event)">
                      <p>导入专利<i class="el-icon-arrow-right el-icon--right"></i></p>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="2">专利号导入</el-dropdown-item>
                        <el-dropdown-item command="3">Excel导入</el-dropdown-item>
                        <el-dropdown-item command="4">检索导入</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <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>
            </div>
          </el-header>
          <el-main class="height_100" style="width: 100%;">
            <component :is='components' :tableData="tableData" :column="fieldList" :projectId="projectId"
              @on-sort="handleSort" :queryParams="queryParams"></component>
          </el-main>
          <el-footer class="pagination">
            <el-pagination background layout="total, sizes, prev, pager, next, jumper"
              :current-page.sync="queryParams.current" :page-sizes="sizeArr" :page-size.sync="queryParams.size"
              @current-change="handleCurrentChange" @size-change="getList" :total="total">
            </el-pagination>
          </el-footer>
        </el-container>
      </div>
      <div class="height_100 right" v-if="showRight" :style="{'min-width':showRight?'300px':'0px'}">
        <customFields :projectId="projectId"></customFields>
      </div>
    </div>


    <field ref="field" type="patentProject" @getFieldList="getFieldList"></field>
  </div>
</template>

<script>
import field from '@/views/components/dialog/fields.vue';
import PatentTableListView from '@/views/project/patentCollection/components/views/Table.vue'
import customFields from '../patentListTask/components/customFields.vue';
export default {
  components: {
    field,
    PatentTableListView,
    customFields,
  },
  props: {
    projectId: {
      default: 0
    }
  },
  data() {
    return {
      //显示组件
      components: 'PatentTableListView',
      //显示右侧
      showRight: false,
      //检索字段
      searchFiled: [],
      //检索条件
      searchOption: {},
      //专利数据库数据总数
      total: 0,
      //分页信息
      queryParams: {
        size: 10,
        current: 1,
      },
      //页大小
      sizeArr: [10, 20, 30, 40, 50, 100],
      //排序
      sort: [
        {
          "orderBy": "createTime",
          "orderType": 1
        }
      ],
      //专利列表
      tableData: [],
      //显示栏位
      fieldList: []
    };
  },
  watch: {},
  computed: {},
  created() { },
  async mounted() {
    this.fieldList = await this.$commonJS.getCustomField('patent')
    this.getList()
  },
  methods: {
    // 搜索
    search() {
      let params = {}
      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 = params
      // 调用查询接口
      this.queryParams.current = 1
      this.getList()
    },
    //获取专利列表
    getList() {
      let params = {
        ...this.queryParams,//分页信息
        projectId: this.projectId,
        searchQuery: this.$commonJS.objectToString(this.searchOption),//检索条件
        orderDTOList: this.sort,//排序信息
      }
      this.$api.QueryPatent(params).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.data
          this.total = res.data.total
        }
      }).catch(error => {
        this.tableData = []
        this.total = 0
      })
    },
    //排序
    handleSort({ column, prop, order }) {
      //如需要多个字段排序，则不需要清空
      var params = {
        sort: this.sort,
        column,
        prop,
        order,
      }
      this.sort = this.$commonJS.getSortData(params)
      this.queryParams.current = 1
      this.getList()
    },
    //分页
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getList();
    },
    //下拉按钮
    handleCommand(option) {
      switch (option) {
        case '1'://分配任务
          this.toAllocationTask()
          break;
        case '2'://专利号导入
          this.patentImport(1)
          break;
        case '3'://excel导入
          this.patentImport(2)
          break;
        case '4'://检索导入
          this.patentImport(4)
          break;
      }
    },
    // 去分配任务页面
    toAllocationTask() {
      this.$router.push({
        path: '/allocationTask',
        query: {
          projectId: this.projectId,
        }
      })
    },
    //专利导入
    patentImport(type) {
      var form = {
        importToId: this.projectId,
        importToType: 1,
        type: type,
      }
      this.$commonJS.toImportParent(form, type)
    },
    //显示栏位管理
    handleFieldManage() {
      this.$refs.field.open(this.fieldList)
    },
    //获取自定义栏位
    getFieldList(data) {
      this.fieldList = data
    },
  },
};
</script>
<style lang="scss" scoped>
.left {
  width: 100%
}

.right {
  width: 100%
}
</style>