Skip to content

phsl / client

Go to a project
Commit f43c21f8 by 孙美琪
Options

相关修改

parent b463da54
Showing with 157 additions and 412 deletions
package.json
...@@ -27,6 +27,7 @@ ...@@ -27,6 +27,7 @@
"js-cookie": "3.0.5", "js-cookie": "3.0.5",
"jsencrypt": "3.3.2", "jsencrypt": "3.3.2",
"nprogress": "0.2.0", "nprogress": "0.2.0",
"pdfobject": "^2.3.1",
"pinia": "2.1.7", "pinia": "2.1.7",
"qrcode": "^1.5.3", "qrcode": "^1.5.3",
"vue": "3.3.9", "vue": "3.3.9",
......
src/views/computingResource/resourceList.vue
...@@ -182,7 +182,8 @@ ...@@ -182,7 +182,8 @@
<div class="mr20"> <div class="mr20">
<div class="price">￥{{ orderPrice / 100 }}</div> <div class="price">￥{{ orderPrice / 100 }}</div>
</div> </div>
<el-button type="primary" @click="create" :disabled="!checkbox">{{ selectedType === 1 ? '加入购物车' : '立即购买' }} <el-button type="primary" @click="create" :disabled="!checkbox">
{{ selectedType === 1 ? '加入购物车' : '立即购买' }}
</el-button> </el-button>
</div> </div>
</div> </div>
...@@ -208,11 +209,30 @@ ...@@ -208,11 +209,30 @@
> >
<img :src="qrCode.url" alt=""/> <img :src="qrCode.url" alt=""/>
</el-dialog> </el-dialog>
<el-dialog
title="购买协议"
v-model="protocol"
width="800px"
append-to-body
:align-center="true"
:close-on-click-modal="false"
@closed="clearProtocol"
>
<div class="pdf-box">
<!-- <div id="pdf-container" style="width: 100%; height: 100%;"></div>-->
<iframe
v-if="pdfUrl"
:src="pdfUrl"
style="width:100%; height:80vh;"
></iframe>
</div>
</el-dialog>
</div> </div>
</template> </template>
<script name="ResourceList" setup> <script name="ResourceList" setup>
import {ref, watch} from 'vue' import {ref, watch, nextTick} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus' import {ElMessage, ElMessageBox} from 'element-plus'
import SvgIcon from '@/components/SvgIcon/index.vue' import SvgIcon from '@/components/SvgIcon/index.vue'
import { import {
...@@ -226,6 +246,8 @@ import {useRoute, useRouter} from 'vue-router' ...@@ -226,6 +246,8 @@ import {useRoute, useRouter} from 'vue-router'
import QRCode from 'qrcode' import QRCode from 'qrcode'
import request from '@/utils/request' import request from '@/utils/request'
import {PayOrderStatusEnum} from "@/utils/constants.js"; import {PayOrderStatusEnum} from "@/utils/constants.js";
import PDFObject from 'pdfobject';
import axios from "axios";
const route = useRoute() const route = useRoute()
const router = useRouter() const router = useRouter()
...@@ -240,6 +262,9 @@ const productTypes = ref([]) ...@@ -240,6 +262,9 @@ const productTypes = ref([])
const tableData = ref([]) const tableData = ref([])
const interval = ref(undefined) const interval = ref(undefined)
const checkbox = ref(false) const checkbox = ref(false)
const protocol = ref(false)
const pdfBlobUrl = ref('');
const pdfUrl = ref('https://luhu-ltx.oss-cn-shenzhen.aliyuncs.com/20250828/文字文稿1_1756349853834.pdf')
const qrCode = ref({ const qrCode = ref({
url: '', url: '',
...@@ -267,8 +292,37 @@ watch(() => route.query.type, (value, oldValue) => { ...@@ -267,8 +292,37 @@ watch(() => route.query.type, (value, oldValue) => {
} }
}) })
function handleCheckProtocol() { async function handleCheckProtocol() {
console.log('点击') console.log('点击')
protocol.value = true
// nextTick(() => {
// PDFObject.embed("https://luhu-ltx.oss-cn-shenzhen.aliyuncs.com/20250828/文字文稿1_1756349853834.pdf", "#pdf-container", {
// height: "100%",
// pdfOpenParams: {
// view: "FitH", // 页面适配
// pagemode: "none" // 隐藏侧边栏
// }
// });
// })
// try {
// // 这里用服务器给你的 PDF 地址
// const res = await axios.get(pdfUrl, {
// responseType: "blob",
// });
// console.log(res, 'res')
// if (res.headers["content-type"].includes("pdf")) {
// pdfBlobUrl.value = URL.createObjectURL(
// new Blob([res.data], {type: "application/pdf"})
// );
// } else {
// console.error("返回的不是 PDF 文件");
// }
// // pdfBlobUrl.value = URL.createObjectURL(
// // new Blob([res.data], {type: "application/pdf"})
// // );
// } catch (e) {
// console.error("加载PDF失败", e);
// }
} }
function tabChange() { function tabChange() {
...@@ -429,34 +483,9 @@ const clearQueryInterval = () => { ...@@ -429,34 +483,9 @@ const clearQueryInterval = () => {
interval.value = undefined interval.value = undefined
} }
// function create() { const clearProtocol = () => {
// const data = initSubmitData() protocol.value = true
// if (selectedType.value === 1) { }
// shoppingAdd(data).then(res => {
// ElMessageBox.confirm(
// '添加到购物车成功',
// {
// confirmButtonText: '去提交',
// cancelButtonText: '关闭',
// type: 'success'
// }
// ).then(() => {
// router.push('/computingResource/shoppingCart')
// }).catch(() => {
// })
// })
//
// }
//
// if (selectedType.value === 2) {
// orderBuy(data).then(res => {
// router.push({
// path: '/computingResource/confirmOrder',
// query: {id: res.data}
// })
// })
// }
// }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -763,4 +792,16 @@ const clearQueryInterval = () => { ...@@ -763,4 +792,16 @@ const clearQueryInterval = () => {
cursor: pointer; cursor: pointer;
} }
} }
#pdf-container {
width: 100%; /* 设置容器宽度 */
height: 600px; /* 设置容器高度 */
border: 1px solid #ccc; /* 可选：添加边框 */
}
.pdf-box {
height: 600px;
//overflow: hidden;
overflow-y: auto;
}
</style> </style>
src/views/console/myOrder.vue
...@@ -98,14 +98,17 @@ ...@@ -98,14 +98,17 @@
v-loading="loading" v-loading="loading"
:data="orderList" :data="orderList"
:max-height="620" :max-height="620"
@selection-change="handleSelectionChange"
> >
<el-table-column type="selection" width="45" align="center"/> <!--<el-table-column type="selection" width="45" align="center"/>-->
<!--<el-table-column label="序号" align="center" prop="id"/>--> <!--<el-table-column label="序号" align="center" prop="id"/>-->
<el-table-column label="订单编号" align="center" prop="orderNo"/> <el-table-column label="商品名称" align="center" prop="spuName"/>
<el-table-column label="订单流水号" align="center" prop="no"/> <el-table-column label="订单编号" align="center" prop="no"/>
<el-table-column label="商品数量" align="center" prop="productCount"/> <!--<el-table-column label="商品数量" align="center" prop="productCount"/>-->
<el-table-column label="应付金额" align="center" prop="payPrice"/> <el-table-column label="费用" align="center" prop="payPrice">
<template #default="scope">
{{ scope.row.payPrice / 100 }}
</template>
</el-table-column>
<el-table-column label="商品类别" align="center" prop="category"> <el-table-column label="商品类别" align="center" prop="category">
<template #default="scope"> <template #default="scope">
<dict-tag <dict-tag
...@@ -115,7 +118,7 @@ ...@@ -115,7 +118,7 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
v-for="(item, index) in orderList[0]?.properties.length!==0?orderList[0]?.properties.slice(0,6):orderList[0]?.properties" v-for="(item, index) in orderList[0]?.properties.length!==0?orderList[0]?.properties.slice(0,4):orderList[0]?.properties"
:key="index" :key="index"
:label="item.propertyName" :label="item.propertyName"
> >
...@@ -123,17 +126,10 @@ ...@@ -123,17 +126,10 @@
{{ row.properties[index].valueName }} {{ row.properties[index].valueName }}
</template> </template>
</el-table-column> </el-table-column>
<!-- <el-table-column label="购买方" align="center" prop=""/>--> <el-table-column label="订单状态" align="center" prop="statusName"/>
<el-table-column label="算力金额" align="center" prop="publicTotalPrice"/> <el-table-column label="下单时间" align="center" prop="createTime" width="180">
<el-table-column label="实际金额" align="center" prop="innerTotalPrice"/>
<el-table-column label="订单状态" align="center" prop="orderStatus">
<template #default="scope">
<dict-tag :options="order_status" :value="scope.row.orderStatus"/>
</template>
</el-table-column>
<el-table-column label="申请时间" align="center" prop="submitTime" width="180">
<template #default="scope"> <template #default="scope">
<span>{{ parseTime(scope.row.submitTime, '{y}-{m}-{d}') }}</span> <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
...@@ -143,21 +139,11 @@ ...@@ -143,21 +139,11 @@
class-name="small-padding fixed-width"> class-name="small-padding fixed-width">
<template #default="scope"> <template #default="scope">
<el-button <el-button
v-if="scope.row.orderStatus === 2"
link
type="primary"
@click="handleViewReason(scope.row)"
>
查看驳回理由
</el-button>
<el-button
v-if="scope.row.orderStatus === 1"
link link
type="primary" type="primary"
@click="handleCancel(scope.row)" @click="handleDetails(scope.row)"
> >
取消 详情
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
...@@ -173,283 +159,69 @@ ...@@ -173,283 +159,69 @@
<!-- 添加或修改订单管理-需求单管理对话框 --> <!-- 添加或修改订单管理-需求单管理对话框 -->
<el-dialog :title="title" v-model="open" width="500px" append-to-body> <el-dialog :title="title" v-model="open" width="500px" append-to-body>
<el-form ref="orderRef" :model="form" :rules="rules" label-width="80px"> <div>
<el-form-item label="订单编号" prop="orderNo"> <div class="info-block">
<el-input v-model="form.orderNo" placeholder="请输入订单编号"/> <div class="info-item flex-align-center flex-space-between">
</el-form-item> <div class="label">商品名称</div>
<el-form-item label="商品类别" prop="category"> <div class="value">{{ form.spuName }}</div>
<el-select v-model="form.category" placeholder="请选择商品类别"> </div>
<el-option <div class="info-item flex-align-center flex-space-between">
v-for="dict in application_category" <div class="label">订单编号</div>
:key="dict.value" <div class="value">{{ form.no }}</div>
:label="dict.label" </div>
:value="parseInt(dict.value)" <div class="info-item flex-align-center flex-space-between">
></el-option> <div class="label">费用</div>
</el-select> <div class="value">{{ form.payPrice ? (form.payPrice / 100) : '-' }}</div>
</el-form-item>
<el-form-item label="型号" prop="model">
<el-select v-model="form.model" placeholder="请选择型号">
<el-option
v-for="dict in model"
:key="dict.value"
:label="dict.label"
:value="parseInt(dict.value)"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="CPU" prop="cpu">
<el-select v-model="form.cpu" placeholder="请选择CPU">
<el-option
v-for="dict in cpu_type"
:key="dict.value"
:label="dict.label"
:value="parseInt(dict.value)"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="GPU" prop="gpu">
<el-select v-model="form.gpu" placeholder="请选择GPU">
<el-option
v-for="dict in gpu_type"
:key="dict.value"
:label="dict.label"
:value="parseInt(dict.value)"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="内存" prop="memory">
<el-select v-model="form.memory" placeholder="请选择内存">
<el-option
v-for="dict in memory_type"
:key="dict.value"
:label="dict.label"
:value="parseInt(dict.value)"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="存储硬盘" prop="storage">
<el-select v-model="form.storage" placeholder="请选择存储硬盘">
<el-option
v-for="dict in storage_type"
:key="dict.value"
:label="dict.label"
:value="parseInt(dict.value)"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="算力金额" prop="publicTotalPrice">
<el-input v-model="form.publicTotalPrice" placeholder="请输入算力金额"/>
</el-form-item>
<el-form-item label="实际金额" prop="innerTotalPrice">
<el-input v-model="form.innerTotalPrice" placeholder="请输入实际金额"/>
</el-form-item>
<el-form-item label="状态" prop="orderStatus">
<el-radio-group v-model="form.orderStatus">
<el-radio
v-for="dict in order_status"
:key="dict.value"
:label="parseInt(dict.value)"
>{{ dict.label }}
</el-radio
>
</el-radio-group>
</el-form-item>
<el-form-item label="网络带宽" prop="networkId">
<el-input v-model="form.networkId" placeholder="请输入网络带宽"/>
</el-form-item>
<el-form-item label="额外IP数量" prop="ipNum">
<el-input v-model="form.ipNum" placeholder="请输入额外IP数量"/>
</el-form-item>
<el-form-item label="虚拟机存储" prop="vmStorage">
<el-input v-model="form.vmStorage" placeholder="请输入虚拟机存储"/>
</el-form-item>
<el-form-item label="申请时间" prop="submitTime">
<el-date-picker
clearable
v-model="form.submitTime"
type="date"
value-format="YYYY-MM-DD"
placeholder="请选择申请时间"
>
</el-date-picker>
</el-form-item>
<el-form-item label="应用人" prop="applyUser">
<el-input v-model="form.applyUser" placeholder="请输入应用人"/>
</el-form-item>
<el-form-item label="使用期限" prop="useTime">
<el-input v-model="form.useTime" placeholder="请输入使用期限"/>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注"/>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div> </div>
</template>
</el-dialog>
<!-- 详情订单管理-需求单管理对话框 --> <div class="info-item flex-align-center flex-space-between">
<el-dialog :title="title" v-model="sOpen" width="500px" append-to-body> <div class="label">商品类别</div>
<el-form ref="orderRef" :model="form" :rules="rules" label-width="80px"> <div class="value">{{ form.categoryName }}</div>
<el-form-item label="订单编号" prop="orderNo"> </div>
<el-input v-model="form.orderNo" placeholder="请输入订单编号"/>
</el-form-item>
<el-form-item label="商品类别" prop="category">
<el-select v-model="form.category" placeholder="请选择商品类别">
<el-option
v-for="dict in application_category"
:key="dict.value"
:label="dict.label"
:value="parseInt(dict.value)"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="型号" prop="model">
<el-select v-model="form.model" placeholder="请选择型号">
<el-option
v-for="dict in model"
:key="dict.value"
:label="dict.label"
:value="parseInt(dict.value)"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="CPU" prop="cpu">
<el-select v-model="form.cpu" placeholder="请选择CPU">
<el-option
v-for="dict in cpu_type"
:key="dict.value"
:label="dict.label"
:value="parseInt(dict.value)"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="GPU" prop="gpu">
<el-select v-model="form.gpu" placeholder="请选择GPU">
<el-option
v-for="dict in gpu_type"
:key="dict.value"
:label="dict.label"
:value="parseInt(dict.value)"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="内存" prop="memory">
<el-select v-model="form.memory" placeholder="请选择内存">
<el-option
v-for="dict in memory_type"
:key="dict.value"
:label="dict.label"
:value="parseInt(dict.value)"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="存储硬盘" prop="storage">
<el-select v-model="form.storage" placeholder="请选择存储硬盘">
<el-option
v-for="dict in storage_type"
:key="dict.value"
:label="dict.label"
:value="parseInt(dict.value)"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="算力金额" prop="price">
<el-input v-model="form.price" placeholder="请输入算力金额"/>
</el-form-item>
<el-form-item label="状态" prop="orderStatus">
<el-radio-group v-model="form.orderStatus">
<el-radio
v-for="dict in order_status"
:key="dict.value"
:label="parseInt(dict.value)"
>{{ dict.label }}
</el-radio
>
</el-radio-group>
</el-form-item>
<el-form-item label="网络带宽" prop="networkId">
<el-input v-model="form.networkId" placeholder="请输入网络带宽"/>
</el-form-item>
<el-form-item label="额外IP数量" prop="ipNum">
<el-input v-model="form.ipNum" placeholder="请输入额外IP数量"/>
</el-form-item>
<el-form-item label="虚拟机存储" prop="vmStorage">
<el-input v-model="form.vmStorage" placeholder="请输入虚拟机存储"/>
</el-form-item>
<el-form-item label="申请时间" prop="submitTime">
<el-date-picker
clearable
v-model="form.submitTime"
type="date"
value-format="YYYY-MM-DD"
placeholder="请选择申请时间"
>
</el-date-picker>
</el-form-item>
<el-form-item label="应用人" prop="applyUser">
<el-input v-model="form.applyUser" placeholder="请输入应用人"/>
</el-form-item>
<el-form-item label="使用期限" prop="useTime">
<el-input v-model="form.useTime" placeholder="请输入使用期限"/>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注"/>
</el-form-item>
</el-form> </div>
<div class="info-block">
<div class="info-item flex-align-center flex-space-between" v-for="(i,index) in form.properties"
:key="i.index">
<div class="label">{{ i.propertyName }}</div>
<div class="value">{{ i.valueName }}</div>
</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">订单状态</div>
<div class="value">{{ form.statusName }}</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">下单时间</div>
<div class="value">{{ parseTime(form.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</div>
</div>
</div>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">关闭</el-button>
<el-button @click="cancel">取 消</el-button>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script setup name="MyOrder"> <script setup name="MyOrder">
import { import {
listOrder, listOrder
getOrder,
delOrder,
addOrder,
updateOrder,
cancelOrder,
orderReason
} from '@/api/computility/order' } from '@/api/computility/order'
import {ElMessageBox} from 'element-plus' import {parseTime} from "../../utils/ruoyi.js";
import {getResources} from "@/api/computility/resources.js";
const {proxy} = getCurrentInstance() const {proxy} = getCurrentInstance()
// const {
// memory_type,
// cpu_type,
// storage_type,
// order_status,
// model,
// application_category,
// gpu_type
// } = proxy.useDict(
// 'memory_type',
// 'cpu_type',
// 'storage_type',
// 'order_status',
// 'model',
// 'application_category',
// 'gpu_type'
// )
const orderList = ref([]) const orderList = ref([])
const open = ref(false) const open = ref(false)
const sOpen = ref(false) const sOpen = ref(false)
const loading = ref(true) const loading = ref(true)
const showSearch = ref(true) const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0) const total = ref(0)
const title = ref('') const title = ref('')
...@@ -561,104 +333,13 @@ function resetQuery() { ...@@ -561,104 +333,13 @@ function resetQuery() {
handleQuery() handleQuery()
} }
// 多选框选中数据 function handleDetails(row) {
function handleSelectionChange(selection) {
ids.value = selection.map((item) => item.id)
single.value = selection.length != 1
multiple.value = !selection.length
}
/** 新增按钮操作 */
function handleAdd() {
reset()
open.value = true
title.value = '添加订单管理-需求单管理'
}
/** 修改按钮操作 */
function handleUpdate(row) {
reset()
const _id = row.id || ids.value const _id = row.id || ids.value
getOrder(_id).then((response) => { // getResources({id: _id}).then(response => {
form.value = response.data // form.value = response.data
open.value = true open.value = true
title.value = '修改订单管理-需求单管理' title.value = '查看订单'
}) // })
}
/** 提交按钮 */
function submitForm() {
proxy.$refs['orderRef'].validate((valid) => {
if (valid) {
if (form.value.id != null) {
updateOrder(form.value).then((response) => {
proxy.$modal.msgSuccess('修改成功')
open.value = false
getList()
})
} else {
addOrder(form.value).then((response) => {
proxy.$modal.msgSuccess('新增成功')
open.value = false
getList()
})
}
}
})
}
/** 删除按钮操作 */
function handleDelete(row) {
const _ids = row.id || ids.value
proxy.$modal
.confirm('是否确认删除订单管理-需求单管理编号为"' + _ids + '"的数据项？')
.then(function () {
return delOrder(_ids)
})
.then(() => {
getList()
proxy.$modal.msgSuccess('删除成功')
})
.catch(() => {
})
}
/** 取消按钮操作 */
function handleCancel(row) {
proxy.$modal
.confirm('是否取消该订单申请')
.then(function () {
return cancelOrder({id: row.id})
})
.then(() => {
getList()
proxy.$modal.msgSuccess('取消成功')
})
.catch(() => {
})
}
/** 查看驳回理由按钮操作 */
function handleViewReason(row) {
orderReason(row.id).then(res => {
console.log(res)
ElMessageBox.alert(res.data, '驳回理由', {
confirmButtonText: '关闭',
callback: (action) => {
}
})
})
}
/** 导出按钮操作 */
function handleExport() {
proxy.download(
'computility/order/export',
{
...queryParams.value
},
`order_${new Date().getTime()}.xlsx`
)
} }
getList() getList()
...@@ -676,4 +357,26 @@ getList() ...@@ -676,4 +357,26 @@ getList()
.pagination-container { .pagination-container {
background-color: transparent; background-color: transparent;
} }
.info-block {
background-color: #ffffff;
padding: 4px 0;
//margin-bottom: 14px;
}
.info-item {
padding: 12px 20px;
.label {
font-weight: 400;
font-size: 16px;
color: #626566;
}
.value {
font-weight: bold;
font-size: 16px;
color: #303233;
}
}
</style> </style>
src/views/console/naturalResources.vue
...@@ -127,7 +127,7 @@ function handleUpdate(row) { ...@@ -127,7 +127,7 @@ function handleUpdate(row) {
getResources({id: _id}).then(response => { getResources({id: _id}).then(response => {
form.value = response.data form.value = response.data
open.value = true open.value = true
title.value = '查看订单' title.value = '查看详情'
}) })
} }
......
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