uniDataCenter/pages/reimbursemen.../submitApply....

<template>
  <view style="background: linear-gradient(180deg, #333947 0%, #242A37 100%);" v-if="!table_loading">
    <view v-if="apply_id" style="display: flex;align-items: center;margin-left:32rpx;margin-top:20rpx">
      <text style="color:#FFFFFF;font-size:26rpx;">报销单（序列号：{{reimburse_info&&reimburse_info.id}}）</text>
      <view :class="['statusReimbursement',reimburse_info.status==0?'bg-4F7EFF':reimburse_info.status==1?'bg-ECBE64':reimburse_info.status==2?'bg-58BCA6':reimburse_info.status==3?'bg-F03F5C':'']" v-if="reimburse_info">
        {{reimburse_info.is_resubmited==1?'已重新提审':(reimburse_info.status==0?'已保存':reimburse_info.status==1?'待审核':reimburse_info.status==2?'审核通过':reimburse_info.status==3?'审核驳回':'')}}
      </view>
    </view>

    <view class="applyTop">
      <view class="item">公司：{{reimburse_info&&reimburse_info.company?reimburse_info.company:'-'}}</view>
      <view class="item">部门：{{reimburse_info&&reimburse_info.department?reimburse_info.department:'-'}}</view>
      <view class="item">岗位：{{reimburse_info&&reimburse_info.station_name?reimburse_info.station_name:'-'}}</view>
      <view class="item">经手人：{{reimburse_info&&reimburse_info.staff_name?reimburse_info.staff_name:'-'}}</view>
    </view>
    <view class="table">
      <view class="self-table self-table-border">
        <view class="self-table-tr self-table-head">
          <view class="self-table-th" style="width:80rpx;flex: initial;" v-if="editFlag">
            <view :class="['self-checkbox',allSelection?'self-checkbox-active':'']" @click="handleSelectionChange('all')">
              <view class="iconfont icon-queren_icon"></view>
            </view>
          </view>
          <view class="self-table-th">直播日期</view>
          <view class="self-table-th">金额</view>
          <view class="self-table-th border-none" style="width: 200rpx;flex: auto;padding:0">
            <view class="self-table-th table-th">出发</view>
            <view class="flex" style="overflow: hidden;border-top: 2rpx solid #3D4453;">
              <view class="self-table-th table-th">时间</view>
              <view class="self-table-th table-th">地点</view>
            </view>
          </view>
          <view class="self-table-th border-none" style="width: 200rpx;flex: auto;padding:0">
            <view class="self-table-th table-th">到达</view>
            <view class="flex" style="overflow: hidden;border-top: 2rpx solid #3D4453;">
              <view class="self-table-th table-th">时间</view>
              <view class="self-table-th table-th">地点</view>
            </view>
          </view>
          <view class="self-table-th">交通工具</view>
          <view class="self-table-th">事由说明</view>
          <view class="self-table-th">加班类型</view>
          <view class="self-table-th" v-if="editFlag">操作</view>
          <view class="self-table-th" v-if="source=='audit'">核对</view>
        </view>
        <scroll-view class="self-table-body" scroll-y="true">
          <view class="self-table-tr" v-for="(item,index) in data_list" :key="index">
            <view class="self-table-td" style="width:80rpx;flex: initial;" v-if="editFlag">
              <view :class="['self-checkbox',multipleIdArr.indexOf(item.self_id) != -1 ? 'self-checkbox-active' : '']" @click="handleSelectionChange(index)">
                <view class="iconfont icon-queren_icon"></view>
              </view>
            </view>
            <view class="self-table-td">
              <view v-if="item.type==2">{{item.date}}</view>
              <template v-else>
                <view class="liveApplyItem" v-for="(item1) in item.list" :key="'date'+item1.id">
                  {{item1.date}}
                </view>
              </template>
            </view>
            <view class="self-table-td">
              <template v-if="item.type==2">
                <view>{{item.amount}}</view>
                <view style="border-top:1px solid #3D4453" v-if="item.toll_fee">{{item.toll_fee}}</view>
              </template>
              <template v-else>
                <view class="liveApplyItem" v-for="(item1) in item.list" :key="'amount'+item1.id">
                  <view style="width:calc(100%)">
                    <view>{{item1.amount}}</view>
                    <view style="border-top:1px solid #3D4453" v-if="item1.toll_fee">
                      {{item1.toll_fee}}
                    </view>
                  </view>
                </view>
              </template>
            </view>
            <view class="self-table-td flex" style="width: 200rpx;flex: auto;">
              <view class="self-table-td border-none">
                <view v-if="item.type==2">{{item.start_time}}</view>
                <template v-else>
                  <view class="liveApplyItem" v-for="(item1) in item.list" :key="'start_time'+item1.id">
                    <view>{{item1.start_time}}</view>
                  </view>
                </template>
              </view>
              <view class="self-table-td">
                <view v-if="item.type==2">{{item.start_site}}</view>
                <template v-else>
                  <view class="liveApplyItem" v-for="(item1) in item.list" :key="'start_site'+item1.id">
                    <view class="ellipsis_2">{{item1.start_site}}</view>
                  </view>
                </template>
              </view>
            </view>
            <view class="self-table-td flex" style="width: 200rpx;flex: auto;">
              <view class="self-table-td border-none">
                <template v-if="item.type==2">
                  <view>{{item.end_time}}</view>
                </template>
                <template v-else>
                  <view class="liveApplyItem" v-for="(item1) in item.list" :key="'end_time'+item1.id">
                    <view>{{item1.end_time}}</view>
                  </view>
                </template>
              </view>
              <view class="self-table-td">
                <view v-if="item.type==2">{{item.end_site}}</view>
                <template v-else>
                  <view class="liveApplyItem" style="line-height:20px" v-for="(item1) in item.list" :key="'end_site'+item1.id">
                    <view class="ellipsis_2">{{item1.end_site}}</view>
                  </view>
                </template>
              </view>
            </view>
            <view class="self-table-td">
              <view v-if="item.type==2">{{item.car_type == 1 ? '出租车' : '网约车'}}</view>
              <template v-else>
                <view class="liveApplyItem" v-for="(item1) in item.list" :key="'car_type'+item1.id">
                  {{item1.car_type == 1 ? '出租车' : '网约车'}}
                </view>
              </template>
            </view>
            <view class="self-table-td">
              <template v-if="item.type==2">
                <view class="ellipsis ellipsis_2">
                  {{item.reason?item.reason:'-'}}
                  <text v-if="item.remark">
                    ({{item.remark?item.remark:'-'}})
                  </text>
                </view>
                <view style="border-top:1px solid #3D4453" v-if="item.toll_fee">过路费</view>
              </template>
              <template v-else>
                <view class="liveApplyItem" v-for="(item1) in item.list" :key="'reason'+item1.id">
                  <view style="width:100%">
                    <view class="ellipsis ellipsis_2" style="line-height:18px">
                      {{item1.reason?item1.reason:'-'}}
                      <text v-if="item1.remark">
                        ({{item1.remark?item1.remark:'-'}})
                      </text>
                    </view>
                    <view style="border-top:1px solid #3D4453" v-if="item1.toll_fee">过路费
                    </view>
                  </view>
                </view>
              </template>
            </view>
            <view class="self-table-td">
              <view v-if="item.type==2">普通加班</view>
              <template v-else>
                <view class="liveApplyItem" v-for="(item1) in item.list" :key="'type'+item1.id">
                  直播加班
                </view>
              </template>
            </view>
            <view class="self-table-td flex-center" v-if="editFlag">
              <!-- 其他报销 -->
              <template v-if="item.type==2">
                <text v-if="item.status==0||item.status==3" type="text" size="small" @click.stop="editClick(item,1,1)" class="c-5B80F4">编辑</text>
                <text v-else type="text" size="small" @click.stop="editClick(item,1,2)" class="c-5B80F4">查看</text>
              </template>
              <!-- 直播报销 -->
              <template v-else>
                <view class="liveApplyItem" v-if="item.list&&item.list.length>0">
                  <text v-if="item.list[0].status==0||item.list[0].status==3" type="text" size="small" @click.stop="editClick(item.list[0],0,1)" class="c-5B80F4">编辑</text>
                  <text v-else type="text" size="small" @click.stop="editClick(item.list[0],0,2)" class="c-5B80F4">查看</text>
                </view>
              </template>
            </view>
            <view class="self-table-td" v-if="source=='audit'">
              <view class="self-table-td border-none" v-if="item.type==2">
                <view :class="['self-checkbox',checkList.indexOf(item.id) != -1 ? 'self-checkbox-active' : '']" @click="checkCheckbox" :data-id='item.id'>
                  <view class="iconfont icon-queren_icon"></view>
                </view>
              </view>
              <template v-else>
                <view class="liveApplyItem" v-for="(item1) in item.list" :key="'check'+item1.id">
                  <view :class="['self-checkbox',checkList.indexOf(item1.id) != -1 ? 'self-checkbox-active' : '']" @click="checkCheckbox" :data-id='item1.id'>
                    <view class="iconfont icon-queren_icon"></view>
                  </view>
                </view>
              </template>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <view class="loading_hint" v-if="data_list.length==0">暂无订单</view>

    <view style="margin-left:40rpx">
      <view class="topDataItem">
        <view class="label">报销摘要:</view>
        <text class="labelCon">加班打车</text>
      </view>
      <view class="topDataItem">
        <view class="label">报销金额:</view>
        <text class="labelCon" style="color:#4f7eff;font-weight:bold">¥{{$formatNum(amount)}}</text>
      </view>
      <view class="topDataItem" style="display: block;">
        <view class="label flex" style="align-items: flex-start;"><text style="color:#FF2B2B">*</text>图片附件：<view style="color:#FF2B2B;flex:1">网约车需上传发票和行程单明细截图，出租车和过路费需上传小票。文件不可超过2M。</view>
        </view>
        <view class="flex" style="margin-top:20rpx" v-if="editFlag">
          <view class="imgbox imgbox2" v-for="(item,index) in file_urls" :key="'file'+index" @click="openFile(index,'file_urls')">
            <view class="iconfont icon-butongguo_icon" @click.stop="removeFile(index)"></view>
            <image src="../../static/img/pdf.png" mode="widthFix" v-if="item.indexOf('.pdf')!=-1"></image>
            <image v-else :src="item"></image>
          </view>
          <view class="uploadFile" @click="uploadFileEvent">+</view>
        </view>
        <view class="flex" style="margin-top:20rpx" v-else>
          <view class="imgbox" v-for="(item,index) in file_urls" :key="'file'+index" @click="openFile(index,'file_urls')">
            <image src="../../static/img/pdf.png" mode="widthFix" v-if="item.indexOf('.pdf')!=-1"></image>
            <image v-else :src="item" mode="widthFix"></image>
          </view>
        </view>
      </view>
      <view class="topDataItem tMar17 flex" style="align-items: flex-start;" v-if="editFlag">
        <view class="label" style="margin-top:14rpx">备注:</view>
        <textarea class="textarea" :value='remarks' placeholder-style="color:#B8B8B8" placeholder="请输入备注" @input="textareaBlur" />
      </view>
      <view class="topDataItem tMar10" v-else>
        <view class="label">备注:</view>
        <text class="labelCon">{{remarks?remarks:''}}</text>
      </view>
      <view class="topDataItem tMar20" v-if="apply_id&&reimburse_info&&reimburse_info.status!=0">
        <view class="label">附件:</view>
        <view class="flex" style="flex-wrap: wrap;">
          <view class="enclosure" v-for="(item,index) in reimburse_info.file_submits" :key="'file'+index" @click.stop="openFile(index)">
            <view class="iconfont icon-xiazai_icon"></view>
            {{item && item.split('/') && item.split('/')[item.split('/').length - 1] ? item.split('/')[item.split('/').length - 1]:'附件'}}
          </view>
        </view>
      </view>

      <view class="h3_title">审批流程</view>
      <view class="timelineBox tMar15">
        <view class="timeLineItem" v-for="(item, index) in examine_info" :key="index">
          <view :class="['iconfont icon-shenpi_icon']" :style="item.execute_info&&item.execute_info.status==2?'color:#5B80F4':item.execute_info&&item.execute_info.status==3?'color:#FF2B2B':''">
          </view>
          <view class="timeLineContent">
            <view class="contentTime">{{index+1}}级审批
              <text v-if="item.executors&&item.executors.length!=0">({{item.executors.join(',')}})</text>
            </view>
            <template v-if="item.execute_info&&item.execute_info.executor_name">
              <view class="approver">
                <view class="label">审批人:</view>
                {{item.execute_info.executor_name}} ·
                {{item.execute_info&&item.execute_info.status==1?'审核中':item.execute_info&&item.execute_info.status==2?'已通过':item.execute_info&&item.execute_info.status==3?'已驳回':''}}
              </view>
              <view class="approver">
                <view class="label" v-if="item.execute_info&&item.execute_info.execute_time">审批时间:
                </view>
                {{item.execute_info.execute_time}}
              </view>
            </template>
            <view class="approver" v-if="item.execute_info&&item.execute_info.execute_remarks">
              <view class="label">审批意见：</view>
              <view style="flex:1">{{item.execute_info.execute_remarks}}</view>
            </view>
            <view class="approver" v-if="item.execute_info&&item.execute_info.execute_file_url&&item.execute_info.execute_file_url.length>0">
              <view class="label">附件：</view>
              <view style="flex:1;display: flex;align-items: center;flex-wrap: wrap">
                <view v-for="(cf,cfidx) in item.execute_info.execute_file_url" :key="cfidx" class="pointer tMar5">
                  <view @click="openFile(cfidx,'uploadFileList',cf.file_url)" class="enclosureNow">{{cf.file_name}}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <template v-if="commentList&&commentList.length>0">
        <view class="h3_title">回复</view>
        <view>
          <view v-for="(c,cidx) in commentList" :key="c.id" class="tMar10">
            <text class="c-999 f20 rMar10">{{c.created_at?c.created_at:'-'}}</text>
            <text class="f24">{{c.staff_name?c.staff_name:'-'}}: </text>
            <text class="f24 line18">{{c.comment?c.comment:'-'}}</text>
            <view v-if="c.file_url&&c.file_url.length>0" style="display: flex;align-items: center;flex-wrap: wrap">
              <view v-for="(cf,cfidx) in c.file_url" :key="cfidx" class="pointer tMar5">
                <view @click="openFile(cfidx,'uploadFileList',cf.file_url)" class="enclosureNow">{{cf.file_name}}</view>
              </view>
            </view>
          </view>
        </view>
      </template>

      <template v-if="(p_id&&source == 'audit') || (orderStatus==1&&selfFlag)">
        <view class="topDataItem tMar17 flex" style="align-items: flex-start;position: relative">
          <view class="label" style="margin-top:14rpx">备注:</view>
          <textarea class="textarea" placeholder-style="color:#B8B8B8" placeholder="请输入备注,输入@即可选择需要提醒的人" v-model="remarks_audit" @input="remarks_auditBlur" />
          <view @click="uploadFileEventComment" class="addFileCss">添加附件</view>

          <view v-show="showStaffList" class="staffCss">
            <view class="flex" v-for="(c,cidx) in commentStaffList" :key="c.staff_id" @click="chooseStaff(c)">
