emis-frontend/src/views/emis/emisWaybillTransfer/waybillTransfer.vue
2024-08-11 10:49:29 +08:00

767 lines
29 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 class="app-container">
<SearchForm slot="pageHeader" class="queryForm" :isShowSearchBtn="false" :model="queryParams" ref="queryForm" size="mini" :maxShow="9" label-width="100px" v-show="showSearch">
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="" prop="billCode">
<div slot="label">
<el-radio-group class="query-label" v-model="queryParams.params.queryOrderType">
<el-radio label="1">运单号</el-radio>
<el-radio label="0">订单号</el-radio>
</el-radio-group>
</div>
<XdTextareaInput
v-model="queryParams.billCode"
:placeholder="$t('多个流水号逗号或换行隔开')"
clearable
:rows="2"
/>
</el-form-item>
</el-col>
<el-col :span="16">
<el-col :span="8">
<el-form-item :label="$t('转件网点')" prop="createSite" label-width="80px">
<EmisSiteSimplePicker v-model="queryParams.createSite" :disabled="$store.getters.ownerSiteCode != '88888'" ></EmisSiteSimplePicker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="$t('转件公司')" prop="transferExpress" label-width="80px">
<span slot="label">
<span>{{$t('转件公司')}}</span>
</span>
<el-select
style="width:100%"
filterable
clearable
v-model="queryParams.transferExpress"
>
<el-option v-for="item in dict.type.emis_express_code" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="$t('签收状态')" prop="params.blSign" label-width="80px">
<el-select v-model="queryParams.params.blSign" clearable="" :placeholder="$t('全部')" value="0">
<el-option :label="$t('已签收')" value="1"></el-option>
<el-option :label="$t('未签收')" value="0"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="转件时间" prop="dateTimeRange" label-width="80px">
<elDateAdvPicker clearable v-model="dateTimeRange" @dateTimeChange="onDateSelect" ></elDateAdvPicker>
</el-form-item>
</el-col>
</el-col>
</el-row >
</SearchForm>
<xd-table v-loading="loading"
border
ref="singleSelectTable"
size="small"
storageName="emisTransferList_main"
:data="emisTransferList"
:showSearch.sync="showSearch"
:queryParams="queryParams"
:total="total"
@queryTable="getList"
@selection-change="handleSelectionChange"
v-if="tableHeight" :max-height="tableHeight + 'px'"
>
<div slot="toolbar">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
size="mini"
@click="getList"
>查询</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
size="mini"
@click="handleAdd"
>新增转件</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
plain
size="mini"
@click="handleDelete"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button plain class="filter-item" size="mini" type="primary" icon="el-icon-upload2" @click="handleBatchImport">导入</el-button>
</el-col>
<el-col :span="1.5">
<a href="/static/tpl/转件管理导出模板.xlsx" style="color: blue;font-weight: 600;font-size:13px;text-decoration: underline">下载导入模版</a>
</el-col>
</el-row>
</div>
<el-table-column type="selection" width="55" align="center" />
<el-table-column :label="$t('运单号')" align="center" prop="billCode" min-width="170">
<template slot-scope="scope">
<span>{{scope.row.billCode}}</span>
</template>
</el-table-column>
<el-table-column :label="$t('转单号')" align="center" prop="transferBillCode" min-width="100">
<template slot-scope="scope">
<span>{{scope.row.transferBillCode}}</span>
</template>
</el-table-column>
<el-table-column :label="$t('转件日期')" align="center" prop="transferDate" min-width="170">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.transferDate) }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('转件公司')" align="center" prop="transferExpress" min-width="150">
<template slot-scope="scope">
<dict-tag :options="dict.type.emis_express_code" :value="scope.row.transferExpress"/>
</template>
</el-table-column> />
<!-- <el-table-column :label="$t('转件公司编码')" align="center" prop="transferExpress" min-width="100" /> -->
<el-table-column :label="$t('目的城市')" align="center" prop="transferCity" min-width="150" />
<el-table-column :label="$t('物流公司联系人')" align="center" prop="linkMan" min-width="150" />
<el-table-column :label="$t('电话')" align="center" prop="linkPhone" min-width="100" />
<el-table-column :label="$t('签收状态')" align="center" prop="xxxx" min-width="100">
<template slot-scope="scope">
<el-tag v-if="scope.row.waybillDetail && scope.row.waybillDetail.blSign=='1'" type="success">已签收</el-tag>
<el-tag v-else type="danger">未签收</el-tag>
</template>
</el-table-column>
<el-table-column :label="$t('转件重量')" align="center" prop="transferWeight" min-width="100" />
<el-table-column :label="$t('转件体积')" align="center" prop="transferVolume" min-width="100" />
<el-table-column :label="$t('转件网点')" align="center" prop="createSiteName" min-width="100" />
<el-table-column :label="$t('操作人')" align="center" prop="createByName" min-width="150" />
<el-table-column :label="$t('登记时间')" align="center" prop="createTime" min-width="170">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('转件原因')" align="center" prop="transferResean" min-width="150">
<template slot-scope="scope">
<span class="ellipsis">{{ scope.row.transferResean }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('备注')" align="center" prop="remark" min-width="150">
<template slot-scope="scope">
<span class="ellipsis">{{ scope.row.remark }}</span>
</template>
</el-table-column>
</xd-table>
<!-- 添加或修改转件对话框 -->
<el-dialog :title="titleForm" :visible.sync="openForm" width="60%" v-dialogDrag :close-on-click-modal="false" append-to-body>
<el-form ref="form" :model="form" size="mini" label-width="80px" :rules="rules">
<el-row :gutter="0" style="display: flex;flex-wrap: wrap;">
<el-col :span="8">
<el-form-item :label="$t('运单编号')" prop="billCode" label-width="80px">
<el-input v-model="form.billCode" clearable="" placeholder="单号输入后按回车" @keyup.enter.native="handleScanInput">
<i slot="suffix" class="iconfont">&#xe656;</i>
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="$t('重量')" prop="transferWeight" label-width="80px">
<el-input v-model="form.transferWeight" disabled></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="$t('体积')" prop="transferVolume" label-width="80px">
<el-input v-model="form.transferVolume" disabled></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="$t('快件公司')" prop="transferExpress" label-width="80px">
<span slot="label">
<span>{{$t('转件公司')}}</span>
</span>
<el-select
style="width:100%"
filterable
clearable
v-model="form.transferExpress"
>
<el-option v-for="item in dict.type.emis_express_code" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="$t('转单编号')" prop="transferBillCode" label-width="80px">
<el-input v-model="form.transferBillCode"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="$t('目的城市')" prop="transferCity" label-width="80px">
<el-input v-model="form.transferCity"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="$t('转单时间')" prop="transferDate" label-width="80px">
<!-- <CustomDatePicker v-model="form.transferDate"></CustomDatePicker> -->
<!-- <elDateSimplePicker v-model="form.transferDate"></elDateSimplePicker> -->
<el-date-picker
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
v-model="form.transferDate"
type="datetime"
placeholder="选择日"
style="width:100%"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="$t('转件原因')" prop="transferResean" label-width="80px">
<el-input v-model="form.transferResean"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="$t('转件费')" prop="transferFee" label-width="80px">
<el-input v-model="form.transferFee"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="$t('联系人')" prop="linkMan" label-width="80px">
<el-input v-model="form.linkMan"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="$t('联系电话')" prop="linkPhone" label-width="80px">
<el-input v-model="form.linkPhone"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item :label="$t('备注')" prop="remark" label-width="80px">
<!-- <el-input v-model="form.remark"></el-input> -->
<el-input v-model="form.remark" rows="2" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align:center;margin-bottom:20px">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancelForm">取 消</el-button>
</div>
</el-dialog>
<el-dialog title="上传文件" :visible.sync="openUploadForm" width="50%" v-dialogDrag :destroy-on-close="true" :close-on-click-modal="false" append-to-body>
<el-row :gutter="0">
<el-form ref="form" :model="form" :rules="rules" size="mini" label-width="80px">
<el-col :span="24">
<el-form-item label="选择文件" prop="uploadFile" >
<el-upload
action=""
name="file"
accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
:show-file-list="true"
:limit="1"
:file-list="fileList"
:tooltip="fileName"
:on-change="fileChange"
:before-upload="beforeUpload">
<el-button slot="trigger" plain class="filter-item" size="mini" type="primary" >选择文件</el-button>
<el-link type="primary" style="line-height: 28px;font-size:13px;color:blue" href="/static/tpl/转件管理导出模板.xlsx">下载导入Excel模板</el-link>
<div v-if="uploadExcelDataInfo !=''" style="color: black;font-size: 12px;font-weight: 800;">{{ fileName }} {{ uploadExcelDataInfo }}</div>
</el-upload>
<el-alert
title="注意"
type="info"
description="仅允许导入“xls”或“xlsx”格式文件!"
close-text="知道了">
</el-alert>
</el-form-item>
</el-col>
</el-form>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="batchImpDataForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listEmisWaybillTransfer, delEmisWaybillTransfer, addEmisWaybillTransfer, updateEmisWaybillTransfer } from "@/api/emis/emisWaybillTransfer";
import elDateAdvPicker from '@/components/DatePickerAdv/elDateAdvPicker';
import EmisSiteSimplePicker from '@/views/emis/EmisBaseTools/EmisSiteSimplePicker.vue';
import { getDateTimeToString } from '@/utils/payutils'
import { parseTime, dateToStr } from "@/utils/custom";
import { getWaybillDetail } from "@/api/emis/emisWaybill";
import XLSX from 'xlsx'
export default {
name: "WaybillTransfer",
components: { elDateAdvPicker, EmisSiteSimplePicker },
dicts: ['emis_express_code'],
data() {
return {
resetRefreshId:null,
openUploadForm:false,
fileList:[],
uploadExcelDataInfo:"",
fileName:"",
tmpDataList: [],
// 遮罩层
loading: false,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 创建时间搜索
dateTimeRange:[],
// 总条数
total: 0,
// 运单转件表表格数据
emisTransferList: [],
currentId:null,
openForm: false,
titleForm: "",
// 弹出展示层
id:null,
titleView:"",
openView: false,
// 更新网点时间范围
daterangeTransferDate: [],
// 更新网点时间范围
daterangeCreateTime: [],
// 更新网点时间范围
daterangeUpdateTime: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
billCode: null,
createSite:null,
orderSN:null,
transferExpress:null,
params:{
queryOrderType:"1",
blSign:null,
}
},
form:{
id: null,
billCode: null,
transferBillCode: null,
transferDate: null,
transferExpress: null,
linkMan: null,
linkPhone: null,
transferFee: null,
transferWeight: null,
transferVolume: null,
transferResean: null,
transferCity: null,
dataFrom: null,
delFlag: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
remark: null,
createSite: null,
updateSite: null
},
rules: {
billCode: [
{ required: true, message: "运单不能为空", trigger: "blur" }
],
transferBillCode: [
{ required: true, message: "转件编号不能为空", trigger: "blur" }
],
transferDate: [
{ required: true, message: "转件时间不能为空", trigger: "blur" }
],
transferExpress: [
{ required: true, message: "快递公司不能为空", trigger: "blur" }
],
transferCity: [
{ required: true, message: "目的城市不能为空", trigger: "blur" }
],
},
// 调整表格的高度,不允许滚动
tableHeight: 200,
};
},
created() {
this.$nextTick(function() {
if(this.$store.getters.ownerSiteCode != '88888'){
this.queryParams.createSite=this.$store.getters.ownerSiteCode;
}
let queryFormEl = this.$refs.queryForm.$el;
let tableH = queryFormEl.offsetHeight+190;
this.tableHeight = window.innerHeight - tableH;
});
// this.getList();
},
mounted() {
const end = new Date()
const start = new Date()
start.setHours(0,0,0,0)
end.setHours(23,59,59,0)
this.dateTimeRange=[start,end];
},
methods: {
handleScanInput(){
if(this.form.billCode==null || this.form.billCode==''){
this.$modal.msgError("输入单号后回车");
return;
}
getWaybillDetail(this.form.billCode).then(response => {
if(response.code != 200){
this.$modal.msgError(scanRstItem.msg);
return;
}
let record =Object.assign({}, response.data);
if(record.blDispFd=='1'){
this.$modal.msgError("已转件,不允许录入");
this.form.billCode=null;
return;
}
this.form.transferWeight=record.billWeight;
this.form.transferVolume=record.totalVolume;
});
},
/** 查询运单转件表列表 */
getList() {
this.loading = true;
this.emisTransferList = [];
this.total = 0;
// this.queryParams.params = {};
// if (null != this.dateTimeRange && '' != this.dateTimeRange) {
// this.queryParams.params["beginTransferDate"] = dateToStr(new Date(this.dateTimeRange[0]));
// this.queryParams.params["endTransferDate"] = dateToStr(new Date(this.dateTimeRange[1]));
// }
listEmisWaybillTransfer(this.addDateRange(this.queryParams, this.dateTimeRange,"transferDate")).then(response => {
this.loading = false;
if(!response.rows || response.rows.length == 0){
// this.$modal.msgError("未查到单号");
return;
}
this.emisTransferList = response.rows;
this.total = response.total;
});
},
onScanSiteSelect(item){
this.queryParams.scanSite=item && item.siteName;
this.queryParams.scanSiteCode=item && item.siteCode;
},
onDateSelect(value){
console.log("date picker---->", value)
this.dateTimeRange=value;
// scanDate
},
getUUID() {
return Math.random().toString(36).substring(3,10);
},
handleBatchImport(){
this.resetRefreshId="importForm-"+this.getUUID();
this.openUploadForm=true;
this.fileList=[];
this.uploadExcelDataInfo="";
this.fileName="";
},
async batchImpDataForm() {
// 判断是否有数据
if(this.tmpDataList.length==0){
this.$modal.msgError('表格中没有数据');
return;
}
// this.emisTransferList = this.emisTransferList.concat(this.tmpDataList);
for(let i = 0; i < this.tmpDataList.length; i++){
let response = await addEmisWaybillTransfer(this.tmpDataList[i]);
if(!response || response.code != 200 ){
this.$modal.msgError(response && response.msg || "未知错误")
continue;
}
}
this.getList();
this.tmpDataList=[];
this.openUploadForm = false;
},
cancel(){
this.openUploadForm = false;
},
fileChange(file, fileList) {
this.fileList = fileList;
},
beforeUpload(file) {
this.fileName = file.name;
this.form.batchName = file.name;
this.readerData(file)
return false
},
readerData(rawFile) {
this.tmpDataList=[];
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = e => {
const data = e.target.result
const workbook = XLSX.read(data, { type: 'array' })
const firstSheetName = workbook.SheetNames[0] // firstSheetName
// if (!excelTypes.includes(firstSheetName)) {
// reject('无法识别当前Excel模板')
// this.$modal.msgError('无法识别当前Excel模板')
// return
// }
const worksheet = workbook.Sheets[firstSheetName]
// const header = this.getHeaderRow(worksheet) // 标题
const results = XLSX.utils.sheet_to_json(worksheet, {raw: false})
console.log(results);
this.batchImportData(results);
resolve()
}
reader.readAsArrayBuffer(rawFile)
})
},
async batchImportData(results) {
const _index = 1
let loadingInstance = this.$loading({
text: '正在解析 ' + _index + ' 数据...'
})
this.orderList = [];
// 组装提交的数据
for (let index = 0; index < results.length; index++) {
const element = results[index]
// 判断转件公司是否正确
let transferExpressLabel=element['转件公司'];
let expressCodeItem=this.dict.type.emis_express_code.find(item=>item.label==transferExpressLabel);
if(!expressCodeItem){
this.$modal.msgError("转件公司:"+transferExpressLabel+" 名称不存在!");
loadingInstance.close();
return;
}
let transferExpress=expressCodeItem.value;
let orderData={
billCode: element['运单号'],
transferBillCode: element['转件单号'],
// transferDate2: element['转件时间'],
transferDate: parseTime(new Date(element['转件时间'])),
transferCity: element['目的城市'],
transferExpress: transferExpress,
linkMan:element['联系人'],
linkPhone:element['联系电话'],
transferWeight: element['重量'],
transferVolume: element['体积'],
transferFee: element['转件费'],
transferResean: element['转件原因'],
remark: element['备注'],
dataFrom: "pc",
createBy: this.$store.getters.empCode,
createByName: this.$store.getters.empName,
createTime: parseTime(new Date()),
createSite: this.$store.getters.ownerSiteCode,
createSiteName: this.$store.getters.ownerSiteName,
// blSign: "0",
uploadStatus: 0,
errorInfo:'',
}
debugger
this.tmpDataList.push(orderData);
}
this.uploadExcelDataInfo="总共 " + this.tmpDataList.length +" 条数据。";
loadingInstance.close()
},
submitForm(){
if(this.state == "add"){
this.form.dataFrom= "pc";
// this.form.delFlag= null;
this.form.createBy= this.$store.getters.empCode;
this.form.createTime= getDateTimeToString(new Date());//this.parseTime(new Date());
// this.form.updateBy= null;
// this.form.updateTime= null;
this.form.createSite= this.$store.getters.ownerSiteCode;
// this.form.updateSite= nul;
addEmisWaybillTransfer(this.form).then(response => {
if(response && response.code==200){
this.resetForm("form");
this.openForm = false;
this.getList();
}else{
this.$modal.msgError(response && response.msg || "未知错误")
}
})
}else if(this.state == "update"){
this.form.dataFrom= "pc";
// this.form.delFlag= null;
// this.form.createBy= this.$store.getters.empCode;
// this.form.createTime= getDateTimeToString(new Date());//this.parseTime(new Date());
this.form.updateBy= this.$store.getters.empCode;
this.form.updateTime= getDateTimeToString(new Date());
// this.form.createSite= this.$store.getters.ownerSiteCode;
this.form.updateSite= this.$store.getters.ownerSiteCode;
updateEmisWaybillTransfer(this.form).then(response => {
if(response && response.code==200){
this.resetForm("form");
this.openForm = false;
this.getList();
}else{
this.$modal.msgError(response && response.msg || "未知错误")
}
})
}
},
cancelForm(){
this.resetForm("form");
this.openForm = false;
},
/** 删除按钮操作 */
handleDelete() {
const ids =this.ids;
if(!ids || ids.length < 1){
this.$modal.msgError("未选择数据!")
return;
}
this.$modal.confirm('是否确认删除').then(async function() {
for(let i = 0;i<ids.length;i++){
let response = await delEmisWaybillTransfer(ids[i]);
if(response.code!=200){
this.$modal.msgError(response.msg || "未知错误!")
}
}
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 新增按钮操作 */
handleAdd() {
// this.currentId=null;
this.resetForm("form");
this.openForm= true;
this.state="add";
this.titleForm = "新增";
},
// handleShowMoreInput(){
// this.moreInputVisible = !this.moreInputVisible;
// },
/** 修改按钮操作 */
handleUpdate(row) {
if(!this.ids || this.ids.length!=1){
this.$modal.msgError("未选择数据 或者 选择了多条数据");
return;
}
this.currentId= row.id;
this.openForm = true;
this.titleForm = "修改";
this.state="update";
this.form = {...this.selection[0]}
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1;
this.multiple = !selection.length;
this.selection = selection;
},
/** 导出按钮操作 */
handleExport() {
// this.download('emis/emisWaybillTransfer/export', {
// ...this.queryParams
// }, `emisWaybillTransfer_${new Date().getTime()}.xlsx`)
const loadingInstance = this.$loading({
text: '正在导出...'
})
var qParam = {...this.queryParams};
qParam.pageNum=1;
qParam.pageSize=5000;
listEmisWaybillTransfer(this.addDateRange(qParam, this.dateTimeRange)).then(response => {
this.downloadLoading = false
if (response.code === 200) {
const curList = response.rows
import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['id','运单号','转件单号','转件日期','转件公司','联系人','联系电话','转件费','转件重量','转件体积','转件原因','转件城市','数据来源','删除标志(0代表存在','创建者','创建时间','更新者','更新时间','备注','创建网点','更新网点',];
const filterVal = ['id','billCode','transferBillCode','transferDate','transferExpress','linkMan','linkPhone','transferFee','transferWeight','transferVolume','transferResean','transferCity','dataFrom','delFlag','createBy','createTime','updateBy','updateTime','remark','createSite','updateSite',];
const data = this.formatJson(filterVal, curList, response.rows)
excel.export_json_to_excel({
header: tHeader,
data,
filename: '运单转件表',
autoWidth: true
})
loadingInstance.close()
})
}
});
},
formatJson(filterVal, jsonData, resData) {
let index = 0
return jsonData.map(v => filterVal.map(j => {
if (j === 'index') {
return ++index
}
if (j === 'status') {
var statusStr='xxx'
if(v[j] == 10){
statusStr='xxx'
}
return statusStr;
}
return v[j]
}))
},
/** 列索引函数 */
getIndex($index) {
return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + $index + 1
},
/** 时间搜索响应函数 */
dateTimeChange(value){
this.dateTimeRange=value;
},
}
};
</script>
<style scoped>
.query-label {
.el-radio{
display: block;
line-height: 23px;
white-space: normal;
margin-right: 0;
}
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
white-space: nowrap;
}
</style>