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

//汽运调度
<template>
  <div>
    <BaseHeaderLayout :leftSpan="8">
      <template slot="left"> </template>
      <!-- 接单开始 -->
      <template slot="right">
        <span style="width: 142px; display: inline-block; color: #8890b1">状态：</span>
        <ws-select v-model="searchTypeText" placeholder="" class="typeselect" @change="selecttaskType"
          :value="searchType">
          <ws-option v-for="item in taskTypeList" :key="item.value" :label="item.value" :value="item.value"
            style="color: #8890b1" />
        </ws-select>
        <div>
          <span style="display: inline-block; width: 70px; color: #8890b1">接单日期：</span>
        </div>
        <el-date-picker v-model="inOutDate" type="daterange" align="right" unlink-panels range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
        <ws-input v-model="searchKeyWord" placeholder="可按发货人、收货人、任务编号查找" clearable maxlength="500" type="input"
          class="findValue" @keyup.enter.native="find()"></ws-input>
        <!-- v-hasPermission="'procurement.sparepart.directShip'" -->
        <ws-button class="find" type="primary" @click="find()"><img width="16" 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="warehouseList.records" style="width: 100%" height="calc(100% - 110px)">
        <el-table-column prop="warehouseName" 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="processNo" label="运输任务编号">
        </el-table-column>
        <el-table-column prop="goodsName" label="货名"> </el-table-column>
        <el-table-column prop="weight" label="重量（吨）"> </el-table-column>
        <el-table-column prop="send" label="发货" width="300">
          <template scope="scope">
            <span style='white-space :pre-wrap;' v-html="scope.row.send"></span>
          </template>
        </el-table-column>
        <el-table-column prop="receive" label="收货" width="300">
          <template scope="scope">
            <span style='white-space :pre-wrap;' v-html="scope.row.receive"></span>
          </template>
        </el-table-column>
        <el-table-column class="table_td" label="运输周期" width="160">
          <template slot-scope="scope">
            {{ scope.row.deliveryDateStart }} ~ {{ scope.row.deliveryDateEnd }}
          </template>
        </el-table-column>
        <el-table-column prop="processStatus" label="状态">
          <template slot-scope="scope">
            <el-popover placement="left" :width="285" trigger="click" visible-arrow="false" @show="history(scope.row)">
              <template>
                <span slot="reference">
                  <span v-if="scope.row.processStatus == '待执行'" class="executory"></span>
                  <span v-if="scope.row.processStatus == '执行中'" class="inExecution"></span>
                  <span v-if="scope.row.processStatus == '已完成'" class="done"></span>{{ scope.row.processStatus }}
                </span>
              </template>
              <div>
                <p style="margin-top: 0; padding-left: 10px">XXXXX</p>
                <div v-for="(item, index) in historyList" :key="index" class="flex">
                  <div class="vertical-text vertical-text-left">
                    {{ item.updateDate }}
                  </div>
                  <div>
                    <div class="vertical-circle"></div>
                    <div v-if="index != historyList.length - 1" class="vertical-line"></div>
                  </div>
                  <div class="vertical-text">
                    {{ item.operateUser }}<br />{{ item.dealMsg }}
                  </div>
                </div>
              </div>
            </el-popover>
            <img width="17" height="18" style="vertical-align: text-top; position: relative; top: -1px"
              src="../../../public/img/edit.png" @click="editClick(scope.row)" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="createDate" label="接单时间"> </el-table-column>
        <el-table-column prop="seller" label="操作" width="200">
          <template slot-scope="scope">
            <div v-hasPermission="
                'tranManager.vehicleDispatching.view'
              " class="record" @click="nocomplete(scope.row)">查看</div>
            <div v-hasPermission="
                'tranManager.vehicleDispatching.car'
              " class="adjustment" @click="warehousing(scope.row)">派车</div>
          </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>
  </div>
