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

<template>
  <view class="categoryOne">
		<view class="filter" @click="filterClick" v-if="entrance == 'view'">
		  <text class="newicon newicon-shaixuan"></text>
		</view>
    <view class="body" v-if="dataInfo.list.length" :class="entrance == 'view' ? 'mar-t40' : ''">
      <view class="body_item" v-for="data in dataInfo.list" :key="data.id">
				<view @click="toCategoryTwo(data)">
					<view class="title">{{data.title}}</view>
					<view class="content">
						<view v-html="data.content"></view>
					</view>
					<view class="sign">
						<view>引入次数：{{data.introduceCount || 0}}</view>
						<view>{{formatDate(data.createTime, 'yyyy-MM-dd HH:mm:ss')}}</view>
					</view>
				</view>
				<view class="btn-style">
					<button v-if="entrance!='view'" @click.stop="importData(data)" type="default" class="primaryButton btn">引入</button>
				</view>
      </view>
			<view class="back-style" @click="goBack">
				<text class="newicon newicon-fanhui1"></text>
			</view>
    </view>
    <view class="zanwu" v-else>
      <text class="newicon newicon-zanwu"></text>
    </view>
		<view class="back-style" @click="goBack" v-if="entrance == 'view'">
			<text class="newicon newicon-fanhui1"></text>
		</view>
		<view v-if="dataInfo.list.length==0 && entrance!='view'" class="foot_common_btns">
			<button @click="goBack" type="default" class="primaryButton btn">返回</button>
		</view>
		<repositoryFilter v-if="isFilter" @cancelEmit="cancelFilter" 
		@confirmEmit="conformFilter" :evt="evtFilter" :viewType="entranceType"></repositoryFilter>
  </view>
</template>

