Merge remote-tracking branch 'origin/master'

k94314517

2025-07-16 4384ad3db8f10b7add5f287681c069d4efb1e0ee

 admin/src/components/business/OperaOrderDetailWindow.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,485 @@
<template>
  <GlobalWindow
    :title="title"
    :visible.sync="visible"
    :withFooter="false"
    width="calc(100% - 250px)"
    :confirm-working="isWorking"
    @close="close"
    @confirm="confirm">
    <div class="main">
      <div class="renzheng" >
        <div class="info" >
            <span class="m10">订单信息</span>
            <el-tag type="primary" class="ml10 tag2" v-if="info.status == 0||info.status == 1||info.status == 2||info.status == 3">{{ info.statusName }}</el-tag>
            <el-tag type="success" class="ml10 tag2" v-if="info.status == 4">{{ info.statusName }}</el-tag>
            <el-tag type="danger" class="ml10 tag2" v-if="info.status == 99">{{ info.statusName }}</el-tag>
            <div style="display: inline-block;float: right;font-size: 12px"><el-button icon="el-icon-timer" type="primary" @click="showLogList" >订单流转日志</el-button></div>
        </div>
        <div class="detail" >
          <div class="line">
            <div class="cont"><span class="label"> è®¢å•å·ï¼š</span> <span class="txt">{{info.code }}</span></div>
            <div  class="cont">  <span class="label"> ä¸‹å•æ—¶é—´ï¼š</span> <span class="txt">{{info.createTime }}</span></div>
            <div  class="cont"><span class="label"> æŽ¥å•æ—¶é—´ï¼š</span> <span class="txt">{{info.acceptTime || '' }}</span></div>
          </div>
          <div class="line">
            <div class="cont"><span class="label">开始时间：</span> <span class="txt">{{info.workStartTime || '' }}</span></div>
            <div class="cont" style="flex: 2"><span class="label">完成时间：</span><span class="txt">{{info.finishTime || '' }}</span></div>
          </div>
        </div>
      </div>
      <div class="renzheng" >
        <div class="info" >
          <span class="m10">支付信息</span>
        </div>
        <div class="detail" >
          <div class="line">
            <div class="cont"><span class="label"> å®žä»˜é‡‘额：</span> <span class="txt yellowbtn">{{((info.payAccount||0)/100).toFixed(2) }}元</span></div>
            <div  class="cont"><span class="label">平台手续费：</span> <span class="txt yellowbtn">{{(((info.payAccount||0) - (info.receiveAccount||0))/100).toFixed(2) }}元</span></div>
            <div  class="cont"><span class="label">接单方收到金额：</span> <span class="txt yellowbtn">{{((info.receiveAccount||0)/100).toFixed(2) }}元</span></div>
          </div>
          <div class="line">
            <div class="cont"><span class="label">支付时间：</span> <span class="txt">{{info.payTime || '' }}</span></div>
            <div class="cont"><span class="label">支付方式：</span><span class="txt">{{info.payMethod==0?'微信支付':'其他' }}</span></div>
            <div class="cont"><span class="label">交易单号：</span><span class="txt">{{info.wxExternalNo || '' }}</span></div>
          </div>
        </div>
      </div>
      <div class="renzheng" >
        <div class="info" >
          <span class="m10">需求信息</span>
        </div>
        <div class="detail" v-if="info.type==0">
          <div class="line">
            <div class="cont"><span class="label"> è®¢å•ç±»åž‹ï¼š</span> <span class="txt">{{(info.type==0?'用工单':(info.type==1?'货运单':'订单单')) }}</span></div>
            <div  class="cont"><span class="label">工种：</span>
              <span class="txt" v-if="info.type==0">{{(info.workType==0?'采摘工':(info.workType==1?'分拣工':'包装工')) }}</span>
              <span v-else>-</span>
            </div>
            <div  class="cont"><span class="label">采摘品种：</span> <span class="txt">{{info.categoryName || ''}}</span></div>
          </div>
          <div class="line">
            <div class="cont"><span class="label">采摘重量：</span> <span class="txt">{{info.priceNum1 || '' }}斤</span></div>
            <div class="cont"><span class="label">用工时间：</span><span class="txt">{{info.startDate|| '' }}-{{info.endDate|| '' }}</span></div>
            <div class="cont"><span class="label">用工天数：</span><span class="txt">{{info.totalDays || 0 }}</span></div>
          </div>
          <div class="line">
            <div class="cont"><span class="label">用工地点：</span> <span class="txt">{{info.location || '' }}</span></div>
            <div class="cont"><span class="label">费用标准：</span><span class="txt">{{((info.price||0)/100).toFixed(2) }}{{info.priceUnit || '' }}</span></div>
            <div class="cont"><span class="label">预估总费用：</span><span class="txt yellowbtn">{{((info.estimatedAccount||0)/100).toFixed(2) }}元</span></div>
          </div>
          <div class="line">
            <div class="cont"><span class="label">地点描述：</span><span class="txt">{{info.locationRemark || '' }}</span></div>
          </div>
          <div class="line">
            <div class="cont" ><span class="label">需求描述：</span><span class="txt">{{info.supplement || '' }}</span></div>
          </div>
          <div class="line">
            <div class="cont">
              <span class="label">图片：</span>
              <span class="txt" v-if="!info.multifileList || info.multifileList.length ==0">无</span>
            </div>
          </div>
          <div class="line" v-if="info.multifileList && info.multifileList.length>0">
            <div class="cont">
              <template v-if="info.multifileList && info.multifileList.length>0">
              <div v-for="item in info.multifileList" style="display: inline-block" :key="'aaa'+item.id">
                <el-image v-if="item.fileurlFull" style="width: 50px; height: 50px; margin-right: 10px" :src="item.fileurlFull"
                          :preview-src-list="[info.fileurlFull]">
                </el-image>
              </div>
              </template>
            </div>
          </div>
          <div class="line" v-if="info.auditStatus == 3 || info.auditStatus == 2" :style="'background-color: '+(info.auditStatus==2?'#eff8ea':'rgb(253 226 226)')+';padding: 20px'">
            <span class="label"> å®¡æ ¸äººï¼š</span> <span class="txt">{{info.editorName}} </span><span class="label">{{info.auditTime || '' }} </span>
            <div  style="margin-top: 20px"> <span class="label">  å®¡æ ¸ä¿¡æ¯ï¼š</span> <span class="txt">{{info.auditRemark || '' }}</span></div>
          </div>
        </div>
        <div class="detail" v-if="info.type==1">
          <div class="line">
            <div class="cont"><span class="label"> è®¢å•ç±»åž‹ï¼š</span> <span class="txt">{{(info.type==0?'用工单':(info.type==1?'货运单':'订单单')) }}</span></div>
            <div  class="cont"><span class="label">车辆：</span> <span class="txt">{{info.categoryName || ''}}</span></div>
            <div  class="cont"><span class="label">用车时间：</span> <span class="txt">{{info.startDate|| '' }}-{{info.endDate|| '' }}</span></div>
          </div>
          <div class="line">
            <div class="cont" >  <span class="label"> åœ°å€ä¿¡æ¯ï¼š</span> <span class="label" v-if="!wayList || wayList.length==0">-</span> </div>
          </div>
          <div class="line"  v-if="wayList && wayList.length>0">
            <div class="cont"  style="padding-left: 40px;background-color: #e4ecfe">
                <div v-for="(item,index) in wayList" style="display: block;margin: 10px" :key="'bbb'+index">
                   <span v-if="index == 0">用车起点：{{item.location || ''}}</span>
                   <span v-if="index >0 && index < wayList.length-1">途经地点：{{item.location || ''}}</span>
                   <span v-if="index == wayList.length-1">用车终点：{{item.location || ''}}</span>
                </div>
            </div>
          </div>
          <div class="line">
            <div class="cont"><span class="label">用工天数：</span><span class="txt">{{info.totalDays || 0 }}</span></div>
            <div class="cont"><span class="label">运输重量/数量：</span> <span class="txt">{{info.priceNum1 || '' }}斤</span></div>
            <div class="cont"><span class="label">费用标准：</span><span class="txt">{{((info.price||0)/100).toFixed(2) }}{{info.priceUnit || '' }}</span></div>
          </div>
          <div class="line">
            <div class="cont"><span class="label">预估总费用：</span><span class="txt yellowbtn">{{((info.estimatedAccount||0)/100).toFixed(2) }}元</span></div>
          </div>
          <div class="line">
            <div class="cont" ><span class="label">需求补充：</span><span class="txt">{{info.supplement || '' }}</span></div>
          </div>
          <div class="line">
            <div class="cont">
              <span class="label">图片：</span>
              <span class="txt" v-if="!info.multifileList || info.multifileList.length ==0">无</span>
            </div>
          </div>
          <div class="line" v-if="info.multifileList && info.multifileList.length>0">
            <div class="cont">
              <template v-if="info.multifileList && info.multifileList.length>0">
                <div v-for="item in info.multifileList" style="display: inline-block" :key="item.id">
                  <el-image v-if="item.fileurlFull" style="width: 50px; height: 50px; margin-right: 10px" :src="item.fileurlFull"
                            :preview-src-list="[info.fileurlFull]">
                  </el-image>
                </div>
              </template>
            </div>
          </div>
        </div>
        <div class="detail" v-if="info.type==2">
          <div class="line">
            <div class="cont"><span class="label">订单类型：</span> <span class="txt">{{(info.type==0?'用工单':(info.type==1?'货运单':'订单单')) }}</span></div>
            <div class="cont"><span class="label">用餐时间：</span><span class="txt">{{info.startDate|| '' }}-{{info.endDate|| '' }}</span></div>
            <div class="cont"><span class="label">用餐天数：</span><span class="txt">{{info.totalDays || 0 }}</span></div>
          </div>
          <div class="line">
            <div class="cont"><span class="label">用餐地点：</span><span class="txt">{{info.location || '' }}</span></div>
            <div class="cont" style="flex: 2"><span class="label" >餐标和份数：</span><span class="txt">{{info.locationRemark || '' }}</span></div>
          </div>
          <div class="line">
            <div class="cont"><span class="label">地点描述：</span><span class="txt">{{info.locationRemark || '' }}</span></div>
          </div>
          <div class="line">
            <div class="cont" ><span class="label">需求描述：</span><span class="txt">{{info.supplement || '' }}</span></div>
          </div>
          <div class="line">
            <div class="cont">
              <span class="label">图片：</span>
              <span class="txt" v-if="!info.multifileList || info.multifileList.length ==0">无</span>
            </div>
          </div>
          <div class="line" v-if="info.multifileList && info.multifileList.length>0">
            <div class="cont">
              <template v-if="info.multifileList && info.multifileList.length>0">
                <div v-for="item in info.multifileList" style="display: inline-block" :key="'aaa'+item.id">
                  <el-image v-if="item.fileurlFull" style="width: 50px; height: 50px; margin-right: 10px" :src="item.fileurlFull"
                            :preview-src-list="[info.fileurlFull]">
                  </el-image>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
      <div class="renzheng" >
        <div class="info" >
          <span class="m10">发单方信息</span>
        </div>
        <div class="detail" >
          <div class="line">
            <div class="cont"><span class="label">昵称：</span> <span class="txt">{{ info.releaseName||'' }}</span></div>
            <div  class="cont"  ><span class="label">联系方式：</span> <span class="txt ">{{ info.releasePhone||'' }}</span></div>
            <div  class="cont" ><span class="label">其他联系人：</span> <span class="txt ">{{ info.linkName||'匿名' }}-{{ info.linkPhone||'未设置' }}</span></div>
          </div>
        </div>
      </div>
      <div class="renzheng" >
        <div class="info" >
          <span class="m10">接单方信息</span>
        </div>
        <div class="detail" >
          <div class="line">
            <div class="cont"><span class="label">姓名/单位：</span> <span class="txt">{{ info.acceptName||'' }}</span></div>
            <div  class="cont" style="flex: 2"><span class="label">联系方式：</span> <span class="txt ">{{ info.acceptPhone||'' }}</span></div>
          </div>
        </div>
      </div>
      <div class="renzheng" >
        <div class="info" >
          <span class="m10">评价信息</span>
        </div>
        <div class="detail" >
          <div class="line">
            <div class="cont"><span class="label">{{info.commentType ==1 ?'系统自动评价':'发单方评价'}}</span> <span class="txt">{{ info.commentTime}}</span></div>
          </div>
          <div class="line">
            <div class="cont">
              <el-button class="label" :class="getScoreLevel(1)" style="border: none;cursor: default" icon="el-icon-star-on"></el-button>
              <el-button class="label" :class="getScoreLevel(2)" style="border: grey;cursor: default" icon="el-icon-star-on"></el-button>
              <el-button class="label" :class="getScoreLevel(3)" style="border: grey;cursor: default" icon="el-icon-star-on"></el-button>
              <el-button class="label" :class="getScoreLevel(4)" style="border: grey;cursor: default" icon="el-icon-star-on"></el-button>
              <el-button class="label" :class="getScoreLevel(5)" style="border: grey;cursor: default" icon="el-icon-star-on"></el-button>
            </div>
          </div>
          <div class="line">
            <div class="cont"><span class="label">评价内容：</span> <span class="txt">{{ info.commentInfo || '-'}}</span></div>
          </div>
        </div>
      </div>
    </div>
    <orderProgress ref ='orderProgress'></orderProgress>
  </GlobalWindow>
