<template> <div class="container"> <el-form :model="queryParams"> <el-form-item label="事业公司:"> <el-select v-model="queryParams.company" placeholder="请选择事业公司" style="width: 20vw" > <el-option v-for="item in companyList" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select> </el-form-item> <el-form-item label="供应商:"> <div class="supplier_container"> <div class="left_supplier"> <el-input v-model="queryParams.supplierName"></el-input> <i class="el-icon-edit"></i> </div> <div class="right_supplier"> <i class="el-icon-search"></i> </div> </div> </el-form-item> <el-form-item label="主单号:"> <el-input v-model="queryParams.dhNumber" style="width: 20vw"></el-input> </el-form-item> <el-form-item label="收货单位:"> <el-select v-model="queryParams.shUnit" placeholder="请选择收货单位" style="width: 20vw" > <el-option v-for="item in shLocalList" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select> </el-form-item> <el-form-item label="单类:"> <el-select v-model="queryParams.dlType" placeholder="请选择单类" style="width: 20vw" > <el-option v-for="item in danList" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select> </el-form-item> <el-form-item label="主单状态:"> <el-select v-model="queryParams.zdStatus" placeholder="请选择状态" style="width: 20vw" > <el-option v-for="item in zhuStatusList" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select> <span class="right_tip"> * 如需查询历史单据,请修改“订货日”日期 <!-- *如需下载EXCEL,请点击[单号] 进入主单查询,再点击[报表] --> </span> </el-form-item> <el-form-item label="订货日:"> <el-date-picker v-model="queryParams.orderDate" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 20vw" value-format="yyyy-MM-dd" ></el-date-picker> </el-form-item> <el-form-item label="交货预定日:"> <el-date-picker v-model="queryParams.deliveryDate" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 20vw" value-format="yyyy-MM-dd" ></el-date-picker> <span class="right_tip"> *如需下载EXCEL,请点击[单号] 进入主单查询,再点击[报表] </span> </el-form-item> </el-form> <div class="tip_content"> <span class="left_tip">{{ getNowDate() }}订单已经可以正常下载</span> </div> <div class="btn_container"> <el-pagination :current-page="queryParams.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="queryParams.pageSize" layout="sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" ></el-pagination> <el-button type="primary" style="background: #0187fb; border: none" @click="handleSearch" > 查询 </el-button> </div> <el-table v-loading="loading" :data="tableDate" border :header-cell-style="headerStyle" :cell-style="rowStyle" height="42vh" > <el-table-column type="index" label="序号" width="80"></el-table-column> <el-table-column prop="dhTime" label="订货日"></el-table-column> <el-table-column prop="jhTime" label="交货预定日"></el-table-column> <el-table-column prop="zdStatus" label="主单状态"></el-table-column> <el-table-column prop="fdStatus" label="分单状态" align="center"> <template slot-scope="scope"> <div v-if="scope.row.fdStatus">{{ scope.row.fdStatus }}</div> <div v-else>-</div> </template> </el-table-column> <el-table-column prop="dlType" label="单类"></el-table-column> <el-table-column prop="dhNumber" label="单号"> <template slot-scope="scope"> <el-button type="text" style="color: #0187fb; border: none" @click="handleDetail(scope.row)" > {{ scope.row.dhNumber }} </el-button> </template> </el-table-column> <el-table-column prop="closeNumber" label="结算厂编"></el-table-column> <el-table-column prop="supplierName" label="供应商"></el-table-column> <el-table-column prop="shUnit" label="收货单位"></el-table-column> <el-table-column prop="ckName" label="仓库名称"></el-table-column> <el-table-column prop="ckAddress" label="仓库地址"></el-table-column> <el-table-column prop="jinMoney" label="进价金额"></el-table-column> <el-table-column prop="fd" label="分单" align="center"> <template slot-scope="scope"> <div v-if="scope.row.fd">{{ scope.row.fd }}</div> <div v-else>-</div> </template> </el-table-column> <el-table-column label="操作"> <el-button type="text">主单下载</el-button> </el-table-column> </el-table> <!-- <button @click="handleDetail">行</button> --> </div> </template> <script> import { orderList } from '../../../api/purchase' export default { name: 'GetOrder', data() { return { queryParams: { pageNum: 1, pageSize: 10, dhTimeStart: '', //订货日开始时间 dhTimeEnd: '', //订货日结束时间 supplierName: '', //供应商 dhNumber: '', // 主单号 shUnit: '', //收货单位 dlType: '', // 单类 zdStatus: '', //主单状态 jhTimeStart: '', //交货预定日开始时间 jhTimeEnd: '', //交货预定日结束时间 orderDate: [], //订货 deliveryDate: [], //交货 company: '上海', }, tableDate: [], currentPage: 1, pageSize: 10, total: 0, companyList: [ { value: '上海', label: '上海', }, ], shLocalList: [ { value: '上海虹梅常温', label: '上海虹梅常温', }, { value: '上海虹梅冷藏', label: '上海虹梅冷藏', }, { value: '上海虹梅冷冻', label: '上海虹梅冷冻', }, { value: '杭州常温物流', label: '杭州常温物流', }, { value: '金山冷藏物流', label: '金山冷藏物流', }, { value: '金山冷冻物流', label: '金山冷冻物流', }, { value: '江阴常温', label: '江阴常温', }, { value: '江阴冷藏', label: '江阴冷藏', }, { value: '江阴冷冻', label: '江阴冷冻', }, { value: '上海青浦常温', label: '上海青浦常温', }, { value: '上海青浦冷藏', label: '上海青浦冷藏', }, { value: '上海青浦冷冻', label: '上海青浦冷冻', }, { value: '南京常温', label: '南京常温', }, { value: '南京冷藏', label: '南京冷藏', }, { value: '南京冷冻', label: '南京冷冻', }, { value: '上海常温中央仓(红梅)', label: '上海常温中央仓(红梅)', }, { value: '直送常温', label: '直送常温', }, { value: '直送冷冻', label: '直送冷冻', }, { value: '直送冷藏', label: '直送冷藏', }, { value: '上海直送香烟', label: '900004 上海直送香烟', }, { value: '江苏直送香烟', label: '江苏直送香烟', }, { value: '浙江直送香烟', label: '浙江直送香烟', }, { value: '浙江香烟-吉森', label: '浙江香烟-吉森', }, { value: '浙江香烟-和华', label: '浙江香烟-和华', }, { value: '上海代售香烟', label: '上海代售香烟', }, ], zhuStatusList: [ { value: '未下载', label: '未下载', }, { value: '已下载', label: '已下载', }, ], danList: [ { value: '物流进货单', label: '物流进货单', }, { value: '物流紧急进货单', label: '物流紧急进货单', }, { value: '物流退货单', label: '物流退货单', }, { value: '供应商欠货单', label: '供应商欠货单', }, ], loading: false, } }, mounted() { this.getNowDate() }, methods: { //获取列表 getOrderList() { this.loading = true orderList(this.queryParams) .then((res) => { console.log(res.data, '段时间客户端') this.tableDate = res.data.list this.total = res.data.totalRecord }) .finally(() => { this.loading = false }) }, handleSizeChange(val) { this.queryParams.pageSize = val this.getOrderList() }, handleCurrentChange(val) { this.queryParams.pageNum = val this.getOrderList() }, headerStyle() { return 'text-align:center;' }, rowStyle() { // return 'text-align:center;' }, handleDetail(info) { console.log(info.dhNumber, '段时间看看') this.$router.push({ path: 'orderDetail', query: info, }) }, handleSearch() { this.getOrderList() }, getNowDate() { const timeOne = new Date() const year = timeOne.getFullYear() let month = timeOne.getMonth() + 1 let day = timeOne.getDate() month = month < 10 ? '0' + month : month day = day < 10 ? '0' + day : day const NOW_MONTHS_AGO = `${year}年${month}月${day}日` return NOW_MONTHS_AGO }, }, } </script> <style lang="scss" scoped> .right_tip { // font-size: calc(100vh * 30 / 1920); font-size: 1rem; color: #e60000; } .container::v-deep { padding: 1.5vh 1vw; box-sizing: border-box; .el-form { width: 89%; display: flex; flex-wrap: wrap; .el-form-item { // width: 40%; display: flex; align-items: center; height: 4vh; .el-form-item__label { // font-size: calc(100vh * 28 / 1920); font-size: 0.9rem; font-weight: bold; width: 5.5vw; } .el-input__inner { // font-size: calc(100vh * 26 / 1920); font-size: 0.8rem; height: 3.5vh; } .supplier_container { display: flex; align-items: center; width: 25vw; height: 3.5vh; border: 1px solid #dcdfe6; border-radius: 4px; .left_supplier { width: 89%; display: flex; align-items: center; justify-content: space-between; .el-input__inner { border: none; } i { font-size: calc(100vh * 32 / 1920); margin-right: 0.8vw; } } .right_supplier { border-left: 1px solid #dcdfe6; width: 11%; height: 100%; background: #f1f1f1; display: flex; justify-content: center; align-items: center; i { font-size: calc(100vh * 32 / 1920); } } } } } .tip_content { width: 81%; display: flex; justify-content: space-between; .left_tip { font-size: calc(100vh * 45 / 1920); } } .btn_container { display: flex; align-items: center; .el-pagination { text-align: left; margin-bottom: 1.5vh; width: 75%; } .el-button { width: 4vw; height: 3vh; line-height: 3vh; padding: 0; } } } ::v-deep .el-table th .cell { // font-size: calc(100vh * 28 / 1920); font-size: 0.9rem; } ::v-deep .el-table td .cell { // font-size: calc(100vh * 24 / 1920); font-size: 0.8rem; } ::v-deep .el-date-editor .el-range-input { // font-size: calc(100vh * 24 / 1920); font-size: 0.8rem; } </style>