generated from Leo_Ding/web-template
主机上架功能
This commit is contained in:
qiuyuan
parent
a5471e319d
commit
15b9b28358
@ -19,12 +19,6 @@ export const deleteBlackCustomers = (id) => request.basic.delete(`/api/v1/blackC
|
||||
// 拉黑用户
|
||||
export const updateCustomers = (id, data) => request.basic.put(`/api/v1/customers/${id}`, data)
|
||||
|
||||
// 上架主机资源
|
||||
export const addHostResource = (params) => request.basic.get('/api/v1/autoDl-dl-hosts/sync', params)
|
||||
|
||||
//获取单个banner
|
||||
export const getBanner = (id) => request.basic.get(`/api/v1/banners/${id}`)
|
||||
//创建banner
|
||||
export const createBanner = (data) => request.basic.post('/api/v1/banners', data)
|
||||
//更新banner
|
||||
export const updateBanner = (id, data) => request.basic.put(`/api/v1/banners/${id}`, data)
|
||||
//删除banner
|
||||
export const deleteBanner = (id) => request.basic.delete(`/api/v1/banners/${id}`)
|
||||
@ -1,27 +1,88 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:open="modal.open"
|
||||
:title="modal.title"
|
||||
:confirm-loading="modal.confirmLoading"
|
||||
:after-close="onAfterClose"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel">
|
||||
<a-form
|
||||
ref="formRef"
|
||||
scroll-to-first-error
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
:label-col="{ style: { width: '80px' } }">
|
||||
<a-form-item
|
||||
label="标题"
|
||||
name="title">
|
||||
<a-input v-model:value="formData.title"></a-input>
|
||||
</a-form-item>
|
||||
<a-modal :open="modal.open" :title="modal.title" :confirm-loading="modal.confirmLoading" :width="800"
|
||||
:after-close="onAfterClose" @ok="handleOk" @cancel="handleCancel">
|
||||
<a-form ref="formRef" scroll-to-first-error :model="formData" :rules="formRules" :label-col="{ span: 6 }"
|
||||
:wrapper-col="{ span: 16 }">
|
||||
<!-- 价格输入部分 -->
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<!-- 机器ID（编辑时显示，新建时隐藏） -->
|
||||
<a-form-item v-if="modal.type === 'edit'" label="机器ID" name="machine_id">
|
||||
<a-input v-model:value="formData.machine_id" placeholder="机器ID" disabled>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<!-- 数据中心ID下拉选择 -->
|
||||
<a-form-item label="数据中心" name="center_id" :rules="[{ required: true, message: '请选择数据中心' }]">
|
||||
<a-select v-model:value="formData.center_id" placeholder="请选择数据中心" :options="centerOptions"
|
||||
allowClear show-search :filter-option="filterOption">
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="按时付费" name="payOnTime" :rules="[{ required: true, message: '请输入按时付费价格' }]">
|
||||
<a-input-number v-model:value="formData.payOnTime" placeholder="请输入按时付费价格" style="width: 100%"
|
||||
:min="0" :precision="2" :step="0.01" addon-after="元">
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="按日付费" name="payOnDay" :rules="[{ required: true, message: '请输入按日付费价格' }]">
|
||||
<a-input-number v-model:value="formData.payOnDay" placeholder="请输入按日付费价格" style="width: 100%"
|
||||
:min="0" :precision="2" :step="0.01" addon-after="元">
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="按周付费" name="payOnWeek" :rules="[{ required: true, message: '请输入按周付费价格' }]">
|
||||
<a-input-number v-model:value="formData.payOnWeek" placeholder="请输入按周付费价格" style="width: 100%"
|
||||
:min="0" :precision="2" :step="0.01" addon-after="元">
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="按月付费" name="payOnMonth" :rules="[{ required: true, message: '请输入按月付费价格' }]">
|
||||
<a-input-number v-model:value="formData.payOnMonth" placeholder="请输入按月付费价格" style="width: 100%"
|
||||
:min="0" :precision="2" :step="0.01" addon-after="元">
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="按年付费" name="payOnYear" :rules="[{ required: true, message: '请输入按年付费价格' }]">
|
||||
<a-input-number v-model:value="formData.payOnYear" placeholder="请输入按年付费价格" style="width: 100%"
|
||||
:min="0" :precision="2" :step="0.01" addon-after="元">
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="状态" name="status" :rules="[{ required: true, message: '请选择状态' }]">
|
||||
<a-radio-group v-model:value="formData.status">
|
||||
<a-radio value="ENABLED">启用</a-radio>
|
||||
<a-radio value="DISABLED">禁用</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="是否推荐" name="is_recommend">
|
||||
<a-switch v-model:checked="formData.is_recommend" checked-children="推荐"
|
||||
un-checked-children="不推荐">
|
||||
</a-switch>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
import apis from '@/apis'
|
||||
import { useForm, useModal } from '@/hooks'
|
||||
@ -31,17 +92,69 @@ const emit = defineEmits(['ok'])
|
||||
const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
|
||||
const { formRef, formRules, formRecord, formData, resetForm } = useForm()
|
||||
|
||||
formRules.value = {
|
||||
title: { required: true, message: '请输入标题' },
|
||||
// 数据中心选项
|
||||
const centerOptions = ref([
|
||||
{ label: '数据中心1', value: '20004adaknk656' },
|
||||
{ label: '数据中心2', value: '20004adaknk656' },
|
||||
{ label: '数据中心3', value: '20004adaknk656' },
|
||||
])
|
||||
|
||||
// 初始化表单数据
|
||||
const initFormData = () => {
|
||||
formData.value = {
|
||||
machine_id: '', // 机器ID（编辑时传入）
|
||||
center_id: undefined, // 数据中心ID
|
||||
payOnTime: undefined, // 按时付费
|
||||
payOnDay: undefined, // 按日付费
|
||||
payOnWeek: undefined, // 按周付费
|
||||
payOnMonth: undefined, // 按月付费
|
||||
payOnYear: undefined, // 按年付费
|
||||
status: 'ENABLED', // 状态，默认启用
|
||||
is_recommend: false, // 是否推荐，默认不推荐
|
||||
}
|
||||
|
||||
// 表单验证规则
|
||||
formRules.value = {
|
||||
center_id: [{ required: true, message: '请选择数据中心' }],
|
||||
payOnTime: [{ required: true, message: '请输入按时付费价格' }],
|
||||
payOnDay: [{ required: true, message: '请输入按日付费价格' }],
|
||||
payOnWeek: [{ required: true, message: '请输入按周付费价格' }],
|
||||
payOnMonth: [{ required: true, message: '请输入按月付费价格' }],
|
||||
payOnYear: [{ required: true, message: '请输入按年付费价格' }],
|
||||
status: [{ required: true, message: '请选择状态' }],
|
||||
}
|
||||
}
|
||||
|
||||
// 下拉框搜索过滤
|
||||
const filterOption = (input, option) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}
|
||||
|
||||
// 如果需要从接口获取数据中心列表，可以这样写
|
||||
const fetchCenterList = async () => {
|
||||
try {
|
||||
// 假设有一个获取数据中心列表的API
|
||||
// const result = await apis.system.getCenterList()
|
||||
// if (result?.success || result?.code === 200) {
|
||||
// centerOptions.value = result.data.map(item => ({
|
||||
// label: item.name,
|
||||
// value: item.id
|
||||
// }))
|
||||
// }
|
||||
} catch (error) {
|
||||
console.error('获取数据中心列表失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 新建
|
||||
*/
|
||||
function handleCreate() {
|
||||
initFormData()
|
||||
showModal({
|
||||
type: 'create',
|
||||
title: '新建',
|
||||
title: '新增主机同步',
|
||||
confirmLoading: false,
|
||||
})
|
||||
}
|
||||
|
||||
@ -49,51 +162,83 @@ function handleCreate() {
|
||||
* 编辑
|
||||
*/
|
||||
function handleEdit(record = {}) {
|
||||
initFormData()
|
||||
|
||||
showModal({
|
||||
type: 'edit',
|
||||
title: '编辑',
|
||||
title: '上架主机资源',
|
||||
confirmLoading: false,
|
||||
})
|
||||
|
||||
// 记录原始数据
|
||||
formRecord.value = record
|
||||
formData.value = cloneDeep(record)
|
||||
|
||||
// 填充表单数据
|
||||
formData.value = {
|
||||
machine_id: record.machine_id,
|
||||
center_id: record.center_id || undefined,
|
||||
payOnTime: record.payOnTime || undefined,
|
||||
payOnDay: record.payOnDay || undefined,
|
||||
payOnWeek: record.payOnWeek || undefined,
|
||||
payOnMonth: record.payOnMonth || undefined,
|
||||
payOnYear: record.payOnYear || undefined,
|
||||
status: record.status || 'ENABLED',
|
||||
is_recommend: record.is_recommend || false,
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 确定
|
||||
* 确定 - 提交表单
|
||||
*/
|
||||
function handleOk() {
|
||||
formRef.value
|
||||
.validateFields()
|
||||
.then(async (values) => {
|
||||
try {
|
||||
showLoading()
|
||||
const params = {
|
||||
...values,
|
||||
}
|
||||
let result = null
|
||||
switch (modal.value.type) {
|
||||
case 'create':
|
||||
result = await apis.common.create(params).catch(() => {
|
||||
throw new Error()
|
||||
})
|
||||
break
|
||||
case 'edit':
|
||||
result = await apis.common.update(formRecord.value.id, params).catch(() => {
|
||||
throw new Error()
|
||||
})
|
||||
break
|
||||
}
|
||||
hideLoading()
|
||||
if (200 === result?.code) {
|
||||
hideModal()
|
||||
emit('ok')
|
||||
}
|
||||
} catch (error) {
|
||||
hideLoading()
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
hideLoading()
|
||||
})
|
||||
async function handleOk() {
|
||||
try {
|
||||
// 验证表单
|
||||
await formRef.value.validateFields()
|
||||
|
||||
showLoading()
|
||||
|
||||
// 准备提交数据
|
||||
const submitData = {
|
||||
machine_id: formData.value.machine_id,
|
||||
center_id: formData.value.center_id,
|
||||
payOnTime: Number(formData.value.payOnTime || 0),
|
||||
payOnDay: Number(formData.value.payOnDay || 0),
|
||||
payOnWeek: Number(formData.value.payOnWeek || 0),
|
||||
payOnMonth: Number(formData.value.payOnMonth || 0),
|
||||
payOnYear: Number(formData.value.payOnYear || 0),
|
||||
status: formData.value.status,
|
||||
is_recommend: formData.value.is_recommend,
|
||||
}
|
||||
|
||||
console.log('提交数据:', submitData)
|
||||
|
||||
let result = null
|
||||
|
||||
// 根据类型调用不同接口
|
||||
if (modal.value.type === 'create') {
|
||||
// 新增接口
|
||||
result = await apis.host.syncHostInfo(submitData)
|
||||
} else if (modal.value.type === 'edit') {
|
||||
// 编辑接口
|
||||
result = await apis.resource.addHostResource(submitData)
|
||||
}
|
||||
|
||||
hideLoading()
|
||||
|
||||
// 根据实际API响应处理
|
||||
if (result?.success || result?.code === 200) {
|
||||
// 成功
|
||||
hideModal()
|
||||
emit('ok') // 通知父组件刷新列表
|
||||
} else {
|
||||
// 失败，显示错误信息
|
||||
console.error('操作失败:', result?.message)
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
hideLoading()
|
||||
console.error('表单验证或提交失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@ -104,16 +249,35 @@ function handleCancel() {
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭后
|
||||
* 关闭后重置
|
||||
*/
|
||||
function onAfterClose() {
|
||||
resetForm()
|
||||
}
|
||||
|
||||
// 组件挂载时初始化
|
||||
onMounted(() => {
|
||||
initFormData()
|
||||
// 如果需要从接口获取数据中心列表
|
||||
// fetchCenterList()
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
handleCreate,
|
||||
handleEdit,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
<style lang="less" scoped>
|
||||
:deep(.ant-form-item) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
:deep(.ant-input-number) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.ant-select) {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -110,15 +110,15 @@
|
||||
<!-- 操作 -->
|
||||
<template v-if="'action' === column.key">
|
||||
<a-space>
|
||||
<a-button type="link" size="small" @click="$refs.editDialogRef.handleEdit(record)">
|
||||
<!-- <a-button type="link" size="small" @click="$refs.editDialogRef.handleEdit(record)">
|
||||
编辑
|
||||
</a-button> -->
|
||||
<a-button type="link" size="small" @click="$refs.editDialogRef.handleEdit(record)">
|
||||
上架
|
||||
</a-button>
|
||||
<a-button type="link" size="small" danger @click="handleDownShelf(record)">
|
||||
下架
|
||||
</a-button>
|
||||
<a-button type="link" size="small" danger @click="handleRemove(record)">
|
||||
<!-- <a-button type="link" size="small" danger @click="handleRemove(record)">
|
||||
删除
|
||||
</a-button>
|
||||
</a-button> -->
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user