完成对于空数据的重新绑定渲染

components.d.ts

@@ -27,10 +27,13 @@ declare module 'vue' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     FileInput: typeof import('./src/components/FileInput.vue')['default']

src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue

@@ -41,7 +41,7 @@
       </Popover>
     </ButtonGroup>
 
-    <ElementDataMapping v-if="handleElement.dataMapping"></ElementDataMapping>
+    <ElementDataMapping ></ElementDataMapping>
 
     <Divider />
     <ElementColorMask />
@@ -276,6 +276,30 @@ const setBackgroundImage = () => {
   slidesStore.updateSlide({ background })
   addHistorySnapshot()
 }
+
+const initMapping = ()=>{
+  if(handleElement.value && !handleElement.value.dataMapping && 'TemplateDataSource' in handleElement.value && handleElement.value.TemplateDataSource){
+    if(handleElement.value.TemplateDataSource.index!=null && handleElement.value.TemplateDataSource.Content){
+      //找出同类
+      const resolveElemnts = slidesStore.currentSlide.elements.filter(x=>x.TemplateDataSource && x.TemplateDataSource.index== handleElement.value.TemplateDataSource.index && x.TemplateDataSource.Content && !x.dataMapping)
+      if(resolveElemnts){
+        resolveElemnts.forEach(x=>{
+          const props = {
+            below: x.TemplateDataSource.index,
+            dataMapping: {
+              id: 0,
+              filed: x.TemplateDataSource.Content.split('.').reverse()[0]
+            }
+          }
+          slidesStore.updateElement({ id: x.id, props })
+        })
+        addHistorySnapshot()
+      }
+      
+    }
+  }
+}
+initMapping()
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue

@@ -10,7 +10,7 @@
       >{{item.label}}</div>
     </div>
 
-    <ElementDataMapping v-if="handleElement.dataMapping"></ElementDataMapping>
+    <ElementDataMapping></ElementDataMapping>
 
     <Divider />
     
@@ -453,15 +453,6 @@ const lineHeight = ref<number>()
 const wordSpace = ref<number>()
 const paragraphSpace = ref<number>()
 
-watch(handleElement, () => {
-  if (!handleElement.value || handleElement.value.type !== 'text') return
-
-  fill.value = handleElement.value.fill || '#fff'
-  lineHeight.value = handleElement.value.lineHeight || 1.5
-  wordSpace.value = handleElement.value.wordSpace || 0
-  paragraphSpace.value = handleElement.value.paragraphSpace === undefined ? 5 : handleElement.value.paragraphSpace
-}, { deep: true, immediate: true })
-
 const fontSizeOptions = [
   '12px', '14px', '16px', '18px', '20px', '22px', '24px', '28px', '32px',
   '36px', '40px', '44px', '48px', '54px', '60px', '66px', '72px', '76px',
@@ -520,6 +511,39 @@ const updateLink = (link?: string) => {
   emitRichTextCommand('link', link)
   linkPopoverVisible.value = false
 }
+
+const initMapping = ()=>{
+  if(handleElement.value && !handleElement.value.dataMapping && 'TemplateDataSource' in handleElement.value && handleElement.value.TemplateDataSource){
+    if(handleElement.value.TemplateDataSource.index!=null && handleElement.value.TemplateDataSource.Content){
+      //找出同类
+      const resolveElemnts = slidesStore.currentSlide.elements.filter(x=>x.TemplateDataSource && x.TemplateDataSource.index== handleElement.value.TemplateDataSource.index && x.TemplateDataSource.Content && !x.dataMapping)
+      if(resolveElemnts){
+        resolveElemnts.forEach(x=>{
+          const props = {
+            below: x.TemplateDataSource.index,
+            dataMapping: {
+              id: 0,
+              filed: x.TemplateDataSource.Content.split('.').reverse()[0]
+            }
+          }
+          slidesStore.updateElement({ id: x.id, props })
+        })
+        addHistorySnapshot()
+      }
+      
+    }
+  }
+}
+
+watch(handleElement, () => {
+  if (!handleElement.value || handleElement.value.type !== 'text') return
+
+  fill.value = handleElement.value.fill || '#fff'
+  lineHeight.value = handleElement.value.lineHeight || 1.5
+  wordSpace.value = handleElement.value.wordSpace || 0
+  paragraphSpace.value = handleElement.value.paragraphSpace === undefined ? 5 : handleElement.value.paragraphSpace
+  initMapping()
+}, { deep: true, immediate: true })
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Toolbar/common/ElementDataMapping.vue

 <template>
-    <div class="element-data-mapping" v-if="currentId!=0">
+   
+    <div class="element-data-mapping" v-if="handleElement && handleElement.dataMapping">
         <divider />
         <div class="q-mb-md row items-center">
             <div class="text-small col">数据绑定</div>
@@ -53,6 +54,7 @@ if(viewportRatio<1){
 
 if(handleElement.value?.dataMapping){
     currentId.value = handleElement.value.dataMapping.id
+    currentId.value = currentId.value == 0? null:currentId.value
     resources[slide.pageType-1].forEach(x=>{
         selectDataSource.value.push({
             label:x.Name,