oil-station/fuintCashierWeb/src/views/cashier/orderComponents/order_Goods.vue
DESKTOP-369JRHT\12997 b5ee5634d7 9.27
2024-09-27 09:23:47 +08:00

943 lines
28 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!--商品交易列表-->
<template>
<div>
<div class="top_new">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
<el-form-item label="" prop="staffId">
<el-select
v-model="queryParams.staffId"
clearable
placeholder="请选择关联员工"
>
<el-option v-for="item in staffList" :key="item.id" :label="item.realName" :value="item.id">
<span style="float: left">{{ item.realName }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.mobile }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="" prop="orderNo">
<el-input
v-model="queryParams.orderNo"
placeholder="请输入订单号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="" prop="payType">
<el-select
v-model="queryParams.payType"
placeholder="请选择订单类型"
clearable
style="width: 240px"
>
<el-option
v-for="item in payList"
:key="item.id"
:label="item.dictLabel"
:value="item.dictValue"
/>
</el-select>
</el-form-item>
<el-form-item label="" prop="payUser">
<el-input
v-model="queryParams.payUser"
placeholder="请输入付款用户"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="">
<el-date-picker
v-model="beginTime"
style="width: 160px"
type="date"
placeholder="交易开始日期">
</el-date-picker>
<el-date-picker
v-model="endTime"
style="width: 160px"
type="date"
placeholder="交易结束日期">
</el-date-picker>
</el-form-item>
<el-form-item >
<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
<el-button type="primary" @click="exportExcelGoodsOrder()">导出</el-button>
</el-form-item>
</el-form>
</div>
<div class="cot-box">
<div>
<div class="box-gang">
<div class="box2">
<div style="font-size: 26px;color: #0DC291;font-weight: bold;margin-top: 5px">
{{ orderStatistics.theTotalAmount || 0 }}/
{{ orderStatistics.numberOfProducts || 0 }}
</div>
<div class="size-hui">
<div style="width: 8px;height: 8px;border-radius: 4px;background: #0DC291"></div>
<div style="font-weight: bold;font-size: 13px;margin-left: 5px">商品订单总金额(元)/笔数</div>
</div>
</div>
<div class="box2">
<div style="font-size: 26px;color: #00CAFF;font-weight: bold;margin-top: 5px">
{{ orderStatistics.theTotalAmount || 0 }}
</div>
<div class="size-hui">
<div style="width: 8px;height: 8px;border-radius: 4px;background: #00CAFF"></div>
<div style="font-weight: bold;font-size: 13px;margin-left: 5px">实付总金额(元)</div>
</div>
</div>
<div class="box2">
<div style="font-size: 26px;color: #F44522;font-weight: bold;margin-top: 5px">
{{ orderStatistics.discountAmount || 0 }}
</div>
<div class="size-hui">
<div style="width: 8px;height: 8px;border-radius: 4px;background: #F44522"></div>
<div style="font-weight: bold;font-size: 13px;margin-left: 5px">优惠总金额(元)</div>
</div>
</div>
<div class="box2">
<div style="font-size: 26px;color: #FA6400;font-weight: bold;margin-top: 5px">
{{ orderStatistics.wechat || 0 }}/
{{ orderStatistics.alipay || 0 }}
</div>
<div class="size-hui">
<div style="width: 8px;height: 8px;border-radius: 4px;background: #FA6400"></div>
<div style="font-weight: bold;font-size: 13px;margin-left: 5px">微信/支付宝(元)</div>
</div>
</div>
<div class="box2">
<div style="font-size: 26px;color: #2B63F4;font-weight: bold;margin-top: 5px">
{{ orderStatistics.wechat || 0 }}/
{{ orderStatistics.alipay || 0 }}
</div>
<div class="size-hui">
<div style="width: 8px;height: 8px;border-radius: 4px;background: #2B63F4"></div>
<div style="font-weight: bold;font-size: 13px;margin-left: 5px">云闪付/pos刷卡</div>
</div>
</div>
<div class="box2">
<div style="font-size: 26px;color: #F7B500;font-weight: bold;margin-top: 5px">
{{ orderStatistics.cash || 0 }}
</div>
<div class="size-hui">
<div style="width: 8px;height: 8px;border-radius: 4px;background: #F7B500"></div>
<div style="font-weight: bold;font-size: 13px;margin-left: 5px">现金(元)</div>
</div>
</div>
</div>
</div>
<div>
<div class="table-box">
<el-table
:data="list"
style="width: 100%">
<el-table-column type="index" width="50" align="center" label="序号"/>
<el-table-column label="订单号" align="center" prop="orderNo" width="220"/>
<el-table-column label="订单类型" align="center" prop="terminal"/>
<el-table-column label="商品数量" align="center" prop="goodsNum">
<template slot-scope="scope">
<el-tag @click="getGoods(scope.row.id)">{{ scope.row.goodsNum }}</el-tag>
</template>
</el-table-column>
<el-table-column label="订单金额(元)" align="center" prop="amount"/>
<el-table-column label="优惠金额(元)" align="center" prop="discount"/>
<el-table-column label="实付金额(元)" align="center" prop="payAmount"/>
<el-table-column label="付款用户" align="center" prop="payUser"/>
<el-table-column label="支付方式" align="center" prop="payType">
<template slot-scope="scope">
<span v-if="scope.row.payType=='credit'">挂账</span>
<span v-else-if="scope.row.payType == 'CASH'">现金</span>
<span v-else-if="scope.row.payType == 'WECHAT'">微信</span>
<span v-else-if="scope.row.payType == 'ALIPAY'">支付宝</span>
<span v-else-if="scope.row.payType == 'UNIONPAY'">银联二维码</span>
<span v-else-if="scope.row.payType == '0'">兑换券核销</span>
</template>
</el-table-column>
<el-table-column label="订单状态" align="center" prop="payType">
<template slot-scope="scope">
<el-tag v-if="scope.row.status == 'unpaid'">未支付</el-tag>
<el-tag type="success" v-else-if="scope.row.status == 'paid'">已支付</el-tag>
<el-tag type="danger" v-else-if="scope.row.status === 'refund'">已退款</el-tag>
<el-tag type="danger" v-else>支付失败</el-tag>
</template>
</el-table-column>
<!-- <el-table-column label="订单类型" align="center" prop="type"/>-->
<el-table-column label="关联员工" align="center" prop="staffId">
<template slot-scope="scope">
<span>{{ getRealName(staffList, scope.row.staffId) }}</span>
</template>
</el-table-column>
<el-table-column label="操作人" align="center" width="150" prop="payTime">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.payTime) }}</span>
</template>
</el-table-column>
<el-table-column label="订单完成时间" align="center" width="150" prop="payTime">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.payTime) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button style="color: #fe8c4a" @click="patchwork(scope.row)"
type="text" >补打
</el-button>
<el-button style="color: #fe8c4a"
v-if="scope.row.status === 'paid'"
@click="refHandleRefund(scope.row.id)"
type="text">退款
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination-box">
<el-pagination
background
layout="prev, pager, next"
v-show="total>0"
:total="total"
:page.sync="queryParams.page"
:limit.sync="queryParams.pageSize"
@current-change="getList">
</el-pagination>
</div>
<!-- 订单退款-->
<el-dialog
:close-on-click-modal="false"
title="订单退款"
width="25%"
:visible.sync="refDialogRefund">
<div style="margin: 10px 0">
退款密码<br/>
</div>
<div>
<el-input placeholder="请输入退款密码" v-model="refPass" show-password></el-input>
<br/>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="refDialogRefund = false">取 消</el-button>
<el-button type="primary" @click="refHandleRefundByif()">确 定</el-button>
</span>
</el-dialog>
<!-- 订单退款-->
<el-dialog
:close-on-click-modal="false"
title="订单退款"
width="25%"
:visible.sync="dialogRefund">
<div style="text-align: center;font-weight: bold">
¥<span style="font-size: 35px">{{ goods.payAmount }}</span>
</div>
<div class="tk">退款金额</div>
<div class="tk">退款单号:{{ goods.orderNo }}</div>
<el-input placeholder="请输入退款金额" v-model="refundRemark"></el-input>
<br>
<div>使用的优惠项</div>
<el-checkbox>备选项</el-checkbox>
<el-checkbox>备选项</el-checkbox>
<div style="margin: 10px 0">
退款原因<br/>
<el-radio-group v-model="radio1" style="margin: 10px 0">
<el-radio-button label="油号选错"></el-radio-button>
<el-radio-button label="金额错误"></el-radio-button>
<el-radio-button label="其他原因"></el-radio-button>
</el-radio-group>
</div>
<div>
<el-input placeholder="请输入退款原因" v-model="refundRemark"></el-input>
<br/>
<span
style="color: grey;font-size: 12px">退款仅支持全额退款,退款金额将按照支付信息原路退回、优惠券、电子储值卡等原路退回处理</span>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogRefund = false">取 消</el-button>
<el-button type="primary" @click="refundConfirmed()">确 定</el-button>
</span>
</el-dialog>
<!-- 商品购买详情 -->
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
<el-table ref="tables" v-loading="loading" :data="goodsList" :default-sort="defaultSort">
<el-table-column label="商品名称" align="center" prop="name"/>
<el-table-column label="商品数量" align="center" prop="num"/>
<el-table-column label="商品单价" align="center" prop="retailPrice"/>
<el-table-column label="会员价" align="center" prop="memberPrice"/>
</el-table>
<div style="height: 20px"></div>
</el-dialog>
</div>
</div>
<!-- 支付成功后小票打印内容-->
<div id="reportSuccess" ref="report" class="box-center" v-show="false">
<div class="box-title">订单统计</div>
<div class="box-ge">
<div v-for="item in goodsList" :key="item.id">
<div class="input-box">
<div>商品名称</div>
<div>{{ item.name }}</div>
</div>
<div class="input-box">
<div>商品数量</div>
<div>{{ item.num }}{{ item.unit }}</div>
</div>
<div class="input-box" v-if="!goods.userId">
<div>商品单价</div>
<div>¥{{ item.retailPrice }}</div>
</div>
<div class="input-box" v-else>
<div>商品单价</div>
<div>¥{{ item.memberPrice }}</div>
</div>
</div>
<div class="input-box">
<div>支付方式</div>
<div v-if="goods.payType == 'CASH'">现金</div>
<div v-else-if="goods.payType == 'WECHAT'">微信</div>
<div v-else-if="goods.payType == 'ALIPAY'">支付宝</div>
<div v-else-if="goods.payType == 'UNIONPAY'">银联二维码</div>
</div>
<div class="input-box">
<div>合计</div>
<div>¥{{ goods.amount }}</div>
</div>
<div class="input-box" v-if="goods.discount>0">
<div>优惠合计</div>
<div>¥{{ goods.discount }}</div>
</div>
<div class="input-box">
<div>实付款</div>
<div>{{ goods.payAmount }}</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {getGoodsOrder, getOrderGoods, listOrder, orderStatisticsApi} from "@/api/cashier/goodsorder";
import {queryStaffs} from "@/api/cashier/staff";
import {getDicts} from "@/api/dict/data";
import {exportExcelGoodsOrderApi} from "@/api/order/exportExcel";
import {cashierOrder} from "@/api/cashier/cashierorder";
import {refundApi, getOrderInfoApi} from "@/api/cashier/refund";
import {connectFlag, getLodop} from "@/api/LodopFuncs";
import {rePrintOilOrderReport} from "@/api/print";
import {ifRefPassApi} from "@/api/staff/store";
export default {
name: "order_Goods",
data() {
return {
// 终端列表
terminalList: [],
// 员工列表
staffList: [],
// 日期范围
dateRange: [],
beginTime: "",
endTime: "",
// 遮罩层
loading: false,
loadingRes: true,
// 标题
title: "",
// 选中数组
ids: [],
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 表格数据
list: [],
goodsList: [],
// 是否显示弹出层
open: false,
// 默认排序
defaultSort: {prop: 'createTime', order: 'descending'},
// 查询参数
queryParams: {
page: 1,
pageSize: 10,
},
orderGoods: '',
// 支付列表
payList: [],
dialogRefund: false,
refDialogRefund: false,
radio1: "油号选错",
goods: {},
refundRemark: "",
orderStatistics: {
numberOfProducts: '0',
theTotalAmount: '0',
theTotalNumberOfUnits: '0',
discountAmount: '0',
wechat: '0',
alipay: '0',
cash: '0',
},
// 是否为当天时间
isSysDate: false,
refPass: "",
getId: "",
}
},
created() {
let start = new Date();
start.setHours(0)
start.setMinutes(0)
start.setSeconds(0)
start.setMilliseconds(0)
this.dateRange = [start, new Date()];
this.beginTime = start
this.endTime = new Date()
this.isSysDate = true
this.getList();
this.getOrderStatistics();
this.getStaffList();
this.getPayList();
},
methods: {
exportExcelGoodsOrder() {
let dateRange = []
if (this.beginTime && this.endTime) {
dateRange.push(this.beginTime.toLocaleDateString())
dateRange.push(this.endTime.toLocaleDateString())
}
exportExcelGoodsOrderApi(this.addDateRange(this.queryParams, dateRange)).then(res => {
const blob = new Blob([res], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
this.$download.saveAs(blob, '商品订单统计.xLsx')
})
},
// 订单统计
getOrderStatistics() {
let dateRange = []
if (this.beginTime && this.endTime) {
dateRange.push(this.beginTime.toLocaleDateString())
dateRange.push(this.endTime.toLocaleDateString())
}
orderStatisticsApi(this.addDateRange(this.queryParams, dateRange)).then(res => {
this.orderStatistics = res.data;
})
},
async printLocally() {
if (!connectFlag) {
return
}
//初始化打印函数
let LODOP = getLodop(); // 初始化打印
LODOP.PRINT_INIT();
var bodyStyle = `<style>
.input-box{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
margin: 5px 0px;
}
.box-ge{
border-bottom: 1px solid #000000 ;
box-sizing: border-box;
padding: 10px;
}
.box-title{
font-size: 18px;
text-align: center;
align-items: center;
margin-top: 15px;
}
.input-hui{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
margin: 15px 0px;
background: #b2b2b2;
box-sizing: border-box;
padding: 5px 0px;
}
.input-hui-frou{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
margin: 15px 0px;
background: #b2b2b2;
box-sizing: border-box;
padding: 5px 0px;
div{
width: 25%;
text-align: left;
}
}
.input-box-frou{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
margin: 5px 0px;
div{
width: 25%;
text-align: left;
}
}
.box-center{
height: 500px;
}
</style>
`
var fromHtml = bodyStyle + this.$refs.report.innerHTML
LODOP.ADD_PRINT_HTM(0, 0, "100%", "100%", fromHtml);
LODOP.SET_PRINT_MODE("FULL_WIDTH_FOR_OVERFLOW", true);
// LODOP.ADD_PRINT_BARCODE(10,40,100,100,'QRCode','123456789');
// let preview = LODOP.PREVIEW();
// console.log("preview",preview);
LODOP.PRINT();
},
// 打印商品支付后的订单
oilOrderReport() {
let oilOrderR = []
let goodsOrderR = []
if (this.goodsList) {
this.goodsList.forEach(order => {
let o = {
oilName: order.name,
unit: order.num + "" + order.unit,
// amount : order.memberPrice.toString()
amount: order.retailPrice.toString()
}
goodsOrderR.push(o)
})
}
// 支付方式
const payTypeMap = {
'CASH': '现金',
'WECHAT': '微信',
'ALIPAY': '支付宝',
'UNIONPAY': '银联二维码',
'credit': '挂账',
'oilCard': '囤油卡',
'balance': '电子储值卡',
'0': '兑换卷核销'
};
let payTypeText = payTypeMap[this.goods.payType] || '小程序码';
let f = {
oilOrder: oilOrderR,
goodsOrder: goodsOrderR,
payType: payTypeText,
amount: this.goods.amount,
discount: this.goods.discount,
// seekZero:""
}
rePrintOilOrderReport(f).then(res => {
})
},
// 补打
patchwork(data) {
const orderNo = data.orderNo
this.$modal.confirm('确定您要补打当前订单吗?当前订单号[' + orderNo + '],请确保云打印机正在运行中').then(function () {
// return delUser(row.id);
}).then(async () => {
await getGoodsOrder({"id": data.id}).then(response => {
this.goods = response.data
})
await getOrderGoods({orderId: data.id}).then(response => {
this.goodsList = response.data
this.$modal.msgSuccess("打印指令已发送打印机,请查看打印结果");
})
// this.printLocally()
this.oilOrderReport()
}).catch(() => {
});
},
async refHandleRefundByif(id) {
this.refDialogRefund = true;
await ifRefPassApi({refPass: this.refPass}).then(res => {
if (res.data) {
this.handleRefund(this.getId)
this.refDialogRefund = false;
} else {
this.$message({
type: 'info',
message: '密码错误'
});
}
})
},
async refHandleRefund(id) {
this.getId = id,
this.refPass = ""
this.refDialogRefund = true;
},
// 退款
async handleRefund(id) {
await getGoodsOrder({"id": id}).then(response => {
this.goods = response.data
if (response.data.status === "refund") {
this.$message({
type: 'info',
message: '该订单已经退款'
});
this.dialogRefund = false;
}
})
let title = '是否将该收银台下的订单全部退款'
await getOrderInfoApi({
orderNo: this.goods.orderNo,
type: 'goods'
}).then(res => {
if (res.code === 200) {
if (res.data.type === "1") {
title = '该订单下有其它商品订单,是否一并退款'
this.goods.payAmount = res.data.money
}
}
});
this.dialogRefund = true;
// this.$confirm(title+', 是否继续?', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
// this.dialogRefund = true;
// }).catch(() => {
// this.$message({
// type: 'info',
// message: '已取消退款'
// });
// this.dialogRefund = false;
// });
},
// 退款接口
async refundConfirmed() {
this.dialogRefund = false;
this.loadingRes = true;
console.log("cashierOrder", this.goods)
let map = {
orderNo: this.goods.orderNo,
storeId: this.goods.storeId,
refundRemark: this.radio1 + "-" + this.refundRemark,
// refAmount: this.
type: "canRefund",
refType: "goodsRef"
}
await refundApi(map).then(res => {
if (res.code === 200) {
this.$message({
type: 'info',
message: '退款成功'
});
}
})
this.loadingRes = false;
this.created()
},
// 根据员工id查询员工信息
queryStaf(list, id) {
let name = "";
list.forEach(item => {
if (item.id == id) {
name = `${item.realName}(${item.mobile})`
}
})
return name;
},
getVal(list, val) {
let name = "";
list.forEach(item => {
if (item.dictValue == val) {
name = item.dictLabel
}
})
return name;
},
// 获取付款类型列表
getPayList() {
getDicts("payment_type").then(response => {
this.payList = response.data;
})
getDicts("terminal").then(response => {
this.terminalList = response.data;
})
},
// 获取商品详情
getGoods(id) {
getOrderGoods({orderId: id}).then(response => {
this.goodsList = response.data
this.open = true;
this.title = "商品详情"
})
},
// 获取员工姓名
getRealName(list, id) {
var name = "";
list.forEach(item => {
if (item.id == id) {
name = item.realName;
}
})
return name;
},
// 获取员工列表
getStaffList() {
queryStaffs().then(response => {
this.staffList = response.data;
})
},
// 查询订单
getList(val) {
if (val != undefined) {
this.queryParams.page = val
}
let dateRange1 = this.dateRange
// let dateRange = []
// if (this.isSysDate){
// dateRange.push(dateRange1[0].toLocaleDateString())
// dateRange.push(dateRange1[1].toLocaleDateString())
// }else {
// dateRange = this.dateRange
// }
let dateRange = []
if (this.beginTime && this.endTime) {
dateRange.push(this.beginTime.toLocaleDateString())
dateRange.push(this.endTime.toLocaleDateString())
}
this.loadingRes = true;
listOrder(this.addDateRange(this.queryParams, dateRange)).then(response => {
this.list = response.data.records;
this.total = response.data.total;
this.loadingRes = false;
this.isSysDate = false
})
},
// 搜索按钮操作
handleQuery() {
this.queryParams.page = 1;
this.getList();
this.getOrderStatistics();
},
// 重置按钮操作
resetQuery() {
this.dateRange = [];
this.queryParams.status = '';
this.queryParams.mobile = '';
this.queryParams.orderMode = '';
this.queryParams.orderSn = '';
this.queryParams.storeIds = '';
this.storeIds = [];
this.beginTime = ""
this.endTime = ""
this.resetForm("queryForm");
this.handleQuery();
},
}
}
</script>
<style scoped>
.app-top {
width: 100%;
height: 60px;
box-sizing: border-box;
padding: 10px;
}
.clearfix {
width: 100%;
}
.box-card {
width: 100%;
margin-bottom: 15px;
}
.box-gang {
width: 100%;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.box {
//box-sizing: border-box;
padding: 5px;
//background: #f9f9f9;
margin-right: 20px;
margin-bottom: 20px;
padding-left: 20px;
margin-bottom: 20px;
width: 211px;
height: 60px;
background: rgba(64, 158, 255, 0.05);
border-radius: 6px 6px 6px 6px;
border: 1px solid #fe8c4a;
}
.size-hui {
display: flex;
align-items: center;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 13px;
color: #888888;
text-align: left;
font-style: normal;
text-transform: none;
.nei {
width: 150px;
}
}
.size-bole {
height: 31px;
font-family: YouSheBiaoTiHei;
font-weight: 400;
font-size: 24px;
color: #555555;
text-align: left;
font-style: normal;
text-transform: none;
}
.icon-img {
width: 20px;
height: 20px;
margin-right: 5px;
img {
float: right;
width: 20px;
height: 20px;
}
}
.wgang {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.table-box {
width: 100%;
min-height: 80px;
}
.pagination-box {
width: 100%;
margin: 10px auto;
display: flex;
align-items: center;
justify-content: center;
}
.top-app-sou {
width: 20%;
}
.tk {
text-align: center;
color: grey;
margin: 10px 0;
}
.box1 {
padding: 5px;
margin-right: 20px;
margin-bottom: 20px;
padding-left: 20px;
width: 211px;
height: 60px;
background: rgba(255, 150, 85, 0.05);
border-radius: 6px 6px 6px 6px;
border: 1px solid #FF9655;
}
.box2 {
padding: 5px;
margin-right: 20px;
margin-bottom: 20px;
padding-left: 20px;
width: 211px;
height: 70px;
border-radius: 6px 6px 6px 6px;
border: 1px solid #FF9655;
}
.cot-box {
width: 98%;
border-radius: 8px;
background: #fff;
box-sizing: border-box;
padding: 20px;
margin: 0 auto;
}
.el-form--inline .el-form-item {
margin-right: 30px;
}
.top_new{
display: flex;
justify-content: space-between;
background: #fff;
width: 98%;
margin: 10px auto;
border-radius: 8px;
box-sizing: border-box;
padding: 15px
}
</style>