<!
-- 数据表格
-->
<el
-card >
<el
-table
:data
="tableData" v
-loading
="loading" border style
="width
: 100%" @selection
-change
="handleSelectionChange">
<el
-table
-column type
="selection" width
="55" align
="center" />
<el
-table
-column prop
="uuid" label
="序号" min
-width
="120" align
="center" />
<el
-table
-column prop
="modelPreviewUrl" label
="缩略图" width
="150" align
="center">
<t
emplate #
default="{row}">
<el
-image v
-if
="row.modelPreviewUrl"
:src
="row.modelPreviewUrl"
:preview
-src
-list
="[row.modelPreviewUrl]"
:preview
-teleported
="true"
fit
="cover"
/>
</t
emplate>
</el
-table
-column>
<el
-table
-column prop
="name" label
="名称" min
-width
="100" align
="center" />
<el
-table
-column prop
="region" label
="区域" min
-width
="100" align
="center" />
<el
-table
-column prop
="factoryCode" label
="工厂" min
-width
="100" align
="center" />
<el
-table
-column prop
="fileFormat" label
="格式" min
-width
="100" align
="center" />
<el
-table
-column prop
="inUse" label
="启用状态" min
-width
="100" align
="center" />
<el
-table
-column prop
="creatTime" label
="创建时间" min
-width
="100" align
="center">
<t
emplate #
default="{row}">
{{ dayjs
(row.creatTime
).format
('YYYY
-MM
-DD HH
:mm
:ss'
) }}
</t
emplate>
</el
-table
-column>
<el
-table
-column label
="操作" min
-width
="150" align
="center">
<t
emplate #
default="{ row }">
<el
-button
v
-if
="row.modelUrl"
type
="primary"
link
size="small"
@click
="openModelPreview
(row.modelUrl
)"
>
预览
</el
-button>
<el
-button
size="small" link @click
="handleEdit
(row
)">编辑</el
-button>
<el
-button
size="small" link type
="danger" @click
="handleDelete
(row
)">删除</el
-button>
</t
emplate>
</el
-table
-column>
</el
-table>
<!
-- 分页
-->
<div class
="pagination">
<el
-pagination
v
-model
:current
-page
="currentPage"
:page
-sizes
="[10, 20, 50]"
v
-model
:page
-size="page
Size"
layout
="total,
sizes, prev, pager, next, jumper"
:total
="total"
@
size-change
="fetchData"
@current
-change
="fetchData"
/>
</div>
</el
-card>
<!
-- 新增/编辑对话框
-->
<el
-dialog v
-model
="formDialogVisible" width
="600
px">
<el
-form
:model
="formData"
:rules
="formRules" ref
="formRef" label
-width
="100
px">
<el
-form
-it
em label
="文件" prop
="modelData">
<el
-upload
action
="#"
:auto
-upload
="false"
:show
-file
-list
="false"
:on
-change
="handl
eModelChange"
accept
=".glb"
drag
style
="width
: 45%;"
>
<div v
-if
="uploadedFileInfo.name" class
="upload
-success
-info">
<!
-- 左侧：状态图标 + 文件信息
-->
<div class
="upload
-content
-left">
<el
-icon color
="#67c23a">
<CircleCheckFilled />
</el
-icon>
<div class
="upload
-text
-group">
<p class
="upload
-status">上传成功</p>
<div class
="file
-details">
<el
-icon class
="file
-icon">
<Document />
</el
-icon>
<span class
="file
-name">{{ uploadedFileInfo.name }}</span>
<small class
="file
-size">
({{ uploadedFileInfo.
size }} MB
)</small>
</div>
</div>
</div>
<!
-- 右侧：删除按钮
-->
<el
-button
size="small" type
="danger" @click
="r
emoveFile" circle plain class
="delete
-btn">
<el
-icon><Delete /></el
-icon>
</el
-button>
</div>
<div v
-else>
<el
-icon class
="el
-icon
--upload"><upload
-filled /></el
-icon>
<div class
="el
-upload__text">拖拽或 <
em>点击上传</
em> .glb 模型</div>
</div>
</el
-upload>
</el
-form
-it
em>
<el
-form
-it
em label
="缩略图" prop
="modelPreviewData">
<el
-upload
action
="#"
:auto
-upload
="false"
:show
-file
-list
="false"
:on
-change
="handleThumbnailUpload"
accept
="image/*"
drag
style
="width
: 45%;"
>
<div v
-if
="formData.modelPreviewData" class
="thumbnail
-preview
-box">
<img
:src
="formData.modelPreviewData" alt
="缩略图" class
="thumbnail
-image" />
</div>
<div v
-else>
<el
-icon class
="el
-icon
--upload"><upload
-filled /></el
-icon>
<div class
="el
-upload__text">拖拽或 <
em>点击上传</
em> 缩略图</div>
</div>
</el
-upload>
<el
-button
v
-if
="formData.modelData"
type
="primary"
size="small"
style
="margin
-top
: 10
px; width
: 300
px;"
@click
="openModelPreview
(currentModelUrl
)"
>
通过预览截图
</el
-button>
</el
-form
-it
em>
<el
-form
-it
em label
="名称" prop
="name" class
="custom
-input">
<el
-input v
-model
="formData.name" />
</el
-form
-it
em>
<el
-form
-it
em label
="区域" prop
="region" class
="custom
-input">
<el
-input v
-model
="formData.region" />
</el
-form
-it
em>
<el
-form
-it
em label
="工厂" prop
="factoryCode">
<el
-select v
-model
="formData.factoryCode" class
="wide
-select">
<el
-option
v
-for
="it
em in factoryCodes"
:key
="it
em.value"
:label
="it
em.label"
:value
="it
em.value"
/>
</el
-select>
</el
-form
-it
em>
<el
-form
-it
em label
="格式" prop
="fileFormat">
<el
-select v
-model
="formData.fileFormat" class
="wide
-select">
<el
-option
v
-for
="it
em in fileFormats"
:key
="it
em.value"
:label
="it
em.label"
:value
="it
em.value"
/>
</el
-select>
</el
-form
-it
em>
<el
-form
-it
em label
="启用" prop
="inUse">
</el
-form
-it
em>
</el
-form>
<t
emplate #footer>
<el
-button @click
="formDialogVisible
= false">取消</el
-button>
<el
-button type
="primary" @click
="submitForm">确认</el
-button>
</t
emplate>
</el
-dialog> <el
-table
-column prop
="inUse" label
="启用状态" min
-width
="100" align
="center" /> 现在有个inuse 是否启用 ，是个左右选择的按钮，可触发更新 在编辑中同样需要加这个按钮（
默认是）
扫一扫
357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
