wangluohuoyun-htqd/src/views/driverManagement/carCaptain.vue

//车队长信息
<template>
  <div class="center">
    <div class="center_css">
      <div class="top_css">
        <el-row>
          <el-col :span="14" style="height: 45px"> </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 == '' ? 'search' : 'searchNo'" class="search_item search_block"
                @click="searchBtn('')">
                全部
              </div>
              <div :class="search == 1 ? 'search' : 'searchNo'" class="search_item" @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>
          </el-col>
        </el-row>
      </div>
      <el-table :data="tableData" style="width: 98%; margin: 0 auto; border-radius: 10px" height="58vh" border
        highlight-current-row>
        <el-table-column type="index" width="60" label="序号" align="center">
          <template scope="scope">
            <span>{{ scope.$index + 1 }}</span>
            <!-- <span v-else>{{scope.$index}}</span> -->
          </template>
        </el-table-column>
        <el-table-column prop="name" label="车队长"></el-table-column>
        <el-table-column prop="accountNumber" label="账号"></el-table-column>
        <el-table-column prop="idCard" label="身份证号" min-width="110">
          <template scope="scope">
            <el-popover placement="top" trigger="hover" :content="
              scope.row.cardValidityStartDate +
              ' ~ ' +
              scope.row.cardValidityStartDate
            ">
              <div slot="reference">{{ scope.row.idCard }}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="bankDeposit" label="开户行"></el-table-column>
        <el-table-column prop="bankCard" label="卡号" min-width="110"></el-table-column>
        <el-table-column prop="status" label="附件">
          <template slot-scope="scoped">
            <span class="btn_css" @click="lookInfo(scoped.row)">查看</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="成员">
          <template slot-scope="scoped">
            <span class="btn_css" @click="persionLook(scoped.row)">查看</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="账单">
          <template slot-scope="scoped">
            <span class="btn_css" @click="billLook(scoped.row)">查看</span>
          </template>
        </el-table-column>
        <el-table-column prop="backStageStatus" label="状态"></el-table-column>
        <el-table-column label="操作" min-width="100">
          <template slot-scope="scope">
            <el-link target="_blank" type="primary" :underline="false" @click="adopt(scope.row)"
              :disabled="scope.row.backStageStatus != '待审核'">通过</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link target="_blank" type="primary" :underline="false" @click="reject(scope.row)"
              :disabled="scope.row.backStageStatus != '待审核'">驳回</el-link>
            <!-- <el-divider direction="vertical"></el-divider> -->
            <!-- <el-link target="_blank" type="primary" :underline="false" @click="lookInfo(scope.row)">查看</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link target="_blank" type="primary" :underline="false" @click="switchStatus(scope.row,1)"
              :disabled="scope.row.statusKey==7">禁用</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link target="_blank" type="primary" :underline="false" @click="switchStatus(scope.row,2)"
              :disabled="scope.row.status!='已禁用'">解禁</el-link> -->
          </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 v-if='file.carCategory=="挂车"' 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 v-if='file.carCategory=="挂车"' class="fujian_item" :class="count == 7 ? 'file_btn' : ''" @click="btnChange(7)">
            挂车道路运输证
          </div>
          <div class="fujian_item" :class="count == 8 ? 'file_btn' : ''" @click="btnChange(8)">
            人车合影
          </div>
          <div class="fujian_item" :class="count == 9 ? 'file_btn' : ''" @click="btnChange(9)">
            人和挂车合影
          </div> -->
        </div>
        <div class="file_tips">
          <span v-if="count == 3">有效期：{{ file.drivingLicenseValidityDate }} </span><span v-if="count == 3">
            注册日期：{{ file.drivingLicenseRegistrationDate }}
          </span>
          <span v-if="count == 3">
            发证日期：{{ file.drivingLicenseIssueDate }}
          </span>
          <span v-if="count == 3"> 发证机关：{{ file.lssuingAuthority }}</span>
          <span v-if="count == 5">有效期：{{ file.trailerLicenseValidityDate }} </span><span v-if="count == 5">
            注册日期：{{ file.trailerLicenseRegistrationDate }}
          </span>
          <span v-if="count == 5">
            发证日期：{{ file.trailerLicenseIssueDate }}
          </span>
          <span v-if="count == 5">
            发证机关：{{ file.guaLssuingAuthority }}</span>
          <span v-if="count == 6">
            运输证号：{{ file.operationCertificateNumber }} </span><span v-if="count == 6">有效期：{{
              file.operationCertificateValidityDate
            }}
          </span>
          <span v-if="count == 7">
            挂车运输证号：{{ file.trailerOperationCertificateNumber }} </span><span v-if="count == 7">有效期：{{
              file.trailerOperationCertificateValidityDate
            }}
          </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">{{ abilityName }}</el-button>
          <el-button @click="index = 1" v-if="count == 1">{{ abilityName1 }}
          </el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 成员 -->
    <el-dialog :close-on-click-modal="false" :title="'成员信息' + ' (' + totalLength + ')'" :visible.sync="persioninfo"
      width="500px" :before-close="persioninfoClose">
      <div class="persionlist_css">
        <div v-for="(item, index) in persionList" :key="index">
          <div class="persion_css">
            <div class="persion_left">{{ item.driverName }}</div>
            <div class="persion_right">{{ item.accountNumber }}</div>
          </div>
          <el-divider></el-divider>
        </div>
      </div>
    </el-dialog>
    <!-- 账单 -->
    <el-dialog :close-on-click-modal="false" title="账单信息" :visible.sync="billShow" width="500px"
      :before-close="billShowClose">
      <div class="billList_css">
        <div v-for="(item, index) in billList" :key="index">
          <div class="bill_css">
            <div class="bill_left">
              {{ item.orderNo }}({{ item.paymentType }})
            </div>
            <div class="bill_right">{{ item.amountMoney }} 元</div>
          </div>
          <div class="bill_css">
            <div class="bill_left">
              {{ item.driverName }}({{ item.driverAccountNumber }})
            </div>
            <div class="bill_right">{{ item.paymentDate }}</div>
          </div>
          <el-divider></el-divider>
        </div>
      </div>
    </el-dialog>
    <!-- //附图 -->
    <!-- <el-dialog :close-on-click-modal='false' title="车队信息" :visible.sync="seeinfo" width="500px" :before-close="seeinfoClose">
      <div>{{dataInfo.fleetName}}({{dataInfo.fleetMemberNum}})</div>
      <div>队长： {{dataInfo.driverName}} {{dataInfo.driverNumber}}</div>
      <div>车队简介：</div>
      <div>{{dataInfo.fleetProfile}}</div>
      <div>车队公告：</div>
      <div>{{dataInfo.notice?dataInfo.notice:'暂无'}}</div>
      队友：
      <div v-for="(item,index) in dataInfo.fleetMemberInfoList" :key="index">
        <span>{{item.driverNickname}} 电话{{item.driverPhone}}</span>
      </div>
    </el-dialog> -->
    <el-image-viewer v-if="imgsVisible" :on-close="closeImgViewer" :url-list="srcList" style="z-index: 9999" />
  </div>
