aida_front/src/component/Detail/detailLeft/index.vue

<template>
    <div class="detailLeft">
		<sketch v-show="currentDetailType == 'sketch'" ref="sketch" @addDetail="addDetail"></sketch>
		<print v-show="currentDetailType == 'print'"></print>
		<color v-if="currentDetailType == 'color'"></color>
		<element v-show="currentDetailType == 'element'"></element>
		<accessory v-show="currentDetailType == 'accessory'"></accessory>
		<models v-show="currentDetailType == 'models'"></models>
		<addDetails ref="addDetails" @setSloganData="setSloganData"></addDetails>
    </div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} 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 { useI18n } from 'vue-i18n'
import sketch from './sketch.vue'
import print from './print.vue'
import color from './colorBox/index.vue'
import element from './element.vue'
import accessory from './accessory.vue'
import models from './models.vue'
import addDetails from '@/component/Detail/addDetails.vue'

export default defineComponent({
    components:{
		sketch,print,color,addDetails,element,models,accessory
    },
    setup(props,{emit}) {
        const store = useStore();
		const detailData = reactive({
			selectTitle:'upload',
			selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
			currentDetailType:computed(()=>store.state.DesignDetail.currentDetailType),
		})
		const getDetailListData = reactive({
			total:0,
			pageSize:10,
			currentPage:1,
		})
		const getDetailListDom = reactive({
			addDetails:null as any,
			sketch:null as any,
		})
		const addDetail = () =>{
			let addDetails:any = getDetailListDom.addDetails
			addDetails.init(detailData.selectDetail,'')
		}
		const setSloganData = (data:any)=>{
			detailData.selectDetail.sketchString = data
			if(detailData.currentDetailType == 'sketch' && detailData.selectDetail?.newDetail?.sketch){
				detailData.selectDetail.newDetail.sketch = null
			}
		}
		const sketchSysToLibrary = ()=>{//系统sketch添加到library更新library
			getDetailListDom.sketch.sketchSysToLibrary()
		}
		
        return{
			...toRefs(detailData),
			...toRefs(getDetailListData),
			...toRefs(getDetailListDom),
			addDetail,
			setSloganData,
			sketchSysToLibrary,
        }
    },

	provide() {
		return {
		}
	},
		
})
</script>
<style lang="less" scoped>
    .detailLeft{
		// width: 34rem;
		// width: 100%;
		// height: 100%;
		flex: 1;
		display: flex;
		overflow: hidden;
		flex-direction: column;
	}
</style>