数据资产登记更新

@@ -9,6 +9,7 @@ import { ElMessage, ElMessageBox } from 'element-plus';
 import { useRouter, useRoute } from "vue-router";
 import { MoreFilled } from "@element-plus/icons-vue";
 import {
+  changeNum,
   tagMethod,
   tagType,
 } from "@/utils/common";
@@ -34,6 +35,13 @@ const route = useRoute();
 const { proxy } = getCurrentInstance() as any;
 const path = route.path;
 
+const loading = ref(false);
+const defaultItemLogo = new URL('@/assets/images/home-finance-product.png', import.meta.url).href
+const demandListData: any = ref([
+  { companyName: '北数所', listedNum: 16, processNum: 1235 },
+  { companyName: '深数所', listedNum: 16, processNum: 1235 },
+  { companyName: '苏数所', listedNum: 16, processNum: 1235 },
+]);
 const searchItemList = ref([
   {
     type: "input",
@@ -167,6 +175,9 @@ const getTableBtns = (row, includeDetail = true) => {
 
 const currTableData: any = ref({});
 
+const btnClick = (btn) => {
+}
+
 const tableBtnClick = (scope, btn) => {
   const type = btn.value;
   const row = scope.row;
@@ -486,73 +497,100 @@ const createBtnVisible = computed(() => {
 </script>
 
 <template>
-  <div class="container_wrap">
-    <div class="table_tool_wrap">
-      <TableTools :searchItems="searchItemList" :searchId="'register-data-search'" @search="toSearch" />
-      <div class="tools_btns">
-        <el-button type="primary" @click="handleCreate" v-if="createBtnVisible" v-preReClick>新建</el-button>
-        <div class="view-change">
-          <div class="list-btn" :class="[activeListType === 'list' ? 'active' : '']" @click="activeListType = 'list'">
-            <el-icon style="width: 12px;height: 12px;">
-              <svg-icon style="width: 12px;height: 12px;"
-                :name="activeListType === 'list' ? 'btn-list-white' : 'btn-list'" />
-            </el-icon>
-          </div>
-          <div class="card-btn" :class="[activeListType === 'card' ? 'active' : '']" @click="activeListType = 'card'">
-            <el-icon style="width: 12px;height: 12px;">
-              <svg-icon style="width: 12px;height: 12px;"
-                :name="activeListType === 'card' ? 'btn-card-white' : 'btn-card'" />
-            </el-icon>
+  <div class="container_wrap" v-loading="loading">
+    <div class="list-content">
+      <div class="card-content" v-for="item in demandListData" :key="item.guid">
+        <div class="header">
+          <img class="left-img" :src="(item.picUrl && typeof item.picUrl == 'string') ? item.picUrl : defaultItemLogo"
+            alt="" />
+          <div class="right-main">
+            <div class="title">{{ item.companyName ?? '--' }}</div>
+            <div class="count-group">
+              <div class="count-item">
+                <div class="item-label">已上架产品数</div>
+                <div class="item-num">{{ changeNum(item.listedNum) }}</div>
+              </div>
+              <div class="count-item">
+                <div class="item-label">审批中产品数</div>
+                <div class="item-num">{{ changeNum(item.processNum) }}</div>
+              </div>
+            </div>
           </div>
         </div>
+        <div class="operator-btn">
+          <div class="left-btn borderRight" @click="btnClick(item)">更新模板</div>
+          <div class="left-btn" @click="btnClick(item)">资产登记</div>
+        </div>
       </div>
     </div>
-    <div class="table_panel_wrap" :style="{ height: createBtnVisible ? 'calc(100% - 89px)' : 'calc(100% - 40px)' }">
-      <div v-if="activeListType === 'card'" class="data-content" v-loading="listDataLoading">
-        <div class="card-content" v-for="item in listData" :key="item.guid" @click="handleDataClick(item)">
-          <div class="title-row">
-            <div class="title">
-              <ellipsis-tooltip :content="item.daName" class-name="w100f"
-                :refName="'tooltipOver' + item.guid"></ellipsis-tooltip>
+    <div class="content_main_wrap">
+      <div class="table_tool_wrap">
+        <TableTools :searchItems="searchItemList" :searchId="'register-data-search'" @search="toSearch" />
+        <div class="tools_btns">
+          <el-button type="primary" @click="handleCreate" v-if="createBtnVisible" v-preReClick>新建</el-button>
+          <div class="view-change">
+            <div class="list-btn" :class="[activeListType === 'list' ? 'active' : '']" @click="activeListType = 'list'">
+              <el-icon style="width: 12px;height: 12px;">
+                <svg-icon style="width: 12px;height: 12px;"
+                  :name="activeListType === 'list' ? 'btn-list-white' : 'btn-list'" />
+              </el-icon>
+            </div>
+            <div class="card-btn" :class="[activeListType === 'card' ? 'active' : '']" @click="activeListType = 'card'">
+              <el-icon style="width: 12px;height: 12px;">
+                <svg-icon style="width: 12px;height: 12px;"
+                  :name="activeListType === 'card' ? 'btn-card-white' : 'btn-card'" />
+              </el-icon>
             </div>
-            <el-tag :type="(tagType(item, 'approveState') as any)">{{
-        tagMethod(item, 'approveState')
-      }}</el-tag>
           </div>
-          <div v-if="!isCompanyPlatform" class="desc">{{ item.tenantName ?? '深圳传世般若有限公司' }}</div>
-          <div class="desc">{{ item.updateTime }}</div>
-          <div class="type-btn">
-            <template v-if="item.ownIndustryName?.length">
-              <div class="type-items">
-                <div v-for="(info) in item.ownIndustryName" class="type">{{ info }}</div>
+        </div>
+      </div>
+      <div class="table_panel_wrap" :style="{ height: createBtnVisible ? 'calc(100% - 89px)' : 'calc(100% - 40px)' }">
+        <div v-if="activeListType === 'card'" class="data-content" v-loading="listDataLoading">
+          <div class="card-content" v-for="item in listData" :key="item.guid" @click="handleDataClick(item)">
+            <div class="title-row">
+              <div class="title">
+                <ellipsis-tooltip :content="item.daName" class-name="w100f"
+                  :refName="'tooltipOver' + item.guid"></ellipsis-tooltip>
               </div>
-            </template>
-            <template v-else>
-              <div class="type-items"></div>
-            </template>
-            <el-popover v-model="cardBtnVisible" placement="bottom" width="96" trigger="click"
-              popper-class="tree-item-edit-menu" :show-arrow="false" :hide-after="0">
-              <template #reference>
-                <el-icon class="list-more" color="#666" v-show="getTableBtns(item, false)?.length > 0"
-                  @click.stop="cardBtnVisible = true">
-                  <MoreFilled />
-                </el-icon>
+              <el-tag :type="(tagType(item, 'approveState') as any)">{{
+                tagMethod(item, 'approveState')
+              }}</el-tag>
+            </div>
+            <div v-if="!isCompanyPlatform" class="desc">{{ item.tenantName ?? '深圳传世般若有限公司' }}</div>
+            <div class="desc">{{ item.updateTime }}</div>
+            <div class="type-btn">
+              <template v-if="item.ownIndustryName?.length">
+                <div class="type-items">
+                  <div v-for="(info) in item.ownIndustryName" class="type">{{ info }}</div>
+                </div>
               </template>
-              <div class="levitation-ul">
-                <span class="levitation-li" v-for="btn in getTableBtns(item, false)"
-                  @click="tableBtnClick({ row: item }, btn)">{{
-        btn.label }}</span>
-              </div>
-            </el-popover>
+              <template v-else>
+                <div class="type-items"></div>
+              </template>
+              <el-popover v-model="cardBtnVisible" placement="bottom" width="96" trigger="click"
+                popper-class="tree-item-edit-menu" :show-arrow="false" :hide-after="0">
+                <template #reference>
+                  <el-icon class="list-more" color="#666" v-show="getTableBtns(item, false)?.length > 0"
+                    @click.stop="cardBtnVisible = true">
+                    <MoreFilled />
+                  </el-icon>
+                </template>
+                <div class="levitation-ul">
+                  <span class="levitation-li" v-for="btn in getTableBtns(item, false)"
+                    @click="tableBtnClick({ row: item }, btn)">{{
+                      btn.label }}</span>
+                </div>
+              </el-popover>
+            </div>
+          </div>
+          <div v-if="!listData.length" class="card-noData">
+            <img src="../../assets/images/no-data.png" :style="{ width: '96px', height: '96px' }" />
+            <span>暂无数据资产</span>
           </div>
         </div>
-        <div v-if="!listData.length" class="card-noData">
-          <img src="../../assets/images/no-data.png" :style="{ width: '96px', height: '96px' }" />
-          <span>暂无数据资产</span>
-        </div>
+        <Table v-else :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" />
+        <PageNav :class="[pageInfo.type]" :pageInfo="pageInfo" @pageChange="pageChange" />
       </div>
-      <Table v-else :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" />
-      <PageNav :class="[pageInfo.type]" :pageInfo="pageInfo" @pageChange="pageChange" />
     </div>
     <Dialog :dialogInfo="passDialogInfo" @btnClick="passDialogBtnClick" />
     <Dialog :dialogInfo="rejectDialogInfo" @btnClick="rejectDialogBtnClick" />
@@ -561,7 +599,13 @@ const createBtnVisible = computed(() => {
 
 <style scoped lang="scss">
 .container_wrap {
-  padding: 0 16px;
+  padding: 16px 16px 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.content_main_wrap {
+  flex: 1;
 }
 
 .table_panel {
@@ -696,4 +740,83 @@ const createBtnVisible = computed(() => {
     }
   }
 }
-</style>
\ No newline at end of file
+
+.list-content {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-bottom: 8px;
+
+  .card-content {
+    width: calc(33.33% - 10px);
+    padding: 16px;
+    box-shadow: 0 0 0 1px #d9d9d9;
+
+    .header {
+      display: flex;
+      margin-bottom: 16px;
+
+      img {
+        width: 80px;
+        margin-right: 16px;
+      }
+
+      .title {
+        font-size: 16px;
+        color: #212121;
+        font-weight: 600;
+        margin-bottom: 8px;
+      }
+
+      .right-main {
+        width: calc(100% - 96px);
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        .count-group {
+          display: flex;
+          justify-content: space-between;
+
+          .item-num {
+            font-size: 20px;
+            font-weight: 600;
+            color: #212121;
+            margin-top: 8px;
+          }
+        }
+      }
+    }
+
+    .operator-btn {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      box-shadow: 0 0 0 1px #d9d9d9;
+      position: relative;
+
+      &::after {
+        content: '';
+        width: 0;
+        height: 100%;
+        border-left: 1px solid #d9d9d9;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      >.left-btn {
+        width: 50%;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        cursor: pointer;
+
+        &:hover {
+          color: #4fa1a4;
+        }
+      }
+    }
+  }
+}
+</style>