lanan-repair-app/pages-repair/applyList/todoDetail.vue

<template>
  <view class="container">
    <VNavigationBar background-color="#fff" :title="title" title-color="#333"></VNavigationBar>
    <view class="body">
      <view class="repairInfo">
        <view class="header">
          配件信息
        </view>
        <uni-collapse ref="collapse" v-if="'apply'==viewType">
          <uni-collapse-item  v-for="groupItem in repairList" :key="groupItem.groupId"
                             :title="groupItem.groupName+'('+groupItem.allowNum+'个通过，'+groupItem.noNum+'个驳回，'+groupItem.waitingNum+'个待定)'">
            <view class="content">
              <view class="repairItem" v-for="(item, index) in groupItem.twItemList" :key="index">
                <view class="repairName">{{ item.waresName }}×{{ item.waresCount }}{{ item.unitText }}</view>
                <view class="grid">
                  <view style="grid-area: a" class="girdItem">
                    <text class="label">当前库存</text>
                    <text class="value">{{ item.stock }}</text>
                  </view>
                  <view style="grid-area: b" class="girdItem">
                    <text class="label">状态</text>
                    <text :class="getWaresStatusClass(item.waresStatus)">{{ getWaresStatus(item.waresStatus) }}</text>
                  </view>
                  <view v-if="item.handleName" style="grid-area: c" class="girdItem">
                    <text class="label">审核人</text>
                    <text class="value">{{ item.handleName }}</text>
                  </view>
                  <view v-if="item.handleName" style="grid-area: d" class="girdItem">
                    <text class="label">审核时间</text>
                    <text class="value">{{ item.approvalTime }}</text>
                  </view>
                </view>
              </view>
            </view>
          </uni-collapse-item>
        </uni-collapse>
        <uni-collapse ref="collapse" v-else>
          <uni-collapse-item  v-for="groupItem in repairList" :key="groupItem.groupId"
                              :title="groupItem.groupName+'(合计：'+groupItem.typeNums+'种'+groupItem.nums+'个配件'">
            <view class="content" >
              <view class="repairItem" v-for="(item, index) in groupItem.soiRespVOList" :key="index">
                <view class="repairName">{{ item.goodsName }}×{{ item.goodsCount }}{{ item.unitText }}</view>
              </view>
            </view>
          </uni-collapse-item>
        </uni-collapse>
      </view>
    </view>
    <!-- 普通弹窗---拍照上传 -->
    <uni-popup ref="popup" background-color="#fff">
      <view class="popup-content">
        <view class="dl-avatar-box">
          <uni-file-picker :value="fileList" :sizeType="sizeType" @select="afterRead" @delete="deleteFile" limit="9" title="请拍照上传（图片最多上传9张）"></uni-file-picker>
        </view>
        <button type="primary" @click="confirmOpe('yes')">保存</button>
      </view>
    </uni-popup>
    <view v-if="canOperate" class="footer">
      <view class="no" @click="confirmOpe('no')">
        {{ backText }}
      </view>
      <view class="yes" @click="openFile">
        {{ yesText }}
      </view>
    </view>
  </view>
</template>