<!--              <view :style="c.checked ? 'color: #0c4fe7' : ''">{{c.staff_name}}</view>-->
              <view>{{c.staff_name}}</view>
            </view>
          </view>
        </view>
        <view class="label" style="font-size: 24rpx;color: #FF2B2B;line-height: 40rpx;padding-left: 80rpx;"><text>*</text>不通过报销单需备注原因,@人员功能仅在回复时有效,否则将以备注内容显示.</view>
        <view v-if="uploadFileList&&uploadFileList.length>0" style="display: flex;align-items: center;flex-wrap: wrap;padding-left: 80rpx">
          <view v-for="(cf,cfidx) in uploadFileList" :key="cfidx" class="pointer tMar5" style="display: flex;align-items: center;">
            <text  @click="openFile(cfidx,'uploadFileList',cf.url)" class="enclosureNow">{{cf.filename}}</text>
            <text @click="deleFile(cfidx)"  class="iconfont icon-shanchu_icon pointer lMar8 f18"></text>
          </view>
        </view>
      </template>

    </view>
    <view class="buttons">
      <view class="button button4" v-if="reimburse_info&&reimburse_info.status==2" @click="printDOM">导出</view>
      <view class="button button4" v-if="(p_id&&source == 'audit') || (orderStatus==1&&selfFlag)" @click="replyClick">回 复</view>
      <template v-if="!p_id&&source!='audit'">
        <view class="button button4" @click="addSubmit(0)" v-if="!failFlag&&editFlag">保 存</view>
        <view class="button button2" @click="addSubmit(1)" v-if="editFlag">提 审</view>
