laws_weilai/jero-web/src/views/documentTools/searchCenter/components/whole.vue

<template>
  <div class="box">
    <div class="search-text-title">
      <span>检索范围：</span>
      <span>{{ queryParam.selectValue }}</span>
    </div>
    <a-checkbox-group v-model="checkboxText" v-if="conList.length > 0">
      <li v-for="(item,index) in conList" :key="index">
        <div style="margin-bottom: 10px;position: relative">
          <a-checkbox :value="item.id" class="checkbox-left"></a-checkbox>
          <div class="text-text-right"
               @click="checkedClick(item)"
               :class="{ 'null-input':item.checked }">
            <div class="text-header">
              <span :title="item.module_type">{{item.module_type}}</span>
              <span :title="item.serial_number">{{item.serial_number}}</span>
              <span :title="item.title">{{item.title}}</span>
            </div>
            <div class="text-content" :title="item.content" v-html="item.content" v-if="!queryParam.selectValue">

            </div>
            <div class="text-content" :title="item.content" v-html="item.content"
                 v-else-if="(item.file_text instanceof Array) && queryParam.selectValue">

            </div>
            <div class="text-content" :title="item.content" v-html="item.content"
                 v-else-if="!item.file_text && queryParam.selectValue">

            </div>
            <div class="text-content" :title="item.file_text" v-html="item.file_text" v-else>

            </div>
          </div>
        </div>
      </li>
    </a-checkbox-group>
    <div class="noData" v-else>
      暂无数据
    </div>
    <div class="page" v-if="conList.length > 0">
      <a-pagination
        :show-total="total => $t('total')+` ${total} `+$t('strip')"
        show-quick-jumper
        show-size-changer
        :page-size.sync="pageSize"
        :total="total"
        @change="pageOnChange"
        @showSizeChange="SizeChange"
      />
    </div>
  </div>
</template>

<script>
  import { getAction, postAction, downloadFile } from '@/api/manage'

  export default {
    name: 'whole',
    data() {
      return {
        checkboxText: [],
        url: {
          getInfoList: 'search/document/getFullTextInfoList'
        },
        conList: [],
        total: 0,
        pageSize: 10,
        pageNo: 1,
        loading: false,
        queryParam: {}
      }
    },
    watch: {
      checkboxText: function(value) {
        this.conList.forEach(val => {
          val.checked = false
        })
        if (value.length > 0) {
          this.conList.forEach(val => {
            value.forEach(res => {
              if (res === val.id) {
                val.checked = true
              }
            })
          })
        }
        this.conList = [...this.conList]
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      checkedClick(item) {
        if (item.checked) {
          this.checkboxText = this.checkboxText.filter(res => {
            return res !== item.id
          })
        } else {
          this.checkboxText.push(item.id)
        }
      },
      pageOnChange(page, pageSize) {
        this.pageNo = page
      },
      SizeChange(page, pageSize) {
        this.pageNo = 1
        this.pageSize = pageSize
      },
      searchData(value) {
        this.queryParam.selectValue = value || undefined
        this.queryParam.selectValueTwo = undefined
        this.getList()
      },
      searchDataTwo(value) {
        this.queryParam.selectValueTwo = value
        this.getList()
      },
      getList() {
        let queryParam = JSON.parse(JSON.stringify(this.queryParam))
        Object.keys(queryParam).forEach(val => {
          if (queryParam[val] instanceof Array) {
            queryParam[val] = queryParam[val].join(',')
          }
        })
        let query = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          ...queryParam
        }
        postAction(this.url.getInfoList, query).then((res) => {
          if (res.success) {
            this.conList = res.result.records
            this.total = res.result.total
            this.loading = false
          } else {
            this.loading = false
          }
        })
      }
    }
  }
</script>
<style>
  .highlight-class {
    color: #21c9cc;
  }
</style>
<style scoped lang="less">
  .box {
    padding: 0 0 0 18px;
    box-sizing: border-box;
  }

  .checkbox-left {
    float: left;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .text-text-right {
    padding: 19px 28px;
    box-sizing: border-box;
    margin-left: 38px;
  }

  .null-input {
    background-color: #F2F4F8;
  }

  .search-text-title {
    margin-bottom: 22px;
  }

  .text-header {
    margin-bottom: 11px;

    span {
      margin-right: 52px;
      font-size: 16px;
      font-weight: bold;
      color: #040B29;
      display: inline-block;
      max-width: 200px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }

  .text-content {
    font-size: 14px;
    font-weight: 400;
    color: #040B29;
    opacity: 0.7;
  }

  .page {
    text-align: right;
    margin-top: 20px;
  }

  .noData {
    width: 100%;
    text-align: center;
    line-height: 10;
  }
</style>