From 523f2271def4d52388f3d9465948b4e100e1e647 Mon Sep 17 00:00:00 2001
From: Zhufu <1176354795@qq.com>
Date: Thu, 20 Jun 2024 16:30:48 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E6=96=91=E8=A1=A8=E5=8D=95=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E4=BF=AE=E6=94=B9=EF=BC=8C=E8=AF=A6=E6=83=85=E6=B2=A1?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=98=BE=E7=A4=BA=E3=80=90=E6=9A=82=E6=97=A0?=
 =?UTF-8?q?=E3=80=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../formCall/InfoCallModal/index.vue          | 86 +++++++++----------
 .../demo/onlineform/formCall/MapForm.vue      |  5 ++
 src/views/demo/onlineform/formCall/index.vue  | 26 +++++-
 3 files changed, 68 insertions(+), 49 deletions(-)

diff --git a/src/views/demo/onlineform/formCall/InfoCallModal/index.vue b/src/views/demo/onlineform/formCall/InfoCallModal/index.vue
index 30568a6c..29f63229 100644
--- a/src/views/demo/onlineform/formCall/InfoCallModal/index.vue
+++ b/src/views/demo/onlineform/formCall/InfoCallModal/index.vue
@@ -1,61 +1,56 @@
 <template>
-  <a-modal 
-    width="80%" 
-    v-model:open="props.open" 
-    title="详情" 
-    :footer="null" 
-    :maskClosable="true" 
-    :destroyOnClose="true"
-    @cancel="closeModal">
-    <div class="content">
-      <template v-if="haveTab">
-        <a-tabs v-model:activeKey="selectTab">
-          <a-tab-pane v-for="(tab, tabIndex) in showList" :key="tabIndex" :tab="tab.label">
-            <a-descriptions :column="2" bordered>
-              <template v-for="(item, index) in tab.children" :key="index">
-                <a-descriptions-item v-if="item.component === 'ImageUpload'" :label="item.label">
-                  <a-image
-                    width="100px"
-                    height="100px"
-                    :src="`${item.componentProps.server}/${item.infoShowValue}`"
-                  ></a-image>
-                </a-descriptions-item>
-                <a-descriptions-item v-else-if="item.component === 'VideoUpload'" :label="item.label">
-                  <img v-if="item.infoShowValue" style="width: 100px; height: 100px; cursor: pointer;" src="./video.png" @click="handlePreview(item)" alt="">
-                </a-descriptions-item>
-                <a-descriptions-item v-else :label="item.label">{{ item.infoShowValue }}</a-descriptions-item>
-              </template>
-            </a-descriptions>
-          </a-tab-pane>
-        </a-tabs>
-      </template>
-      <template v-else>
+  <template v-if="haveTab">
+    <a-tabs v-model:activeKey="selectTab">
+      <a-tab-pane v-for="(tab, tabIndex) in showList" :key="tabIndex" :tab="tab.label">
         <a-descriptions :column="2" bordered>
-          <template v-for="(item, index) in showList" :key="index">
+          <template v-for="(item, index) in tab.children" :key="index">
             <a-descriptions-item v-if="item.component === 'ImageUpload'" :label="item.label">
               <a-image
+                v-if="item.infoShowValue"
                 width="100px"
                 height="100px"
                 :src="`${item.componentProps.server}/${item.infoShowValue}`"
               ></a-image>
+              <div v-else style="opacity: 0.3">{{"(暂无)"}}</div>
             </a-descriptions-item>
             <a-descriptions-item v-else-if="item.component === 'VideoUpload'" :label="item.label">
               <img v-if="item.infoShowValue" style="width: 100px; height: 100px; cursor: pointer;" src="./video.png" @click="handlePreview(item)" alt="">
+              <div v-else style="opacity: 0.3">{{"(暂无)"}}</div>
+            </a-descriptions-item>
+            <a-descriptions-item v-else :label="item.label">
+              <div v-if="item.infoShowValue">{{ item.infoShowValue}}</div>
+              <div v-else style="opacity: 0.3">{{"(暂无)"}}</div>
             </a-descriptions-item>
-            <a-descriptions-item v-else :label="item.label">{{ item.infoShowValue }}</a-descriptions-item>
           </template>
         </a-descriptions>
-        <a-table v-if="subTableData" :columns="columns" :data-source="props.data.infoUseSubTableData" :pagination="false"></a-table>
+      </a-tab-pane>
+    </a-tabs>
+  </template>
+  <template v-else>
+    <a-descriptions :column="2" bordered>
+      <template v-for="(item, index) in showList" :key="index">
+        <a-descriptions-item v-if="item.component === 'ImageUpload'" :label="item.label">
+          <a-image
+            width="100px"
+            height="100px"
+            :src="`${item.componentProps.server}/${item.infoShowValue}`"
+          ></a-image>
+        </a-descriptions-item>
+        <a-descriptions-item v-else-if="item.component === 'VideoUpload'" :label="item.label">
+          <img v-if="item.infoShowValue" style="width: 100px; height: 100px; cursor: pointer;" src="./video.png" @click="handlePreview(item)" alt="">
+        </a-descriptions-item>
+        <a-descriptions-item v-else :label="item.label">{{ item.infoShowValue }}</a-descriptions-item>
       </template>
