hz/ylst-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 素材库借口联调

Browse Source
This commit is contained in:
wanganmao
2022-12-16 15:33:23 +08:00
parent 8bbccf0ecd
commit 7566a5cc18
6 changed files with 106 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/Creative/Material.vue
View File

@@ -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 () { },
});
}

25
src/views/Creative/MyCreation.vue
View File

@@ -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 () => {

33
src/views/Creative/api.js
View File

@@ -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'
})
}

21
src/views/Creative/components/CreateMaterial.constant.js
View File

@@ -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: "贴图"
},
];

31
src/views/Creative/components/CreateMaterial.vue
View File

@@ -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({
name: '',
const formData = ref({
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;
}
}

21
src/views/Creative/components/RenameMeterial.vue
View File

@@ -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({
name: ""
const rowData = ref({
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;
}
})