Skip to content

phsl / client

Go to a project
Commit 53df5ac2 by 赵月辉
Options

增加订单，资源页面

parent e17762bd
Showing with 1504 additions and 8 deletions
src/api/computility/order.js 0 → 100644
import request from '@/utils/request'
// 查询订单管理-需求单管理列表
export function listOrder(query) {
return request({
url: '/computility/order/list',
method: 'get',
params: query
})
}
// 查询订单管理-需求单管理详细
export function getOrder(id) {
return request({
url: '/computility/order/' + id,
method: 'get'
})
}
// 新增订单管理-需求单管理
export function addOrder(data) {
return request({
url: '/computility/order',
method: 'post',
data: data
})
}
// 修改订单管理-需求单管理
export function updateOrder(data) {
return request({
url: '/computility/order',
method: 'put',
data: data
})
}
// 删除订单管理-需求单管理
export function delOrder(id) {
return request({
url: '/computility/order/' + id,
method: 'delete'
})
}
src/api/computility/resources.js 0 → 100644
import request from '@/utils/request'
// 查询订单管理-用户资源管理列表
export function listResources(query) {
return request({
url: '/computility/resources/list',
method: 'get',
params: query
})
}
// 查询订单管理-用户资源管理详细
export function getResources(id) {
return request({
url: '/computility/resources/' + id,
method: 'get'
})
}
// 新增订单管理-用户资源管理
export function addResources(data) {
return request({
url: '/computility/resources',
method: 'post',
data: data
})
}
// 修改订单管理-用户资源管理
export function updateResources(data) {
return request({
url: '/computility/resources',
method: 'put',
data: data
})
}
// 删除订单管理-用户资源管理
export function delResources(id) {
return request({
url: '/computility/resources/' + id,
method: 'delete'
})
}
src/api/system/user.js
......@@ -10,6 +10,16 @@ export function listUser(query) {
})
}
// 查询用户列表(ID,USERNMAE)
export function getAllUser(query) {
return request({
url: '/system/user/allList',
method: 'get',
params: query
})
}
// 查询用户详细
export function getUser(userId) {
return request({
......
src/views/console/myOrder.vue
<template>
<div>我的订单</div>
<div class="app-container">
<el-form
:model="queryParams"
ref="queryRef"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="订单编号" prop="orderNo">
<el-input
v-model="queryParams.orderNo"
placeholder="请输入订单编号"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="商品类别" prop="category">
<el-select
v-model="queryParams.category"
placeholder="请选择商品类别"
clearable
>
<el-option
v-for="dict in application_category"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="型号" prop="model">
<el-select
v-model="queryParams.model"
placeholder="请选择型号"
clearable
>
<el-option
v-for="dict in model"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="CPU" prop="cpu">
<el-select v-model="queryParams.cpu" placeholder="请选择CPU" clearable>
<el-option
v-for="dict in cpu_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="GPU" prop="gpu">
<el-select v-model="queryParams.gpu" placeholder="请选择GPU" clearable>
<el-option
v-for="dict in gpu_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="内存" prop="memory">
<el-select
v-model="queryParams.memory"
placeholder="请选择内存"
clearable
>
<el-option
v-for="dict in memory_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<!-- <el-form-item label="存储硬盘" prop="storage">-->
<!-- <el-select-->
<!-- v-model="queryParams.storage"-->
<!-- placeholder="请选择存储硬盘"-->
<!-- clearable-->
<!-- >-->
<!-- <el-option-->
<!-- v-for="dict in storage_type"-->
<!-- :key="dict.value"-->
<!-- :label="dict.label"-->
<!-- :value="dict.value"-->
<!-- />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item label="算力金额" prop="price">
<el-input
v-model="queryParams.price"
placeholder="请输入算力金额"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<!-- <el-form-item label="状态" prop="orderStatus">-->
<!-- <el-select-->
<!-- v-model="queryParams.orderStatus"-->
<!-- placeholder="请选择状态"-->
<!-- clearable-->
<!-- >-->
<!-- <el-option-->
<!-- v-for="dict in order_status"-->
<!-- :key="dict.value"-->
<!-- :label="dict.label"-->
<!-- :value="dict.value"-->
<!-- />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="网络带宽" prop="networkId">-->
<!-- <el-input-->
<!-- v-model="queryParams.networkId"-->
<!-- placeholder="请输入网络带宽"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="额外IP数量" prop="ipNum">-->
<!-- <el-input-->
<!-- v-model="queryParams.ipNum"-->
<!-- placeholder="请输入额外IP数量"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="虚拟机存储" prop="vmStorage">-->
<!-- <el-input-->
<!-- v-model="queryParams.vmStorage"-->
<!-- placeholder="请输入虚拟机存储"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<el-form-item label="申请时间" prop="submitTime">
<el-date-picker
clearable
v-model="queryParams.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="queryParams.applyUser"-->
<!-- placeholder="请输入应用人"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="使用期限" prop="useTime">-->
<!-- <el-input-->
<!-- v-model="queryParams.useTime"-->
<!-- placeholder="请输入使用期限"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery"
>搜索
</el-button
>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- <el-row :gutter="10" class="mb8">-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- plain-->
<!-- icon="Plus"-->
<!-- @click="handleAdd"-->
<!-- v-hasPermi="['computility:order:add']"-->
<!-- >新增</el-button-->
<!-- >-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="success"-->
<!-- plain-->
<!-- icon="Edit"-->
<!-- :disabled="single"-->
<!-- @click="handleUpdate"-->
<!-- v-hasPermi="['computility:order:edit']"-->
<!-- >修改</el-button-->
<!-- >-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="danger"-->
<!-- plain-->
<!-- icon="Delete"-->
<!-- :disabled="multiple"-->
<!-- @click="handleDelete"-->
<!-- v-hasPermi="['computility:order:remove']"-->
<!-- >删除</el-button-->
<!-- >-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="warning"-->
<!-- plain-->
<!-- icon="Download"-->
<!-- @click="handleExport"-->
<!-- v-hasPermi="['computility:order:export']"-->
<!-- >导出</el-button-->
<!-- >-->
<!-- </el-col>-->
<!-- <right-toolbar-->
<!-- v-model:showSearch="showSearch"-->
<!-- @queryTable="getList"-->
<!-- ></right-toolbar>-->
<!-- </el-row>-->
<el-table
v-loading="loading"
:data="orderList"
:max-height="620"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="序号" align="center" prop="id"/>
<el-table-column label="订单编号" align="center" prop="orderNo"/>
<el-table-column label="商品类别" align="center" prop="category">
<template #default="scope">
<dict-tag
:options="application_category"
:value="scope.row.category"
/>
</template>
</el-table-column>
<el-table-column label="型号" align="center" prop="model">
<template #default="scope">
<dict-tag :options="model" :value="scope.row.model"/>
</template>
</el-table-column>
<el-table-column label="CPU" align="center" prop="cpu">
<template #default="scope">
<dict-tag :options="cpu_type" :value="scope.row.cpu"/>
</template>
</el-table-column>
<el-table-column label="GPU" align="center" prop="gpu">
<template #default="scope">
<dict-tag :options="gpu_type" :value="scope.row.gpu"/>
</template>
</el-table-column>
<el-table-column label="内存" align="center" prop="memory">
<template #default="scope">
<dict-tag :options="memory_type" :value="scope.row.memory"/>
</template>
</el-table-column>
<el-table-column label="存储" align="center" prop="storage">
<template #default="scope">
<dict-tag :options="storage_type" :value="scope.row.storage"/>
</template>
</el-table-column>
<el-table-column label="购买方" align="center" prop=""/>
<el-table-column label="算力金额" align="center" prop="price"/>
<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">
<span>{{ parseTime(scope.row.submitTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<!-- <el-table-column-->
<!-- label="操作"-->
<!-- align="center"-->
<!-- class-name="small-padding fixed-width"-->
<!-- >-->
<!-- <template #default="scope">-->
<!-- <el-button-->
<!-- link-->
<!-- type="primary"-->
<!-- icon="Edit"-->
<!-- @click="handleUpdate(scope.row)"-->
<!-- v-hasPermi="['computility:order:edit']"-->
<!-- >详情</el-button-->
<!-- >-->
<!-- <el-button-->
<!-- link-->
<!-- type="primary"-->
<!-- icon="Delete"-->
<!-- @click="handleDelete(scope.row)"-->
<!-- v-hasPermi="['computility:order:remove']"-->
<!-- >删除</el-button-->
<!-- >-->
<!-- <el-button-->
<!-- link-->
<!-- type="primary"-->
<!-- icon="Edit"-->
<!-- @click="handleUpdate(scope.row)"-->
<!-- v-hasPermi="['computility:order:edit']"-->
<!-- >修改</el-button-->
<!-- >-->
<!-- </template>-->
<!-- </el-table-column>-->
</el-table>
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改订单管理-需求单管理对话框 -->
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
<el-form ref="orderRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="订单编号" prop="orderNo">
<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>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
<!-- 详情订单管理-需求单管理对话框 -->
<el-dialog :title="title" v-model="sOpen" width="500px" append-to-body>
<el-form ref="orderRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="订单编号" prop="orderNo">
<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>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
<script setup name="Order">
import {
listOrder,
getOrder,
delOrder,
addOrder,
updateOrder
} from '@/api/computility/order'
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 open = ref(false)
const sOpen = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref('')
const data = reactive({
form: {},
queryParams: {
pageNum: 1,
pageSize: 10,
orderNo: null,
category: null,
model: null,
cpu: null,
gpu: null,
memory: null,
storage: null,
price: null,
orderStatus: null,
networkId: null,
ipNum: null,
vmStorage: null,
submitTime: null,
applyUser: null,
useTime: null
},
rules: {
category: [
{required: true, message: '商品类别不能为空', trigger: 'change'}
],
model: [{required: true, message: '型号不能为空', trigger: 'change'}],
cpu: [{required: true, message: 'CPU不能为空', trigger: 'change'}],
gpu: [{required: true, message: 'GPU不能为空', trigger: 'change'}],
memory: [{required: true, message: '内存不能为空', trigger: 'change'}],
storage: [
{required: true, message: '存储硬盘不能为空', trigger: 'change'}
],
orderStatus: [
{required: true, message: '状态不能为空', trigger: 'change'}
],
networkId: [
{required: true, message: '网络带宽不能为空', trigger: 'blur'}
],
submitTime: [
{required: true, message: '申请时间不能为空', trigger: 'blur'}
],
applyUser: [{required: true, message: '应用人不能为空', trigger: 'blur'}],
useTime: [{required: true, message: '使用期限不能为空', trigger: 'blur'}],
createTime: [
{required: true, message: '创建时间不能为空', trigger: 'blur'}
]
}
})
const {queryParams, form, rules} = toRefs(data)
/** 查询订单管理-需求单管理列表 */
function getList () {
loading.value = true
listOrder(queryParams.value).then((response) => {
orderList.value = response.rows
total.value = response.total
loading.value = false
})
}
// 取消按钮
function cancel () {
open.value = false
reset()
}
// 表单重置
function reset () {
form.value = {
id: null,
orderNo: null,
category: null,
model: null,
cpu: null,
gpu: null,
memory: null,
storage: null,
price: null,
orderStatus: null,
networkId: null,
ipNum: null,
vmStorage: null,
submitTime: null,
applyUser: null,
useTime: null,
createTime: null,
createBy: null,
updateBy: null,
updateTime: null,
remark: null,
delFlag: null
}
proxy.resetForm('orderRef')
}
/** 搜索按钮操作 */
function handleQuery () {
queryParams.value.pageNum = 1
getList()
}
/** 重置按钮操作 */
function resetQuery () {
proxy.resetForm('queryRef')
handleQuery()
}
// 多选框选中数据
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
getOrder(_id).then((response) => {
form.value = response.data
open.value = true
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 handleExport () {
proxy.download(
'computility/order/export',
{
...queryParams.value
},
`order_${new Date().getTime()}.xlsx`
)
}
getList()
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
.el-form {
padding: 20px 20px 0 20px;
border-radius: 4px;
background-color: #FFFFFF;
margin-bottom: 20px;
}
.pagination-container {
background-color: transparent;
}
</style>
src/views/console/naturalResources.vue
<script setup>
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="订单编号" prop="orderNo">
<el-input
v-model="queryParams.orderNo"
placeholder="请输入订单编号"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="商品类别" prop="category">
<el-select v-model="queryParams.category" placeholder="请选择商品类别" clearable>
<el-option
v-for="dict in application_category"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="型号" prop="model">
<el-select v-model="queryParams.model" placeholder="请选择型号" clearable>
<el-option
v-for="dict in model"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="CPU" prop="cpu">
<el-select v-model="queryParams.cpu" placeholder="请选择CPU" clearable>
<el-option
v-for="dict in cpu_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="GPU" prop="gpu">
<el-select v-model="queryParams.gpu" placeholder="请选择GPU" clearable>
<el-option
v-for="dict in gpu_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="内存" prop="memory">
<el-select v-model="queryParams.memory" placeholder="请选择内存" clearable>
<el-option
v-for="dict in memory_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<!-- <el-form-item label="存储硬盘" prop="storage">-->
<!-- <el-select v-model="queryParams.storage" placeholder="请选择存储硬盘" clearable>-->
<!-- <el-option-->
<!-- v-for="dict in storage_type"-->
<!-- :key="dict.value"-->
<!-- :label="dict.label"-->
<!-- :value="dict.value"-->
<!-- />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="算力金额" prop="price">-->
<!-- <el-input-->
<!-- v-model="queryParams.price"-->
<!-- placeholder="请输入算力金额"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<el-form-item label="资源状态" prop="sourceStatus">
<el-select v-model="queryParams.sourceStatus" placeholder="请选择资源状态" clearable>
<el-option
v-for="dict in source_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<!-- <el-form-item label="网络带宽" prop="networkId">-->
<!-- <el-input-->
<!-- v-model="queryParams.networkId"-->
<!-- placeholder="请输入网络带宽"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="额外IP数量" prop="ipNum">-->
<!-- <el-input-->
<!-- v-model="queryParams.ipNum"-->
<!-- placeholder="请输入额外IP数量"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="虚拟机存储" prop="vmStorage">-->
<!-- <el-input-->
<!-- v-model="queryParams.vmStorage"-->
<!-- placeholder="请输入虚拟机存储"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<el-form-item label="申请时间" prop="submitTime">
<el-date-picker clearable
v-model="queryParams.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="queryParams.applyUser"-->
<!-- placeholder="请输入使用人"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="承接人" prop="receiveUser">-->
<!-- <el-input-->
<!-- v-model="queryParams.receiveUser"-->
<!-- placeholder="请输入承接人"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="使用期限" prop="useTime">-->
<!-- <el-input-->
<!-- v-model="queryParams.useTime"-->
<!-- placeholder="请输入使用期限"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</script>
<!-- <el-row :gutter="10" class="mb8">-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- plain-->
<!-- icon="Plus"-->
<!-- @click="handleAdd"-->
<!-- v-hasPermi="['computility:resources:add']"-->
<!-- >新增</el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="success"-->
<!-- plain-->
<!-- icon="Edit"-->
<!-- :disabled="single"-->
<!-- @click="handleUpdate"-->
<!-- v-hasPermi="['computility:resources:edit']"-->
<!-- >修改</el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="danger"-->
<!-- plain-->
<!-- icon="Delete"-->
<!-- :disabled="multiple"-->
<!-- @click="handleDelete"-->
<!-- v-hasPermi="['computility:resources:remove']"-->
<!-- >删除</el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="warning"-->
<!-- plain-->
<!-- icon="Download"-->
<!-- @click="handleExport"-->
<!-- v-hasPermi="['computility:resources:export']"-->
<!-- >导出</el-button>-->
<!-- </el-col>-->
<!-- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>-->
<!-- </el-row>-->
<template>
<div>我的资源</div>
<el-table v-loading="loading" :data="resourcesList" :max-height="620" @selection-change="handleSelectionChange">
<!-- <el-table-column type="selection" width="55" align="center" />-->
<!-- <el-table-column label="主键" align="center" prop="id" />-->
<el-table-column label="订单编号" align="center" prop="orderNo"/>
<el-table-column label="商品类别" align="center" prop="category">
<template #default="scope">
<dict-tag :options="application_category" :value="scope.row.category"/>
</template>
</el-table-column>
<el-table-column label="型号" align="center" prop="model">
<template #default="scope">
<dict-tag :options="model" :value="scope.row.model"/>
</template>
</el-table-column>
<el-table-column label="CPU" align="center" prop="cpu">
<template #default="scope">
<dict-tag :options="cpu_type" :value="scope.row.cpu"/>
</template>
</el-table-column>
<el-table-column label="GPU" align="center" prop="gpu">
<template #default="scope">
<dict-tag :options="gpu_type" :value="scope.row.gpu"/>
</template>
</el-table-column>
<el-table-column label="内存" align="center" prop="memory">
<template #default="scope">
<dict-tag :options="memory_type" :value="scope.row.memory"/>
</template>
</el-table-column>
<el-table-column label="存储硬盘" align="center" prop="storage">
<template #default="scope">
<dict-tag :options="storage_type" :value="scope.row.storage"/>
</template>
</el-table-column>
<!-- <el-table-column label="算力金额" align="center" prop="price"/>-->
<el-table-column label="资源状态" align="center" prop="sourceStatus">
<template #default="scope">
<dict-tag :options="source_status" :value="scope.row.sourceStatus"/>
</template>
</el-table-column>
<el-table-column label="网络带宽" align="center" prop="networkId"/>
<el-table-column label="额外IP数量" align="center" prop="ipNum"/>
<el-table-column label="虚拟机存储" align="center" prop="vmStorage"/>
<el-table-column label="申请时间" align="center" prop="submitTime" width="180">
<template #default="scope">
<span>{{ parseTime(scope.row.submitTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<!-- <el-table-column label="使用人" align="center" prop="applyUser"/>-->
<!-- <el-table-column label="承接人" align="center" prop="receiveUser"/>-->
<!-- <el-table-column label="使用期限" align="center" prop="useTime"/>-->
<!-- <el-table-column label="备注" align="center" prop="remark"/>-->
<!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
<!-- <template #default="scope">-->
<!-- <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"-->
<!-- v-hasPermi="['computility:resources:edit']">修改-->
<!-- </el-button>-->
<!-- <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"-->
<!-- v-hasPermi="['computility:resources:remove']">删除-->
<!-- </el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
</el-table>
<pagination
v-show="total>0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改订单管理-用户资源管理对话框 -->
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
<el-form ref="resourcesRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="订单编号" prop="orderNo">
<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="sourceStatus">
<el-radio-group v-model="form.sourceStatus">
<el-radio
v-for="dict in source_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-select v-model="form.applyUser" placeholder="请选择">
<el-option
v-for="item in userOptions"
:key="item.userId"
:label="item.userName"
:value="item.userId"
:disabled="item.status == 1"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="承接人" prop="receiveUser">
<el-input v-model="form.receiveUser" 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>
</template>
</el-dialog>
</div>
</template>
<style scoped lang="scss">
<script setup name="Resources">
import { listResources, getResources, delResources, addResources, updateResources } from '@/api/computility/resources'
import { getAllUser } from '@/api/system/user'
const {proxy} = getCurrentInstance()
const {
source_status,
memory_type,
cpu_type,
storage_type,
model,
application_category,
gpu_type
} = proxy.useDict('source_status', 'memory_type', 'cpu_type', 'storage_type', 'model', 'application_category', 'gpu_type')
const resourcesList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref('')
const userOptions = ref([])
const data = reactive({
form: {},
queryParams: {
pageNum: 1,
pageSize: 10,
orderNo: null,
category: null,
model: null,
cpu: null,
gpu: null,
memory: null,
storage: null,
price: null,
sourceStatus: null,
networkId: null,
ipNum: null,
vmStorage: null,
submitTime: null,
applyUser: null,
receiveUser: null,
useTime: null
},
rules: {
category: [
{required: true, message: '商品类别不能为空', trigger: 'change'}
],
model: [
{required: true, message: '型号不能为空', trigger: 'change'}
],
cpu: [
{required: true, message: 'CPU不能为空', trigger: 'change'}
],
gpu: [
{required: true, message: 'GPU不能为空', trigger: 'change'}
],
memory: [
{required: true, message: '内存不能为空', trigger: 'change'}
],
storage: [
{required: true, message: '存储硬盘不能为空', trigger: 'change'}
],
sourceStatus: [
{required: true, message: '资源状态不能为空', trigger: 'change'}
],
networkId: [
{required: true, message: '网络带宽不能为空', trigger: 'blur'}
],
submitTime: [
{required: true, message: '申请时间不能为空', trigger: 'blur'}
],
applyUser: [
{required: true, message: '使用人不能为空', trigger: 'blur'}
],
receiveUser: [
{required: true, message: '承接人不能为空', trigger: 'blur'}
],
useTime: [
{required: true, message: '使用期限不能为空', trigger: 'blur'}
],
createTime: [
{required: true, message: '创建时间不能为空', trigger: 'blur'}
]
}
})
const {queryParams, form, rules} = toRefs(data)
/** 查询订单管理-用户资源管理列表 */
function getList () {
loading.value = true
listResources(queryParams.value).then(response => {
resourcesList.value = response.rows
total.value = response.total
loading.value = false
})
}
// 取消按钮
function cancel () {
open.value = false
reset()
}
// 表单重置
function reset () {
form.value = {
id: null,
orderNo: null,
category: null,
model: null,
cpu: null,
gpu: null,
memory: null,
storage: null,
price: null,
sourceStatus: null,
networkId: null,
ipNum: null,
vmStorage: null,
submitTime: null,
applyUser: null,
receiveUser: null,
useTime: null,
createTime: null,
createBy: null,
updateBy: null,
updateTime: null,
remark: null,
delFlag: null
}
proxy.resetForm('resourcesRef')
}
/** 搜索按钮操作 */
function handleQuery () {
queryParams.value.pageNum = 1
getList()
}
/** 重置按钮操作 */
function resetQuery () {
proxy.resetForm('queryRef')
handleQuery()
}
// 多选框选中数据
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 = '添加订单管理-用户资源管理'
getAllUser().then(res => {
loading.value = false
userOptions.value = res.list
})
}
/** 修改按钮操作 */
function handleUpdate (row) {
reset()
const _id = row.id || ids.value
getResources(_id).then(response => {
form.value = response.data
open.value = true
title.value = '修改订单管理-用户资源管理'
})
}
/** 提交按钮 */
function submitForm () {
proxy.$refs['resourcesRef'].validate(valid => {
if (valid) {
if (form.value.id != null) {
updateResources(form.value).then(response => {
proxy.$modal.msgSuccess('修改成功')
open.value = false
getList()
})
} else {
addResources(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 delResources(_ids)
}).then(() => {
getList()
proxy.$modal.msgSuccess('删除成功')
}).catch(() => {
})
}
/** 导出按钮操作 */
function handleExport () {
proxy.download('computility/resources/export', {
...queryParams.value
}, `resources_${new Date().getTime()}.xlsx`)
}
getList()
</script>
<style lang="scss" scoped>
.el-form {
padding: 20px 20px 0 20px;
border-radius: 4px;
background-color: #FFFFFF;
margin-bottom: 20px;
}
</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