itsm-wx-handle/pages/repair/rapidRepNext.vue

<template>
  <view class="handler">
    <view class="head">
      <view class="tab" :class="{active: tab.value === dataInfo.tabActiveValue}" 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>
		<view class="body view-body" :class="{ page_padding: !(dataInfo.tabActiveValue === 'doing' && isInSummaryOrder), bg: (dataInfo.tabActiveValue === 'doing' && isInSummaryOrder) }">
      <!-- 科内报修 -->
      <template v-if="dataInfo.tabActiveValue === 'doing'">
				<view class="form_item" v-if="isRepair.valueconfig==1">
				  <view class="title select"><text class="required newicon newicon-bitian"></text>院区：</view>
					<uni-data-picker class="value" placeholder="请选择院区"
						v-model="dataInfo.branch" :localdata="branchData"
						:clear-icon="false" :class="{formRed: isSubmit && !dataInfo.branch}">
					</uni-data-picker>
				</view>
        <view class="form_item">
          <view class="title select"><text class="required newicon newicon-bitian"></text>报修科室：</view>
        	<uni-data-picker class="value" placeholder="请选择报修科室"
        		v-model="dataInfo.department" :localdata="dataInfo.repairTypeList"
        		:clear-icon="false" :class="{formRed: isSubmit && !dataInfo.department}">
        	</uni-data-picker>
        </view>
				<view class="candidate" v-if="candidateData.commonDeptDTO.length">
					<view class="candidate-item" v-for="item in candidateData.commonDeptDTO" :key="item" @click="itemCandidate(item)">{{item.dept}}</view>
				</view>
				
				<view class="form_item column" v-if="isRepair.valueconfig==1">
					<view class="title"><text class="required newicon newicon-bitian"></text>详细地址：</view>
					<uni-easyinput class="value" type="textarea" v-model="dataInfo.address" placeholder="请输入详细地址"  :class="{formRed: isSubmit && !dataInfo.address }" />
				</view>
				<view class="candidate">
					<view class="candidate-item" v-for="item in addresData" :key="item" @click="itemAddres(item)">{{item.name}}</view>
				</view>
				
				<view class="form_item" :class="{formRed: isSubmit && !dataInfo.contacts}">
					<view class="title select"><text class="required newicon newicon-bitian"></text>联系人：</view>
					<input class="item-input" placeholder="请输入联系人" v-model="dataInfo.contacts" />
				</view>
				
				<view class="form_item" :class="{formRed: isSubmit && !dataInfo.contactsInformation}">
					<view class="title select"><text class="required newicon newicon-bitian"></text>联系电话：</view>
					<input class="item-input" placeholder="请输入联系电话" v-model="dataInfo.contactsInformation"/>
				</view>
      </template>

      <!-- 公共报修 -->
      <template v-if="dataInfo.tabActiveValue === 'overtime'">
       <view class="form_item" v-if="isRepair.valueconfig==1">
         <view class="title select"><text class="required newicon newicon-bitian"></text>楼栋：</view>
       	<uni-data-picker class="value" placeholder="请选择楼栋" @change="areaChange"
       		v-model="dataInfo.areaId" :localdata="dataInfo.buildingTypeList"
       		:clear-icon="false" :class="{formRed: isSubmit && !dataInfo.areaId}">
       	</uni-data-picker>
       </view>
       
			 <view class="form_item" v-if="isRepair.valueconfig==1">
			   <view class="title select"><text class="required newicon newicon-bitian"></text>楼层：</view>
			 	<uni-data-picker class="value" placeholder="请选择楼层"
			 		v-model="dataInfo.placeId" :localdata="dataInfo.placeTypeList"
			 		:clear-icon="false" :class="{formRed: isSubmit && !dataInfo.placeId}">
			 	</uni-data-picker>
			 </view>
			 
       <view class="form_item column" v-if="isRepair.valueconfig==1">
       	<view class="title"><text class="required newicon newicon-bitian"></text>详细地址：</view>
       	<uni-easyinput class="value" type="textarea" v-model="dataInfo.address" placeholder="请输入详细地址" :class="{formRed: isSubmit && !dataInfo.address}" />
       </view>
       
       <view class="form_item" :class="{formRed: isSubmit && !dataInfo.contacts}">
       	<view class="title select"><text class="required newicon newicon-bitian"></text>联系人：</view>
       	<input class="item-input value" focus placeholder="请输入联系人" v-model="dataInfo.contacts"/>
       </view>
       
       <view class="form_item" :class="{formRed: isSubmit && !dataInfo.contactsInformation}">
       	<view class="title select"><text class="required newicon newicon-bitian"></text>联系电话：</view>
       	<input class="item-input value" focus placeholder="请输入联系电话" v-model="dataInfo.contactsInformation"/>
       </view>
      </template>
		</view>
    <view class="foot_common_btns">
      <button @click="goBackOrToList" type="default" class="primaryButton btn">上一步</button>
      <button @click="submit" type="default" class="primaryButton btn">提交</button>
    </view>
    <NumberModal v-if="dataInfo.isNumber" @cancelEmit="cancelNumber" @confirmEmit="conformNumber" @removeEmit="removeNumber" :selectData="dataInfo.selectData" :selectType="dataInfo.selectType" :evtNumber="dataInfo.evtNumber" showRemove></NumberModal>
		
	</view>
