admin-vue3/src/views/crm/stationsite/detail/index.vue

<template>
  <StationSiteDetailsHeader :station-site="stationSite" :loading="loading">
    <el-button
        type="primary"
        v-hasPermi="['crm:station-site:update']"
        @click="openForm('update', stationSite.id)"
      >
      编辑
    </el-button>
    <el-button  
         v-hasPermi="['crm:station-site:transfor']"
        @click="transfer"
      >
      转移
    </el-button>
  </StationSiteDetailsHeader>
  <el-col>
    <el-tabs>
      <el-tab-pane  label="动态记录"> <!--v-hasPermi="['crm:station-site:update']" v-hasPermi="['crm:station-site:transfor']"  v-if="checkPermi(['crm:follow-up-record:query'])" -->
        <FollowUpList :biz-id="stationSiteId" :biz-type="BizTypeEnum.CRM_STATION_SITE" />
      </el-tab-pane>

      <!-- 附件标签页 -->
      <el-tab-pane label="附件">
        <div v-if="loading" class="loading-container">
          <el-skeleton :rows="5" animated />
        </div>
        
        <div v-else class="attachment-container">
          <!-- 图片展示部分 -->
          <div class="section" v-if="stationSite.picUrls?.length">
            <h3 class="section-title">图片</h3>
            <div class="image-list">
              <div 
                v-for="(url, index) in stationSite.picUrls" 
                :key="index" 
                class="image-item"
              >
                <el-image 
                  :src="url" 
                  :preview-src-list="stationSite.picUrls"
                  :initial-index="index"
                  fit="cover"
                  class="thumbnail"
                >
                  <template #error>
                    <div class="image-error">
                      <span>加载失败</span>
                    </div>
                  </template>
                </el-image>
              </div>
            </div>
          </div>
          
          <!-- 文件展示部分 -->
          <div class="section" v-if="stationSite.fileUrls?.length">
            <h3 class="section-title">文件</h3>
            <div class="file-list">
              <div 
                v-for="(url, index) in stationSite.fileUrls" 
                :key="index" 
                class="file-item"
              >
                <el-icon class="file-icon"><Document /></el-icon>
                <div class="file-info">
                  <a 
                    :href="url" 
                    target="_blank" 
                    class="file-name"
                    @click.prevent="downloadFile(url)"
                  >
                    {{ extractFileName(url) }}
                  </a>
                  <div class="file-actions">
                    <el-button 
                      type="primary" 
                      link
                      @click="downloadFile(url)"
                    >
                      下载
                    </el-button>
                    <el-button 
                      type="info" 
                      link
                      @click="previewFile(url)"
                    >
                      预览
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 空状态显示 -->
          <el-empty 
            v-if="!stationSite.picUrls?.length && !stationSite.fileUrls?.length" 
            description="暂无附件数据"
          />
        </div>
      </el-tab-pane>
        <!-- <el-tabs>
          <el-tab-pane label="操作日志">
            <OperateLogV2 :log-list="logList" />
          </el-tab-pane>-->

    </el-tabs>  
  </el-col>


  <!-- 表单弹窗：添加/修改 -->
  <StationSiteForm ref="formRef" @success="getStationSite" />
  <CrmTransferForm ref="transferFormRef" :biz-type="BizTypeEnum.CRM_STATION_SITE" @success="close" />

</template>
<script lang="ts" setup>
import { useRoute } from 'vue-router'
import { ref, onMounted } from 'vue'
import { StationSiteVO, StationSiteApi } from '@/api/crm/stationsite'
import StationSiteDetailsHeader from './StationSiteDetailsHeader.vue'
import type { OperateLogVO } from '@/api/system/operatelog'
import { getOperateLogPage } from '@/api/crm/operateLog'
import { BizTypeEnum } from '@/api/crm/permission'
import { useTagsViewStore } from '@/store/modules/tagsView'
import { checkPermi } from "@/utils/permission"; // 权限判断函数
import FollowUpList from '@/views/crm/followup/components/FollowUpList.vue'
import StationSiteForm from '../StationSiteForm.vue'
import CrmTransferForm from '@/views/crm/permission/components/TransferForm.vue'
import { ElMessage, ElLoading } from 'element-plus'

const route = useRoute()
const stationSiteId = ref<number>()
const loading = ref(true)
const message = useMessage() // 消息弹窗
const fileUrl = ref() // 文件URL
const { delView } = useTagsViewStore() // 视图操作
const { push, currentRoute } = useRouter() // 路由


defineOptions({ name: 'CrmStationSiteDetail' })

/** 获取操作日志 */
const logList = ref<OperateLogVO[]>([]) // 操作日志列表
const getOperateLog = async () => {
  if (!stationSiteId.value) {
    return
  }
  const data = await getOperateLogPage({
    bizType: BizTypeEnum.CRM_CUSTOMER,
    bizId: stationSiteId.value
  })
  logList.value = data.list
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}


/** 获取详情 */
const stationSite = ref<StationSiteVO>({} as StationSiteVO)
const getStationSite = async () => {
  loading.value = true
  try {
    stationSiteId.value = Number(route.params.id)
    stationSite.value = await StationSiteApi.getStationSite(stationSiteId.value)
    await getOperateLog()
    
  } finally {
    loading.value = false
  }
}

// 从URL中提取文件名
const extractFileName = (url) => {
  try {
    const path = new URL(url).pathname
    return decodeURIComponent(path.substring(path.lastIndexOf('/') + 1))
  } catch {
    return decodeURIComponent(url.substring(url.lastIndexOf('/') + 1))
  }
}

// 下载文件
const downloadFile = (url) => {
  const loadingInstance = ElLoading.service({
    lock: true,
    text: '文件下载中...',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  
  try {
    const link = document.createElement('a')
    link.href = url
    link.download = extractFileName(url)
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    ElMessage.success('文件下载开始')
  } catch (error) {
    ElMessage.error('下载失败: ' + error.message)
  } finally {
    setTimeout(() => {
      loadingInstance.close()
    }, 500)
  }
}

// 预览文件（简单实现）
const previewFile = (url) => {
  if (url.match(/\.(png|jpg|jpeg|gif|webp)$/i)) {
    // 图片直接在新标签页打开
    window.open(url, '_blank')
  }
}

/** 客户转移 */
const transferFormRef = ref<InstanceType<typeof CrmTransferForm>>() // 客户转移表单 ref
const transfer = () => {
  transferFormRef.value?.open(Number(stationSiteId.value))
}

const close = () => {
  delView(unref(currentRoute))
  push({ name: 'CrmStationSite' })
}

/** 初始化 */
const { params } = useRoute()
onMounted(() => {
  if (!params.id) {
    message.warning('参数错误，场地信息不能为空！')
    close()
    return
  }
  stationSiteId.value = Number(params.id)
  getStationSite()
})
</script>