fix: 素材库借口联调

src/views/Creative/Material.vue

@@ -27,7 +27,7 @@
             </div>
             <div class="page-item-title">
               <div class="pit-row" style="color: #262626;">
-                超市
+                {{row.title}}
                 <div class="pit-tag" style="color: #0CC126; ">
                   三维环境
                 </div>
@@ -48,7 +48,7 @@
                           <a href="javascript:;" @click="renameMeterialRef.show(row)">重命名</a>
                         </a-menu-item>
                         <a-menu-item>
-                          <a href="javascript:;" style="color: red;" @click="del">删除</a>
+                          <a href="javascript:;" style="color: red;" @click="del(row)">删除</a>
                         </a-menu-item>
                       </a-menu>
                     </template>
@@ -60,7 +60,7 @@
         </div>
       </div>
       <Previewer ref="previewerRef" />
-      <RenameMeterial ref="renameMeterialRef" />
+      <RenameMeterial ref="renameMeterialRef" @complete="query" />
       <CreateMaterial ref="createMaterialRef" />
     </div>
   </a-spin>
@@ -75,7 +75,7 @@ import Previewer from "./components/Previewer.vue";
 import RenameMeterial from "./components/RenameMeterial.vue";
 import CreateMaterial from "./components/CreateMaterial.vue";
 import { THREE_D_TYPE, THREE_D_TYPE_S } from "./components/CreateMaterial.constant";
-import { getMaterialLibrary } from "./api";
+import { getMaterialLibrary, delMaterialLibrary } from "./api";
 
 const previewerRef = ref();
 const renameMeterialRef = ref();
@@ -89,9 +89,6 @@ const rows = ref([]);
 
 const loading = ref(true);
 