<script>
import VNavigationBar from "@/components/VNavigationBar.vue";
import request from '@/utils/request';
import {getDictTextByCodeAndValue} from "@/utils/utils";
import config from "@/config";
import upload from "@/utils/upload";
export default {
  components: {
    VNavigationBar
  },
  data() {
    return {
      //上传的图片数组
      fileList: [],
      sizeType:['compressed'],
      viewType:"",
      id:"",
      title:"",
      canOperate:false,
      backText:"",
      yesText:"",
      repairList: []
    };
  },
  onLoad(data){
    this.viewType = data.viewType
    this.canOperate = data.canOperate
    this.id = data.id
    this.getDetail()
  },
  methods:{
    getWaresStatus(val) {
      switch (val) {
        case "1":
          return "通过";
        case "0":
          return "不通过";
        default:
          return "待定"
      }
    },
    getWaresStatusClass(val) {
      switch (val) {
        case "1":
          return "pass";
        case "0":
          return "no_pass";
        default:
          return ""
      }
    },

    /**
     * 接单上传附件
     */
    openFile(){
      this.$refs.popup.open("bottom")
    },


    afterRead(file) {
      for (let i = 0; i < file.tempFilePaths.length; i++) {
        upload({
          url:'/admin-api/infra/file/upload',
          filePath: file.tempFilePaths[i]
        }).then((res)=>{
          this.fileList.push({
            url: config.baseImageUrl+res.data
          })
          console.log(this.fileList)
        })
      }
    },

    deleteFile(file, index) {
      this.fileList.splice(index, 1);
    },



    getDetail(){
      let url;
      let params={};
      if("apply"==this.viewType){
        this.title = "配件申请单详情"
        //配件申请单
        url = "/admin-api/repair/twi/listApp"
        params.twId = this.id
      }else{
        if("receive"==this.viewType){
          //领料
          this.title = "领料单详情"
          this.yesText="我已领料"
          this.backText="未领料（拒绝）"
        }else{
          this.title = "退料单详情"
          this.yesText="我已退料"
          this.backText="未退料（拒绝）"
        }
        //领料单、退料单
        url = "/admin-api/repair/so/getApp"
        params.id = this.id
      }
      request({
        url: url,
        method: 'get',
        params:params
      }).then((res) => {
        if (res.code == 200) {
          this.repairList = res.data
        }
      })
    },
    confirmOpe(type){
      if("yes"==type){
        let url;
        let fileStr = this.fileList.map(item=>item.url.replace(config.baseImageUrl,"")).join(",")
        let params={
          id:this.id,
          image:fileStr
        };
        if("receive"==this.viewType) {
          //领料
          url = "/admin-api/repair/so/confirmGet"
        }else{
          //退料
          url = "/admin-api/repair/so/confirmBack"
        }
        request({
          url: url,
          method: 'get',
          params:params
        }).then((res) => {
          if (res.code == 200) {
            uni.showToast({
              title: '操作成功！',
              icon: 'none'
            })
            setTimeout(() => {
              uni.navigateBack()
            }, 700)
          }
        })
      }else{
        //作废单据
        let url = "/admin-api/repair/so/void"
        let dataObj={
          id:this.id,
          soStatus:'06'
        }
        request({
          url: url,
          method: 'POST',
          data:dataObj
        }).then((res) => {
          if (res.code == 200) {
            uni.showToast({
              title: '操作成功！',
              icon: 'none'
            })
            setTimeout(() => {
              uni.navigateBack()
            }, 700)
          }
        })
      }
    },
  }
}
</script>

<style lang="less" scoped>
.popup-content {
@include flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  height: auto;
  background-color: #fff;
}
.container {
  height: 100%;
  background: #F3F5F7;
  display: flex;
  flex-direction: column;
}

.body {
  flex: 1;
  height: 0;
  overflow: auto;

  .todoInfo {
    margin: 20rpx 32rpx;
    background-color: #fff;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    padding: 30rpx;

    .todoName {
      font-weight: bold;
      font-size: 32rpx;
      color: #333333;
      margin-bottom: 16rpx;
    }

    .todoDate {
      font-size: 24rpx;
      color: #858BA0;
      margin-bottom: 30rpx;
    }

    .line {
      height: 1rpx;
      background-color: #DDDDDD;
      margin: 30rpx 0;
    }

    .grid {
      display: grid;
      grid-template-areas:
      'a b'
      'c c';
      gap: 20rpx;

      .gridItem {
        display: flex;
        flex-direction: column;
        row-gap: 10rpx;
        font-size: 28rpx;

        .gridItemLabel {
          color: #858BA0;
        }

        .gridItemValue {
          color: #333333;
        }
      }
    }
  }
  .pass {
    color: #2979FF;
  }

  .no_pass {
    color: #E8A321;
  }
  .repairInfo {
    margin: 20rpx 32rpx;
    background-color: #fff;
    border-radius: 8rpx 8rpx 8rpx 8rpx;

    .header {
      padding: 30rpx;
      border-bottom: 1rpx solid #DDDDDD;
    }
    .repairItem {
      padding: 30rpx;
      border-bottom: 1rpx solid #DDDDDD;
      &:last-child {
        border-bottom: none;
      }
    }
    .repairName {
      display: flex;
      align-items: center;
      column-gap: 20rpx;
      font-size: 32rpx;
      color: #333333;
      margin-bottom: 30rpx;
      .repairNum {
        font-size: 28rpx;
        color: #0174F6;
      }
    }
    .grid {
      display: grid;
      grid-template-areas:
        'a b'
        'c d';
      grid-template-columns: 1fr 1fr;
      gap: 30rpx;
      .girdItem {
        display: flex;
        flex-direction: column;
        row-gap: 12rpx;
        font-size: 28rpx;
        .label {
          color: #858BA0;
        }
        .value {
          color: #333333;
        }
      }
    }
  }
}

.footer {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 32rpx;

  .yes, .no {
    width: 310rpx;
    height: 76rpx;
    border-radius: 38rpx 38rpx 38rpx 38rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 10rpx;
  }

  .yes {
    background: #0174F6;
    color: #FFFFFF;
  }

  .no {
    border: 2rpx solid #858BA0;
    color: #858BA0;
  }
}
</style>