主机上架功能

src/apis/modules/resource.js

@@ -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}`)

src/views/resource/resourceAdmin/components/EditDialog.vue

@@ -1,27 +1,88 @@
 <template>
-    <a-modal
+    <a-modal :open="modal.open" :title="modal.title" :confirm-loading="modal.confirmLoading" :width="800"
-        :open="modal.open"
+        :after-close="onAfterClose" @ok="handleOk" @cancel="handleCancel">
-        :title="modal.title"
+        <a-form ref="formRef" scroll-to-first-error :model="formData" :rules="formRules" :label-col="{ span: 6 }"
-        :confirm-loading="modal.confirmLoading"
+            :wrapper-col="{ span: 16 }">
-        :after-close="onAfterClose"
+            <!-- 价格输入部分 -->
-        @ok="handleOk"
+            <a-row :gutter="16">
-        @cancel="handleCancel">
+                <a-col :span="12">
-        <a-form
+                    <!-- 机器ID（编辑时显示，新建时隐藏） -->
-            ref="formRef"
+                    <a-form-item v-if="modal.type === 'edit'" label="机器ID" name="machine_id">
-            scroll-to-first-error
+                        <a-input v-model:value="formData.machine_id" placeholder="机器ID" disabled>
-            :model="formData"
+                        </a-input>
-            :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-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() {
+async function handleOk() {
-    formRef.value
-        .validateFields()
-        .then(async (values) => {
     try {
+        // 验证表单
+        await formRef.value.validateFields()
+
         showLoading()
-                const params = {
+
-                    ...values,
+        // 准备提交数据
+        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
-                switch (modal.value.type) {
+
-                    case 'create':
+        // 根据类型调用不同接口
-                        result = await apis.common.create(params).catch(() => {
+        if (modal.value.type === 'create') {
-                            throw new Error()
+            // 新增接口
-                        })
+            result = await apis.host.syncHostInfo(submitData)
-                        break
+        } else if (modal.value.type === 'edit') {
-                    case 'edit':
+            // 编辑接口
-                        result = await apis.common.update(formRecord.value.id, params).catch(() => {
+            result = await apis.resource.addHostResource(submitData)
-                            throw new Error()
-                        })
-                        break
         }
+
         hideLoading()
-                if (200 === result?.code) {
+
+        // 根据实际API响应处理
+        if (result?.success || result?.code === 200) {
+            // 成功
             hideModal()
-                    emit('ok')
+            emit('ok') // 通知父组件刷新列表
+        } else {
+            // 失败，显示错误信息
+            console.error('操作失败:', result?.message)
         }
+
     } catch (error) {
         hideLoading()
+        console.error('表单验证或提交失败:', error)
     }
-        })
-        .catch(() => {
-            hideLoading()
-        })
 }
 
 /**
@@ -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>

src/views/resource/resourceAdmin/index.vue

@@ -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 type="link" size="small" danger @click="handleRemove(record)">
-                                    下架
-                                </a-button>
-                                <a-button type="link" size="small" danger @click="handleRemove(record)">
                                     删除
-                                </a-button>
+                                </a-button> -->
                             </a-space>
                         </template>
                     </template>