<script setup>
  import { ref, reactive} from 'vue'
  import { onLoad, onHide, onReachBottom } from '@dcloudio/uni-app'
  import { api_getSolution,api_getDictionary } from "@/http/api.js"
  import { useSetTitle } from '@/share/useSetTitle.js'
  import { useGoBack } from '@/share/useGoBack.js'
  import { useHandlerStore } from '@/stores/handler'
	import repositoryFilter from '@/components/repositoryFilter.vue';
	import { useLoginUserStore } from '@/stores/loginUser'
	import { filterFormatDate } from '@/filters/filterFormatDate.js'
	import { repositoryListSearchStore } from '@/stores/repositorySearch'
	
  useSetTitle();
	const { formatDate }  = filterFormatDate();
	const loginUserStore = useLoginUserStore();
	const handlerStore = useHandlerStore();
	const repositorySearchStore = repositoryListSearchStore();
  const { goBack }  = useGoBack();
  
	// 操作类型
	// const operateType = ref(null)
	
	// 关联故障分类的知识库数量
	const introduceCount = ref(0)
	
	// 入口类型
	const entrance = ref(null)
	
	const entranceType = ref(null)
	
	// 筛选数据
	const evtFilter = ref({})
	
	// 筛选状态
	const isFilter = ref(null)
	
	// 字典
	const dicData = ref(null)
	
  // 数据
  const dataInfo = reactive({
    list: [],//工单列表
    idx: 0,//页码
    hasMore: true,//是否有更多数据
    incidentId: undefined,//事件ID
  })
  
  // 跳转知识库详情
  function toCategoryTwo(data){
    uni.navigateTo({
      url: `/pages/repositoryDetails/repositoryDetails?incidentId=${dataInfo.incidentId}
			&solutionnumber=${data.solutionNumber}&editType=${entrance.value}&entranceType=${entranceType.value}`
    })
  }
	
  // 引入
	function importData(data){
		let url = null
		let type = handlerStore.handler.data.operateType
		let storeInfo = handlerStore.handler.data
		storeInfo.introduceCount = introduceCount.value
		storeInfo.handleDescription = '引用知识库解决，知识库编号' + data.solutionNumber
		storeInfo.solutionId = 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 filterClick(){
	  isFilter.value = true;
	}
	
	// 确认筛选
	function conformFilter(evtFilter){
	  evtFilter.value = evtFilter;
	  isFilter.value = false;
	  getList(evtFilter);
	}
	
	// 关闭筛选
	function cancelFilter(){
	  isFilter.value = false;
	}
	
  // 获取列表信息
  function getList(data){
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
    
    if(dataInfo.idx === 0){
      dataInfo.list = [];
    }
		let categoryId = entrance.value=='view' ? data && data.category : handlerStore.handler.data.category.id
    let postData = {
      idx: 0,
      sum: 9999,
      solution: {
				deleteFlag:0,
				hosId: loginUserStore.loginUser.user.currentHospital.id,
				// category:{
				// 	id:'',
				// },
				categoryId:null,
				title:'',
				status:{id:dicData.value.id},
      }
    }
		if(entranceType.value=='repairs'){
			delete postData.solution.hosId
		}
    if(typeof(categoryId)=='number' || typeof(categoryId)=='string'){
			postData.solution.categoryId = categoryId
		}else{
			delete postData.solution.categoryId
		}
		if(data && data.title){
			postData.solution.title = data.title
		}else{
			delete postData.solution.title
		}
		if(loginUserStore.loginUser.user.duty){
		  postData.solution.dutyId = loginUserStore.loginUser.user.duty.id;
		}else if(loginUserStore.loginUser.user.branch){
		  postData.solution.branch = loginUserStore.loginUser.user.branch.id;
		}
    api_getSolution(postData).then(res => {
      uni.hideLoading();
      if(res.status == 200){
        let list = res.list || [];
				introduceCount.value = res.totalNum
				dataInfo.list = list
				if(entranceType.value=='repairs'){
					dataInfo.list = list.filter(i=>i.repairVisible==1)
				}else{
					dataInfo.list = list
				}
      }else{
        uni.showToast({
          icon: 'none',
          title: res.msg || '请求数据失败！'
        });
      }
    })
  }
  
	// 获取字典
	function getDic(){
		let postData = {
		  "key": 'solution_status',
		  "type": "list",
		};
		api_getDictionary(postData).then(res => {
		  dicData.value = res.find(v => v.value == '3');
		  getList();
		})
	}
	
  onLoad((option) => {
    dataInfo.incidentId = option.incidentId;
		entrance.value = option.type
		entranceType.value = option.entranceType
    getDic()
  })
  
	onHide(_=>{
		repositorySearchStore.clearRepositoryListSearchData()
	})
	
</script>

<style lang="scss" scoped>
page{
	height: calc(100vh - var(--window-bottom));
}
.categoryOne{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
	.filter{
		width: 100%;
	  display: flex;
	  justify-content: flex-end;
		align-items: center;
		position: fixed;
		height: 80rpx;
		background: #fff;
		border-bottom: 0.25rem solid #DEDEDE;
	  .newicon-shaixuan{
			margin-right: 40rpx;
	    font-size: 36rpx;
	    color: #2C2C2C;
	  }
	}
	.mar-t40{
		margin-top: 80rpx;
	}
  .head{
    height: 88rpx;
    display: flex;
    align-items: center;
    padding: 0 24rpx;
    position: fixed;
    z-index: 99;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    font-size: 26rpx;
    color: $uni-primary;
  }
  .body{
    font-size: 30rpx;
		margin-bottom: var(--window-bottom);
		// padding-bottom: 140rpx;
		// padding-bottom: calc(0rpx + env(safe-area-inset-bottom));
    .body_item{
      border-bottom: 8rpx solid #DEDEDE;
			.title{
				font-weight: 600;
				padding: 24rpx;
				border-bottom: 1rpx solid #DEDEDE;
			}
			.content{
				color: #6A6A6A;
				font-size: 24rpx;
				padding: 24rpx;
				height: 120rpx;
				overflow: hidden;
				border-bottom: 1rpx solid #DEDEDE;
				view{
					display: -webkit-box;
					overflow: hidden;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					text-overflow: ellipsis;
					white-space: initial;
				}
			}
			.sign{
				display: flex;
				justify-content: space-between;
				padding: 24rpx 24rpx 0 24rpx;
				font-size: 26rpx;
			}
			.btn-style{
				padding: 24rpx;
			}
    }
  }
  .zanwu{
    margin-bottom: 140rpx;
    margin-top: 88rpx;
    display: flex;
    justify-content: center;
    .newicon-zanwu{
      font-size: 256rpx;
      color: #D6D6D6;
      margin-top: 140rpx;
    }
  }
  .foot_common_btns{
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #fff;
  }
	.back-style{
		background: #D6D6D6;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		right: 30rpx;
		bottom: 30rpx;
		text{
			font-size: 50rpx;
			color: #fff;
		}
	}
}
</style>