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

<template>
  <view class="buildIncident">
    <scroll-view scroll-y class="body">
      <view class="form_item">
        <view class="title select"><text class="required newicon newicon-bitian"></text>院区：</view>
        <uni-data-select class="value" v-model="incidentData.branch" :localdata="dataInfo.branchList" :clear="false" placeholder="请选择院区" :class="{formRed: isSubmit && !incidentData.branch}" @change="changeBranch"></uni-data-select>
      </view>
      <view class="form_item">
        <view class="title"><text class="required newicon newicon-bitian"></text>报修科室：</view>
        <view class="value category" @click="selectDepartment">
          <text class="categoryName ellipsis-multiline">{{incidentData.department ? incidentData.department.dept : ''}}</text>
          <text class="newicon newicon-weibiaoti2010104"></text>
        </view>
      </view>
      <view class="form_item">
        <view class="title select"><text class="required newicon newicon-bitian transparent"></text>报修人：</view>
        <uni-data-select readonly class="value" v-model="incidentData.requester" :localdata="dataInfo.requesterList" placeholder="请选择报修人"></uni-data-select>
      </view>
      <view class="form_item">
        <view class="title select"><text class="required newicon newicon-bitian transparent"></text>联系人：</view>
        <uni-easyinput class="value" v-model="incidentData.contacts" placeholder="请输入联系人" />
      </view>
      <view class="form_item">
        <view class="title select"><text class="required newicon newicon-bitian"></text>联系电话：</view>
        <uni-easyinput class="value" v-model="incidentData.contactsInformation" placeholder="请输入联系电话" :class="{formRed: isSubmit && !incidentData.contactsInformation.trim()}" />
      </view>
      <view class="form_item">
        <view class="title"><text class="required newicon newicon-bitian transparent"></text>楼栋楼层：</view>
        <view class="value category" @click="selectAreaPlace">
          <text class="categoryName ellipsis-multiline">{{incidentData.place ? incidentData.place.area.area + ' ' + incidentData.place.place : ''}}</text>
          <text class="newicon newicon-weibiaoti2010104"></text>
        </view>
      </view>
      <view class="form_item">
        <view class="title select"><text class="required newicon newicon-bitian transparent"></text>详细地址：</view>
        <uni-easyinput class="value" v-model="incidentData.houseNumber" placeholder="请输入详细地址" />
      </view>
      <view class="form_item">
        <view class="title"><text class="required newicon newicon-bitian"></text>故障现象：</view>
        <view class="value category" @click="selectCategory">
          <text class="categoryName ellipsis-multiline">{{incidentData.category ? incidentData.category.mutiCategory : ''}}</text>
          <text class="newicon newicon-weibiaoti2010104"></text>
        </view>
      </view>
      <view class="form_item">
        <view class="title select"><text class="required newicon newicon-bitian transparent"></text>故障来源：</view>
        <uni-data-select readonly class="value" v-model="incidentData.source" :localdata="dataInfo.sourceList" placeholder="请选择故障来源"></uni-data-select>
      </view>
      <view class="form_item">
        <view class="title select"><text class="required newicon newicon-bitian transparent"></text>优先级：</view>
        <uni-data-select placement="top" readonly class="value" v-model="incidentData.priority" :localdata="dataInfo.priorityList" placeholder="请选择优先级"></uni-data-select>
      </view>
      <view class="form_item column">
        <view class="title select"><text class="required newicon newicon-bitian"></text>故障描述：</view>
        <uni-easyinput class="value" type="textarea" v-model="incidentData.description" placeholder="请输入故障描述" :class="{formRed: isSubmit && !incidentData.description.trim()}" />
      </view>
      <view class="form_item_column">
        <view class="form_item">
          <view class="title"><text class="required newicon newicon-bitian transparent"></text>处理图片：</view>
          <view class="value">
            <uni-file-picker ref="handlerImgRef" v-model="incidentData.handlerImgList" limit="3" @success="handlerImgSuccess" @fail="handlerImgFail" @select="handlerImgSelect" @delete="handlerImgDelete"></uni-file-picker>
          </view>
        </view>
        <view class="form_item">
          <view class="title transparent"><text class="required newicon newicon-bitian transparent"></text>处理图片：</view>
          <view class="value">
            <text class="imgTips ellipsis">(支持JPG/PNG格式图片，单张大小10M以内)</text>
          </view>
        </view>
      </view>
      
    </scroll-view>
    <view class="foot_common_btns">
      <button @click="goBack" type="default" class="cancelButton btn">返回</button>
      <button @click="submit" type="default" class="primaryButton btn">下一步</button>
    </view>
  </view>
</template>