<!--        <view class="button button3" v-if="reimburse_info&&reimburse_info.status==3&&reimburse_info.is_resubmited != 1" @click="delReimbSubmit">作废</view>-->
        <view class="button button3" v-if="failFlag&&editFlag" @click="delReimbSubmit">作废</view>
      </template>
      <template v-else-if="reimburse_info&&reimburse_info.status==1&&reimburse_info.enable_examine">
        <view class="button button2" @click="examineOperate(1)">通过</view>
        <view class="button button3" @click="examineOperate(2)">不通过</view>
      </template>

    </view>
    <wm-watermark :text="real_name"></wm-watermark>
  </view>
</template>

<script>
export default {
  data () {
    return {
      real_name: '',
      apply_id: '',
      reimburse_info: {},
      examine_info: {},
      data_list: [],
      amount: 0,
      remarks_audit: '',
      remarks: '',
      source: '',
      p_id: '',
      editFlag: false,
      failFlag: false,
      table_loading: true,
      file_urls: [],
      allSelection: false,
      multipleSelection: [],
      multipleIdArr: [],
      checkList: [],
      commentList:[],//评论列表
      commentStaffList:[],//评论@人员列表
      uploadFileList:[],//上传文件的列表,备注上的添加附件
      orderStatus:'',//审核状态是什么，主要用来看是否是待审核
      showStaffList:false,
      selfFlag:true
      // staffChecked:[],
    }
  },
  async onLoad (option) {
    await this.$onLaunched;
    this.real_name = uni.getStorageSync('userInfo').info.real_name
    if (option && option.source) {
      this.source = option.source
    }
    if(option && option.status){
      this.orderStatus = option.status
    }
    if (option && option.p_id) {
      this.p_id = option.p_id
    }
    if(option.page == 'reimbursementPage'){
		if (this.apply_id) {
		  this.reimburseDetailList()
      this.commentList_init()
      this.eitStaff()
		} else {
		  this.getReimburseApplyList()
		}
	}else{
		if (option && option.apply_id) {
		  this.apply_id = option.apply_id
		  this.reimburseDetailList()
      this.commentList_init()
      this.eitStaff()
		} else {
		  this.editFlag = true
		  this.getReimburseApplyList()
		}
	}
  },
  methods: {
    deleFile(index){ //删除多余上传的文件,不需要走后台接口
      this.uploadFileList.splice(index,1)
    },
    uploadFileEventComment () {
      let _this = this;
      wx.chooseImage({
        success (res) {
          const tempFilePaths = res.tempFilePaths
          uni.showLoading({
            title: '加载中'
          });
          wx.uploadFile({
            url: _this.$rootDocment + _this.$api.manage_fileUpload,
            filePath: tempFilePaths[0],
            name: 'file',
            header: {
              'sessionKey': uni.getStorageSync('session_key') ? uni.getStorageSync(
                  'session_key') : false
            },
            formData: {
              'admin_id': uni.getStorageSync('admin_id'),
              'ttl': uni.getStorageSync('ttl'),
              'sign': uni.getStorageSync('sign')
            },
            success (res) {
              uni.hideLoading()
              const data = res.data
              _this.uploadFileList.push(JSON.parse(data).rst)
            },
            fail (err) {
              uni.hideLoading()
            }
          })
        }
      })
    },
    remarks_auditBlur (e) {
      this.remarks_audit = e.detail.value;
      this.showStaffList = false
      if(e.detail.value.charAt(e.detail.value.length-1) == '@'){
        this.showStaffList = true
      }
    },
    chooseStaff(item){
      if(this.remarks_audit.charAt(this.remarks_audit.length-1) == '@'){
        this.remarks_audit = this.remarks_audit.substr(0,this.remarks_audit.length-1)
      }
      this.remarks_audit += '@'+item.staff_name+' '
      this.showStaffList = false

      //先不要删
      // let idx = this.staffChecked.indexOf(item.staff_name)
      // if(idx>-1){
      //   this.staffChecked.splice(idx,1)
      //   this.remarks_audit = this.remarks_audit.replace('@'+item.staff_name+' ','')
      //   item.checked=false
      // }else{
      //   this.staffChecked.push(item.staff_name)
      //   if(this.remarks_audit.charAt(this.remarks_audit.length-1) == '@'){
      //     this.remarks_audit = this.remarks_audit.substr(0,this.remarks_audit.length-1)
      //   }
      //   this.remarks_audit += '@'+item.staff_name+' '
      //   item.checked=true
      // }
    },
    eitStaff(){ // 获取@人员列表
      if(this.apply_id == ''){
        uni.showToast({
          title: '无序列号',
          icon: 'none'
        });
        return false
      }
      this.staffChecked = []
      this.$req(this.$api.auditcomment_staffList, 'get', {
        submit_id: this.apply_id
      }, (res) => {
        if (res && res.errno == 0) {
          this.commentStaffList = res.rst
          // this.commentStaffList.forEach(i=>{
          //   i.checked = false
          // })
        } else if (res.errno != 4002) {
          uni.showToast({
            title: res.err,
            icon: 'none'
          });
        }
      }), (err) => {
        uni.showToast({
          title: err,
          icon: 'none'
        });
      }
    },
    commentList_init(){ //回复列表
      uni.showLoading({
        title: '加载中'
      });
      this.$req(this.$api.auditcommentList, 'get', {
        submit_id: this.apply_id,
        page: 1,
        page_size: 500
      }, (res) => {
        if (res && res.errno == 0) {
          this.commentList = res.rst.data
        } else if (res.errno != 4002) {
          uni.showToast({
            title: res.err,
            icon: 'none'
          });
        }
        uni.hideLoading()
      }), (err) => {
        uni.showToast({
          title: err,
          icon: 'none'
        });
        uni.hideLoading()
      }
    },
    replyClick(){ //点击回复
      if(this.remarks_audit == ''){
        uni.showToast({
          title: '回复内容必填',
          icon: 'none'
        });
        return false
      }
      uni.showLoading({
        title: '加载中'
      });
      let filesNow = []
      this.uploadFileList.forEach(item=>{
        filesNow.push(item.url)
      })//格式化文件
      this.$req(this.$api.auditcomment_add, 'post', {
        submit_id: this.apply_id,
        comment: this.remarks_audit,
        file_url: filesNow
      }, (res) => {
        if (res && res.errno == 0) {
          this.commentList_init()
          this.remarks_audit = ' '
          this.uploadFileList = []
        } else if (res.errno != 4002) {
          uni.showToast({
            title: res.err,
            icon: 'none'
          });
        }
        uni.hideLoading()
      }), (err) => {
        uni.showToast({
          title: err,
          icon: 'none'
        });
        uni.hideLoading()
      }
    },
    editClick (item, type, isEdit) {
      //type 1其他报销 0直播报销
      if (type == 1) {
        uni.navigateTo({
          url: '../addExpenseFormElse/addExpenseForm?item=' + encodeURIComponent(JSON.stringify(item)) + '&isEdit=' + isEdit +'&page=submitApply'
        })
      } else {
        // isEdit是否可编辑,0新增,1可编辑,2仅查看
        uni.navigateTo({
          url: '../addExpenseForm/addExpenseForm?item=' + encodeURIComponent(JSON.stringify(item)) + '&isEdit=' + isEdit+'&page=submitApply'
        })
      }
    },
    checkCheckbox (e) {//核对
      let id = e.currentTarget.dataset.id;
      if (this.checkList.indexOf(id) != -1) {
        this.checkList = this.checkList.filter((v) => {
          return v != id
        })
      } else {
        this.checkList.push(id)
      }
    },
    getReimburseApplyList () {
      uni.showLoading({
        title: '加载中'
      });
      this.$req(this.$api.reimburseApplyList, 'get', {
      }, (res) => {
        uni.hideLoading()
        this.table_loading = false;
        if (res && res.errno == 0) {
          this.reimburse_info = res.rst.reimburse_info;
          this.examine_info = res.rst.examine_info;
          var arr = res.rst.data_list
          this.data_list = [];
          arr.forEach((item, index) => {
            item.list.forEach((item_list) => {
              item_list.ischeck = false
            })
            if (item.type == 2) {
              this.data_list = this.data_list.concat(item.list)
            } else {
              this.data_list.push(item)
            }
          });
          this.data_list.forEach((item, index) => {
            item.self_id = index
          })
        } else if (res.errno != 4002) {
          uni.showToast({
            title: res.err,
            icon: 'none'
          });
        }
      }), (err) => {
        this.table_loading = false
        uni.hideLoading()
      }
    },
    handleSelectionChange (type) { //选择
      if (type == 'all') {
        this.allSelection = !this.allSelection
        if (this.allSelection) {
          this.multipleSelection = this.data_list
        } else {
          this.multipleSelection = []
        }
      } else {
        let arr = this.multipleSelection.filter((v) => {
          return v.self_id == this.data_list[type].self_id
        })
        if (arr.length == 0) {
          this.multipleSelection.push(this.data_list[type])
        } else {
          this.multipleSelection = this.multipleSelection.filter((v) => {
            return v.self_id != this.data_list[type].self_id
          })
        }
      }
      this.multipleIdArr = this.multipleSelection.map((v) => {
        return v.self_id
      })
      this.amount = 0;
      if (this.multipleSelection && this.multipleSelection.length != 0) {
        this.multipleSelection.forEach((item) => {
          if (item.type == 2) {
            this.amount = parseFloat((this.amount + Number(item.amount) + Number(item.toll_fee))
              .toFixed(10))
          } else {
            item.list.forEach((item1) => {
              this.amount = parseFloat((this.amount + Number(item1.amount) + Number(item1
                .toll_fee)).toFixed(10))
            })
          }
        })
      }
    },
    removeFile (index) { //删除文件
      uni.showModal({
        title: '提示',
        content: '确定要删除该文件？',
        confirmText: '确定',
        success: (res) => {
          if (res.confirm) {
            this.file_urls.splice(index, 1)
          } else if (res.cancel) { }
        }
      })
    },
    uploadFileEvent () {
      let _this = this;
      wx.chooseImage({
        success (res) {
          const tempFilePaths = res.tempFilePaths
          uni.showLoading({
            title: '加载中'
          });
          wx.uploadFile({
            url: _this.$rootDocment + _this.$api.manage_fileUpload,
            filePath: tempFilePaths[0],
            name: 'file',
            header: {
              'sessionKey': uni.getStorageSync('session_key') ? uni.getStorageSync(
                'session_key') : false
            },
            formData: {
              'admin_id': uni.getStorageSync('admin_id'),
              'ttl': uni.getStorageSync('ttl'),
              'sign': uni.getStorageSync('sign')
            },
            success (res) {
              uni.hideLoading()
              const data = res.data
              _this.file_urls.push(JSON.parse(data).rst.url)
            },
            fail (err) {
              uni.hideLoading()
              console.log(err, 'err')
            }
          })
        }
      })
    },
    examineOperate (status) { //审核报销单
      if (status == 2 && this.remarks_audit == '') {
        uni.showToast({
          title: '不通过时,备注为必填项',
          icon: 'none'
        });
        return false
      } else {
        uni.showLoading({
          title: '加载中'
        });
        let filesNow = []
        this.uploadFileList.forEach(item=>{
          filesNow.push(item.url)
        })//格式化文件
        this.$req(this.$api.audit_operate, 'post', {
          process_id: this.p_id,
          status: status,
          remarks: this.remarks_audit,
          file_url: filesNow
        }, (res) => {
          uni.hideLoading()
          if (res && res.errno == 0) {
            this.goBack(status == 1 ? 2 : 3)
          } else if (res.errno != 4002) {
            uni.showToast({
              title: res.err,
              icon: 'none'
            });
          }
        }), (err) => {
          uni.hideLoading()
        }
      }
    },
    delReimbSubmit () { //作废报销单
      uni.showModal({
        title: '提示',
        content: '确定要作废此报销单？',
        confirmText: '确定',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '加载中'
            });
            this.$req(this.$api.delReimbSubmit, 'post', {
              id: this.apply_id
            }, (res) => {
              uni.hideLoading()
              if (res && res.errno == 0) {
                this.goBack(0, 'resubmited')
              } else if (res.errno != 4002) {
                uni.showToast({
                  title: res.err,
                  icon: 'none'
                });
              }
            }), (err) => {
              uni.hideLoading()
            }
          } else if (res.cancel) { }
        }
      })
    },
    addSubmit (status) { //提审或保存
      if (!this.multipleSelection || this.multipleSelection.length == 0) {
        uni.showToast({
          title: '请选择您要报销的明细',
          icon: 'none'
        });
        return
      }
      var rei_ids = []; //直播报销id数组
      var detail_ids = []; //其他报销明细id数组
      this.multipleSelection.forEach((item) => {
        if (item.type == 2) { //普通加班
          detail_ids.push(item.id)
        } else if (item.list && item.list.length > 0) {
          rei_ids.push(item.list[0].rei_id)
        }
      })

      if (!this.file_urls || this.file_urls.length == 0) {
        uni.showToast({
          title: '请上传附件',
          icon: 'none'
        });
        return
      }
      uni.showLoading({
        title: '加载中'
      });
      var params = {
        rei_ids: rei_ids,
        detail_ids: detail_ids,
        note: '加班打车', //报销摘要，暂时写死，怕以后回加别的
        remark: this.remarks,
        amount: this.amount,
        file_urls: this.file_urls,
        submit: status,
      }
      var axios_api = this.$api.addReimbSubmit
      if (this.apply_id) {
        axios_api = this.$api.editReimbSubmit
        params.id = this.apply_id
      }
      this.$req(axios_api, 'post', params, (res) => {
        uni.hideLoading()
        if (res && res.errno == 0) {
			if(status == 1 && this.reimburse_info.status == 3){
				this.goBack(-9);//驳回重新提审，新增订单
			}else{
				if (this.apply_id) {//编辑
				  this.goBack(status)
				} else {//新增
				  this.goBack(-9)
				}
			}
          
        } else if (res.errno != 4002) {
          uni.showToast({
            title: res.err,
            icon: 'none'
          });
        }
      }), (err) => {
        uni.hideLoading()
      }

    },
    printDOM () { //导出
      uni.showModal({
        title: '提示',
        content: '导出报销详情，请使用手机自带的长截图！',
        showCancel: false,
        confirmText: '我知道了',
        success: function (res) {
          if (res.confirm) { } else if (res.cancel) { }
        }
      })
    },
    textareaBlur (e) {
      this.remarks = e.detail.value;
    },
    reimburseDetailList () { //报销单详情
      uni.showLoading({
        title: '加载中'
      });
      this.$req(this.$api.reimburseDetailList, 'get', {
        id: this.apply_id
      }, (res) => {
        uni.hideLoading()
        this.table_loading = false;
        if (res && res.errno == 0) {
          this.reimburse_info = res.rst.reimburse_info;
          this.examine_info = res.rst.examine_info;
          if(uni.getStorageSync('userInfo').info.id == this.reimburse_info.staff_id){
            this.selfFlag=true
          }else{
            this.selfFlag=false
          }
          var arr = res.rst.data_list
          this.data_list = [];
          arr.forEach((item, index) => {
            item.list.forEach((item_list) => {
              item_list.ischeck = false
            })
            if (item.type == 2) {
              this.data_list = this.data_list.concat(item.list)
            } else {
              this.data_list.push(item)
            }
          });
          this.amount = this.reimburse_info.amount
          this.remarks = this.reimburse_info.remark

          // 附件
          if (this.reimburse_info.file_urls && this.reimburse_info.file_urls.length > 0) {
            this.file_urls = this.reimburse_info.file_urls
          }
          //是否可编辑 expenseOverview:报销概览 audit:审核列表
          if (this.source != 'expenseOverview' && !this.p_id && this.source != 'audit' && (!this
            .apply_id || this.apply_id == '' || (this.reimburse_info && (this.reimburse_info
              .status == 0||this.reimburse_info
              .status == 3)))) { //可编辑
            if(this.selfFlag){//是否是本人
              this.editFlag = true
            }else{
              this.editFlag = false
            }
          } else {
            this.editFlag = false
          }
          if (this.source != 'expenseOverview' && !this.p_id && this.source != 'audit' && (this
            .apply_id && this.reimburse_info && this.reimburse_info.status == 3 && this
              .reimburse_info.is_resubmited != 1)) { //是否为驳回状态，且不是审核人员
            this.failFlag = true
          } else {
            this.failFlag = false
          }
		  this.allSelection = false;
		  this.handleSelectionChange('all')

          //明细显示回显
          var echo_arr = []
          this.data_list.forEach((item, index) => {
            item.self_id = index
            if (item.is_selected == 1) {
              echo_arr.push(item)
            }
          })
          this.multipleSelection = echo_arr;
          this.multipleIdArr = this.multipleSelection.map((v) => {
            return v.self_id
          })
        } else if (res.errno != 4002) {
          uni.showToast({
            title: res.err,
            icon: 'none'
          });
        }
      }), (err) => {
        this.table_loading = false
        uni.hideLoading()
      }
    },
    openFile (index,type1,fileurl) {
      let url = '';
      if (type1 == 'file_urls') {
        url = this.file_urls[index]
      } else if(type1 == 'uploadFileList'){
        if(fileurl){
          url = fileurl
        }else{
          uni.showToast({
            title: '链接找不到',
            icon: 'none'
          });
        }
      }else {
        url = this.reimburse_info.file_submits[index]
      }
	  url = url.replace(/live-data-center.oss-cn-beijing.aliyuncs.com/, (this.$rootDocment.split('/'))[(this.$rootDocment.split('/')).length - 1] + '/oss')
      url = url.replace('http://','https://')
	  if (url[0] == '/') {
        url = 'https:' + url
      }
      let name = url.split('/')[url.split('/').length - 1]
      let type = name.split(".")[name.split(".").length - 1];
      let image = ["JPG", "JPEG", "PNG"];
      let file = ["DOC", "XLS", "PPT", "PDF", "DOCX", "XLSX", "PPTX"];
      let urls = [];
	  urls.push(url);
      // 如果文件是图片类型
      if (image.indexOf(type.toLocaleUpperCase()) > -1) {
        uni.previewImage({
          urls: urls,
          success: () => { },
          fail: (e) => {
            console.log(e);
            showModalWithText('预览文件失败')
          },
        });
      }
      // 如果文件是DOC/XLS/PPT/PDF/DOCX/XLSX/PPTX类型
      else if (file.indexOf(type.toLocaleUpperCase()) > -1) {
        uni.showLoading({
          title: '加载中'
        });
        // 小程序配置的合法域名为https协议
        if (url.indexOf("http") > -1 && url.indexOf("https") === -1) {
          url = url.replace("http", "https");
        }
        uni.downloadFile({
          url: url,
          success: function (res) {
            uni.hideLoading()
            var filePath = res.tempFilePath;
            uni.openDocument({
              filePath: filePath,
              fileType: type.toLocaleLowerCase(),
              success: function (res) {
                console.log('打开文档成功');
                // 提示：预览文件失败
              },
              fail: (e) => {
                uni.hideLoading()
                console.log(e);
                // 提示：预览文件失败
                uni.showToast({
                  title: '预览文件失败',
                  icon: 'none'
                });
              },
            });
          },
          fail: function (err) {
            // 提示：预览文件失败
            uni.showToast({
              title: '预览文件失败',
              icon: 'none'
            });
          },
        });
      } else {
        // 提示：此类型文件暂不支持预览
        uni.showToast({
          title: '此类型文件暂不支持预览',
          icon: 'none'
        });
      }
    },
    goBack (status, is_resubmited) {
      let pages = getCurrentPages(); // 当前页面
      let beforePage = pages[pages.length - 2]; // 上一页
      uni.navigateBack({
        success: function () {
          beforePage.onLoad({ page: 'previousPage', previousPageStatus: status, is_resubmited: is_resubmited }); // 执行上一页的onLoad方法
        }
      });
    }

  }
}
</script>

