detail更新

This commit is contained in:
X1627315083
2025-02-25 15:32:55 +08:00
parent 3b230ae222
commit 6cfcd4ce16
28 changed files with 1701 additions and 1056 deletions

View File

@@ -87,11 +87,13 @@ export default defineComponent({
}
})
watch(()=>colorData.selectDetail.id,(newVal,oldVal)=>{
if(!newVal)return
if(!colorData.colorList?.list?.[newVal]){
colorData.colorList.list[newVal] = []
}else{
return
}
let isNoSelect = false
let isOneChecked = false
for (let index = 0; index < 9; index++) {
@@ -100,9 +102,9 @@ export default defineComponent({
item = colorData.allBoardData.colorBoards[index]
if(
colorData.allBoardData.colorBoards?.[index] &&
colorData.selectDetail.color.rgba.r == colorData.allBoardData.colorBoards?.[index]?.rgba?.[0] &&
colorData.selectDetail.color.rgba.g == colorData.allBoardData.colorBoards?.[index]?.rgba?.[1] &&
colorData.selectDetail.color.rgba.b == colorData.allBoardData.colorBoards?.[index]?.rgba?.[2] &&
colorData.selectDetail.color.rgba?.r == colorData.allBoardData.colorBoards?.[index]?.rgba?.[0] &&
colorData.selectDetail.color.rgba?.g == colorData.allBoardData.colorBoards?.[index]?.rgba?.[1] &&
colorData.selectDetail.color.rgba?.b == colorData.allBoardData.colorBoards?.[index]?.rgba?.[2] &&
JSON.stringify(colorData.selectDetail.color.gradient) == JSON.stringify(colorData.allBoardData.colorBoards?.[index]?.gradient)
){
if(!isOneChecked){
@@ -136,15 +138,15 @@ export default defineComponent({
item = {}
}
}
console.log(12312);
colorData.colorList.list[newVal].push(item)
}
},{immediate: true})
const selectImgItem = ()=>{
}
const getColorName = (color:any)=>{
let rgb:any = [color.r, color.g, color.b];
let hsv = rgbToHsv(rgb);
let data = [{
@@ -163,8 +165,6 @@ export default defineComponent({
resolve({name:'--',tcx:'--'})
});
})
}
const selectUplpadColor = (item:any)=>{
colorData.selectColor = JSON.parse(JSON.stringify(item))

View File

@@ -1,10 +1,10 @@
<template>
<div class="detailLeft">
<sketch v-show="currentDetailType == 'sketch'"></sketch>
<sketch v-show="currentDetailType == 'sketch'" @addDetail="addDetail"></sketch>
<print v-show="currentDetailType == 'print'"></print>
<color v-show="currentDetailType == 'color'"></color>
<addDetails ref="addDetails" @setSloganData="setSloganData"></addDetails>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
@@ -16,10 +16,11 @@ import { useI18n } from 'vue-i18n'
import sketch from './sketch.vue'
import print from './print.vue'
import color from './colorBox/index.vue'
import addDetails from '@/component/Detail/addDetails.vue'
export default defineComponent({
components:{
sketch,print,color
sketch,print,color,addDetails
},
setup(props,{emit}) {
const store = useStore();
@@ -34,15 +35,22 @@ export default defineComponent({
currentPage:1,
})
const getDetailListDom = reactive({
libraryList:null as any,
addDetails:null as any,
})
const addDetail = () =>{
let addDetails:any = getDetailListDom.addDetails
addDetails.init(detailData.selectDetail,'')
}
const setSloganData = (data:any)=>{
detailData.selectDetail.sketchString = data
}
return{
...toRefs(detailData),
...toRefs(getDetailListData),
...toRefs(getDetailListDom),
addDetail,
setSloganData,
}
},

View File

@@ -31,6 +31,7 @@ export default defineComponent({
required:true
}
},
emits:['selectImgItem'],
setup(props,{emit}) {
const {t} = useI18n();
const store = useStore();
@@ -50,11 +51,11 @@ export default defineComponent({
})
const selectImgItem = (file:any)=>{
if(!file.resData.minIOPath)file.resData.minIOPath = getMinioUrl(file.resData.url)
store.commit('DesignDetailCopy/setNewDetail',file.resData)
// store.commit('DesignDetailCopy/setNewDetail',file.resData)
emit('selectImgItem',file)
}
onMounted(()=>{
console.log(detailData.allBoardData);
detailData.currentList = {
sketch:detailData.allBoardData.sketchboardFiles,
print:detailData.allBoardData.printboardFiles,

View File

@@ -51,8 +51,14 @@ export default defineComponent({
type:Object,
default:()=>[] as any,
required:true
}
},
type:{
type:String,
default:'' as any,
required:true
},
},
emits:['selectImgItem'],
setup(props,{emit}) {
const store = useStore();
const detailData = reactive({
@@ -84,7 +90,8 @@ export default defineComponent({
}
const selectImgItem = (file:any)=>{
let randomNum = Math.floor(100 + Math.random() * 900);
let type = store.state.DesignDetailCopy.currentDetailType
let type = props.type
// let type = store.state.DesignDetailCopy.currentDetailType
let id = file.id
if(type == 'sketch'){
id = Number(file.id + (randomNum + ''))
@@ -95,13 +102,15 @@ export default defineComponent({
}
let data = JSON.parse(JSON.stringify(file))
data.id = id
store.commit('DesignDetailCopy/setNewDetail',data)
emit('selectImgItem',data)
// store.commit('DesignDetailCopy/setNewDetail',data)
}
const getLibraryList = ()=>{
detailData.isShowLoading = true
let level2Type = ''
let workspace = store.state.Workspace.workspace
let type = store.state.DesignDetailCopy.currentDetailType
let type = props.type
// let type = store.state.DesignDetailCopy.currentDetailType
let leve1Type
if(type == 'sketch'){
leve1Type = 'Sketchboard'
@@ -246,6 +255,7 @@ export default defineComponent({
> .material_content_list_loding{
width: 100%;
height: calc((34rem - 2rem) / 2);
overflow: hidden;
}
}
}

View File

@@ -0,0 +1,158 @@
<template>
<div class="selectList">
<div class="switch_type_list">
<div
v-if="type != 'element'"
@click.stop="openCurrent()"
class="switch_type_item"
:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
>
<span class="detailText">{{ $t('DesignDetailAlter.current') }}</span>
</div>
<div
@click.stop="openUpload()"
class="switch_type_item"
:class="[selectTitle == 'upload' ? 'select_swtich' : '',]"
>
<span class="detailText">{{ $t('DesignDetailAlter.Upload') }}</span>
</div>
<div
@click.stop="openLibrary()"
class="switch_type_item"
:class="[selectTitle == 'library' ? 'select_swtich' : '']"
>
<span class="detailText">{{ $t('DesignDetailAlter.Library') }}</span>
</div>
</div>
<div class="print_content_list">
<div class="content_item" v-show="selectTitle == 'current'" v-if="type != 'element'">
<currentList ref="currentList" @selectImgItem="selectImgItem" :catecoryList="catecoryList"></currentList>
</div>
<div class="content_item" v-show="selectTitle == 'upload'">
<uploadList @selectImgItem="selectImgItem" :catecoryList="catecoryList"></uploadList>
</div>
<div class="content_item" v-show="selectTitle == 'library'">
<libraryList @selectImgItem="selectImgItem" :type="type" ref="libraryList" :catecoryList="catecoryList"></libraryList>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
// import sketchCategory from "@/component/HomePage/sketchCategory.vue";
import libraryList from './libraryList.vue'
import uploadList from './uploadList.vue'
import currentList from './currentList.vue'
export default defineComponent({
components:{
currentList,
libraryList,
uploadList,
},
props:{
catecoryList:{
type:Array,
default:()=>[]
},
type:{
type:String,
default:'' as any,
required:true
},
},
emits:['selectImgItem'],
setup(props,{emit}) {
const store = useStore();
const detailData = reactive({
selectTitle: props.type == 'element'?'upload':'current',
printList:[]
})
const getDetailListDom = reactive({
libraryList:null as any,
})
const openCurrent = ()=>{
detailData.selectTitle = 'current'
}
const openUpload = ()=>{
detailData.selectTitle = 'upload'
}
const openLibrary = ()=>{
detailData.selectTitle = 'library'
getDetailListDom.libraryList.init()
}
const selectImgItem = (data:any)=>{
emit('selectImgItem',data)
}
return{
...toRefs(detailData),
...toRefs(getDetailListDom),
openCurrent,
openUpload,
openLibrary,
selectImgItem,
}
},
provide() {
return {
}
},
})
</script>
<style lang="less" scoped>
.selectList{
// width: 34rem;
flex: 1;
overflow: hidden;
width: 100%;
height: auto;
display: flex;
flex-direction: column;
> .switch_type_list{
display: flex;
margin-bottom: 2.5rem;
> .switch_type_item:last-child{
margin-right: 0;
}
> .switch_type_item{
position: relative;
cursor: pointer;
margin-right: 6.5rem;
}
> .switch_type_item::before {
position: absolute;
content: "";
display: block;
background: #000;
height: calc(.4rem*1.2);
left: 50%;
transform: translateX(-50%);
bottom: -.5rem;
width: 0px;
transition: 0.3s all;
}
> .select_swtich {
color: #000;
font-weight: 600;
}
> .select_swtich::before {
width: 100%;
}
}
> .print_content_list{
flex: 1;
overflow: hidden;
> .content_item{
height: 100%;
margin-top: 1rem;
}
}
}
</style>

View File

@@ -60,6 +60,7 @@ export default defineComponent({
required:true
}
},
emits:['selectImgItem'],
setup(props,{emit}) {
const {t} = useI18n();
const store = useStore();
@@ -82,7 +83,8 @@ export default defineComponent({
})
const selectImgItem = (file:any)=>{
// let data = JSON.parse(JSON.stringify(file))
store.commit('DesignDetailCopy/setNewDetail',file)
// store.commit('DesignDetailCopy/setNewDetail',file)
emit('selectImgItem',file)
}
const upFileUploadChange = (data:any)=>{
let file = data.file;

View File

@@ -9,40 +9,7 @@
<i class="fi fi-rr-picture centent"></i>
</div>
</div>
<div class="switch_type_list">
<div
@click.stop="openCurrent()"
class="switch_type_item"
:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
>
<span class="detailText">{{ $t('DesignDetailAlter.current') }}</span>
</div>
<div
@click.stop="openUpload()"
class="switch_type_item"
:class="[selectTitle == 'upload' ? 'select_swtich' : '',]"
>
<span class="detailText">{{ $t('DesignDetailAlter.Upload') }}</span>
</div>
<div
@click.stop="openLibrary()"
class="switch_type_item"
:class="[selectTitle == 'library' ? 'select_swtich' : '']"
>
<span class="detailText">{{ $t('DesignDetailAlter.Library') }}</span>
</div>
</div>
<div class="print_content_list">
<div class="content_item" v-show="selectTitle == 'current'">
<currentList ref="currentList" :catecoryList="sketchCatecoryList"></currentList>
</div>
<div class="content_item" v-show="selectTitle == 'upload'">
<uploadList :catecoryList="sketchCatecoryList"></uploadList>
</div>
<div class="content_item" v-show="selectTitle == 'library'">
<libraryList ref="libraryList" :catecoryList="sketchCatecoryList"></libraryList>
</div>
</div>
<selectList @selectImgItem="selectImgItem" :type="currentDetailType" :catecoryList="printCatecoryList"></selectList>
</div>
</template>
@@ -54,26 +21,24 @@ import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
// import sketchCategory from "@/component/HomePage/sketchCategory.vue";
import libraryList from './module/libraryList.vue'
import uploadList from './module/uploadList.vue'
import currentList from './module/currentList.vue'
import selectList from './module/selectList.vue'
export default defineComponent({
components:{
currentList,
libraryList,
uploadList,
selectList,
},
setup(props,{emit}) {
const store = useStore();
const detailData = reactive({
selectTitle:'current',
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
sketchCatecoryList:computed(()=>{
printCatecoryList:computed(()=>{
return store.state.UserHabit.printType
}),
printList:[]
printList:[],
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType)
})
watch(()=>detailData.selectDetail?.printObject?.prints,(newVal,oldVal)=>{
watch(()=>detailData?.selectDetail?.printObject?.prints,(newVal,oldVal)=>{
if(!newVal)return
detailData.printList = newVal.reduce((acc:any, curr:any) => {
if (!acc.some((item:any) => item.id === curr.id)) {
acc.push(curr);
@@ -100,8 +65,8 @@ export default defineComponent({
detailData.selectTitle = 'library'
getDetailListDom.libraryList.init()
}
const selectImgItem = ()=>{
const selectImgItem = (data:any)=>{
store.commit('DesignDetailCopy/setNewDetail',data)
}
return{
@@ -171,45 +136,5 @@ export default defineComponent({
}
}
}
> .switch_type_list{
display: flex;
margin-bottom: 2.5rem;
> .switch_type_item:last-child{
margin-right: 0;
}
> .switch_type_item{
position: relative;
cursor: pointer;
margin-right: 6.5rem;
}
> .switch_type_item::before {
position: absolute;
content: "";
display: block;
background: #000;
height: calc(.4rem*1.2);
left: 50%;
transform: translateX(-50%);
bottom: -.5rem;
width: 0px;
transition: 0.3s all;
}
> .select_swtich {
color: #000;
font-weight: 600;
transform: scale(1.15);
}
> .select_swtich::before {
width: 100%;
}
}
> .print_content_list{
flex: 1;
overflow: hidden;
> .content_item{
height: 100%;
margin-top: 1rem;
}
}
}
</style>

View File

@@ -1,45 +1,18 @@
<template>
<div class="sketch">
<div class="detailText">Current Print</div>
<div class="select_sketch">
<img :src="selectDetail.path" alt="">
<div class="select_sketch" v-if="selectDetail.id">
<!-- <img :src="selectDetail?.sketchString?selectDetail?.sketchString:selectDetail.path" alt=""> -->
<img :src="selectDetail.sketchString || selectDetail.path" alt="">
<i :title="$t('DesignDetail.editSketchTitle')" class="fi fi-rs-pencil-paintbrush" @click.stop="openAddDetail"></i>
</div>
<div class="switch_type_list">
<div
@click.stop="openCurrent()"
class="switch_type_item"
:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
>
<span class="detailText">{{ $t('DesignDetailAlter.current') }}</span>
</div>
<div
@click.stop="openUpload()"
class="switch_type_item"
:class="[selectTitle == 'upload' ? 'select_swtich' : '',]"
>
<span class="detailText">{{ $t('DesignDetailAlter.Upload') }}</span>
</div>
<div
@click.stop="openLibrary()"
class="switch_type_item"
:class="[selectTitle == 'library' ? 'select_swtich' : '']"
>
<span class="detailText">{{ $t('DesignDetailAlter.Library') }}</span>
</div>
</div>
<div class="sketch_content_list">
<div class="content_item" v-show="selectTitle == 'current'">
<currentList ref="currentList" :catecoryList="sketchCatecoryList"></currentList>
</div>
<div class="content_item" v-show="selectTitle == 'upload'">
<uploadList :catecoryList="sketchCatecoryList"></uploadList>
</div>
<div class="content_item" v-show="selectTitle == 'library'">
<libraryList ref="libraryList" :catecoryList="sketchCatecoryList"></libraryList>
<div class="select_sketch" v-else>
<div>
<i class="fi fi-rr-picture centent"></i>
</div>
</div>
<selectList @selectImgItem="selectImgItem" :type="currentDetailType" :catecoryList="sketchCatecoryList"></selectList>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
@@ -49,15 +22,13 @@ import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
// import sketchCategory from "@/component/HomePage/sketchCategory.vue";
import libraryList from './module/libraryList.vue'
import uploadList from './module/uploadList.vue'
import currentList from './module/currentList.vue'
import selectList from './module/selectList.vue'
export default defineComponent({
components:{
currentList,
libraryList,
uploadList,
selectList,
},
emit:['addDetail'],
setup(props,{emit}) {
const store = useStore();
const detailData = reactive({
@@ -65,7 +36,8 @@ export default defineComponent({
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
sketchCatecoryList:computed(()=>{
return store.state.Workspace.workspacePosition
})
}),
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType)
})
const getDetailListData = reactive({
total:0,
@@ -85,10 +57,12 @@ export default defineComponent({
detailData.selectTitle = 'library'
getDetailListDom.libraryList.init()
}
const selectImgItem = ()=>{
const selectImgItem = (data:any)=>{
store.commit('DesignDetailCopy/setNewDetail',data)
}
const openAddDetail = ()=>{
emit('addDetail')
}
return{
...toRefs(detailData),
...toRefs(getDetailListData),
@@ -98,6 +72,7 @@ export default defineComponent({
openUpload,
openLibrary,
selectImgItem,
openAddDetail,
}
},
@@ -126,6 +101,7 @@ export default defineComponent({
border-radius: .5rem;
// border: 1px dashed #202020;
border: 1px dashed transparent;
position: relative;
background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em, #000 0,#000 0.6em);
margin-bottom: 3rem;
> img{
@@ -133,6 +109,24 @@ export default defineComponent({
height: 100%;
object-fit: contain;
}
> i{
position: absolute;
left: auto;
right: 1rem;
top: 2rem;
font-size: 2rem;
cursor: pointer;
}
> div{
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
> i{
font-size: 10rem;
}
}
}
> .switch_type_list{
display: flex;
@@ -160,7 +154,6 @@ export default defineComponent({
> .select_swtich {
color: #000;
font-weight: 600;
transform: scale(1.15);
}
> .select_swtich::before {
width: 100%;