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

//发货反馈
<template>
  <div>
    <BaseHeaderLayout :leftSpan="8">
      <template slot="left"> </template>
      <!-- 接单开始 -->
      <template slot="right">
        <span style="width: 160px; 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: 160px; display: inline-block; color: #8890b1">类型：</span>
        <ws-select v-model="tranTypeKeyText" placeholder="" class="typeselect" @change="selecttranType"
          :value="tranTypeKey">
          <ws-option v-for="item in tranTypeList" :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"></ws-input>
        <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="tranManagementList.records" style="width: 100%; margin-top: 20px" height="calc(100% - 110px)">
        <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="processNo" label="运输任务编号/合同编号" width="140">
          <template scope="scope">
            <span v-if="scope.row.processNo">{{ scope.row.processNo }}</span>
            <span v-else>{{ scope.row.contractNo }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="tranType" 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 prop="tranCycle" label="运输周期" width="160">
          <template scope="scope">
            {{ scope.row.deliveryDateStart }} ~ {{ scope.row.deliveryDateEnd }}
          </template>
        </el-table-column>
        <el-table-column prop="feedbackStatus" 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.feedbackStatus == '待执行'" class="executory"></span>
                  <span v-if="scope.row.feedbackStatus == '执行中'" class="inExecution"></span>
                  <span v-if="scope.row.feedbackStatus == '已完货'" class="done"></span>{{ scope.row.feedbackStatus }}
                </span>
              </template>
              <div>
                <p style="margin-top: 0; padding-left: 10px">XXXXX</p>
                <div v-for="(item, index) in historyList" class="flex" :key="index">
                  <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" class="table_td" label="接单时间" width="90">
        </el-table-column>
        <el-table-column prop="seller" label="操作" width="160">
          <template slot-scope="scope">
            <template v-if="scope.row.feedbackStatus != '已完货'">
              <div class="record" @click="trainSee(scope.row)">查看</div>
              <div class="adjustment" @click="feedback(scope.row)">反馈</div>
            </template>
            <template v-else>
              <div class="record1" @click="trainSee(scope.row)">查看</div>
            </template>
          </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,
    state
  } from '@/model/transport/index'
  import {
    downloadFile
  } from '@/utils/batchDown'
  import Pagination from '@/components/Pagination'
  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,
        // 船舶类型
        monetaryKey: null,
        // 表格显示数据
        tableDate: [],

        // 是否显示
        showType: true,
        // 年
        year: '',
        currentPage: 1,
        pageSize: 10,
        deptBudgetTotal: 0,
        searchType: 1,
        tranTypeKey: 5,
        tranTypeKeyText: '全部',
        searchTypeText: '执行中',
        searchKeyWord: '',
        contractType: 2,
        // tranTypeKey: 2,
        feedbackFlag: 1,
        searchTypeOne: 1,
        taskTypeList: [{
            value: '执行中',
            type: 1
          },
          {
            value: '已完货',
            type: 2
          },
          {
            value: '全部任务',
            type: 3
          },
        ],
        tranTypeList: [{
            value: '汽运',
            type: 1
          },
          {
            value: '火运',
            type: 2
          },
          {
            value: '船运',
            type: 3
          },
          {
            value: '他运',
            type: 4
          },
          {
            value: '全部',
            type: 5
          },
        ],
        // 提交类型
        submitType: true,
        size: 10,
        primary: '1',
        spanArr: [],
        inOutDate: [],
        warehouseName: '',
        compId: localStorage.getItem('ws-pf_compId'),
        deptCircularPage: {},
        tranManagementList: [],
        deptBudgetList: {},
        historyList: [],
        pickerBeginDateBefore: {
          disabledDate: (time) => {
            return time.getTime() > Date.now()
          },
        },
        accessoryTFs: false,
      }
    },
    activated() {
      this.getList()
      this.showType = this.isShow
    },
    methods: {
      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
          }
          // }
        })
      },
      //查看
      trainSee(row) {
        if (row.tranType == '汽运') {
          this.$router.push({
            path: 'tranManagementTransporFeedbackLook',
            query: {
              id: row.id,
            },
          })
        } else if (row.tranType == '火运') {
          this.$router.push({
            path: 'tranManagementFireFeedbackLook',
            query: {
              id: row.id,
            },
          })
        } else if (row.tranType == '船运') {
          this.$router.push({
            path: 'tranManagementShippingFeedbackLook',
            query: {
              id: row.id,
            },
          })
        } else if (row.tranType == '他运') {
          this.$router.push({
            path: 'tranManagementthirdpartnarFeedbackLook',
            query: {
              id: row.id,
            },
          })
        }
      },
      //反馈
      feedback(row) {
        if (row.tranType == '汽运') {
          this.$router.push({
            path: 'tranManagementTransporFeedback',
            query: {
              id: row.id,
            },
          })
        } else if (row.tranType == '火运') {
          this.$router.push({
            path: 'tranManagementFireFeedback',
            query: {
              id: row.id,
            },
          })
        } else if (row.tranType == '船运') {
          this.$router.push({
            path: 'tranManagementShippingFeedback',
            query: {
              id: row.id,
            },
          })
        } else if (row.tranType == '他运') {
          this.$router.push({
            path: 'tranManagementthirdpartnarFeedback',
            query: {
              id: row.id,
            },
          })
        }
      },
      // statusquery(status) {
      //    if (status == 1) {
      //     this.primary = 1
      //   } else if (status == 2) {
      //     this.primary = 2
      //   } else {
      //     this.primary = 3
      //   }
      //   this.feedbackFlag = status
      //   this.getList()
      // },
      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()
      },
      getList() {
        automobileList({
            compId: localStorage.getItem('ws-pf_compId'),
            feedbackFlag: this.feedbackFlag,
            tranTypeKey: this.tranTypeKey,
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            startDate: this.startDate,
            endDate: this.endDate,
            searchKeyWord: this.searchKeyWord,
          })
          .toPromise()
          .then((response) => {
            this.deptCircularPage.currentPage = response.current
            this.deptCircularPage.pageSize = response.size
            this.deptBudgetTotal = response.total
            this.tranManagementList = response
          })
      },
      editClick(row) {
        var feedbackStatus = ''
        if (row.feedbackStatus == '待执行' || row.feedbackStatus == '已完货') {
          feedbackStatus = '执行中'
        } else if (row.feedbackStatus == '执行中') {
          feedbackStatus = '已完货'
        }
        //cancelButtonClass: "btn-custom-cancel"
        this.$confirm(`是否将状态改为${feedbackStatus}`, {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
          .then(() => {
            state({
                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.feedbackFlag = this.taskTypeList[i].type
          }
        }
        this.getList()
      },
      selecttranType(e) {
        for (var i = 0; i < this.tranTypeList.length; i++) {
          if (this.tranTypeList[i].value == e) {
            this.tranTypeKey = this.tranTypeList[i].type
          }
        }
        this.getList()
      },
      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>
  .container {
    width: 100%;
    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,
  .record1,
  .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;
  }

  .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>