Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/americanCont...

gongjinbao

2025-01-08 497583fe37d894095ea03b2ee87d43468b8eed6c

 src/view/Home.vue

@@ -1,14 +1,16 @@
<template>
    <div>
        <Header />
        <UserInfo :show="showUserInfo" @close="showUserInfo = false" />
        <!-- <UserInfo :show="true" /> -->
        <Header style="position: sticky;top: 0;z-index: 1999;" />
        <NoticeComponent v-if="noticeShow" :show="noticeShow" @close="noticeShow = false" />
        <AddedInformation v-if="false" :show="false" />
        <div class="search-box">
            <div class="title-card">
                <div class="title-left">
                    订单列表
                </div>
                <div class="title-right">
                    <span class="order-agress">下单须知</span>
                    <span @click="noticeShow = true" class="order-agress">下单须知</span>
                    <div class="line"></div>
                    <span class="add-ord">添加订单</span>
                </div>
@@ -16,33 +18,33 @@
            <div class="search-form">
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <div class="flex a-center justify-between flex-wrap">
                        <el-form-item label="订单编号：" prop="date" class="unset_m" style="margin-left: 15px">
                            <el-input style="width: 230px;" v-model="searchForm.input" placeholder="请输入"></el-input>
                        <el-form-item label="订单编号：" prop="orderId" class="unset_m" style="margin-left: 15px">
                            <el-input style="width: 230px;" v-model="searchForm.orderId" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="集装箱号：" prop="date" class="unset_m">
                            <el-input style="width: 230px;" v-model="searchForm.input" placeholder="请输入"></el-input>
                        <el-form-item label="集装箱号：" prop="container" class="unset_m">
                            <el-input style="width: 230px;" v-model="searchForm.container" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="提单号：" prop="date" class="unset_m">
                            <el-input style="width: 230px;" v-model="searchForm.input" placeholder="请输入"></el-input>
                        <el-form-item label="提单号：" prop="bol" class="unset_m">
                            <el-input style="width: 230px;" v-model="searchForm.bol" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="收件人邮箱：" prop="date" class="unset_m">
                            <el-input style="width: 230px;" v-model="searchForm.input" placeholder="请输入"></el-input>
                        <el-form-item label="收件人邮箱：" prop="post" class="unset_m">
                            <el-input style="width: 230px;" v-model="searchForm.post" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="订单状态：" prop="date" class="unset_m">
                            <el-select style="width: 230px;" :popper-append-to-body="false" v-model="searchForm.typeId"
                        <el-form-item label="订单状态：" prop="status" class="unset_m">
                            <el-select style="width: 230px;" :popper-append-to-body="false" v-model="searchForm.status"
                                placeholder="请选择">
                                <el-option v-for="item in options" placeholder="请输入" :key="item.id" :label="item.label"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="收件人地址：" prop="date" class="unset_m1"
                        <el-form-item label="收件人地址：" prop="address" class="unset_m1"
                            style="margin-bottom: unset !important;">
                            <el-input style="width: 230px;" v-model="searchForm.input" placeholder="请输入"></el-input>
                            <el-input style="width: 230px;" v-model="searchForm.address" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="DO文件是否上传：" prop="date" class="unset_m1"
                        <el-form-item label="DO文件是否上传：" prop="DO" class="unset_m1"
                            style="margin-bottom: unset !important;">
                            <el-select style="width: 230px;" :popper-append-to-body="false" v-model="searchForm.typeId"
                            <el-select style="width: 230px;" :popper-append-to-body="false" v-model="searchForm.DO"
                                placeholder="请选择">
                                <el-option v-for="item in option1" placeholder="请输入" :key="item.id" :label="item.label"
                                    :value="item.id">
@@ -53,7 +55,7 @@
                        </el-form-item>
                        <div class="flex a-center">
                            <el-button type="default" class="reset" @click="reset">重置</el-button>
                            <el-button type="primary" class="search">搜索</el-button>
                            <el-button type="primary" class="search" @click="search">搜索</el-button>
                        </div>
                    </div>
                </el-form>
