<template>
<el-container>
<el-main style="background-color: white">
<el-row>
<el-form :model="form" :rules="form" ref="ruleForm" label-width="2px" class="demo-ruleForm">
<el-row style="margin-top: -20px">
<el-col :span="24"><div class="grid-content content"><p>国际转运查询</p></div></el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="" >
<el-input placeholder="" v-model="form.transcarrier" style="width:220px">
<template slot="prepend">承运人</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="">
<el-input placeholder="" v-model="form.transflightno" style="width:220px">
<template slot="prepend">航班号</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="" >
<div class="ip">
航班日期
</div>
<el-date-picker type="date" placeholder="选择日期"
v-model="form.transflightdate" style="width: 140px;"
value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6" style="margin-top: -15px">
<el-form-item label="" prop="transawbano">
<el-input placeholder="" v-model="form.transawbano" style="width:220px">
<template slot="prepend">主单号</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6" style="margin-top: -15px">
<el-form-item label="" prop="transawbhno">
<el-input placeholder="" v-model="form.transawbhno" style="width:220px">
<template slot="prepend">分单号</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="4" style="margin-top: -15px">
<el-button type="primary" icon="el-icon-search" @click="submitForm()">查 询</el-button>
</el-col>
</el-row>
</el-form>
</el-row>
<el-row style="margin-top: -20px">
<el-col :span="24"><div class="grid-content content"><p>国际转运明细</p></div></el-col>
</el-row>
<!--列表部分-->
<el-row>
<template>
<el-table
class="table"
v-loading="tableloading"
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="border-radius: 10px 10px 0px 0px;line-height: 25px;min-height: 500px"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
row-key="uuid"
border
default-expand-all
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column
label="主单号"
width="185"
prop="transawbano"
>
</el-table-column>
<el-table-column
prop="transawbhno"
label="分单号"
width="70">
</el-table-column>
<el-table-column
prop="originflightno"
label="进港航班"
width="70">
</el-table-column>
<el-table-column
prop="transpiece"
label="运单件数"
width="70">
</el-table-column>
<el-table-column
prop="transweight"
label="运单重量"
width="80">
</el-table-column>
<el-table-column
prop="goodsname"
label="货物品名"
width="80">
</el-table-column>
<el-table-column
prop="transflightno"
label="转运航班"
width="140">
</el-table-column>
<el-table-column
prop="status"
label="状态"
width="100" :formatter="formatStatus">
</el-table-column>
<el-table-column
prop="ext5"
label="回执信息"
width="260">
<!-- <template slot-scope="scope">-->
<!-- <span v-if="scope.row.status=='01' || scope.row.status=='11'" style="color: #67C23A">-->
<!-- {{scope.row.ext5}}-->
<!-- </span>-->
<!-- <span v-else-if="scope.row.status=='02' || scope.row.status=='03'" style="color: #E6A23C">-->
<!-- {{scope.row.ext5}}-->
<!-- </span>-->
<!-- <span v-else-if="scope.row.status=='12' || scope.row.status=='13'" style="color: #F56C6C">-->
<!-- {{scope.row.ext5}}-->
<!-- </span>-->
<!-- <span v-else style="color: #909399;">-->
<!-- {{scope.row.ext5}}-->
<!-- </span>-->
<!-- </template>-->
</el-table-column>
<el-table-column
prop="operation"
label="操作"
width="285">
<template slot-scope="scope">
<el-row type="flex" justify="space-between">
<el-button
size="mini"
type="info"
@click="handleDetail(scope.$index, scope.row)">收发明细
</el-button>
<el-button
size="mini"
type="success"
@click="editForm(scope.$index, scope.row)">编辑运单
</el-button>
</el-row>
<el-row type="flex" justify="space-between">
<el-button
size="mini"
type="primary"
@click="handleSend(scope.$index, scope.row)"
:disabled="btSendStatusFormater(scope.row.status)">申请转运
</el-button>
<el-button
size="mini"
type="warning"
@click="UpdateStatus(scope.$index, scope.row)">更改状态
</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
:disabled="btDeleStatusFormater(scope.row.status)">删除运单
</el-button>
</el-row>
</template>
</el-table-column>
</el-table>
</template>
</el-row>
<!--分页区域-->
<el-row style="margin-bottom: 10px">
<el-pagination
:current-page="form.pageNum"
:page-sizes="[100, 505, 1000, 5000]"
:page-size="form.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</el-row>
<!--footer部分-->
<el-row style="margin-top: 10px">
<el-col :span="4" class="pub">
<div class="grid-content">
<el-button type="primary" size="mini" @click="addForm()">新增国际转运</el-button>
</div>
</el-col>
<el-col :span="2.5" class="pub">
<div class="grid-content"><span>主单数：{{sumNmmsCount}}</span></div>
</el-col>
<el-col :span="3.5" class="pub">
<div class="grid-content"><span>舱单总件数：{{sumNmmsPrice}}</span></div>
</el-col>
<el-col :span="7.5" class="pub">
<div class="grid-content"><span>舱单总重量：{{sumNmmsWeight}}</span></div>
</el-col>
</el-row>
<!--明细列表弹出框-->
<el-row>
<el-dialog title="回执明细列表" :visible.sync="dialogTableVisible" width="70%">
<el-table :data="gridData" style="border-radius: 10px 10px 0px 0px;line-height: 25px;min-height: 500px"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small">
<el-table-column property="busdate" label="时间" width="160"></el-table-column>
<el-table-column property="username" label="操作人" width="130"></el-table-column>
<el-table-column property="buspiece" label="发送件数" width="130"></el-table-column>
<el-table-column property="busweight" label="发送重量" width="130"></el-table-column>
<el-table-column property="cusrestext" label="回执内容"></el-table-column>
</el-table>
</el-dialog>
</el-row>
<!--编辑主单-->
<el-dialog :title="dialogMap[dialogStatus]" :visible.sync="outerVisible.addDialog" width="80%" style="margin-top: -40px" >
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-position="labelPosition" size="mini" style="padding-left: 10px">
<!--原始舱单信息部分-->
<el-row class="flightInfo">
<el-col :span="24">
<div class="grid-content content">原始舱单信息</div>
</el-col>
<el-row style="margin-top: 60px">
<!-- <el-col :span="6">-->
<!-- <el-form-item prop="awba">-->
<!-- <div v-if="dialogStatus === 'update'">-->
<!-- <el-input disabled="" v-model="ruleForm.awba" style="width: 200px">-->
<!-- <template slot="prepend">运单号</template>-->
<!-- </el-input>-->
<!-- </div>-->
<!-- <div v-else>-->
<!-- <el-input v-model="ruleForm.awba" style="width: 200px">-->
<!-- <template slot="prepend">运单号</template>-->
<!-- </el-input>-->
<!-- </div>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<el-col :span="6">
<el-form-item prop="origincarrier" >
<el-input v-model="ruleForm.origincarrier" style="width: 200px" placeholder="必填项" onkeyup="this.value=this.value.toUpperCase()">
<template slot="prepend">承运人</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="originflightno" >
<el-input v-model="ruleForm.originflightno" style="width: 200px" placeholder="必填项">
<template slot="prepend">航班号</template>
</el-input>
</el-form-item>
</el-col>
<!-- <el-col :span="6">-->
<!-- <el-form-item label="" >-->
<!-- <el-form-item prop="originflightdate">-->
<!-- <div class="ip">-->
<!-- 航班日期-->
<!-- </div>-->
<!-- <el-date-picker type="date" placeholder="选择日期"-->
<!-- v-model="ruleForm.originflightdate"-->
<!-- value-formatformat="yyyy-MM-dd"-->
<!-- style="width: 125px">-->
<!-- </el-date-picker>-->
<!-- </el-form-item>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<el-col :span="6">
<el-form-item label="" >
<el-form-item prop="originflightdate">
<div class="ip">
航班日期
</div>
<el-date-picker type="date" placeholder="选择日期"
v-model="ruleForm.originflightdate"
value-format="yyyy-MM-dd"
style="width: 125px">
</el-date-picker>
</el-form-item>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6" style="margin-top: -20px" >
<el-form-item prop="originawbano" >
<el-input v-model="ruleForm.originawbano" style="width: 200px" placeholder="必填项" >
<template slot="prepend">主单号</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12" style="margin-top: -20px">
<el-form-item prop="originstation">
<el-input v-model="ruleForm.originawbhno" style="width: 200px">
<template slot="prepend">分单号</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6" style="margin-top: -20px">
<el-button type="primary" icon="el-icon-search">查 询</el-button>
</el-col>
</el-row>
</el-row>
<!--预配舱单信息部分-->
<el-row class="flightInfo">
<el-col :span="24">
<div class="grid-content content">预配舱单信息</div>
</el-col>
<el-row style="margin-top: 60px">
<!-- <el-col :span="6">-->
<!-- <el-form-item prop="awba">-->
<!-- <div v-if="dialogStatus === 'update'">-->
<!-- <el-input disabled="" v-model="ruleForm.awba" style="width: 200px">-->
<!-- <template slot="prepend">运单号</template>-->
<!-- </el-input>-->
<!-- </div>-->
<!-- <div v-else>-->
<!-- <el-input v-model="ruleForm.awba" style="width: 200px">-->
<!-- <template slot="prepend">运单号</template>-->
<!-- </el-input>-->
<!-- </div>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<el-col :span="6">
<el-form-item prop="transcarrier" >
<el-input v-model="ruleForm.transcarrier" style="width: 200px" placeholder="必填项" onkeyup="this.value=this.value.toUpperCase()">
<template slot="prepend">承运人</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="transflightno" >
<el-input v-model="ruleForm.transflightno" style="width: 200px" placeholder="必填项">
<template slot="prepend">航班号</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" >
<el-form-item prop="transflightdate">
<div class="ip">
航班日期
</div>
<el-date-picker type="date" placeholder="选择日期"
v-model="ruleForm.transflightdate"
value-format="yyyy-MM-dd"
style="width: 125px">
</el-date-picker>
</el-form-item>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6" style="margin-top: -20px" >
<el-form-item prop="transawbano" >
<el-input v-model="ruleForm.transawbano" style="width: 200px" placeholder="必填项">
<template slot="prepend">主单号</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6" style="margin-top: -20px" >
<el-form-item prop="transawbhno">
<el-input v-model="ruleForm.transawbhno" style="width: 200px">
<template slot="prepend">分单号</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-row>
<!--运单信息部分-->
<el-row class="flightInfo">
<el-col :span="24">
<div class="grid-content content">提运单信息</div>
</el-col>
</el-row>
<el-row style="margin-bottom: 0px;">
<el-row class="product">
<el-col :span="6">
<el-form-item label="" prop="transpiece" >
<el-input v-model="ruleForm.transpiece" placeholder="必填项" style="width: 200px" oninput="value=value.replace(/[^\d]/g,'')">
<template slot="prepend">件 数</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" prop="transweight" >
<el-input v-model="ruleForm.transweight" placeholder="必填项" style="width: 200px" oninput="value=value.replace(/[^\d]/g,'')">
<template slot="prepend">重 量</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" prop="goodsname" >
<el-input v-model="ruleForm.goodsname" style="width: 210px" placeholder="必填项">
<template slot="prepend">货物描述</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" prop="customcode" >
<div class="ip">
海关关区
</div>
<el-select v-model="ruleForm.customcode"
filterable
allow-create
default-first-option
remote
:remote-method="remoteMethod2"
:loading="loading" placeholder="请选择" style="width: 115px">
<el-option
v-for="item in customcodes"
:key="item.customcode"
:label="item.customcode"
:value="item.customcode">
<span style="float: left">{{ item.customcode }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.customname }}</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row class="product">
<el-col :span="6">
<el-form-item label="" prop="awboriginstation" >
<el-input v-model="ruleForm.awboriginstation" style="width: 200px" placeholder="必填项" onkeyup="this.value=this.value.toUpperCase()">
<template slot="prepend">始发站</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" prop="awbdesstation" >
<el-input v-model="ruleForm.awbdesstation" placeholder="必填项" style="width: 200px" onkeyup="this.value=this.value.toUpperCase()">
<template slot="prepend">目的站</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" prop="goodspackage">
<div class="ip">
包装类型
</div>
<el-select v-model="ruleForm.goodspackage" placeholder="请选择" size="mini" style="width: 125px">
<el-option label="木箱" value="PK"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-button type="primary" icon="el-icon-check" @click="dialogStatus==='create'?outerVisible_add():outerVisible_edit()" size="small">保 存</el-button>
<el-button icon="el-icon-close" @click="outerVisible.addDialog = false" size="small">取 消</el-button>
</el-col>
</el-row>
</el-row>
</el-form>
</el-dialog>
</el-main>
</el-container>
</template>
<script>
import {
addMt8205,
selectMt8205,
sendCreateMt8205,
delMt8205,
ediMt8205,
} from "../../api/transport";
import {loginedUserInfo} from "../../api/user";
import {selectCustomcode, sendCreateMt1201} from "../../api/mt1201";
import {selectResponseList} from "../../api/InResponse";
export default {
name: "transfer",
data() {
return{
customcodes:[],
loading:false,
// 搜索条件
form: {
transcarrier:'',
transflightno:'',
transflightdate:'',
transawbano:'',
transawbhno:'',
pageNum: 1,
pageSize: 100,
},
sumNmmsCount:0,
sumNmmsPrice:0,
sumNmmsWeight:0,
total: 0,
// 搜索列表
tableData:[],
tableloading:false,
// 明细
dialogTableVisible:false,
gridData:[],
// 新增/编辑
dialogStatus:'create',
dialogMap:{
update: '编辑',
create: '添加'
},
outerVisible: {
// 添加对话框
addDialog: false,
// 编辑对话框
editDialog: false
},
labelPosition: 'left',
ruleForm: {
uuid1201:'',
uuid2201:'',
origincarrier: undefined,
originflightno: undefined,
originflightdate: undefined,
originawbano: undefined,
originawbhno: undefined,
transcarrier: undefined,
transflightno: undefined,
transflightdate: undefined,
transawbano: undefined,
transawbhno: undefined,
transpiece: undefined,
transweight: undefined,
goodsname: undefined,
goodspackage:'PK',
awbdesstation:undefined,
awboriginstation:undefined,
customcode:'',
status:'',
actime:'',
updatetime:'',
ext3:'',
ext4:'',
ext5:'',
},
rules: {
origincarrier: [
{ required: true, message: '请输入承运人代码', trigger: 'blur' },
],
originflightno: [
{ required: true, message: '请输入航班号', trigger: 'blur' },
],
originawbano: [
{ required: true, message: '请输入主单号', trigger: 'blur' },
],
originflightdate: [
{ required: true, message: '请输入航班日期', trigger: 'blur' },
],
transawbano: [
{ required: true, message: '请输入主单号', trigger: 'blur' },
],
transcarrier: [
{ required: true, message: '请输入承运人代码', trigger: 'blur' },
],
transflightno: [
{ required: true, message: '请输入航班号', trigger: 'blur' },
],
transpiece: [
{ required: true, message: '请输入件数', trigger: 'blur' },
],
transweight: [
{ required: true, message: '请输入重量', trigger: 'blur' },
],
goodsname: [
{ required: true, message: '请输入货物描述', trigger: 'blur' },
],
customcode: [
{ required: true, message: '请输入关区', trigger: 'blur' },
],
awboriginstation: [
{ required: true, message: '请输入起始站', trigger: 'blur' },
],
transflightdate: [
{ required: true, message: '请选择日期', trigger: 'blur' },
],
awbdesstation: [
{ required: true, message: '请输入目的站', trigger: 'blur' },
],
}
}
},
methods:{
//获取关区代码
remoteMethod2:function(query){
this.customcodes=[];
let params={customcode:query};
this.loading = true;
selectCustomcode(params).then(res =>{
if (res !== '') {
setTimeout(() => {
this.loading = false;
this.customcodes=res.data.data;
}, 200);
} else {
this.customcodes = [];
}
});
},
//首页表单分页
handleSizeChange(val) {
this.form.pageSize = val
this.submitForm()
},
handleCurrentChange(val) {
this.form.pageNum = val
this.submitForm()
},
//回执收发明细
handleDetail(index,row){
// if(row.flightno.length>4){
// row.flightno=row.flightno.substring(2);
// }
let params={awbano:row.transawbano,awbhno:row.transawbhno,carrier:row.transcarrier,flightno:row.transflightno,flightdate:row.transflightdate,bustype:'MT8205'}
selectResponseList(params).then(res=>{
this.dialogTableVisible=true;
let response=res.data.data;
this.gridData=response;
});
},
// 获取消息标签列表
submitForm() {
const _this = this
selectMt8205(this.form).then((response) => {
const res = response.data
console.log(res)
// console.log(response.data)
if (res.code !== '200') {
return _this.$message.error('获取消息收发记录，失败！')
}
// 获取列表数据
_this.tableData = res.data.list
// 获取列表的总记录数
_this.total = res.data.total
_this.$message.success('获取消息收发记录，成功！')
}).catch(error => {
// 关闭加载
_this.$message.error(error.toString())
})
},
//新增编辑弹框关闭重置
// configure_addDialogClosed() {
// // 重置对话框
// this.$refs.ruleForm.resetFields()
// },
// 打开新增
addForm() {
this.dialogStatus = 'create'
this.outerVisible.addDialog = true
this.ruleForm = {
uuid1201:'',
uuid2201:'',
origincarrier: undefined,
originflightno: undefined,
originflightdate: undefined,
originawbano: undefined,
originawbhno: undefined,
transcarrier: undefined,
transflightno: undefined,
transflightdate: undefined,
transawbano: undefined,
transawbhno: '',
transpiece: undefined,
transweight: undefined,
goodsname: undefined,
goodspackage:'PK',
awbdesstation:undefined,
awboriginstation:undefined,
customcode:'',
status:'',
actime:'',
updatetime:'',
ext3:'',
ext4:'',
ext5:'',
}
},
// 新增功能
outerVisible_add() { // 进行表单的预验证
this.$refs.ruleForm.validate(valid => {
// 未通过，表单预校验
if (!valid) return
addMt8205(this.ruleForm).then((response) => {
const res = response.data
// 添加失败
if (res.code !== '200') {
// 关闭加载
return this.$message.error(res.msg)
}
// 添加，成功
this.$message.success(res.msg)
// 隐藏对话框
this.outerVisible.addDialog = false
// 刷新列表
this.submitForm()
}).catch(error => {
this.$message.error(error.toString())
})
})
},
// 打开编辑
editForm(index, row) {
this.ruleForm = Object.assign({}, row)
this.outerVisible.addDialog = true
this.dialogStatus = 'update'
this.$nextTick(() => {
this.ruleForm = Object.assign({}, row)
})
console.log(row)
},
// 编辑功能
outerVisible_edit() {
// 进行表单的预验证
this.$refs.ruleForm.validate(valid => {
// 未通过，表单预校验
if (!valid) return
ediMt8205(this.ruleForm).then((response) => {
const res = response.data
if (res.code !== '200') {
return this.$message.error(res.msg)
}
this.$message.success(res.msg)
// 隐藏对话框
this.outerVisible.addDialog = false
// 刷新列表
this.submitForm()
}).catch(error => {
this.$message.error(error.toString())
})
})
},
//删除
handleDelete(index, row) {
// 弹框询问是否删除？
this.$confirm('此操作永久删除该消息收发记录, 是否继续?', '警告', {
confirmButtonText: '确定删除',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
delMt8205({ uuid: row.uuid }).then((response) => {
console.log(row)
const res = response.data
this.$message.success(res.msg)
this.submitForm()
}).catch(error => {
this.$message.error(res.msg)
})
}).catch(() => {
})
},
//申请转运
handleSend(index, row) {
// 弹框询问是否删除？
this.$confirm('是否发送运单申请?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
const map = {'mt8205':row,'username':loginedUserInfo().username}
sendCreateMt8205(map).then((response) => {
const res = response.data
this.$message.success(res.msg)
this.submitForm()
}).catch(error => {
this.$message.error(res.msg)
})
}).catch(() => {
})
},
//更改状态
UpdateStatus(column,row){
this.$confirm("是否发送更改状态", "确认消息", {
distinguishCancelAndClose: true,
confirmButtonText: '确认更改',
cancelButtonText: '取消更改'
}).then(() => {
row.status = '22';
}).catch(action => {
this.$message({
type: 'info',
message: action === 'cancel'
? '取消状态更改'
: '状态更改取消'
})
})
},
//状态识别
formatStatus: function(row,column){
return row.status=='01'?'接受申报':row.status=='02'?'待人工审核':row.status=='03'?'退单'
:row.status=='11'?'放行':row.status=='12'?'拒装':row.status=='13'?'禁卸'
:row.status=='21'?'可自动发送':row.status=='22'?'未发送':row.status=='23'?'已发送新增报'
:row.status=='24'?'已发送删除报':row.status=='25'?'已发送修改报':'';
},
//发送舱单报按钮,删除，修改判定事件
btSendStatusFormater:(status) => {
if(status=='23' || status=='24'||status=='25'){
return true;
}else if(status=='22' ) {
return false;
}
},
btEditStatusFormater:(status) => {
if(status=='23' || status=='24'||status=='25'){
return true;
}else if(status=='22' ) {
return false;
}
},
btDeleStatusFormater:(status) => {
if(status=='23' || status=='24'||status=='25'){
return true;
}else if(status=='22' ) {
return false;
}
},
// 过滤中英文
inputMe(e){
return e.replace(/[^a-zA-Z0-9.-]/g,'').toUpperCase();
}
},
//渲染方法
mounted(){
this.submitForm();
// this.ruleForm.originflightdate = new Date().format('yyyy-MM-dd')
// this.ruleForm.transflightdate = new Date().format('yyyy-MM-dd')
}
}
</script>
<style scoped>
.ip{
max-width: 100px;
margin-right: -5px;
display: inline-block;
background-color: #6F8294;
color: #ffffff;
border: 1px solid #DCDFE6;
vertical-align: middle;
padding: 0 18px;
white-space: nowrap;
border-top-right-radius: 0px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 0px;
font-size: 10px;
}
</style>