yiliangyiyun-pc-jj/src/views/taskManagement/tranManagementTransport.vue

<!--运输任务-->
<template>
  <div>
    <BaseHeaderLayout :leftSpan="8">
      <template slot="left">
        <ws-button class="but" type="primary" @click="handleAdd()" v-hasPermission="
           `transportationTask.transportation.transportationInfo.add`
          ">添加</ws-button>
      </template>
      <template slot="right">
        <span style="width: 150px; 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>
        <span style="width: 150px; display: inline-block;color: #8890B1;">起点：</span>
        <el-input label="起点" placeholder="请输入起点" clearable maxlength="200" type="input" v-model="start"></el-input>
        <span style="width: 150px; display: inline-block;color: #8890B1;">终点：</span>
        <el-input label="终点" placeholder="请输入终点" clearable maxlength="200" type="input" v-model="end"></el-input>
        <el-input @keyup.enter.native="lookUp()" v-model="searchKeyWord" placeholder="可按合同编号或运输任务编号查找" clearable
          maxlength="500" type="input" class="findValue"></el-input>
        <div class="search">
          <ws-button class="find" type="primary" @click="lookUp()">
            <img width="16" height="16" style="
                vertical-align: text-top;
                position: relative;
                top: 0px;
                left: -8px;
              " src="../../../public/img/sousuo.png" alt />
          </ws-button>
        </div>
      </template>
    </BaseHeaderLayout>
    <el-table class="wenzi" :data="gainList.records" style="width: 100%; " height="calc(100% - 110px)">
      <el-table-column type="index" label="序号">
        <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="taskNo" label="运输任务编号" width="140"></el-table-column>
      <!-- <el-table-column prop="taskNo" label="任务类型" width="140"></el-table-column> -->
      <el-table-column prop="contractNo" label="合同编号" width="160"></el-table-column>
      <el-table-column prop=" weight" class="table_td" label="货物（吨数）" width="130">
        <template slot-scope="scope">{{ scope.row.goodsName }}({{ scope.row.weight }})</template>
      </el-table-column>
      <el-table-column prop="tranType" class="table_td" label="运输方式" width="120"></el-table-column>
      <el-table-column prop class="table_td" label="起点">
        <template slot-scope="scope">
          {{ scope.row.startPrivate }}{{ scope.row.startCity
            }}{{ scope.row.startArea }}{{ scope.row.startDetailedAddress }}
        </template>
      </el-table-column>
      <!-- <el-table-column prop="currentTransferAddress" class="table_td" label="当前中转">
      </el-table-column> -->
      <el-table-column prop="end" class="table_td" label="终点">
        <template slot-scope="scope">
          {{ scope.row.endPrivate }}{{ scope.row.endCity
            }}{{ scope.row.endArea }}{{ scope.row.endDetailedAddress }}{{scope.row.receiveWarehouse}}
        </template>
      </el-table-column>

      <el-table-column prop="status" label="状态" width="100">
        <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.status == '待执行'" class="executory"></span>
                <span v-if="scope.row.status == '执行中'" class="inExecution"></span>
                <span v-if="scope.row.status == '已完成'" class="done"></span>
                {{ scope.row.status }}
              </span>
            </template>
            <div>
              <p style="margin-top: 0; padding-left: 10px">操作历史</p>
              <div v-for="(item, index) in historyList" 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="seller" label="操作" width="160">
        <template slot-scope="scope">
          <div class="record" @click="nocomplete(scope.row)" v-hasPermission="
           `transportationTask.transportation.transportationInfo.view`
          ">查看</div>
          <div class="record" @click="delivery(scope.row)" v-hasPermission="
           `transportationTask.transportation.transportationInfo.edit`
          ">编辑</div>
          <div class="record1" @click="deleteclick(scope.row)" v-hasPermission="
           `transportationTask.transportation.transportationInfo.delete`
          ">删除</div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="deptBudgetTotal"></el-pagination>
  </div>