</template>

<script>
import GlobalWindow from '@/components/common/GlobalWindow'
import BaseOpera from '@/components/base/BaseOpera'
import orderProgress from '@/components/business/orderProgress'
import { getById, cancel } from '@/api/business/orders'
export default {
  components: {
    GlobalWindow, orderProgress
  },
  extends: BaseOpera,
  data () {
    return {
      id: '',
      wayList:[],
      info: {},
      loading: false
    }
  },
  methods: {
    open (title, row) {
      this.title = title
      this.visible = true
      this.tableData2 = []
      this.id = row.id
      this.wayList=[]
      this.getData()
    },
    getData () {
      getById(this.id)
        .then(res => {
          this.info = res
          this.visible = true
          if(this.info.wayInfo){
            this.wayList = JSON.parse(this.info.wayInfo)
          }
          console.log(this.wayList)
        })
    },
    close () {

    },
    showLogList () {
      this.$refs.orderProgress.open('订单流转日志', this.info.orderLogList||[])
    },
    getScoreLevel (num) {
      if (this.info.commentLevel && this.info.commentLevel >= num) {
        return 'staron'
      }
      return 'staroff'
    },
    checkDo (status) {
      console.log(this.$refs.formCheck.length)
      this.$refs.formCheck.validate((valid) => {
        if (!valid) {
          return
        }
        this.$dialog.actionConfirm('您确认【取消】该申请吗？', '操作确认')
          .then(() => {
            this.dealing = true
            cancel({
              id: this.id,
              auditStatus: status,
              auditRemark: this.form.auditRemark
            })
              .then(res => {
                this.$tip.apiSuccess('操作成功')
                this.getData()
                this.$emit('success')
              })
              .catch(e => {
                this.$tip.apiFailed(e)
              })
              .finally(() => {
                this.dealing = false
              })
          })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/style/variables.scss';
.bottom{
  text-align: center;
  display: block;
  height: auto;
  background-color: #e4ecfe;
  width: calc(100% - 32px);
  z-index: 999;
  padding: 16px;
}
.staroff{
  color: #8c939d !important;
}
.staron{
  color: #ff4d00 !important;
}
.renzheng{
  margin: 0px 0px 50px 20px;
  width: calc(100% - 60px);
  .detail{
    font-size: 14px;
    .label{
      //color: #8c939d;
    }
    .txt{
      margin-right: 30px;
    }
    .line{
      font-size: 12px;
      margin-top: 15px;
      display: flex;
      width: calc(100% - 60px);
      .cont{
        flex: 1;
      }
    }
  }
  .ml10{
    margin-left: 10px;
  }
  .info{
    font-size: 14px;
    font-weight: bold;
    color: #5a72c5;
  }
  .tag2{
    font-size: 12px;
  }
}
.home_title {
  .mr10{
    margin-right: 10px;
  }
  .m10{
    margin: 10px;
  }
  .bluebtn{
    color: #2985f7;
  }
  .tag1{
    border-radius: 10px;
    font-size: 10px;
    padding: 0px 15px;
    height: 24px;
  }
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    font-weight: 500;
    font-size: 14px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    .status {
      padding: 0 6px;
      height: 22px;
      line-height: 22px;
      border-radius: 2px;
      border: 1px solid #00BA92;
      color: #00BA92;
      font-weight: 400;
      font-size: 12px;
      color: #00BA92;
    }
  }
}
.tab{
  width: 20%;
}
.remark {
  //background: #E8EBF7;
  border-radius: 2px;
  font-size: 14px;
  margin: 10px 10px 0px -10px;
  button{
    border: none;
    cursor: default;
    margin-right: 20px;
    background: #e4ecfe;
  }
}
.bluebtn{
  font-weight: bold;
  color: #2985f7;
}

.redbtn{
  font-weight: bold;
  color: #ff1b1b;
}
.yellowbtn{
  font-weight: bold;
  color: #fc9d20;
}

.tabs {
  border-bottom: 1px solid #DFE2E8;
  display: flex;
  margin-bottom: 20px;
  .tab {
    height: 58px;
    line-height: 58px;
    font-size: 14px;
    color: #666666;
    margin-right: 30px;
    cursor: pointer;
  }

  .active {
    font-weight: 500;
    color: $primary-color;
    border-bottom: 2px solid $primary-color;
  }
}

.main {
  padding: 12px 16px;
  .title {
    font-weight: 500;
    font-size: 12px;
    color: $primary-color;
    margin-bottom: 15px;
  }
  /deep/ .el-form-item__label{
    font-size: 12px;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    /*background: #F7F7F7;*/
    border-radius: 2px;
    /*padding: 15px 20px;*/
    margin-bottom: 20px;

    .item {
      font-size: 14px;
      width: 25%;
      margin-bottom: 16px;

      .la {
        color: #7f7f7f;
        margin-bottom: 10px;
      }
    }
  }
}

/deep/ .window__body {
  padding: 0px !important;
}
</style>