客户列表 添加公海详情展示

src/views/crmpc/customer/index.vue

@@ -116,6 +116,15 @@
           <el-table-column prop="created_at" label="创建时间"></el-table-column>
           <el-table-column fixed="right" label="操作" width="200px" align="center">
             <template #default="scope">
+              <el-link
+                type="success"
+                underline="never"
+                style="margin-right: 8px"
+                @click="onDetail(scope.row)"
+                v-if="hasAuth('crm_customer@show')"
+              >
+                <i class="iconfont-sys"> &#xe70f;</i>详情
+              </el-link>
               <el-link
                 type="primary"
                 underline="never"
@@ -132,7 +141,7 @@
                 @click="goAddFollow(scope.row)"
                 v-if="hasAuth('crm_customer@follow_add')"
               >
-                <i class="iconfont-sys">&#xe6bf;</i> 添加跟进
+                <i class="iconfont-sys">&#xe6bf;</i> 跟进
               </el-link>
               <el-link
                 type="danger"
@@ -148,6 +157,9 @@
       </ArtTable>
     </div>
   </div>
+  <el-dialog v-model="detailDialogVisible" title="详情">
+    <div v-if="detailRow" v-html="detailRow.desc_collect" class="detils-content"></div>
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
@@ -161,6 +173,8 @@
   const activeTab = ref('')
   const showMore = ref(false)
   const loading = ref(false)
+  const detailDialogVisible = ref(false)
+  const detailRow = ref<any>(null)
   const pagination = reactive({
     currentPage: 1,
     pageSize: 10,
@@ -288,6 +302,20 @@
         // 用户点击了取消
       })
   }
+  function processImages(html: string) {
+    const parser = new DOMParser()
+    const doc = parser.parseFromString(html, 'text/html')
+    doc.querySelectorAll('img').forEach((img) => {
+      img.style.maxWidth = '100%'
+      img.style.height = 'auto'
+    })
+    return doc.body.innerHTML
+  }
+  function onDetail(row: any) {
+    row.desc_collect = processImages(row.desc_collect) // 处理图片
+    detailRow.value = row
+    detailDialogVisible.value = true
+  }
 </script>
 
 <style scoped lang="scss">