赋能场景

front/src/views/home/components/CanAssignCase.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="box">
+    <div class="CanCase">
+      <div
+        class="caseBox"
+        v-for="(item, index) in caseList"
+        :key="index"
+        @click="toView('details', item)"
+      >
+        <a-image
+          :preview="false"
+          :src="
+            item.fuseAttrList.filter((val) => val.attrType == '服务图片')[0]
+              .attrValue
+          "
+        />
+        <h3>{{ item.name }}</h3>
+        <p>发布时间 {{ item.updateDate }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { ref, onMounted, onBeforeUnmount } from 'vue'
+  import { defineProps } from 'vue'
+
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  const props = defineProps({
+    resourceList: {
+      type: Object,
+      default: () => {},
+    },
+    resourceTotal: {
+      type: String,
+      default: '0',
+    },
+    selectCardsname: {
+      type: String,
+      default: '组件服务',
+    },
+  })
+  const caseList = ref([])
+
+  onMounted(() => {
+    caseList.value = props.resourceList.data
+    console.log(caseList.value, 'caseList.value')
+  })
+  onBeforeUnmount(() => {})
+  function toView(type, item) {
+    router.push({
+      path: '/integrationServicesDetails',
+      query: {
+        id: item.id,
+      },
+    })
+  }
+</script>
+<style lang="less" scoped>
+  .box {
+    .CanCase {
+      margin-top: 0.2rem;
+      display: grid;
+      grid-template-columns: 33.33% 33.33% 33.33%;
+      align-items: center;
+      justify-items: center;
+      .caseBox {
+        width: 3.5rem;
+        height: 3rem;
+        box-shadow: 1px 1px 5px 5px rgba(222, 222, 222, 0.152);
+        background: #ffffff;
+        border-radius: 0.05rem;
+        padding: 0.2rem;
+        margin-bottom: 0.2rem;
+        cursor: pointer;
+        img {
+          width: 3rem;
+          height: 1.8rem;
+        }
+        h3 {
+          font-size: 0.18rem;
+          font-weight: bold;
+          margin-top: 0.1rem;
+        }
+        p {
+          font-size: 0.16rem;
+          color: #797979;
+        }
+      }
+    }
+  }
+</style>

front/src/views/home/integrationServices.vue

@@ -5,36 +5,71 @@
     <div class="top">
       <div class="top-title">
         全部：
-        <div v-for="(item, index) in titleName" :key="index" class="tabAll" @click="changeCards(index)"
-          :class="{ sel: index == number }">
+        <div
+          v-for="(item, index) in titleName"
+          :key="index"
+          class="tabAll"
+          @click="changeCards(index)"
+          :class="{ sel: index == number }"
+        >
           <span>{{ item.name }}</span>
         </div>
       </div>
-      <div class="resultListSearchInput-father">
+      <div class="resultListSearchInput-father" v-if="number === 0">
         <div class="resultListSearchInput-son">
           模糊搜索
-          <a-input-search v-model:value="searchValue" placeholder="请输入关键词" enter-button="搜索" size="large"
-            @search="getAppResources" @change="onSearch" class="resultListSearchInput" />
+          <a-input-search
+            v-model:value="searchValue"
+            placeholder="请输入关键词"
+            enter-button="搜索"
+            size="large"
+            @search="getAppResources"
+            @change="onSearch"
+            class="resultListSearchInput"
+          />
           <button class="button-reset" @click="chongzhi()">重置</button>
           <div class="hengxian"></div>
         </div>
       </div>
       <div v-loading="loadingData">
-        <searchResultList v-show="resourceList.data && resourceList.data.length > 0" :key="listKey2"
-          :resourceList="resourceList" :resourceTotal="resourceTotal"
-          :selectCardsname="number == 0 ? '融合服务' : '赋能场景'" />
+        <searchResultList
+          v-if="number === 0"
+          v-show="resourceList.data && resourceList.data.length > 0"
+          :key="listKey2"
+          :resourceList="resourceList"
+          :resourceTotal="resourceTotal"
+          :selectCardsname="number == 0 ? '融合服务' : '赋能场景'"
+        />
+        <CanAssignCase
+          v-else
+          v-show="resourceList.data && resourceList.data.length > 0"
+          :key="listKey2"
+          :resourceList="resourceList"
+          :resourceTotal="resourceTotal"
+          :selectCardsname="number == 0 ? '融合服务' : '赋能场景'"
+        />
         <div class="pagination">
-          <a-pagination v-if="resourceList.data && resourceList.data.length > 0" v-model:current="currentPage"
-            v-model:pageSize="currentPageSize" show-size-changer show-less-items show-quick-jumper
-            :total="resourceTotal" :page-size-options="pageSizeOptions" @change="pageChange"
-            @showSizeChange="onShowSizeChange" />
+          <a-pagination
+            v-if="resourceList.data && resourceList.data.length > 0"
+            v-model:current="currentPage"
+            v-model:pageSize="currentPageSize"
+            show-size-changer
+            show-less-items
+            show-quick-jumper
+            :total="resourceTotal"
+            :page-size-options="pageSizeOptions"
+            @change="pageChange"
+            @showSizeChange="onShowSizeChange"
+          />
         </div>
-        <div v-if="resourceList.data && resourceList.data.length <= 0" style="margin-top: 2rem">
+        <div
+          v-if="resourceList.data && resourceList.data.length <= 0"
+          style="margin-top: 2rem"
+        >
           <a-empty />
         </div>
       </div>
     </div>
-
   </div>
   <home-footer></home-footer>
 </template>
@@ -47,6 +82,7 @@ import { getIntegrationServicesList } from '@/api/home.js'
   import { useRouter } from 'vue-router'
   import HomeHeader from '@/views/home/components/header'
   import searchResultList from '@/views/home/components/searchResultList.vue'
+  import CanAssignCase from '@/views/home/components/CanAssignCase.vue'
   import { message } from 'ant-design-vue'
 
   export default defineComponent({
@@ -126,8 +162,8 @@ export default defineComponent({
 
       // 获取融合服务列表
       const getIntegrationList = () => {
-      loadingData.value = true;
-      console.log('获取融合服务列表------------>');
+        loadingData.value = true
+        console.log('获取融合服务列表------------>')
         let postData = {
           limit: currentPageSize.value,
           page: currentPage.value,
@@ -138,17 +174,17 @@ export default defineComponent({
         }
         getIntegrationServicesList(postData).then(
           (res) => {
-          loadingData.value = false;
+            loadingData.value = false
             if (res.data.code !== 0) {
               return message.error(res.data.msg)
             }
-          console.log('res.data------------>', res.data);
+            console.log('res.data------------>', res.data)
 
             resourceList.data = res.data.data.list || []
             resourceTotal.value = res.data.data.total || 0
           },
           (err) => {
-          loadingData.value = false;
+            loadingData.value = false
             message.error(err)
           }
         )
@@ -192,7 +228,7 @@ export default defineComponent({
       }
 
       onMounted(() => {
-      console.log('222----onMounted-------->', 222);
+        console.log('222----onMounted-------->', 222)
         listKey2.value++
         getAppResources()
       })
@@ -235,6 +271,7 @@ export default defineComponent({
       HomeHeader,
       HomeFooter,
       searchResultList,
+      CanAssignCase,
     },
     beforeUnmount() {
       mybus.off('paramsGetResources')