Skip to content

csbr-daop / fe-data-trusted-space

Go to a project
Toggle navigation
Toggle navigation pinning
e3e635a4 by lihua
Options

逻辑空间管理连接器接口联调

1 parent a54fce6c
Expand all
Inline Side-by-side
Showing 6 changed files with 365 additions and 38 deletions
src/api/modules/dataAsset.ts
...@@ -634,6 +634,41 @@ export const getTdsRegisterCatalogDetail = (damGuid) => request({ ...@@ -634,6 +634,41 @@ export const getTdsRegisterCatalogDetail = (damGuid) => request({
634 method: 'get' 634 method: 'get'
635 }); 635 });
636 636
637 /** --------------------------- 逻辑空间接口 --------------------------------------- */
638 export const getLogicSpacePageList = (params) => request({
639 url: `${import.meta.env.VITE_APP_DIGITAL_CONTRACT_URL}/logic-space/page-list`,
640 method: 'post',
641 data: params
642 })
643
644 /** 获取逻辑空间详情 */
645 export const getLogicSpaceDetail = (params) => request({
646 url: `${import.meta.env.VITE_APP_DIGITAL_CONTRACT_URL}/logic-space/detail`,
647 method: 'get',
648 params
649 })
650
651 /** 保存新建逻辑空间 */
652 export const saveLogicSpace = (params) => request({
653 url: `${import.meta.env.VITE_APP_DIGITAL_CONTRACT_URL}/logic-space/save`,
654 method: 'post',
655 data: params
656 })
657
658 /** 编辑逻辑空间 */
659 export const updateLogicSpace = (params) => request({
660 url: `${import.meta.env.VITE_APP_DIGITAL_CONTRACT_URL}/logic-space/update`,
661 method: 'put',
662 data: params
663 })
664
665 /** 删除逻辑空间 */
666 export const deleteLogicSpace = (guids) => request({
667 url: `${import.meta.env.VITE_APP_DIGITAL_CONTRACT_URL}/logic-space/delete`,
668 method: 'delete',
669 data: guids
670 })
671
637 /** ----------------------------- 提供方进行数据申请接口联调 ---------------------------------- */ 672 /** ----------------------------- 提供方进行数据申请接口联调 ---------------------------------- */
638 673
639 export const getDataApplyPageList = (params) => request({ 674 export const getDataApplyPageList = (params) => request({
......
src/router/modules/dataAsset.ts
...@@ -486,6 +486,9 @@ const routes: RouteRecordRaw[] = [ ...@@ -486,6 +486,9 @@ const routes: RouteRecordRaw[] = [
486 breadcrumb: false, 486 breadcrumb: false,
487 cache: true, 487 cache: true,
488 reuse: true 488 reuse: true
489 },
490 beforeEnter: (to, from) => {
491 to.query.guid && (to.meta.title = `逻辑空间详情-${to.query.name}`);
489 } 492 }
490 }, 493 },
491 ] 494 ]
......
src/store/modules/productSpace.ts 0 → 100644
1 const useDataProductSpaceStore = defineStore(
2 // 产品逻辑空间
3 'productSpace',
4 () => {
5 const isRefresh = ref<boolean>(false);
6 function setIsRefresh(v: boolean) {
7 isRefresh.value = v;
8 }
9
10 return {
11 isRefresh,
12 setIsRefresh,
13 };
14 }
15 );
16
17 export default useDataProductSpaceStore;
src/views/data_asset/productSpaceDetail.vue
1 <template> 1 <template>
2 <div class="container_wrap full" v-loading="fullscreenLoading"> 2 <div class="container_wrap full" v-loading="fullscreenLoading">
3 <div class="content_main"> 3 <div class="content_main">
4 <div v-if="detailInfo.bizApproveState"
5 :class="['panel_wrap', 'mb16', 'results_panel', detailInfo.bizApproveState == 'Y' ? 'success' : ((detailInfo.bizApproveState == 'R' || detailInfo.bizApproveState == 'E') ? 'reject' : (detailInfo.bizApproveState == 'C' ? 'revoke' : 'audit'))]">
6 <div class="panel_header">
7 <div class="header_title" v-if="detailInfo.bizApproveState == 'Y'">
8 <el-icon class="title-icon">
9 <svg-icon name="icon-success" />
10 </el-icon>
11 <span class="title_text">审批通过</span>
12 </div>
13 <div class="header_title" v-else-if="detailInfo.bizApproveState == 'R'">
14 <el-icon class="title-icon">
15 <CircleCloseFilled />
16 </el-icon>
17 <span class="title_text">审批被驳回</span>
18 </div>
19 <div class="header_title" v-else-if="detailInfo.bizApproveState == 'E'">
20 <el-icon class="title-icon">
21 <CircleCloseFilled />
22 </el-icon>
23 <span class="title_text">审批发起失败</span>
24 </div>
25 <div class="header_title" v-else-if="detailInfo.bizApproveState == 'A'">
26 <el-icon class="title-icon">
27 <svg-icon name="icon-audit" />
28 </el-icon>
29 <span class="title_text">审批中</span>
30 </div>
31 <div class="header_title" v-else-if="detailInfo.bizApproveState == 'C'">
32 <el-icon class="title-icon">
33 <svg-icon name="icon-revoke" />
34 </el-icon>
35 <span class="title_text">已撤销</span>
36 </div>
37 </div>
38 <div class="panel_body" v-if="detailInfo.bizApproveState == 'R'" style="padding: 0px 16px 10px;">
39 <div class="results_list">
40 <div class="list_item">
41 <span class="item_label">平台审批意见:</span>
42 <span class="item_value">{{ detailInfo?.tdsApproveSuggest || '--' }}</span>
43 </div>
44 </div>
45 </div>
46 <div class="panel_body" v-if="detailInfo.bizApproveState == 'E'" style="padding: 0px 16px 10px;">
47 <div class="results_list">
48 <div class="list_item">
49 <span class="item_label">失败原因:</span>
50 <span class="item_value">{{ detailInfo?.tdsApproveErrorMsg || '--' }}</span>
51 </div>
52 </div>
53 </div>
54 </div>
4 <ContentWrap id="id-baseInfo" title="逻辑空间信息" description="" :isExpand="baseInfoExpand" :expand-swicth="true" 55 <ContentWrap id="id-baseInfo" title="逻辑空间信息" description="" :isExpand="baseInfoExpand" :expand-swicth="true"
5 class="mb16" @expand="(v) => baseInfoExpand = v"> 56 class="mb16" @expand="(v) => baseInfoExpand = v">
6 <div class="list_panel"> 57 <div class="list_panel">
...@@ -22,7 +73,11 @@ ...@@ -22,7 +73,11 @@
22 </div> 73 </div>
23 <div class="list_item"> 74 <div class="list_item">
24 <span class="item_label">是否开启：</span> 75 <span class="item_label">是否开启：</span>
25 <span class="item_value">{{ detailInfo.bizState ? '是' : '否' }}</span> 76 <span class="item_value">{{ detailInfo.isActivate == 'Y' ? '是' : '否' }}</span>
77 </div>
78 <div class="list_item is_block">
79 <span class="item_label">逻辑空间描述：</span>
80 <span class="item_value">{{ detailInfo.spaceDescription || '--' }}</span>
26 </div> 81 </div>
27 </div> 82 </div>
28 <el-tabs v-model="activeTabName" class="param-tabs" style="margin-top: 8px;"> 83 <el-tabs v-model="activeTabName" class="param-tabs" style="margin-top: 8px;">
...@@ -36,16 +91,18 @@ ...@@ -36,16 +91,18 @@
36 </el-tab-pane> 91 </el-tab-pane>
37 </el-tabs> 92 </el-tabs>
38 </ContentWrap> 93 </ContentWrap>
39 <ContentWrap id="id-approveInfo" title="流程审批" expandSwicth style="margin-top: 15px" :isExpand="expandApprove" 94 <!-- 只有可信空间才有流程审批，连接器是提交给可信空间审批的 -->
95 <!-- <ContentWrap id="id-approveInfo" title="流程审批" expandSwicth style="margin-top: 15px" :isExpand="expandApprove"
40 @expand="(v) => expandApprove = v"> 96 @expand="(v) => expandApprove = v">
41 <ApprovalProcess ref="approvalProcessRef" v-if="deploymentId" :deploymentId="deploymentId" 97 <ApprovalProcess ref="approvalProcessRef" v-if="deploymentId" :deploymentId="deploymentId"
42 :processInstanceId="processInstanceId"> 98 :processInstanceId="processInstanceId">
43 </ApprovalProcess> 99 </ApprovalProcess>
44 </ContentWrap> 100 </ContentWrap> -->
45 </div> 101 </div>
46 <div class="tool_btns"> 102 <div class="tool_btns">
47 <div class="btns"> 103 <div class="btns">
48 <el-button v-for="btn in toolBtns" :type="btn.type" :plain="btn.plain" @click="btnClick(btn)">{{ btn.label }}</el-button> 104 <el-button v-for="btn in toolBtns" :type="btn.type" :plain="btn.plain" @click="btnClick(btn)">{{ btn.label
105 }}</el-button>
49 </div> 106 </div>
50 </div> 107 </div>
51 </div> 108 </div>
...@@ -55,6 +112,8 @@ ...@@ -55,6 +112,8 @@
55 import useUserStore from "@/store/modules/user"; 112 import useUserStore from "@/store/modules/user";
56 import StrategyTable from "../data_smart_contract/components/strategyTable.vue"; 113 import StrategyTable from "../data_smart_contract/components/strategyTable.vue";
57 import { TableColumnWidth } from "@/utils/enum"; 114 import { TableColumnWidth } from "@/utils/enum";
115 import { CircleCloseFilled } from "@element-plus/icons-vue";
116 import { getLogicSpaceDetail } from "@/api/modules/dataAsset";
58 117
59 118
60 const { proxy } = getCurrentInstance() as any; 119 const { proxy } = getCurrentInstance() as any;
...@@ -96,12 +155,21 @@ const btnClick = (btn: any) => { ...@@ -96,12 +155,21 @@ const btnClick = (btn: any) => {
96 const cancel = () => { 155 const cancel = () => {
97 userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath)); 156 userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
98 router.push({ 157 router.push({
99 name: 'productApplicationManage' 158 name: 'productSpaceManage'
100 }); 159 });
101 } 160 }
102 161
103 onBeforeMount(() => { 162 onBeforeMount(() => {
104 163 fullscreenLoading.value = true;
164 getLogicSpaceDetail({ guid: route.query.guid }).then((res: any) => {
165 fullscreenLoading.value = false;
166 if (res?.code == proxy.$passCode) {
167 detailInfo.value = res.data || {};
168 memberTableInfo.value.data = detailInfo.value.permissionRSVOS || [];
169 } else {
170 res?.msg && proxy.$ElMessage.error(res.msg);
171 }
172 })
105 }) 173 })
106 174
107 const memberTableInfo = ref({ 175 const memberTableInfo = ref({
...@@ -109,8 +177,10 @@ const memberTableInfo = ref({ ...@@ -109,8 +177,10 @@ const memberTableInfo = ref({
109 height: '214px', 177 height: '214px',
110 fields: [ 178 fields: [
111 { label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center" }, 179 { label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center" },
112 { label: "成员名称", field: "memberGuid", width: 200 }, 180 { label: "成员名称", field: "memberName", width: 200 },
113 { label: "角色类型", field: "roleType", width: 160 }, 181 { label: "角色类型", field: "characterType", width: 160, getName: (scope) => {
182 return !scope.row.characterType ? '--' : (scope.row.characterType == '1' ? '数据使用方' : '数据提供方')
183 } },
114 { label: "描述", field: "description", width: 300 }, 184 { label: "描述", field: "description", width: 300 },
115 ], 185 ],
116 data: [], 186 data: [],
...@@ -197,4 +267,134 @@ const memberTableInfo = ref({ ...@@ -197,4 +267,134 @@ const memberTableInfo = ref({
197 267
198 } 268 }
199 } 269 }
270
271 .panel_wrap {
272
273 .panel_header {
274 .header_title {
275 height: 40px;
276 padding: 0 16px;
277 background-color: #fafafa;
278 box-shadow: 0 0 0 1px #e5e5e5;
279 display: flex;
280 align-items: center;
281 }
282
283 .title_text {
284 line-height: 22px;
285 font-size: 14px;
286 color: var(--el-color-regular);
287 font-weight: 600;
288 display: flex;
289 align-items: center;
290
291 .title_icon {
292 width: 26px;
293 height: 21px;
294 margin-right: 4px;
295 cursor: pointer;
296
297 &.active {
298 transform: rotate(90deg);
299 }
300 }
301 }
302 }
303
304 &.results_panel {
305 box-shadow: 0 0 0 1px #d9d9d9;
306
307 .panel_header {
308 .header_title {
309 background-color: transparent;
310 box-shadow: none;
311
312 .el-icon {
313 margin-right: 8px;
314 width: 20px;
315 height: 20px;
316
317 svg {
318 width: 100%;
319 height: 100%;
320 }
321 }
322 }
323 }
324
325 .panel_body {
326 padding-top: 0;
327 margin-top: 0;
328 box-shadow: none;
329
330 .results_list {
331 display: flex;
332
333 .list_item {
334 display: flex;
335 margin-bottom: 8px;
336 margin-right: 60px;
337 color: #666;
338
339 .item_value {
340 padding: 0 8px;
341 color: var(--el-color-regular);
342 }
343 }
344 }
345 }
346
347 &.success {
348 background-color: #F4FEF6;
349 box-shadow: 0 0 0 1px #4FA55D;
350
351 .panel_header {
352 .header_title {
353 .el-icon {
354 color: #4FA55D;
355 }
356 }
357 }
358 }
359
360 &.reject {
361 background-color: #FDF2F4;
362 box-shadow: 0 0 0 1px #E63E33;
363
364 .panel_header {
365 .header_title {
366 .el-icon {
367 color: #E63E33;
368 }
369 }
370 }
371 }
372
373 &.audit {
374 background-color: #FEFBF3;
375 box-shadow: 0 0 0 1px #F19E40;
376
377 .panel_header {
378 .header_title {
379 .el-icon {
380 color: #F19E40;
381 }
382 }
383 }
384 }
385
386 &.revoke {
387 background-color: #F5F5F5;
388 box-shadow: 0 0 0 1px #CCCCCC;
389
390 .panel_header {
391 .header_title {
392 .el-icon {
393 color: #666666;
394 }
395 }
396 }
397 }
398 }
399 }
200 </style> 400 </style>
...\ No newline at end of file ...\ No newline at end of file
......
src/views/data_asset/productSpaceManage.vue
...@@ -5,27 +5,39 @@ ...@@ -5,27 +5,39 @@
5 <el-input v-model.trim="pageInfo.keyWord" placeholder="名称搜索" :suffix-icon="Search" clearable 5 <el-input v-model.trim="pageInfo.keyWord" placeholder="名称搜索" :suffix-icon="Search" clearable
6 @blur="toSearch(true, true)" @keyup.enter.native="searchEnterFun" /> 6 @blur="toSearch(true, true)" @keyup.enter.native="searchEnterFun" />
7 </div> 7 </div>
8 <div class="table_panel_wrap"> 8 <div class="table_panel_wrap" v-loading="listDataLoading">
9 <div v-show="listData.length" class="data-content" v-loading="listDataLoading"> 9 <div v-show="listData.length" class="data-content">
10 <div class="card-content" v-for="(item, index) in listData" :key="item.guid" @click="handleDataClick(item)"> 10 <div class="card-content" v-for="(item, index) in listData" :key="item.guid" @click="handleDataClick(item)">
11 <div class="v-top"> 11 <div class="v-top">
12 <span class="title">{{ item.name }}</span> 12 <span class="title">{{ item.spaceName }}</span>
13 <el-tag :type="tagType(item, 'approveState')">{{ tagMethod(item, 'approveState') }}</el-tag> 13 <el-tag :type="tagType(item, 'bizApproveState')">{{ tagMethod(item, 'bizApproveState') }}</el-tag>
14 </div> 14 </div>
15 <div class="v-middle"> 15 <div class="v-middle">
16 <div class="per"> 16 <div class="per">
17 <div class="desc">产品数量</div> 17 <div class="desc">产品数量</div>
18 <div class="cnt">{{ item.productNum == null ? '--' : changeNum(item.productNum, 0) }}</div> 18 <div class="cnt">{{ item.damCount == null ? '--' : changeNum(item.damCount, 0) }}</div>
19 </div> 19 </div>
20 <div class="per"> 20 <div class="per">
21 <div class="desc">成员数量</div> 21 <div class="desc">成员数量</div>
22 <div class="cnt">{{ item.productNum == null ? '--' : changeNum(item.productNum, 0) }}</div> 22 <div class="cnt">{{ item.memberCount == null ? '--' : changeNum(item.memberCount, 0) }}</div>
23 </div> 23 </div>
24 </div> 24 </div>
25 <div class="v-bottom"> 25 <div class="v-bottom">
26 <template v-if="item.bizApproveState == 'N'">
27 <div class="per" @click.stop="clickEdit(item)">编辑</div>
28 <div class="divider" @click.stop></div>
29 <div class="per" @click.stop="clickDelete(item)">删除</div>
30 </template>
31 <template v-else-if="item.bizApproveState == 'A'">
32 <div class="per" @click.stop="clickDetail(item)">详情</div>
33 <div class="divider" @click.stop></div>
34 <div class="per" style="cursor: default;">--</div>
35 </template>
36 <template v-else>
26 <div class="per" @click.stop="clickDetail(item)">详情</div> 37 <div class="per" @click.stop="clickDetail(item)">详情</div>
27 <div class="divider" @click.stop></div> 38 <div class="divider" @click.stop></div>
28 <div class="per" @click.stop="clickDelete(item)">删除</div> 39 <div class="per" @click.stop="clickDelete(item)">删除</div>
40 </template>
29 <!-- TODO 只有审批中才有删除 --> 41 <!-- TODO 只有审批中才有删除 -->
30 </div> 42 </div>
31 </div> 43 </div>
...@@ -42,16 +54,19 @@ ...@@ -42,16 +54,19 @@
42 import { commonPageConfig } from '@/components/PageNav'; 54 import { commonPageConfig } from '@/components/PageNav';
43 import { changeNum, tagMethod, tagType } from '@/utils/common'; 55 import { changeNum, tagMethod, tagType } from '@/utils/common';
44 import { Search } from "@element-plus/icons-vue"; 56 import { Search } from "@element-plus/icons-vue";
57 import { getLogicSpacePageList, deleteLogicSpace } from '@/api/modules/dataAsset';
58 import useDataProductSpaceStore from "@/store/modules/productSpace";
59
60 const productSpaceStore = useDataProductSpaceStore();
45 61
46 const router = useRouter(); 62 const router = useRouter();
47 const { proxy } = getCurrentInstance() as any; 63 const { proxy } = getCurrentInstance() as any;
64 const userData = JSON.parse(localStorage.userData);
48 65
49 /** 卡片加载条 */ 66 /** 卡片加载条 */
50 const listDataLoading = ref(false); 67 const listDataLoading = ref(false);
51 /** 列表数据 */ 68 /** 列表数据 */
52 const listData: any = ref([{ guid: '1', name: '产品空间1' }, { guid: '2', name: '产品空间1' }, { guid: '3', name: '产品空间1' }, { guid: '4', name: '产品空间1' }, 69 const listData: any = ref([]);
53 { guid: '5', name: '产品空间1' }
54 ]);
55 70
56 const oldKeyWord = ref(""); // 记录上次输入的关键字，避免重复搜索 71 const oldKeyWord = ref(""); // 记录上次输入的关键字，避免重复搜索
57 const isEnter = ref(false); // 标识是否通过回车键触发搜索 72 const isEnter = ref(false); // 标识是否通过回车键触发搜索
...@@ -64,23 +79,23 @@ const pageInfo = ref({ ...@@ -64,23 +79,23 @@ const pageInfo = ref({
64 }); 79 });
65 80
66 const getTableData = (clear = false) => { 81 const getTableData = (clear = false) => {
67 // listDataLoading.value = true; 82 listDataLoading.value = true;
68 // getDamCatalogTable({ 83 getLogicSpacePageList({
69 // pageSize: pageInfo.value.limit, 84 pageSize: pageInfo.value.limit,
70 // pageIndex: pageInfo.value.curr, 85 pageIndex: pageInfo.value.curr,
71 // keyWord: pageInfo.value.keyWord 86 spaceName: pageInfo.value.keyWord
72 // }).then((res: any) => { 87 }).then((res: any) => {
73 // listDataLoading.value = false; 88 listDataLoading.value = false;
74 // if (res.code == proxy.$passCode) { 89 if (res.code == proxy.$passCode) {
75 // const data = res.data || {} 90 const data = res.data || {}
76 // listData.value = data.records || []; 91 listData.value = data.records || [];
77 // pageInfo.value.limit = data.pageSize 92 pageInfo.value.limit = data.pageSize
78 // pageInfo.value.curr = data.pageIndex 93 pageInfo.value.curr = data.pageIndex
79 // pageInfo.value.rows = data.totalRows 94 pageInfo.value.rows = data.totalRows
80 // } else { 95 } else {
81 // proxy.$ElMessage.error(res.msg); 96 proxy.$ElMessage.error(res.msg);
82 // } 97 }
83 // }); 98 });
84 } 99 }
85 100
86 const pageChange = (info) => { 101 const pageChange = (info) => {
...@@ -124,11 +139,35 @@ const newCreate = () => { ...@@ -124,11 +139,35 @@ const newCreate = () => {
124 } 139 }
125 140
126 const handleDataClick = (item) => { 141 const handleDataClick = (item) => {
142 let approveState = item.bizApproveState;
143 if (approveState == 'A' || approveState == 'Y') { //通过或审批中，点进去是详情
144 router.push({
145 name: 'productSpaceDetail',
146 query: {
147 guid: item.guid,
148 name: item.spaceName
149 }
150 })
151 return;
152 }
153 const staffGuid = item.createUserId || '';
154 let currentStaffGuid = userData.tenantGuid;
155 // 如果是驳回等状态，是自己创建的可以编辑。
156 if ((approveState == 'C' || approveState == 'E' || approveState == 'R')) {
157 router.push({
158 name: staffGuid == currentStaffGuid ? 'productSpaceEdit' : 'productSpaceDetail',
159 query: {
160 guid: item.guid,
161 name: item.spaceName
162 }
163 })
164 return;
165 }
127 router.push({ 166 router.push({
128 name: 'productSpaceEdit', 167 name: 'productSpaceEdit',
129 query: { 168 query: {
130 guid: item.guid, 169 guid: item.guid,
131 name: item.name 170 name: item.spaceName
132 } 171 }
133 }) 172 })
134 } 173 }
...@@ -138,19 +177,52 @@ const clickDetail = (item) => { ...@@ -138,19 +177,52 @@ const clickDetail = (item) => {
138 name: 'productSpaceDetail', 177 name: 'productSpaceDetail',
139 query: { 178 query: {
140 guid: item.guid, 179 guid: item.guid,
141 name: item.name 180 name: item.spaceName
181 }
182 })
183 }
184
185 const clickEdit = (item) => {
186 router.push({
187 name: 'productSpaceEdit',
188 query: {
189 guid: item.guid,
190 name: item.spaceName
142 } 191 }
143 }) 192 })
144 } 193 }
145 194
146 const clickDelete = (item) => { 195 const clickDelete = (item) => {
147 proxy.$openMessageBox('此操作将永久删除该空间，是否继续？', () => { 196 proxy.$openMessageBox('此操作将永久删除该逻辑空间，是否继续？', () => {
148 // TODO 197 deleteLogicSpace([item.guid]).then((res: any) => {
198 if (res?.code == proxy.$passCode) {
199 proxy.$ElMessage.success('删除成功');
200 pageInfo.value.curr = 1;
201 getTableData();
202 } else {
203 res?.msg && proxy.$ElMessage.error(res.msg);
204 }
205 })
149 }, () => { 206 }, () => {
150 proxy.$ElMessage.info('已取消删除'); 207 proxy.$ElMessage.info('已取消删除');
151 }); 208 });
152 } 209 }
153 210
211 onActivated(() => {
212 if (productSpaceStore.isRefresh) {
213 pageInfo.value.keyWord = '';
214 pageInfo.value.curr = 1;
215 getTableData();
216 productSpaceStore.setIsRefresh(false);
217 }
218 })
219
220 onBeforeMount(() => {
221 pageInfo.value.keyWord = '';
222 pageInfo.value.curr = 1;
223 getTableData();
224 })
225
154 </script> 226 </script>
155 227
156 <style lang="scss" scoped> 228 <style lang="scss" scoped>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!