web-trackMangaer/src/views/trackManager/waybillManager.vue

/** // author：jiana // time:2025-04-23 // desc:运单管理 */
<template>
  <div class="waybillManager">
    <Card>
      <!-- 筛选 -->
      <Row :gutter="8">
        <Col span="10">
          运单号 <Input v-model="filtInfoData.waybillNum" placeholder="请输入运单号" style="width: 80%" />
        </Col>
        <Col span="2">
          <Button type="primary" @click="getData">查询</Button>
        </Col>
        <Col span="2">
          <Button @click="resetData">重置</Button>
        </Col>
        <Col span="2">
          <Button type="primary" @click="exportModal = true">导出</Button>
        </Col>
      </Row>
    </Card>
    <Card style="margin-top: 20px">
      <Row>
        <Col span="12"> 运单列表 </Col>
        <Col span="12" style="text-align: right">
          <!-- <Button @click="batchOperation">批量操作</Button> -->
        </Col>
      </Row>
      <!-- 表格部分 -->
      <el-table
        v-loading="loading"
        :data="TabData.data"
        border
        style="width: 100%; margin-top: 20px"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" align="center" width="50"/> -->
        <el-table-column label="运单号" width="180" prop="waybillNum" align="center" />
        <el-table-column label="运输起始地" width="100" prop="transportOrigin" align="center"></el-table-column>
        <el-table-column label="运输目的地" width="120" prop="transportDestination" align="center"></el-table-column>
        <el-table-column label="司机姓名" prop="driverName" width="120" align="center"></el-table-column>
        <el-table-column label="司机手机号" prop="driverPhone" width="120" align="center"></el-table-column>
        <el-table-column label="车牌" prop="plateNumber" width="120" align="center"></el-table-column>
        <el-table-column label="车牌颜色" align="center" prop="plateColor" width="100"> </el-table-column>
        <el-table-column label="状态" align="center" width="100">
          <template #default="scope">
            <span>{{ wayBillStatus(scope.row.status) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="运输发货时间" width="160" align="center">
          <template #default="scope">
            {{ moment(scope.row.startTime).format('yyyy-MM-DD hh:mm:ss') || '暂无' }}
          </template>
        </el-table-column>
        <el-table-column label="运输到货时间" width="160" align="center">
          <template #default="scope">
            {{ moment(scope.row.endTime).format('yyyy-MM-DD hh:mm:ss') || '暂无' }}
          </template>
        </el-table-column>
        <el-table-column label="订单号" prop="orderInfo.orderNum" width="220" align="center"></el-table-column>
        <el-table-column label="物料名称" prop="orderInfo.name" width="150" align="center"></el-table-column>
        <el-table-column label="供应商名称" prop="orderInfo.company" width="180" align="center"></el-table-column>
        <el-table-column label="牧场名称" prop="orderInfo.orgName" width="180" align="center"></el-table-column>
        <el-table-column label="操作" width="130" fixed="right" align="center">
          <template #default="scope">
            <Button class="opt_btn" size="small" type="primary" ghost @click="lookTrack(scope.row)">查看轨迹</Button>
            <!-- <Button class="opt_btn" size="small" type="warning" @click="deleteInfo(scope.row.id)">删除</Button> -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="page_style">
        <Page :total="TabData.total" :model-value="currentPage" show-elevator show-total @on-change="changePage" />
      </div>
    </Card>
    <Modal v-model="showModal" width="75%" title="查看轨迹">
      <mapTrack :waybillNum="waybillNum" :waybill="waybill" v-if="showModal"></mapTrack>
    </Modal>
    <!-- 运单状态选择弹框 -->
    <Modal v-model="exportModal" width="30%" @on-ok="exportData" ok-text="确认导出" title="导出运单状态选择">
      <div>
        <div class="modal-content">
          <div class="modal-header">
            <h3>运单状态选择</h3>
          </div>
          <div class="modal-body">
            <el-select v-model="waybillStatus" placeholder="全部">
              <el-option label="全部" value=""></el-option>
              <el-option label="未开始" value="CREATED"></el-option>
              <el-option label="运输中" value="IN_TRANSIT"></el-option>
              <el-option label="运单结束" value="FINISHED"></el-option>
            </el-select>
          </div>
        </div>
      </div>
    </Modal>

  </div>
</template>
<script>
import { defineComponent, ref, reactive, onMounted } from 'vue'
import { tms } from '@/request/api'
import { Message, Modal, Spin, Input } from 'view-ui-plus'
import moment from 'moment'
import { useRouter, useRoute } from 'vue-router'
import AMapLoader from '@amap/amap-jsapi-loader'
import mapTrack from './mapTrack.vue'
import api from '@/request/apiConfig'
import { wayBillStatus, plateColorFilter } from '@/utils/system/filters'
import axios from 'axios'
export default defineComponent({
  components: {
    mapTrack,
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const exportModal = ref(false)

    let filtInfoData = reactive({
      // 搜索
      limit: 10,
      offset: 0,
      waybillNum: '',
    })

    let TabData = ref([]) // 列表数据

    let loading = ref(false)
    //获取列表内容
    async function getData() {
      loading.value = true
      await tms.queryWaybillByCondition(filtInfoData).then(res => {
        if (res.code == 0) {
          TabData.value = res
        }
      })
      loading.value = false
    }
    //重置
    function resetData() {
      filtInfoData.offset = 0
      filtInfoData.limit = 10
      filtInfoData.waybillNum = ''
      getData()
    }

    let currentPage = ref(1)
    //更改页码
    function changePage(page) {
      if (TabData.value.limit) {
        filtInfoData.offset = (page - 1) * TabData.value.limit //更新偏移量
        currentPage = page //切换当前页码
        getData()
      }
    }

    //删除
    function deleteInfo(id) {
      this.$Modal.confirm({
        title: '提示',
        content: '<p>确定删除该信息吗？</p>',
        onOk: async () => {
          const params = {
            id: id,
            reason: offSafeValue.value,
          }
          await cow.cattleDealoffSale(params).then(res => {
            if (res.code === 101) {
              Message.success('删除成功！')
              getData()
            }
          })
        },
        onCancel: () => {
          this.$Message.info('Clicked cancel')
        },
      })
    }

    //批量操作
    function batchOperation() {}
    const showModal = ref(false)
    let waybillNum = ref('')
    let waybill = ref({}) // 运单数据
    // 查看详情
    function lookTrack(data) {
      waybill.value = data
      waybillNum.value = data.waybillNum
      showModal.value = true
    }

    // 选择监听器
    const handleSelectionChange = val => {
      context.emit('selection-change', val)
    }
    const waybillStatus = ref('')
    // 导出
    const exportData = () => {
      console.log(api, 'api');
      axios({
        method: 'get',
        url: api.apiTms + '/waybills/wayBillListExport',
        // headers里面设置token
        headers: {
          'Content-Type': 'application/json',
          'X-AIYANGNIU-SIGNATURE': localStorage.aynUserToken,
        },
        params: {
          status: waybillStatus.value,
        },
        dataType: 'json',
        // 二进制流文件，一定要设置成blob，默认是json
        responseType: 'blob',
      }).then(res => {
        const filename = '运单报表'
        const link = document.createElement('a')
        const blob = new Blob([res.data], { type: 'application/zip;charset=utf-8' })
        if ('download' in document.createElement('a')) {
          // 非IE下载
          const elink = document.createElement('a')
          elink.download = filename + '.xls'
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName)
        }
      })
    }

    onMounted(() => {
      getData()
    })
    return {
      handleSelectionChange,
      getData,
      changePage,
      moment,
      deleteInfo,
      TabData,
      filtInfoData,
      loading,
      batchOperation,
      resetData,
      lookTrack,
      showModal,
      wayBillStatus,
      plateColorFilter,
      waybillNum,
      waybill,
      exportData,
      exportModal,
      waybillStatus
    }
  },
})
</script>

<style lang="scss" scoped>
.waybillManager {
  padding: 1em;
  .opt_btn {
    margin-bottom: 3px;
    margin-right: 3px;
  }
  .page_style {
    text-align: right;
    margin-top: 1em;
    // background-color: var(--system-container-background);
  }
}
</style>