Skip to content

csbr-daop / fe-data-trusted-space

Go to a project
Toggle navigation
Toggle navigation pinning
809e3c07 by lihua
Options

优化产品上架样式

1 parent 7c267850
Inline Side-by-side
Showing 1 changed file with 72 additions and 39 deletions
src/views/data_product/productListing.vue
...@@ -14,11 +14,12 @@ import { TableColumnWidth } from '@/utils/enum'; ...@@ -14,11 +14,12 @@ import { TableColumnWidth } from '@/utils/enum';
14 14
15 import TableTools from "@/components/Tools/table_tools.vue"; 15 import TableTools from "@/components/Tools/table_tools.vue";
16 import Table from "@/components/Table/index.vue"; 16 import Table from "@/components/Table/index.vue";
17 import Dialog from "@/components/Dialog/index.vue"; 17 import { CarouselPanel } from '@/components/CarouselPanel';
18 import { getParamsList } from "@/api/modules/dataAsset"; 18 import { getParamsList } from "@/api/modules/dataAsset";
19 import { 19 import {
20 changeNum, 20 changeNum,
21 } from "@/utils/common"; 21 } from "@/utils/common";
22 import { chunk } from "@/api/modules/common";
22 import { passFlowData, rejectFlowData, revokeFlowData } from "@/api/modules/workFlowService"; 23 import { passFlowData, rejectFlowData, revokeFlowData } from "@/api/modules/workFlowService";
23 24
24 const { proxy } = getCurrentInstance() as any; 25 const { proxy } = getCurrentInstance() as any;
...@@ -26,6 +27,18 @@ const router = useRouter(); ...@@ -26,6 +27,18 @@ const router = useRouter();
26 const userStore = useUserStore(); 27 const userStore = useUserStore();
27 const userData = JSON.parse(userStore.userData); 28 const userData = JSON.parse(userStore.userData);
28 const assetStore = useDataAssetStore(); 29 const assetStore = useDataAssetStore();
30
31 const sjsLogo = new URL('@/assets/images/sjs-logo.png', import.meta.url).href
32
33 const carouselInfo: any = ref({
34 list: [],
35 height: '172px',
36 loop: false,
37 autoplay: false,
38 arrow: 'hover',
39 itemClass: 'list-content'
40 })
41
29 const damTypes = ref([]); 42 const damTypes = ref([]);
30 const searchItemList: any = ref([ 43 const searchItemList: any = ref([
31 { 44 {
...@@ -229,9 +242,12 @@ const toSearch = (val: any, clear: boolean = false) => { ...@@ -229,9 +242,12 @@ const toSearch = (val: any, clear: boolean = false) => {
229 const getListingCountData = () => { 242 const getListingCountData = () => {
230 flowDetailLoading.value = true; 243 flowDetailLoading.value = true;
231 getListingCount().then((res: any) => { 244 getListingCount().then((res: any) => {
245 flowDetailLoading.value = false;
232 if (res.code == proxy.$passCode) { 246 if (res.code == proxy.$passCode) {
233 demandListData.value = res.data || []; 247 demandListData.value = res.data || [];
234 flowDetailLoading.value = false; 248 let valueData = chunk(demandListData.value, 4);
249 carouselInfo.value.list = valueData;
250 carouselInfo.value.arrow = valueData.length > 1 ? 'hover' : 'never';
235 } else { 251 } else {
236 proxy.$ElMessage.error(res.msg); 252 proxy.$ElMessage.error(res.msg);
237 } 253 }
...@@ -922,34 +938,41 @@ const formInfo = ref<any>({ ...@@ -922,34 +938,41 @@ const formInfo = ref<any>({
922 </div> --> 938 </div> -->
923 </div> 939 </div>
924 <div v-loading="flowDetailLoading"> 940 <div v-loading="flowDetailLoading">
925 <div class="list-content" v-if="demandListData.length > 0"> 941 <CarouselPanel :carousel-info="carouselInfo">
926 <div class="card-content" v-for="item in demandListData" :key="item.guid" @click="cardBtnClick(item)" :class="{ active: currExchangeGuid == item.exchangeGuid }"> 942 <template v-slot:default="{ carousel }">
927 <div class="header"> 943 <div class="card-content" v-for="(item, i) in carousel" :key="item.guid" @click="cardBtnClick(item)"
928 <div class="header-top"> 944 :class="{ active: currExchangeGuid == item.exchangeGuid, mr16: i < carousel.length - 1 && (i + 1) % 4 !== 0 }">
929 <img class="left-img" 945 <div class="header">
930 :src="(item.picUrl && typeof item.picUrl == 'string') ? item.picUrl : defaultItemLogo" alt="" /> 946 <div class="header-top">
931 <div class="title"> <ellipsis-tooltip :content="item.exchangeName ?? '--'" class-name="w100f" 947 <img class="left-img"
932 :refName="'tooltipOver'"></ellipsis-tooltip></div> 948 :src="(item.picUrl && typeof item.picUrl == 'string') ? item.picUrl : (item.exchangeName?.indexOf('门户') > -1 ? sjsLogo : defaultItemLogo)"
933 </div> 949 alt="" />
934 <div class="right-main"> 950 <div class="title"> <ellipsis-tooltip :content="item.exchangeName ?? '--'" class-name="w100f"
935 <div class="count-group"> 951 :refName="'tooltipOver'"></ellipsis-tooltip></div>
936 <div class="count-item"> 952 </div>
937 <div class="item-label">已上架产品数</div> 953 <div class="right-main">
938 <div class="item-num">{{ changeNum(item.listingNum || 0) }}</div> 954 <div class="count-group">
939 </div> 955 <div class="count-item">
940 <div class="count-item"> 956 <div class="item-label">已上架产品数</div>
941 <div class="item-label">审批中产品数</div> 957 <div class="item-num">{{ changeNum(item.listingNum || 0) }}</div>
942 <div class="item-num">{{ changeNum(item.underReviewNum || 0) }}</div> 958 </div>
959 <div class="count-item">
960 <div class="item-label">审批中产品数</div>
961 <div class="item-num">{{ changeNum(item.underReviewNum || 0) }}</div>
962 </div>
943 </div> 963 </div>
944 </div> 964 </div>
945 </div> 965 </div>
966 <div class="operator-btn" @click.stop="btnClick(item)">
967 <!-- <div class="left-btn">更新模板</div> -->
968 <div class="right-btn">产品上架</div>
969 </div>
946 </div> 970 </div>
947 <div class="operator-btn" @click.stop="btnClick(item)"> 971 </template>
948 <!-- <div class="left-btn">更新模板</div> --> 972 </CarouselPanel>
949 <div class="right-btn">产品上架</div> 973 <!-- <div class="list-content" v-if="demandListData.length > 0">
950 </div> 974
951 </div> 975 </div> -->
952 </div>
953 <div class="v-tip"> 976 <div class="v-tip">
954 <div class="tip-icon"></div> 977 <div class="tip-icon"></div>
955 <div class="tip-des"> 978 <div class="tip-des">
...@@ -1000,19 +1023,16 @@ const formInfo = ref<any>({ ...@@ -1000,19 +1023,16 @@ const formInfo = ref<any>({
1000 padding: 0px 8px 0; 1023 padding: 0px 8px 0;
1001 } 1024 }
1002 1025
1003 .list-content { 1026 :deep(.el-carousel) {
1004 display: flex; 1027 margin: 0 -16px 16px;
1005 1028 padding: 0 16px;
1006 flex-wrap: wrap;
1007 padding: 0 0px 0px 8px;
1008 1029
1009 .card-content { 1030 .card-content {
1010 width: 290px; 1031 width: calc(25% - 12px);
1011 // box-shadow: 0 0 0 1px #d9d9d9; 1032 height: 100%;
1012 border: 1px solid #d9d9d9; 1033 margin-bottom: 8px;
1013 border-radius: 3px; 1034 border: 1px solid var(--el-border-color-regular);
1014 margin-right: 12px; 1035 float: left;
1015 margin-bottom: 12px;
1016 cursor: pointer; 1036 cursor: pointer;
1017 1037
1018 &:hover { 1038 &:hover {
...@@ -1021,15 +1041,21 @@ const formInfo = ref<any>({ ...@@ -1021,15 +1041,21 @@ const formInfo = ref<any>({
1021 1041
1022 &.active { 1042 &.active {
1023 border: 1px solid var(--el-color-primary); 1043 border: 1px solid var(--el-color-primary);
1044
1024 .header { 1045 .header {
1025 background-color: #ebf6f7; 1046 background-color: #ebf6f7;
1026 } 1047 }
1027 } 1048 }
1028 1049
1050 &.mr16 {
1051 margin-right: 16px;
1052 }
1053
1029 .header { 1054 .header {
1030 display: flex; 1055 display: flex;
1031 flex-direction: column; 1056 flex-direction: column;
1032 padding: 16px; 1057 padding: 12px;
1058 height: calc(100% - 44px);
1033 1059
1034 .header-top { 1060 .header-top {
1035 display: flex; 1061 display: flex;
...@@ -1052,7 +1078,6 @@ const formInfo = ref<any>({ ...@@ -1052,7 +1078,6 @@ const formInfo = ref<any>({
1052 1078
1053 .right-main { 1079 .right-main {
1054 width: 100%; 1080 width: 100%;
1055 padding: 0 16px;
1056 display: flex; 1081 display: flex;
1057 flex-direction: column; 1082 flex-direction: column;
1058 justify-content: space-between; 1083 justify-content: space-between;
...@@ -1061,6 +1086,14 @@ const formInfo = ref<any>({ ...@@ -1061,6 +1086,14 @@ const formInfo = ref<any>({
1061 display: flex; 1086 display: flex;
1062 justify-content: space-between; 1087 justify-content: space-between;
1063 1088
1089 .count-item {
1090 width: 50%;
1091 display: flex;
1092 justify-content: center;
1093 align-items: center;
1094 flex-direction: column;
1095 }
1096
1064 .item-num { 1097 .item-num {
1065 font-size: 24px; 1098 font-size: 24px;
1066 font-weight: 600; 1099 font-weight: 600;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!