</template>
<script>
  import {
    automobileList,
    alsostate
  } from '@/model/transport/index'
  import Pagination from '@/components/Pagination'
  import WsUpload from '@/components/WsUpload'
  import {
    EventBus
  } from 'base-core-lib'
  import {
    billoperatehis
  } from '@/model/contarct/index'
  export default {
    name: 'viewSpareMoney',
    components: {
      WsUpload,
      Pagination,
    },
    watch: {
      vesselId(val) {
        this.getList()
      },
      isShow(val) {
        this.showType = val
      },
    },
    data() {
      return {
        //弹出框
        dialogViewSpareMoney: false,
        dialogApproveFormVisible: false,
        // 船舶类型
        monetaryKey: null,
        // 表格显示数据
        tableDate: [],
        // 是否显示
        showType: true,
        // 年
        year: '',
        currentPage: 1,
        pageSize: 10,
        deptBudgetTotal: 0,
        searchTypeText: '执行中',
        searchKeyWord: '',
        contractType: 2,
        searchType: 1,
        // 提交类型
        submitType: true,
        size: 10,
        spanArr: [],
        inOutDate: [],
        tranTypeKey: '1',
        warehouseName: '',
        compId: localStorage.getItem('ws-pf_compId'),
        deptCircularPage: {},
        warehouseList: [],
        deptBudgetList: {},
        historyList: [],
        taskTypeList: [{
            value: '执行中',
            type: 1
          },
          {
            value: '已完成',
            type: 2
          },
          {
            value: '全部任务',
            type: ''
          },
        ],
        pickerBeginDateBefore: {
          disabledDate: (time) => {
            return time.getTime() > Date.now()
          },
        },
        accessoryTFs: false,
      }
    },
    activated() {
      this.getList()
      this.showType = this.isShow
    },
    methods: {
      //派车
      warehousing(item) {
        this.$router.push({
          name: 'vehicleDispatchingcar',
          query: {
            id: item.id,
          },
        })
      },
      //查看//传参
      nocomplete(row) {
        this.$router.push({
          name: 'vehicleDispatchingview',
          query: {
            id: row.id,
          },
        })
      },
      dateFormat(fmt, date) {
        let ret
        const opt = {
          'Y+': date.getFullYear().toString(), // 年
          'm+': (date.getMonth() + 1).toString(), // 月
          'd+': date.getDate().toString(), // 日
          'H+': date.getHours().toString(), // 时
          // "M+": date.getMinutes().toString(),         // 分
          // "S+": date.getSeconds().toString()          // 秒
          // 有其他格式化字符需求可以继续添加，必须转化成字符串
        }
        for (let k in opt) {
          ret = new RegExp('(' + k + ')').exec(fmt)
          if (ret) {
            fmt = fmt.replace(
              ret[1],
              ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
            )
          }
        }
        return fmt
      },
      handleClose() {
        this.accessoryTFs = false
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        console.log(`当前页: ${val}`)
        this.getList()
      },
      changestatus(state) {
        this.searchType = state
        this.getList()
      },
      getList() {
        automobileList({
            compId: localStorage.getItem('ws-pf_compId'),
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            searchType: this.searchType,
            startDate: this.startDate,
            endDate: this.endDate,
            searchKeyWord: this.searchKeyWord,
            tranTypeKey: this.tranTypeKey,
          })
          .toPromise()
          .then((response) => {
            this.deptCircularPage.currentPage = response.current
            this.deptCircularPage.pageSize = response.size
            this.deptBudgetTotal = response.total
            this.warehouseList = response
          })
      },
      editClick(row) {
        var status = ''
        if (row.processStatus == '待执行' || row.processStatus == '已完成') {
          status = '执行中'
        } else if (row.processStatus == '执行中') {
          status = '已完成'
        }
        //cancelButtonClass: "btn-custom-cancel"
        this.$confirm(`是否将状态改为${status}`, {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
          .then(() => {
            alsostate({
                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) {
        for (var i = 0; i < this.taskTypeList.length; i++) {
          if (this.taskTypeList[i].value == e) {
            this.searchType = this.taskTypeList[i].type
            this.find()
          }
        }
      },
      history(row) {
        billoperatehis({
            id: row.id
          })
          .toPromise()
          .then((response) => {
            this.historyList = response
          })
      },
      find() {
        if (this.inOutDate != null) {
          if (this.inOutDate.length > 0) {
            this.startDate = this.dateFormat('YYYY-mm-dd', this.inOutDate[0])
            this.endDate = this.dateFormat('YYYY-mm-dd', this.inOutDate[1])
          } else {
            this.startDate = ''
            this.endDate = ''
          }
        } else {
          this.startDate = ''
          this.endDate = ''
        }
        this.currentPage = 1
        this.getList()
      },
    },
  }
</script>
<style lang="scss" scoped>
  .connert {
    width: 90%;
    margin: 0 auto;
  }

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

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

  .el-button--default {
    color: #8890b1;
    border-color: #e8eaf1;
  }

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

  /deep/.findValue .el-input__inner {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }

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

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

  //状态样式
  .executory,
  .inExecution,
  .done {
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 50%;
    position: relative;
    top: -1px;
    font-size: 14px;
  }

  .executory {
    background: #ff9f24;
  }

  .inExecution {
    background: #5878e8;
  }

  .done {
    background: #50cad4;
  }

  .putstorage.el-button--default,
  .deliverystorage.el-button--default {
    border-color: #8890b1;
    background-color: #fff;
    color: #8890b1;
  }

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

  /deep/.el-table tr td:first-child,
  /deep/.el-table tr th.is-leaf:first-child {
    border-left: 1px solid #e9ecf7;
  }

  .record,
  .adjustment {
    display: inline-block;
    color: #5878e8;
    padding: 0 4px !important;
    position: relative;
  }

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

  .el-row {
    height: 60px;
  }

  .base_header_layout .grid-content {
    margin-top: 80px;
  }

  .el-input--small .el-input__inner {
    margin-left: 20px;
  }

  .el-range-editor--small.el-input__inner {
    height: 32px;
    margin: 0 10px;
  }

  /deep/.el-pagination {
    text-align: center;
    white-space: nowrap;
    padding: 2px 5px;
    color: #303133;
    font-weight: 700;
    margin-bottom: 20px;
  }

  .el-select {
    width: 30%;
    margin-right: 10px;
  }

  /deep/.typeselect .el-input__inner {
    color: #8890b1;
  }
</style>