</template>
<script>
  import {
    gain,
    deltran,
    states
  } from '@/model/tasksport/index'
  import Pagination from '@/components/Pagination'
  import WsUpload from '@/components/WsUpload'
  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: '',
        gainList: [],
        currentPage: 1,
        primary: 1,
        deptBudgetTotal: 0,
        pageSize: 10,
        deptBudgetTotal: 0,
        searchType: 1,
        searchTypeText: '执行中',
        searchKeyWord: '',
        contractType: 2,
        // 提交类型
        submitType: true,
        size: 10,
        spanArr: [],
        warehouseName: '',
        compId: localStorage.getItem('ws-pf_compId'),
        deptCircularPage: {},
        historyList: [],
        pickerBeginDateBefore: {
          disabledDate: time => {
            return time.getTime() > Date.now()
          }
        },
        accessoryTFs: false,
        taskTypeList: [{
            value: '执行中',
            type: 1
          },
          {
            value: '已完成',
            type: 2
          },
          {
            value: '全部任务',
            type: 3
          },
        ],
        start: '',
        end: '',
      }
    },
    activated() {
      this.getList()
      this.showType = this.isShow
    },
    methods: {
      //添加
      add() {
        this.$router.push({
          path: 'tranManagementTransportAdd'
        })
      },
      //查找
      lookUp() {
        this.currentPage = 1
        this.getList()
      },
      history(row) {
        console.log(row)
        billoperatehis({
            id: row.id
          })
          .toPromise()
          .then((response) => {
            this.historyList = response
          })
      },
      deleteclick(row) {
        //cancelButtonClass: "btn-custom-cancel"
        this.$confirm(`运输任务删除后不可恢复，是否确定删除？`, {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            deltran({
                id: row.id
              })
              .toPromise()
              .then(response => {
                this.getList()
              })
          })
          .catch(() => {
            return false
          })
      },
      getList() {
        gain({
            compId: localStorage.getItem('ws-pf_compId'),
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            searchType: this.searchType,
            start: this.start,
            end: this.end,
            searchKeyWord: this.searchKeyWord,

          })
          .toPromise()
          .then((response) => {
            this.gainList = response
            this.currentPage = response.current
            this.pageSize = response.size
            this.deptBudgetTotal = response.total
          })
      },
      handlestatus(status) {
        this.searchType = status
        if (status == 1) {
          this.primary = 1
        } else if (status == 2) {
          this.primary = 2
        } else {
          this.primary = 3
        }
        this.getList()
      },
      //编辑
      delivery(item) {
        this.$router.push({
          path: 'tranManagementTransportEdit',
          query: {
            id: item.id
          }
        })
      },
      //查看
      warehousing(item) {
        var free = 0
        for (var i = 0; i < item.warehouseNumViewList.length; i++) {
          free += Number(item.warehouseNumViewList[i].storage)
        }
        this.$router.push({
          path: 'tranManagementLook',
          query: {
            baseId: item.warehouseId,
            positionId: item.binNumberId,
            warehouseName: item.warehouseName,
            binNumber: item.binNumber,
            capacity: item.capacity - free
          }
        })
      },
      getSpanArr(data) {
        let that = this

        //页面展示的数据，不一定是全部的数据，所以每次都清空之前存储的 保证遍历的数据是最新的数据。以免造成数据渲染混乱

        that.spanArr = []

        that.pos = 0

        //遍历数据

        data.forEach((item, index) => {
          //判断是否是第一项

          // if (index === 0) {
          //   this.spanArr.push(1)
          //   this.pos = 0
          // } else {
          //不是第一项时，就根据标识去存储
          if (data[index].warehouseNumViewList.length > 1) {
            // 查找到符合条件的数据时每次要把之前存储的数据+1
            this.spanArr[this.pos] = data[index].warehouseNumViewList.length
            this.spanArr.push(0)
          } else {
            // 没有符合的数据时，要记住当前的index
            this.spanArr.push(1)
            this.pos = index
          }
          // }
        })
      },
      //查看//传参
      nocomplete(row) {
        this.$router.push({
          path: 'tranManagementLook',
          query: {
            id: row.id
          }
        })
      },
      //查看
      handleLook() {
        this.$router.push({
          path: 'tranManagementLook'
        })
      },
      //添加
      handleAdd() {
        this.$router.push({
          path: 'tranManagementTransportAdd'
        })
      },
      //编辑
      handleEdit() {
        this.$router.push({
          path: 'tranManagementTransportEdit'
        })
      },
      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()
      },
      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(() => {
            states({
                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()
          }
        }
      },
      handleExamine(row) {
        this.$router.push({
          name: 'salesContractExamine',
          query: {
            id: row.id
          }
        })
      },
      // 关闭 dialog时 处理文件url 初始化upload组件
      handleCloe() {
        this.dialogViewSpareMoney = false
      },
    }
  }
</script>
<style lang="scss" scoped>
  .vertical-text-left {
    width: 62px;
    text-align: right;
  }

  .el-pagination {
    padding-top: 20px;
    text-align: center;
  }

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

  /deep/.base_header_layout .grid-content.right .find.el-button--primary {
    width: 30px;
    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;
  }

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

  .record,
  .adjustment,
  .record1 {
    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;
  }

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

  .findValue.el-input {
    width: 100%;
    margin: 0;
  }

  .el-input {
    margin: 0 10px;
    width: 70%;
  }

  /deep/.search .el-button--small {
    padding: 0;
  }

  //操作按钮
  .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;
  }

  /deep/.el-row {
    -webkit-box-sizing: border-box;
    height: 50px;
    box-sizing: border-box;
  }

  /deep/.el-col-12 {
    width: 50%;
    height: 50px;
  }

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

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

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

  /deep/.typeselect .el-input__inner {
    color: #8890B1;
  }

  // 操作历史
  .vertical-text-left {
    width: 62px;
    text-align: right;
  }

  .vertical-circle {
    width: 10px;
    height: 10px;
    border: 2px solid #5878e8;
    background-color: #ffffff;
    -webkit-border-radius: 100px;
  }

  .vertical-circle:first-child {
    color: red;
  }

  .vertical-text {
    margin: 0 10px;
    color: #8890b1;
    font-size: 12px;
    margin-top: -4px;
  }

  .vertical-line {
    height: 64px;
    border-left: 2px solid #e9ecf7;
    margin-left: 4px;
    padding: 0 3px;
    // border-image: -webkit-linear-gradient(#00eba7, #08b8e6) 30 30;
    // border-image: -moz-linear-gradient(#00eba7, #08b8e6) 30 30;
    // border-image: linear-gradient(#00eba7, #08b8e6) 30 30;
  }
</style>