wangluohuoyun-htqd/src/views/parkReportManagement/dailyReport.vue

// 流水单上报
<template>
  <div class="center">
    <div class="center_css">
      <div class="top_css">
        <el-row>
          <el-col :span="14">
            <el-button type="primary" @click="postponeSubmission" style="margin-right:10px">暂缓上报</el-button>
            <el-button type="primary" @click="batchSubmission" style="margin-right:10px">批量上报</el-button>
            <el-date-picker v-model="value1" value-format="yyyy-MM-dd" @change="dateChange" type="daterange"
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-col>
          <el-col :span="10">
            <div class="screen">
              <el-input class='find' v-model="searchkeyWord" placeholder="可按订单号、姓名、账号查找" @keyup.enter.native="find"
                clearable @change="find" />
              <el-button class="search" @click="find"><img width="16" height="16" style="margin-left: -8px"
                  src="../../../public/img/sousuo.png"></el-button><span class="count_css">共{{
                    deptBudgetTotal
                  }}条</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <div class="search_btn">
              <div :class="search == 1 ? 'search' : 'searchNo'" class="search_item search_block" @click="searchBtn(1)">
                待上报
              </div>
              <div :class="search == 2 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(2)">
                审核中
              </div>
              <div :class="search == 3 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(3)">
                已通过
              </div>
              <div :class="search == 4 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(4)">
                暂缓中
              </div>
              <div :class="search == '' ? 'search' : 'searchNo'" class="search_item" @click="searchBtn('')">
                全部
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-table @selection-change="handleSelectionChange" :data="tableData"
        style="width: 98%; margin: 0 auto; border-radius: 10px" height="68vh" border highlight-current-row>
        <el-table-column type="selection" width="55" :selectable="selectInit">
        </el-table-column>
        <el-table-column type="index" label="序号" width="50">
          <template scope="scope">
            <span v-if="scope.$index < 9">0{{ scope.$index + 1 }}</span>
            <span v-else>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderNo" label="订单编号" min-width="155" />
        <el-table-column prop="driverName" label="司机姓名" />
        <el-table-column prop="payeeName" label="收款人" />
        <el-table-column prop="driverPhone" label="司机账号" />
        <el-table-column prop="serialNumber" label="流水号" />
        <el-table-column prop="amountMoney" label="金额(元)" />
        <el-table-column prop="paymentType" label="类型" />
        <el-table-column prop="escalationStatus" label="状态">
          <template slot-scope="scope1">
            <span>{{ scope1.row.escalationStatus }}</span>
            <el-tooltip class="item" effect="dark" :content="scope1.row.escalationFailureReason" placement="top"
              v-if="scope1.row.escalationStatus == '未通过'">
              <img src="../../../public/img/wenhao.png" alt="" class="ask_css" />
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="paymentDate" label="付款时间" min-width="100" />
        <el-table-column label="操作" min-width="200">
          <template slot-scope="scope">
            <el-link target="_blank" @click="look(scope.row)" type="primary" :underline="false">查看</el-link>
            <el-divider direction="vertical" />
            <el-link target="_blank" type="primary" :underline="false" @click="submission(scope.row)"
              :disabled="scope.row.escalationStatus != '未上报' && scope.row.escalationStatus != '未通过' && scope.row.escalationStatus != '暂缓中'">
              上报</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination :current-page="currentPage" style="text-align: center; margin-top: 10px"
      :page-size="deptCircularPage.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="deptBudgetTotal"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    <el-drawer title="流水单信息" :visible.sync="rightSee">
      <div class="right_css">
        <div class="right_item">单证号：{{ dailyReportData.documentNo }}</div>
        <div class="right_title">实际承运人</div>
        <div class="right_item">{{ dailyReportData.driverName }} </div>
        <div class="right_title">实际承运人统一社会信用代码或证件号码</div>
        <div class="right_item">{{ dailyReportData.driverIdCard }}</div>
        <div class="right_title">车牌号</div>
        <div class="right_item">{{ dailyReportData.carNumber }}</div>
        <div class="right_title">车牌颜色</div>
        <div class="right_item">{{ dailyReportData.carNumberColour }}</div>
        <div class="right_title">运单号</div>
        <div class="right_item">{{ dailyReportData.orderNo }}</div>
        <div class="right_title">分段分单号</div>
        <div class="right_item">{{ '0000' }}</div>
        <div class="right_title">总金额</div>
        <div class="right_item">{{ dailyReportData.amountMoney }}</div>
        <div class="right_title">燃油费用</div>
        <div class="right_item">{{ 0 }}</div>
        <div class="right_title">司机姓名</div>
        <div class="right_item">{{ dailyReportData.driverName }}</div>
        <div class="right_title">司机身份证号</div>
        <div class="right_item">{{ dailyReportData.driverIdCard }}</div>
        <div class="right_title">收款方名称</div>
        <div class="right_item">{{ dailyReportData.payeeName }}</div>
        <div class="right_title">收款人身份证号</div>
        <div class="right_item">{{ dailyReportData.payeeIdCard }}</div>
        <!-- <div class="right_title">收款帐户信息</div>
        <div class="right_item">{{ dailyReportData.driverName }}</div> -->
        <div class="right_title" v-if="dailyReportData.bankKey">收款方银行代码</div>
        <div class="right_item" v-if="dailyReportData.bankKey">{{ dailyReportData.bankKey }}</div>
        <div class="right_title">收款方银行卡开户行</div>
        <div class="right_item">{{ dailyReportData.bankDeposit }}</div>
        <div class="right_title">收款方银行卡银行网点名称</div>
        <div class="right_item">{{ dailyReportData.bankDepositBranch }}</div>
        <div class="right_title">收款方银行卡卡号</div>
        <div class="right_item">{{ dailyReportData.bankCard }}</div>
        <div class="right_title">流水号</div>
        <div class="right_item">{{ dailyReportData.serialNumber }}</div>
        <div class="right_title">实际支付金额</div>
        <div class="right_item">{{ dailyReportData.amountMoney }}</div>
        <div class="right_title">支付凭证文件</div>
        <!-- <div class="right_item">{{ dailyReportData.paymentVoucher }}</div> -->
        <div style="display: flex;" v-if="dailyReportData.paymentVoucher">
          <div v-for="(item, index) in dailyReportData.paymentVoucher.split(',')" :key="index">
            <img :src="item" class="img_css" @click="enlarge(item)">
          </div>
        </div>
        <div class="right_btn">
          <el-button @click="rightSee = false">关闭</el-button>
        </div>
      </div>
    </el-drawer>
    <el-image-viewer v-if="imgsVisible" :on-close="closeImgViewer" :url-list="srcList" style="z-index:9999" />
  </div>
