This commit is contained in:
parent
5fa24ac729
commit
16ed8e8b61
|
|
@ -8,7 +8,7 @@ export function getModelListApi(query) {
|
||||||
params: query,
|
params: query,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// 新增模型数据
|
// 新增模型数据
|
||||||
export function addModelApi(data) {
|
export function addModelApi(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/model/add',
|
url: '/model/add',
|
||||||
|
|
@ -16,6 +16,13 @@ export function addModelApi(data) {
|
||||||
data,
|
data,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
export function openView(data) {
|
||||||
|
return request({
|
||||||
|
url: '/model/openView',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
|
})
|
||||||
|
}
|
||||||
// 删除层级
|
// 删除层级
|
||||||
export function delModelApi(data) {
|
export function delModelApi(data) {
|
||||||
return request({
|
return request({
|
||||||
|
|
@ -24,6 +31,14 @@ export function delModelApi(data) {
|
||||||
data,
|
data,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function addModel(data) {
|
||||||
|
return request({
|
||||||
|
url: '/model/addModel',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
|
})
|
||||||
|
}
|
||||||
// // 修改层级
|
// // 修改层级
|
||||||
// export function editLevelApi(data) {
|
// export function editLevelApi(data) {
|
||||||
// return request({
|
// return request({
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ import request from '@/utils/request'
|
||||||
// 查询项目列表
|
// 查询项目列表
|
||||||
export function listSurvey(query) {
|
export function listSurvey(query) {
|
||||||
return request({
|
return request({
|
||||||
url: '/basic/survey/list',
|
url: '/survey/list',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: query
|
params: query
|
||||||
})
|
})
|
||||||
|
|
@ -12,7 +12,7 @@ export function listSurvey(query) {
|
||||||
// 新增项目
|
// 新增项目
|
||||||
export function addSurvey(data) {
|
export function addSurvey(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/basic/survey',
|
url: '/survey',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data: data
|
data: data
|
||||||
})
|
})
|
||||||
|
|
@ -21,7 +21,7 @@ export function addSurvey(data) {
|
||||||
// 查询项目详细
|
// 查询项目详细
|
||||||
export function getSurvey(proId) {
|
export function getSurvey(proId) {
|
||||||
return request({
|
return request({
|
||||||
url: '/basic/survey/' + proId,
|
url: '/survey/' + proId,
|
||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
@ -30,7 +30,7 @@ export function getSurvey(proId) {
|
||||||
// 修改项目
|
// 修改项目
|
||||||
export function updateSurvey(data) {
|
export function updateSurvey(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/basic/survey',
|
url: '/survey',
|
||||||
method: 'put',
|
method: 'put',
|
||||||
data: data
|
data: data
|
||||||
})
|
})
|
||||||
|
|
@ -39,7 +39,7 @@ export function updateSurvey(data) {
|
||||||
// 删除项目
|
// 删除项目
|
||||||
export function delSurvey(proId) {
|
export function delSurvey(proId) {
|
||||||
return request({
|
return request({
|
||||||
url: '/basic/survey/' + proId,
|
url: '/survey/' + proId,
|
||||||
method: 'delete'
|
method: 'delete'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
@ -47,7 +47,7 @@ export function delSurvey(proId) {
|
||||||
// 查询项目下拉框
|
// 查询项目下拉框
|
||||||
export function projectSelect() {
|
export function projectSelect() {
|
||||||
return request({
|
return request({
|
||||||
url: '/basic/project/list',
|
url: '/project/list',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,149 +1,172 @@
|
||||||
<template>
|
<template>
|
||||||
<!-- 基础管理-设备管理 -->
|
<div class="app-container">
|
||||||
<div class="app-container">
|
<el-form size="small" :inline="true" ref="queryForm" :model="queryParams">
|
||||||
<el-form size="small" :inline="true" ref="queryForm" :model="queryParams">
|
<el-form-item label="项目名称" prop="proName">
|
||||||
<el-form-item label="项目名称" prop="proName">
|
<el-input
|
||||||
<el-input
|
clearable
|
||||||
clearable
|
placeholder="请输入项目名称"
|
||||||
placeholder="请输入项目名称"
|
v-model="queryParams.proName"
|
||||||
v-model="queryParams.proName"
|
@keyup.enter.native="handleQuery"
|
||||||
@keyup.enter.native="handleQuery"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="所属单位" prop="unit">
|
|
||||||
<el-input
|
|
||||||
clearable
|
|
||||||
placeholder="请输入所属单位"
|
|
||||||
v-model="queryParams.unit"
|
|
||||||
@keyup.enter.native="handleQuery"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="负责人" prop="chargePerson">
|
|
||||||
<el-input
|
|
||||||
clearable
|
|
||||||
placeholder="请输入负责人"
|
|
||||||
v-model="queryParams.chargePerson"
|
|
||||||
@keyup.enter.native="handleQuery"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
|
|
||||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
|
|
||||||
<!-- <el-row :gutter="10" class="mb8">
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button
|
|
||||||
plain
|
|
||||||
size="mini"
|
|
||||||
type="primary"
|
|
||||||
icon="el-icon-plus"
|
|
||||||
@click="handleAddDevice"
|
|
||||||
v-hasPermi="['basic:device:add']"
|
|
||||||
>
|
|
||||||
新增
|
|
||||||
</el-button>
|
|
||||||
</el-col>
|
|
||||||
</el-row> -->
|
|
||||||
|
|
||||||
<el-table
|
|
||||||
border
|
|
||||||
row-key="id"
|
|
||||||
v-loading="loading"
|
|
||||||
:data="modelList"
|
|
||||||
:tree-props="{ children: 'nodes' }"
|
|
||||||
>
|
|
||||||
|
|
||||||
<el-table-column label="序号" align="center" type="index" />
|
|
||||||
|
|
||||||
<el-table-column label="项目名称">
|
|
||||||
<template slot-scope="{ row }">
|
|
||||||
<span>{{ row.name }}</span>
|
|
||||||
<el-tag style="margin-left: 10px" size="mini" type="primary">节点{{ row.level }}</el-tag>
|
|
||||||
</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>
|
|
||||||
|
|
||||||
<!-- 根据 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>
|
|
||||||
|
|
||||||
<pagination
|
|
||||||
v-show="total > 0"
|
|
||||||
:total="total"
|
|
||||||
:page.sync="queryParams.pageNum"
|
|
||||||
:limit.sync="queryParams.pageSize"
|
|
||||||
@pagination="getModelList"
|
|
||||||
/>
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="所属单位" prop="unit">
|
||||||
|
<el-input
|
||||||
|
clearable
|
||||||
|
placeholder="请输入所属单位"
|
||||||
|
v-model="queryParams.unit"
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="负责人" prop="chargePerson">
|
||||||
|
<el-input
|
||||||
|
clearable
|
||||||
|
placeholder="请输入负责人"
|
||||||
|
v-model="queryParams.chargePerson"
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
|
||||||
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
<!-- 添加或修改岗位对话框 -->
|
<el-row :gutter="10" class="mb8">
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
plain
|
||||||
|
icon="el-icon-plus"
|
||||||
|
size="mini"
|
||||||
|
@click="handleAdd"
|
||||||
|
>新增</el-button>
|
||||||
|
</el-col>
|
||||||
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getModelList"></right-toolbar>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-table
|
||||||
|
border
|
||||||
|
row-key="id"
|
||||||
|
v-loading="loading"
|
||||||
|
:data="modelList"
|
||||||
|
:tree-props="{ children: 'nodes' }"
|
||||||
|
>
|
||||||
|
<el-table-column label="序号" align="center" type="index" />
|
||||||
|
|
||||||
|
<el-table-column label="项目名称">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<span>{{ row.name }}</span>
|
||||||
|
<el-tag style="margin-left: 10px" size="mini" type="primary">节点{{ row.level }}</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column label="层级名称">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<!-- 只在项目级(第一级)显示层级名称 -->
|
||||||
|
<span v-if="row.level === 1">{{ row.levelName }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" align="center" width="340">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="text"
|
||||||
|
icon="el-icon-plus"
|
||||||
|
@click="handleAddChild(row)"
|
||||||
|
v-if="row.level < row.nodeCount"
|
||||||
|
>
|
||||||
|
新增
|
||||||
|
</el-button>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- <pagination
|
||||||
|
v-show="total > 0"
|
||||||
|
:total="total"
|
||||||
|
:page.sync="queryParams.pageNum"
|
||||||
|
:limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getModelList"
|
||||||
|
/> -->
|
||||||
|
|
||||||
|
<el-dialog :title="title" :visible.sync="open" width="550px" append-to-body>
|
||||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||||
|
<el-form-item label="项目名称" prop="proName">
|
||||||
|
<el-input v-model="form.proName" placeholder="请输入项目名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="层级配置" prop="level">
|
||||||
|
<el-select v-model="form.level" placeholder="请选择层级配置" style="width: 100%">
|
||||||
|
<el-option
|
||||||
|
:key="item.configId"
|
||||||
|
:value="item.configId"
|
||||||
|
:label="item.configName"
|
||||||
|
v-for="item in levelList"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注" prop="remark">
|
||||||
|
<el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||||
|
<el-button @click="cancel">取 消</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<el-dialog width="50%" append-to-body :title="useOrReturnFormTitle" :visible.sync="useOrReturnFormVisible">
|
||||||
|
<UseOrReturnForm
|
||||||
|
ref="useOrReturnFormComponentRef"
|
||||||
|
v-if="useOrReturnFormVisible"
|
||||||
|
:project-id="currentProjectId"
|
||||||
|
@closeUseOrReturnFormDialog="useOrReturnFormVisible = false"
|
||||||
|
@refreshParentList="getModelList"
|
||||||
|
/>
|
||||||
|
</el-dialog>
|
||||||
|
<!-- 添加或修改岗位对话框 -->
|
||||||
<el-dialog width="40%" append-to-body :title="addOrEditFormTitle" :visible.sync="addOrEditFormVisible">
|
<el-dialog width="40%" append-to-body :title="addOrEditFormTitle" :visible.sync="addOrEditFormVisible">
|
||||||
<AddOrEditForm ref="addOrEditComponentRef" @closeAddOrEditFormDialog="closeAddOrEditFormDialog" />
|
<AddOrEditForm ref="addOrEditComponentRef" @closeAddOrEditFormDialog="closeAddOrEditFormDialog" />
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
<el-dialog
|
||||||
<!-- 模型上传对话框 -->
|
title="模型预览"
|
||||||
<el-dialog width="50%" append-to-body :title="useOrReturnFormTitle" :visible.sync="useOrReturnFormVisible">
|
:visible.sync="viewDialogVisible"
|
||||||
<UseOrReturnForm
|
width="60%"
|
||||||
ref="useOrReturnFormComponentRef"
|
append-to-body
|
||||||
v-if="useOrReturnFormVisible"
|
>
|
||||||
:project-id="currentProjectId"
|
<dxf-viewer :entities="dxfPreviewUrl"></dxf-viewer>
|
||||||
@closeUseOrReturnFormDialog="useOrReturnFormVisible = false"
|
</el-dialog>
|
||||||
@refreshParentList="getModelList"
|
</div>
|
||||||
/>
|
|
||||||
</el-dialog>
|
|
||||||
<el-dialog
|
|
||||||
title="模型预览"
|
|
||||||
:visible.sync="viewDialogVisible"
|
|
||||||
width="60%"
|
|
||||||
append-to-body
|
|
||||||
>
|
|
||||||
<DxfViewer :dxfUrl="dxfPreviewUrl" v-if="viewDialogVisible" />
|
|
||||||
</el-dialog>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -152,215 +175,369 @@ import UseOrReturnForm from './useOrReturnForm.vue'
|
||||||
import UseRecordTable from './useRecordTable.vue'
|
import UseRecordTable from './useRecordTable.vue'
|
||||||
import DxfViewer from './DxfViewer.vue'
|
import DxfViewer from './DxfViewer.vue'
|
||||||
|
|
||||||
|
// 引入相关的 API 接口
|
||||||
|
import { getModelListApi, delModelApi,openView } from '@/api/basic/model'
|
||||||
|
import { listProject, getProject, delProject, addProject, updateProject } from '@/api/basic/project'
|
||||||
|
import { getLevelListApi } from '@/api/basic/level-manage.js'
|
||||||
|
|
||||||
|
|
||||||
import { getModelListApi, delModelApi } from '@/api/basic/model'
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DeviceManage',
|
name: 'DeviceManage',
|
||||||
components: {
|
components: {
|
||||||
AddOrEditForm,
|
AddOrEditForm,
|
||||||
UseOrReturnForm,
|
UseOrReturnForm,
|
||||||
UseRecordTable,
|
UseRecordTable,
|
||||||
|
DxfViewer
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 用于新增/修改项目的对话框
|
||||||
|
open: false,
|
||||||
|
title: '', // 对话框标题
|
||||||
|
form: {
|
||||||
|
proId: undefined,
|
||||||
|
proName: undefined,
|
||||||
|
proType: undefined,
|
||||||
|
unit: undefined,
|
||||||
|
chargePerson: undefined,
|
||||||
|
location: undefined,
|
||||||
|
remark: undefined,
|
||||||
|
level: undefined,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
proName: [{ required: true, message: '项目名称不能为空', trigger: 'blur' }],
|
||||||
|
level: [{ required: true, message: '请选择层级配置', trigger: 'change' }],
|
||||||
|
},
|
||||||
|
levelList: [], // 层级配置列表
|
||||||
|
|
||||||
|
viewDialogVisible: false,
|
||||||
|
dxfPreviewUrl: [],
|
||||||
|
total: 0, // 总条数
|
||||||
|
loading: false, // 加载中
|
||||||
|
addOrEditFormTitle: '新增', // 新增或编辑对话框标题 (旧的AddOrEditForm组件使用)
|
||||||
|
addOrEditFormVisible: false, // 新增或编辑对话框是否显示 (旧的AddOrEditForm组件使用)
|
||||||
|
useOrReturnFormTitle: '模型上传', // 领用或归还对话框标题
|
||||||
|
useOrReturnFormVisible: false, // 领用或归还对话框是否显示
|
||||||
|
useRecordFormVisible: false, // 使用记录对话框是否显示
|
||||||
|
// 设备列表
|
||||||
|
modelList: [],
|
||||||
|
currentProjectId: null,
|
||||||
|
showSearch: true, // 控制搜索栏显示隐藏
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
// pageNum: 1, // 如果您的API支持分页，可以保留
|
||||||
|
// pageSize: 10, // 如果您的API支持分页，可以保留
|
||||||
|
proName: undefined,
|
||||||
|
unit: undefined,
|
||||||
|
chargePerson: undefined,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getModelList()
|
||||||
|
this.getLevelList() // 获取层级配置数据
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 获取层级配置列表 */
|
||||||
|
async getLevelList() {
|
||||||
|
try {
|
||||||
|
const res = await getLevelListApi({
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 1000,
|
||||||
|
})
|
||||||
|
this.levelList = res.rows
|
||||||
|
} catch (error) {
|
||||||
|
console.error("获取层级配置失败:", error)
|
||||||
|
}
|
||||||
},
|
},
|
||||||
components: {
|
// 打开新增项目对话框
|
||||||
AddOrEditForm,
|
handleAdd() {
|
||||||
UseOrReturnForm,
|
this.reset() // 重置表单
|
||||||
UseRecordTable,
|
this.open = true // 显示对话框
|
||||||
DxfViewer
|
this.title = '新增项目' // 设置对话框标题
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
viewDialogVisible: false,
|
|
||||||
dxfPreviewUrl: '',
|
|
||||||
total: 0, // 总条数
|
|
||||||
loading: false, // 加载中
|
|
||||||
addOrEditFormTitle: '新增', // 新增或编辑对话框标题
|
|
||||||
addOrEditFormVisible: false, // 新增或编辑对话框是否显示
|
|
||||||
useOrReturnFormTitle: '模型上传', // 领用或归还对话框标题
|
|
||||||
useOrReturnFormVisible: false, // 领用或归还对话框是否显示
|
|
||||||
useRecordFormVisible: false, // 使用记录对话框是否显示
|
|
||||||
// 设备列表
|
|
||||||
modelList: [],
|
|
||||||
currentProjectId: null,
|
|
||||||
// 查询参数
|
|
||||||
queryParams: {
|
|
||||||
// pageNum: 1,
|
|
||||||
// pageSize: 10,
|
|
||||||
proName: undefined,
|
|
||||||
unit: undefined,
|
|
||||||
chargePerson: undefined,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
created() {
|
// 查看模型按钮
|
||||||
// this.getDeviceList()
|
handleViewModel(row) {
|
||||||
this.getModelList()
|
/* const modelUrl = row.modelUrl
|
||||||
|
if (!modelUrl || !modelUrl.endsWith('.dxf')) {
|
||||||
|
this.$modal.msgWarning('模型地址无效或不是DXF文件')
|
||||||
|
return
|
||||||
|
} */
|
||||||
|
/* 新需求 重新做 上面建议不要删除 有需要直接可以查看 */
|
||||||
|
openView({ id: row.id }).then(response => {
|
||||||
|
this.dxfPreviewUrl = response.data
|
||||||
|
this.viewDialogVisible = true
|
||||||
|
}).catch(error => {
|
||||||
|
console.error("获取项目详情失败:", error);
|
||||||
|
});
|
||||||
|
|
||||||
},
|
},
|
||||||
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 // 假设有分页，查询时重置页码
|
||||||
this.getModelList()
|
this.getModelList()
|
||||||
},
|
},
|
||||||
|
|
||||||
// 重置按钮
|
// 重置按钮
|
||||||
resetQuery() {
|
resetQuery() {
|
||||||
this.resetForm('queryForm')
|
this.resetForm('queryForm')
|
||||||
this.handleQuery()
|
this.handleQuery()
|
||||||
},
|
},
|
||||||
|
|
||||||
// 新增按钮操作
|
// 新增设备 (如果您的旧组件AddOrEditForm.vue仍然需要，可以保留此方法)
|
||||||
handleAddDevice() {
|
handleAddDevice() {
|
||||||
this.addOrEditFormTitle = '新增'
|
this.addOrEditFormTitle = '新增'
|
||||||
this.editForm = null
|
this.editForm = null
|
||||||
this.addOrEditFormVisible = true
|
this.addOrEditFormVisible = true
|
||||||
},
|
},
|
||||||
|
|
||||||
// 新增子节点
|
// 新增子节点
|
||||||
handleAddChild(row) {
|
handleAddChild(row) {
|
||||||
const { id, proName, level, nodeCount, projectId } = row
|
const { id, proName, level, nodeCount, projectId } = row
|
||||||
this.addOrEditFormTitle = '新增'
|
this.addOrEditFormTitle = '新增'
|
||||||
this.editForm = null
|
this.editForm = null
|
||||||
this.addOrEditFormVisible = true
|
this.addOrEditFormVisible = true
|
||||||
|
|
||||||
const editForm = { deviceName: proName, id, level, nodeCount, projectId }
|
const editForm = { deviceName: proName, id, level, nodeCount, projectId }
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.addOrEditComponentRef.setFormData(editForm)
|
this.$refs.addOrEditComponentRef.setFormData(editForm)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
// 获取设备列表
|
// 获取模型列表
|
||||||
getModelList() {
|
// 生成 UUID，备用当 nodeId 缺失时
|
||||||
this.loading = true
|
generateUUID() {
|
||||||
getModelListApi(this.queryParams).then((response) => {
|
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
|
||||||
const rawList = response.rows
|
const r = Math.random() * 16 | 0
|
||||||
|
const v = c === 'x' ? r : (r & 0x3 | 0x8)
|
||||||
// 递归处理 nodes
|
return v.toString(16)
|
||||||
const formatNodes = (nodes = []) => {
|
|
||||||
return nodes.map(item => ({
|
|
||||||
...item,
|
|
||||||
id: item.nodeId, // row-key 统一使用 id
|
|
||||||
name: item.nodeName, // 展示统一使用 name
|
|
||||||
nodes: formatNodes(item.nodes || [])
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
|
|
||||||
// 第一层项目（显示 proName，子节点进入 formatNodes）
|
|
||||||
const formatted = rawList.map(project => ({
|
|
||||||
...project,
|
|
||||||
id: project.projectId,
|
|
||||||
name: project.proName,
|
|
||||||
nodes: formatNodes(project.children || [])
|
|
||||||
}))
|
|
||||||
|
|
||||||
this.modelList = formatted
|
|
||||||
this.total = response.total
|
|
||||||
this.loading = false
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
// 上传按钮
|
// 获取模型列表
|
||||||
handleUploadModel(row) {
|
// 获取模型列表 - 最终优化版
|
||||||
this.$nextTick(() => {
|
// 获取模型列表 - 最终优化版
|
||||||
// 设置新的 projectId
|
getModelList() {
|
||||||
this.currentProjectId = row.projectId || row.id || null
|
this.loading = true;
|
||||||
this.useOrReturnFormVisible = true
|
getModelListApi(this.queryParams).then((response) => {
|
||||||
|
const rawList = response.rows || [];
|
||||||
// 找到子组件并调用它的 resetForm 方法
|
|
||||||
this.$refs.useOrReturnFormRef?.resetForm()
|
// 增强型递归处理
|
||||||
})
|
const formatNodes = (nodes, level = 2) => { // 从第二级开始
|
||||||
},
|
if (!Array.isArray(nodes)) return [];
|
||||||
|
|
||||||
// 查看记录按钮
|
return nodes
|
||||||
handleViewRecord(row) {
|
.filter(item => item && item.nodeId) // 过滤无效节点
|
||||||
console.log(row)
|
.map(item => ({
|
||||||
this.useRecordFormVisible = true
|
...item,
|
||||||
},
|
id: item.nodeId,
|
||||||
|
name: item.nodeName || '未命名节点',
|
||||||
// 编辑按钮
|
level: level, // 添加层级标记
|
||||||
handleEdit(row) {
|
// 递归处理子节点，层级+1
|
||||||
const { id, proName, level, nodeCount } = row
|
nodes: formatNodes(item.nodes || item.children || [], level + 1)
|
||||||
this.addOrEditFormTitle = '编辑'
|
}));
|
||||||
this.editForm = null
|
};
|
||||||
this.addOrEditFormVisible = true
|
|
||||||
|
// 处理项目层数据
|
||||||
const editForm = { deviceName: proName, id, level, nodeCount }
|
const formatted = rawList.map(project => {
|
||||||
this.$nextTick(() => {
|
const children = project.children || [];
|
||||||
this.$refs.addOrEditComponentRef.setFormData(editForm)
|
|
||||||
})
|
// 获取层级名称（项目级才需要）
|
||||||
},
|
let levelName = '';
|
||||||
|
let nodeCount = '';
|
||||||
/** 修改按钮操作 */
|
if (this.levelList && this.levelList.length > 0) {
|
||||||
handleUpdate(row) {
|
const levelConfig = this.levelList.find(
|
||||||
this.addOrEditFormTitle = '编辑'
|
item => item.configId == project.level // 注意类型匹配
|
||||||
this.addOrEditFormVisible = true
|
);
|
||||||
},
|
levelName = levelConfig ? levelConfig.configName : '';
|
||||||
|
}
|
||||||
// 删除按钮
|
|
||||||
handleDelete(row) {
|
return {
|
||||||
this.$modal.confirm('是否确认删除当前节点数据吗？').then(async () => {
|
...project,
|
||||||
const res = await delModelApi({ id: row.id })
|
id: project.projectId,
|
||||||
if (res.code === 200) {
|
name: project.proName || '未命名项目',
|
||||||
this.$modal.msgSuccess('删除成功')
|
level: 1, // 项目级标记为1
|
||||||
this.getModelList()
|
levelName: project.levelName, // 添加层级名称
|
||||||
}
|
nodes: formatNodes(children),
|
||||||
})
|
rawData: project,
|
||||||
},
|
nodeCount:project.nodeCount
|
||||||
|
};
|
||||||
// 关闭新增或编辑对话框
|
});
|
||||||
closeAddOrEditFormDialog(isSuccess) {
|
|
||||||
this.$refs.addOrEditComponentRef.resetForm()
|
this.modelList = formatted;
|
||||||
this.addOrEditFormVisible = false
|
this.total = response.total;
|
||||||
if (isSuccess) {
|
this.loading = false;
|
||||||
this.getModelList()
|
|
||||||
}
|
}).catch(error => {
|
||||||
},
|
console.error("获取模型列表失败:", error);
|
||||||
|
this.loading = false;
|
||||||
// 关闭领用或归还对话框
|
this.$message.error("模型数据加载失败，请重试");
|
||||||
closeUseOrReturnFormDialog() {
|
});
|
||||||
|
},
|
||||||
|
// 上传按钮
|
||||||
|
handleUploadModel(row) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.currentProjectId = row.id || null
|
||||||
|
this.useOrReturnFormVisible = true
|
||||||
|
// 找到子组件并调用它的 resetForm 方法 (如果存在)
|
||||||
|
// 确保 useOrReturnFormComponentRef 存在且 resetForm 是一个函数
|
||||||
|
if (this.$refs.useOrReturnFormComponentRef && typeof this.$refs.useOrReturnFormComponentRef.resetForm === 'function') {
|
||||||
this.$refs.useOrReturnFormComponentRef.resetForm()
|
this.$refs.useOrReturnFormComponentRef.resetForm()
|
||||||
this.useOrReturnFormVisible = false
|
}
|
||||||
},
|
})
|
||||||
|
|
||||||
//
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 查看记录按钮
|
||||||
|
handleViewRecord(row) {
|
||||||
|
console.log(row)
|
||||||
|
this.useRecordFormVisible = true
|
||||||
|
},
|
||||||
|
|
||||||
|
// 编辑按钮 (旧的AddOrEditForm组件使用)
|
||||||
|
handleEdit(row) {
|
||||||
|
const { id, proName, level, nodeCount } = row
|
||||||
|
this.addOrEditFormTitle = '编辑'
|
||||||
|
this.editForm = null
|
||||||
|
this.addOrEditFormVisible = true
|
||||||
|
|
||||||
|
const editForm = { deviceName: proName, id, level, nodeCount }
|
||||||
|
this.$nextTick(() => {
|
||||||
|
// 确保 addOrEditComponentRef 存在
|
||||||
|
if (this.$refs.addOrEditComponentRef) {
|
||||||
|
this.$refs.addOrEditComponentRef.setFormData(editForm)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 修改按钮操作 (使用新的弹窗) */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
const proId = row.id; // 对于模型列表，id 对应 projectId
|
||||||
|
getProject(proId).then(response => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = '修改项目';
|
||||||
|
// 注意：这里 form.level 的赋值可能需要根据您的实际数据结构调整
|
||||||
|
// 比如，如果 response.data.level 是 configId，则可以直接赋值
|
||||||
|
// this.form.level = response.data.level;
|
||||||
|
}).catch(error => {
|
||||||
|
console.error("获取项目详情失败:", error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 删除按钮
|
||||||
|
handleDelete(row) {
|
||||||
|
this.$modal.confirm('是否确认删除当前节点数据吗？').then(async () => {
|
||||||
|
// 根据 row.level 判断是删除项目还是删除模型节点
|
||||||
|
let res;
|
||||||
|
if (row.level === 1) { // 假设 level 1 是项目
|
||||||
|
res = await delProject(row.id); // 使用 delProject API 删除项目
|
||||||
|
} else {
|
||||||
|
res = await delModelApi({ id: row.id }); // 使用 delModelApi 删除模型节点
|
||||||
|
}
|
||||||
|
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.$modal.msgSuccess('删除成功')
|
||||||
|
this.getModelList()
|
||||||
|
} else {
|
||||||
|
this.$modal.msgError(res.msg || '删除失败');
|
||||||
|
}
|
||||||
|
}).catch(() => {
|
||||||
|
// 用户取消删除
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 关闭新增或编辑对话框 (针对旧的AddOrEditForm组件)
|
||||||
|
closeAddOrEditFormDialog(isSuccess) {
|
||||||
|
if (this.$refs.addOrEditComponentRef) {
|
||||||
|
this.$refs.addOrEditComponentRef.resetForm()
|
||||||
|
}
|
||||||
|
this.addOrEditFormVisible = false
|
||||||
|
if (isSuccess) {
|
||||||
|
this.getModelList()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 关闭领用或归还对话框 (UseOrReturnForm)
|
||||||
|
closeUseOrReturnFormDialog() {
|
||||||
|
// 这个方法现在由 @closeUseOrReturnFormDialog="useOrReturnFormVisible = false" 直接处理，
|
||||||
|
// 如果还需要 resetForm，可以取消注释下面两行并确保子组件有此方法
|
||||||
|
// if (this.$refs.useOrReturnFormComponentRef) {
|
||||||
|
// this.$refs.useOrReturnFormComponentRef.resetForm();
|
||||||
|
// }
|
||||||
|
this.useOrReturnFormVisible = false
|
||||||
|
},
|
||||||
|
|
||||||
|
// 新增/修改项目对话框的取消按钮
|
||||||
|
cancel() {
|
||||||
|
this.open = false
|
||||||
|
this.reset()
|
||||||
|
},
|
||||||
|
// 新增/修改项目对话框的表单重置
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
proId: undefined,
|
||||||
|
proName: undefined,
|
||||||
|
proType: undefined,
|
||||||
|
unit: undefined,
|
||||||
|
chargePerson: undefined,
|
||||||
|
location: undefined,
|
||||||
|
remark: undefined,
|
||||||
|
level: undefined,
|
||||||
|
}
|
||||||
|
this.resetForm('form') // Element UI 的 resetForm 方法
|
||||||
|
},
|
||||||
|
/** 提交按钮 (新增/修改项目) */
|
||||||
|
submitForm: function () {
|
||||||
|
this.$refs['form'].validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
if (this.form.proId != undefined) {
|
||||||
|
updateProject(this.form).then((response) => {
|
||||||
|
this.$modal.msgSuccess('修改成功')
|
||||||
|
this.open = false
|
||||||
|
this.getModelList() // 刷新列表
|
||||||
|
}).catch(error => {
|
||||||
|
console.error("修改项目失败:", error);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
addProject(this.form).then((response) => {
|
||||||
|
this.$modal.msgSuccess('新增成功')
|
||||||
|
this.open = false
|
||||||
|
this.getModelList() // 刷新列表
|
||||||
|
}).catch(error => {
|
||||||
|
console.error("新增项目失败:", error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
/* 修改树形表格的展开图标为 +/- */
|
/* 修改树形表格的展开图标为 +/- */
|
||||||
::v-deep .el-table .el-table__expand-icon {
|
::v-deep .el-table .el-table__expand-icon {
|
||||||
transform: rotate(0deg); /* 取消默认的旋转效果 */
|
transform: rotate(0deg); /* 取消默认的旋转效果 */
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep .el-table .el-table__expand-icon .el-icon-arrow-right:before {
|
::v-deep .el-table .el-table__expand-icon .el-icon-arrow-right:before {
|
||||||
content: '＋'; /* 更大的加号 */
|
content: '＋'; /* 更大的加号 */
|
||||||
font-size: 16px; /* 调整大小 */
|
font-size: 16px; /* 调整大小 */
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
border: 1px solid #409eff;
|
border: 1px solid #409eff;
|
||||||
color: #409eff;
|
color: #409eff;
|
||||||
background-color: #f0f7ff;
|
background-color: #f0f7ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep .el-table .el-table__expand-icon--expanded .el-icon-arrow-right:before {
|
::v-deep .el-table .el-table__expand-icon--expanded .el-icon-arrow-right:before {
|
||||||
content: '－'; /* 更大的减号 */
|
content: '－'; /* 更大的减号 */
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
border: 1px solid #409eff;
|
border: 1px solid #409eff;
|
||||||
color: #409eff;
|
color: #409eff;
|
||||||
background-color: #f0f7ff;
|
background-color: #f0f7ff;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,69 +1,218 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-form :model="useOrReturnForm" :rules="useOrReturnFormRules" ref="useOrReturnFormRef" label-width="120px">
|
<!-- 上传表单 -->
|
||||||
<el-form-item label="所属项目" prop="projectId" v-show="false">
|
<el-form
|
||||||
<el-input v-model="useOrReturnForm.projectId" placeholder="请输入项目ID" />
|
:model="useOrReturnForm"
|
||||||
</el-form-item>
|
:rules="useOrReturnFormRules"
|
||||||
|
ref="useOrReturnFormRef"
|
||||||
<!-- 可选显示：模型URL -->
|
label-width="120px"
|
||||||
<el-form-item label="模型URL" prop="modelUrl" v-show="false">
|
v-show="!showLayerDialog"
|
||||||
<el-input v-model="useOrReturnForm.modelUrl" placeholder="上传后自动填充" />
|
>
|
||||||
</el-form-item>
|
<el-form-item label="所属项目" prop="projectId" v-show="false">
|
||||||
|
<el-input v-model="useOrReturnForm.projectId" placeholder="请输入项目ID" />
|
||||||
|
</el-form-item>
|
||||||
|
<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="files">
|
||||||
|
<el-upload
|
||||||
|
class="upload-demo"
|
||||||
|
action="/dev-api/common/upload"
|
||||||
|
:on-success="handleSuccess"
|
||||||
|
:on-remove="handleRemove"
|
||||||
|
:before-upload="beforeUpload"
|
||||||
|
:headers="uploadHeaders"
|
||||||
|
:file-list="fileList"
|
||||||
|
:limit="1"
|
||||||
|
:auto-upload="true"
|
||||||
|
:show-file-list="true"
|
||||||
|
:disabled="fileList.length >= 1"
|
||||||
|
>
|
||||||
|
<div v-if="fileList.length < 1" 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>
|
||||||
|
<el-button @click="cancel">取消</el-button>
|
||||||
|
<el-button type="primary" @click="goToNextStep" :disabled="!fileList.length">下一步</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
<el-form-item label="模型名称" prop="modelName">
|
<!-- 图层和实体预览 -->
|
||||||
<el-input v-model="useOrReturnForm.modelName" placeholder="请输入模型名称" />
|
<div v-if="showLayerDialog" class="layer-container">
|
||||||
</el-form-item>
|
<div class="left-panel">
|
||||||
<el-form-item label="模型上传类型" prop="modelType">
|
<h3 class="panel-title">图层列表</h3>
|
||||||
<el-input v-model="useOrReturnForm.modelType" placeholder="请输入模型名称" />
|
<el-menu
|
||||||
</el-form-item>
|
default-active="0"
|
||||||
<el-form-item label="模型文件" prop="files">
|
@select="handleLayerSelect"
|
||||||
<el-upload
|
:unique-opened="true"
|
||||||
action="/dev-api/common/upload"
|
class="layer-menu"
|
||||||
:on-preview="handlePreview"
|
background-color="#f5f7fa"
|
||||||
:headers="uploadHeaders"
|
text-color="#606266"
|
||||||
:on-remove="handleRemove"
|
active-text-color="#409EFF"
|
||||||
:on-success="handleSuccess"
|
>
|
||||||
:before-remove="beforeRemove"
|
<el-menu-item
|
||||||
multiple
|
v-for="(layer, index) in layerList"
|
||||||
:limit="3"
|
:key="layer.layerName"
|
||||||
:on-exceed="handleExceed"
|
:index="index.toString()"
|
||||||
:file-list="fileList"
|
class="layer-menu-item"
|
||||||
:before-upload="beforeUpload"
|
>
|
||||||
>
|
{{ layer.layerName }} <span class="entity-count">({{ layer.entities.length }})</span>
|
||||||
<div class="upload-demo">
|
</el-menu-item>
|
||||||
<el-button size="small" icon="el-icon-paperclip">上传模型</el-button>
|
</el-menu>
|
||||||
<div class="upload-demo-tip">仅支持上传dxf文件</div>
|
</div>
|
||||||
</div>
|
|
||||||
</el-upload>
|
|
||||||
</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>
|
<div class="right-panel">
|
||||||
<el-button @click="cancel">取消</el-button>
|
<h3 class="panel-title">图元列表</h3>
|
||||||
<el-button type="primary" @click="submitForm">确定</el-button>
|
<el-row :gutter="16" class="entity-row">
|
||||||
</el-form-item>
|
<el-col
|
||||||
</el-form>
|
v-for="(entity, i) in selectedLayerEntities"
|
||||||
|
:key="entity.id || i"
|
||||||
|
:span="8"
|
||||||
|
>
|
||||||
|
<el-card
|
||||||
|
class="entity-card"
|
||||||
|
:body-style="{ padding: '10px' }"
|
||||||
|
:shadow="selectedEntities.includes(entity.id) ? 'hover' : 'never'"
|
||||||
|
:class="{ active: selectedEntities.includes(entity.id) }"
|
||||||
|
@click="selectEntity(entity)"
|
||||||
|
>
|
||||||
|
<div class="entity-info">
|
||||||
|
<el-checkbox
|
||||||
|
v-model="entity.selected"
|
||||||
|
@click.stop
|
||||||
|
@change="selectEntity(entity)"
|
||||||
|
></el-checkbox>
|
||||||
|
<div><strong>图层名称:</strong> {{ entity.layerName }}</div>
|
||||||
|
<div><strong>类型:</strong> {{ entity.entityType }}</div>
|
||||||
|
<div><strong>颜色:</strong> {{ entity.color }}</div>
|
||||||
|
<div><strong>线宽:</strong> {{ entity.lineweight }}</div>
|
||||||
|
<div><strong>厚度:</strong> {{ entity.thickness }}</div>
|
||||||
|
<div><strong>起点:</strong> {{ entity.startPoint || '无' }}</div>
|
||||||
|
<div><strong>终点:</strong> {{ entity.endPoint || '无' }}</div>
|
||||||
|
<div><strong>中心点:</strong> {{ entity.centerPoint || '无' }}</div>
|
||||||
|
<div><strong>半径:</strong> {{ entity.radius === null ? '无' : entity.radius }}</div>
|
||||||
|
<div><strong>Points:</strong> {{ entity.points || '无' }}</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 图元预览 -->
|
||||||
|
<div class="preview-container">
|
||||||
|
<div class="preview-header">
|
||||||
|
<h4>图元预览 ({{ previewEntities.length }})</h4>
|
||||||
|
<div class="zoom-controls">
|
||||||
|
<el-button size="small" @click="zoomOut" icon="el-icon-minus" circle></el-button>
|
||||||
|
<span>{{ Math.round(zoomLevel * 100) }}%</span>
|
||||||
|
<el-button size="small" @click="zoomIn" icon="el-icon-plus" circle></el-button>
|
||||||
|
<el-button size="small" @click="fitToView">适应视图</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="preview-wrapper" ref="previewWrapper">
|
||||||
|
<svg
|
||||||
|
class="preview-svg"
|
||||||
|
:width="svgSize"
|
||||||
|
:height="svgSize"
|
||||||
|
@mousedown="startPan"
|
||||||
|
@mousemove="pan"
|
||||||
|
@mouseup="endPan"
|
||||||
|
@mouseleave="endPan"
|
||||||
|
@wheel="handleWheel"
|
||||||
|
>
|
||||||
|
<!-- 背景网格 -->
|
||||||
|
<pattern id="grid" width="50" height="50" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M 50 0 L 0 0 0 50" fill="none" stroke="#e0e0e0" stroke-width="0.5"/>
|
||||||
|
</pattern>
|
||||||
|
<rect width="100%" height="100%" fill="url(#grid)" />
|
||||||
|
|
||||||
|
<!-- 坐标轴 -->
|
||||||
|
<line x1="0" :y1="originY" x2="100%" :y2="originY" stroke="#999" stroke-width="1" stroke-dasharray="5,5" />
|
||||||
|
<line :x1="originX" y1="0" :x2="originX" y2="100%" stroke="#999" stroke-width="1" stroke-dasharray="5,5" />
|
||||||
|
|
||||||
|
<!-- 绘制图元 -->
|
||||||
|
<g :transform="`scale(${zoomLevel}) translate(${panX}, ${panY})`">
|
||||||
|
<!-- 圆 -->
|
||||||
|
<circle
|
||||||
|
v-for="(entity, index) in previewEntities"
|
||||||
|
v-if="entity.entityType === 'CIRCLE'"
|
||||||
|
:key="index"
|
||||||
|
:cx="entity.centerPoint.x"
|
||||||
|
:cy="entity.centerPoint.y"
|
||||||
|
:r="entity.radius"
|
||||||
|
:fill="entity.color || '#409EFF'"
|
||||||
|
:stroke="entity.color || '#409EFF'"
|
||||||
|
stroke-width="1"
|
||||||
|
fill="none"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 直线 -->
|
||||||
|
<line
|
||||||
|
v-for="(entity, index) in previewEntities"
|
||||||
|
v-if="entity.entityType === 'LINE'"
|
||||||
|
:key="index"
|
||||||
|
:x1="entity.startPoint.x"
|
||||||
|
:y1="entity.startPoint.y"
|
||||||
|
:x2="entity.endPoint.x"
|
||||||
|
:y2="entity.endPoint.y"
|
||||||
|
:stroke="entity.color || '#409EFF'"
|
||||||
|
:stroke-width="entity.lineweight || 1"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 多段线 -->
|
||||||
|
<polyline
|
||||||
|
v-for="(entity, index) in previewEntities"
|
||||||
|
v-if="entity.entityType === 'LWPOLYLINE' && entity.points"
|
||||||
|
:key="index"
|
||||||
|
:points="getPolylinePoints(entity)"
|
||||||
|
:stroke="entity.color || '#409EFF'"
|
||||||
|
:stroke-width="entity.lineweight || 1"
|
||||||
|
fill="none"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 点 -->
|
||||||
|
<circle
|
||||||
|
v-for="(entity, index) in previewEntities"
|
||||||
|
v-if="entity.entityType === 'POINT'"
|
||||||
|
:key="index"
|
||||||
|
:cx="entity.position.x"
|
||||||
|
:cy="entity.position.y"
|
||||||
|
r="2"
|
||||||
|
:fill="entity.color || '#409EFF'"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- 原点标记 -->
|
||||||
|
<circle :cx="originX" :cy="originY" r="3" fill="#f56c6c" />
|
||||||
|
<text :x="originX + 5" :y="originY - 5" fill="#f56c6c" font-size="12">(0,0)</text>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 坐标指示器 -->
|
||||||
|
<div class="coordinate-indicator">
|
||||||
|
<span>当前视图: X:{{ viewBox.x.toFixed(2) }}, Y:{{ viewBox.y.toFixed(2) }}</span>
|
||||||
|
<span>缩放: {{ Math.round(zoomLevel * 100) }}%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layer-footer">
|
||||||
|
<el-button @click="showLayerDialog = false">上一步</el-button>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
@click="submitForm"
|
||||||
|
:disabled="!selectedEntities.length"
|
||||||
|
>
|
||||||
|
提交 (已选择 {{ selectedEntities.length }} 个图元)
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -71,162 +220,463 @@ import { getToken } from '@/utils/auth'
|
||||||
import { addModel } from '@/api/basic/model'
|
import { addModel } from '@/api/basic/model'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'useOrReturnForm',
|
name: 'UseOrReturnForm',
|
||||||
data() {
|
props: {
|
||||||
return {
|
projectId: {
|
||||||
useOrReturnForm: {
|
type: String,
|
||||||
modelName: '',
|
default: ''
|
||||||
modelType: '',
|
|
||||||
version: '',
|
|
||||||
designer: '',
|
|
||||||
user: '', // 实际是备注字段（提交时映射为 remark）
|
|
||||||
files: [],
|
|
||||||
modelUrl: '', // ✅ 新增：保存上传的文件 URL
|
|
||||||
projectId: '' // ✅ 新增：保存所属项目 ID
|
|
||||||
},
|
|
||||||
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')
|
|
||||||
},
|
|
||||||
|
|
||||||
// ✅ 修复 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();
|
|
||||||
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) {
|
|
||||||
this.$message.info('文件预览功能可根据实际需求实现');
|
|
||||||
},
|
|
||||||
|
|
||||||
beforeRemove(file) {
|
|
||||||
return this.$confirm(`确定移除 ${file.name}？`);
|
|
||||||
},
|
|
||||||
|
|
||||||
handleExceed(files, fileList) {
|
|
||||||
this.$message.warning(
|
|
||||||
`最多上传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
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
useOrReturnForm: {
|
||||||
|
modelName: '',
|
||||||
|
modelType: '',
|
||||||
|
version: '',
|
||||||
|
designer: '',
|
||||||
|
user: '',
|
||||||
|
files: [],
|
||||||
|
modelUrl: '',
|
||||||
|
projectId: ''
|
||||||
|
},
|
||||||
|
useOrReturnFormRules: {
|
||||||
|
files: [{ required: true, message: '请上传模型文件', trigger: 'change' }]
|
||||||
|
},
|
||||||
|
fileList: [],
|
||||||
|
showLayerDialog: false,
|
||||||
|
layerList: [],
|
||||||
|
selectedLayerEntities: [],
|
||||||
|
selectedLayerIndex: 0,
|
||||||
|
selectedEntities: [],
|
||||||
|
cadData: [],
|
||||||
|
svgSize: 400,
|
||||||
|
zoomLevel: 1,
|
||||||
|
panning: false,
|
||||||
|
panStartX: 0,
|
||||||
|
panStartY: 0,
|
||||||
|
panX: 0,
|
||||||
|
panY: 0,
|
||||||
|
originX: 200,
|
||||||
|
originY: 200,
|
||||||
|
viewBox: { x: 0, y: 0 }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
uploadHeaders() {
|
||||||
|
return {
|
||||||
|
Authorization: 'Bearer ' + getToken()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
previewEntities() {
|
||||||
|
return this.getAllSelectedEntities();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.useOrReturnForm.projectId = this.projectId;
|
||||||
|
window.addEventListener('resize', this.adjustSVGSize);
|
||||||
|
this.adjustSVGSize();
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
window.removeEventListener('resize', this.adjustSVGSize);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
adjustSVGSize() {
|
||||||
|
if (this.$refs.previewWrapper) {
|
||||||
|
const width = this.$refs.previewWrapper.clientWidth;
|
||||||
|
this.svgSize = Math.min(600, Math.max(400, width - 40));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getAllSelectedEntities() {
|
||||||
|
const allEntities = [];
|
||||||
|
this.layerList.forEach(layer => {
|
||||||
|
layer.entities.forEach(entity => {
|
||||||
|
if (this.selectedEntities.includes(entity.id)) {
|
||||||
|
allEntities.push(entity);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return allEntities;
|
||||||
|
},
|
||||||
|
|
||||||
|
getPolylinePoints(entity) {
|
||||||
|
if (!entity.points || !Array.isArray(entity.points)) return '';
|
||||||
|
return entity.points.map(point => {
|
||||||
|
return `${point.x},${point.y}`;
|
||||||
|
}).join(' ');
|
||||||
|
},
|
||||||
|
|
||||||
|
zoomIn() {
|
||||||
|
this.zoomLevel = Math.min(5, this.zoomLevel + 0.1);
|
||||||
|
},
|
||||||
|
|
||||||
|
zoomOut() {
|
||||||
|
this.zoomLevel = Math.max(0.1, this.zoomLevel - 0.1);
|
||||||
|
},
|
||||||
|
|
||||||
|
handleWheel(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
const delta = Math.sign(event.deltaY);
|
||||||
|
if (delta > 0) {
|
||||||
|
this.zoomOut();
|
||||||
|
} else {
|
||||||
|
this.zoomIn();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
fitToView() {
|
||||||
|
this.zoomLevel = 1;
|
||||||
|
this.panX = 0;
|
||||||
|
this.panY = 0;
|
||||||
|
this.viewBox = { x: 0, y: 0 };
|
||||||
|
},
|
||||||
|
|
||||||
|
startPan(event) {
|
||||||
|
this.panning = true;
|
||||||
|
this.panStartX = event.clientX;
|
||||||
|
this.panStartY = event.clientY;
|
||||||
|
},
|
||||||
|
|
||||||
|
pan(event) {
|
||||||
|
if (!this.panning) return;
|
||||||
|
const dx = event.clientX - this.panStartX;
|
||||||
|
const dy = event.clientY - this.panStartY;
|
||||||
|
this.panX += dx / this.zoomLevel;
|
||||||
|
this.panY += dy / this.zoomLevel;
|
||||||
|
this.panStartX = event.clientX;
|
||||||
|
this.panStartY = event.clientY;
|
||||||
|
this.viewBox.x = -this.panX;
|
||||||
|
this.viewBox.y = -this.panY;
|
||||||
|
},
|
||||||
|
|
||||||
|
endPan() {
|
||||||
|
this.panning = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
cancel() {
|
||||||
|
this.$emit('closeUseOrReturnFormDialog')
|
||||||
|
},
|
||||||
|
|
||||||
|
goToNextStep() {
|
||||||
|
this.showLayerDialog = true
|
||||||
|
|
||||||
|
if (!this.cadData || !this.cadData.length) {
|
||||||
|
this.$message.error('无效的CAD数据，无法进入下一步')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const map = {}
|
||||||
|
this.cadData.forEach((entity) => {
|
||||||
|
if (!map[entity.layerName]) {
|
||||||
|
map[entity.layerName] = { layerName: entity.layerName, entities: [] }
|
||||||
|
}
|
||||||
|
if (!entity.id) {
|
||||||
|
entity.id = entity.layerName + '_' + Math.random().toString(36).substr(2, 9)
|
||||||
|
}
|
||||||
|
map[entity.layerName].entities.push(entity)
|
||||||
|
})
|
||||||
|
|
||||||
|
this.layerList = Object.values(map)
|
||||||
|
this.selectedLayerIndex = 0
|
||||||
|
this.selectedLayerEntities = this.layerList[0].entities || []
|
||||||
|
this.selectedEntities = []
|
||||||
|
},
|
||||||
|
|
||||||
|
handleLayerSelect(index) {
|
||||||
|
this.selectedLayerIndex = parseInt(index)
|
||||||
|
this.selectedLayerEntities = this.layerList[this.selectedLayerIndex].entities
|
||||||
|
},
|
||||||
|
|
||||||
|
selectEntity(entity) {
|
||||||
|
entity.selected = !entity.selected;
|
||||||
|
const idx = this.selectedEntities.indexOf(entity.id)
|
||||||
|
console.log(JSON.stringify(this.selectedEntities))
|
||||||
|
if (entity.selected) {
|
||||||
|
if (idx === -1) this.selectedEntities.push(entity.id)
|
||||||
|
} else {
|
||||||
|
if (idx !== -1) this.selectedEntities.splice(idx, 1)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async submitForm() {
|
||||||
|
this.$refs.useOrReturnFormRef.validate(async (valid) => {
|
||||||
|
if (!valid) return
|
||||||
|
const selectedEntities = [];
|
||||||
|
|
||||||
|
this.layerList.forEach(layer => {
|
||||||
|
layer.entities.forEach(entity => {
|
||||||
|
if (entity.selected) {
|
||||||
|
selectedEntities.push({
|
||||||
|
entityId: entity.entityId || entity.id || '',
|
||||||
|
entityType: entity.entityType || '',
|
||||||
|
color: entity.color || '',
|
||||||
|
lineweight: entity.lineweight || '',
|
||||||
|
thickness: entity.thickness || '',
|
||||||
|
startPoint: entity.startPoint || null,
|
||||||
|
endPoint: entity.endPoint || null,
|
||||||
|
centerPoint: entity.centerPoint || null,
|
||||||
|
radius: entity.radius != null ? entity.radius : null,
|
||||||
|
// points: entity.points || [],
|
||||||
|
geometry: entity.geometry || {}, // 你如果还有geometry字段也保留
|
||||||
|
layerName: layer.layerName || ''
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const formData = {
|
||||||
|
projectId: this.useOrReturnForm.projectId,
|
||||||
|
modelName: this.useOrReturnForm.modelName,
|
||||||
|
modelUrl: this.useOrReturnForm.modelUrl,
|
||||||
|
fileName: this.useOrReturnForm.fileName,
|
||||||
|
version: this.useOrReturnForm.version,
|
||||||
|
designer: this.useOrReturnForm.designer,
|
||||||
|
designerName: this.useOrReturnForm.designerName,
|
||||||
|
remark: this.useOrReturnForm.remark,
|
||||||
|
modelType: this.useOrReturnForm.modelType,
|
||||||
|
modelIds: this.useOrReturnForm.modelIds,
|
||||||
|
createBy: this.useOrReturnForm.createBy,
|
||||||
|
createTime: this.useOrReturnForm.createTime,
|
||||||
|
selectedEntities: selectedEntities
|
||||||
|
};
|
||||||
|
|
||||||
|
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()
|
||||||
|
this.fileList = []
|
||||||
|
this.useOrReturnForm.files = []
|
||||||
|
this.selectedEntities = []
|
||||||
|
this.showLayerDialog = false
|
||||||
|
this.fitToView()
|
||||||
|
},
|
||||||
|
|
||||||
|
handleSuccess(response, file, fileList) {
|
||||||
|
if (response.code === 200) {
|
||||||
|
this.cadData = response.cadData || []
|
||||||
|
const uploaded = response.data || {
|
||||||
|
name: file.name,
|
||||||
|
url: response.fileUrl || response.url,
|
||||||
|
uid: file.uid
|
||||||
|
}
|
||||||
|
this.fileList = fileList
|
||||||
|
this.useOrReturnForm.files = [uploaded]
|
||||||
|
this.useOrReturnForm.modelUrl = uploaded.url
|
||||||
|
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.modelUrl = ''
|
||||||
|
this.cadData = []
|
||||||
|
this.$refs.useOrReturnFormRef.validateField('files')
|
||||||
|
},
|
||||||
|
|
||||||
|
beforeUpload(file) {
|
||||||
|
const isDxf = file.name.toLowerCase().endsWith('.dxf')
|
||||||
|
if (!isDxf) this.$message.error('只能上传DXF格式的文件!')
|
||||||
|
return isDxf
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
<style lang="scss" scoped>
|
|
||||||
.upload-demo {
|
.upload-demo {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
.upload-demo-tip {
|
}
|
||||||
margin-left: 10px;
|
.upload-demo-tip {
|
||||||
color: #f56c6c;
|
margin-left: 10px;
|
||||||
}
|
color: #f56c6c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layer-container {
|
||||||
|
display: flex;
|
||||||
|
height: 650px;
|
||||||
|
border: 1px solid #e4e7ed;
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-panel {
|
||||||
|
width: 260px;
|
||||||
|
background: #f7f9fc;
|
||||||
|
border-right: 1px solid #dcdfe6;
|
||||||
|
padding: 20px 15px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-title {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 18px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #303133;
|
||||||
|
border-bottom: 2px solid #409EFF;
|
||||||
|
padding-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layer-menu {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layer-menu-item {
|
||||||
|
font-size: 15px;
|
||||||
|
padding: 8px 15px !important;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
color: #606266;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layer-menu-item:hover {
|
||||||
|
background-color: #e6f2ff;
|
||||||
|
color: #409EFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-menu-item.is-active {
|
||||||
|
background-color: #409EFF !important;
|
||||||
|
color: #fff !important;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entity-count {
|
||||||
|
color: #909399;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-panel {
|
||||||
|
flex: 1;
|
||||||
|
padding: 20px 25px;
|
||||||
|
background: #fff;
|
||||||
|
overflow-y: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entity-row {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
display: flex;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entity-card {
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 6px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
box-shadow: 0 2px 8px rgb(0 0 0 / 0.05);
|
||||||
|
width: 30%;
|
||||||
|
min-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entity-card:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.entity-card.active {
|
||||||
|
border: 2px solid #409EFF;
|
||||||
|
background-color: #f0f7ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entity-info {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #4a4a4a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entity-info div {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
line-height: 1.3;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-container {
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 15px;
|
||||||
|
background: #f8fafc;
|
||||||
|
border: 1px solid #e4e7ed;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zoom-controls {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zoom-controls span {
|
||||||
|
min-width: 50px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-wrapper {
|
||||||
|
height: 300px;
|
||||||
|
width: 100%;
|
||||||
|
background: white;
|
||||||
|
border: 1px solid #dcdfe6;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: #f9f9f9;
|
||||||
|
cursor: move;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coordinate-indicator {
|
||||||
|
margin-top: 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layer-footer {
|
||||||
|
text-align: right;
|
||||||
|
margin-top: 20px;
|
||||||
|
padding-top: 10px;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layer-footer button {
|
||||||
|
min-width: 100px;
|
||||||
|
margin-left: 15px;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -17,22 +17,14 @@
|
||||||
@keyup.enter.native="handleQuery"
|
@keyup.enter.native="handleQuery"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="所属单位" prop="unit">
|
<!-- <el-form-item label="负责人" prop="chargePerson">
|
||||||
<el-input
|
|
||||||
v-model="queryParams.unit"
|
|
||||||
placeholder="请输入所属单位"
|
|
||||||
clearable
|
|
||||||
@keyup.enter.native="handleQuery"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="负责人" prop="chargePerson">
|
|
||||||
<el-input
|
<el-input
|
||||||
v-model="queryParams.chargePerson"
|
v-model="queryParams.chargePerson"
|
||||||
placeholder="请输入负责人"
|
placeholder="请输入负责人"
|
||||||
clearable
|
clearable
|
||||||
@keyup.enter.native="handleQuery"
|
@keyup.enter.native="handleQuery"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item> -->
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||||
|
|
@ -68,11 +60,8 @@
|
||||||
<el-table v-loading="loading" :data="proList" @selection-change="handleSelectionChange" border>
|
<el-table v-loading="loading" :data="proList" @selection-change="handleSelectionChange" border>
|
||||||
<el-table-column label="序号" align="center" type="index" />
|
<el-table-column label="序号" align="center" type="index" />
|
||||||
<el-table-column label="项目名称" align="center" prop="proName" />
|
<el-table-column label="项目名称" align="center" prop="proName" />
|
||||||
<el-table-column label="项目类型" align="center" prop="proType" />
|
|
||||||
<el-table-column label="层级配置" align="center" prop="level" />
|
<el-table-column label="层级配置" align="center" prop="level" />
|
||||||
<el-table-column label="所属单位" align="center" prop="unit" />
|
|
||||||
<el-table-column label="负责人" align="center" prop="chargePerson" />
|
<el-table-column label="负责人" align="center" prop="chargePerson" />
|
||||||
<el-table-column label="项目所在地" align="center" prop="location" width="180" />
|
|
||||||
<el-table-column label="备注" align="center" prop="remark" width="180" />
|
<el-table-column label="备注" align="center" prop="remark" width="180" />
|
||||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
|
|
@ -110,9 +99,6 @@
|
||||||
<el-form-item label="项目名称" prop="proName">
|
<el-form-item label="项目名称" prop="proName">
|
||||||
<el-input v-model="form.proName" placeholder="请输入项目名称" />
|
<el-input v-model="form.proName" placeholder="请输入项目名称" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="项目类型" prop="proType">
|
|
||||||
<el-input v-model="form.proType" placeholder="请输入项目类型" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="层级配置" prop="level">
|
<el-form-item label="层级配置" prop="level">
|
||||||
<el-select v-model="form.level" placeholder="请选择层级配置" style="width: 100%">
|
<el-select v-model="form.level" placeholder="请选择层级配置" style="width: 100%">
|
||||||
<el-option
|
<el-option
|
||||||
|
|
@ -123,15 +109,6 @@
|
||||||
/>
|
/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="建设单位" prop="unit">
|
|
||||||
<el-input v-model="form.unit" placeholder="请输入建设单位" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="负责人" prop="chargePerson">
|
|
||||||
<el-input v-model="form.chargePerson" placeholder="请输入负责人" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="项目所在地" prop="location">
|
|
||||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="mapAdd">地图选点</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="备注" prop="remark">
|
<el-form-item label="备注" prop="remark">
|
||||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
|
<el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue