xiaoshi_system/src/views/components/patent/components/customFields.vue

<template>
  <div class="patent-tree-filter">
    <el-container>
      <el-header class="patent-query-filter-header">
        <!-- 已读、未读、全部 -->
        <div class="query-read-status" style="margin: 0px 5px 0px 5px;" v-for="(item, key) in readList" :key="key"
          :class="{ 'query-read-status_is-active': readStatus[key].value == returnData.read }"
          @click="handleReadQuery(readStatus[key].value)">
          <span class="a">(<span class="b">{{ item }}</span>)</span>
          <span class="c">{{ readStatus[key].label }}</span>
        </div>
      </el-header>
      <el-main class="patent-tree-filter-main">
        <template v-if="field.length > 0">
          <el-collapse v-model="activeNames" @change="handleChange" style="margin: 0px 5px 0px 5px;">
            <el-collapse-item v-for="item in field" :title="item.name" :name="item.id" :key="item.id"
              v-if="sourceQuery[item.id] && item.type != 2">
              <div class="patent-query-filter-search">
                <div class="patent-query-filter-search-input">
                  <el-input v-if="item.type != 6" v-model="sourceQuery[item.id].name" size="small"
                    placeholder="请输入查询内容"></el-input>
                  <div v-else-if="!item.type" class="year-data-picker">
                    <el-date-picker clear-icon size="small" v-model="sourceQuery[item.id].datePicker[0]" type="year"
                      value-format="yyyy" placeholder="请选择时间"></el-date-picker>
                    <span style="margin: 5px;">至</span>
                    <el-date-picker clear-icon size="small" v-model="sourceQuery[item.id].datePicker[1]" type="year"
                      value-format="yyyy" placeholder="请选择时间"></el-date-picker>
                  </div>
                </div>
                <el-button v-if="item.type != 6" @click="handleSearch(item)" size="small" type="primary"
                  icon="el-icon-search" circle></el-button>
              </div>
              <el-checkbox-group v-if="item.type != 6" v-model="sourceQuery[item.id].checked" @change="onChange(item.id)">
                <div class="source-checkbox">
                  <el-checkbox v-for="source in sourceData[item.id]" :label="source.key" :key="source.id">
                    <span class="source-checkbox-label" :title="source.label">{{ source.label }}</span>
                    <span class="source-checkbox-count">({{ source.count }})</span>
                  </el-checkbox>
                </div>
              </el-checkbox-group>

              <el-tree v-else @check-change="onChangeTree" :ref="item.id" :data="item.option" show-checkbox node-key="id"
                check-strictly default-expand-all>
                <div class="custom-filter-tree-node" slot-scope="{ node, data }">
                  <span class="name">{{ data.name }}</span>
                  <span class="total">({{ getCount(item.id, data.id) }})</span>
                </div>
              </el-tree>

              <div class="patent-query-filter-search-bottom" v-if="item.type != 6">
                <el-button type="success" size="small" @click="handleSelectAll(item)">全选</el-button>
                <el-button type="danger" size="small" @click="handleSelectCancel(item)">取消</el-button>
                <el-button v-if="!sourceQuery[item.id].isEnd" type="primary" size="small" @click="handleLoadMore(item)"
                  :loading="sourceQuery[item.id].loading">加载更多</el-button>
                <span v-else></span>
              </div>
            </el-collapse-item>

          </el-collapse>
        </template>

        <template v-else>
          <div class="no-data">暂无数据</div>
        </template>
      </el-main>
    </el-container>
  </div>
</template>

<script>
// import { patentQueryMixins } from "@/views/task/components/mixins";
// import { getTreeLastChildren, getTreeDataList } from "@/utils";

export default {
  // mixins: [patentQueryMixins],
  // props:["reportId","taskId","isHidden"],
  data() {
    return {
      // isHidden: true,// 是都显示已读、未读、全部
      readList: [],//已读未读全部
      activeNames: '',//展示哪一个面板
      // 已读未读状态信息
      readStatus: {
        all: {
          label: "全部",
          value:"3"
        },
        read:  {
          label: "已读",
          value:"1"
        },
        noRead:  {
          label: "未读",
          value:"0"
        },
      },  
      sourceQuery: [],
      // 分页信息
      queryParams: {
        current: 1,
        size: 10,
        total: 0,
      },
    }
  },
  watch: {

  },
  mounted() {

  },
  methods: {
    // 加载更多
    handleLoadMore(){},
    // 全选
    handleSelectAll(){},
    // 取消
    handleSelectCancel(){},
    // 点击节点发生的变化
    onChangeTree(val){},
    // 点击面版
    handleChange(val){},
    // 点击已读、未读、全部
    handleReadQuery(val) { },

  }
}
</script>

<style lang="scss">
.patent-tree-filter {
  height: 100%;

  .patent-tree-filter-main {
    height: 100%;
    padding: 10px 0;

    .no-data {
      text-align: center;
      color: #6b6868;
    }
  }

  .change-show-type {
    font-size: 13px;

    .change-show-type-info {
      color: #6b6868;
      padding-left: 10px;
    }

    .el-form-item__label {
      padding: 0 !important;
      line-height: 20px;
    }

    .el-form-item__content {
      height: 30px;
      line-height: 30px;
    }
  }
}

.patent-query-filter-search {
  display: flex;
}

.patent-query-filter-search-input {
  margin-right: 5px;
}

.patent-query-filter-search-bottom {
  text-align: center;
  margin-top: 10px;
}

.year-data-picker {
  width: 200px;
  display: flex;
  justify-content: space-between;

  .el-input__prefix {
    display: none;
  }

  .el-input__inner {
    padding: 10px;
    text-align: center;
  }
}

.year-data-input {
  width: 100px;
}

.source-checkbox {
  margin-top: 10px;

  span {
    display: inline-block;
    font-size: 13px;
  }

  .el-checkbox {
    display: block;
  }

  .el-checkbox__label {
    position: relative;
    top: 5px;
  }

  .source-checkbox-count {
    color: #409EFF;
    position: relative;
    top: -4px;
    left: 10px;
  }

  .source-checkbox-label {
    max-width: 190px;
    padding-left: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.query-read-status {
  font-size: 12px;
  height: 25px;
  line-height: 25px;
  cursor: pointer;
  background: #dcdcdc;
  border-radius: 3px;
  padding: 0 5px;

  span {
    display: inline-block;
  }

  .a {}

  .b {
    text-align: center;
    width: 30px;
  }

  .c {
    padding-left: 5px;
  }
}

.query-read-status_is-active {
  background: #409EFF !important;
  color: #ffffff !important;
}
</style>