itsm-wx-handle/pages/repositoryDetails/repositoryDetails.vue

<template>
  <view class="box">
    <view class="head">{{dataInfo.data.title}}</view>
    <view class="sign">
			<text>引入次数：{{dataInfo.data.introduceCount?dataInfo.data.introduceCount: 0}}</text>
			<text>版本号：{{dataInfo.data.visionNumber}}</text>
			<text>{{dataInfo.data.createtime}}</text>
		</view>
		<view class="theme">{{mutiCategory}}</view>
		<view class="content" v-html="dataInfo.data.content"></view>
		<view class="file-list" v-for="item in dataInfo.fileData" :key="item">
			<view class="file-item" @click="downloadFile(item)">{{item.name}}</view>
			<text class="newicon newicon-xiazai" @click="downloadFile(item)"></text>
		</view>
		<view class="foot_common_btns btn-style">
			<button @click="goBack" type="default" class="cancelButton btn">返回</button>
			<button @click="importData" type="default" class="primaryButton btn ">引入</button>
		</view>
		<uni-popup ref="popup" type="center" >
			<img :src="fileUrl" alt="" class="view-img">
		</uni-popup>
  </view>
</template>

<script setup>
  import { ref, reactive} from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { api_getSolution, api_listAttachment} from "@/http/api.js"
  import { useSetTitle } from '@/share/useSetTitle.js'
  import { useGoBack } from '@/share/useGoBack.js'
  import { useHandlerStore } from '@/stores/handler'
	
  useSetTitle();
	
	const handlerStore = useHandlerStore();
	
  const { goBack }  = useGoBack();
  
  // 故障类型
  const mutiCategory = ref(null)
  
	
	// 关联故障分类的知识库数量
	const introduceCount = ref(0)
	
	// tab类型
	const tabType = ref('null')
	
	// 附件图片预览
	const fileUrl = ref('null')
	
	// Popup状态
	const popup = ref(null)
	
  // 数据
  const dataInfo = reactive({
    data: [],//数据
    incidentId: undefined,//事件ID
		solutionnumber:undefined,
		fileData:[] //附件数据
  })
  
  // 下载附件
  function downloadFile(item){
    console.log(666,item)
		let url = location.origin + "/file" + item.relativeFilePath
		fileUrl.value = url
		let name = item.name  //文件下载后的名称（带后缀）
		if(item.suffix=='png' || item.suffix=='jpg' || item.suffix=='gif'){
			popup.value.open()
		}else{
			var oA = document.createElement("a");
			oA.download = name; 
			oA.href = url
			document.body.appendChild(oA);
			oA.click();
			oA.remove(); 
		}
  }
  
	// 引入
	function importData(){
		let url = null
		let type = handlerStore.handler.data.operateType
		let storeInfo = handlerStore.handler.data
		storeInfo.introduceCount = introduceCount.value
		storeInfo.handleDescription = dataInfo.data.content
		storeInfo.solutionId = dataInfo.data.id
		storeInfo.type = 'rep'
		storeInfo.isSummaryNext = 1
		handlerStore.setHandlerData(storeInfo,'assign', 'assign')
		if(type=='malfunction'){ //故障处理
			url = '/pages/handler/handler'
		}else if(type=='reissue'){ //补单
			url = '/pages/assign/assign'
		}
		uni.navigateTo({
		  url: url
		})
	}
	
	// 获取附件
	function getHandlerImgs(type,id){
	  uni.showLoading({
	    title: "加载中",
	    mask: true,
	  });
	  api_listAttachment(type, id).then(res => {
	    uni.hideLoading();
			dataInfo.fileData = res.data
	  })
	}
	
  // 获取列表信息
  function getList(){
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
    
    let postData = {
      idx: dataInfo.idx,
      sum: 20,
      solution: {
        solutionnumber: dataInfo.solutionnumber,
      }
    }
    
    api_getSolution(postData).then(res => {
      uni.hideLoading();
      if(res.status == 200){
        let list = res.list || [];
				introduceCount.value = res.totalNum
        dataInfo.data = list[0]
				mutiCategory.value = list[0].category.mutiCategory
				getHandlerImgs('knowledge',list[0].id)
      }else{
        uni.showToast({
          icon: 'none',
          title: res.msg || '请求数据失败！'
        });
      }
    })
  }
  
  onLoad((option) => {
    dataInfo.incidentId = option.incidentId;
		dataInfo.solutionnumber = option.solutionnumber ;
		if(option.tabType){
			tabType.value = option.tabType;
		}
    getList();
  })

</script>

<style lang="scss" scoped>
.box{
  padding: 24rpx;
  .head{
    color: #000;
    font-size: 32rpx;
		font-weight: 600;
  }
  .sign{
    color: #686868;
    font-size: 24rpx;
		padding: 24rpx 0;
    text{
      margin-right: 40rpx;
    }
  }
  .theme{
    font-size: 26rpx;
		color: #49b856;
		padding: 0 0 24rpx 0;
  }
	.content{
		padding-bottom: 24rpx;
		border-bottom: 1px solid #eee;
		// overflow-y: scroll;
	}
  .file-list{
    display: flex;
		margin-bottom: 10rpx;
		margin-top: 24rpx;
		.file-item{
			color: #00aaff;
			text-decoration: underline;
		}
		text{
			margin-left: 15rpx;
			margin-top: 8rpx;
		}
  }
	.btn-style{
		position: fixed;
		bottom: 24rpx;
		width: 93.5%; 
		padding: 0;
	}
	.view-img{
		width: 100%;
		height: 100%;
	}
}
</style>