visualization-design/src/views/components/common/ProjectModal.vue

<template>
   <t-dialog
      v-model:visible="props.visible"
      :header="title[props.type]"
      class="project-dialog"
      :width="700"
      @close="close"
      @confirm="confirm"
    >
      <div class="flex box-list"  style="flex-wrap:wrap;justify-content: flex-start;">
          <template v-if="replaceDialog.list?.length">
            <div class="box" :class="{active:replaceDialog.select?.id===_item.id}" @click="selectScene(_item)" v-for="_item in replaceDialog.list">
              <div class="box-img">
                <img :src="_item.image"></img>
              </div>
              <div class="item-title" :title="_item.name">{{_item.name}}</div>
            </div>
          </template>
          <template v-else >
             <div class="item-title" style="height:50px;">
               {{$t('暂无数据')}}
             </div>
          </template>
        </div>
      <t-pagination :pageSizeOptions="[15,30,60]" :total="replaceDialog.total"  v-model="replaceDialog.current" :pageSize="replaceDialog.pageSize" @change="pageChange" />
    </t-dialog>
</template>

<script lang='ts' setup>
import { reactive,defineComponent,ref, onMounted, watch } from 'vue';
import { getCollectionList } from '@/services/api';

const props = defineProps<{
  visible: boolean;
  type: string;
}>();
const emit = defineEmits(['update:visible', 'change']);

function close() {
  emit('update:visible', false);
}

const replaceDialog = reactive<any>({
  list:[],
  current:1,
  pageSize:15,
  total:0,
  collection:'v',
  select:{

  }
});

const title = {
  template:'模版列表',
  c:'选择组件'
}

watch(()=>props.visible,(val)=>{
  if(val){
    getList(props.type);
  }
})

const getList = async(e?:string) => {
   let collection = e;
   if(!collection){
     collection = replaceDialog.collection;
   }else{
    replaceDialog.collection = e;
    replaceDialog.current = 1;
   }
   const data = {
      template:false,
      projection: 'name,image,id',
   };

   if(collection === 'template'){
     collection = 'v';
     data.template = true;
   }
  
  const config = {
    params: {
      current: replaceDialog.current,
      pageSize: replaceDialog.pageSize,
    },
  };
  //2.请求所有图纸/组件数据
  const res: any = await getCollectionList(collection, data, config);
  replaceDialog.list = res.list;
  replaceDialog.total = res.total;
}

const pageChange = (e) => {
  replaceDialog.current = e.current;
  replaceDialog.pageSize = e.pageSize;
  getList();
}

const confirm = () => {
  emit('change',replaceDialog.select);
}

const selectScene = (_item) => {
  replaceDialog.select = _item;
}
</script>
<style lang='postcss' scoped>
  .box-list{
       flex-wrap: wrap;
       padding:8px;
       margin-bottom:12px;
       background-color: var(--color-background-active);
       overflow:scroll;
       max-height:375px;
       min-height: 350px;
      .box{
        width:125px;
        height:110px;
        padding:8px;
        .box-img{
          width:100%;
          height:70px;
        }
        /* .title{
          text-align:center; 
           white-space: nowrap;
           overflow: hidden;
           text-overflow:ellipsis;
           font-size:12px;
           color: var(--td-text-color-secondary);
        } */
        &:hover{
          border-radius: 4px;
          border:1px solid var(--color-primary);
        }
      }

      .item-title{
        text-align:center; 
        white-space: nowrap;
        overflow: hidden;
        text-overflow:ellipsis;
        font-size:12px;
        color: var(--td-text-color-secondary);
      }
      .active{
        border-radius: 4px;
        border:1px solid var(--color-primary);
      }
    }
</style>