@@ -61,50 +63,72 @@
        </div>
        <div class="table-box">
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column prop="date" label="订单编号" align="center">
                <el-table-column prop="orderld" label="订单编号" align="center">
                </el-table-column>
                <el-table-column prop="name" label="集装箱号" align="center">
                <el-table-column prop="container" label="集装箱号" align="center">
                </el-table-column>
                <el-table-column prop="address" label="提单号" align="center">
                <el-table-column prop="bol" label="提单号" align="center">
                </el-table-column>
                <el-table-column prop="address" label="收件人邮箱" align="center">
                <el-table-column prop="post" label="收件人邮箱" align="center">
                </el-table-column>
                <el-table-column prop="address" label="收件人地址" align="center">
                </el-table-column>
                <el-table-column prop="address" label="预计到达时间" align="center">
                <el-table-column prop="estimatedArrival" label="预计到达时间" align="center">
                </el-table-column>
                <el-table-column prop="address" label="预计送柜日期" align="center">
                <el-table-column prop="deliverySchedule" label="预计送柜日期" align="center">
                </el-table-column>
                <el-table-column prop="address" label="实际送货日期" align="center">
                <el-table-column prop="realSchedule" label="实际送货日期" align="center">
                </el-table-column>
                <el-table-column prop="address" label="DO文件是否上传" align="center">
                <el-table-column prop="DO" label="DO文件是否上传" align="center">
                </el-table-column>
                <el-table-column prop="address" label="订单状态" align="center">
                <el-table-column prop="status" label="订单状态" align="center">
                </el-table-column>
                <el-table-column prop="address" label="操作" align="center">
                <el-table-column prop="option" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleClick(scope.row)">查看</el-button>
                        <el-button type="text" @click="handleClick(scope.row)">编辑</el-button>
                        <el-button type="text" @click="handleClick(scope.row)">删除</el-button>
                        <el-button type="text" class="table-btn" @click="handleClick(scope.row)">查看详情</el-button><span
                            class="line-set">|</span>
                        <el-button type="text" class="table-btn" @click="handleClick(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- <div class="text-right pagination-card">
                <el-pagination background :page-size="pagination.pageSize" layout="slot,prev,pager,next"
                    :current-page="pagination.pageNum" @current-change="handleCurrentChange"
                    @size-change="handleSizeChange" :total="pagination.total">
                    <span class="total-num">共{{ pagination.total }}条记录</span>
                </el-pagination>
            </div> -->
        </div>
    </div>
</template>

<script>
import UserInfo from '@/component/userInfo.vue'
import Header from '@/component/Header.vue'
import NoticeComponent from '@/component/Notice.vue'
import AddedInformation from '@/component/AddedInformation.vue'
import { getList } from './home'
export default {
    name: "Home",
    components: {
        Header
        UserInfo,
        Header,
        NoticeComponent,
        AddedInformation
    },
    data() {
        return {
            noticeShow: false,
            showUserInfo: false,
            searchForm: {

                orderId: '',
                container: '',
                bol: '',
                post: '',
                address: '',
                DO: '',
                status: '',
            },
            options: [
                {
@@ -148,6 +172,7 @@
                    label: '已取消'
                }
            ],
            tableData: [],
            option1: [
                {
                    id: 1,
@@ -158,11 +183,36 @@
                    label: '否'
                }
            ],
            // pagination: {
            //     total: 999,
            //     pageNum: 1,
            //     pageSize: 10,
            // },
        };
    },
    created() {
        this.getLists()
    },
    methods: {
        getLists() {
            getList({ ...this.searchForm }).then(res => {
                this.tableData = res.data
            })
        },
        search(){
            this.getLists()
        },
        reset() {
            this.searchForm = {}
            this.searchForm = {
                orderId: '',
                container: '',
                bol: '',
                post: '',
                address: '',
                DO: '',
                status: '',
            }
            this.getLists()
        }
    }
};
@@ -279,5 +329,108 @@
    margin-right: 35px;
    width: calc(100% - 70px);
    border-radius: 6px;
    background-color: #fff;
    padding-bottom: 24px;

    ::v-deep {
        .el-table__header {
            .el-table__cell {
                background-color: rgba(246, 246, 247, 1) !important;

                .cell {
                    font-family: SourceHanSansCN, SourceHanSansCN;
                    font-weight: 500;
                    font-size: 16px;
                    color: #3B3F56;
                }
            }
        }
    }

    ::v-deep {
        .el-table__cell {
            height: 50px;
        }
    }

    ::v-deep .el-table__row {
        .el-table__cell {
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 400;
            font-size: 16px;
            color: #3B3F56 !important;
        }
    }

    .table-btn {
        font-family: SourceHanSansCN, SourceHanSansCN;
        font-weight: 400;
        font-size: 16px;
        color: #014099;
    }

    .line-set {
        font-size: 14px;
        color: #014099;
        margin: 0 5px;
    }

    .total-num {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #989BB0;
        margin-right: 12px;
    }
}

::v-deep .el-pager {
    .number {
        min-width: 30px;
        height: 30px;
        background: #FFFFFF !important;
        border-radius: 4px !important;
        border: 1px solid #DBDBE7 !important;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #989BB0;
    }

    .active {
        min-width: 30px;
        height: 30px;
        background: #014099 !important;
        border-radius: 4px !important;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #FFFFFF;
    }


}

.pagination-card {
    margin-top: 49px;
    margin-right: 14px;
}

::v-deep .btn-prev {
    margin-left: 0;
    margin-right: 5px;

    .el-icon-arrow-left:before {
        content: "\E792";
    }
}

::v-deep .btn-next {
    margin-left: 5px;
    margin-right: 0;

    .el-icon-arrow-right:before {
        content: "\E791";
    }
}
</style>