This commit is contained in:
parent
3e811a2236
commit
5fa24ac729
|
|
@ -64,45 +64,50 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="240">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-plus"
|
||||
@click="handleAddChild(row)"
|
||||
v-if="row.nodeCount !== row.level"
|
||||
>
|
||||
新增
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-upload"
|
||||
v-if="row.nodeCount === row.level"
|
||||
@click="handleUploadModel(row)"
|
||||
>
|
||||
上传模型
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleEdit(row)"
|
||||
v-if="row.level != 1"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
style="color: #f56c6c"
|
||||
@click="handleDelete(row)"
|
||||
v-if="row.level != 1"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
<template slot-scope="{ row }">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-plus"
|
||||
@click="handleAddChild(row)"
|
||||
v-if="row.nodeCount !== row.level"
|
||||
>
|
||||
新增
|
||||
</el-button>
|
||||
|
||||
<!-- 根据 modelUrl 显示上传或查看 -->
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
:icon="row.modelUrl ? 'el-icon-view' : 'el-icon-upload'"
|
||||
@click="row.modelUrl ? handleViewModel(row) : handleUploadModel(row)"
|
||||
v-if="row.nodeCount === row.level"
|
||||
>
|
||||
{{ row.modelUrl ? '查看模型' : '上传模型' }}
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleEdit(row)"
|
||||
v-if="row.level != 1"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
style="color: #f56c6c"
|
||||
@click="handleDelete(row)"
|
||||
v-if="row.level != 1"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
|
|
@ -123,9 +128,21 @@
|
|||
<el-dialog width="50%" append-to-body :title="useOrReturnFormTitle" :visible.sync="useOrReturnFormVisible">
|
||||
<UseOrReturnForm
|
||||
ref="useOrReturnFormComponentRef"
|
||||
@closeUseOrReturnFormDialog="closeUseOrReturnFormDialog"
|
||||
v-if="useOrReturnFormVisible"
|
||||
:project-id="currentProjectId"
|
||||
@closeUseOrReturnFormDialog="useOrReturnFormVisible = false"
|
||||
@refreshParentList="getModelList"
|
||||
/>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
title="模型预览"
|
||||
:visible.sync="viewDialogVisible"
|
||||
width="60%"
|
||||
append-to-body
|
||||
>
|
||||
<DxfViewer :dxfUrl="dxfPreviewUrl" v-if="viewDialogVisible" />
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -133,6 +150,8 @@
|
|||
import AddOrEditForm from './addOrEditForm.vue'
|
||||
import UseOrReturnForm from './useOrReturnForm.vue'
|
||||
import UseRecordTable from './useRecordTable.vue'
|
||||
import DxfViewer from './DxfViewer.vue'
|
||||
|
||||
|
||||
import { getModelListApi, delModelApi } from '@/api/basic/model'
|
||||
export default {
|
||||
|
|
@ -142,8 +161,17 @@ export default {
|
|||
UseOrReturnForm,
|
||||
UseRecordTable,
|
||||
},
|
||||
components: {
|
||||
AddOrEditForm,
|
||||
UseOrReturnForm,
|
||||
UseRecordTable,
|
||||
DxfViewer
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
viewDialogVisible: false,
|
||||
dxfPreviewUrl: '',
|
||||
total: 0, // 总条数
|
||||
loading: false, // 加载中
|
||||
addOrEditFormTitle: '新增', // 新增或编辑对话框标题
|
||||
|
|
@ -153,6 +181,7 @@ export default {
|
|||
useRecordFormVisible: false, // 使用记录对话框是否显示
|
||||
// 设备列表
|
||||
modelList: [],
|
||||
currentProjectId: null,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
// pageNum: 1,
|
||||
|
|
@ -168,6 +197,19 @@ export default {
|
|||
this.getModelList()
|
||||
},
|
||||
methods: {
|
||||
// 查看模型按钮
|
||||
handleViewModel(row) {
|
||||
const modelUrl = row.modelUrl
|
||||
console.log(modelUrl)
|
||||
if (!modelUrl || !modelUrl.endsWith('.dxf')) {
|
||||
this.$modal.msgWarning('模型地址无效或不是DXF文件')
|
||||
return
|
||||
}
|
||||
|
||||
this.dxfPreviewUrl = modelUrl
|
||||
this.viewDialogVisible = true
|
||||
},
|
||||
|
||||
// 查询按钮
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
|
|
@ -232,7 +274,14 @@ getModelList() {
|
|||
|
||||
// 上传按钮
|
||||
handleUploadModel(row) {
|
||||
this.useOrReturnFormVisible = true
|
||||
this.$nextTick(() => {
|
||||
// 设置新的 projectId
|
||||
this.currentProjectId = row.projectId || row.id || null
|
||||
this.useOrReturnFormVisible = true
|
||||
|
||||
// 找到子组件并调用它的 resetForm 方法
|
||||
this.$refs.useOrReturnFormRef?.resetForm()
|
||||
})
|
||||
},
|
||||
|
||||
// 查看记录按钮
|
||||
|
|
|
|||
|
|
@ -1,50 +1,61 @@
|
|||
<template>
|
||||
<!-- 基础管理-设备管理-领用或归还 -->
|
||||
<div>
|
||||
<el-form :model="useOrReturnForm" :rules="useOrReturnFormRules" ref="useOrReturnFormRef" label-width="120px">
|
||||
<el-form-item label="模型名称" prop="user">
|
||||
<el-input v-model="useOrReturnForm.user" placeholder="请输入模型名称" />
|
||||
<el-form-item label="所属项目" prop="projectId" v-show="false">
|
||||
<el-input v-model="useOrReturnForm.projectId" placeholder="请输入项目ID" />
|
||||
</el-form-item>
|
||||
<el-form-item label="模型上传类型" prop="user">
|
||||
<el-input v-model="useOrReturnForm.user" placeholder="请输入模型名称" />
|
||||
|
||||
<!-- 可选显示：模型URL -->
|
||||
<el-form-item label="模型URL" prop="modelUrl" v-show="false">
|
||||
<el-input v-model="useOrReturnForm.modelUrl" placeholder="上传后自动填充" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="模型文件" prop="returnUser">
|
||||
<el-form-item label="模型名称" prop="modelName">
|
||||
<el-input v-model="useOrReturnForm.modelName" placeholder="请输入模型名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="模型上传类型" prop="modelType">
|
||||
<el-input v-model="useOrReturnForm.modelType" placeholder="请输入模型名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="模型文件" prop="files">
|
||||
<el-upload
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
action="/dev-api/common/upload"
|
||||
:on-preview="handlePreview"
|
||||
:headers="uploadHeaders"
|
||||
:on-remove="handleRemove"
|
||||
:on-success="handleSuccess"
|
||||
:before-remove="beforeRemove"
|
||||
multiple
|
||||
:limit="3"
|
||||
:on-exceed="handleExceed"
|
||||
:file-list="fileList"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<div class="upload-demo">
|
||||
<el-button size="small" icon="el-icon-paperclip">上传模型</el-button>
|
||||
<div class="upload-demo-tip">仅支持上传dxf文件</div>
|
||||
</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="模型版本" prop="returnUser">
|
||||
<el-input v-model="useOrReturnForm.user" placeholder="请输入模型版本" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设计人员" prop="returnUser">
|
||||
<el-select v-model="useOrReturnForm.user" placeholder="请选择设计人员" style="width: 100%">
|
||||
<el-option label="张工" value="1" />
|
||||
<el-option label="李工" value="2" />
|
||||
<el-option label="王工" value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="版本描述" prop="returnUser">
|
||||
<el-input
|
||||
maxlength="100"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
placeholder="请输入版本描述"
|
||||
v-model="useOrReturnForm.user"
|
||||
:autosize="{ minRows: 3, maxRows: 6 }"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="模型版本" prop="version">
|
||||
<el-input v-model="useOrReturnForm.version" placeholder="请输入模型版本" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设计人员" prop="returnUser">
|
||||
<el-select v-model="useOrReturnForm.designer" placeholder="请选择设计人员" style="width: 100%">
|
||||
<el-option label="张工" value="1" />
|
||||
<el-option label="李工" value="2" />
|
||||
<el-option label="王工" value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="版本描述" prop="remark">
|
||||
<el-input
|
||||
maxlength="100"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
placeholder="请输入版本描述"
|
||||
v-model="useOrReturnForm.user"
|
||||
:autosize="{ minRows: 3, maxRows: 6 }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
|
|
@ -56,64 +67,159 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { getToken } from '@/utils/auth'
|
||||
import { addModel } from '@/api/basic/model'
|
||||
|
||||
export default {
|
||||
name: 'useOrReturnForm',
|
||||
|
||||
data() {
|
||||
return {
|
||||
useOrReturnForm: {
|
||||
user: '',
|
||||
useTime: '',
|
||||
returnUser: '',
|
||||
modelName: '',
|
||||
modelType: '',
|
||||
version: '',
|
||||
designer: '',
|
||||
user: '', // 实际是备注字段（提交时映射为 remark）
|
||||
files: [],
|
||||
modelUrl: '', // ✅ 新增：保存上传的文件 URL
|
||||
projectId: '' // ✅ 新增：保存所属项目 ID
|
||||
},
|
||||
useOrReturnFormRules: {
|
||||
user: [{ required: true, message: '请输入领用人', trigger: 'blur' }],
|
||||
useTime: [{ required: true, message: '请选择领用时间', trigger: 'change' }],
|
||||
returnUser: [{ required: true, message: '请输入退还人', trigger: 'blur' }],
|
||||
},
|
||||
|
||||
fileList: [],
|
||||
fileList: []
|
||||
}
|
||||
},
|
||||
props: {
|
||||
projectId: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.useOrReturnForm.projectId = this.projectId
|
||||
},
|
||||
computed: {
|
||||
// 上传 token
|
||||
uploadHeaders() {
|
||||
return {
|
||||
Authorization: 'Bearer ' + getToken()
|
||||
}
|
||||
},
|
||||
useOrReturnFormRules() {
|
||||
return {
|
||||
modelName: [{ required: true, message: '请输入模型名称', trigger: 'blur' }],
|
||||
modelType: [{ required: true, message: '请输入上传类型', trigger: 'blur' }],
|
||||
version: [{ required: true, message: '请输入模型版本', trigger: 'blur' }],
|
||||
designer: [{ required: true, message: '请选择设计人员', trigger: 'change' }],
|
||||
files: [{ required: true, message: '请上传模型文件', trigger: 'change' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.$emit('closeUseOrReturnFormDialog')
|
||||
},
|
||||
submitForm() {
|
||||
// this.$emit('submitForm')
|
||||
|
||||
this.$refs.useOrReturnFormRef.validate((valid) => {
|
||||
if (valid) {
|
||||
this.$emit('closeUseOrReturnFormDialog')
|
||||
} else {
|
||||
return false
|
||||
// ✅ 修复 async 错误
|
||||
async submitForm() {
|
||||
this.$refs.useOrReturnFormRef.validate(async (valid) => {
|
||||
if (!valid) return;
|
||||
|
||||
const formData = {
|
||||
modelName: this.useOrReturnForm.modelName,
|
||||
modelType: this.useOrReturnForm.modelType,
|
||||
version: this.useOrReturnForm.version,
|
||||
designer: this.useOrReturnForm.designer,
|
||||
remark: this.useOrReturnForm.user,
|
||||
modelUrl: this.useOrReturnForm.modelUrl, // ✅ 新增字段
|
||||
projectId: this.useOrReturnForm.projectId, // ✅ 新增字段
|
||||
filePaths: this.useOrReturnForm.files.map(file => file.url)
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await addModel(formData);
|
||||
if (res.code === 200) {
|
||||
this.$modal.msgSuccess('模型添加成功');
|
||||
this.$emit('closeUseOrReturnFormDialog');
|
||||
this.$emit('refreshParentList');
|
||||
this.resetForm();
|
||||
} else {
|
||||
this.$modal.msgError(res.msg || '提交失败');
|
||||
}
|
||||
} catch (error) {
|
||||
this.$modal.msgError('提交异常: ' + error.message);
|
||||
}
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.$refs.useOrReturnFormRef.resetFields()
|
||||
});
|
||||
},
|
||||
|
||||
setFormData(data) {},
|
||||
resetForm() {
|
||||
this.$refs.useOrReturnFormRef.resetFields();
|
||||
this.fileList = [];
|
||||
this.useOrReturnForm.files = [];
|
||||
},
|
||||
|
||||
handleSuccess(response, file, fileList) {
|
||||
if (response.code === 200) {
|
||||
const uploadedUrl = response.fileUrl || response.data || response.url;
|
||||
this.fileList = fileList;
|
||||
this.useOrReturnForm.files.push({
|
||||
name: file.name,
|
||||
url:uploadedUrl,
|
||||
uid: file.uid
|
||||
});
|
||||
if (!this.useOrReturnForm.modelUrl) {
|
||||
this.useOrReturnForm.modelUrl = uploadedUrl;
|
||||
}
|
||||
this.$refs.useOrReturnFormRef.validateField('files');
|
||||
} else {
|
||||
this.$message.error(response.msg || '文件上传失败');
|
||||
this.handleRemove(file);
|
||||
}
|
||||
},
|
||||
|
||||
handleRemove(file, fileList) {
|
||||
this.fileList = fileList;
|
||||
this.useOrReturnForm.files = this.useOrReturnForm.files.filter(
|
||||
f => f.uid !== file.uid
|
||||
);
|
||||
this.$refs.useOrReturnFormRef.validateField('files');
|
||||
},
|
||||
|
||||
beforeUpload(file) {
|
||||
const isDxf = file.name.toLowerCase().endsWith('.dxf');
|
||||
if (!isDxf) {
|
||||
this.$message.error('只能上传DXF格式的文件!');
|
||||
}
|
||||
return isDxf;
|
||||
},
|
||||
|
||||
handlePreview(file) {
|
||||
console.log(file)
|
||||
this.$message.info('文件预览功能可根据实际需求实现');
|
||||
},
|
||||
handleRemove(file) {
|
||||
console.log(file)
|
||||
|
||||
beforeRemove(file) {
|
||||
return this.$confirm(`确定移除 ${file.name}？`);
|
||||
},
|
||||
beforeRemove(file) {},
|
||||
|
||||
handleExceed(files, fileList) {
|
||||
this.$message.warning(
|
||||
`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
|
||||
files.length + fileList.length
|
||||
} 个文件`,
|
||||
)
|
||||
`最多上传3个文件，本次选择了 ${files.length} 个文件，总共选择了 ${files.length + fileList.length} 个`
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
// 设定编辑回显
|
||||
setFormData(data) {
|
||||
if (data && data.files) {
|
||||
this.useOrReturnForm.files = [...data.files];
|
||||
this.fileList = data.files.map(file => ({
|
||||
name: file.name,
|
||||
url: file.url
|
||||
}));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.upload-demo {
|
||||
display: flex;
|
||||
|
|
@ -123,4 +229,4 @@ export default {
|
|||
color: #f56c6c;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Loading…
Reference in New Issue