daikins/.svn/pristine/15/15214af1113413515527b3aa9e449dc8850b29a8.svn-base

<script setup lang="ts">
import HomeHead from '@/views/home/components/HomeHead.vue'
import { useDate } from '@/views/home/hooks/useDate'
import { updateFootprint,getFootprintList,saveFootprintUser,delFootprint} from '@/api/daikin/base'
import {useMessage} from 'naive-ui' 
const { day, week } = useDate()
const { push } = useRouter()
const message = useMessage()
const pageInfo = reactive({
    currentPage: 1,
    pageSize: 4,
    total:10
})





const listData = ref()
async function getPageList(){
    const {rows,total} =  await getFootprintList({pageNum:pageInfo.currentPage,pageSize:pageInfo.pageSize,moduleId:'1'});
    pageInfo.total =total

      listData.value  =   rows



}



const handleSizeChange=(e)=>{
  console.log(e)
}

const handleCurrentChange=(e)=>{
  console.log(e)
}
const lazyState = computed(() => [pageInfo.currentPage])
  watch(
    () => unref(lazyState),
    async (v) => {
      getPageList()
    },
    { immediate: true, deep: true },
  )
const back=()=>{
  history.back()
}
const srcType = ref()
const openUrl = async (url)=>{

    if(!url) {
        message.info("没有可预览文件！")
        return
    }
    srcType.value = getLastSubstring(url)
    if(['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx','pdf'].includes(srcType.value)){
        // src.value = filePath
        // pdfShow.value = true
        url='https://view.xdocin.com/view?src='+url
     const screenWidth = window.screen.width;
    const screenHeight = window.screen.height;
      window.open(url, '', 'width=' + screenWidth + ',height=' + screenHeight + ',top=' + 0 + ',left=' + 0)
    }
    else{
        message.error("文件格式不是 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx','pdf'！")
    }

}
function getLastSubstring(str: string): string {
  const lastIndex = str.lastIndexOf('.');
  if (lastIndex !== -1) {
    return str.substring(lastIndex + 1);
  } else {
    return '';
  }
}

const toDetail = (obj)=>{
console.log(obj)
if (obj.isSelect === 2) {
    message.info("没有访问权限")
    return
  }
  else{
    openUrl(obj.filePath.url)
  }
}
const redFrd=(ite)=>{
  // console.log(ite)
  const {url} = ite
  openUrl(url)
}
const down=(ite)=>{
  const {url} = ite
  window.open(url)
}
</script>

<template>
    <HomeHead class="tops">

    </HomeHead>
    <div class="backs" @click="back">返回</div>

    <div class="h-90% relative flex flex-col">
        <div class="font-600 flex items-end mt30px text-#fff">
            <div class="text-36px">列表</div>
            <div class="text-18px ml40px mr25px">{{ day }}</div>
            <div class="text-18px">{{ week }}</div>
        </div>
       <div class="q-wrapper flex-1 mt30px  text-#142142 flex flex-col  bg-#fff p30px">


            <!--  <div v-if="listData&&listData.length>0" v-for="i in listData" :key="i"
                class="mt8px cursor-pointer flex items-center p15px pl20px text-18px  max-w-1205px">
             
                  <span class="truncate  flex-1 w0  text-#142142 hover:underline w600px max-w600px min-w600px" @click="toDetail(i)">
                    <img :src="i.imgUrl" class="max-w200px mr20px"/>
                    <a class="no-underline text-#142142">
                    {{ i.title }}
                    </a>
                  </span>
               
                <span class="shrink-0 ml90px text-#808696 w-200px">{{ i.createTime }}</span>
            </div>
            <div  v-else class="w-full h-hull">
                <el-empty :image-size="200" />
            </div> -->
            <el-table :data="listData" style="width: 100%; margin-bottom: 20px" row-key="id" border
                        default-expand-all :header-cell-style="{textAlign: 'center',
                            background: '#2A7BF7', color: '#fff',
                            height: '60px', 'font-size': '24px'
                        }" :cell-style="{  'overflow-y': 'auto' }" 
                        :tree-props="{ children: 'childList', hasChildren: 'hasChildren'}">
                        <el-table-column prop="title" label="标题"  align="center"/>
                        <el-table-column prop="imgUrl" label="图片"  align="center">
                            <template #default="scope">
                                <div   style="display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: masonry;grid-gap: 2px;">
                                    <img v-if="scope.row.imgUrl" v-for="i in scope.row.imgUrl" :src="i.url" alt=""  class="w-full">
                                </div>
                               
                            </template>
                            
                        </el-table-column>
                        <el-table-column prop="filePath" label="文件列表"  align="center">
                            <template #default="scope">
                              
                                <span v-if="scope.row.filePath" v-for="i in scope.row.filePath" class="flex py5px"> 
                                  <img src="../../../assets/images/lvbiao@2x.png" class="mr-5px w-20px"/>
                                  <span class="truncate">{{i.originalFileName}}</span>
                                  <span class="py3px px-10px rd-5px bg-#2A7BF7 text-#fff" @click="redFrd(i)">预览</span>
                                  <!-- <span class="py3px px-10px rd-5px bg-#2A7BF7 text-#fff ml-5px" @click="down(i)">下载</span> -->
                                  <br>
                                </span>
                            </template>
                        </el-table-column>
              </el-table>

        </div>



        <div class="float-right absolute bottom-20px right-30px">
                <el-pagination v-model:current-page="pageInfo.currentPage" v-model:page-size="pageInfo.pageSize" 
                  layout="prev, pager, next, jumper" :total="pageInfo.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
              </div>
    </div>
</template>

<style scoped lang="less">
.backs{
  position: absolute;
  top: 25px;
  left: 25px;
  color: #fff;
  // z-index: 500;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  justify-content: center;
}
.truncate {
  display: block;
  max-width: 226px;
  min-width:250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.tops {
    right: 30px;
    top: -92px;
}

::-webkit-scrollbar {
    width: 1px;
}

.q-wrapper {
    border-radius: 18px;
    border: 1px solid #E7EBF5;
    box-shadow: inset 1px 2px 12px rgba(14, 86, 221, 0.32);
    overflow: auto;
    &::after {
    content: ' ';
    background-image: url('@/assets/images/bg-card.svg');
    pointer-events: none;
    display: block;
    width: 100%;
    height: 127px;
    background-repeat: no-repeat; /* 阻止图片平铺 */
    background-position: right top;
    position: absolute;
    left: 0;
    top: 0;
  }
}</style>