weiyuan-document-web/src/views/reception/list1/index.vue

<template>
  <div class="list1">
    <el-page-header class="header" @back="$router.replace('/index')" :content="type+'：共搜索到'+total+'条'">
    </el-page-header>

    <div class="container">
      <el-skeleton animated :loading="loading">
        <template #template>
          <div class="list">
            <div class="list__item" v-for="i in 8" :key="i">
              <el-skeleton-item class="list__item--name" variant="text" style="height: 36px;margin-right: 40px;"></el-skeleton-item>
              <div class="list__item--btn">预览</div>
            </div>
          </div>
        </template>
        <template>
          <div>
            <div class="list" v-if="list.length > 0">
              <div class="list__item" v-for="i in list" :key="i.id">
                <div class="list__item--pre" v-if="$route.query.leixing == 5">{{i.wenjian}}【{{i.nianfen}}】{{i.bianhao}}号</div>
                <div class="list__item--name">{{i.biaoti}}</div>
                <div class="list__item--date">{{ $moment(new Date(i.created_at)).format('YYYY-MM-DD') }}</div>
                <el-dropdown trigger="click" placement="bottom-start" @command="open">
                  <div class="list__item--btn" @click="getDetail(i)">预览</div>
                  <template #dropdown>
                    <el-dropdown-menu v-if="load">
                      <div style="width: 100px;position: relative;height: 60px;">
                        <Spin fix></Spin>
                      </div>
                    </el-dropdown-menu>
                    <el-dropdown-menu v-else>
                      <template v-if="uploadsList.length > 0">
                        <el-dropdown-item :command="item" v-for="item in uploadsList">
                          {{ item.name }}
                        </el-dropdown-item>
                      </template>
                      <template v-else>
                        <el-dropdown-item disabled>
                          暂无内容
                        </el-dropdown-item>
                      </template>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
                <div class="list__item--download">
                  <el-dropdown trigger="click" placement="bottom-start" @command="down">
                    <i class="el-icon-download"  @click="getDetail(i)"></i>
                    <template #dropdown>
                      <el-dropdown-menu v-if="load">
                        <div style="width: 100px;position: relative;height: 60px;">
                          <Spin fix></Spin>
                        </div>
                      </el-dropdown-menu>
                      <el-dropdown-menu v-else>
                        <template v-if="uploadsList.length > 0">
                          <el-dropdown-item :command="item" v-for="item in uploadsList">
                            {{ item.name }}
                          </el-dropdown-item>
                        </template>
                        <template v-else>
                          <el-dropdown-item disabled>
                            暂无内容
                          </el-dropdown-item>
                        </template>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
            </div>

            <el-empty v-else :image-size="200"></el-empty>
          </div>
        </template>
      </el-skeleton>

      <el-pagination
        class="page"
        background
        layout="prev, pager, next"
        :page-size.sync="select.page_size"
        :total="total"
        :current-page.sync="select.page"
        @current-change="e => {
          select.page = e
          getMaterial()
        }">
      </el-pagination>
    </div>

    <Modal
      :width="76"
      transfer
      :z-index="6000"
      v-model="showModal"
      :footer-hide="true"
      title="预览">
      <template>
        <iframe style="width: 100%;height: 57vh;" :src="codeUri" border="0"></iframe>
      </template>
    </Modal>
  </div>
</template>

<script>
import { download } from '@/utils/downloadRequest'
import { materials, detail } from "@/api/reception"
export default {
  data() {
    return {
      codeUri: '',
      showModal: false,
      loading: false,
      select: {
        keyword: '',
        page: 1,
        leixing: '',
        jianshu: '',
        page_size: 10,
        table_name: 'materials',
        tag_id: '',
        dept_id: '',
        sort_name: '',
        sort_type: 'desc',
      },
      list: [],
      total: 0,

      load: false,
      uploadsList: [],
    }
  },
  methods: {
    async getMaterial () {
      this.loading = true
      const res = await materials(this.select)
      this.total = res.tags.total
      this.list = res.tags.data
      this.loading = false
    },

    async getDetail (i) {
      this.load = true
      const res = await detail({
        table_name: 'materials',
        id: i.id
      })
      this.uploadsList = res.detail?.id_material_fujian_uploads_material_id_relation || []
      this.load = false
    },

    open (e) {
      this.codeUri =  `http://view.ali251.langye.net:8012/onlinePreview?url=${encodeURIComponent(new Buffer(e.url).toString('base64'))}`

      this.showModal = true
      //window.open(`http://view.ali251.langye.net:8012/onlinePreview?url=${codeUri}`)
    },
    down (e) {
      download (e.url, 'get', {}, e.name)
    }
  },
  computed: {
    type () {
      if (this.select.leixing == 1) {
        return '流程文件'
      }
      if (this.select.leixing == 2) {
        return '表单文件'
      }
      if (this.select.leixing == 3) {
        return '岗位工作及标准'
      }
      if (this.select.leixing == 4) {
        return '部门工作职责'
      }
      if (this.select.leixing == 5) {
        return '规章制度管理'
      }
      return '全部文件'
    }
  },
  watch: {
    "$route.query": {
      handler (newVal) {
        this.select.page = 1;
        this.select.leixing = newVal.leixing;
        this.select.keyword = newVal.keyword;
        this.select.sort_name = newVal.sort_name;
        this.select.jianshu = newVal.jianshu;
        this.getMaterial()
      },
      deep: true
    }
  },
  created() {
    this.select.page = 1;
    let { leixing, keyword , tag_id, dept_id, sort_name, jianshu } = this.$route.query
    this.select.leixing = leixing;
    this.select.keyword = keyword;
    this.select.tag_id = tag_id;
    this.select.dept_id = dept_id;
    this.select.sort_name = sort_name;
    this.select.jianshu = jianshu;
    this.getMaterial()
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-page-header__content {
  font-size: 15px;
}
.list1 {
  background: #f8f8f8;

  padding: 31px 18.75%;
}
.header {
  background: #fff;
  box-shadow: 0 0 15px 0 rgba(130,127,126,0.1);

  padding: 16px 23px 16px 22px;
  margin-bottom: 20px;
}
.container {
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 15px 0 rgba(130,127,126,0.1);

  padding: 24px 23px 44px 22px;

}
.list {

  &__item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #F8F8F8;

    padding: 11px 9px 11px 27px;
    position: relative;

    &--pre {
      font-size: 13px;
      font-weight: 500;
      color: #398AC9;

      padding-right: 10px;
      position: relative;

      &::after {
        content:'';
        width: 2px;
        background: #398AC9;

        position: absolute;
        top: 2px;
        bottom: 2px;
        right: -1px;
      }
    }
    &::before {
      content: '';
      height: 6px;
      width: 6px;
      border-radius: 6px;
      background: #cad8e4;

      transform: translateY(-50%);
      position: absolute;
      left: 0;
      top: 50%;
    }
    &--name {
      font-size: 13px;
      color: #333;
      flex: 1;

      padding-left: 10px;
    }
    &--date {
      font-size: 13px;
      color: #999999;

      margin-right: 42px;
    }
    &--btn {
      cursor: pointer;
      font-size: 13px;
      color: #247EC3;
      border-radius: 30px;
      border: 1px solid #247EC3;
      transition: all .2s;

      padding: 7px 17px;
      margin-right: 23px;

      &:hover {
        color: #fff;
        background: #247EC3;
      }
    }
    &--download {
      cursor: pointer;
      & > i{
        font-size: 16px;
        color: #247EC3;
      }

      padding-right: 9px;
    }
  }
}

.page {
  display: flex;
  justify-content: center;

  margin-top: 30px;

  & ::v-deep .btn-prev, ::v-deep .btn-next ,::v-deep .el-pager > li {
    width: 39px;
    height: 39px;
    line-height: 39px;
    text-align: center;
    border-radius: 100px;
    background: #fff;
    transition: all .2s;
  }

  & ::v-deep .btn-prev, ::v-deep .btn-next {
    background: #fff;
    border: 1px solid #e7e7e7;
  }
}
</style>