<script setup>
  import { ref, reactive } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { api_user, api_branch, api_getDictionary, api_incidentTask } from "@/http/api.js"
  import { defaultColor } from '@/static/js/theme.js'
  import { useSetTitle } from '@/share/useSetTitle.js'
  import { useGoBack } from '@/share/useGoBack.js'
  import { useLoginUserStore } from '@/stores/loginUser'
  import { useIncidentBuildStore } from '@/stores/incidentBuild'
  import { useUploadFile } from '@/share/useUploadFile.js'
  
  useSetTitle();
  const loginUserStore = useLoginUserStore();
  const incidentBuildStore = useIncidentBuildStore();
  const { uploadFile }  = useUploadFile();
  const { goBack }  = useGoBack();
  
  // 主题颜色
  const primaryColor = ref(defaultColor)
  
  // 工单对象
  const incidentData = reactive({
    "deleteFlag": 0,
    "duty": undefined,
    "department": undefined,
    "contactsInformation": '',
    "contacts": '',
    "branch": undefined,
    "area": undefined,
    "place": undefined,
    "houseNumber": '',
    "category": undefined,
    "priority": undefined,
    "source": undefined,
    "title": '',
    "description": '',
    "repairType": undefined,
    "requester":undefined,
    "acceptUser": loginUserStore.loginUser.user,
    handlerImgList: [],//处理图片列表
  })
  
  // 处理图片
  const handlerImgRef = ref(null)
  
  // 数据
  const dataInfo = reactive({
    branchList: [], //院区列表
    requesterList: [], //报修人列表
    sourceList: [], //故障来源列表
    priorityList: [], //优先级列表
  })
  
  // 是否提交
  const isSubmit = ref(false)
  
  // 上传处理图片成功
  function handlerImgSuccess(e){
    dataInfo.handlerImgList.forEach(v => {
      v.url = v.path;
    })
    console.log(dataInfo.handlerImgList);
    // let handlerOrder$ = handlerOrder();
    // let requestList = [handlerOrder$];
    // dataInfo.handlerImgList.forEach(v => {
    //   let handlerOrderImg$ = handlerOrderImg(v);
    //   requestList.push(handlerOrderImg$);
    // })
    
    // Promise.all(requestList).then(resList => {
    //   uni.hideLoading();
    //   console.log(resList);
    //   if(resList[0].state == 200){
    //     uni.showToast({
    //     	icon: 'none',
    //       title: '处理成功',
    //       mask: true,
    //     });
    //     setTimeout(() => {
    //       uni.reLaunch({
    //         url: '/pages/incidentList/incidentList',
    //       })
    //     }, 1500)
    //   }else{
    //     uni.showToast({
    //       icon: 'none',
    //       title: resList[0].msg || '请求数据失败！'
    //     });
    //   }
    // })
  }
  
  // 上传处理图片失败
  function handlerImgFail(e){
    dataInfo.handlerImgList.forEach(v => {
      v.url = v.path;
    })
    console.log(dataInfo.handlerImgList);
  }
  
  // 选择上传图片
  function handlerImgSelect(e){
    dataInfo.handlerImgList = dataInfo.handlerImgList.concat(e.tempFiles);
    console.log(dataInfo.handlerImgList);
  }
  
  // 删除上传图片
  function handlerImgDelete(e){
    dataInfo.handlerImgList = dataInfo.handlerImgList.filter(v => e.tempFile.uuid != v.uuid);
    console.log(dataInfo.handlerImgList);
  }
  
  // 选择故障现象
  function selectCategory(){
    incidentBuildStore.setIncidentBuildData(incidentData, 'buildIncident');
    uni.navigateTo({
      url: `/pages/categoryOne/categoryOne`
    })
  }
  
  // 选择楼栋楼层
  function selectAreaPlace(){
    incidentBuildStore.setIncidentBuildData(incidentData, 'buildIncident');
    uni.navigateTo({
      url: `/pages/searchArea/searchArea`
    })
  }
  
  // 跳转到搜索报修科室
  function selectDepartment(){
    incidentBuildStore.setIncidentBuildData(incidentData, 'buildIncident');
    uni.navigateTo({
      url: `/pages/searchDept/searchDept`
    })
  }
  
  // 获取院区列表
  function getBranchs(){
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
    let postData = {
      "idx": 0,
      "sum": 9999,
    };
    api_branch(postData).then(res => {
      uni.hideLoading();
      if(res.status == 200){
        res.list = res.list || [];
        dataInfo.branchList = res.list.map(v => ({
          text: v.hosName,
          value: v.id,
        }));
        
        if(loginUserStore.loginUser.user.duty){
          // 当前的所属责任科室
          incidentData.branch = loginUserStore.loginUser.user.duty.branch;
        }else if(loginUserStore.loginUser.user.branch){
          // 当前的所属院区
          incidentData.branch = loginUserStore.loginUser.user.branch.id;
        }
        
      }else{
        uni.showToast({
          icon: 'none',
          title: res.msg || '请求数据失败！'
        });
      }
    })
  }
  
  // 获取报修人列表
  function getRequesters(){
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
    let postData = {
      "idx": 0,
      "sum": 9999,
      "user": {
        "engineer": undefined,
      }
    };
    api_user(postData).then(res => {
      uni.hideLoading();
      if(res.status == 200){
        res.list = res.list || [];
        dataInfo.requesterList = res.list.map(v => ({
          text: v.name,
          value: v.id,
        }));
        
      }else{
        uni.showToast({
          icon: 'none',
          title: res.msg || '请求数据失败！'
        });
      }
    })
  }
  
  // 获取故障来源列表
  function getSources(){
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
    let postData = {
      "key": 'incident_source',
      "type": "list",
    };
    api_getDictionary(postData).then(res => {
      uni.hideLoading();
      res = res || [];
      dataInfo.sourceList = res.map(v => ({
        text: v.name,
        value: v.id,
      }));
    })
  }
  
  // 获取优先级列表
  function getPrioritys(){
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
    let postData = {
      "key": 'incident_priority',
      "type": "list",
    };
    api_getDictionary(postData).then(res => {
      uni.hideLoading();
      res = res || [];
      dataInfo.priorityList = res.map(v => ({
        text: v.name,
        value: v.id,
      }));
    })
  }
  
  // 选择院区
  function changeBranch(){}
  
  // 处理提交事件
  function handlerOrder(){
    let postData = {
      incident: dataInfo.incidentData,
    }
    
    postData.incident.handleDescription = dataInfo.handleDescription;
    postData.incident.handleCategory = {id: dataInfo.handleCategory};
    postData.incident.closecode = {id: dataInfo.closecode};
    postData.incident.category = dataInfo.category;
    postData.incident.synergetic = dataInfo.synergetic;
    
    return api_incidentTask('accept', postData);
  }
  
  // 处理图片
  function handlerOrderImg(imgObj){
    return uploadFile(imgObj, 'incident', dataInfo.incidentId)
  }
  
  // 提交
  function submit(){
    isSubmit.value = true;
    console.log(dataInfo);
    if(!dataInfo.branch){
      uni.showToast({
      	icon: 'none',
        title: '请选择院区'
      });
      return;
    }
    
    if(!dataInfo.department){
      uni.showToast({
      	icon: 'none',
        title: '请选择报修科室'
      });
      return;
    }
    
    if(!dataInfo.contactsInformation.trim()){
      uni.showToast({
      	icon: 'none',
        title: '请填写联系电话'
      });
      return;
    }
    
    if(!dataInfo.category){
      uni.showToast({
      	icon: 'none',
        title: '请选择故障现象'
      });
      return;
    }
    
    if(!dataInfo.handleDescription.trim()){
      uni.showToast({
      	icon: 'none',
        title: '请填写故障描述'
      });
      return;
    }
    console.log(dataInfo.handlerImgList)
    incidentBuildStore.setIncidentBuildData(dataInfo, 'buildIncident');
    
    // uni.showLoading({
    //   title: "加载中",
    //   mask: true,
    // });
    // if(dataInfo.handlerImgList.length){
    //   // 有图片
    //   handlerImgRef.value.upload();
    // }else{
    //   // 没有图片
    //   let handlerOrder$ = handlerOrder();
    //   let requestList = [handlerOrder$];
    //   Promise.all(requestList).then(resList => {
    //     uni.hideLoading();
    //     console.log(resList);
    //     if(resList[0].state == 200){
    //       uni.showToast({
    //       	icon: 'none',
    //         title: '处理成功',
    //         mask: true,
    //       });
    //       setTimeout(() => {
    //         uni.reLaunch({
    //           url: '/pages/incidentList/incidentList',
    //         })
    //       }, 1500)
    //     }else{
    //       uni.showToast({
    //         icon: 'none',
    //         title: resList[0].msg || '请求数据失败！'
    //       });
    //     }
    //   })
    // }
  }
  
  onLoad((option) => {
    if(incidentBuildStore.incidentBuild.data){
      Object.assign(incidentData, incidentBuildStore.incidentBuild.data);
      incidentBuildStore.clearIncidentBuildData();
      
      // 修改报修科室,则回显楼栋,楼层,详细地址,联系电话
      incidentData.place = incidentData.department.place || undefined;
      incidentData.houseNumber = incidentData.department.address || '';
      incidentData.contactsInformation = incidentData.department.phone || '';
    }
    getBranchs();
    getRequesters();
    getSources();
    getPrioritys();
  })
</script>

<style lang="scss" scoped>
.buildIncident{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .body{
    padding: 0 24rpx;
    box-sizing: border-box;
    flex: 1;
    min-height: 0;
    .form_item{
      display: flex;
      align-items: center;
      padding-top: 24rpx;
      min-height: 86rpx;
      &.column{
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        .title{
          margin-right: 0;
        }
        .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;
        }
      }
    }
  }
}
</style>