Skip to content

phsl / client

Go to a project
Commit 52f9144b by 赵月辉
Options

整合订单流程接口完成

parent d40f1ddc
Showing with 273 additions and 141 deletions
.env.development
# 页面标题 # 页面标题
VITE_APP_TITLE = 若依管理系统 VITE_APP_TITLE = 先进公共服务平台
# 开发环境配置 # 开发环境配置
VITE_APP_ENV = 'development' VITE_APP_ENV = 'development'
......
.env.production
# 页面标题 # 页面标题
VITE_APP_TITLE = 若依管理系统 VITE_APP_TITLE = 先进公共服务平台
# 生产环境配置 # 生产环境配置
VITE_APP_ENV = 'production' VITE_APP_ENV = 'production'
......
.env.staging
# 页面标题 # 页面标题
VITE_APP_TITLE = 若依管理系统 VITE_APP_TITLE = 先进公共服务平台
# 生产环境配置 # 生产环境配置
VITE_APP_ENV = 'staging' VITE_APP_ENV = 'staging'
......
index.html
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<meta name="renderer" content="webkit"> <meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<title>若依管理系统</title> <title>先进公共服务平台</title>
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]--> <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
<style> <style>
html, html,
......
src/api/computingResource.js
import request from '@/utils/request' import request from '@/utils/request'
// 获取计算资源菜单 // 获取计算资源菜单
export function computilityMenu(query) { export function computilityMenu (query) {
return request({ return request({
url: '/api/v1/computilityMenu', url: '/api/v1/computilityMenu',
method: 'get', method: 'get',
params: query params: query
}) })
} }
// 根据应用类别返回对应计算机资源列表
export function getRListByCategory (query) {
return request({
url: '/api/v1/getRListByCategory',
method: 'get',
params: query
})
}
// 计算资源详情
export function getRDetail (query) {
return request({
url: '/api/v1/getRDetail',
method: 'get',
params: query
})
}
// 计算资源计算价格
export function orderComputer (query) {
return request({
url: '/api/v1/orderComputer',
method: 'post',
data: query
})
}
// 计算资源确认订单
export function orderBuy (query) {
return request({
url: '/api/v1/orderBuy',
method: 'post',
data: query
})
}
// 确认订单回显数据
export function confirmOrderInfo (query) {
return request({
url: '/api/v1/' + query.id,
method: 'get'
})
}
// 计算资源提交订单
export function orderSubmit (query) {
return request({
url: '/api/v1/orderSubmit',
method: 'post',
data: query
})
}
// 计算资源加购物车
export function shoppingAdd (query) {
return request({
url: '/api/v1/shoppingAdd',
method: 'post',
data: query
})
}
// 计算资源购物车列表
export function shoppingList (query) {
return request({
url: '/api/v1/list',
method: 'get'
})
}
// 计算资源购物车修改数量
export function shoppingEdit (query) {
return request({
url: '/api/v1/shoppingEdit',
method: 'put',
data: query
})
}
// 计算资源购物车删除接口
export function shoppingDelete (ids) {
return request({
url: `/api/v1/${ids}`,
method: 'delete'
})
}
// 计算资源购物车提交接口
export function shoppingSubmit (ids) {
return request({
url: `/api/v1/shoppingComputer/${ids}`,
method: 'get'
})
}
src/layout/user-layout.vue
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<template #title>计算资源</template> <template #title>计算资源</template>
<el-menu-item <el-menu-item
v-for="item in computilityMenuData" v-for="item in computilityMenuData"
:index="'/computingResource/resourceList/'+item.value"> :index="'/computingResource/resourceList?type='+item.value">
{{ item.name }} {{ item.name }}
</el-menu-item> </el-menu-item>
</el-sub-menu> </el-sub-menu>
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
</div> </div>
<div class="right-menu"> <div class="right-menu">
<el-button type="primary">登录/注册</el-button> <el-button type="primary" @click="$router.push('/login')">登录/注册</el-button>
</div> </div>
</div> </div>
</div> </div>
...@@ -47,25 +47,22 @@ const route = useRoute() ...@@ -47,25 +47,22 @@ const route = useRoute()
const router = useRouter() const router = useRouter()
const activeMenu = computed(() => { const activeMenu = computed(() => {
const {meta, path} = route const {meta, path, fullPath} = route
console.log(route)
// if set path, the sidebar will highlight the path you set
if (meta.activeMenu) { if (meta.activeMenu) {
return meta.activeMenu return meta.activeMenu
} }
return path const titleList = ['计算资源']
return titleList.includes(meta.title) ? fullPath : path
}) })
function menuSelect (val) { function menuSelect (val) {
router.push(val) router.push(val)
// console.log(val)
} }
const computilityMenuData = ref([]) const computilityMenuData = ref([])
function getComputilityMenu () { function getComputilityMenu () {
computilityMenu().then(res => { computilityMenu().then(res => {
console.log(res)
computilityMenuData.value = res.data computilityMenuData.value = res.data
}) })
} }
......
src/router/index.js
...@@ -78,7 +78,7 @@ export const constantRoutes = [ ...@@ -78,7 +78,7 @@ export const constantRoutes = [
meta: {title: '计算资源'}, meta: {title: '计算资源'},
children: [ children: [
{ {
path: 'resourceList/:type(\\d+)', path: 'resourceList',
component: () => import('@/views/computingResource/resourceList.vue'), component: () => import('@/views/computingResource/resourceList.vue'),
name: 'ResourceList', name: 'ResourceList',
meta: {title: '计算资源'} meta: {title: '计算资源'}
......
src/views/computingResource/confirmOrder.vue
...@@ -69,26 +69,20 @@ ...@@ -69,26 +69,20 @@
<!-- </tbody>--> <!-- </tbody>-->
<!-- </table>--> <!-- </table>-->
<el-table :data="tableData"> <el-table :data="tableData">
<el-table-column label="资源类别/型号"> <el-table-column label="资源型号" prop="model"/>
<template #default="{row}">
<p>{{ row.typeName }}</p>
<p>{{ row.model }}</p>
</template>
</el-table-column>
<el-table-column label="配置详情" width="200px"> <el-table-column label="配置详情" width="200px">
<template #default="{row}"> <template #default="{row}">
<p>CPU：I7-13900</p> <p>CPU：{{ row.cpu }}</p>
<p>GPU：4070TI</p> <p>GPU：{{ row.gpu }}</p>
<p>内存：DDR5 16GB</p> <p>内存：{{ row.memory }}</p>
<p>存储：6*4T,2*0.48T SSD</p> <p>存储：{{ row.storage }}</p>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="虚拟器存储" prop="virtualStorage"/> <el-table-column v-for="param in params" :key="param.id" :label="param.name">
<el-table-column label="网络带宽" prop="bandwidth"/> {{ param.valueName }}
<el-table-column label="公网IP" prop="ip"/> </el-table-column>
<el-table-column label="申请时长" prop="duration"/> <el-table-column label="使用数量" prop="useNum"/>
<el-table-column label="申请数量" prop="number"/> <!--<el-table-column label="配置费用" prop="publicTotalPrice"/>-->
<el-table-column label="配置费用" prop=""/>
</el-table> </el-table>
</div> </div>
</div> </div>
...@@ -100,9 +94,9 @@ ...@@ -100,9 +94,9 @@
<div class="flex-align-center"> <div class="flex-align-center">
<div class="mr20"> <div class="mr20">
<div class="price">￥1546.00</div> <div class="price">￥1546.00</div>
<!-- <div>约￥15/月</div>--> <!--<div>约￥15/月</div>-->
</div> </div>
<el-button type="primary" @click="$router.push('/computingResource/orderResult')">提交</el-button> <el-button type="primary" @click="submit">提交</el-button>
</div> </div>
</div> </div>
</div> </div>
...@@ -110,34 +104,28 @@ ...@@ -110,34 +104,28 @@
</template> </template>
<script name="ConfirmOrder" setup> <script name="ConfirmOrder" setup>
const tableData = [ import { confirmOrderInfo, orderSubmit } from '@/api/computingResource.js'
{ import { useRoute, useRouter } from 'vue-router'
typeName: '天河超级计算机', import { ref } from 'vue'
model: '天河一号纯机（无CPU）',
cpu: 'I7-13900', const route = useRoute()
gpu: '4070TI', const router = useRouter()
memory: '1TB SSD', const tableData = ref([])
storage: '0.044元/CPU核/小时', const totalPrice = ref(0)
virtualStorage: '', const params = ref([])
bandwidth: '', confirmOrderInfo({id: route.query.id}).then(res => {
ip: '', totalPrice.value = res.data.publicTotalPrice
duration: '', params.value = JSON.parse(res.data.param)
number: '' tableData.value = [res.data]
}, })
{
typeName: '天河超级计算机', function submit () {
model: '天河一号纯机（无CPU）', orderSubmit({id: route.query.id}).then(res => {
cpu: 'I7-13900', if (res.data === 1) {
gpu: '4070TI', router.replace('/computingResource/orderResult')
memory: '1TB SSD',
storage: '0.044元/CPU核/小时',
virtualStorage: '',
bandwidth: '',
ip: '',
duration: '',
number: ''
} }
] })
}
</script> </script>
...@@ -229,13 +217,15 @@ const tableData = [ ...@@ -229,13 +217,15 @@ const tableData = [
.footer-bar { .footer-bar {
padding: 18px; padding: 18px;
background-color: #FFFFFF; //background-color: #FFFFFF;
position: fixed; //position: fixed;
bottom: 0; //bottom: 0;
width: 100%; //width: 100%;
.content { .content {
margin: 0 auto; margin: 0 auto;
background-color: #FFFFFF;
padding: 20px 24px;
width: 1280px; width: 1280px;
} }
......
src/views/computingResource/orderResult.vue
...@@ -4,10 +4,10 @@ ...@@ -4,10 +4,10 @@
<div class="text">申请成功</div> <div class="text">申请成功</div>
<div class="sub-text">如有需要可返回产品页继续选购</div> <div class="sub-text">如有需要可返回产品页继续选购</div>
<div> <div>
<el-button type="primary">继续选购</el-button> <el-button type="primary" @click="$router.replace('/computingResource/resourceList')">继续选购</el-button>
</div> </div>
<div> <div>
<el-button type="default">返回首页</el-button> <el-button type="default" @click="$router.replace('/')">返回首页</el-button>
</div> </div>
</div> </div>
</template> </template>
......
src/views/computingResource/shoppingCart.vue
...@@ -10,85 +10,84 @@ ...@@ -10,85 +10,84 @@
</div> </div>
</div> </div>
<div class="page-title"> <div class="page-title">
<div>购物车 (总共{{tableData.length}})</div> <div>购物车 (总共{{ tableData.length }})</div>
</div> </div>
<div class="page-main"> <div class="page-main">
<div class="detail-info"> <div class="detail-info">
<el-table :data="tableData"> <el-table :data="tableData" @selection-change="tableSelectionChange">
<el-table-column type="selection"/> <el-table-column type="selection"/>
<el-table-column label="资源类别/型号"> <el-table-column label="资源型号" prop="model"/>
<el-table-column label="配置详情" width="150px">
<template #default="{row}"> <template #default="{row}">
<p>{{ row.typeName }}</p> <p>CPU：{{ row.cpu }}</p>
<p>{{ row.model }}</p> <p>GPU：{{ row.gpu }}</p>
<p>内存：{{ row.memory }}</p>
<p>存储：{{ row.storage }}</p>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="配置详情" width="200px">
<template #default="{row}"> <el-table-column v-for="(item,index) in params[0]" :key="item.id" :label="item.name"
<p>CPU：I7-13900</p> :width="item?.name?.length >= 8 ? '150px':''">
<p>GPU：4070TI</p> <template #default="scope">
<p>内存：DDR5 16GB</p> {{ params[scope.$index][index]['valueName'] }}
<p>存储：6*4T,2*0.48T SSD</p>
</template>
</el-table-column>
<el-table-column label="虚拟器存储(TB)" prop="virtualStorage">
<template #default="{row}">
<el-input-number
v-model="row.virtualStorage"
:min="1"
:max="10"
controls-position="right"
style="width: 80px"/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="网络带宽(MB)" prop="bandwidth">
<el-table-column label="申请数量" prop="useNum">
<template #default="{row}"> <template #default="{row}">
<el-input-number <el-input-number
v-model="row.bandwidth" v-model="row.useNum"
:min="1" :min="1"
:max="10"
controls-position="right" controls-position="right"
@change="edit(row)"
style="width: 80px"/> style="width: 80px"/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="申请时长" prop="duration"> <el-table-column label="配置费用" prop="publicTotalPrice"/>
<el-table-column align="center" label="操作">
<template #default="{row}"> <template #default="{row}">
<el-select v-model="row.duration" style="width: 90px"> <el-popconfirm title="确认删除当前订单吗" width="180px" @confirm="confirmDel(row)">
<el-option label="半年" value="1"></el-option> <template #reference>
<el-option label="一年" value="2"></el-option> <el-button link>删除</el-button>
</el-select>
</template> </template>
</el-table-column> </el-popconfirm>
<el-table-column label="申请数量" prop="number">
<template #default="{row}">
<el-input-number
v-model="row.number"
:min="1"
:max="10"
controls-position="right"
style="width: 80px"/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="配置费用" prop=""/>
<el-table-column align="center" label="操作">
<el-button text>删除</el-button>
</el-table-column>
</el-table> </el-table>
<pagination
v-show="total > 0"
:total="total"
v-model:page="pageNum"
v-model:limit="pageSize"
@pagination="getList"/>
</div> </div>
</div> </div>
<div class="footer-bar"> <div class="footer-bar">
<div class="content flex-space-between flex-align-center"> <div class="content flex-space-between flex-align-center">
<div class="flex-align-center" style="font-size: 16px">
<span>已选 ({{ ids.length }})</span>
<el-popconfirm title="确认删除当前订单吗" width="180px" @confirm="confirmDel()">
<template #reference>
<div> <div>
<span>已选 (3)</span> <el-button
<span style="margin-left: 40px;cursor: pointer">删除</span> :disabled="!ids.length"
link
style="margin-left: 40px;margin-top:2px;font-size: 16px">
删除
</el-button>
</div>
</template>
</el-popconfirm>
</div> </div>
<div class="flex-align-center"> <div class="flex-align-center right">
<div class="mr20"> <div class="mr20">
<div class="price">￥1546.00</div> <div class="price">￥{{ totalPrice }}</div>
</div> </div>
<el-button type="primary" @click="$router.push('/computingResource/orderResult')">提交</el-button> <el-button :disabled="!ids.length" type="primary" @click="submit">提交</el-button>
</div> </div>
</div> </div>
</div> </div>
...@@ -96,35 +95,79 @@ ...@@ -96,35 +95,79 @@
</template> </template>
<script name="ConfirmOrder" setup> <script name="ConfirmOrder" setup>
import { shoppingList, shoppingEdit, shoppingDelete, shoppingSubmit } from '@/api/computingResource.js'
import { ref, computed } from 'vue'
import { ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
const tableData = [ const router = useRouter()
{
typeName: '天河超级计算机', const total = ref(0)
model: '天河一号纯机（无CPU）', const pageNum = ref(1)
cpu: 'I7-13900', const pageSize = ref(10)
gpu: '4070TI', const tableData = ref([])
memory: '1TB SSD',
storage: '0.044元/CPU核/小时', const params = ref([])
virtualStorage: '',
bandwidth: '', function getList () {
ip: '', shoppingList({pageNum: pageNum.value, pageSize: pageSize.value}).then(res => {
duration: '', console.log(res)
number: '' tableData.value = res.rows
}, total.value = res.total
params.value = res.rows.map(item => {
return JSON.parse(item.param)
})
})
}
getList()
const ids = ref([])
function tableSelectionChange (value) {
ids.value = value.map(row => row.id)
}
const totalPrice = computed(() => {
const list = tableData.value.filter(item => {
return ids.value.includes(item.id)
})
let price = 0
list.forEach(i => price += parseFloat(i.publicTotalPrice))
return price
})
function edit (row) {
shoppingEdit({id: row.id, useNum: row.useNum}).then(res => {
getList()
})
}
function confirmDel (row) {
const idsValue = row?.id ? row.id : ids.value
shoppingDelete(idsValue).then(res => {
getList()
})
console.log(row)
}
function submit () {
ElMessageBox.confirm(
'确认提交订单吗',
'提示',
{ {
typeName: '天河超级计算机', confirmButtonText: '确认提交',
model: '天河一号纯机（无CPU）', cancelButtonText: '关闭',
cpu: 'I7-13900', icon: 'QuestionFilled'
gpu: '4070TI',
memory: '1TB SSD',
storage: '0.044元/CPU核/小时',
virtualStorage: '',
bandwidth: '',
ip: '',
duration: '',
number: ''
} }
] ).then(() => {
shoppingSubmit(ids.value).then(res => {
router.push('/computingResource/orderResult')
})
}).catch(() => {
})
}
</script> </script>
...@@ -218,6 +261,7 @@ const tableData = [ ...@@ -218,6 +261,7 @@ const tableData = [
padding: 18px; padding: 18px;
background-color: #FFFFFF; background-color: #FFFFFF;
position: fixed; position: fixed;
z-index: 99;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
...@@ -239,7 +283,7 @@ const tableData = [ ...@@ -239,7 +283,7 @@ const tableData = [
} }
} }
.el-button { .right .el-button {
width: 180px; width: 180px;
height: 46px; height: 46px;
font-size: 20px; font-size: 20px;
......
src/views/information/detail.vue
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
<el-breadcrumb separator="/"> <el-breadcrumb separator="/">
<el-breadcrumb-item>首页</el-breadcrumb-item> <el-breadcrumb-item>首页</el-breadcrumb-item>
<el-breadcrumb-item>活动资讯</el-breadcrumb-item> <el-breadcrumb-item>活动资讯</el-breadcrumb-item>
<el-breadcrumb-item>活动资讯详情</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
</div> </div>
......
src/views/login.vue
<template> <template>
<div class="login"> <div class="login">
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form"> <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
<h3 class="title">若依后台管理系统</h3> <h3 class="title">先进公共服务平台</h3>
<el-form-item prop="username"> <el-form-item prop="username">
<el-input <el-input
v-model="loginForm.username" v-model="loginForm.username"
......
src/views/register.vue
<template> <template>
<div class="register"> <div class="register">
<el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form"> <el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form">
<h3 class="title">若依后台管理系统</h3> <h3 class="title">先进公共服务平台</h3>
<el-form-item prop="username"> <el-form-item prop="username">
<el-input <el-input
v-model="registerForm.username" v-model="registerForm.username"
......
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