laws_weilai/jero-web/src/views/businessSupport/problemKnowledgeBase/components/problemKnowledgeBaseRelease.vue

<template>
  <div class="doc-detail">
    <div class="doc-detail-wrap">
      <div class="doc-detail-header" style="position: fixed;top: 0">
        <div class="doc-detail-title">
           <span style="line-height: 66px;display: inline-block;float: left">
             <a-icon type="arrow-left" style="margin-right: 6px;"/>
           </span>
          {{$t('managePublishing')}}
        </div>
      </div>
      <div style="padding-top: 68px;background: #fff">
        <div class="detail-content" style="padding: 30px">
          <div v-if="conList.length > 0" style="height: calc(100vh - 180px);overflow:auto;">
            <div v-for="(item,index) in conList" :key="item.id">
              <div style="margin-bottom: 10px;position: relative">
                <!--          <a-checkbox :value="item.id" class="checkbox-left"></a-checkbox>-->
                <div class="text-text-right"
                     :class="{ 'null-input':item.checked }">
                  <div class="text-header" @click="titleClick(item)">
                    <a-tooltip placement="topLeft" :mouseEnterDelay="0.5">
                      <template slot="title">
                        <span v-html="item.module_type"></span>
                      </template>
                      <span class="text-header-text" style="cursor: pointer" v-html="item.module_type"></span>
                      <template slot="title">
                        <span v-html="item.serial_number"></span>
                      </template>
                      <span style="cursor: pointer"
                            class="text-header-text"
                            v-html="item.serial_number"></span>
                      <template slot="title">
                        <span v-html="item.title"></span>
                      </template>
                      <span class="text-header-text" style="cursor: pointer" v-html="item.title"></span>
                      <template slot="title">
                        <span v-html="item.file_name"></span>
                      </template>
                      <span class="text-header-text" style="cursor: pointer" v-html="item.file_name"></span>
                    </a-tooltip>
                    <a-tooltip placement="topLeft" :mouseEnterDelay="0.5">
                    </a-tooltip>
                  </div>
                  <a-tooltip placement="topLeft" :mouseEnterDelay="0.5">
                    <template slot="title">
                      <span v-html="item.content"></span>
                    </template>
                    <div class="text-content" v-html="item.content">
                    </div>
                  </a-tooltip>
                </div>
              </div>
            </div>
          </div>
          <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"
              :current="pageNo"
              @change="pageOnChange"
              @showSizeChange="SizeChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

  export default {
    name: 'problemKnowledgeBaseRelease',
    data() {
      return {
        checkboxText: [],
        conList: [],
        total: 0,
        pageSize: 10,
        downLoadFileUrl: window._CONFIG['domianPreviewURL'] + '/sys/common/download',
        pageNo: 1,
        url: {
          getInfoList: 'search/document/getFullTextInfoList'
        }
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      pageOnChange(page, pageSize) {
        this.pageNo = page
        this.getList()
      },
      SizeChange(page, pageSize) {
        this.pageNo = 1
        this.pageSize = pageSize
        this.getList()
      },
      getList() {
        let query = {
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }
        postAction(this.url.getInfoList, query).then((res) => {
          if (res.success) {
            this.conList = res.result.records
            this.total = res.result.total
          } else {
            this.conList = []
          }
        })
      },
      titleClick(item) {
        let newUrl = this.$router.resolve({
          path: '/docManage/library/detail',
          query: {
            id: item.id.slice(0, 32),
            title: item.title,
            serial_number: item.serial_number
          }
        })
        window.open(newUrl.href, '_blank')
      }
    }
  }
</script>

<style scoped lang="less">
  @import '~@assets/less/common.less';

  .doc-detail {
    background: #fff;
    height: 100%;

    .doc-detail-wrap {
      .doc-detail-header {
        width: 100%;
        height: 68px;
        line-height: 68px;
        padding: 0 0 0 32px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        border-bottom: 2px #eff1f3 solid;
        z-index: 1000;
        background: #fff;

        .doc-detail-title {
          display: inline-block;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          font-size: 20px;
          font-weight: 400;
          color: #040B29;
          line-height: 68px;
        }

        .doc-detail-right {
          width: 800px;
          line-height: 68px;
          display: flex;

          .doc-detail-btn {
            margin-left: 10px;
          }
        }
      }

      .content-box {
        padding: 0 32px;
        box-sizing: border-box;
      }

      .header-text {
        font-size: 16px;
        font-weight: 400;
        height: 80px;
        color: #000F16;
        line-height: 80px;
      }

      .processBackground-text {
        font-size: 16px;
        color: #000F16;
      }
    }
  }

  .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 0;
    box-sizing: border-box;
    /*margin-left: 38px;*/
  }

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

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

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

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

    /*span {*/
    /*  margin-right: 52px;*/
    /*  font-size: 16px;*/
    /*  font-weight: bold;*/
    /*  color: #040B29;*/
    /*  display: inline-block;*/
    /*  max-width: 500px;*/
    /*  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>