</template>

<script setup>
  import { ref, reactive, computed } from 'vue'
  import NumberModal from '@/components/NumberModal.vue';
  import { onLoad } from '@dcloudio/uni-app'
  import { generateNumberArray } from '@/utils/index.js'
  import { api_getDictionary, api_sj,api_request, api_place, api_getSolution, api_area, api_user, api_incidentTask, api_branch, api_dutyDepartment, api_department, api_querySummaryDoc, api_addSummaryDoc } from "@/http/api.js"
  import { defaultColor } from '@/static/js/theme.js'
  import { useSetTitle } from '@/share/useSetTitle.js'
  import { useMakePhoneCall } from '@/share/useMakePhoneCall.js'
  import { useUploadFile } from '@/share/useUploadFile.js'
  import { useGoBack } from '@/share/useGoBack.js'
  import { useLoginUserStore } from '@/stores/loginUser'
  import { useHandlerStore } from '@/stores/handler'
  
  useSetTitle();
  const loginUserStore = useLoginUserStore();
  const handlerStore = useHandlerStore();
  const { makePhoneCall }  = useMakePhoneCall();
  const { uploadFile }  = useUploadFile();
  const { goBack }  = useGoBack();
  
  // 主题颜色
  const primaryColor = ref(defaultColor)
  
	// 备用机选项
	const machineData = ref([
		{
			text:'是',
			value:1
		},
		{
			text:'否',
			value:0
		},
	])
	
	const isDept = ref({})
	const isRepair = ref({})
	const branchData = ref([])
	const candidateData = ref(loginUserStore.loginUser.user)
	
	const repairIncident = ref(null)
	
	const addresData = ref([
		{name:'护士站'},
		{name:'卫生间'},
		{name:'更衣室'},
		{name:'治疗室'}
	])
	
  // 数据
  const dataInfo = reactive({
    tabs: [
      {id: 5, name: '科内报修', value: 'doing', num: ''},
      {id: 6, name: '公共报修', value: 'overtime', num: ''},
    ],
    tabActiveValue: 'doing',//当前选择的tab
    incidentId: undefined,//事件ID
    incidentData: {
			repairIncidentType:{
				id:''
			},
			department:{
				id:''
			}
		},//事件对象
		repairTypeList:[],//科室数据
		buildingTypeList:[],//楼栋数据
		placeTypeList:[],//楼层数据
    department:'',//报修科室
		address:'',//详细地址
		contacts:'',//联系人
		contactsInformation:'',//手机
		areaId:'',//楼栋
		placeId:'',//楼层
		branch:'', //院区
  })
  
	// 故障处理用是否提供备用机
	const newProvideBackupMachine = ref(0)
	
	// 知识库id
	const solutionId = ref(null)
	
  // 是否提交
  const isSubmit = ref(false)
  
  // 处理图片
  const handlerImgRef = ref(null)
  
  // 是否进入汇总单
  const isInSummaryOrder = computed(() => {
    return dataInfo.tabActiveValue === 'doing' && dataInfo.incidentData.duty && dataInfo.incidentData.duty.addSummary == 1 && (dataInfo.incidentData.handlingPersonnelUser.id == loginUserStore.loginUser.user.id);
  })
  
  // 上一步或者返回列表
  function goBackOrToList(){
		uni.setStorageSync('rapidRepNext',JSON.stringify(dataInfo))
    goBack();
  }
  
  // 重置
  function reset(){
		// dataInfo.department = '',//报修科室
		dataInfo.address = '',//详细地址
		// dataInfo.contacts = '',//联系人
		// dataInfo.contactsInformation = ''//手机
		dataInfo.areaId = ''//楼栋
		dataInfo.placeId = '' //院区
		dataInfo.placeTypeList = []
  }
  
  // 初始化表单
  function initForm(){
    if(dataInfo.tabActiveValue === 'doing'){
      getRepairTypes()
    }else if(dataInfo.tabActiveValue === 'overtime'){
			getbuildingList()
    }
  }
  
	function itemCandidate(item){
		dataInfo.department = item.id
	}
	
	function itemAddres(item){
		dataInfo.address = item.name
	}
	
  // 点击tab
  function clickTab(tabValue){
    if(dataInfo.tabActiveValue == tabValue){
      return;
    }
    dataInfo.tabActiveValue = tabValue;
    isSubmit.value = false;
    reset();
    dataInfo.category = dataInfo.incidentData.category || {};
    dataInfo.synergetic = dataInfo.incidentData.synergetic || [];
		newProvideBackupMachine.value = dataInfo.incidentData.provideBackupMachine
    initForm();
  }
  
  // 获取事件详情
  function getIncidentDetail(){
    if(uni.getStorageSync('rapidRepNext')){
    	let data = JSON.parse(uni.getStorageSync('rapidRepNext'))
    	if(data){
    		dataInfo.department = data.department//报修科室
    		dataInfo.address = data.address//详细地址
    		dataInfo.contacts = data.contacts//联系人
    		dataInfo.contactsInformation = data.contactsInformation//手机
				dataInfo.branch = data.branch//院区
    		dataInfo.areaId = data.areaId//楼栋
    	}
    }
		if(uni.getStorageSync('repairData')){
			let data = JSON.parse(uni.getStorageSync('repairData'))
			if(data){
				dataInfo.description = data.description
				dataInfo.handlerImgList = data.handlerImgList
				dataInfo.serverId = data.serverId
				dataInfo.assetId = data.assetId
			}
		}
		
		let data = JSON.parse(uni.getStorageSync('sysData'))
		isDept.value = data.find(i=>i.keyconfig=='deptRepair')
		isRepair.value = data.find(i=>i.keyconfig=='publicRepair')
		
		let user = loginUserStore.loginUser.user
		if(user){
			dataInfo.branch = user.branch.id
			dataInfo.contacts = user.name
			dataInfo.contactsInformation = user.phone
			dataInfo.department = user.dept.id
		}
		
		let postData = {
		  "key": 'repair_incident_type',
		  "type": "list",
		};
		api_getDictionary(postData).then(res => {
		  res = res || [];
		  repairIncident.value = res
		})
		getBranch()
  }
  
	// 获取院区列表
	function getBranch(){
		let postData = {
			branch:'',
			idx:0,
			sum:9999
		}
		if(loginUserStore.loginUser.user.duty){
		  postData.branch = loginUserStore.loginUser.user.duty.id;
		}else if(loginUserStore.loginUser.user.branch){
		  postData.branch = loginUserStore.loginUser.user.branch.id;
		}
		api_branch(postData).then(res => {
		  uni.hideLoading();
		  res = res.list || [];
		  branchData.value = res.map(v => ({
		    text: v.hosName,
		    value: v.id,
		  }));
		})
	}
	
  // 获取报修科室列表
  function getRepairTypes(){
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
    let postData = {
			department: {
			  branch: '',
			},
			idx:0,
			sum:9999
		}
		if(loginUserStore.loginUser.user.duty){
		  postData.department.branch = loginUserStore.loginUser.user.duty.id;
		}else if(loginUserStore.loginUser.user.branch){
		  postData.department.branch = loginUserStore.loginUser.user.branch.id;
		}
    api_department(postData).then(res => {
      uni.hideLoading();
      res = res.list || [];
      dataInfo.repairTypeList = res.map(v => ({
        text: v.dept,
        value: v.id,
      }));
    })
  }
  
  // 获取楼栋
  function getbuildingList(){
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
    let postData = {
      idx: 0,
      sum: 9999,
      area: {
        branch: '',
      }
    };
		if(loginUserStore.loginUser.user.duty){
		  postData.area.branch = loginUserStore.loginUser.user.duty.id;
		}else if(loginUserStore.loginUser.user.branch){
		  postData.area.branch = loginUserStore.loginUser.user.branch.id;
		}
    api_area(postData).then(res => {
			// getPlaceList()
			 uni.hideLoading();
      res = res.list || [];
      dataInfo.buildingTypeList = res.map(v => ({
        text: v.area,
        value: v.id
      }));
    })
  }
  
	function areaChange(e){
		getPlaceList(dataInfo.areaId)
	}
	
	// 获取楼层
	function getPlaceList(e){
	  let postData = {
	    idx: 0,
	    sum: 9999,
			place: {
			  area: {id: e },
			}
	  };
		// if(loginUserStore.loginUser.user.duty){
		//   postData.area.branch = loginUserStore.loginUser.user.duty.id;
		// }else if(loginUserStore.loginUser.user.branch){
		//   postData.area.branch = loginUserStore.loginUser.user.branch.id;
		// }
	  api_place(postData).then(res => {
	    res = res.list || [];
	    dataInfo.placeTypeList = res.map(v => ({
	      text: v.place,
	      value: v.id
	    }));
	  })
	}
	
  // 提交
  function submit(){
		isSubmit.value = true;
    submitHandler()
  }
  
  // 处理提交事件
  function handlerOrder(){
		if(dataInfo.tabActiveValue === 'doing'){
			let data = repairIncident.value.find(i=>i.value=='dept')
			dataInfo.incidentData.repairIncidentType.id = data.id
		}else if(dataInfo.tabActiveValue === 'overtime'){
			let data = repairIncident.value.find(i=>i.value=='public')
			dataInfo.incidentData.repairIncidentType.id = data.id
		}
		dataInfo.incidentData.department.id = dataInfo.department
    let postData = {
      incident: dataInfo.incidentData,
			serverId: ''
    }
    postData.incident.description = dataInfo.description;
		if(dataInfo.serverId){
			postData.serverId = dataInfo.serverId;
		}else{
			delete postData.serverId 
		}
    postData.incident.assetId = dataInfo.assetId;
		postData.incident.address = dataInfo.address;
		postData.incident.contacts = dataInfo.contacts;
		postData.incident.contactsInformation = dataInfo.contactsInformation;
		postData.incident.branch = dataInfo.branch;
		postData.incident.areaId = dataInfo.areaId; //areaId:楼栋   
    postData.incident.placeId = dataInfo.placeId;//placeId:楼层
		api_getDictionary({
			key: "incident_source",
			type: "list"
		}).then(res1=>{
				let incidentSourceList = res1 || [];
			  let im = incidentSourceList.find(v => v.value === 'im');
				api_sj().then(res2=>{
					postData.incident.incidentsign = res2.data;
					postData.incident.source = im;
					postData.incident.fromWx = true;
					postData.incident.requester = loginUserStore.loginUser.user;
					postData.incident.acceptUser = loginUserStore.loginUser.user;
					postData.incident.deleteFlag = 0
					api_request(postData).then(res=>{
						if(res.state == 200){
							dataInfo.incidentId = res.data.id
							let handlerOrder$ = res.data;
							let requestList = [handlerOrder$];
							if(dataInfo.handlerImgList.length){ // 有图片
								dataInfo.handlerImgList.forEach(v => {
								  let handlerOrderImg$ = handlerOrderImg(v);
								  requestList.push(handlerOrderImg$);
								})
								 console.log(9999,requestList);
								Promise.all(requestList).then(resList => {
								  uni.hideLoading();
								  console.log(9999,resList);
								  // if(resList[0].state == 200){
								    uni.showToast({
								    	icon: 'none',
								      title: '报修成功',
								      mask: true,
								    });
										setTimeout(() => {
											uni.setStorageSync('rapidRepNext','')
											uni.setStorageSync('repairData','')
										  uni.reLaunch({
										    url: '/pages/repair/home',
										  })
										}, 1500)
								  // }else{
								  //   uni.showToast({
								  //     icon: 'none',
								  //     title: resList[0].msg || '请求数据失败！'
								  //   });
								  // }
								})
							}else{
								uni.showToast({
									icon: 'none',
								  title: '报修成功',
								  mask: true,
								});
								setTimeout(() => {
									uni.setStorageSync('rapidRepNext','')
									uni.setStorageSync('repairData','')
								  uni.reLaunch({
								    url: '/pages/repair/home',
								  })
								}, 1500)
							}
						}else{
						  uni.showToast({
						    icon: 'none',
						    title: res.msg || '请求数据失败！'
						  });
						}
					})
				})
		})

  }
  
  // 处理图片
  function handlerOrderImg(imgObj){
    return uploadFile(imgObj, 'wechatRequesterIncident', dataInfo.incidentId)
  }
  
  // 处理提交
  function submitHandler(){
    console.log(dataInfo);
		if(dataInfo.tabActiveValue=='doing'){
			if(dataInfo.dept==''){
			  uni.showToast({
			  	icon: 'none',
			    title: '请选择报修科室'
			  });
			  return;
			}
		}else{
			if(dataInfo.branch==''){
			  uni.showToast({
			  	icon: 'none',
			    title: '请选择院区'
			  });
			  return;
			}
			
			if(dataInfo.areaId==''){
			  uni.showToast({
			  	icon: 'none',
			    title: '请选择楼栋'
			  });
			  return;
			}
			
			if(dataInfo.placeId==''){
			  uni.showToast({
			  	icon: 'none',
			    title: '请选择楼层'
			  });
			  return;
			}
		}

    if(dataInfo.address==''){
      uni.showToast({
      	icon: 'none',
        title: '请输入详细地址'
      });
      return;
    }
    
    if(dataInfo.contacts==''){
      uni.showToast({
      	icon: 'none',
        title: '请输入联系人'
      });
      return;
    }
    
    if(dataInfo.contactsInformation==''){
      uni.showToast({
      	icon: 'none',
        title: '请输入联系电话'
      });
      return;
    }
    console.log(dataInfo.handlerImgList)
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
		handlerOrder()
		return
		if(dataInfo.handlerImgList.length){
		  // 有图片
		  // handlerImgRef.value.upload();
		}else{
		  // 没有图片
		  let handlerOrder$ = handlerOrder();
		  let requestList = [handlerOrder$];
		  Promise.all(requestList).then(resList => {
		    uni.hideLoading();
		    if(resList[0].state == 200){
		      uni.showToast({
		      	icon: 'none',
		        title: '报修成功',
		        mask: true,
		      });
		      setTimeout(() => {
						uni.setStorageSync('rapidRepNext','')
		        uni.reLaunch({
		          url: '/pages/repair/home',
		        })
		      }, 1500)
		    }else{
		      uni.showToast({
		        icon: 'none',
		        title: resList[0].msg || '请求数据失败！'
		      });
		    }
		  })
		}
  }
	
	// 获取文本内容
	function getHtml(html) {
	  const tempDiv = document.createElement('div');
	  tempDiv.innerHTML = html;
	  return tempDiv.textContent || tempDiv.innerText || '';
	}
	
  onLoad((option) => {
		initForm()
    getIncidentDetail();
  })
