592 lines
22 KiB
Vue
592 lines
22 KiB
Vue
|
<template>
|
|||
|
|
<div class="account-product-detail">
|
|||
|
|
<div class="header">
|
|||
|
|
<el-button type="text" @click="handleBack">返回</el-button>
|
|||
|
|
<h2 class="title">商品详情</h2>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 基础信息，采用工单详情的两列表单风格 -->
|
|||
|
|
<el-card shadow="never" class="detail-card">
|
|||
|
|
<el-form :model="product" label-width="90px" class="detail-form" size="small">
|
|||
|
|
<el-row :gutter="16">
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="商品ID">
|
|||
|
|
<el-input :value="product && product.id" disabled />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="店铺ID">
|
|||
|
|
<el-input :value="product && product.shopId" disabled />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="名称">
|
|||
|
|
<el-input :value="product && product.name" disabled />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="币种">
|
|||
|
|
<el-input :value="product && product.coin" disabled />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="算法">
|
|||
|
|
<el-input :value="product && product.algorithm" disabled />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="价格范围">
|
|||
|
|
<el-input :value="product && product.priceRange" disabled />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="类型">
|
|||
|
|
<el-input :value="product && (product.type === 1 ? '算力套餐' : '挖矿机器')" disabled />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="状态">
|
|||
|
|
<el-input :value="product && (product.state === 1 ? '下架' : '上架')" disabled />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
|
|||
|
|
<!-- <el-col :span="24">
|
|||
|
|
<el-form-item label="图片">
|
|||
|
|
<div class="image-row">
|
|||
|
|
<el-image v-if="product && product.image" :src="product.image" fit="cover" class="cover" />
|
|||
|
|
<span v-else class="placeholder">暂无图片</span>
|
|||
|
|
</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col> -->
|
|||
|
|
|
|||
|
|
<el-col :span="24">
|
|||
|
|
<el-form-item label="描述">
|
|||
|
|
<el-input type="textarea" :rows="3" :value="product && product.description" disabled />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-form>
|
|||
|
|
</el-card>
|
|||
|
|
|
|||
|
|
<!-- 机器组合信息，模拟“处理记录”块状区域 -->
|
|||
|
|
<el-card shadow="never" class="detail-card" v-loading="updateLoading">
|
|||
|
|
<div slot="header" class="section-title">机器组合</div>
|
|||
|
|
<div v-if="machineList && machineList.length">
|
|||
|
|
<el-table :data="machineList" border stripe style="width: 100%">
|
|||
|
|
<el-table-column prop="user" label="挖矿账户" min-width="80" />
|
|||
|
|
<el-table-column prop="id" label="矿机ID" min-width="60" />
|
|||
|
|
<el-table-column prop="miner" label="机器编号" min-width="100" />
|
|||
|
|
<el-table-column label="实时算力">
|
|||
|
|
<template #default="scope">{{ scope.row.computingPower }} {{ scope.row.unit || '' }}</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="理论算力" min-width="140">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<el-input
|
|||
|
|
v-model="scope.row.theoryPower"
|
|||
|
|
size="small"
|
|||
|
|
inputmode="decimal"
|
|||
|
|
:disabled="isRowDisabled(scope.row)"
|
|||
|
|
@input="handleTheoryPowerInput(scope.$index)"
|
|||
|
|
@blur="handleTheoryPowerBlur(scope.$index)"
|
|||
|
|
:class="{ 'changed-input': isCellChanged(scope.row, 'theoryPower') }"
|
|||
|
|
style="max-width: 260px;"
|
|||
|
|
>
|
|||
|
|
<template slot="append">{{ scope.row.unit || '' }}</template>
|
|||
|
|
</el-input>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="功耗(kw/h)" min-width="140">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<el-input
|
|||
|
|
v-model="scope.row.powerDissipation"
|
|||
|
|
size="small"
|
|||
|
|
inputmode="decimal"
|
|||
|
|
:disabled="isRowDisabled(scope.row)"
|
|||
|
|
@input="handleNumericCell(scope.$index, 'powerDissipation')"
|
|||
|
|
@blur="handlePowerDissipationBlur(scope.$index)"
|
|||
|
|
:class="{ 'changed-input': isCellChanged(scope.row, 'powerDissipation') }"
|
|||
|
|
style="max-width: 260px;"
|
|||
|
|
>
|
|||
|
|
<template slot="append">kw/h</template>
|
|||
|
|
</el-input>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="型号" min-width="140">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<el-input
|
|||
|
|
v-model="scope.row.type"
|
|||
|
|
size="small"
|
|||
|
|
placeholder="矿机型号"
|
|||
|
|
:maxlength="20"
|
|||
|
|
:disabled="isRowDisabled(scope.row)"
|
|||
|
|
@input="handleTypeCell(scope.$index)"
|
|||
|
|
:class="{ 'changed-input': isCellChanged(scope.row, 'type') }"
|
|||
|
|
style="max-width: 180px;"
|
|||
|
|
/>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="单价(USDT)" min-width="140">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<el-input
|
|||
|
|
v-model="scope.row.price"
|
|||
|
|
size="small"
|
|||
|
|
inputmode="decimal"
|
|||
|
|
:disabled="isRowDisabled(scope.row)"
|
|||
|
|
@input="handleNumericCell(scope.$index, 'price')"
|
|||
|
|
@blur="handlePriceBlur(scope.$index)"
|
|||
|
|
:class="{ 'changed-input': isCellChanged(scope.row, 'price') }"
|
|||
|
|
style="max-width: 260px;"
|
|||
|
|
>
|
|||
|
|
<template slot="append">USDT</template>
|
|||
|
|
</el-input>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="上下架" min-width="140">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<el-switch
|
|||
|
|
v-model="scope.row.state"
|
|||
|
|
:active-value="0"
|
|||
|
|
:inactive-value="1"
|
|||
|
|
active-text="上架"
|
|||
|
|
inactive-text="下架"
|
|||
|
|
:disabled="isRowDisabled(scope.row)"
|
|||
|
|
@change="handleStateChange(scope.$index)"
|
|||
|
|
/>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="售出状态" min-width="100">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<el-tag :type="scope.row.saleState === 0 ? 'info' : (scope.row.saleState === 1 ? 'danger' : 'warning')">
|
|||
|
|
{{ scope.row.saleState === 0 ? '未售出' : (scope.row.saleState === 1 ? '已售出' : '售出中') }}
|
|||
|
|
</el-tag>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="操作" fixed="right" min-width="120">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<el-button type="text" size="small" style="color:#f56c6c" :disabled="isRowDisabled(scope.row)" @click="handleDeleteMachine(scope.row)">删除</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
<div v-else class="empty-text">暂无组合数据</div>
|
|||
|
|
</el-card>
|
|||
|
|
<div class="actions" v-if="machineList && machineList.length">
|
|||
|
|
<el-button type="primary" @click="handleOpenConfirm">提交修改机器</el-button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 提交确认弹窗 -->
|
|||
|
|
<el-dialog
|
|||
|
|
title="确认提交修改"
|
|||
|
|
:visible.sync="confirmVisible"
|
|||
|
|
width="520px"
|
|||
|
|
>
|
|||
|
|
<div>
|
|||
|
|
<p>请仔细确认已选择机器机器组合里的机器价格及相关参数定义。</p>
|
|||
|
|
<p>机器修改上架后，一经售出，在机器出售期间不能修改价格及机器参数。</p>
|
|||
|
|
</div>
|
|||
|
|
<span slot="footer" class="dialog-footer">
|
|||
|
|
<el-button @click="confirmVisible = false">取消</el-button>
|
|||
|
|
<el-button type="primary" @click="handleSubmitMachines">确认提交修改</el-button>
|
|||
|
|
</span>
|
|||
|
|
</el-dialog>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { getMachineInfoById } from '../../api/products'
|
|||
|
|
import { getMachineListForUpdate,updateMachine,deleteMachine } from '../../api/machine'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'AccountProductDetail',
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
loading: false,
|
|||
|
|
product: null,
|
|||
|
|
ranges: [],
|
|||
|
|
machineList: [],
|
|||
|
|
productId:null,
|
|||
|
|
confirmVisible: false,
|
|||
|
|
// 机器“上下架状态”快照，用于失败回滚：key 为机器 id，value 为提交前的 state
|
|||
|
|
stateSnapshot: {},
|
|||
|
|
// 可编辑字段快照（用于变更高亮）
|
|||
|
|
fieldSnapshot: {},
|
|||
|
|
updateLoading:false,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
created() {
|
|||
|
|
this.productId= Number(this.$route.params.id)
|
|||
|
|
if (this.productId) {
|
|||
|
|
this.fetchDetail({ id:this.productId })
|
|||
|
|
this.fetchMachineList({ id:this.productId })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
/**
|
|||
|
|
* 判断行是否不可编辑（已售出则禁用）
|
|||
|
|
* @param {Object} row - 当前行数据
|
|||
|
|
* @returns {boolean}
|
|||
|
|
*/
|
|||
|
|
isRowDisabled(row) {
|
|||
|
|
if (!row) return false
|
|||
|
|
return Number(row.saleState) === 1
|
|||
|
|
},
|
|||
|
|
handleOpenConfirm() {
|
|||
|
|
if (!this.machineList || !this.machineList.length) {
|
|||
|
|
this.$message.warning('没有可提交的数据')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.confirmVisible = true
|
|||
|
|
},
|
|||
|
|
async fetchDetail(params) {
|
|||
|
|
this.loading = true
|
|||
|
|
try {
|
|||
|
|
const res = await getMachineInfoById(params)
|
|||
|
|
const data = res?.data || {}
|
|||
|
|
this.product = data
|
|||
|
|
this.ranges = Array.isArray(data.productMachineRangeList) ? data.productMachineRangeList : []
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('获取商品详情失败', e)
|
|||
|
|
console.log('获取商品详情失败')
|
|||
|
|
} finally {
|
|||
|
|
this.loading = false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async fetchMachineList(params) {
|
|||
|
|
const res = await getMachineListForUpdate(params)
|
|||
|
|
|
|||
|
|
|
|||
|
|
if (res && res.code === 200) {
|
|||
|
|
this.machineList =res.rows
|
|||
|
|
this.refreshStateSnapshot()
|
|||
|
|
this.refreshFieldSnapshot()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 刷新状态快照：以当前列表为准记录每条机器的 state
|
|||
|
|
* @returns {void}
|
|||
|
|
*/
|
|||
|
|
refreshStateSnapshot() {
|
|||
|
|
const snapshot = {}
|
|||
|
|
const list = Array.isArray(this.machineList) ? this.machineList : []
|
|||
|
|
for (let i = 0; i < list.length; i += 1) {
|
|||
|
|
const row = list[i]
|
|||
|
|
if (row && typeof row.id !== 'undefined') {
|
|||
|
|
snapshot[row.id] = row.state
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.stateSnapshot = snapshot
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 刷新可编辑字段快照，用于“变更高亮”对比
|
|||
|
|
* @returns {void}
|
|||
|
|
*/
|
|||
|
|
refreshFieldSnapshot() {
|
|||
|
|
const snapshot = {}
|
|||
|
|
const list = Array.isArray(this.machineList) ? this.machineList : []
|
|||
|
|
for (let i = 0; i < list.length; i += 1) {
|
|||
|
|
const row = list[i]
|
|||
|
|
if (!row || typeof row.id === 'undefined') continue
|
|||
|
|
snapshot[row.id] = {
|
|||
|
|
theoryPower: String(row.theoryPower ?? ''),
|
|||
|
|
powerDissipation: String(row.powerDissipation ?? ''),
|
|||
|
|
type: String(row.type ?? ''),
|
|||
|
|
price: String(row.price ?? ''),
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.fieldSnapshot = snapshot
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 判断单元格是否被修改（与快照对比）
|
|||
|
|
* @param {Object} row
|
|||
|
|
* @param {string} key
|
|||
|
|
* @returns {boolean}
|
|||
|
|
*/
|
|||
|
|
isCellChanged(row, key) {
|
|||
|
|
if (!row || typeof row.id === 'undefined') return false
|
|||
|
|
const snap = this.fieldSnapshot[row.id] || {}
|
|||
|
|
const current = String(row[key] ?? '')
|
|||
|
|
const original = String(snap[key] ?? '')
|
|||
|
|
return current !== original
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 回滚上下架状态：当提交失败时将每行的 state 恢复为提交前
|
|||
|
|
* @returns {void}
|
|||
|
|
*/
|
|||
|
|
restoreStateSnapshot() {
|
|||
|
|
if (!this.machineList || !this.machineList.length) return
|
|||
|
|
for (let i = 0; i < this.machineList.length; i += 1) {
|
|||
|
|
const currentRow = this.machineList[i]
|
|||
|
|
if (!currentRow || typeof currentRow.id === 'undefined') continue
|
|||
|
|
const prevState = this.stateSnapshot[currentRow.id]
|
|||
|
|
if (typeof prevState !== 'undefined') {
|
|||
|
|
this.$set(this.machineList[i], 'state', prevState)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 提交机器修改；失败或异常时回滚上下架状态
|
|||
|
|
* @param {Array} params - 要更新的机器列表 payload
|
|||
|
|
* @returns {Promise<void>}
|
|||
|
|
*/
|
|||
|
|
async updateMachineList(params) {
|
|||
|
|
this.updateLoading = true
|
|||
|
|
try {
|
|||
|
|
const res = await updateMachine(params)
|
|||
|
|
if (res && res.code === 200) {
|
|||
|
|
this.$message.success('更新成功')
|
|||
|
|
// 成功后刷新列表（并在列表刷新后更新快照）
|
|||
|
|
this.fetchMachineList({ id:this.productId })
|
|||
|
|
} else {
|
|||
|
|
|
|||
|
|
// 失败回滚上下架状态
|
|||
|
|
this.restoreStateSnapshot()
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
|
|||
|
|
// 异常回滚上下架状态
|
|||
|
|
this.restoreStateSnapshot()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.updateLoading = false
|
|||
|
|
},
|
|||
|
|
async deleteMachine(params) {
|
|||
|
|
const res = await deleteMachine(params)
|
|||
|
|
if (res && res.code === 200) {
|
|||
|
|
this.$message.success('删除成功')
|
|||
|
|
this.fetchMachineList({ id:this.productId })
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
handleTheoryPowerInput(index) {
|
|||
|
|
const rowItem = this.machineList && this.machineList[index]
|
|||
|
|
if (!rowItem || this.isRowDisabled(rowItem)) return
|
|||
|
|
// 输入阶段限制：整数最多6位，小数最多4位；允许结尾小数点
|
|||
|
|
let v = String(this.machineList[index].theoryPower ?? '')
|
|||
|
|
v = v.replace(/[^0-9.]/g, '')
|
|||
|
|
const firstDot = v.indexOf('.')
|
|||
|
|
if (firstDot !== -1) {
|
|||
|
|
v = v.slice(0, firstDot + 1) + v.slice(firstDot + 1).replace(/\./g, '')
|
|||
|
|
}
|
|||
|
|
const endsWithDot = v.endsWith('.')
|
|||
|
|
const parts = v.split('.')
|
|||
|
|
let intPart = parts[0] || ''
|
|||
|
|
let decPart = parts[1] || ''
|
|||
|
|
if (intPart.length > 6) { intPart = intPart.slice(0, 6) }
|
|||
|
|
if (decPart) { decPart = decPart.slice(0, 4) }
|
|||
|
|
v = decPart.length ? `${intPart}.${decPart}` : (endsWithDot ? `${intPart}.` : intPart)
|
|||
|
|
this.$set(this.machineList, index, { ...this.machineList[index], theoryPower: v })
|
|||
|
|
},
|
|||
|
|
handleNumericCell(index, key) {
|
|||
|
|
const rowItem = this.machineList && this.machineList[index]
|
|||
|
|
if (!rowItem || this.isRowDisabled(rowItem)) return
|
|||
|
|
// 输入阶段限制：
|
|||
|
|
// - 功耗：6 位整数 + 4 位小数
|
|||
|
|
// - 价格：12 位整数 + 2 位小数
|
|||
|
|
// - 其他：保持原逻辑（6 位小数）
|
|||
|
|
let v = String(this.machineList[index][key] ?? '')
|
|||
|
|
v = v.replace(/[^0-9.]/g, '')
|
|||
|
|
const firstDot = v.indexOf('.')
|
|||
|
|
if (firstDot !== -1) {
|
|||
|
|
v = v.slice(0, firstDot + 1) + v.slice(firstDot + 1).replace(/\./g, '')
|
|||
|
|
}
|
|||
|
|
if (key === 'powerDissipation') {
|
|||
|
|
const endsWithDot = v.endsWith('.')
|
|||
|
|
const parts = v.split('.')
|
|||
|
|
let intPart = parts[0] || ''
|
|||
|
|
let decPart = parts[1] || ''
|
|||
|
|
if (intPart.length > 6) { intPart = intPart.slice(0, 6) }
|
|||
|
|
if (decPart) { decPart = decPart.slice(0, 4) }
|
|||
|
|
v = decPart.length ? `${intPart}.${decPart}` : (endsWithDot ? `${intPart}.` : intPart)
|
|||
|
|
} else if (key === 'price') {
|
|||
|
|
const endsWithDot = v.endsWith('.')
|
|||
|
|
const parts = v.split('.')
|
|||
|
|
let intPart = parts[0] || ''
|
|||
|
|
let decPart = parts[1] || ''
|
|||
|
|
if (intPart.length > 12) { intPart = intPart.slice(0, 12) }
|
|||
|
|
if (decPart) { decPart = decPart.slice(0, 2) }
|
|||
|
|
v = decPart.length ? `${intPart}.${decPart}` : (endsWithDot ? `${intPart}.` : intPart)
|
|||
|
|
} else {
|
|||
|
|
if (firstDot !== -1) {
|
|||
|
|
const [i, d] = v.split('.')
|
|||
|
|
v = i + '.' + (d ? d.slice(0, 6) : '')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const row = { ...this.machineList[index], [key]: v }
|
|||
|
|
this.$set(this.machineList, index, row)
|
|||
|
|
},
|
|||
|
|
handlePriceBlur(index) {
|
|||
|
|
const raw = String(this.machineList[index].price ?? '')
|
|||
|
|
const pattern = /^\d{1,12}(\.\d{1,2})?$/
|
|||
|
|
if (!raw || Number(raw) <= 0 || !pattern.test(raw)) {
|
|||
|
|
this.$message.warning('单价必须大于0，整数最多12位，小数最多2位')
|
|||
|
|
const row = { ...this.machineList[index], price: '' }
|
|||
|
|
this.$set(this.machineList, index, row)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
handleTheoryPowerBlur(index) {
|
|||
|
|
const raw = String(this.machineList[index].theoryPower ?? '')
|
|||
|
|
const pattern = /^\d{1,6}(\.\d{1,4})?$/
|
|||
|
|
if (!raw || Number(raw) <= 0 || !pattern.test(raw)) {
|
|||
|
|
this.$message.warning('理论算力必须大于0')
|
|||
|
|
const row = { ...this.machineList[index], theoryPower: '' }
|
|||
|
|
this.$set(this.machineList, index, row)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
handlePowerDissipationBlur(index) {
|
|||
|
|
const raw = String(this.machineList[index].powerDissipation ?? '')
|
|||
|
|
const pattern = /^\d{1,6}(\.\d{1,4})?$/
|
|||
|
|
if (!raw || Number(raw) <= 0 || !pattern.test(raw)) {
|
|||
|
|
this.$message.warning('功耗必须大于0')
|
|||
|
|
const row = { ...this.machineList[index], powerDissipation: '' }
|
|||
|
|
this.$set(this.machineList, index, row)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
handleTypeCell(index) {
|
|||
|
|
const rowItem = this.machineList && this.machineList[index]
|
|||
|
|
if (!rowItem || this.isRowDisabled(rowItem)) return
|
|||
|
|
const row = { ...this.machineList[index], type: this.machineList[index].type }
|
|||
|
|
this.$set(this.machineList, index, row)
|
|||
|
|
},
|
|||
|
|
handleStateChange(index) {
|
|||
|
|
const rowItem = this.machineList && this.machineList[index]
|
|||
|
|
if (!rowItem || this.isRowDisabled(rowItem)) return
|
|||
|
|
const row = { ...this.machineList[index], state: this.machineList[index].state }
|
|||
|
|
this.$set(this.machineList, index, row)
|
|||
|
|
},
|
|||
|
|
async handleDeleteMachine(row) {
|
|||
|
|
if (!row || !row.id) return
|
|||
|
|
if (this.isRowDisabled(row)) {
|
|||
|
|
this.$message.warning('该矿机已售出，无法删除')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
await this.$confirm('确定删除该矿机吗？删除后不可恢复', '提示', {
|
|||
|
|
confirmButtonText: '删除',
|
|||
|
|
cancelButtonText: '取消',
|
|||
|
|
type: 'warning'
|
|||
|
|
})
|
|||
|
|
const res = await deleteMachine({ id: row.id })
|
|||
|
|
if (res && res.code === 200) {
|
|||
|
|
this.$message.success('删除成功')
|
|||
|
|
this.fetchMachineList({ id: this.productId })
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
// 用户取消
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async handleSubmitMachines() {
|
|||
|
|
if (!this.machineList || !this.machineList.length) {
|
|||
|
|
this.$message.warning('没有可提交的数据')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
// 提交前强校验：理论算力、功耗、单价必须填写且格式正确（全部行都校验）
|
|||
|
|
const powerPattern = /^\d{1,6}(\.\d{1,4})?$/
|
|||
|
|
const pricePattern = /^\d{1,12}(\.\d{1,2})?$/
|
|||
|
|
const isOnlySpaces = (v) => typeof v === 'string' && v.trim().length === 0 && v.length > 0
|
|||
|
|
for (let i = 0; i < this.machineList.length; i += 1) {
|
|||
|
|
const row = this.machineList[i]
|
|||
|
|
const rowLabel = row && (row.miner || row.id || i + 1)
|
|||
|
|
const theoryRaw = String(row.theoryPower ?? '')
|
|||
|
|
const priceRaw = String(row.price ?? '')
|
|||
|
|
const typeRaw = String(row.type ?? '')
|
|||
|
|
const dissRaw = String(row.powerDissipation ?? '')
|
|||
|
|
|
|||
|
|
if (!theoryRaw || Number(theoryRaw) <= 0 || !powerPattern.test(theoryRaw)) {
|
|||
|
|
this.$message.warning(`第${i + 1}行(机器:${rowLabel}) 理论算力必须大于0，整数最多6位，小数最多4位`)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (!dissRaw || Number(dissRaw) <= 0 || !powerPattern.test(dissRaw)) {
|
|||
|
|
this.$message.warning(`第${i + 1}行(机器:${rowLabel}) 功耗必须大于0，整数最多6位，小数最多4位`)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (!priceRaw || Number(priceRaw) <= 0 || !pricePattern.test(priceRaw)) {
|
|||
|
|
this.$message.warning(`第${i + 1}行(机器:${rowLabel}) 单价必须大于0，整数最多12位，小数最多2位`)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
// 型号允许为空，但如果填写则不能全空格
|
|||
|
|
if (typeRaw && isOnlySpaces(typeRaw)) {
|
|||
|
|
this.$message.warning(`第${i + 1}行(机器:${rowLabel}) 型号不能全是空格`)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const payload = this.machineList.map(m => ({
|
|||
|
|
id: m.id,
|
|||
|
|
powerDissipation: Number(m.powerDissipation ?? 0),
|
|||
|
|
price: Number(m.price ?? 0),
|
|||
|
|
state: Number(m.state ?? 0),
|
|||
|
|
theoryPower: Number(m.theoryPower ?? 0),
|
|||
|
|
type: m.type || '',
|
|||
|
|
unit: m.unit || ''
|
|||
|
|
}))
|
|||
|
|
|
|||
|
|
// 关闭外层确认弹窗，直接提交
|
|||
|
|
this.confirmVisible = false
|
|||
|
|
|
|||
|
|
console.log(payload, 'payload');
|
|||
|
|
await this.updateMachineList(payload)
|
|||
|
|
} catch (e) {
|
|||
|
|
// 异常处理
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
handleBack() {
|
|||
|
|
this.$router.back()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.account-product-detail { padding: 8px; }
|
|||
|
|
.header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
|
|||
|
|
.title { margin: 0; font-size: 18px; font-weight: 600; }
|
|||
|
|
.detail-card { margin-bottom: 12px; }
|
|||
|
|
.detail-form { padding: 4px 8px; }
|
|||
|
|
.image-row { display: flex; align-items: center; min-height: 120px; }
|
|||
|
|
.cover { width: 200px; height: 120px; object-fit: cover; border-radius: 4px; background: #f5f5f5; border: 1px solid #eee; }
|
|||
|
|
.placeholder { color: #999; }
|
|||
|
|
.section-title { font-weight: 600; }
|
|||
|
|
.ranges-wrapper { display: grid; gap: 12px; }
|
|||
|
|
.range-block { border: 1px solid #f0f0f0; background: #fcfcfc; border-radius: 6px; padding: 10px; }
|
|||
|
|
.item { color: #444; line-height: 24px; }
|
|||
|
|
.machines-box { margin-top: 8px; border-top: 1px dashed #e5e5e5; padding-top: 8px; }
|
|||
|
|
.machine-row { display: flex; flex-wrap: wrap; gap: 8px; color: #555; line-height: 22px; }
|
|||
|
|
.split { width: 8px; }
|
|||
|
|
.empty-text { color: #909399; text-align: center; padding: 12px 0; }
|
|||
|
|
|
|||
|
|
|
|||
|
|
</style>
|
|||
|
|
<style>
|
|||
|
|
.el-input-group__append, .el-input-group__prepend{
|
|||
|
|
padding: 0 5px !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 变化高亮：为输入框外层添加红色边框，视觉醒目但不改变布局 */
|
|||
|
|
.changed-input .el-input__inner,
|
|||
|
|
.changed-input input.el-input__inner {
|
|||
|
|
border-color: #f56c6c !important;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|