</template>
<script>
import {
  dailyReportGetList,
  dailyReportDeferEscalation,
  dailyReportBatchEscalation,
  dailyReporGetInfo
} from '@/api/parkReportManagement'
export default {
  components: {
    "el-image-viewer": () =>
      import("element-ui/packages/image/src/image-viewer"),
  },
  data() {
    return {
      show: false,
      tableData: [],
      // 分页
      searchkeyWord: '',
      currentPage: 1,
      pageSize: 10,
      deptBudgetTotal: 0,
      deptCircularPage: {},
      search: '',
      modification: [],
      dailyReportData: {
        // hyFreightSettlementInfo: {}
      },
      value1: '',
      status: '',
      addressUrl: [],
      disabled: false,
      rejectInfo: false,
      rightSee: false,
      //图片预览
      srcList: [],
      imgsVisible: false,
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    enlarge(url) {
      this.imgsVisible = true;
      this.srcList.push(url)
    },
    closeImgViewer() {
      this.srcList = []
      this.imgsVisible = false;
    },
    dateChange(e) {
      this.startDate = e[0]
      this.endDate = e[1]
      this.getList()
    },
    selectInit(row) {
      if (row.status == '审核中' || row.status == '已通过') {
        return false
      }
      else {
        return true
      }
    },
    handleSelectionChange(val) {
      this.modification = val;
    },
    //上报
    submission(row) {
      this.modification.push(row)
      this.batchSubmission()
    },
    //暂缓上报
    postponeSubmission() {
      let that = this
      if (this.modification.length > 0) {
        this.$confirm('确定暂缓上报选中的条目？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            dailyReportDeferEscalation({ hyFreightSettlementInfos: this.modification })
              .then(response => {
                if (response.code == 200) {
                  that.$notify({
                    title: '成功',
                    message: '操作成功！',
                    type: 'success'
                  })
                  that.modification = []
                  that.getList()
                }
              })
          })
      } else {
        this.$message.error('至少选中一条可上报的条目！')
      }
    },
    //批量上报
    batchSubmission() {
      var that = this
      if (this.modification.length > 0) {
        this.$confirm('确定批量上报流水单信息？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            dailyReportBatchEscalation({ hyFreightSettlementInfos: this.modification })
              .then(response => {
                if (response.code == 200) {
                  that.$notify({
                    title: '成功',
                    message: '上报成功！',
                    type: 'success'
                  })
                  that.modification = []
                  that.getList()
                }
              }).catch(() => {
                that.modification = []
              });
          })
      } else {
        this.$message.error('至少选中一条可上报的条目！')
      }
    },
    getList() {
      this.listLoading = true;
      let _obj = {};
      _obj.currentPage = this.currentPage;
      _obj.pageSize = this.pageSize;
      _obj.searchKeyWord = this.searchkeyWord;
      _obj.searchType = this.search;
      _obj.startDate = this.startDate
      _obj.endDate = this.endDate
      dailyReportGetList(_obj)
        .then((response) => {
          this.tableData = response.data.records;
          for (let i = 0; i < this.tableData.length; i++) {
            this.tableData[i].iconShow = true;
          }
          this.deptBudgetTotal = response.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    searchBtn(num) {
      this.search = num;
      this.getList();
    },
    find() {
      this.currentPage = 1
      this.getList()
    },
    look(row) {
      this.loading = true
      this.rightSee = true
      dailyReporGetInfo({
        id: row.id
      }).then(response => {
        this.dailyReportData = response.data
        this.listLoading = false
      })
        .catch(() => {
          this.listLoading = false
        })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      console.log(`当前页: ${val}`)
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
.center {
  padding: 10px 20px;
  background: #f5f6f7;
  min-height: calc(100vh - 50px);

  .top_css {
    padding: 10px;

    .search_btn {
      height: 80px;
      background: linear-gradient(#fafbfb, #ffffff);
      display: flex;
      margin-top: 20px;

      .search_block {
        margin-left: 20px;
      }

      .search_item {
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        line-height: 40px;
        width: 112px;
        height: 40px;
        background: #f7f8f9;
        cursor: pointer;
        margin-top: 30px;
      }

      .searchNo {
        color: #323233;
      }

      .search {
        color: #2f53eb;
        background: #ffffff;
      }
    }
  }

  .ask_css {
    position: absolute;
    margin: 3px 0 0 10px;
  }

  .center_css {
    background: #ffffff;
    border-radius: 1px;
    margin-top: 10px;
    padding-bottom: 10px;
  }

  .screen {
    display: flex;

    .search {
      width: 40px;
      height: 40px;
      background: #2f53eb;
      border-radius: 0px 2px 2px 0px;
      border: 1px solid #DCDFE6;
      margin-left: -1px;
    }

    .count_css {
      width: 80px;
      text-align: center;
      line-height: 40px;
      color: #666666;
    }
  }

  .el-button {
    padding: 10px 20px !important;
  }

  .center_css {

    ::v-deep .el-table th,
    ::v-deep .el-table td {
      text-align: center;
    }

    .fujian {
      font-size: 24px;
      color: #409eff;
    }

    .warning {
      font-size: 14px;
      color: #ed1d1d;
    }
  }
}

.el-button--primary {
  color: #FFF;
  background-color: #2f53eb;
  border-color: #2f53eb;
}

.car_css {
  width: 50%;
  display: inline-block;
  text-align: center;
  margin-top: 30px;
  position: relative;

  .status_css {
    background: #3AC602;
    width: 50px;
    height: 17px;
    position: absolute;
    top: 0px;
    right: 15px;
    border-radius: 3px;
  }

  .carno_css {
    padding: 1px 5px;
    background-color: #F5F6F7;
    color: #666666;
    border-radius: 12px;
    text-align: center;
    width: 100px;
    margin: 10px auto 0;
  }

  .carborder_css {
    border: 1px solid #F0F1F2;
    margin: 15px auto 0;
    width: 90%;
  }
}

.tips {
  color: #999999;
  font-size: 14px;
}

.car_item {
  width: 200px;
  height: 160px;
  border-radius: 5px;
}

.user {
  margin-bottom: 20px;

  .id_css {
    font-size: 14px;
  }

  .id_css,
  .name_css {
    margin: 5px 0;
    color: #0D0D0D;
  }

  .pay_name {
    color: #9D9D9D;
    font-size: 14px;
  }

  .name_css {
    font-size: 16px;
  }

  .user_item {
    margin: 25px 0;
    width: 450px;
    height: 300px;
  }

  .border_css {
    width: 100%;
    border: 1px solid #F0F1F2;
  }
}

::v-deep .el-table--border .el-table__header th {
  background: #f7f8f9;
}

.btn_css {
  color: #409EFF;
  cursor: pointer
}

.btn_css1 {
  margin-left: -20px;
}

.sign {
  font-size: 14px;
  color: red;
}

.form_css {
  width: 100%;
  margin: 20px auto 20px;

  ::v-deep .el-checkbox {
    width: 40%;
    height: 30px;
  }

  // ::v-deep .el-dialog__body{
  // 	padding: 10px 20px;
  // }
  ::v-deep .el-dialog__title {
    font-size: 16px;
  }

  ::v-deep .el-textarea__inner {
    background: #F0F1F2;
  }

  .form_btn {
    text-align: right;
    margin-top: 10px;
  }
}

//发送信息
.Info_css {
  .Info_title {
    color: #323233;
    font-size: 16px;
  }

  .Info_item {
    margin: 20px 0;
  }

  .Info_btn {
    text-align: right;
    margin-top: 10px;
  }
}

//附件
.file {
  .fujian_css {
    width: 631px;
    display: flex;
    margin: 0 auto;
    text-align: center;
    line-height: 32px;
    border: 1px solid #F0F1F2;
    border-right: 0px;
    border-radius: 2px 0px 0px 2px;

    .fujian_item {
      cursor: pointer;
      width: 90px;
      height: 32px;
      border-right: 1px solid #F0F1F2;
    }

    .file_btn {
      color: #2F53EB;
      background-color: #CFDBFE;
    }
  }

  .file_img {
    width: 525px;
    height: 332px;
    margin: 20px auto;
  }

  .img_css {
    width: 525px;
    height: 332px;
  }

  .btn {
    width: 400px;
    margin: 0 auto;
  }
}

.right_css {
  // overflow-y: auto !important;
  // min-height: 1266px;
  padding: 0 20px;

  .right_title {
    color: #9D9D9D;
    font-size: 14px;
    margin-bottom: 4px;
  }

  .title_name {
    margin-bottom: 10px;
  }

  .right_item {
    color: #0D0D0D;
    font-size: 14px;
    margin-bottom: 10px;
  }

  .right_btn {
    text-align: center;
    margin: 10px 0;
  }

  .img_css {
    width: 100px;
    height: 80px;
    margin-right: 5px;
  }

  .right_img {
    width: 200px;
    height: 120px;
    margin-top: 10px;
  }
}

.find::v-deep input.el-input__inner {
  border-radius: 0;
}

::v-deep .el-drawer.rtl {
  overflow: auto;
}
</style>