</script>

<style lang="scss" scoped>
.handler{
  height: 100%;
  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;
      }
    }
  }
  .body{
    margin-top: 88rpx;
    box-sizing: border-box;
    flex: 1;
    min-height: 0;
    &.bg{
      background-color: #F7F7F7;
    }
    .summaryItem{
      &:first-of-type{
        .summaryItem_head{
          border-bottom: 1rpx solid #DDDDDD;
        }
      }
      .summary_total{
        padding: 20rpx 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .summaryItem_head{
        padding: 24rpx;
        font-size: 26rpx;
        color: #3A3A3A;
      }
      .summaryItem_body{
        font-size: 30rpx;
        background-color: #fff;
        .summaryItem_bodyItem{
          padding: 24rpx;
          border-bottom: 1rpx solid #DDDDDD;
          .summaryItem_bodyItem_top{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .value{
              padding-left: 48rpx;
              flex-shrink: 0;
            }
          }
          .summaryItem_bodyItem_bottom{
            margin-top: 24rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .name{
              text-align: right;
              flex: 1;
            }
            .value{
              width: 240rpx;
              text-align: right;
              padding-left: 48rpx;
              flex-shrink: 0;
            }
          }
        }
      }
      .summaryItem_foot{
        font-size: 30rpx;
        background-color: #fff;
        &.total{
          margin-top: 24rpx;
        }
        .summaryItem_foot_total{
          padding: 24rpx 0;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .summaryItem_foot_add{
          border-top: 1rpx solid #DDDDDD;
          padding: 24rpx 0;
          display: flex;
          justify-content: center;
          align-items: center;
          .newicon-icon-test{
            font-size: 30rpx;
            font-weight: bold;
          }
        }
      }
    }
    .form_item_column{
      padding-top: 24rpx;
      min-height: 86rpx;
      .form_item{
        padding-top: 0;
        min-height: auto;
      }
    }
		.candidate{
			display: flex;
			flex-wrap: wrap;
			.candidate-item{
				padding: 6rpx 15rpx;
				font-size: 26rpx;
				color: #949494;
				background: #E9E9E9;
				border-radius: 50rpx;
				margin-right: 20rpx;
				margin-top: 15rpx;
			}
		}
    .form_item{
      display: flex;
      align-items: center;
      padding-top: 24rpx;
      min-height: 86rpx;
      &.column{
        height: auto;
        flex-direction: column;
        align-items: flex-start;
				.import-rep{
					padding: 5rpx 10rpx;
					border-radius: 50rpx;
					background: #d1fcd5;
					color: #49b856;
					font-size: 24rpx;
				}
        .title{
          margin-right: 0;
        }
				.title-width{
					width: 100%;
				}
				.title-fl-sb{
					display: flex;
					justify-content: space-between;
					width: 100%;
				}
        .value{
          margin-top: 10rpx;
          padding-left: 20rpx;
          box-sizing: border-box;
        }
        .tips{
          padding: 24rpx;
          text-align: center;
          font-size: 22rpx;
          color: #909399;
          width: 100%;
          box-sizing: border-box;
        }
      }
      .title{
        font-size: 26rpx;
        display: flex;
        align-items: center;
        margin-right: 12rpx;
        flex-shrink: 0;
        &.select{
          width: calc(5em + 20rpx);
        }
      }
      .value{
        width: 100%;
        &.category{
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .categoryName{
            font-size: 26rpx;
            color: #555;
            flex: 1;
          }
          .newicon-weibiaoti2010104{
            color: $uni-primary;
            margin-left: 24rpx;
          }
        }
        .imgTips{
          color: #909399;
          font-size: 22rpx;
        }
      }
			.item-input{
				border: 1px solid #DBDBDB;
				height: 70rpx;
				line-height: 70rpx;
				padding: 0 10rpx;
				border-radius: 4rpx;
				width: 100%;
				font-size: 14px;
			}
      .synergeticNames{
        font-size: 26rpx;
        margin-right: 24rpx;
      }
      .synergeticAdd{
        flex-shrink: 0;
      }
    }
  }
}
</style>