</template>
<script>
import {
  getCarCaptainList,
  carCaptainAudit,
  getpersionList,
  getBillList,
} from "@/api/driverManagement";
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: "",
      Info: {},
      sendInfo: false,
      titleInfo: "",
      dataInfo: {},
      fujianInfo: false,
      img: [],
      index: "0",
      count: "1",
      abilityName: "身份证人像面",
      abilityName1: "身份证国徽面",
      srcList: [],
      imgsVisible: false,
      //成员
      persioninfo: false,
      persionList: [],
      totalLength: "",//总人数
      //账单
      billList: [],
      billShow: false,
    };
  },

  mounted() {
    this.getList();
  },
  methods: {
    billLook(val) {
      getBillList({
        carCaptainCommonId: val.commonId,
        currentPage: 1,
        pageSize: 100,
      })
        .then((response) => {
          if (response.code == 200) {
            this.billList = response.data.records;
            if (this.billList.length > 0) {
              this.billShow = true;
            } else {
              this.$message.error("该车队没有账单信息！");
            }
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    billShowClose() {
      this.billShow = false;
    },
    closeImgViewer() {
      console.log(11111111111);
      this.srcList = [];
      this.imgsVisible = false;
    },
    enlarge(url) {
      this.imgsVisible = true;
      this.srcList.push(url);
    },
    lookInfo(val) {
      this.fujianInfo = true;
      // this.listLoading = true;
      this.dataInfo = val;
      this.btnChange(1);
    },
    persionLook(val) {
      getpersionList({
        carCaptainCommonId: val.commonId,
        currentPage: 1,
        pageSize: 100,
        houtaiSearch: 1,
      })
        .then((response) => {
          if (response.code == 200) {
            this.persionList = response.data.records;
            this.totalLength = response.data.total
            if (this.persionList.length > 0) {
              this.persioninfo = true;
            } else {
              this.$message.error("该车队没有成员信息！");
            }
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    persioninfoClose() {
      this.persioninfo = false;
    },
    btnChange(num) {
      this.count = num;
      if (num == 1) {
        this.abilityName = "身份证人像面";
        this.abilityName1 = "身份证国徽面";
        this.img[0] = this.dataInfo.cardAddressUrl;
        this.img[1] = this.dataInfo.cardBackAddressUrl;
      } else if (num == 2) {
        this.index = 0;
        this.img[0] = this.dataInfo.payeeAddressUrl;
      }
    },
    fujianClose() {
      this.fujianInfo = false;
    },
    adopt(val) {
      //通过
      this.listLoading = true;
      this.$confirm("确定通过该车队长审核？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        carCaptainAudit({
          id: val.id,
          examineFlag: 1,
        })
          .then((response) => {
            if (response.code == 200) {
              this.$notify({
                title: "成功",
                message: "通过成功！",
                type: "success",
              });
            }
            this.getList();
          })
          .catch(() => {
            this.loading = false;
          });
      });
    },
    reject(val) {
      //驳回
      this.listLoading = true;
      this.$confirm("确定驳回该车队长审核？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        carCaptainAudit({
          id: val.id,
          examineFlag: 2,
        })
          .then((response) => {
            if (response.code == 200) {
              this.$notify({
                title: "成功",
                message: "驳回成功！",
                type: "success",
              });
            }
            this.getList();
          })
          .catch(() => {
            this.loading = false;
          });
      });
    },
    //   switchStatus(val, num) {
    //     //启用、禁用
    //     this.listLoading = true;
    //     this.$confirm(num == 1 ? '确定禁用' : '确定解禁' + "该车队？", "提示", {
    //       confirmButtonText: "确定",
    //       cancelButtonText: "取消",
    //       type: "warning",
    //     }).then(() => {
    //       let sign = ""
    //       if (num == 1) {
    //         sign = 3
    //       } else if (num == 2) {
    //         sign = 4
    //       }
    //       auditFleet({
    //           id: val.id,
    //           examineFlag: sign,
    //         })
    //         .then((response) => {
    //           if (response.code == 200) {
    //             if (num == 1) {
    //               this.$notify({
    //                 title: "成功",
    //                 message: "禁用成功！",
    //                 type: "success",
    //               });
    //             } else {
    //               this.$notify({
    //                 title: "成功",
    //                 message: "解禁成功！",
    //                 type: "success",
    //               });
    //             }

    //             this.getList()
    //           }
    //         })
    //         .catch(() => {
    //           this.loading = false;
    //         });
    //     });
    //   },
    searchBtn(val) {
      this.search = val;
      this.getList();
    },
    getList() {
      this.listLoading = true;
      getCarCaptainList({
        searchType: this.search,
        searchKeyWord: this.searchkeyWord,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      })
        .then((response) => {
          this.tableData = response.data.records;
          this.deptBudgetTotal = response.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    find() {
      this.currentPage = 1;
      this.getList();
    },
    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;
      }
    }
  }

  .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 {
    background: #ffffff;
    border-radius: 1px;
    margin-top: 10px;
    padding-bottom: 10px;

    ::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;
}

//查看附件
.file {
  .fujian_css {
    width: 260px;
    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: 135px;
      height: 32px;
      border-right: 1px solid #f0f1f2;
    }

    .file_btn {
      color: #2f53eb;
      background-color: #cfdbfe;
    }
  }

  .file_tips {
    margin: 10px auto;
    width: 70%;
  }

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

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

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

//查看车队长成员
.persionlist_css {
  height: 500px;
  overflow-y: scroll;

  .persion_css {
    display: flex;
    margin: 10px 0;

    .persion_left,
    .persion_right {
      width: 50%;
    }

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

//查看账单
.billList_css {
  height: 500px;
  overflow-y: scroll;

  .bill_css {
    display: flex;
    margin: 10px 0;

    .bill_left,
    .bill_right {
      width: 50%;
    }

    .bill_right {
      text-align: right;
      margin-right: 10px;
    }
  }
}
</style>