bonus
/
water-design-const-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

测试

This commit is contained in:
lizhenhua 2025-07-17 10:54:30 +08:00
parent 3e811a2236
commit 5fa24ac729
2 changed files with 256 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
src/views/basic/model-manage/index.vue
View File

@ -64,45 +64,50 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" align="center" width="240"> <el-table-column label="操作" align="center" width="240">
<template slot-scope="{ row }"> <template slot-scope="{ row }">
<el-button <el-button
size="mini" size="mini"
type="text" type="text"
icon="el-icon-plus" icon="el-icon-plus"
@click="handleAddChild(row)" @click="handleAddChild(row)"
v-if="row.nodeCount !== row.level" v-if="row.nodeCount !== row.level"
> >
新增 新增
</el-button> </el-button>
<el-button
size="mini" <!-- 根据 modelUrl 显示上传或查看 -->
type="text" <el-button
icon="el-icon-upload" size="mini"
v-if="row.nodeCount === row.level" type="text"
@click="handleUploadModel(row)" :icon="row.modelUrl ? 'el-icon-view' : 'el-icon-upload'"
> @click="row.modelUrl ? handleViewModel(row) : handleUploadModel(row)"
上传模型 v-if="row.nodeCount === row.level"
</el-button> >
<el-button {{ row.modelUrl ? '查看模型' : '上传模型' }}
size="mini" </el-button>
type="text"
icon="el-icon-edit" <el-button
@click="handleEdit(row)" size="mini"
v-if="row.level != 1" type="text"
> icon="el-icon-edit"
修改 @click="handleEdit(row)"
</el-button> v-if="row.level != 1"
<el-button >
size="mini" 修改
type="text" </el-button>
icon="el-icon-delete"
style="color: #f56c6c" <el-button
@click="handleDelete(row)" size="mini"
v-if="row.level != 1" type="text"
> icon="el-icon-delete"
删除 style="color: #f56c6c"
</el-button> @click="handleDelete(row)"
</template> v-if="row.level != 1"
>
删除
</el-button>
</template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -123,9 +128,21 @@
<el-dialog width="50%" append-to-body :title="useOrReturnFormTitle" :visible.sync="useOrReturnFormVisible"> <el-dialog width="50%" append-to-body :title="useOrReturnFormTitle" :visible.sync="useOrReturnFormVisible">
<UseOrReturnForm <UseOrReturnForm
ref="useOrReturnFormComponentRef" ref="useOrReturnFormComponentRef"
@closeUseOrReturnFormDialog="closeUseOrReturnFormDialog" v-if="useOrReturnFormVisible"
:project-id="currentProjectId"
@closeUseOrReturnFormDialog="useOrReturnFormVisible = false"
@refreshParentList="getModelList"
/> />
</el-dialog> </el-dialog>
<el-dialog
title="模型预览"
:visible.sync="viewDialogVisible"
width="60%"
append-to-body
>
<DxfViewer :dxfUrl="dxfPreviewUrl" v-if="viewDialogVisible" />
</el-dialog>
</div> </div>
</template> </template>
@ -133,6 +150,8 @@
import AddOrEditForm from './addOrEditForm.vue' import AddOrEditForm from './addOrEditForm.vue'
import UseOrReturnForm from './useOrReturnForm.vue' import UseOrReturnForm from './useOrReturnForm.vue'
import UseRecordTable from './useRecordTable.vue' import UseRecordTable from './useRecordTable.vue'
import DxfViewer from './DxfViewer.vue'
import { getModelListApi, delModelApi } from '@/api/basic/model' import { getModelListApi, delModelApi } from '@/api/basic/model'
export default { export default {
@ -142,8 +161,17 @@ export default {
UseOrReturnForm, UseOrReturnForm,
UseRecordTable, UseRecordTable,
}, },
components: {
AddOrEditForm,
UseOrReturnForm,
UseRecordTable,
DxfViewer
},
data() { data() {
return { return {
viewDialogVisible: false,
dxfPreviewUrl: '',
total: 0, // 总条数 total: 0, // 总条数
loading: false, // 加载中 loading: false, // 加载中
addOrEditFormTitle: '新增', // 新增或编辑对话框标题 addOrEditFormTitle: '新增', // 新增或编辑对话框标题
@ -153,6 +181,7 @@ export default {
useRecordFormVisible: false, // 使用记录对话框是否显示 useRecordFormVisible: false, // 使用记录对话框是否显示
// 设备列表 // 设备列表
modelList: [], modelList: [],
currentProjectId: null,
// 查询参数 // 查询参数
queryParams: { queryParams: {
// pageNum: 1, // pageNum: 1,
@ -168,6 +197,19 @@ export default {
this.getModelList() this.getModelList()
}, },
methods: { 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() { handleQuery() {
this.queryParams.pageNum = 1 this.queryParams.pageNum = 1
@ -232,7 +274,14 @@ getModelList() {
// 上传按钮 // 上传按钮
handleUploadModel(row) { handleUploadModel(row) {
this.useOrReturnFormVisible = true this.$nextTick(() => {
// 设置新的 projectId
this.currentProjectId = row.projectId || row.id || null
this.useOrReturnFormVisible = true
// 找到子组件并调用它的 resetForm 方法
this.$refs.useOrReturnFormRef?.resetForm()
})
}, },
// 查看记录按钮 // 查看记录按钮

226
src/views/basic/model-manage/useOrReturnForm.vue
View File

@ -1,50 +1,61 @@
<template> <template>
<!-- 基础管理-设备管理-领用或归还 -->
<div> <div>
<el-form :model="useOrReturnForm" :rules="useOrReturnFormRules" ref="useOrReturnFormRef" label-width="120px"> <el-form :model="useOrReturnForm" :rules="useOrReturnFormRules" ref="useOrReturnFormRef" label-width="120px">
<el-form-item label="模型名称" prop="user"> <el-form-item label="所属项目" prop="projectId" v-show="false">
<el-input v-model="useOrReturnForm.user" placeholder="请输入模型名称" /> <el-input v-model="useOrReturnForm.projectId" placeholder="请输入项目ID" />
</el-form-item>
<el-form-item label="模型上传类型" prop="user">
<el-input v-model="useOrReturnForm.user" placeholder="请输入模型名称" />
</el-form-item> </el-form-item>
<el-form-item label="模型文件" prop="returnUser"> <!-- 可选显示：模型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="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 <el-upload
action="https://jsonplaceholder.typicode.com/posts/" action="/dev-api/common/upload"
:on-preview="handlePreview" :on-preview="handlePreview"
:headers="uploadHeaders"
:on-remove="handleRemove" :on-remove="handleRemove"
:on-success="handleSuccess"
:before-remove="beforeRemove" :before-remove="beforeRemove"
multiple multiple
:limit="3" :limit="3"
:on-exceed="handleExceed" :on-exceed="handleExceed"
:file-list="fileList" :file-list="fileList"
:before-upload="beforeUpload"
> >
<div class="upload-demo"> <div class="upload-demo">
<el-button size="small" icon="el-icon-paperclip">上传模型</el-button> <el-button size="small" icon="el-icon-paperclip">上传模型</el-button>
<div class="upload-demo-tip">仅支持上传dxf文件</div> <div class="upload-demo-tip">仅支持上传dxf文件</div>
</div> </div>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
<el-form-item label="模型版本" prop="returnUser"> <el-form-item label="模型版本" prop="version">
<el-input v-model="useOrReturnForm.user" placeholder="请输入模型版本" /> <el-input v-model="useOrReturnForm.version" placeholder="请输入模型版本" />
</el-form-item> </el-form-item>
<el-form-item label="设计人员" prop="returnUser"> <el-form-item label="设计人员" prop="returnUser">
<el-select v-model="useOrReturnForm.user" placeholder="请选择设计人员" style="width: 100%"> <el-select v-model="useOrReturnForm.designer" placeholder="请选择设计人员" style="width: 100%">
<el-option label="张工" value="1" /> <el-option label="张工" value="1" />
<el-option label="李工" value="2" /> <el-option label="李工" value="2" />
<el-option label="王工" value="3" /> <el-option label="王工" value="3" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="版本描述" prop="returnUser"> <el-form-item label="版本描述" prop="remark">
<el-input <el-input
maxlength="100" maxlength="100"
show-word-limit show-word-limit
type="textarea" type="textarea"
placeholder="请输入版本描述" placeholder="请输入版本描述"
v-model="useOrReturnForm.user" v-model="useOrReturnForm.user"
:autosize="{ minRows: 3, maxRows: 6 }" :autosize="{ minRows: 3, maxRows: 6 }"
/> />
</el-form-item>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
@ -56,64 +67,159 @@
</template> </template>
<script> <script>
import { getToken } from '@/utils/auth'
import { addModel } from '@/api/basic/model'
export default { export default {
name: 'useOrReturnForm', name: 'useOrReturnForm',
data() { data() {
return { return {
useOrReturnForm: { useOrReturnForm: {
user: '', modelName: '',
useTime: '', modelType: '',
returnUser: '', version: '',
designer: '',
user: '', // 实际是备注字段（提交时映射为 remark）
files: [],
modelUrl: '', // ✅ 新增：保存上传的文件 URL
projectId: '' // ✅ 新增：保存所属项目 ID
}, },
useOrReturnFormRules: { fileList: []
user: [{ required: true, message: '请输入领用人', trigger: 'blur' }], }
useTime: [{ required: true, message: '请选择领用时间', trigger: 'change' }], },
returnUser: [{ required: true, message: '请输入退还人', trigger: 'blur' }], props: {
}, projectId: {
type: String,
fileList: [], 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: { methods: {
cancel() { cancel() {
this.$emit('closeUseOrReturnFormDialog') this.$emit('closeUseOrReturnFormDialog')
}, },
submitForm() {
// this.$emit('submitForm')
this.$refs.useOrReturnFormRef.validate((valid) => { // ✅ 修复 async 错误
if (valid) { async submitForm() {
this.$emit('closeUseOrReturnFormDialog') this.$refs.useOrReturnFormRef.validate(async (valid) => {
} else { if (!valid) return;
return false
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) { 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) { handleExceed(files, fileList) {
this.$message.warning( this.$message.warning(
`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${ `最多上传3个文件，本次选择了 ${files.length} 个文件，总共选择了 ${files.length + fileList.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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.upload-demo { .upload-demo {
display: flex; display: flex;