增加运单导出

src/request/modules/apiTms.js

@@ -40,4 +40,7 @@ export const queryExceptionRate = (params) => res('get', 'apiTms', '/dashboard/q
 // ### 查询基本信息配置
 export const queryBaseConfig = (params) => res('get', 'apiTms', '/baseConfig/1',params)
 // ### 修改基本配置信息
-export const updateBaseConfig = (params) => res('put', 'apiTms', '/baseConfig',params)
+export const updateBaseConfig = (params) => res('put', 'apiTms', '/baseConfig',params)
+
+// 导出报表列表
+export const wayBillListExport = (params) => res('get', 'apiTms', '/waybills/wayBillListExport',params)

src/views/trackManager/waybillManager.vue

@@ -1,15 +1,11 @@
-/**
-  // author：jiana
-  // time:2025-04-23
-  // desc:运单管理
-*/
+/** // 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%"/>
+          运单号 <Input v-model="filtInfoData.waybillNum" placeholder="请输入运单号" style="width: 80%" />
         </Col>
         <Col span="2">
           <Button type="primary" @click="getData">查询</Button>
@@ -17,49 +13,55 @@
         <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;">
+    <Card style="margin-top: 20px">
       <Row>
-        <Col span="12">
-          运单列表
-        </Col>
-        <Col span="12" style="text-align: right;">
+        <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
+        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="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="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" prop="plateColor" width="100"> </el-table-column>
         <el-table-column label="状态" align="center" width="100">
           <template #default="scope">
-            <span>{{ wayBillStatus(scope.row.status)}}</span>
+            <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') || '暂无'}}
+            {{ 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') || '暂无'}}
+            {{ 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">
+        <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>
@@ -73,35 +75,61 @@
     <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 { defineComponent, ref, reactive, onMounted } from 'vue'
 import { tms } from '@/request/api'
-import { Message,Modal,Spin,Input } from 'view-ui-plus'
+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 {wayBillStatus,plateColorFilter} from '@/utils/system/filters'
+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
+  components: {
+    mapTrack,
   },
   setup() {
-    const router = useRouter();
-    const route = useRoute();
-    let filtInfoData = reactive({ // 搜索
-      limit:10,offset:0,waybillNum:''
+    const router = useRouter()
+    const route = useRoute()
+    const exportModal = ref(false)
+
+    let filtInfoData = reactive({
+      // 搜索
+      limit: 10,
+      offset: 0,
+      waybillNum: '',
     })
 
-    let TabData = ref([])  // 列表数据
+    let TabData = ref([]) // 列表数据
 
     let loading = ref(false)
     //获取列表内容
-    async function getData(){
+    async function getData() {
       loading.value = true
-      await tms.queryWaybillByCondition(filtInfoData).then(res =>{
+      await tms.queryWaybillByCondition(filtInfoData).then(res => {
         if (res.code == 0) {
           TabData.value = res
         }
@@ -109,7 +137,7 @@ export default defineComponent({
       loading.value = false
     }
     //重置
-    function resetData(){
+    function resetData() {
       filtInfoData.offset = 0
       filtInfoData.limit = 10
       filtInfoData.waybillNum = ''
@@ -118,75 +146,131 @@ export default defineComponent({
 
     let currentPage = ref(1)
     //更改页码
-    function changePage (page) {
-      if(TabData.value.limit){
-        filtInfoData.offset = (page -1) *  TabData.value.limit  //更新偏移量
-        currentPage = page  //切换当前页码
-        getData() 
+    function changePage(page) {
+      if (TabData.value.limit) {
+        filtInfoData.offset = (page - 1) * TabData.value.limit //更新偏移量
+        currentPage = page //切换当前页码
+        getData()
       }
     }
 
     //删除
-    function deleteInfo(id){
+    function deleteInfo(id) {
       this.$Modal.confirm({
         title: '提示',
         content: '<p>确定删除该信息吗？</p>',
-        onOk: async() => {
-          const params={
-            id:id,
-            reason:offSafeValue.value
+        onOk: async () => {
+          const params = {
+            id: id,
+            reason: offSafeValue.value,
           }
-          await cow.cattleDealoffSale(params).then(res=>{
-            if(res.code === 101){
-              Message.success('删除成功！');
+          await cow.cattleDealoffSale(params).then(res => {
+            if (res.code === 101) {
+              Message.success('删除成功！')
               getData()
             }
           })
         },
         onCancel: () => {
-          this.$Message.info('Clicked cancel');
-        }
+          this.$Message.info('Clicked cancel')
+        },
       })
     }
 
     //批量操作
-    function batchOperation(){
-      
-    }
+    function batchOperation() {}
     const showModal = ref(false)
     let waybillNum = ref('')
     let waybill = ref({}) // 运单数据
     // 查看详情
-    function lookTrack(data){
+    function lookTrack(data) {
       waybill.value = data
       waybillNum.value = data.waybillNum
       showModal.value = true
     }
 
     // 选择监听器
-    const handleSelectionChange = (val) =>{
-      context.emit("selection-change", val)
+    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() 
+    onMounted(() => {
+      getData()
     })
     return {
-      handleSelectionChange,getData,changePage,moment,deleteInfo,TabData,filtInfoData,
-      loading,batchOperation,resetData,lookTrack,showModal,wayBillStatus,plateColorFilter,waybillNum,waybill
+      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{
+.waybillManager {
   padding: 1em;
-  .opt_btn{margin-bottom:3px; margin-right: 3px;}
-  .page_style{
-    text-align: right; margin-top: 1em;
+  .opt_btn {
+    margin-bottom: 3px;
+    margin-right: 3px;
+  }
+  .page_style {
+    text-align: right;
+    margin-top: 1em;
     // background-color: var(--system-container-background);
   }
 }
-
-</style>
+</style>