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}}</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>
		<button @click="importData" type="default" class="primaryButton btn btn-style">引入</button>
  </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 { useLoginUserStore } from '@/stores/loginUser'
  import { useGoBack } from '@/share/useGoBack.js'
  
  useSetTitle();
  const loginUserStore = useLoginUserStore();
  const { goBack }  = useGoBack();
  
  // 故障类型
  const mutiCategory = ref(null)
  
	// 操作类型
	const operateType = ref(null)
	
  // 数据
  const dataInfo = reactive({
    data: [],//数据
    incidentId: undefined,//事件ID
		solutionnumber:undefined,
		fileData:[] //附件数据
  })
  
  // 下载附件
  function downloadFile(item){
    console.log(666,item)
		// 下载文件资源到本地
		uni.downloadFile({
			url: item.previewUrl,  // 后端返回的线上文件路径
			success: function(res) {
				if (res.statusCode === 200) {
					// 文件到本地
					uni.saveFile({
						tempFilePath: res.tempFilePath, //临时路径
						success: function(data) {
							uni.showToast({
								icon: 'none',
								mask: true,
								title: '保存成功',
								duration: 2000
							})
							//ios手机直接打开文件，手动存储文件到手机，Android手机从根目录创建文件夹，保存文件并改名
							setTimeout(() => {
								//打开文档查看
								uni.openDocument({
									filePath: data.savedFilePath,
									success: function(ress) {
										console.log("成功打开文件")
									},
									fail() {
										console.log("打开文件失败")
									}
								})
							}, 1000)
						}
					})
					console.log('下载成功');
				}
			},
			fail: function(res) {
				console.log(res.errMsg);
			},
			complete: function(res) {
				console.log(res.statusCode);
			},
			progress: function(res) {
				console.log('下载进度' + res.progress);
			}
		});
  }
  
	// 引入
	function importData(){
		let url = null
		if(operateType.value=='malfunction'){ //故障处理
			url = '/pages/handler/handler'
		}else if(operateType.value=='reissue'){ //补单
			url = '/pages/handler/handler'
		}
		uni.navigateTo({
		  url: `${url}?incidentId=${encodeURIComponent(JSON.stringify(dataInfo.incidentId))}
			&handleDescription=${encodeURIComponent(dataInfo.data.content)}&solutionId=${encodeURIComponent(JSON.stringify(dataInfo.data.id))}
			&isSummaryNext=1&type=${encodeURIComponent('rep')}&introduceCount=${encodeURIComponent(dataInfo.data.introduceCount)}`
		})
	}
	
	// 获取附件
	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 || [];
        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 
		operateType.value = option.operateType;
    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: 40rpx;
		width: 93%; 
	}
}
</style>