Skip to content

phsl / client

Go to a project
Commit 21fe1bfc by renyizhao
Options

动态规格

parent 4154bc2d
Showing with 169 additions and 87 deletions
src/views/computingResource/confirmOrder.vue
......@@ -63,10 +63,10 @@
<el-table-column label="资源型号" prop="model"/>
<el-table-column label="配置详情" width="200px">
<template #default="{row}">
<p>CPU：{{ row.cpu }}</p>
<p>GPU：{{ row.gpu }}</p>
<p>内存：{{ row.memory }}</p>
<p>存储：{{ row.storage }}</p>
<div v-for="(value, key) in row.specMap" :key="key" class="spec-row">
<span class="spec-label">{{ key }}：</span>
<span class="spec-value">{{ value }}</span>
</div>
</template>
</el-table-column>
<el-table-column v-for="param in params" :key="param.id" :label="param.name">
......
src/views/computingResource/orderResult.vue
......@@ -3,6 +3,16 @@
<img src="@/assets/images/order-success.png" alt="">
<div class="text">申请成功</div>
<div class="sub-text">如有需要可返回产品页继续选购</div>
<!-- 规格展示（仅当路由 state 传入 specMap 时显示） -->
<div v-if="specEntries.length > 0" class="spec-block">
<div class="spec-title">订单规格</div>
<div v-for="item in specEntries" :key="item.key" class="spec-row">
<span class="spec-label">{{ item.key }}：</span>
<span class="spec-value">{{ item.value }}</span>
</div>
</div>
<div>
<el-button type="primary" @click="$router.replace('/computingResource/resourceList')">继续选购</el-button>
</div>
......@@ -13,7 +23,20 @@
</template>
<script setup name="OrderResult">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
// 从路由 state / query 读 specMap
const specEntries = computed(() => {
const map = (route.params && route.params.specMap)
|| (route.query && route.query.specMap)
|| (window.history.state && window.history.state.specMap)
|| null
if (!map || typeof map !== 'object') return []
return Object.keys(map).map(key => ({ key, value: map[key] }))
})
</script>
<style scoped lang="scss">
......@@ -46,5 +69,35 @@
font-weight: 400;
font-size: 20px;
}
.spec-block {
width: 368px;
background: #F7F8F9;
border-radius: 8px;
padding: 16px 24px;
margin-bottom: 16px;
}
.spec-title {
font-weight: 600;
font-size: 14px;
color: #303233;
margin-bottom: 8px;
}
.spec-row {
font-size: 14px;
color: #626566;
line-height: 22px;
}
.spec-label {
color: #626566;
}
.spec-value {
color: #303233;
font-weight: 500;
}
}
</style>
src/views/computingResource/resourceList.vue
......@@ -134,10 +134,15 @@
<div v-if="showVersion === 1" class="version-1">
<el-table v-if="tableData.length !== 0" :data="tableData" :max-height="490" style="width: 100%">
<el-table-column prop="name" label="型号" width="190px" sortable/>
<el-table-column prop="cpu" label="CPU" sortable/>
<el-table-column prop="gpu" label="GPU" sortable/>
<el-table-column prop="ram" label="内存" sortable/>
<el-table-column prop="storage" label="存储" sortable/>
<el-table-column label="规格" min-width="220">
<template #default="{ row }">
<div v-for="(value, key) in row.specMap" :key="key" class="spec-row flex">
<span class="spec-label" style="white-space: nowrap;">{{ key }}：</span>
<span class="spec-value">{{ value }}</span>
</div>
<div v-if="!row.specMap || Object.keys(row.specMap).length === 0">-</div>
</template>
</el-table-column>
<el-table-column prop="location" label="所在地" sortable/>
<!-- 新增的价格列（醒目字体） -->
<el-table-column label="价格" width="200px">
......@@ -177,31 +182,18 @@
</div>
<div class="bottom-info">
<el-row>
<el-col>
<div class="parameter-item">
<div class="label">CPU</div>
<div class="value">{{ item.cpu || '-' }}</div>
</div>
</el-col>
<el-col>
<div class="parameter-item">
<div class="label">GPU</div>
<div class="value">{{ item.gpu || '-' }}</div>
</div>
</el-col>
<el-col>
<div class="parameter-item">
<div class="label">内存</div>
<div class="value">{{ item.ram || '-' }}</div>
</div>
</el-col>
<el-col>
<div class="parameter-item">
<div class="label">存储</div>
<div class="value">{{ item.storage || '-' }}</div>
<el-col :span="24">
<div class="parameter-item height276">
<div>
<div v-for="(value, key) in item.specMap" :key="key" class="spec-row">
<span class="label">{{ key }}：</span>
<span class="value">{{ value }}</span>
</div>
<span v-if="!item.specMap || Object.keys(item.specMap).length === 0">-</span>
</div>
</div>
</el-col>
<el-col>
<el-col :span="24">
<div class="parameter-item">
<div class="label">所在地</div>
<div class="value">{{ item.location || '-' }}</div>
......@@ -242,33 +234,23 @@
<template #default>
<div class="info-block">
<div class="info-item flex-align-center flex-space-between">
<div class="label">类别</div>
<div class="label" style="width: 250px;">商品名称</div>
<div class="value">{{ productDetail.name }}</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<!-- <div class="info-item flex-align-center flex-space-between">
<div class="label">型号</div>
<div class="value">{{ productDetail.name }}</div>
</div>
</div> -->
</div>
<div class="info-block">
<div class="info-item flex-align-center flex-space-between">
<div class="label">CPU</div>
<div class="value">{{ productDetail.cpu || '-' }}</div>
<div v-for="(value, key) in productDetail.specMap" :key="key" class="info-item flex-align-center flex-space-between">
<div class="label" style="width: 250px">{{ key }}</div>
<div class="value">{{ value || '-' }}</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">GPU</div>
<div class="value">{{ productDetail.gpu || '-' }}</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">内存</div>
<div class="value">{{ productDetail.ram || '-' }}</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">存储</div>
<div class="value">{{ productDetail.storage || '-' }}</div>
<div v-if="!productDetail.specMap || Object.keys(productDetail.specMap).length === 0" class="info-item flex-align-center flex-space-between">
<div class="label">规格</div>
<div class="value">-</div>
</div>
<!-- 服务器IP已隐藏 -->
<!-- <div class="info-item flex-align-center flex-space-between">
......@@ -276,7 +258,7 @@
<div class="value">{{ productDetail.ip || '-' }}</div>
</div> -->
<div class="info-item flex-align-center flex-space-between">
<div class="label">服务器所在地</div>
<div class="label" style="width: 250px">服务器所在地</div>
<div class="value">{{ productDetail.location || '-' }}</div>
</div>
</div>
......@@ -1286,6 +1268,11 @@ onMounted(() => {
margin-bottom: 15px;
}
.height276 {
height: 276px;
overflow-y: auto;
}
.label {
font-weight: 500;
font-size: 14px;
......@@ -1370,6 +1357,22 @@ onMounted(() => {
}
}
/* 表格 / 卡片内的规格行紧凑显示 */
.spec-row {
font-size: 13px;
line-height: 22px;
text-align: left;
}
.spec-label {
color: #626566;
}
.spec-value {
color: #303233;
font-weight: 500;
}
.drawer-footer {
padding: 20px 48px 10px 48px;
......
src/views/console/myOrder.vue
......@@ -113,10 +113,15 @@
</el-table-column>
<el-table-column label="资源类型" align="center" prop="categoryName"/>
<el-table-column label="CPU" align="center" prop="cpu"/>
<el-table-column label="GPU" align="center" prop="gpu"/>
<el-table-column label="内存" align="center" prop="ram"/>
<el-table-column label="存储" align="center" prop="storage"/>
<el-table-column label="规格" align="center" min-width="220">
<template #default="scope">
<div v-for="(value, key) in scope.row.specMap" :key="key" class="spec-row flex">
<span class="spec-label" style="white-space: nowrap;">{{ key }}：</span>
<span class="spec-value">{{ value }}</span>
</div>
<div v-if="!scope.row.specMap || Object.keys(scope.row.specMap).length === 0">-</div>
</template>
</el-table-column>
<el-table-column label="所在地" align="center" prop="location"/>
<el-table-column label="订单状态" align="center" prop="status">
<template #default="scope">
......@@ -210,21 +215,13 @@
</div>
<div class="info-block">
<div class="info-item flex-align-center flex-space-between">
<div class="label">CPU</div>
<div class="value">{{ form.cpu || '-' }}</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">GPU</div>
<div class="value">{{ form.gpu || '-' }}</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">内存</div>
<div class="value">{{ form.ram || '-' }}</div>
<div v-for="(value, key) in form.specMap" :key="key" class="info-item flex-align-center flex-space-between">
<div class="label">{{ key }}</div>
<div class="value">{{ value || '-' }}</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">存储</div>
<div class="value">{{ form.storage || '-' }}</div>
<div v-if="!form.specMap || Object.keys(form.specMap).length === 0" class="info-item flex-align-center flex-space-between">
<div class="label">规格</div>
<div class="value">-</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">服务器IP</div>
......@@ -459,6 +456,22 @@ loadCategories()
}
}
/* 表格内的规格行紧凑显示 */
.spec-row {
font-size: 13px;
line-height: 20px;
text-align: left;
}
.spec-label {
color: #626566;
}
.spec-value {
color: #303233;
font-weight: 500;
}
/* Limit properties column to 200px width and 2 lines */
.properties-cell {
width: 400px;
......
src/views/console/naturalResources.vue
......@@ -3,10 +3,15 @@
<el-table v-loading="loading" :data="resourcesList" :max-height="620">
<el-table-column label="订单编号" align="center" prop="orderNo"/>
<el-table-column label="资源名称" align="center" prop="spuName"/>
<el-table-column label="CPU" align="center" prop="cpu"/>
<el-table-column label="GPU" align="center" prop="gpu"/>
<el-table-column label="内存" align="center" prop="ram"/>
<el-table-column label="存储" align="center" prop="storage"/>
<el-table-column label="规格" align="center" min-width="220">
<template #default="scope">
<div v-for="(value, key) in scope.row.specMap" :key="key" class="spec-row flex">
<span class="spec-label" style="white-space: nowrap;">{{ key }}：</span>
<span class="spec-value">{{ value }}</span>
</div>
<div v-if="!scope.row.specMap || Object.keys(scope.row.specMap).length === 0">-</div>
</template>
</el-table-column>
<el-table-column label="所在地" align="center" prop="location"/>
<el-table-column label="租期" align="center">
<template #default="scope">
......@@ -57,21 +62,13 @@
<div class="value">{{ form.spuName }}</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">CPU</div>
<div class="value">{{ form.cpu || '-' }}</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">GPU</div>
<div class="value">{{ form.gpu || '-' }}</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">内存</div>
<div class="value">{{ form.ram || '-' }}</div>
<div v-for="(value, key) in form.specMap" :key="key" class="info-item flex-align-center flex-space-between">
<div class="label">{{ key }}</div>
<div class="value">{{ value || '-' }}</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">存储</div>
<div class="value">{{ form.storage || '-' }}</div>
<div v-if="!form.specMap || Object.keys(form.specMap).length === 0" class="info-item flex-align-center flex-space-between">
<div class="label">规格</div>
<div class="value">-</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">服务器IP</div>
......@@ -212,4 +209,20 @@ getList()
color: #303233;
}
}
/* 表格内的规格行紧凑显示 */
.spec-row {
font-size: 13px;
line-height: 20px;
text-align: left;
}
.spec-label {
color: #626566;
}
.spec-value {
color: #303233;
font-weight: 500;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment