yiliangyiyun-pc/src/views/tranManagement/tranManagementDriver.vue

<!--司机管理-->
<template>
  <div>
    <BaseHeaderLayout :leftSpan="12">
      <template slot="left">
        <ws-button type="primary" @click="handleAdd()"><img width="13" height="13" style="
              vertical-align: text-top;
              position: relative;
              top: 2px;
              left: -4px;
            " src="../../../public/img/header-add.png" alt="" />添加</ws-button>
      </template>
      <template slot="right">
        <span style="display: inline-block; width: 65px; color: #8890b1">城市：</span>
        <el-cascader :options="options_" v-model="searchTypeText" clearable size="large" placeholder="请选择所在城市"
          style="width: 30%" @change="selecttaskType" />
        <ws-input v-model="searchKeyWord" placeholder="可按司机姓名、手机号、车牌号、身份证号查找" clearable maxlength="200" type="input"
          class="findValue findinput" @keyup.enter.native="handleLook()"></ws-input>
        <ws-button class='find' type="primary" @click="handleLook()">
          <img width="14" height="16" style="
              vertical-align: text-top;
              position: relative;
              top: 0px;
              left: -8px;
            " src="../../../public/img/sousuo.png" alt="" />
        </ws-button>
      </template>
    </BaseHeaderLayout>
    <el-table class="wenzi" :data="driverList.records" style="width: 100%; margin-top: 20px" fit ref="expandstable"
      :expand-row-keys="expands" :row-key="getRowKeys" height="calc(100% - 110px)">
      <el-table-column type="expand">
        <template slot-scope="props">
          <ws-form>
            <div v-for="item in props.row.driverPayeeInfoList">
              <ws-info-table>
                <ws-form-item :class="item.accountTypeFlag == 1 ? 'personage' : 'company'"
                  v-if="item.accountTypeFlag == 1" label="收款人" span="1" prop="payeeName" class="el-car name">
                  <div style="width: 100%">
                    {{ item.payeeName }}
                  </div>
                </ws-form-item>
                <ws-form-item :class="item.accountTypeFlag == 1 ? 'personage' : 'company'"
                  v-if="item.accountTypeFlag == 2" label="企业名称" span="1" prop="compName" class="el-car">
                  <div style="width: 100%">{{ item.compName }}</div>
                </ws-form-item>
                <ws-form-item :class="item.accountTypeFlag == 1 ? 'personage' : 'company'"
                  v-if="item.accountTypeFlag == 1" label="身份证" span="1" prop="payeeNumberCard" class="el-car card">
                  <div style="width: 100%">
                    {{ item.payeeNumberCard }}
                    <img width="12" height="13" src="../../../public/img/fujian-grey.png" alt=""
                      @click="fujian1(item)" />
                  </div>
                </ws-form-item>
                <ws-form-item :class="item.accountTypeFlag == 1 ? 'personage' : 'company'" label="开户行" span="1"
                  prop="bankDeposit" class="el-car">
                  <span style="
                        margin: 10px;
                        display: inline-block;
                        border-right: 1px solid #e9ecf7;
                        padding-right: 10px;
                      ">{{ item.bankDeposit }}</span><span style="
                        margin: 10px;
                        padding: 0px;
                        display: inline-block;
                        word-wrap: break-word;
                        line-height: 20px;
                        white-space: normal;
                      ">{{ item.bankDepositBranch }}</span>
                </ws-form-item>
                <ws-form-item :class="item.accountTypeFlag == 1 ? 'personage' : 'company'" label="账号" span="1"
                  prop="bankCard" class="el-car">
                  <div style="width: 100%">{{ item.bankCard }}</div>
                </ws-form-item>
              </ws-info-table>
            </div>
          </ws-form>
        </template>
      </el-table-column>
      <el-table-column type="index" label="序号" width="80">
        <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="姓名" width="100">
      </el-table-column>
      <el-table-column prop="numberCard" label="身份证号" width="200">
      </el-table-column>
      <el-table-column prop="driverPhone" label="手机号" width="160">
      </el-table-column>
      <el-table-column prop="carNumber" label="车牌号" width="160">
        <template scope="scope">
          <ws-select v-model="scope.row.carNumber" placeholder="" class="typeselect"
            @change="selectcar($event, scope.row)">
            <ws-option v-for="item in scope.row.driverCarInfoList" :key="item.constKey" :label="item.carNumber"
              :value="item.carNumber" />
          </ws-select>
        </template>
      </el-table-column>
      <el-table-column prop="binNumber" label="常驻城市" width="160">
        <template slot-scope="scope">
          {{ scope.row.residentCityProvincial
            }}{{ scope.row.residentCityMunicipal }}
        </template>
      </el-table-column>
      <el-table-column prop="carModel" label="车型" width="120">
      </el-table-column>
      <el-table-column prop="carLength" label="车长" width="120">
      </el-table-column>
      <el-table-column label="结款账户" width="120">
        <template slot-scope="scope">
          <el-button v-if="!scope.row.expandsStatus" size="medium" type="text" class="fs-16"
            @click="expandsHandle(scope.row)">展开<img width="9" height="6"
              style="vertical-align: middle; margin-left: 3px" src="../../../public/img/zhankai.png" alt="" />
          </el-button>
          <el-button v-if="scope.row.expandsStatus" size="medium" type="text" class="fs-16"
            @click="expandsHandle(scope.row)">收起<img width="9" height="6"
              style="vertical-align: middle; margin-left: 3px" src="../../../public/img/shouqi.png" alt="" />
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="addressUrl" label="附件">
        <template slot-scope="scope">
          <img width="18" height="20" style="vertical-align: text-top; position: relative; top: -1px"
            src="../../../public/img/fujian.png" @click="fujian(scope.row)" alt="" />
          <span v-if="scope.row.addressUrlArray.length > 0">{{
              scope.row.addressUrlArray.length
            }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" width="300">
        <template slot-scope="scope">
          <el-button size="medium" type="text" class="record" @click="look(scope.row)">查看</el-button>
          <el-button size="medium" type="text" class="record" @click="edit(scope.row)">编辑</el-button>
          <el-button size="medium" type="text" class="record" @click="deletes(scope.row)">删除</el-button>
          <el-button v-if="scope.row.disableStatusFlag != 1" class="record1" size="medium" type="text"
            @click="stop(scope.row)">禁用</el-button>
          <!-- <el-tooltip
              class="item record"
              effect="dark"
              :content="scope.row.disableReasons"
              placement="right-start"
            > -->
          <el-button v-if="scope.row.disableStatusFlag == 1" class="record1" size="medium" type="text"
            style="font-size:14px;color:#F83535;" @click="relieve(scope.row)">已禁用</el-button>
          <!-- </el-tooltip> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-size="deptCircularPage.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="deptBudgetTotal">
    </el-pagination>
    <!-- <el-dialog v-model="outerVisible">
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入禁用原因，不超过50个字"
        v-model="dsiablieForm"
      >
      </el-input>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="outerVisible = false">取 消</el-button>
          <el-button type="primary" @click="">确定禁用</el-button>
        </div>
      </template>
    </el-dialog> -->
    <WinseaContentModal v-model="outerVisible" title="禁用原因" @on-cancel="handleClose">
      <el-input type="textarea" :rows="2" maxlength="50" placeholder="请输入禁用原因，不超过50个字"
        v-model="disablieForm.disableReasons">
      </el-input>
      <div class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
        <el-button type="primary" @click="disableReasons">确定禁用</el-button>
      </div>
    </WinseaContentModal>
    <!-- 附件弹框 -->
    <WinseaContentModal v-model="accessoryTFs" :title="$t('system.noticeCircular.information')"
      @on-cancel="handleClose">
      <p>查看附件</p>
      <div style="display: inline-block; margin: 5px" v-for="item in appendixIdss">
        <img width="100" height="100" :src="item" alt="" />
      </div>
    </WinseaContentModal>
    <WinseaContentModal v-model="accesscard" :title="$t('system.noticeCircular.information')" @on-cancel="handleClose1">
      <p>查看附件</p>
      <img width="100" height="100" :src="accessurl" alt="" />
    </WinseaContentModal>
  </div>
</template>
<script>
  import {
    selectDriver,
    billoperatehis,
    delDriver,
    disableDriver,
  } from '@/model/transport/index'
  import Pagination from '@/components/Pagination'
  import {
    provinceAndCityData,
    CodeToText
  } from 'element-china-area-data'
  import WsUpload from '@/components/WsUpload'
  import {
    dayjs,
    fmoney,
    EventBus
  } from 'base-core-lib'
  export default {
    name: 'viewSpareMoney',
    components: {
      WsUpload,
      Pagination,
    },
    watch: {
      vesselId(val) {
        this.getList()
      },
      isShow(val) {
        this.showType = val
      },
    },
    data() {
      return {
        //弹出框
        dialogViewSpareMoney: false,
        dialogApproveFormVisible: false,
        options_: provinceAndCityData,
        // 表格显示数据
        tableDate: [],
        // 是否显示
        showType: true,
        // 年
        year: '',
        deptBudgetTotal: 0,
        currentPage: 1,
        pageSize: 10,
        searchKeyWord: '',
        contractType: 2,
        startDate: null,
        endDate: null,
        carNumber: '',
        searchTypeText: [],
        outerVisible: false,
        //图片
        fileList: [],
        // 提交类型
        submitType: true,
        size: 10,
        spanArr: [],
        pcFlag: 1,
        compId: localStorage.getItem('ws-pf_compId'),
        deptCircularPage: {},
        date: {
          year: dayjs().format('YYYY'),
          month: dayjs().format('MM'),
        },
        disablieForm: {},
        expands: [], //只展开一行放入当前行id
        getRowKeys: (row) => {
          //获取当前行id
          // console.log(row)
          return row.id //这里看这一行中需要根据哪个属性值是id
        },
        driverList: [],
        deptBudgetList: {},
        historyList: [],
        pickerBeginDateBefore: {
          disabledDate: (time) => {
            return time.getTime() > Date.now()
          },
        },
        appendixIdss: [],
        accessoryTFs: false,
        accesscard: false,
        accessurl: '',
        residentCityProvincial: '',
        residentCityMunicipal: '',
      }
    },
    activated() {
      this.getList()
      this.showType = this.isShow
    },
    methods: {
      expandsHandle(row) {
        row.expandsStatus = !row.expandsStatus
        this.$refs.expandstable.toggleRowExpansion(row)
      },
      edit(row) {
        this.$router.push({
          name: 'driverManagementedit',
          query: {
            id: row.id
          },
        })
      },
      //查找
      handleLook() {
        if (this.value2) {
          this.startDate = this.dateFormat('YYYY-mm-dd', this.value2[0])
          this.endDate = this.dateFormat('YYYY-mm-dd', this.value2[1])
        } else {
          this.startDate = ''
          this.endDate = ''
        }
        this.currentPage = 1
        this.getList()
      },
      look(row) {
        this.$router.push({
          name: 'driverManagementview',
          query: {
            id: row.id
          },
        })
      },
      //添加
      handleAdd() {
        console.log(11111)
        this.$router.push({
          name: 'driverManagementadd'
        })
      },
      selectcar(e, row) {
        console.log(e, row)
        for (var i = 0; i < row.driverCarInfoList.length; i++) {
          if (e == row.driverCarInfoList[i].carNumber) {
            row.carModel = row.driverCarInfoList[i].carModel
            row.carLength = row.driverCarInfoList[i].carLength
          }
        }
      },
      stop(row) {
        this.outerVisible = true
        this.disablieForm.id = row.id
      },
      disableReasons() {
        this.outerVisible = false
        this.disablieForm.disableStatusFlag = 0
        disableDriver(this.disablieForm)
          .toPromise()
          .then((response) => {
            this.$notify.success({
              title: '成功',
              message: '禁用成功',
            })
            this.getList()
          })
          .catch((response) => {
            EventBus.$emit('error', response.message)
          })
      },
      relieve(row) {
        this.disablieForm.id = row.id
        this.disablieForm.disableStatusFlag = 1
        disableDriver(this.disablieForm)
          .toPromise()
          .then((response) => {
            this.$notify.success({
              title: '成功',
              message: '解除禁用成功',
            })
            this.getList()
          })
          .catch((response) => {
            EventBus.$emit('error', response.message)
          })
      },
      deletes(row) {
        this.$confirm(`司机信息删除后不可恢复，是否确定删除？`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
          .then(() => {
            delDriver({
                id: row.id
              })
              .toPromise()
              .then((response) => {
                this.$notify.success({
                  title: '成功',
                  message: '删除成功',
                })
                this.getList()
              })
              .catch((response) => {
                console.log(response)
                EventBus.$emit('error', response.message)
              })
          })
          .catch(() => {
            return false
          })
      },
      handleClose() {
        this.accessoryTFs = false
      },
      handleClose1() {
        this.accesscard = false
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        console.log(`当前页: ${val}`)
        this.getList()
      },
      getList() {
        selectDriver({
            compId: localStorage.getItem('ws-pf_compId'),
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            pcFlag: this.pcFlag,
            residentCityProvincial: this.residentCityProvincial,
            residentCityMunicipal: this.residentCityMunicipal,
            searchKeyWord: this.searchKeyWord,
          })
          .toPromise()
          .then((response) => {
            for (var i = 0; i < response.records.length; i++) {
              if (response.records[i].driverCarInfoList.length > 0) {
                response.records[i].carNumber =
                  response.records[i].driverCarInfoList[0].carNumber
                response.records[i].carModel =
                  response.records[i].driverCarInfoList[0].carModel
                response.records[i].carLength =
                  response.records[i].driverCarInfoList[0].carLength
              }
              response.records[i].expandsStatus = false
              if (response.records[i].addressUrl != null) {
                response.records[i].addressUrlArray =
                  response.records[i].addressUrl.split(',')
                this.fileList[i] = response.records[i].addressUrl.split(',')
              } else {
                response.records[i].addressUrlArray = []
              }
            }

            this.deptCircularPage.currentPage = response.current
            this.deptCircularPage.pageSize = response.size
            this.deptBudgetTotal = response.total
            this.driverList = response
          })
      },
      editClick(row) {
        var status = ''
        if (row.status == '待执行' || row.status == '已完成') {
          status = '执行中'
        } else if (row.status == '执行中') {
          status = '已完成'
        }
        //cancelButtonClass: "btn-custom-cancel"
        this.$confirm(`是否将状态改为${status}`, {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
          .then(() => {
            editstatus({
                id: row.id
              })
              .toPromise()
              .then((response) => {
                this.$notify.success({
                  title: '成功',
                  message: '状态修改成功',
                })
                this.getList()
              })
              .catch((response) => {
                // EventBus.$emit('error', this.$t('showMessage.asteriskRequired'))
              })
          })
          .catch(() => {
            return false
          })
      },
      selecttaskType(e) {
        this.residentCityProvincial = CodeToText[e[0]]
        this.residentCityMunicipal = CodeToText[e[1]]
        // this.selectedOptions = e
        this.handleLook()
      },
      fujian(row) {
        if (row.addressUrl === null || row.addressUrl === '') {
          EventBus.$emit(
            'warning',
            this.$t('system.noticeCircular.NoInformation')
          )
        } else {
          this.accessoryTFs = true
        }
        this.appendixIdss = row.addressUrlArray
      },
      fujian1(item) {
        if (item.cardAddressUrl === null || item.cardAddressUrl === '') {
          EventBus.$emit(
            'warning',
            this.$t('system.noticeCircular.NoInformation')
          )
        } else {
          this.accesscard = true
        }
        this.accessurl = item.cardAddressUrl
      },
      handleExamine(row) {
        this.$router.push({
          name: 'salesContractExamine',
          query: {
            id: row.id
          },
        })
      },
      // 关闭 dialog时 处理文件url 初始化upload组件
      handleCloe() {
        this.dialogViewSpareMoney = false
      },
      history(row) {
        console.log(row)
        billoperatehis({
            id: row.id
          })
          .toPromise()
          .then((response) => {
            this.historyList = response
          })
      },
      find() {
        this.startDate = this.dateFormat('YYYY-mm-dd', this.value2[0])
        this.endDate = this.dateFormat('YYYY-mm-dd', this.value2[1])
        this.currentPage = 1
        this.getList()
      },
    },
  }
</script>
<style lang="scss" scoped>
  .connert {
    width: 90%;
    margin: 0 auto;
  }

  .vertical-text-left {
    width: 62px;
    text-align: right;
  }

  .findValue {
    margin: 0 10px;
  }

  /deep/.base_header_layout .find.el-button--primary {
    width: 30px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    margin-left: -10px;
  }

  /deep/.base_header_layout .findinput input {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }

  /deep/.el-icon-arrow-right {
    display: none;
  }

  /deep/.el-pagination {
    text-align: center;
  }

  .ws-info-table {
    border-left: 1px solid #e9ecf7;
    border-top: 1px solid #e9ecf7;
  }

  /deep/.ws-info-table .el-form-item {
    border-right: 1px solid #e9ecf7;
    border-bottom: 1px solid #e9ecf7;
  }

  /deep/.ws-info-table .el-form-item .el-form-item__label {
    text-align: center;
    background: #f6f7fc;
    color: #8890b1;
    font-size: 12px;
  }

  /deep/.ws-info-table .el-form-item.company,
  /deep/.ws-info-table .el-form-item.personage {
    width: 33.333%;
  }

  /deep/.ws-info-table .el-form-item.name {
    width: 15.665%;
  }

  /deep/.ws-info-table .el-form-item.card {
    width: 17.665%;
  }

  /deep/.ws-info-table .el-form-item .el-form-item__content {
    text-align: center;
    border-left: 1px solid #e9ecf7;
  }

  /deep/.el-table .el-table__header .cell,
  /deep/.el-table .el-table__body .cell {
    text-align: center;
  }

  /deep/.el-table th.is-leaf,
  .el-table td {
    border-right: 1px solid #eee;
  }

  .el-button--text {
    color: #5878e8;
  }

  .el-button--primary {
    background: #5878e8;
  }

  //操作按钮
  .record,
  .adjustment,
  .record1 {
    display: inline-block;
    color: #5878e8;
    padding: 0 4px !important;
    position: relative;
    font-size: 14px;
  }

  .record1 {
    width: 38px;
    height: 32px;
  }

  .record:after {
    position: absolute;
    content: '';
    display: block;
    top: 9px;
    right: -7px;
    width: 1px;
    height: 12px;
    background: #e9ecf7;
  }

  /deep/.el-table td {
    border-right: 1px solid #eee;
  }
</style>