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

// 车辆园区上报
<template>
  <div class="center">
    <div class="center_css">
      <div class="top_css">
        <el-row>
          <el-col :span="14" style="height: 45px">
            <el-button type="primary" class="batch_btn" @click="escalation">批量上报</el-button>
            <el-date-picker v-model="value1" value-format="yyyy-MM-dd" @change="dateChange" type="daterange"
              :default-time="['00:00:00', '23:59:59']" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-col>
          <el-col :span="10">
            <div class="screen">
              <el-input class='find' placeholder="可按司机姓名和账号查找" @keyup.enter.native="find" v-model="searchkeyWord"
                clearable @change="find"></el-input>
              <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 :data="tableData" style="width: 98%; margin: 0 auto; border-radius: 10px" height="55.8vh" border
        highlight-current-row @row-click="handleRowClick" @selection-change="handleSelectionChange">
        <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="driverName" label="司机姓名"></el-table-column>
        <el-table-column prop="accountNumber" label="账号"></el-table-column>
        <el-table-column prop="carNumber" label="牵引车车牌号"></el-table-column>
        <el-table-column prop="guaCarNumber" label="挂车车牌号"></el-table-column>
        <el-table-column prop="drivingLicenseValidityDate" label="行驶证有效期">
          <template slot-scope="scope">
            <span
              :class="scope.row.drivingOverdueFlag == 1 ? 'red_text' : ''">{{ scope.row.drivingLicenseValidityDate }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="trailerLicenseValidityDate" label="挂车行驶证有效期">
          <template slot-scope="scope">
            <span
              :class="scope.row.trailerOverdueFlag == 1 ? 'red_text' : ''">{{ scope.row.trailerLicenseValidityDate }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="operationCertificateValidityDate" label="道路运输证有效期">
          <template slot-scope="scope">
            <span
              :class="scope.row.operationOverdueFlag == 1 ? 'red_text' : ''">{{ scope.row.operationCertificateValidityDate }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="updateDate" label="上报时间">
          <template slot-scope="scope">
            <span
              v-if="scope.row.escalationStatus && scope.row.escalationStatus != '未认证' && scope.row.escalationStatus != '待上报'">{{ scope.row.updateDate }}</span>
            <!-- 未认证和待上报不显示时间 -->
          </template>
        </el-table-column>
        <el-table-column prop="paymentDate" label="附件">
          <template slot-scope="scope" style="text-align: center" v-if="scope.row.backStageStatus != '未认证'">
            <span class="btn_css btn_css1" @click="fujianLook(scope.row)">查看</span>
            <el-tooltip placement="top" v-if="
              scope.row.overdueFlag == 1 ||
              scope.row.driverOverdueFlag == 1 ||
              scope.row.drivingOverdueFlag == 1 ||
              scope.row.trailerOverdueFlag == 1 ||
              scope.row.qualificationOverdueFlag == 1 ||
              scope.row.operationOverdueFlag == 1 ||
              scope.row.trailerOperationOverdueFlag == 1
            ">
              <div slot="content">
                <!-- <span v-if="scope.row.overdueFlag == 1">身份证已过有效期<br /></span> -->
                <!-- <span v-if="scope.row.driverOverdueFlag == 1">驾驶证已过有效期<br /></span> -->
                <span v-if="scope.row.drivingOverdueFlag == 1">行驶证已过有效期<br /></span>
                <span v-if="scope.row.trailerOverdueFlag == 1">挂车行驶证已过有效期<br /></span>
                <span v-if="scope.row.operationOverdueFlag == 1">运营证已过有效期<br /></span>
                <span v-if="scope.row.operationOverdueFlag == 1">道路运输证已过有效期<br /></span>
                <span v-if="scope.row.trailerOperationOverdueFlag == 1">挂车道路运输证已过有效期<br /></span>
              </div>
              <span style="margin-top: 10px"></span>
              <img src="../../../public/img/wenhao.png" alt="" class="ask_css" />
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="escalationStatus" label="状态" min-width="100"></el-table-column>
        <el-table-column label="操作" min-width="200">
          <template slot-scope="scope">
            <el-link target="_blank" @click="see(scope.row)" type="primary" :underline="false">查看</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link target="_blank" @click="reportInfo(scope.row)" type="primary" :underline="false"
              :disabled="scope.row.escalationStatus != '未上报' && scope.row.escalationStatus != '未通过'">上报</el-link>
            <!-- <el-divider direction="vertical"></el-divider> -->
            <!-- <el-dropdown>
              <span class="btn_css">•••</span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :disabled="
                    scope.row.authenticationStatus == '已禁用' &&
                    scope.row.authenticationStatus != '审核中'
                  "><span @click="switchChange(scope.row, '1')">禁用</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      style="text-align: center; margin-top: 10px" :page-size="deptCircularPage.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="deptBudgetTotal">
    </el-pagination>
    <el-dialog :close-on-click-modal='false' title="附件" :visible.sync="fujianInfo" width="830px"
      :before-close="fujianClose">
      <div class="file">
        <div class="fujian_css">
          <!-- <div class="fujian_item" :class="count == 1 ? 'file_btn' : ''" @click="btnChange(1)">
            身份证
          </div> -->
          <!-- <div class="fujian_item" :class="count == 2 ? 'file_btn' : ''" @click="btnChange(2)">
            驾驶证
          </div> -->
          <div class="fujian_item" :class="count == 3 ? 'file_btn' : ''" @click="btnChange(3)">
            行驶证
          </div>
          <!-- <div class="fujian_item" :class="count == 4 ? 'file_btn' : ''" @click="btnChange(4)">
            从业资格证
          </div> -->
          <div class="fujian_item" :class="count == 5 ? 'file_btn' : ''" @click="btnChange(5)">
            挂车行驶证
          </div>
          <div class="fujian_item" :class="count == 6 ? 'file_btn' : ''" @click="btnChange(6)">
            运营证
          </div>
          <div class="fujian_item" :class="count == 7 ? 'file_btn' : ''" @click="btnChange(7)">
            挂车运营证
          </div>
        </div>
        <div class="file_tips">
          <span v-if="count == 1">有效期：{{ file.cardValidityDate }} </span><span v-if="count == 2">
            准驾车型：{{ file.quasiDrivingVehicle }} </span> <span v-if="count == 2"> 发证机关：{{ file.lssuingAuthority }} </span>
          <span v-if="count == 4"> 从业资格证号：{{ file.qualificationCertificateNumber }}</span>
        </div>
        <div class="file_img">
          <img :src="img[index]" class="img_css" @click="enlarge(img[index])" />
        </div>
        <div class="btn">
          <el-button style="margin-right: 120px" @click="index = 0"
            v-if="count == 1 || count == 2 || count == 3 || count == 5">{{ abilityName }}</el-button>
          <el-button @click="index = 1" v-if="count == 1 || count == 2 || count == 3 || count == 5">{{ abilityName1 }}
          </el-button>
        </div>
      </div>
    </el-dialog>
    <el-drawer title="司机信息" :visible.sync="rightSee" style="overflow-y: auto !important">
      <div class="right_css">
        <div class="title_name">基本信息</div>
        <div class="right_item">车辆号{{ costData.carNumber }}</div>
        <div class="right_title">所有人</div>
        <div class="right_item">{{ costData.owner }} </div>
        <div class="right_title">使用性质</div>
        <div class="right_item">{{ costData.useNature }} </div>
        <!-- <div class="right_title">车辆识别代号</div>
        <div class="right_item">{{costData.useNature}} </div> -->
        <div class="right_title">发证机关</div>
        <div class="right_item">{{ costData.lssuingAuthority }} </div>
        <div class="right_title">车长(毫米)</div>
        <div class="right_item">{{ costData.carLong }}</div>
        <div class="right_title">车宽(毫米)</div>
        <div class="right_item">{{ costData.carWidth }} </div>
        <div class="right_title">车高(毫米)</div>
        <div class="right_item">{{ costData.carHeight }} </div>
        <div class="right_title">注册日期</div>
        <div class="right_item">{{ costData.trailerLicenseRegistrationDate }} </div>
        <div class="right_title">发证日期</div>
        <div class="right_item">{{ costData.drivingLicenseIssueDate }}</div>
        <div class="right_title">车辆能源类型</div>
        <div class="right_item">{{ costData.energyType }}</div>
        <div class="right_title">挂车核定载质量</div>
        <div class="right_item">{{ costData.guaCarApprovedWeight }}</div>
        <div class="right_title">挂车总质量</div>
        <div class="right_item">{{ costData.carTotalWeight }}</div>
        <div class="right_title">道路运输证号</div>
        <div class="right_item">{{ costData.operationCertificateNumber }} </div>
        <div class="right_title">行驶证有效期</div>
        <div class="right_item">{{ costData.drivingLicenseValidityDate }} </div>
        <div class="right_title">行驶证照片（正页）</div>
        <img :src="costData.drivingLicenseHomePage" alt="" class="img_css"
          @click="enlarge(costData.drivingLicenseHomePage)">
        <div class="right_title">行驶证照片（副页）</div>
        <img :src="costData.drivingLicenseBackPage" alt="" class="img_css"
          @click="enlarge(costData.drivingLicenseBackPage)">
        <div class="right_title">道路运输证照片</div>
        <img :src="costData.operationCertificate" alt="" class="img_css"
          @click="enlarge(costData.operationCertificate)">
        <div class="right_title">挂车道路运输证照片</div>
        <img :src="costData.trailerOperationCertificate" alt="" class="img_css"
          @click="enlarge(costData.trailerOperationCertificate)">
        <div class="right_title">人车合影照片</div>
        <img :src="costData.addressUrl" alt="" class="img_css" @click="enlarge(costData.addressUrl)">
      </div>
    </el-drawer>
    <el-image-viewer v-if="imgsVisible" :on-close="closeImgViewer" :url-list="srcList" style="z-index:9999" />
  </div>
</template>
<script>
import {
  carGetList,
  carReport,
  carGetInfo
} from "@/api/parkReportManagement";
export default {
  components: {
    "el-image-viewer": () =>
      import("element-ui/packages/image/src/image-viewer"),
  },
  data() {
    return {
      tableData: [],
      //分页
      searchkeyWord: "",
      currentPage: 1,
      pageSize: 10,
      deptBudgetTotal: 0,
      deptCircularPage: {},
      search: 1,
      disabled: false,
      userInfo: false,
      fujianInfo: false,
      file: {},
      img: [],
      index: "0",
      count: "1",
      abilityName: "身份证人像面",
      abilityName1: "身份证国徽面",
      //图片预览
      srcList: [],
      imgsVisible: false,
      //筛选时间
      startDate: "",
      endDate: "",
      value1: [],
      //侧边查看
      rightSee: false,
      costData: {
        publishTaskInfo: {}
      },
      musterList: [],
    };
  },
  mounted() {
    let date = new Date()
    let date1 = new Date().setTime(date.getTime() - 365 * 60 * 60 * 24 * 1000) //一年前的时间蹉
    date1 = new Date(parseInt(date1)).toLocaleString().split(" ")[0].replaceAll("/", "-")
    let nian = date1.split("-")[0]
    let yue = date1.split("-")[1]
    if (yue < 10) {
      yue = "0" + yue
    }
    let ri = date1.split("-")[2]
    if (ri < 10) {
      ri = "0" + ri
    }
    this.startDate = nian + "-" + yue + "-" + ri //一年前的時間
    this.endDate = date.getFullYear() + "-" + (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date
      .getMonth() + 1) + "-" + (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) //當前時間
    this.value1.push(this.startDate)
    this.value1.push(this.endDate)
    this.getList();
  },
  methods: {
    //上报
    escalation() {
      let that = this
      if (this.musterList.length == 0) {
        this.$message.error("请勾选要上报的条目")
        return
      }
      this.$confirm("确定上报信息？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        carReport({ hyDriverCarInfoList: this.musterList })
          .then((response) => {
            if (response.code == 200) {
              that.$notify({
                title: "成功",
                message: "车辆上报成功！",
                type: "success",
              });
              that.musterList = []
              that.getList();
            }
          }).catch(() => {
            that.musterList = []
            that.listLoading = false
          })
      })
    },
    handleRowClick(row) {
      return true
    },
    handleSelectionChange(val) {
      this.musterList = val;
      console.log(this.musterList)
    },
    see(row) {
      this.loading = true
      this.rightSee = true
      carGetInfo({
        id: row.id
      }).then(response => {
        this.costData = response.data
        this.listLoading = false
      })
        .catch(() => {
          this.listLoading = false
        })
    },
    reportInfo(row) { //上报
      this.musterList.push(row)
      this.escalation()
    },
    dateChange(e) {
      console.log(this.value1)
      this.startDate = e[0]
      this.endDate = e[1]
      this.getList()
    },
    closeImgViewer() {
      this.srcList = []
      this.imgsVisible = false;
    },
    enlarge(url) {
      this.imgsVisible = true;
      this.srcList.push(url)
    },

    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
      carGetList(_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;
        });
    },
    btnChange(num) {
      this.count = num;
      if (num == 1) {
        this.abilityName = "身份证人像面";
        this.abilityName1 = "身份证国徽面";
        this.img[0] = this.file.cardAddressUrl;
        this.img[1] = this.file.cardBackAddressUrl;
      } else if (num == 2) {
        this.abilityName = "驾驶证主页";
        this.abilityName1 = "驾驶证副页";
        this.img[0] = this.file.driverLicenseHomePage;
        this.img[1] = this.file.driverLicenseBackPage;
      } else if (num == 3) {
        this.abilityName = "行驶证主页";
        this.abilityName1 = "行驶证副页";
        this.img[0] = this.file.drivingLicenseHomePage;
        this.img[1] = this.file.drivingLicenseBackPage;
      } else if (num == 4) {
        this.index = 0;
        this.img[0] = this.file.qualificationCertificate;
      } else if (num == 5) {
        this.abilityName = "挂车行驶证主页";
        this.abilityName1 = "挂车行驶证副页";
        this.img[0] = this.file.trailerLicenseHomePage;
        this.img[1] = this.file.trailerLicenseBackPage;
      } else if (num == 6) {
        this.index = 0;
        this.img[0] = this.file.operationCertificate;
      } else if (num == 7) {
        this.index = 0;
        this.img[0] = this.file.trailerOperationCertificate;
      }
    },
    fujianLook(row) {
      this.file = row;
      this.index = 0;
      this.img[0] = this.file.cardAddressUrl;
      this.img[1] = this.file.cardBackAddressUrl;
      this.fujianInfo = true;
    },
    fujianClose() {
      this.count = 1;
      this.fujianInfo = false;
    },
    searchBtn(num) {
      this.search = num;
      this.getList();
    },
    find() {
      this.currentPage = 1
      this.getList();
    },
    selectInit(row) {
      if (row.escalationStatus != '未上报' && row.escalationStatus != '未通过') {
        return false;
      } else {
        return true;
      }
    },
    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;
  height: calc(100vh - 5vh);

  .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 {
    // float: right;
    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;
    }
  }
}

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

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

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

//批量上报按钮
.batch_btn {
  margin: 0 10px;
}

//附件
.file {
  .fujian_css {
    width: 330px;
    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_tips {
    margin: 10px auto;
    width: 50%;
  }

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

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

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

.right_css {

  .title_name,
  .right_title {
    color: #9D9D9D;
    margin-left: 20px;
  }

  .right_item {
    color: #333333;
    margin: 10px 0;
    margin-left: 20px;
  }

  .img_css {
    width: 100px;
    height: 100px;
    margin: 10px 0;
    margin-left: 20px;
  }
}

::v-deep .el-drawer.rtl {
  overflow-y: scroll;
}

.red_text {
  color: red;
}
</style>