三维模型接口对接

src/api/threeMork.js

@@ -0,0 +1,37 @@
+import request from "@/utils/request";
+
+// 分页列表
+export function getDataList(param) {
+  return request({
+    url: "/api/v1/three-d-model/findPage",
+    method: "get",
+    params: param,
+  });
+}
+
+// 新增
+export function addModel(data) {
+  return request({
+    url: "/api/v1/three-d-model/insert",
+    method: "post",
+    data,
+  });
+}
+
+// 修改
+export function updateModel(data) {
+  return request({
+    url: "/api/v1/three-d-model/update",
+    method: "post",
+    data,
+  });
+}
+
+// 删除
+export function delModel(param) {
+  return request({
+    url: "/api/v1/three-d-model/delete",
+    method: "delete",
+    params: param,
+  });
+}

src/api/threeTypeMork.js

@@ -0,0 +1,37 @@
+import request from "@/utils/request";
+
+// 分页获取列表
+export function getDataList(param) {
+  return request({
+    url: "/api/v1/three-d-model/page",
+    method: "get",
+    params: param,
+  });
+}
+
+// 新增
+export function addModel(data) {
+  return request({
+    url: "/api/v1/three-d-model/add",
+    method: "post",
+    data,
+  });
+}
+
+// 删除
+export function delModel(param) {
+  return request({
+    url: "/api/v1/three-d-model/delete",
+    method: "delete",
+    params: param,
+  });
+}
+
+// 修改
+export function updateModel(data) {
+  return request({
+    url: "/api/v1/three-d-model/upDate",
+    method: "post",
+    data,
+  });
+}

src/views/dataManagement/threeModelManagement/index.vue

@@ -4,23 +4,23 @@
     <template #query-form>
       <el-form-item label="模型名称">
         <el-input
-          v-model="queryForm.keyword"
-          placeholder="输入模型名称/编号"
+          v-model="queryForm.modelName"
+          placeholder="输入模型名称"
           clearable
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
       <el-form-item label="模型类型">
         <el-select v-model="queryForm.modelType" placeholder="全部" clearable>
-          <el-option label="建筑" value="building" />
-          <el-option label="装备" value="equipment" />
-          <el-option label="载具" value="vehicle" />
+          <el-option label="建筑" value="building"/>
+          <el-option label="装备" value="equipment"/>
+          <el-option label="载具" value="vehicle"/>
         </el-select>
       </el-form-item>
       <el-form-item label="发布状态">
-        <el-select v-model="queryForm.publishStatus" placeholder="全部" clearable>
-          <el-option label="草稿" value="draft" />
-          <el-option label="已发布" value="published" />
+        <el-select v-model="queryForm.modelCategory" placeholder="全部" clearable>
+          <el-option label="草稿" value="draft"/>
+          <el-option label="已发布" value="published"/>
         </el-select>
       </el-form-item>
     </template>
@@ -29,10 +29,10 @@
     <template #header-actions>
       <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
       <el-button @click="resetQuery">重置</el-button>
-      <el-button type="primary" icon="el-icon-plus" @click="openAdd">上传模型</el-button>
-      <el-button type="danger" icon="el-icon-delete" :disabled="!selectedRows.length" @click="handleBatchDelete">
-        批量删除
-      </el-button>
+      <el-button type="primary" icon="el-icon-plus" @click="openAdd">新建</el-button>
+      <!--<el-button type="danger" icon="el-icon-delete" :disabled="!selectedRows.length" @click="handleBatchDelete">-->
+      <!--  批量删除-->
+      <!--</el-button>-->
     </template>
 
     <!-- 表格 -->
@@ -42,36 +42,35 @@
         :data="tableData"
         border
         stripe
-        height="100%"
         size="mini"
         highlight-current-row
         @selection-change="handleSelectionChange"
       >
-        <el-table-column type="selection" width="55" />
-        <el-table-column type="index" label="序号" width="60" />
-        <el-table-column prop="code" label="模型编号" width="120" align="center" />
-        <el-table-column prop="name" label="模型名称" min-width="180" show-overflow-tooltip />
-        <el-table-column prop="typeLabel" label="模型类型" width="100" align="center" />
+        <el-table-column type="selection" width="55"/>
+        <el-table-column type="index" label="序号" width="60"/>
+        <el-table-column prop="id" label="模型编号" width="120" align="center"/>
+        <el-table-column prop="modelName" label="模型名称" min-width="180" show-overflow-tooltip/>
+        <el-table-column prop="modelType" label="模型类型" width="100" align="center"/>
         <el-table-column label="发布状态" width="100" align="center">
           <template slot-scope="{row}">
