Skip to content

csbr-daop / fe-data-trusted-space

Go to a project
Toggle navigation
Toggle navigation pinning
0eaaaefc by lxs
Options

数据资产登记更新

1 parent 767937f2
Inline Side-by-side
Showing 1 changed file with 181 additions and 58 deletions
src/views/data_asset/registerManagemant.vue
...@@ -9,6 +9,7 @@ import { ElMessage, ElMessageBox } from 'element-plus'; ...@@ -9,6 +9,7 @@ import { ElMessage, ElMessageBox } from 'element-plus';
9 import { useRouter, useRoute } from "vue-router"; 9 import { useRouter, useRoute } from "vue-router";
10 import { MoreFilled } from "@element-plus/icons-vue"; 10 import { MoreFilled } from "@element-plus/icons-vue";
11 import { 11 import {
12 changeNum,
12 tagMethod, 13 tagMethod,
13 tagType, 14 tagType,
14 } from "@/utils/common"; 15 } from "@/utils/common";
...@@ -34,6 +35,13 @@ const route = useRoute(); ...@@ -34,6 +35,13 @@ const route = useRoute();
34 const { proxy } = getCurrentInstance() as any; 35 const { proxy } = getCurrentInstance() as any;
35 const path = route.path; 36 const path = route.path;
36 37
38 const loading = ref(false);
39 const defaultItemLogo = new URL('@/assets/images/home-finance-product.png', import.meta.url).href
40 const demandListData: any = ref([
41 { companyName: '北数所', listedNum: 16, processNum: 1235 },
42 { companyName: '深数所', listedNum: 16, processNum: 1235 },
43 { companyName: '苏数所', listedNum: 16, processNum: 1235 },
44 ]);
37 const searchItemList = ref([ 45 const searchItemList = ref([
38 { 46 {
39 type: "input", 47 type: "input",
...@@ -167,6 +175,9 @@ const getTableBtns = (row, includeDetail = true) => { ...@@ -167,6 +175,9 @@ const getTableBtns = (row, includeDetail = true) => {
167 175
168 const currTableData: any = ref({}); 176 const currTableData: any = ref({});
169 177
178 const btnClick = (btn) => {
179 }
180
170 const tableBtnClick = (scope, btn) => { 181 const tableBtnClick = (scope, btn) => {
171 const type = btn.value; 182 const type = btn.value;
172 const row = scope.row; 183 const row = scope.row;
...@@ -486,73 +497,100 @@ const createBtnVisible = computed(() => { ...@@ -486,73 +497,100 @@ const createBtnVisible = computed(() => {
486 </script> 497 </script>
487 498
488 <template> 499 <template>
489 <div class="container_wrap"> 500 <div class="container_wrap" v-loading="loading">
490 <div class="table_tool_wrap"> 501 <div class="list-content">
491 <TableTools :searchItems="searchItemList" :searchId="'register-data-search'" @search="toSearch" /> 502 <div class="card-content" v-for="item in demandListData" :key="item.guid">
492 <div class="tools_btns"> 503 <div class="header">
493 <el-button type="primary" @click="handleCreate" v-if="createBtnVisible" v-preReClick>新建</el-button> 504 <img class="left-img" :src="(item.picUrl && typeof item.picUrl == 'string') ? item.picUrl : defaultItemLogo"
494 <div class="view-change"> 505 alt="" />
495 <div class="list-btn" :class="[activeListType === 'list' ? 'active' : '']" @click="activeListType = 'list'"> 506 <div class="right-main">
496 <el-icon style="width: 12px;height: 12px;"> 507 <div class="title">{{ item.companyName ?? '--' }}</div>
497 <svg-icon style="width: 12px;height: 12px;" 508 <div class="count-group">
498 :name="activeListType === 'list' ? 'btn-list-white' : 'btn-list'" /> 509 <div class="count-item">
499 </el-icon> 510 <div class="item-label">已上架产品数</div>
500 </div> 511 <div class="item-num">{{ changeNum(item.listedNum) }}</div>
501 <div class="card-btn" :class="[activeListType === 'card' ? 'active' : '']" @click="activeListType = 'card'"> 512 </div>
502 <el-icon style="width: 12px;height: 12px;"> 513 <div class="count-item">
503 <svg-icon style="width: 12px;height: 12px;" 514 <div class="item-label">审批中产品数</div>
504 :name="activeListType === 'card' ? 'btn-card-white' : 'btn-card'" /> 515 <div class="item-num">{{ changeNum(item.processNum) }}</div>
505 </el-icon> 516 </div>
517 </div>
506 </div> 518 </div>
507 </div> 519 </div>
520 <div class="operator-btn">
521 <div class="left-btn borderRight" @click="btnClick(item)">更新模板</div>
522 <div class="left-btn" @click="btnClick(item)">资产登记</div>
523 </div>
508 </div> 524 </div>
509 </div> 525 </div>
510 <div class="table_panel_wrap" :style="{ height: createBtnVisible ? 'calc(100% - 89px)' : 'calc(100% - 40px)' }"> 526 <div class="content_main_wrap">
511 <div v-if="activeListType === 'card'" class="data-content" v-loading="listDataLoading"> 527 <div class="table_tool_wrap">
512 <div class="card-content" v-for="item in listData" :key="item.guid" @click="handleDataClick(item)"> 528 <TableTools :searchItems="searchItemList" :searchId="'register-data-search'" @search="toSearch" />
513 <div class="title-row"> 529 <div class="tools_btns">
514 <div class="title"> 530 <el-button type="primary" @click="handleCreate" v-if="createBtnVisible" v-preReClick>新建</el-button>
515 <ellipsis-tooltip :content="item.daName" class-name="w100f" 531 <div class="view-change">
516 :refName="'tooltipOver' + item.guid"></ellipsis-tooltip> 532 <div class="list-btn" :class="[activeListType === 'list' ? 'active' : '']" @click="activeListType = 'list'">
533 <el-icon style="width: 12px;height: 12px;">
534 <svg-icon style="width: 12px;height: 12px;"
535 :name="activeListType === 'list' ? 'btn-list-white' : 'btn-list'" />
536 </el-icon>
537 </div>
538 <div class="card-btn" :class="[activeListType === 'card' ? 'active' : '']" @click="activeListType = 'card'">
539 <el-icon style="width: 12px;height: 12px;">
540 <svg-icon style="width: 12px;height: 12px;"
541 :name="activeListType === 'card' ? 'btn-card-white' : 'btn-card'" />
542 </el-icon>
517 </div> 543 </div>
518 <el-tag :type="(tagType(item, 'approveState') as any)">{{
519 tagMethod(item, 'approveState')
520 }}</el-tag>
521 </div> 544 </div>
522 <div v-if="!isCompanyPlatform" class="desc">{{ item.tenantName ?? '深圳传世般若有限公司' }}</div> 545 </div>
523 <div class="desc">{{ item.updateTime }}</div> 546 </div>
524 <div class="type-btn"> 547 <div class="table_panel_wrap" :style="{ height: createBtnVisible ? 'calc(100% - 89px)' : 'calc(100% - 40px)' }">
525 <template v-if="item.ownIndustryName?.length"> 548 <div v-if="activeListType === 'card'" class="data-content" v-loading="listDataLoading">
526 <div class="type-items"> 549 <div class="card-content" v-for="item in listData" :key="item.guid" @click="handleDataClick(item)">
527 <div v-for="(info) in item.ownIndustryName" class="type">{{ info }}</div> 550 <div class="title-row">
551 <div class="title">
552 <ellipsis-tooltip :content="item.daName" class-name="w100f"
553 :refName="'tooltipOver' + item.guid"></ellipsis-tooltip>
528 </div> 554 </div>
529 </template> 555 <el-tag :type="(tagType(item, 'approveState') as any)">{{
530 <template v-else> 556 tagMethod(item, 'approveState')
531 <div class="type-items"></div> 557 }}</el-tag>
532 </template> 558 </div>
533 <el-popover v-model="cardBtnVisible" placement="bottom" width="96" trigger="click" 559 <div v-if="!isCompanyPlatform" class="desc">{{ item.tenantName ?? '深圳传世般若有限公司' }}</div>
534 popper-class="tree-item-edit-menu" :show-arrow="false" :hide-after="0"> 560 <div class="desc">{{ item.updateTime }}</div>
535 <template #reference> 561 <div class="type-btn">
536 <el-icon class="list-more" color="#666" v-show="getTableBtns(item, false)?.length > 0" 562 <template v-if="item.ownIndustryName?.length">
537 @click.stop="cardBtnVisible = true"> 563 <div class="type-items">
538 <MoreFilled /> 564 <div v-for="(info) in item.ownIndustryName" class="type">{{ info }}</div>
539 </el-icon> 565 </div>
540 </template> 566 </template>
541 <div class="levitation-ul"> 567 <template v-else>
542 <span class="levitation-li" v-for="btn in getTableBtns(item, false)" 568 <div class="type-items"></div>
543 @click="tableBtnClick({ row: item }, btn)">{{ 569 </template>
544 btn.label }}</span> 570 <el-popover v-model="cardBtnVisible" placement="bottom" width="96" trigger="click"
545 </div> 571 popper-class="tree-item-edit-menu" :show-arrow="false" :hide-after="0">
546 </el-popover> 572 <template #reference>
573 <el-icon class="list-more" color="#666" v-show="getTableBtns(item, false)?.length > 0"
574 @click.stop="cardBtnVisible = true">
575 <MoreFilled />
576 </el-icon>
577 </template>
578 <div class="levitation-ul">
579 <span class="levitation-li" v-for="btn in getTableBtns(item, false)"
580 @click="tableBtnClick({ row: item }, btn)">{{
581 btn.label }}</span>
582 </div>
583 </el-popover>
584 </div>
585 </div>
586 <div v-if="!listData.length" class="card-noData">
587 <img src="../../assets/images/no-data.png" :style="{ width: '96px', height: '96px' }" />
588 <span>暂无数据资产</span>
547 </div> 589 </div>
548 </div> 590 </div>
549 <div v-if="!listData.length" class="card-noData"> 591 <Table v-else :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" />
550 <img src="../../assets/images/no-data.png" :style="{ width: '96px', height: '96px' }" /> 592 <PageNav :class="[pageInfo.type]" :pageInfo="pageInfo" @pageChange="pageChange" />
551 <span>暂无数据资产</span>
552 </div>
553 </div> 593 </div>
554 <Table v-else :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" />
555 <PageNav :class="[pageInfo.type]" :pageInfo="pageInfo" @pageChange="pageChange" />
556 </div> 594 </div>
557 <Dialog :dialogInfo="passDialogInfo" @btnClick="passDialogBtnClick" /> 595 <Dialog :dialogInfo="passDialogInfo" @btnClick="passDialogBtnClick" />
558 <Dialog :dialogInfo="rejectDialogInfo" @btnClick="rejectDialogBtnClick" /> 596 <Dialog :dialogInfo="rejectDialogInfo" @btnClick="rejectDialogBtnClick" />
...@@ -561,7 +599,13 @@ const createBtnVisible = computed(() => { ...@@ -561,7 +599,13 @@ const createBtnVisible = computed(() => {
561 599
562 <style scoped lang="scss"> 600 <style scoped lang="scss">
563 .container_wrap { 601 .container_wrap {
564 padding: 0 16px; 602 padding: 16px 16px 0;
603 display: flex;
604 flex-direction: column;
605 }
606
607 .content_main_wrap {
608 flex: 1;
565 } 609 }
566 610
567 .table_panel { 611 .table_panel {
...@@ -696,4 +740,83 @@ const createBtnVisible = computed(() => { ...@@ -696,4 +740,83 @@ const createBtnVisible = computed(() => {
696 } 740 }
697 } 741 }
698 } 742 }
699 </style>
...\ No newline at end of file ...\ No newline at end of file
743
744 .list-content {
745 display: flex;
746 justify-content: space-between;
747 flex-wrap: wrap;
748 margin-bottom: 8px;
749
750 .card-content {
751 width: calc(33.33% - 10px);
752 padding: 16px;
753 box-shadow: 0 0 0 1px #d9d9d9;
754
755 .header {
756 display: flex;
757 margin-bottom: 16px;
758
759 img {
760 width: 80px;
761 margin-right: 16px;
762 }
763
764 .title {
765 font-size: 16px;
766 color: #212121;
767 font-weight: 600;
768 margin-bottom: 8px;
769 }
770
771 .right-main {
772 width: calc(100% - 96px);
773 display: flex;
774 flex-direction: column;
775 justify-content: space-between;
776
777 .count-group {
778 display: flex;
779 justify-content: space-between;
780
781 .item-num {
782 font-size: 20px;
783 font-weight: 600;
784 color: #212121;
785 margin-top: 8px;
786 }
787 }
788 }
789 }
790
791 .operator-btn {
792 display: flex;
793 justify-content: space-between;
794 align-items: center;
795 box-shadow: 0 0 0 1px #d9d9d9;
796 position: relative;
797
798 &::after {
799 content: '';
800 width: 0;
801 height: 100%;
802 border-left: 1px solid #d9d9d9;
803 position: absolute;
804 left: 50%;
805 transform: translateX(-50%);
806 }
807
808 >.left-btn {
809 width: 50%;
810 height: 40px;
811 line-height: 40px;
812 text-align: center;
813 cursor: pointer;
814
815 &:hover {
816 color: #4fa1a4;
817 }
818 }
819 }
820 }
821 }
822 </style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!