<style scoped lang="scss">
@import "@/common/css/table.scss";

.textarea {
  height: 90rpx;
  background: #373e4e;
  flex: 1;
  margin-right: 20rpx;
  padding: 10rpx;
  color: #ffffff;
  font-size: 26rpx;
  line-height: 34rpx;
  min-height: 150rpx;
}

.timeLineItem {
  display: flex;
  align-items: flex-start;
  margin-top: 26rpx;

  .iconfont {
    font-size: 28rpx;
    margin-top: 6rpx;
    margin-right: 16rpx;
    color: #828282;
  }

  .timeLineContent {
    .approver {
      font-size: 24rpx;
      line-height: 40rpx;
      color: #ffffff;
      display: flex;

      .label {
        font-size: 24rpx;
        color: #cec8c8;
        margin-right: 10rpx;
      }
    }

    .contentTime {
      font-size: 28rpx;
      color: #ffffff;
      line-height: 40rpx;

      text {
        font-size: 28rpx;
      }
    }
  }
}

.topDataItem {
  display: flex;
  align-items: flex-start;
  margin-top: 36rpx;

  .label {
    color: #b8b8b8;
    font-size: 26rpx;
    line-height: 36rpx;
    margin-right: 20rpx;
  }

  .labelCon {
    color: #ffffff;
    font-size: 26rpx;
    line-height: 36rpx;
    flex: 1;
  }
  .addFileCss{
    position: absolute;
    right: 0;
    bottom: 0;
    color: #0c4fe7;
    font-size: 26rpx;
    z-index: 3;
    padding: 20rpx 30rpx;
  }
  .staffCss{
    position: absolute;
    right: 20rpx;
    top: -100rpx;
    font-size: 28rpx;
    z-index: 3;
    width: 300rpx;
    height: 150rpx;
    background-color: #373e4e;
    overflow-y: auto;
    padding: 10rpx;
    border-radius: 8rpx;
    view {
      line-height: 48rpx;
    }
  }
}

