272 lines
7.8 KiB
Vue
272 lines
7.8 KiB
Vue
<template>
|
|
<div class="modelindex">
|
|
<div class="modelindex_left">
|
|
<div class="back" v-show="isEditPattern.value">
|
|
<i class="fi fi-br-angle-left" @click="setBack"></i>
|
|
</div>
|
|
<modelNav ref="modelNav" @addSketch="()=>$emit('addSketch')" @sketchSysToLibrary="()=>$emit('sketchSysToLibrary')" @deleteItem="deleteItem"></modelNav>
|
|
</div>
|
|
<div class="modelindex_right" ref="modelindexRight">
|
|
<div class="detail_btn">
|
|
<!-- 全屏 -->
|
|
<!-- <i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail('2')"></i> -->
|
|
|
|
<i class="icon iconfont icon-chehui" @click="revocation"></i>
|
|
<i class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i>
|
|
<!-- 编辑 -->
|
|
<i class="fi fi-rs-pencil-paintbrush" :title="$t('DesignDetail.editSketchTitle')" :class="{'pointerEventsNone':!selectDetail?.id,active:isEditPattern.value == 'editSketch'}" @click="showDesignImgDetail('editSketch')"></i>
|
|
<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" :class="{active:isEditPattern.value == 'canvasEditor','pointerEventsNone':!selectDetail?.id}" @click="showDesignImgDetail('canvasEditor')"></i>
|
|
|
|
<i class="icon iconfont icon-clothes" :title="$t('Canvas.editFrontBack')" style="font-size: 3.2rem;" @click="showDesignImgDetail('redGreenExample')" :class="{active:isEditPattern.value == 'redGreenExample','pointerEventsNone':!selectDetail?.id}"></i>
|
|
<!-- <i @click="showDesignImgDetail('redGreenExample')" :class="{active:isEditPattern.value == 'redGreenExample','pointerEventsNone':!selectDetail?.id}">
|
|
<SvgIcon name="CClothes" size="30" />
|
|
</i> -->
|
|
|
|
<!-- <i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" :class="{active:imgDesignImg}" @click="mousedownDesignImg"></i> -->
|
|
<!-- <i v-show="!body && !deleteShow" :title="$t('DesignDetail.DetailTitle')" class="fi fi-rr-trash" @click="deleteNav(0)"></i>
|
|
<i v-show="!body && deleteShow" class="fi fi-br-check" @click="deleteNav(1)"></i> -->
|
|
|
|
<!-- 层 -->
|
|
<i :title="$t('DesignDetail.compareTitle')" @mousedown="mousedownDesignImg" @mouseup="mousedownDesignImg" @touchstart.passive="mousedownDesignImg" @touchend.passive="mousedownDesignImg">
|
|
<SvgIcon name="DetailCompare" size="30" />
|
|
</i>
|
|
|
|
</div>
|
|
<position ref="position" @addSketch="()=>$emit('addSketch')" :imgDesignImg=imgDesignImg></position>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { defineComponent,computed,ref,inject,onBeforeUnmount,createVNode,toRefs, reactive, onMounted} from 'vue'
|
|
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
import { Https } from "@/tool/https";
|
|
import { useStore } from "vuex";
|
|
import { Modal,message } from 'ant-design-vue';
|
|
import { useI18n } from 'vue-i18n'
|
|
import position from './modelPosition.vue';
|
|
import modelNav from './modelNav.vue';
|
|
export default defineComponent({
|
|
components:{
|
|
position,modelNav
|
|
},
|
|
emits:['detailEdit','addSketch','revocation','oppositeRevocation','sketchSysToLibrary'],
|
|
setup(props,{emit}) {
|
|
const {t} = useI18n()
|
|
const store = useStore();
|
|
const detailData = reactive({
|
|
getCanvasIfEdit:inject('getCanvasIfEdit')as any,
|
|
selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
|
|
})
|
|
const setRevocation:any = inject('setRevocation')
|
|
const getDetailListData = reactive({
|
|
designDetail:computed(()=>store.state.DesignDetail.designDetail),
|
|
isEditPattern:inject('isEditPattern') as any,
|
|
imgDesignImg:false,
|
|
})
|
|
const getDetailListDom = reactive({
|
|
libraryList:null as any,
|
|
position:null as any,
|
|
modelindexRight:null as any,
|
|
modelNav:null as any,
|
|
})
|
|
const getSubmitData = (value:any)=>{
|
|
return getDetailListDom.position.getSubmitData(value,)
|
|
}
|
|
const showDesignImgDetail = (str:any)=>{
|
|
emit('detailEdit',str)
|
|
|
|
// new Promise((resolve, reject) => {
|
|
// if(
|
|
// getDetailListData.isEditPattern.value&&
|
|
// detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun() > 0
|
|
// ){
|
|
// Modal.confirm({
|
|
// title: t('collectionModal.jsContent2'),
|
|
// icon: createVNode(ExclamationCircleOutlined),
|
|
// okText: 'Yes',
|
|
// cancelText: 'No',
|
|
// mask:false,
|
|
// centered:true,
|
|
// onOk() {
|
|
// resolve(true)
|
|
// emit('detailEdit',str)
|
|
// },
|
|
// onCancel(){
|
|
// resolve(false)
|
|
// }
|
|
// });
|
|
// }else{
|
|
// resolve(true)
|
|
// emit('detailEdit',str)
|
|
// }
|
|
// })
|
|
}
|
|
const deleteItem = ()=>{
|
|
setRevocation()
|
|
}
|
|
const revocation = ()=>{//撤回
|
|
emit('revocation')
|
|
// getDetailListDom.position.updataPosition()
|
|
}
|
|
const oppositeRevocation = ()=>{//反撤回
|
|
emit('oppositeRevocation')
|
|
// getDetailListDom.position.updataPosition()
|
|
}
|
|
|
|
//图片按下样子
|
|
const mousedownDesignImg = ()=>{
|
|
getDetailListData.imgDesignImg = !getDetailListData.imgDesignImg
|
|
}
|
|
let time = null as any
|
|
|
|
const handleResize = ()=>{
|
|
clearTimeout(time)
|
|
time = setTimeout(()=>{
|
|
let data = {
|
|
...getDetailListData.designDetail,
|
|
fromType:'resize',
|
|
}
|
|
store.commit('DesignDetail/setDesignDetail',data)
|
|
getDetailListDom.position?.updataPosition?.()
|
|
getDetailListDom.modelNav?.setItemPosition?.()
|
|
getDetailListDom.position?.updateRect?.()
|
|
},200)
|
|
}
|
|
const updateRect = ()=>{
|
|
getDetailListDom.position?.updateRect?.()
|
|
}
|
|
const setBack = ()=>{
|
|
showDesignImgDetail(getDetailListData.isEditPattern.value)
|
|
}
|
|
let observers = null as any
|
|
onMounted(()=>{
|
|
observers = new ResizeObserver(entries => {
|
|
for (let entry of entries) {
|
|
handleResize()
|
|
}
|
|
});
|
|
observers.observe(getDetailListDom.modelindexRight);
|
|
})
|
|
onBeforeUnmount(()=>{
|
|
observers.disconnect();
|
|
})
|
|
return{
|
|
...toRefs(detailData),
|
|
...toRefs(getDetailListData),
|
|
...toRefs(getDetailListDom),
|
|
getSubmitData,
|
|
showDesignImgDetail,
|
|
revocation,
|
|
deleteItem,
|
|
oppositeRevocation,
|
|
mousedownDesignImg,
|
|
setBack,
|
|
updateRect,
|
|
}
|
|
},
|
|
|
|
provide() {
|
|
return {
|
|
}
|
|
},
|
|
|
|
})
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.modelindex{
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
// padding-top: 3rem;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
.modelindex_right,.modelindex_left{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
}
|
|
> .modelindex_right{
|
|
flex: 1;
|
|
overflow: hidden;
|
|
|
|
> .detail_btn{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-radius: 1rem;
|
|
padding: .7rem ;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
// max-height: 4rem;
|
|
position: relative;
|
|
z-index: 99;
|
|
> i{
|
|
font-size: 2rem;
|
|
cursor: pointer;
|
|
// padding: 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: .6rem;
|
|
overflow: hidden;
|
|
transition: all .3s;
|
|
width: 4rem;
|
|
height: 4rem;
|
|
justify-content: center;
|
|
&.pointerEventsNone{
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
opacity: 0.6;
|
|
}
|
|
@media (min-width: 1024px) {
|
|
font-size: 2.4rem;
|
|
}
|
|
> img{
|
|
width: 80%;
|
|
color: #fff;
|
|
height: 80%;
|
|
}
|
|
}
|
|
> i:hover{
|
|
background: #000000;
|
|
color: #fff;
|
|
}
|
|
> .active{
|
|
background: #000000;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.modelindex_left{
|
|
justify-content: center;
|
|
position: relative;
|
|
> .back{
|
|
position: absolute;
|
|
font-size: 3.6rem;
|
|
font-weight: 500;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 1.2rem;
|
|
top: 8rem;
|
|
left: 0;
|
|
> i {
|
|
margin-right: 2.8rem;
|
|
font-size: 2rem;
|
|
display: flex;
|
|
cursor: pointer;
|
|
align-items: center;
|
|
width: 4.6rem;
|
|
height: 4.6rem;
|
|
border-radius: 1.2rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
border: 1px solid #D8DADC;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |