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

<template>
  <view class="incidentList">
    <view class="head">
      <view class="tab" :class="{active: tab.value === dataInfo.tabActiveId}" v-for="tab in dataInfo.tabs" :key="tab.id" @click="clickTab(tab.value)">
        {{tab.name}}<text v-if="tab.num !== ''">({{tab.num}})</text>
      </view>
   <!--   <view class="filter" @click="filterClick">
        <text class="newicon newicon-shaixuan"></text>
      </view> -->
    </view>
    <view class="body" v-if="dataInfo.list.length">
      <view class="body_item" v-for="data in dataInfo.list" :key="data.id" @click="toIncidentDetail(data)">
        <view class="body_item_head ellipsis-multiline">
          <text :style="priorityStyle(data.priority)">{{data.priority ? data.priority.name + ' ' : ''}}</text>{{data.description}}
        </view>

        <view class="body_item_content">
          <view class="body_item_content_p">
            <text class="name ellipsis" v-if="data.repairIncidentType.value === 'dept'">报修科室：{{data.department?data.department.dept:''}}</text>
            <text class="name ellipsis" v-if="data.repairIncidentType.value === 'public'">报修类型：{{data.repairIncidentType.name}}</text>
            <view class="status" :style="stateStyle(data.state)">{{data.state ? data.state.name : ''}}</view>
          </view>
          <view class="body_item_content_p" v-if="data.place || data.houseNumber">
            <text class="name ellipsis">详细地址：{{data.place ? data.place.building.buildingName : ''}}{{data.place ? data.place.floorName : ''}}<text v-if="data.place && data.place.floorName">层</text> {{data.houseNumber}}</text>
          </view>
         <!-- <view class="body_item_content_p" v-if="data.overtimeRemark">
            <text class="name ellipsis">延期处理：{{data.overtimeRemark}}</text>
          </view> -->
       <!--   <view class="body_item_content_p">
            <text class="name" v-if="data.assigneeName">
              处理人：{{data.assigneeName}}<template v-if="computedSynergetic(data.synergetic)">，{{computedSynergetic(data.synergetic)}}</template>
            </text>
            <text class="name" v-else-if="data.candidateGroupsName">
              处理组：{{data.candidateGroupsName}}<template v-if="computedSynergetic(data.synergetic)">，{{computedSynergetic(data.synergetic)}}</template>
            </text>
            <text class="name" v-else>
              <template v-if="computedSynergetic(data.synergetic)">，{{computedSynergetic(data.synergetic)}}</template>
            </text>
            <view class="icon_all">
              <text class="mic-filled" v-if="data.callID" @click.stop="attachmentClick(data)"><uni-icons type="mic-filled" :size="22" color="#949494"></uni-icons></text>
              <text class="mic-filled" v-if="data.reqRecord" @click.stop="attachmentRequireClick(data)"><uni-icons type="mic-filled" :size="22" color="#949494"></uni-icons></text>
              <text class="image-filled" v-if="data.reqAttachment" @click.stop="attachmentClick(data)"><uni-icons type="image-filled" :size="22" color="#949494"></uni-icons></text>
            </view>
          </view> -->
        </view>

        <view class="body_item_foot">
          <view class="foot_info">
            <view class="name" @click.stop="makePhoneCall(data.contactsInformation)">联系电话：{{data.contactsInformation}}<uni-icons type="phone-filled" class="phone-filled" :size="18" :color="primaryColor"></uni-icons></view>
            <text class="date">{{formatDate(data.acceptDate, 'MM-dd HH:mm')}}</text>
          </view>
          <view class="btns">
            <button @click.stop="createOrder(data, data.id)" type="default" class="primaryButton btn" v-if="data.state.value === 'accept'">生成工单</button>
            <button @click.stop="noProcessing( data, data.id)" type="default" class="primaryButton btn" v-if="data.state.value === 'accept'">不受理</button>
          </view>
        </view>
				
				<div class="sign-style">
					<view class="img-box" v-if="data.repairIncidentType && data.repairIncidentType.value=='dept'">
						<view class="img-url1"></view>
						<view class="img-name">科</view>
					</view>
					<view class="img-box" v-if="data.repairIncidentType && data.repairIncidentType.value=='public'">
						<view class="img-url2"></view>
						<view class="img-name">公</view>
					</view>
				</div>
      </view>
    </view>
    <view class="zanwu" v-else>
      <text class="newicon newicon-zanwu"></text>
    </view>
    <IncidentListFilter v-if="dataInfo.isFilter" @cancelEmit="cancelFilter" @confirmEmit="conformFilter" :evt="dataInfo.evtFilter"></IncidentListFilter>
    <IncidentAttachment v-if="dataInfo.isAttachment" @knowEmit="knowAttachment" :incidentData="dataInfo.incidentData"></IncidentAttachment>
    <RequireAttachment v-if="dataInfo.isRequireAttachment" @knowEmit="knowRequireAttachment" :incidentData="dataInfo.incidentData"></RequireAttachment>
		<!-- 不受理 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" :before-close="true" mode="input" title="不受理"
				placeholder="请输入不受理内容" @close="closeDialog" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
  import IncidentListFilter from '@/components/IncidentListFilter.vue';
  import IncidentAttachment from '@/components/IncidentAttachment.vue';
  import RequireAttachment from '@/components/RequireAttachment.vue';
  import { startOfDay, endOfDay, format, add } from 'date-fns'
  import { ref, reactive, computed } from 'vue'
  import { onLoad, onUnload, onHide, onPullDownRefresh, onReachBottom, onTabItemTap } from '@dcloudio/uni-app'
  import { api_reject, api_getDictionary, api_incident, api_incident_count, api_incidentTask } from "@/http/api.js"
  import { filterFormatDate } from '@/filters/filterFormatDate.js'
  import { computedPriorityStyle } from '@/filters/computedPriorityStyle.js'
  import { computedStateStyle } from '@/filters/computedStateStyle.js'
  import { computedCurrentLogOverTime } from '@/filters/computedCurrentLogOverTime.js'
  import { defaultColor } from '@/static/js/theme.js'
  import { useSetTitle } from '@/share/useSetTitle.js'
  import { useMakePhoneCall } from '@/share/useMakePhoneCall.js'
  import { useSetTabbar } from '@/share/useSetTabbar.js'
  import { useLoginUserStore } from '@/stores/loginUser'
  import { useIncidentNumStore } from '@/stores/incidentNum'
  import { useIncidentListSearchStore } from '@/stores/incidentListSearch'
	import { useHandlerStore } from '@/stores/handler'
	import { useIncidentBuildStore } from '@/stores/incidentBuild'
	
  useSetTitle();
  const loginUserStore = useLoginUserStore();
  const incidentNumStore = useIncidentNumStore();
  const incidentListSearchStore = useIncidentListSearchStore();
  const { formatDate }  = filterFormatDate();
  const { priorityStyle }  = computedPriorityStyle();
  const { stateStyle }  = computedStateStyle();
  const { currentLogOverTime }  = computedCurrentLogOverTime();
  const { makePhoneCall }  = useMakePhoneCall();
  const { setTabbar }  = useSetTabbar();
	const handlerStore = useHandlerStore();
	const incidentBuildStore = useIncidentBuildStore();
		
  // 主题颜色
  const primaryColor = ref(defaultColor)

  const assignFlag = ref(false);//指派权限
  const qiangdan = ref(false);//接单权限
	const showDept = ref(false);//跨科权限
  // 判断是否显示接单按钮
  const computedReceive = computed(() => (data) => {
    let inUser = data.handlingPersonnelUser && data.handlingPersonnelUser.id == loginUserStore.loginUser.user.id;
		let inUser2 = data.currentLog.workerId == loginUserStore.loginUser.user.id;
		let inGroup = false;
		if(loginUserStore.loginUser.user&&loginUserStore.loginUser.user.group){
			loginUserStore.loginUser.user.group.forEach(item => {
			    if(data.currentLog){
			        if (item.id == data.currentLog.groupId) {
			            inGroup = true;
			        }
			    }
			})
		}

    return data.state.value === 'pending' && (inUser2 || inGroup) && qiangdan.value;
  })

  // 转换协同人
  const computedSynergetic = computed(() => (synergetic) => {
    return (synergetic && synergetic.length) ? synergetic.map(v => v.name).join('，') : ''
  })

  // 数据
  const dataInfo = reactive({
    tabs: [
			{id: 0, name: '全部', value: 'accept,reject', num: ''},
			{id: 1, name: '待受理', value: 'accept', num: ''},
			{id: 2, name: '不受理', value: 'reject', num: ''},
		],
    tabActiveId: 'accept,reject',//当前选择的tab
    list: [],//工单列表
    idx: 0,//页码
    hasMore: true,//是否有更多数据
    isFilter: false,//筛选框开关
    isAttachment: false,//图片和通话录音开关
    isRequireAttachment: false,//报修录音开关
    incidentId: undefined,
    evtFilter: {
      hospital: {},
      selected: 'todoingAll',
      area: {id: 0, area: '全部'},
      category: {id: 0, category: '全部'},
      acceptDate: [],
			dept: {text: '全部', value: 0},
    },//筛选框数据
		itemData: null
  })
	
	const inputDialog = ref(null);//指派权限
	
  // 工单详情
  function toIncidentDetail(data){
    uni.navigateTo({
      url: `/pages/addrRepairsDetail/addrRepairsDetail?incidentId=${data.id}`
    })
  }

  // 获取tab选项
  function getTabs(){
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
    api_getDictionary({
      "type": "list",
      "key": "incident_status"
    }).then(res => {
      uni.hideLoading();
      let incidentStatusList = res || [];
      let pending = incidentStatusList.find(v => v.value === 'pending');
      let handler = incidentStatusList.find(v => v.value === 'handler');
      dataInfo.tabs = [{id: 0, name: '全部', value: 'all', num: ''}];
      pending && dataInfo.tabs.push({...pending, ...{num: ''}});
      handler && dataInfo.tabs.push({...handler, ...{num: ''}});
    })
  }

  // 点击tab
  function clickTab(value){
    dataInfo.tabActiveId = value;
    getList(0);
  }

  // 点击筛选
  function filterClick(){
    dataInfo.isFilter = true;
  }

  // 确认筛选
  function conformFilter(evtFilter){
    dataInfo.evtFilter = evtFilter;
    dataInfo.isFilter = false;
    getList(0);
  }

  // 关闭筛选
  function cancelFilter(){
    dataInfo.isFilter = false;
  }

  // 点击图片和录音
  function attachmentClick(incidentData){
    dataInfo.incidentData = incidentData;
    dataInfo.isAttachment = true;
  }

  // 返回图片和录音
  function knowAttachment(){
    dataInfo.isAttachment = false;
  }

  // 点击报修录音
  function attachmentRequireClick(incidentData){
    dataInfo.incidentData = incidentData;
    dataInfo.isRequireAttachment = true;
  }

  // 返回报修录音
  function knowRequireAttachment(){
    dataInfo.isRequireAttachment = false;
  }

  // 生成工单
  function createOrder(data, incidentId){
		let incidentData = {
			branch: data.hosId,
			assetDTO: data.assetDTO || undefined,
			assetId: data.assetDTO ? data.assetDTO.id : undefined,
			department: data.department,
			requester: data.requester || undefined,
		  houseNumber: data.houseNumber,
			place: data.place || undefined,
		  source: data.source.id,
		  description: data.description,
		  contacts: data.contacts,
		  contactsInformation: data.contactsInformation,
			AttachmentId: data.id,
			reqAttachment: data.reqAttachment || false,
			repairIncidentType: data.repairIncidentType,
			id: data.id,
			state: data.state,
			entranceType: 'create',
			incidentsign: data.incidentsign,
			fromWx: true,
			// repairIncidentType: data.repairIncidentType.value
		}
		incidentBuildStore.setIncidentBuildData(incidentData, 'buildIncident');
		uni.navigateTo({
		  url: `/pages/buildIncident/buildIncident?type=inspection`
		})
  }
	
	// 不处理
	function noProcessing(data, incidentId){
		dataInfo.itemData = data
		inputDialog.value.open()
	}
	
	function closeDialog(){
		inputDialog.value.close()
	}
	// 确认不受理
	function dialogInputConfirm(e){
		if(e==''){
			uni.showToast({
				icon: 'none',
			  title: '请输入不受理内容',
			});
			return
		}
		uni.showLoading({
		  title: "加载中",
		  mask: true,
		});
		let postData = {
			incident:{
				rejectRemark: e,
				...dataInfo.itemData
			}
		}
		api_reject(postData).then(res => {
      uni.hideLoading();
      if(res.state == 200){
        getList(0);
				inputDialog.value.close()
        uni.showToast({
        	icon: 'none',
          title: '操作成功',
        });
      }else{
        uni.showToast({
          icon: 'none',
          title: res.msg || '请求数据失败！'
        });
      }
    })
	}
	
  // 接单调用方案
  function receiveFn(incidentData){
		let placeId = null
		if(incidentData.place){
			placeId = JSON.parse(JSON.stringify(incidentData.place.id))
		}
    uni.showLoading({
      title: "加载中",
      mask: true,
    });

    let postData = {
      incident: incidentData,
    }
		if(placeId){
			postData.incident.place = {}
			postData.incident.place.id = placeId
		}
    api_incidentTask('receive', postData).then(res => {
      uni.hideLoading();
      if(res.state == 200){
        getList(0);
        uni.showToast({
        	icon: 'none',
          title: '接单成功',
        });
      }else{
        uni.showToast({
          icon: 'none',
          title: res.msg || '请求数据失败！'
        });
      }
    })
  }
  // 接单按钮
  function receive(incidentData){
    uni.showModal({
      title: '提示',
      content: `您确认要接单吗？`,
      confirmColor: defaultColor,
      confirmText: '确认',
      success: function(res) {
        if (res.confirm) {
          receiveFn(incidentData);
        }
      }
    });
  }

  // 获取列表信息
  function getList(idx){
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
    dataInfo.idx = idx === undefined ? dataInfo.idx : idx;
    if(dataInfo.idx === 0){
      dataInfo.list = [];
    }
    let postData = {
        "idx": dataInfo.idx,
        "sum": 10,
        "incident": {
            "state": {
							value: dataInfo.tabActiveId || undefined,
						}
        }
    }
    api_incident(postData).then(res => {
      uni.hideLoading();
      uni.stopPullDownRefresh();
      if(res.status == 200){
        let list = res.list || [];
        if(list.length){
          dataInfo.hasMore = true;
          dataInfo.list = dataInfo.idx === 0 ? list : dataInfo.list.concat(list);
        }else{
          dataInfo.hasMore = false;
        }
      }else{
        uni.showToast({
          icon: 'none',
          title: res.msg || '请求数据失败！'
        });
      }
    })

    getCount(postData.incident);
  }

  // 获取列表数量
  function getCount(incident = {}){
    let postData = {
      wxCount: 'true',
      incidentList: [],
    }
    dataInfo.tabs.forEach(v => {
        postData.incidentList = [
					{
						state:{
							value:'accept,reject'
						},
						queryTask: 'wxCount',
					},
					{
						state:{
							value:'accept'
						},
						queryTask: 'wxCount',
					},
					{
						state:{
							value:'reject'
						},
						queryTask: 'wxCount',
					}
				]
    })

    api_incident_count(postData).then(res => {
      if(res.state == 200){
        let myData = res.data || [];
        dataInfo.tabs.forEach((v, i) => {
            v.num = myData[i];
        })
      }else{
        uni.showToast({
          icon: 'none',
          title: res.msg || '请求数据失败！'
        });
      }
    })
  }

  // 初始化
  function onLoadFn(){
    getTabs();
  }
  onLoad((option) => {
    getList(0);
  })

	onUnload(() => {
    dataInfo.isFilter = false;
  })

	onHide(() => {
	  dataInfo.isFilter = false;
	})

  onTabItemTap(e => {
    // onLoadFn();
  })

  onPullDownRefresh(() => {
		getList(0);
  })

  onReachBottom(() => {
    dataInfo.idx += 1;
    if (dataInfo.hasMore) {
      getList(); // 当触底时加载更多数据
    }
  })
</script>

<style lang="scss" scoped>
page{
  height: calc(100vh - var(--window-bottom));
}
.incidentList{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .head{
    height: 88rpx;
    display: flex;
    position: fixed;
    z-index: 99;
    width: 100%;
    background-color: #fff;
    font-size: 30rpx;
    .tab{
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: 4rpx solid transparent;
      &.active{
        color: $uni-primary;
        border-color: $uni-primary;
      }
    }
    .filter{
      width: 84rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      .newicon-shaixuan{
        font-size: 36rpx;
        color: #2C2C2C;
      }
    }
  }
  .body{
    margin-bottom: var(--window-bottom);
    margin-top: 88rpx;
    border-top: 6rpx solid #EBEBEB;
    .body_item{
			background: #fff;
      border-bottom: 8rpx solid #EBEBEB;
			position: relative;
			.sign-style{
				position: absolute;
				right: 0;
				top: 0rpx;
				.img-box{
					position: relative;
					.img-url1{
						width: 70rpx;
						height: 70rpx;
						background-image: url('../../static/img/jiaobiao1.png');
					}
					.img-url2{
						width: 70rpx;
						height: 70rpx;
						background-image: url('../../static/img/jiaobiao2.png');
					}
					.img-name{
						position: absolute;
						right: 8rpx;
						top: 0;
						color: #fff;
						font-size: 24rpx;
					}
				}
			}
      .body_item_head{
        word-break: break-all;
        text-align: justify;
        text-align: left;
        padding: 24rpx;
        font-size: 30rpx;
      }
      .body_item_content{
        border-top: 1rpx solid #D8D8D8;
        padding: 24rpx 24rpx 24rpx 48rpx;
        .body_item_content_p{
          color: #6A6A6A;
          font-size: 26rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 24rpx;
          &:last-of-type{
            margin-bottom: 0;
          }
          .name{
            flex: 1;
          }
          .status{
            padding: 4rpx 10rpx;
            border-radius: 20rpx;
            background-color: #DBE8FE;
            font-size: 22rpx;
            color: #006CF9;
          }
          .icon_all{
            .mic-filled,
            .image-filled
            {
              margin-left: 16rpx;
            }
          }
        }
      }
      .body_item_foot{
        border-top: 1rpx solid #D8D8D8;
        font-size: 26rpx;
        padding: 24rpx;
        .foot_info{
          display: flex;
          justify-content: space-between;
          align-items: center;
          .phone-filled{
            margin-left: 5rpx;
          }
        }
      }
    }
  }
  .zanwu{
    box-sizing: border-box;
    margin-bottom: var(--window-bottom);
    margin-top: 88rpx;
    border-top: 6rpx solid #EBEBEB;
    height: calc(100vh - var(--window-bottom) - 88rpx);
    display: flex;
    justify-content: center;
    background-color: #F7F7F7;
    .newicon-zanwu{
      font-size: 256rpx;
      color: #D6D6D6;
      margin-top: 140rpx;
    }
  }
}
</style>