-            <el-tag :type="row.publishStatus==='published' ? 'success' : 'info'" size="mini">
-              {{ publishMap[row.publishStatus] }}
+            <el-tag :type="row.status===1 ? 'success' : 'error'" size="mini">
+              {{ row.status===1 ? '启用' : '禁用' }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="version" label="版本" width="100" align="center" />
-        <el-table-column prop="secretLevel" label="密级" width="80" align="center" />
-        <el-table-column prop="sizeLabel" label="文件大小" width="100" align="center" />
-        <el-table-column prop="uploader" label="上传人" width="100" align="center" />
-        <el-table-column prop="createTime" label="创建时间" min-width="180" align="center" sortable />
+        <el-table-column prop="version" label="版本" width="100" align="center"/>
+        <el-table-column prop="secretLevel" label="密级" width="80" align="center"/>
+        <el-table-column prop="modelCategory" label="文件大小" width="100" align="center"/>
+        <el-table-column prop="uploader" label="上传人" width="100" align="center"/>
+        <el-table-column prop="createTime" label="创建时间" min-width="180" align="center" sortable/>
         <el-table-column label="操作" fixed="right" align="center" min-width="240">
           <template slot-scope="{ row }">
             <div class="action-bar">
               <el-link type="primary" :underline="false" @click="handleView(row)">预览</el-link>
               <el-link type="primary" :underline="false" @click="handleEdit(row)">编辑</el-link>
-              <el-link type="success" :underline="false" @click="togglePublish(row)">
-                {{ row.publishStatus==='published' ? '下线' : '发布' }}
-              </el-link>
+              <!--<el-link type="success" :underline="false" @click="togglePublish(row)">-->
+              <!--  {{ row.modelCategory === 'published' ? '下线' : '发布' }}-->
+              <!--</el-link>-->
               <el-link type="danger" :underline="false" @click="handleDelete(row)">删除</el-link>
             </div>
           </template>
@@ -101,7 +100,7 @@
 
     <!-- 预览弹窗 -->
     <el-dialog title="模型预览" :visible.sync="previewVisible" width="800px" class="model-dialog">
-      <el-image :src="currentRow.previewUrl || previewPlaceholder" fit="contain" style="width:100%;height:420px;" />
+      <el-image :src="currentRow.previewUrl || previewPlaceholder" fit="contain" style="width:100%;height:420px;"/>
       <div slot="footer" class="dialog-footer">
         <el-button @click="previewVisible=false">关闭</el-button>
       </div>
@@ -109,7 +108,7 @@
 
     <!-- 上传模型弹窗 -->
     <el-dialog
-      title="上传三维模型"
+      :title="addOrUpdateTitle"
       :visible.sync="addVisible"
       width="720px"
       :close-on-click-modal="false"
@@ -120,15 +119,15 @@
         <el-row :gutter="16">
           <el-col :span="12">
             <el-form-item label="模型名称" prop="modelName">
-              <el-input v-model.trim="addForm.modelName" maxlength="200" show-word-limit placeholder="如：建筑模型-101" />
+              <el-input v-model.trim="addForm.modelName" maxlength="200" show-word-limit placeholder="如：建筑模型-101"/>
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="模型类型" prop="modelType">
-              <el-select v-model="addForm.modelType" placeholder="请选择">
-                <el-option label="建筑" value="building" />
-                <el-option label="装备" value="equipment" />
-                <el-option label="载具" value="vehicle" />
+            <el-form-item label="模型类型" prop="modelTypeId">
+              <el-select v-model="addForm.modelTypeId" placeholder="请选择">
+                <el-option label="建筑" value="building"/>
+                <el-option label="装备" value="equipment"/>
+                <el-option label="载具" value="vehicle"/>
               </el-select>
             </el-form-item>
           </el-col>
@@ -136,45 +135,46 @@
           <el-col :span="12">
             <el-form-item label="模型分类" prop="modelCategory">
               <el-select v-model="addForm.modelCategory" placeholder="请选择">
-                <el-option label="ZB模型" value="ZB" />
-                <el-option label="场景模型" value="SCENE" />
-                <el-option label="环境模型" value="ENV" />
+                <el-option label="ZB模型" value="ZB"/>
+                <el-option label="场景模型" value="SCENE"/>
+                <el-option label="环境模型" value="ENV"/>
               </el-select>
             </el-form-item>
           </el-col>
 
-          <el-col :span="12">
-            <el-form-item label="模型格式" prop="modelFormat">
-              <el-select v-model="addForm.modelFormat" placeholder="自动识别或手选" filterable allow-create default-first-option>
-                <el-option label="glb" value="glb" />
-                <el-option label="gltf" value="gltf" />
-                <el-option label="fbx" value="fbx" />
-                <el-option label="obj" value="obj" />
-                <el-option label="dae" value="dae" />
-                <el-option label="stl" value="stl" />
-              </el-select>
-            </el-form-item>
-          </el-col>
+          <!--<el-col :span="12">-->
+          <!--  <el-form-item label="模型格式" prop="modelFormat">-->
+          <!--    <el-select v-model="addForm.modelFormat" placeholder="自动识别或手选" filterable allow-create-->
+          <!--               default-first-option>-->
+          <!--      <el-option label="glb" value="glb"/>-->
+          <!--      <el-option label="gltf" value="gltf"/>-->
+          <!--      <el-option label="fbx" value="fbx"/>-->
+          <!--      <el-option label="obj" value="obj"/>-->
+          <!--      <el-option label="dae" value="dae"/>-->
+          <!--      <el-option label="stl" value="stl"/>-->
+          <!--    </el-select>-->
+          <!--  </el-form-item>-->
+          <!--</el-col>-->
 
-          <el-col :span="24">
-            <el-form-item label="模型文件" prop="modelFilePath">
-              <el-upload
-                ref="uploader"
-                :auto-upload="false"
-                :limit="1"
-                :show-file-list="true"
-                :on-change="onFileChange"
-                :on-remove="onFileRemove"
-                :before-upload="() => false"
-              >
-                <el-button icon="el-icon-upload2" type="primary" size="small">选择文件</el-button>
-                <span style="margin-left:10px;color:#94a3b8">支持 glb/gltf/fbx/obj/dae/stl（演示态不实际上传）</span>
-              </el-upload>
-              <div v-if="addForm.modelSize" style="margin-top:6px;color:#9fb3c8">
-                文件大小：{{ formatSize(addForm.modelSize) }}，路径：{{ addForm.modelFilePath }}
-              </div>
-            </el-form-item>
-          </el-col>
+          <!--<el-col :span="24">-->
+          <!--  <el-form-item label="模型文件" prop="modelFilePath">-->
+          <!--    <el-upload-->
+          <!--      ref="uploader"-->
+          <!--      :auto-upload="false"-->
+          <!--      :limit="1"-->
+          <!--      :show-file-list="true"-->
+          <!--      :on-change="onFileChange"-->
+          <!--      :on-remove="onFileRemove"-->
+          <!--      :before-upload="() => false"-->
+          <!--    >-->
+          <!--      <el-button icon="el-icon-upload2" type="primary" size="small">选择文件</el-button>-->
+          <!--      <span style="margin-left:10px;color:#94a3b8">支持 glb/gltf/fbx/obj/dae/stl（演示态不实际上传）</span>-->
+          <!--    </el-upload>-->
+          <!--    <div v-if="addForm.modelSize" style="margin-top:6px;color:#9fb3c8">-->
+          <!--      文件大小：{{ formatSize(addForm.modelSize) }}，路径：{{ addForm.modelFilePath }}-->
+          <!--    </div>-->
+          <!--  </el-form-item>-->
+          <!--</el-col>-->
 
           <el-col :span="24">
             <el-form-item label="模型描述" prop="description">
@@ -189,21 +189,21 @@
             </el-form-item>
           </el-col>
 
-          <el-col :span="24">
-            <el-form-item label="模型标签" prop="tags">
-              <el-select
-                v-model="addForm.tags"
-                multiple
-                filterable
-                allow-create
-                default-first-option
-                placeholder="输入并回车可创建新标签"
-                style="width:100%"
-              >
-                <el-option v-for="t in tagOptions" :key="t" :label="t" :value="t" />
-              </el-select>
-            </el-form-item>
-          </el-col>
+          <!--<el-col :span="24">-->
+          <!--  <el-form-item label="模型标签" prop="tags">-->
+          <!--    <el-select-->
+          <!--      v-model="addForm.tags"-->
+          <!--      multiple-->
+          <!--      filterable-->
+          <!--      allow-create-->
+          <!--      default-first-option-->
+          <!--      placeholder="输入并回车可创建新标签"-->
+          <!--      style="width:100%"-->
+          <!--    >-->
+          <!--      <el-option v-for="t in tagOptions" :key="t" :label="t" :value="t"/>-->
+          <!--    </el-select>-->
+          <!--  </el-form-item>-->
+          <!--</el-col>-->
         </el-row>
       </el-form>
 
@@ -216,30 +216,32 @@
 </template>
 
 <script>
+import {getDataList, addModel, updateModel, delModel} from '@/api/threeMork.js'
+
 export default {
   name: 'ThreeModelManagement',
   data() {
     return {
       // 查询
-      queryForm: { keyword: '', modelType: '', publishStatus: '' },
+      queryForm: {modelName: '', modelType: '', modelCategory: ''},
 
       // 列表&分页
       tableData: [],
       allData: [],
       selectedRows: [],
-      pagination: { currentPage: 1, pageSize: 10, total: 0 },
+      pagination: {currentPage: 1, pageSize: 10, total: 0},
 
       // 预览
       previewVisible: false,
       currentRow: {},
-      publishMap: { draft: '草稿', published: '已发布' },
+      publishMap: {draft: '草稿', published: '已发布'},
       previewPlaceholder: 'https://dummyimage.com/800x420/0b254a/9db2c9&text=3D+Preview',
 
       // 新增弹窗
       addVisible: false,
       addForm: {
         modelName: '',
-        modelType: '',
+        modelTypeId: '',
         modelCategory: '',
         modelFilePath: '',
         modelSize: 0,
@@ -248,25 +250,25 @@ export default {
         tags: []
       },
       addRules: {
-        modelName: [{ required: true, message: '请输入模型名称', trigger: 'blur' }],
-        modelType: [{ required: true, message: '请选择模型类型', trigger: 'change' }],
-        modelCategory: [{ required: true, message: '请选择模型分类', trigger: 'change' }],
-        modelFilePath: [{ required: true, message: '请选择模型文件', trigger: 'change' }],
-        modelFormat: [{ required: true, message: '请选择或确认格式', trigger: 'change' }],
-        description: [{ min: 0, max: 500, message: '不超过500字', trigger: 'blur' }],
-        tags: [{ type: 'array', required: true, message: '至少添加1个标签', trigger: 'change' }]
+        modelName: [{required: true, message: '请输入模型名称', trigger: 'blur'}],
+        modelTypeId: [{required: true, message: '请选择模型类型', trigger: 'change'}],
+        modelCategory: [{required: true, message: '请选择模型分类', trigger: 'change'}],
+        modelFilePath: [{required: true, message: '请选择模型文件', trigger: 'change'}],
+        modelFormat: [{required: true, message: '请选择或确认格式', trigger: 'change'}],
+        description: [{min: 0, max: 500, message: '不超过500字', trigger: 'blur'}],
+        tags: [{type: 'array', required: true, message: '至少添加1个标签', trigger: 'change'}]
       },
       tagOptions: ['建筑', '场景', '环境', '机密', '标准件', '高精度'],
     }
   },
   created() {
-    this.initMock()
+    // this.initMock()
     this.handleQuery()
   },
   methods: {
     /* ====== 数据Mock ====== */
     initMock() {
-      const types = { building: '建筑', equipment: '装备', vehicle: '载具' }
+      const types = {building: '建筑', equipment: '装备', vehicle: '载具'}
       const states = ['draft', 'published']
       const list = []
       for (let i = 1; i <= 50; i++) {
@@ -277,7 +279,7 @@ export default {
           name: `${types[type]}模型-${i}`,
           type,
           typeLabel: types[type],
-          publishStatus: states[i % 2],
+          modelCategory: states[i % 2],
           version: `V2.${i % 5 + 1}.0`,
           secretLevel: ['秘密', '机密', '绝密'][i % 3],
           sizeLabel: `${(Math.random() * 150 + 20).toFixed(1)} MB`,
@@ -291,17 +293,31 @@ export default {
 
     /* ====== 查询&分页 ====== */
     handleQuery() {
-      let list = this.allData.slice()
-      const { keyword, modelType, publishStatus } = this.queryForm
-      if (keyword) list = list.filter(r => r.name.includes(keyword) || r.code.includes(keyword))
-      if (modelType) list = list.filter(r => r.type === modelType)
-      if (publishStatus) list = list.filter(r => r.publishStatus === publishStatus)
-      this.pagination.total = list.length
-      const start = (this.pagination.currentPage - 1) * this.pagination.pageSize
-      this.tableData = list.slice(start, start + this.pagination.pageSize)
+      let param = {
+        pageNo: this.pagination.currentPage,
+        pageSize: this.pagination.pageSize,
+        // ...this.queryForm
+      }
+      getDataList(param).then(res => {
+        if (res.code !== 0) {
+          return
+        }
+        this.tableData = res.data.rows || []
+        this.pagination.total = res.data.total
+        console.log(res)
+      }).catch(() => {
+      })
+      // let list = this.allData.slice()
+      // const { modelName, modelType, modelCategory } = this.queryForm
+      // if (modelName) list = list.filter(r => r.name.includes(modelName) || r.code.includes(modelName))
+      // if (modelType) list = list.filter(r => r.type === modelType)
+      // if (modelCategory) list = list.filter(r => r.modelCategory === modelCategory)
+      // this.pagination.total = list.length
+      // const start = (this.pagination.currentPage - 1) * this.pagination.pageSize
+      // this.tableData = list.slice(start, start + this.pagination.pageSize)
     },
     resetQuery() {
-      this.queryForm = { keyword: '', modelType: '', publishStatus: '' }
+      this.queryForm = {modelName: '', modelType: '', modelCategory: ''}
       this.pagination.currentPage = 1
       this.handleQuery()
     },
@@ -324,16 +340,24 @@ export default {
       this.previewVisible = true
     },
     handleEdit(row) {
-      this.$message.info(`编辑 ${row.name}`)
+      this.addForm = {...row}
+      this.addOrUpdateTitle = '编辑'
+      this.addVisible = true
     },
     togglePublish(row) {
-      row.publishStatus = row.publishStatus === 'published' ? 'draft' : 'published'
+      row.modelCategory = row.modelCategory === 'published' ? 'draft' : 'published'
       this.$message.success('状态已更新')
     },
     handleDelete(row) {
-      this.allData = this.allData.filter(r => r.code !== row.code)
-      this.$message.success('删除成功')
-      this.handleQuery()
+      // this.allData = this.allData.filter(r => r.code !== row.code)
+      delModel({id: row.id}).then(res => {
+        if (res.code !== 0) {
+          return
+        }
+        this.$message.success('删除成功')
+        this.handleQuery()
+      }).catch(() => {
+      })
     },
     handleBatchDelete() {
       const ids = new Set(this.selectedRows.map(r => r.code))
@@ -347,11 +371,11 @@ export default {
       this.$message.success('导出清单成功（占位）')
     },
 
-    /* ====== 新增弹窗 ====== */
+    /* ====== 新增或修改弹窗 ====== */
     openAdd() {
       this.addForm = {
         modelName: '',
-        modelType: this.queryForm.modelType || '',
+        modelTypeId: '',
         modelCategory: '',
         modelFilePath: '',
         modelSize: 0,
@@ -359,6 +383,7 @@ export default {
         description: '',
         tags: []
       }
+      this.addOrUpdateTitle = '新建'
       this.addVisible = true
       this.$nextTick(() => {
         this.$refs.addFormRef && this.$refs.addFormRef.clearValidate()
@@ -389,7 +414,7 @@ export default {
     },
     formatSize(bytes) {
       if (!bytes || bytes <= 0) return '0 B'
-      const units = ['B','KB','MB','GB','TB']
+      const units = ['B', 'KB', 'MB', 'GB', 'TB']
       const i = Math.floor(Math.log(bytes) / Math.log(1024))
       const val = bytes / Math.pow(1024, i)
       return `${val.toFixed(2)} ${units[i]}`
@@ -397,27 +422,42 @@ export default {
     handleAddSubmit() {
       this.$refs.addFormRef.validate(valid => {
         if (!valid) return
-        const typeMap = { building: '建筑', equipment: '装备', vehicle: '载具' }
-        const nextCode = this.genNextCode()
-        const record = {
-          code: nextCode,
-          name: this.addForm.modelName,
-          type: this.addForm.modelType,
-          typeLabel: typeMap[this.addForm.modelType] || this.addForm.modelType,
-          publishStatus: 'draft',
-          version: 'V1.0.0',
-          secretLevel: '秘密',
-          sizeLabel: this.addForm.modelSize ? this.formatSize(this.addForm.modelSize) : '--',
-          uploader: '系统',
-          createTime: this.nowStr(),
-          previewUrl: '',
-          _raw: { ...this.addForm } // 保留原始字段，便于后端打通
-        }
-        this.allData.unshift(record)
-        this.$message.success('上传成功（已加入草稿）')
-        this.pagination.currentPage = 1
-        this.addVisible = false
-        this.handleQuery()
+        (this.addOrUpdateTitle === '编辑' ? updateModel : addModel)(this.addForm).then(res => {
+          if (res.code !== 0) {
+            return
+          }
+          this.$message({
+            message: '操作成功',
+            type: 'info',
+            duration: 500,
+            onClose: () => {
+              this.pagination.currentPage = 1
+              this.addVisible = false
+              this.handleQuery()
+            }
+          })
+        })
+        // const typeMap = {building: '建筑', equipment: '装备', vehicle: '载具'}
+        // const nextCode = this.genNextCode()
+        // const record = {
+        //   code: nextCode,
+        //   name: this.addForm.modelName,
+        //   type: this.addForm.modelType,
+        //   typeLabel: typeMap[this.addForm.modelType] || this.addForm.modelType,
+        //   modelCategory: 'draft',
+        //   version: 'V1.0.0',
+        //   secretLevel: '秘密',
+        //   sizeLabel: this.addForm.modelSize ? this.formatSize(this.addForm.modelSize) : '--',
+        //   uploader: '系统',
+        //   createTime: this.nowStr(),
+        //   previewUrl: '',
+        //   _raw: {...this.addForm} // 保留原始字段，便于后端打通
+        // }
+        // this.allData.unshift(record)
+        // this.$message.success('上传成功（已加入草稿）')
+        // this.pagination.currentPage = 1
+        // this.addVisible = false
+        // this.handleQuery()
       })
     },
     genNextCode() {
@@ -430,7 +470,7 @@ export default {
     nowStr() {
       const d = new Date()
       const pad = n => String(n).padStart(2, '0')
-      return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
+      return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
     },
   },
 }
@@ -443,34 +483,42 @@ export default {
 .three-model-container .el-table__fixed-right {
   background: rgba(15, 31, 56, 0.86) !important;
 }
+
 .three-model-container .el-table__body-wrapper,
 .three-model-container .el-table__fixed-body-wrapper {
   background: rgba(15, 31, 56, 0.86) !important;
 }
+
 .three-model-container .el-table td,
 .three-model-container .el-table th.is-leaf {
   background: rgba(15, 31, 56, 0.86) !important;
   border-color: rgba(255, 255, 255, 0.08) !important;
   color: #e6efff;
 }
+
 .three-model-container .el-table th {
   background: rgba(30, 55, 95, 0.85) !important;
   color: #cfd9e6 !important;
 }
+
 .three-model-container .el-table--striped .el-table__body tr.el-table__row--striped td {
   background: rgba(15, 31, 56, 0.9) !important;
 }
+
 .three-model-container .el-table__body tr:hover > td {
   background: rgba(30, 64, 175, 0.25) !important;
 }
+
 .three-model-container .el-table__current-row > td {
   background: rgba(64, 150, 255, 0.2) !important;
 }
+
 .three-model-container .el-table__fixed::before,
 .three-model-container .el-table__fixed-right::before,
 .three-model-container .el-table::before {
   background-color: rgba(255, 255, 255, 0.08) !important;
 }
+
 .three-model-container .el-table__gutter,
 .three-model-container .el-table__fixed-right .el-table__fixed-header-wrapper,
 .three-model-container .el-table__fixed-right .el-table__fixed-body-wrapper,
@@ -484,27 +532,33 @@ export default {
   display: flex;
   justify-content: flex-end;
 }
+
 .action-bar {
   display: flex;
   justify-content: space-around;
   width: 100%;
 }
+
 .model-dialog .el-dialog {
   background: #0b254a;
   border: 1px solid #364a64;
 }
+
 .model-dialog .el-dialog__title {
   color: #e6efff;
 }
+
 .model-dialog .el-dialog__header,
 .model-dialog .el-dialog__footer {
   border-color: #364a64;
 }
+
 .model-dialog .el-upload-list__item {
-  background: rgba(255,255,255,0.04);
+  background: rgba(255, 255, 255, 0.04);
   border-color: #364a64;
   color: #e6efff;
 }
+
 .footer-tips {
   color: #94a3b8;
   margin-left: 10px;

src/views/dataManagement/threeModelTypeManagement/index.vue

@@ -65,14 +65,14 @@
         <el-table-column type="index" label="序号" width="60" />
         <el-table-column prop="id" label="编号" width="100" sortable align="center" />
         <el-table-column
-          prop="name"
+          prop="typeName"
           label="三维模型类型名称"
           min-width="200"
           align="center"
           show-overflow-tooltip
         />
         <el-table-column
-          prop="code"
+          prop="typeCode"
           label="三维模型类型码"
           min-width="160"
           align="center"
@@ -136,7 +136,7 @@
 
     <!-- 新建弹窗 -->
     <el-dialog
-      title="新建三维模型类型"
+      :title="addOrUpdateTitle"
       :visible.sync="addVisible"
       width="520px"
       :close-on-click-modal="false"
@@ -144,28 +144,44 @@
       @closed="onAddClosed"
     >
       <el-form ref="addFormRef" :model="addForm" :rules="addRules" label-width="110px" size="small">
-        <el-form-item label="类型名称" prop="name">
-          <el-input v-model.trim="addForm.name" maxlength="100" show-word-limit placeholder="请输入类型名称" />
+        <el-form-item label="类型名称" prop="typeName">
+          <el-input v-model.trim="addForm.typeName" maxlength="100" show-word-limit placeholder="请输入类型名称" />
         </el-form-item>
-        <el-form-item label="类型码" prop="code">
-          <el-select v-model="addForm.code" placeholder="请选择类型码" style="width: 220px">
+        <el-form-item label="类型码" prop="typeCode">
+          <el-select v-model="addForm.typeCode" placeholder="请选择类型码" style="width: 220px">
             <el-option label="ADMIN" value="ADMIN" />
             <el-option label="EQUIP" value="EQUIP" />
             <el-option label="ASSET" value="ASSET" />
           </el-select>
         </el-form-item>
-        <el-form-item label="创建人" prop="creator">
-          <el-input v-model.trim="addForm.creator" placeholder="例如：ADMIN/张三" />
+        <el-form-item label="类型分类" prop="typeCategory">
+          <el-select v-model="addForm.typeCategory" placeholder="请选择类型分类" style="width: 220px">
+            <el-option label="分类一" value="ADMIN" />
+            <el-option label="分类二" value="EQUIP" />
+            <el-option label="分类三" value="ASSET" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="类型描述" prop="typeCategory">
+          <el-input type="textarea" v-model="addForm.description" placeholder="请输入类型描述" />
         </el-form-item>
-        <el-form-item label="创建时间" prop="createTime">
-          <el-date-picker
-            v-model="addForm.createTime"
-            type="datetime"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            placeholder="选择时间"
-            style="width: 220px"
-          />
+        <el-form-item label="状态" prop="status">
+          <el-select v-model="addForm.status" placeholder="请选择状态" style="width: 220px">
+            <el-option label="禁用" value="0" />
+            <el-option label="启用" value="1" />
+          </el-select>
         </el-form-item>
+        <!--<el-form-item label="创建人" prop="creator">-->
+        <!--  <el-input v-model.trim="addForm.creator" placeholder="例如：ADMIN/张三" />-->
+        <!--</el-form-item>-->
+        <!--<el-form-item label="创建时间" prop="createTime">-->
+        <!--  <el-date-picker-->
+        <!--    v-model="addForm.createTime"-->
+        <!--    type="datetime"-->
+        <!--    value-format="yyyy-MM-dd HH:mm:ss"-->
+        <!--    placeholder="选择时间"-->
+        <!--    style="width: 220px"-->
+        <!--  />-->
+        <!--</el-form-item>-->
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="addVisible=false">取 消</el-button>
@@ -176,6 +192,7 @@
 </template>
 
 <script>
+import {getDataList, addModel, delModel, updateModel} from '@/api/threeTypeMork'
 export default {
   name: 'ModelTypeManagement',
   data () {
@@ -193,11 +210,13 @@ export default {
 
       // 分页
       pagination: {
-        currentPage: 51, // 跟原型一致
+        currentPage: 1, // 跟原型一致
         pageSize: 10,
         total: 0
       },
 
+      addOrUpdateTitle: '',
+
       // 详情
       detailVisible: false,
       currentRow: {},
@@ -205,24 +224,27 @@ export default {
       // 新建
       addVisible: false,
       addForm: {
-        name: '',
-        code: '',
-        creator: 'ADMIN',
-        createTime: ''
+        typeName: '',
+        typeCode: '',
+        typeCategory: '',
+        description: '',
+        status: '',
+        // creator: 'ADMIN',
+        // createTime: ''
       },
       addRules: {
-        name: [
+        typeName: [
           { required: true, message: '请输入类型名称', trigger: 'blur' },
           { min: 1, max: 100, message: '长度在 1~100 个字符', trigger: 'blur' }
         ],
-        code: [{ required: true, message: '请选择类型码', trigger: 'change' }],
+        typeCode: [{ required: true, message: '请选择类型码', trigger: 'change' }],
         creator: [{ required: true, message: '请输入创建人', trigger: 'blur' }],
         createTime: [{ required: true, message: '请选择创建时间', trigger: 'change' }]
       }
     }
   },
   created () {
-    this.initMock()
+    // this.initMock()
     this.handleQuery()
   },
   methods: {
@@ -251,30 +273,40 @@ export default {
 
     /* ------------ 查询&分页 ------------- */
     handleQuery () {
-      // 过滤
-      let list = this.allData.slice()
-
-      if (this.queryForm.name) {
-        const kw = this.queryForm.name.trim()
-        list = list.filter(r => r.name.includes(kw))
-      }
-      if (this.queryForm.code) {
-        list = list.filter(r => r.code === this.queryForm.code)
+      let param = {
+        pageNo: this.pagination.currentPage,
+        pageSize: this.pagination.pageSize
       }
-      if (this.queryForm.dateRange && this.queryForm.dateRange.length === 2) {
-        const [start, end] = this.queryForm.dateRange
-        const s = new Date(start).getTime()
-        const e = new Date(end).getTime()
-        list = list.filter(r => {
-          const t = new Date(r.createTime).getTime()
-          return t >= s && t <= e
-        })
-      }
-
-      this.pagination.total = list.length
-      // 分页
-      const startIdx = (this.pagination.currentPage - 1) * this.pagination.pageSize
-      this.tableData = list.slice(startIdx, startIdx + this.pagination.pageSize)
+      getDataList(param).then(res => {
+        if (res.code !== 0) {
+          return
+        }
+        this.pagination.total = res.data.total
+        this.tableData = res.data.rows || []
+      })
+      // 过滤
+      // let list = this.allData.slice()
+      //
+      // if (this.queryForm.name) {
+      //   const kw = this.queryForm.name.trim()
+      //   list = list.filter(r => r.name.includes(kw))
+      // }
+      // if (this.queryForm.code) {
+      //   list = list.filter(r => r.code === this.queryForm.code)
+      // }
+      // if (this.queryForm.dateRange && this.queryForm.dateRange.length === 2) {
+      //   const [start, end] = this.queryForm.dateRange
+      //   const s = new Date(start).getTime()
+      //   const e = new Date(end).getTime()
+      //   list = list.filter(r => {
+      //     const t = new Date(r.createTime).getTime()
+      //     return t >= s && t <= e
+      //   })
+      // }
+      // this.pagination.total = list.length
+      // // 分页
+      // const startIdx = (this.pagination.currentPage - 1) * this.pagination.pageSize
+      // this.tableData = list.slice(startIdx, startIdx + this.pagination.pageSize)
     },
     resetQuery () {
       this.queryForm = { name: '', code: '', dateRange: [] }
@@ -300,17 +332,33 @@ export default {
       this.detailVisible = true
     },
     handleEdit (row) {
-      this.$message.info(`编辑：#${row.id} ${row.name}（占位）`)
+      // this.$message.info(`编辑：#${row.id} ${row.name}（占位）`)
+      this.addForm = {...row}
+      this.addOrUpdateTitle = '编辑'
     },
     handleDelete (row) {
       this.$confirm(`确认删除「${row.name}」吗？`, '提示', { type: 'warning' })
         .then(() => {
-          this.allData = this.allData.filter(r => r.id !== row.id)
-          this.$message.success('删除成功')
-          // 若删空当前页，回退一页
-          if ((this.pagination.currentPage - 1) * this.pagination.pageSize >= this.allData.length) {
-            this.pagination.currentPage = Math.max(1, Math.ceil(this.allData.length / this.pagination.pageSize))
-          }
+          delModel({id: row.id}).then(res => {
+            if (res.code !== 0) {
+              return
+            }
+            this.$message({
+              message: '删除成功',
+              type: 'success',
+              duration: 500,
+              onClose: () => {
+                this.pagination.currentPage = 1
+                this.handleQuery()
+              }
+            })
+          })
+          // this.allData = this.allData.filter(r => r.id !== row.id)
+          // this.$message.success('删除成功')
+          // // 若删空当前页，回退一页
+          // if ((this.pagination.currentPage - 1) * this.pagination.pageSize >= this.allData.length) {
+          //   this.pagination.currentPage = Math.max(1, Math.ceil(this.allData.length / this.pagination.pageSize))
+          // }
           this.handleQuery()
         })
         .catch(() => {})
@@ -336,29 +384,48 @@ export default {
     openAdd () {
       // 预填创建时间为此刻
       this.addForm = {
-        name: '',
-        code: '',
-        creator: 'ADMIN',
-        createTime: this.nowStr()
+        typeName: '',
+        typeCode: '',
+        typeCategory: '',
+        description: '',
+        status: '',
+        // creator: 'ADMIN',
+        // createTime: ''
       }
+      this.addOrUpdateTitle = '新建'
       this.addVisible = true
       this.$nextTick(() => this.$refs.addFormRef && this.$refs.addFormRef.clearValidate())
     },
     handleAddSubmit () {
       this.$refs.addFormRef.validate(valid => {
         if (!valid) return
+        (this.addOrUpdateTitle === '编辑' ? updateModel : addModel)(this.addForm).then(res => {
+          if (res.code !== 0) {
+            return
+          }
+          this.$message({
+            message: '操作成功',
+            type: 'info',
+            duration: 500,
+            onClose: () => {
+              this.pagination.currentPage = 1
+              this.addVisible = false
+              this.handleQuery()
+            }
+          })
+        })
         // 生成自增 id（mock 环境）
-        const maxId = this.allData.length ? Math.max.apply(null, this.allData.map(r => r.id)) : 0
-        const record = {
-          id: maxId + 1,
-          name: this.addForm.name.trim(),
-          code: this.addForm.code,
-          creator: this.addForm.creator.trim() || 'ADMIN',
-          createTime: this.addForm.createTime
-        }
-        // 插入到数据源（放到最前面更直观）
-        this.allData.unshift(record)
-        this.$message.success('新增成功')
+        // const maxId = this.allData.length ? Math.max.apply(null, this.allData.map(r => r.id)) : 0
+        // const record = {
+        //   id: maxId + 1,
+        //   name: this.addForm.name.trim(),
+        //   code: this.addForm.code,
+        //   creator: this.addForm.creator.trim() || 'ADMIN',
+        //   createTime: this.addForm.createTime
+        // }
+        // // 插入到数据源（放到最前面更直观）
+        // this.allData.unshift(record)
+        // this.$message.success('新增成功')
         // 回到第 1 页（或保留当前页也行，看产品习惯）
         this.pagination.currentPage = 1
         this.addVisible = false