.h3_title {
  color: #b8b8b8;
  font-size: 26rpx;
  line-height: 36rpx;
  margin-top: 36rpx;
}

.statusReimbursement {
  font-size: 20rpx;
  color: #fff;
  background: #ecbe64;
  line-height: 40rpx;
  display: inline-block;
  padding: 0 8rpx;
  font-weight: bold;
  border-radius: 8rpx;
  margin-left: 8rpx;
}

.table {
  margin: 20rpx 32rpx 0;
  width: 100%;
  overflow-x: auto;

  .liveApplyItem {
    height: 140rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2rpx solid #3d4453;
  }
}

.loading_hint {
  background: #373e4e;
  margin-left: 32rpx;
}

.self-table {
  width: 2000rpx;

  .border-none {
    &::after {
      width: 0 !important;
    }
  }

  .self-table-tr {
    font-size: 24rpx;
    line-height: 30rpx;
  }

  .table-th {
    line-height: 60rpx;
  }
}

.applyTop {
  background: linear-gradient(160deg, #87b5ff 0%, #4f7eff 100%);
  border-radius: 6rpx;
  padding: 18rpx 24rpx;
  margin: 16rpx 32rpx;

  .item {
    color: #ffffff;
    font-size: 26rpx;
    line-height: 36rpx;
    margin: 7rpx 0;
  }
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 90rpx 0;
  margin-top: 15rpx;

  .button {
    width: 156rpx;
    height: 70rpx;
    border-radius: 8rpx;
    border: 2rpx solid #979797;
    color: #747474;
    font-size: 28rpx;
    line-height: 66rpx;
    text-align: center;
    margin: 0 22rpx;
  }

  .button2 {
    background: #5b80f4;
    border-color: #5b80f4;
    color: #ffffff;
  }

  .button3 {
    background: #e7605a;
    border-color: #e7605a;
    color: #ffffff;
  }

  .button4 {
    background: #f39f2f;
    border-color: #f39f2f;
    color: #ffffff;
  }
}
.enclosureNow {
  color: #ffffff;
  margin-right: 10rpx;
  cursor: pointer;
  background: #373e4e;
  border: 1rpx solid #5d5d5d;
  font-size: 18rpx;
  line-height: 30rpx;
  border-radius: 6rpx;
  display: flex;
  align-items: center;
  margin-bottom: 5rpx;
  padding: 0 9rpx;
}
.enclosure {
  color: #ffffff;
  margin-right: 20px;
  cursor: pointer;
  background: #373e4e;
  border: 2rpx solid #5d5d5d;
  font-size: 20rpx;
  line-height: 44rpx;
  border-radius: 6rpx;
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
  padding: 0 9rpx;

  .iconfont {
    color: #4f7eff;
    font-size: 20rpx;
    margin-right: 10rpx;
  }
}

.imgbox {
  width: 100rpx;
  height: 100rpx;
  border-radius: 8rpx;
  overflow: hidden;
  position: relative;
  margin-right: 20rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.uploadFile {
  width: 136rpx;
  height: 136rpx;
  background: rgba(91, 128, 244, 0.26);
  border: 2rpx dotted #5b80f4;
  border-radius: 6rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 60rpx;
}

.imgbox2 {
  width: 136rpx;
  height: 136rpx;
  overflow: inherit;

  image {
    width: 100%;
    height: 100%;
    border-radius: 8rpx;
  }

  .iconfont {
    position: absolute;
    color: #ffffff;
    top: -18rpx;
    right: 0;
    font-size: 36rpx;
  }
}

.self-checkbox {
  width: 32rpx;
  height: 32rpx;
  border: 2rpx solid #979797;
  border-radius: 4rpx;
  margin: auto;

  .iconfont {
    font-size: 14rpx;
    color: transparent;
  }

  &.self-checkbox-active {
    border-color: #5b80f4;
    background: #5b80f4;

    .iconfont {
      color: #ffffff;
    }
  }
}
</style>