-    </div>
-  </a-modal>
+    </a-descriptions>
+    <a-table v-if="subTableData" :columns="columns" :data-source="props.data.infoUseSubTableData" :pagination="false"></a-table>
+  </template>
   <Modal :open="previewOpen" :title="previewTitle" :footer="null" @cancel="handleCancel" :zIndex="1001">
     <video :src="previewVideo" class="video-player" controls muted autoplay></video>
   </Modal>
 </template>
 
 <script setup lang="tsx">
-import { defineProps, watch, ref, defineEmits } from "vue"
+import { defineProps, watch, ref, defineEmits, onMounted } from "vue"
 import ShowCardGroupItem from './ShowCardGroupItem/index.vue'
 import { Modal } from 'ant-design-vue'
 const props = defineProps(["open","data"])
@@ -68,7 +63,7 @@ const previewOpen = ref(false)
 const previewTitle = ref("")
 const subTableData = ref(null)
 const columns = ref([])
-watch(() => props.data,() => {
+onMounted(() => {
   console.log('props.data',props.data)
   props.data.tab.forEach(item => {
     console.log('item',item)
@@ -207,12 +202,12 @@ const noTabsSetCardGroupItem = (item, index) => {
     }
   })
 }
-const closeModal = () => {
-  emits('update:open', false)
-  showList.value = []
-  columns.value = []
-  subTableData.value = null
-}
+// const closeModal = () => {
+//   emits('update:open', false)
+//   showList.value = []
+//   columns.value = []
+//   subTableData.value = null
+// }
 const handlePreview = (item) => {
   previewVideo.value = `${item.componentProps.server}/${item.infoShowValue}`;
   previewOpen.value = true;
@@ -225,9 +220,6 @@ const handleCancel = () => {
 </script>
 
 <style lang="scss" scoped>
-.content{
-  padding: 30px;
-}
 .video-player{
   width:500px;
   margin:10px;
diff --git a/src/views/demo/onlineform/formCall/MapForm.vue b/src/views/demo/onlineform/formCall/MapForm.vue
index 9300ad3e..ef46a249 100644
--- a/src/views/demo/onlineform/formCall/MapForm.vue
+++ b/src/views/demo/onlineform/formCall/MapForm.vue
@@ -20,6 +20,10 @@
       :closeFunc="closeFunc"
     > -->
         <div class="map-content">
+          <template v-if="isDetail">
+            <slot name="detail" />
+          </template>
+          <template v-else>
             <template v-if="tabsColumns.length > 1">
                 <a-tabs style="width: 100%" @change="tabsChange">
                   <a-tab-pane v-for="(colItem, index) in tabsColumns" :tab="colItem.label" :key="index">
@@ -123,6 +127,7 @@
             <a-button style="margin-right: 20px" @click="handlerCloseForm">取消</a-button>
             <a-button type="primary" @click="ModalSureClick">确认</a-button>
             </div>
+          </template>
         </div>
     </div>
   </template>
diff --git a/src/views/demo/onlineform/formCall/index.vue b/src/views/demo/onlineform/formCall/index.vue
index e0d75e87..eac2b36d 100644
--- a/src/views/demo/onlineform/formCall/index.vue
+++ b/src/views/demo/onlineform/formCall/index.vue
@@ -44,7 +44,11 @@
           @success="submitsuccess"
         /> -->
         <div class="map-form-container" v-if="mapFormShow">
-          <MapFormModal v-if="mapFormShow" @clsoeMapForm="clsoeMapForm" :data="mapFormData" />
+          <MapFormModal v-if="mapFormShow" @clsoeMapForm="clsoeMapForm" :data="mapFormData">
+            <template #detail>
+              <infoCallModal :data="mapFormData" />
+            </template>
+          </MapFormModal>
         </div>
       </div>
       <div
@@ -64,7 +68,19 @@
     </div>
 
     <CallModal @success="submitsuccess" @register="registerModal" />
-    <InfoCallModal v-model:open="infoCallModalOpen" :data="infoCallModalData"/>
+    <a-modal 
+      width="80%" 
+      v-model:open="infoCallModalOpen" 
+      title="详情" 
+      :footer="null" 
+      :maskClosable="true" 
+      :destroyOnClose="true"
+      @cancel="closeModal">
+      <div class="content">
+        <InfoCallModal :data="infoCallModalData"/>
+      </div>
+    </a-modal>
+    
 
     <a-modal
       width="100%"
@@ -973,6 +989,9 @@
   const clsoeMapForm = () => {
     mapFormShow.value = false;
   };
+  const closeModal = () => {
+    infoCallModalOpen.value = false
+  }
 </script>
 <style lang="less">
   .full-modal {
@@ -1014,4 +1033,7 @@
     background: #fff;
     z-index: 999;
   }
+  .content{
+  padding: 30px;
+}
 </style>