-const search = () => {
-  alert();
-}
 
 const query = async () => {
   loading.value = true;
@@ -104,11 +101,14 @@ const query = async () => {
   rows.value = res.data;
 }
 
-const del = () => {
+const del = (row) => {
   Modal.confirm({
     title: "确认删除",
     content: "删除素材后将不能找回，是否确认删除？",
-    onOk () { },
+    async onOk () { 
+      await delMaterialLibrary(row.id);
+      await query();
+    },
     onCancel () { },
   });
 }

src/views/Creative/MyCreation.vue

@@ -56,7 +56,7 @@
                           <a href="javascript:;" @click="renameCreationRef.show(row)">重命名</a>
                         </a-menu-item>
                         <a-menu-item>
-                          <a href="javascript:;" style="color: red;" @click="del">删除</a>
+                          <a href="javascript:;" style="color: red;" @click="del(row)">删除</a>
                         </a-menu-item>
                       </a-menu>
                     </template>
@@ -117,7 +117,7 @@ import { computed, onMounted, ref, watch } from "@vue/runtime-core";
 import { Modal } from "ant-design-vue";
 import RenameCreation from "./components/RenameCreation.vue";
 import { currentMock } from "./creation.mock";
-import { getMaterials } from "./api";
+import { getMaterials, delMaterialCenter } from "./api";
 import { useRouter } from "vue-router";
 
 const router = useRouter();
@@ -132,15 +132,6 @@ const loading = ref(true);
 
 const title = ref("");
 
-const del = () => {
-  Modal.confirm({
-    title: "确认删除",
-    content: "删除作品后将不能找回，是否确认删除？",
-    onOk () { },
-    onCancel () { },
-  });
-}
-
 const query = async () => {
   loading.value = true;
   const res = await getMaterials({
@@ -160,6 +151,18 @@ const edit = (row) => {
   })
 }
 
+const del = (row) => {
+  Modal.confirm({
+    title: "确认删除",
+    content: "删除作品后将不能找回，是否确认删除？",
+    async onOk () { 
+      await delMaterialCenter(row.id);
+      await query();
+    },
+    onCancel () { },
+  });
+}
+
 watch(
   () => current.value,
   async () => {

src/views/Creative/api.js

@@ -26,6 +26,13 @@ export function setMaterialCenterTitle(id, data) {
   })
 }
 
+/* 3D场景删除 */
+export function delMaterialCenter(id) {
+  return request({
+    url: `/console/material_center/${id}`,
+    method: 'DELETE'
+  })
+}
 
 /* 素材库列表 */
 export function getMaterialLibrary(params) {
@@ -35,3 +42,29 @@ export function getMaterialLibrary(params) {
   })
 }
 
+/* 素材库新增 */
+export function createMaterialLibrary(data) {
+  return request({
+    url: `/console/material_library`,
+    method: 'POST',
+    data
+  })
+}
+
+/* 素材库重命名 */
+export function setMaterialLibraryTitle(id, data) {
+  return request({
+    url: `/console/material_library/${id}/title`,
+    method: 'PATCH',
+    data
+  })
+}
+
+/* 素材库删除 */
+export function delMaterialLibrary(id) {
+  return request({
+    url: `/console/material_library/${id}`,
+    method: 'DELETE'
+  })
+}
+

src/views/Creative/components/CreateMaterial.constant.js

@@ -6,12 +6,23 @@ export const THREE_D_TYPE = {
   EXHIBITION_BOOTH: 4,
   WARE: 5,
   RING_3D: 6,
+  EMPTY_3D: 7,
+  CHARTLET: 8,
 }
 
 export const THREE_D_TYPE_S = [
   {
     type: THREE_D_TYPE.PANORAMA,
-    name: "3D全景"
+    name: "3D全景",
+    data: {
+			"url": "",
+			"urlSmall": "",
+			"urlThumb": "",
+			"urlDepth": "",
+			"urlShelfExr": "",
+			"rotationY": 0,
+			"multiply": 3
+    }
   },
   {
     type: THREE_D_TYPE.ENV_3D,
@@ -33,4 +44,12 @@ export const THREE_D_TYPE_S = [
     type: THREE_D_TYPE.RING_3D,
     name: "3D环物"
   },
+  {
+    type: THREE_D_TYPE.EMPTY_3D,
+    name: "空白模型"
+  },
+  {
+    type: THREE_D_TYPE.CHARTLET,
+    name: "贴图"
+  },
 ];

src/views/Creative/components/CreateMaterial.vue

@@ -6,11 +6,11 @@
     </a-steps>
     <a-form v-if="step==0" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }" style="margin: 40px 0;">
       <a-form-item label="素材名称">
-        <a-input v-model:value="formData.name" placeholder="请输入素材名称" />
+        <a-input v-model:value="formData.title" placeholder="请输入素材名称" />
       </a-form-item>
     </a-form>
     <a-form v-if="step==1" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" style="margin: 20px 0;">
-      <a-form-item v-if="[THREE_D_TYPE.PANORAMA].includes(current.type)" label="上传图片" style="padding-right: 10%;">
+      <a-form-item v-if="[THREE_D_TYPE.PANORAMA].includes(formData.type)" label="上传图片" style="padding-right: 10%;">
         <a-upload :customRequest="onCustomRequest" v-model:file-list="formData.fileList">
           <a-button>
             <upload-outlined></upload-outlined>
@@ -21,7 +21,7 @@
           全景图文件格式、大小：JPEG格式，全景图比例2：1，建议单张分辨率大小在2K及以上，单张全景图最大支持上传120M，建议上传小于10M的全景图效果更佳。
         </p>
       </a-form-item>
-      <a-form-item v-if="[THREE_D_TYPE.ENV_3D, THREE_D_TYPE.SHELF, THREE_D_TYPE.EXHIBITION_BOOTH, THREE_D_TYPE.WARE].includes(current.type)" label="" style="margin-left: 20%;">
+      <a-form-item v-if="[THREE_D_TYPE.ENV_3D, THREE_D_TYPE.SHELF, THREE_D_TYPE.EXHIBITION_BOOTH, THREE_D_TYPE.WARE].includes(formData.type)" label="" style="margin-left: 20%;">
         <a-upload-dragger
           v-model:fileList="formData.fileList"
           name="file"
@@ -37,7 +37,7 @@
         </a-upload-dragger>
       </a-form-item>
       
-      <a-form-item v-if="[THREE_D_TYPE.RING_3D].includes(current.type)" label="上传图片" style="padding-right: 10%;">
+      <a-form-item v-if="[THREE_D_TYPE.RING_3D].includes(formData.type)" label="上传图片" style="padding-right: 10%;">
         <a-upload :customRequest="onCustomRequest" multiple v-model:file-list="formData.fileList" :showUploadList="false">
           <a-button>
             <upload-outlined></upload-outlined>
@@ -63,22 +63,18 @@ import { UploadOutlined, InboxOutlined, MinusCircleFilled } from '@ant-design/ic
 import { THREE_D_TYPE_S, THREE_D_TYPE } from "./CreateMaterial.constant"
 const { ref, reactive }=require("@vue/reactivity");
 import common from "@/api/common.js";
+import { createMaterialLibrary } from "../api";
 
 const title = ref("")
 const visible = ref(false);
 
 const step = ref(0);
 
-const current = ref(null);
 
-const formData = reactive({
+const formData = ref({
-  name: '',
+  type: 0,
+  title: '',
   fileList: [],
-
-  init(){
-    this.name = '';
-    this.fileList = [];
-  },
 });
 
 const show = (type) => {
@@ -86,22 +82,25 @@ const show = (type) => {
   const obj = THREE_D_TYPE_S.find(x => x.type == type);
   if(!obj) return;
 
-  formData.init();
-  current.value = obj;
-  step.value = 0;
   title.value = obj.name;
+
+  var target = JSON.parse(JSON.stringify(obj));
+  target.title = "";
+  target.fileList = [];
+  formData.value = target;
+  step.value = 0;
   visible.value = true;
 }
 
 const onCustomRequest = async (upload) => {
   const data = await common.cosUpload3D(upload.file);
-  console.log(data)
   upload.onSuccess(data);
 }
 
 const ok = async () => {
   step.value++;
   if(step.value >= 2) {
+    await createMaterialLibrary(formData.value);
     visible.value = false;
   }
 }

src/views/Creative/components/RenameMeterial.vue

@@ -8,13 +8,13 @@
   >
     <a-form
       ref="formRef"
-      :model="form"
+      :model="rowData"
       :rules="rules"
       :label-col="labelCol"
       :wrapper-col="wrapperCol"
     >
       <a-form-item label="素材名称" name="name">
-        <a-input v-model:value="form.name" />
+        <a-input v-model:value="rowData.title" />
       </a-form-item>
     </a-form>
   </a-modal>
@@ -22,6 +22,9 @@
 
 <script setup>
 const { ref } = require("@vue/reactivity");
+import { setMaterialLibraryTitle } from "../api";
+
+const emit = defineEmits(["complete"]);
 
 let visible = ref(false);
 
@@ -30,20 +33,26 @@ const labelCol = { span: 6 };
 const wrapperCol = { span: 14 };
 
 const rules = {
-  name: {
+  title: {
     required: true,
   },
 };
 
 const formRef = ref();
 
-let form = ref({
+const rowData = ref({
-  name: ""
+  title: ""
 });
 
+const handleOk = async () => {
+  await setMaterialLibraryTitle(rowData.value.id, rowData.value);
+  visible.value = false;
+  emit("complete")
+}
 
 defineExpose({
-  show(){
+  show(row){
+    rowData.value = JSON.parse(JSON.stringify(row));
     visible.value = true;
   }
 })