<template> <div class="eContainer"> <c-page title="待复核详情"> <c-content :height="120"> <div class="eibs-tab"> <el-form :model="model" ref="modelForm" tokenKey="modelForm" :validate-on-rule-change="false" label-width="150px" size="small"> <div> <c-content> <c-col :span="24" style="height: 24px"> <el-form-item label="基本信息" class="messageLabel"> </el-form-item> </c-col> <c-col :span="24" style="height: 10px; margin-bottom: 10px"> <el-divider></el-divider> </c-col> <!-- ================== 基础信息 ============ --> <!-- ========================= Left ========================= --> <c-col :span="11"> <c-col :span="24"> <el-form-item label="业务编号"> <c-input v-model="trn.ownref" maxlength="16" disabled ></c-input> </el-form-item> </c-col> <c-col :span="24"> <el-form-item label="交易代码"> <c-input v-model="trn.inifrm" maxlength="6" disabled ></c-input> </el-form-item> </c-col> <c-col :span="24"> <el-form-item label="业务金额"> <c-col :span="8"> <c-select v-model="trn.reloricur" dbCode="curtxt" placeholder="" style="width: 98%" disabled> </c-select> </c-col> <c-col :span="16"> <c-input-currency :currency="trn.reloricur" v-model="trn.reloriamt" style="width: 100%" disabled></c-input-currency> </c-col> </el-form-item> </c-col> <!-- <c-col :span="13"> <el-form-item label="业务金额"> <c-input-currency :currency="trn.reloricur" v-model="trn.reloriamt" style="width: 100%" disabled></c-input-currency> </el-form-item> </c-col> <c-col :span="11"> <el-form-item label="" label-width="8px"> <c-input v-model="trn.reloriamt" disabled ></c-input> </el-form-item> </c-col> --> <c-col :span="24"> <el-form-item label="经办柜员"> <c-input v-model="trn.usr" maxlength="8" disabled ></c-input> </el-form-item> </c-col> </c-col> <!-- ========================= Right ========================= --> <c-col :span="11" :offset="1"> <c-col :span="24"> <el-form-item label="交易名称"> <c-input v-model="trn.inifrmname" maxlength="6" disabled ></c-input> </el-form-item> </c-col> <c-col :span="24"> <el-form-item label="摘要信息"> <c-input v-model="trn.objnam" maxlength="40" disabled placeholder="请输入"></c-input> </el-form-item> </c-col> <c-col :span="24"> <el-form-item label="业务状态"> <c-select v-model="trn.relflg" dbCode="relsta" style="width: 100%" disabled> </c-select> </el-form-item> </c-col> <c-col :span="24"> <el-form-item label="创建时间"> <c-input v-model="trn.inidattim" disabled placeholder="请输入时间戳"></c-input> </el-form-item> </c-col> </c-col> <!-- =====================document======================== --> <c-col :span="24" style="height: 24px"> <el-form-item label="面函/报文" class="messageLabel"> </el-form-item> </c-col> <c-col :span="24" style="height: 0px; margin-top: -5px"> <el-divider></el-divider> </c-col> <c-col :span="24"> <el-table :data="smhList.data" :columns="smhList.columns" :highlight-current-row="true" :paginationShow="false" style="width: 100%"> <el-table-column label="序号" width="80px"> <template slot-scope="scope"> {{ scope.$index+1 }} </template> </el-table-column> <el-table-column show-overflow-tooltip v-for="(item, index) in smhList.columns" :label="item.label" :prop="item.prop" :key="index" :min-width="item.width"> </el-table-column> <el-table-column label="操作" width="200px" fixed="right"> <template slot-scope="scope"> <c-button type="primary" size="small" :disabled="completeFlag" @click="showMsg(scope.row)" style="margin-right: 10px">显示</c-button> </template> </el-table-column> </el-table> </c-col> <!-- 经办复核 --> <c-col :span="24" style="height: 24px; margin-top: 20px"> <el-form-item label="经办/复核" class="messageLabel"> </el-form-item> </c-col> <c-col :span="24" style="height: 0px; margin-top: -5px"> <el-divider></el-divider> </c-col> <c-col :span="24"> <c-col :span="24" :offset="0"> <el-table :data="trsList.data" :columns="trsList.columns" :highlight-current-row="true" :paginationShow="false" style="width: 100%"> <el-table-column label="序号" width="80px"> <template slot-scope="scope"> {{ scope.$index+1 }} </template> </el-table-column> <el-table-column show-overflow-tooltip v-for="(item, index) in trsList.columns" :label="item.label" :prop="item.prop" :key="index" :min-width="item.width"> </el-table-column> </el-table> </c-col> </c-col> <div v-if="wfeList.data && wfeList.data.length>0"> <!-- ============ workflow ============= --> <c-col :span="24" style="height: 24px; margin-top: 20px"> <el-form-item label="工作流服务" class="messageLabel"> </el-form-item> </c-col> <c-col :span="24" style="height: 0px; margin-top: -5px"> <el-divider></el-divider> </c-col> <c-col :span="24"> <c-col :span="24" :offset="0"> <el-table :data="wfeList.data" :highlight-current-row="true" :paginationShow="false" style="width: 100%"> <el-table-column label="序号" width="80px"> <template slot-scope="scope"> {{ scope.$index+1 }} </template> </el-table-column> <el-table-column show-overflow-tooltip v-for="(item, index) in wfeList.columns" :label="item.label" :prop="item.prop" :key="index" :min-width="item.width"> <template slot-scope="scope"> <span v-if="item.prop==='srv'"> {{ getCodelabel(scope.row[item.prop],"srvtxt") }} </span> <span v-else-if="item.prop==='sta'"> {{ formatter(scope.row[item.prop]) }} </span> <span v-else> {{ scope.row[item.prop] }} </span> </template> </el-table-column> </el-table> </c-col> </c-col> </div> <!-- =====================分录======================== --> <div v-if="gleData.data && gleData.data.length>0"> <c-col :span="24" style="height: 24px"> <el-form-item label="分录" class="messageLabel"> </el-form-item> </c-col> <c-col :span="24" style="height: 0px; margin-top: -5px"> <el-divider></el-divider> </c-col> <c-col :span="24"> <el-table :data="gleData.data" :columns="gleData.columns" :highlight-current-row="true" :paginationShow="false" style="width: 100%"> <el-table-column label="序号" width="80px"> <template slot-scope="scope"> {{ scope.$index+1 }} </template> </el-table-column> <el-table-column show-overflow-tooltip v-for="(item, index) in gleData.columns" :label="item.label" :prop="item.prop" :key="index" :min-width="item.width"> <template slot-scope="scope"> <span v-if="item.prop==='amt'"> {{ moneyFormat(scope.row.amt, scope.row.cur) }} </span> <span v-else> {{ scope.row[item.prop] }} </span> </template> </el-table-column> </el-table> </c-col> </div> <!-- -------------------会计传票------------------- --> <div v-if="bookData.data && bookData.data.length>0"> <c-col :span="24" style="height: 24px; margin-top: 20px"> <el-form-item label="会计传票" class="messageLabel"> </el-form-item> </c-col> <c-col :span="24" style="height: 0px; margin-top: -5px"> <el-divider></el-divider> </c-col> <c-col :span="24"> <el-table :data="bookData.data" :columns="bookData.columns" :highlight-current-row="true" :paginationShow="false" style="width: 100%"> <el-table-column label="序号" width="80px"> <template slot-scope="scope"> {{ scope.$index+1 }} </template> </el-table-column> <el-table-column show-overflow-tooltip v-for="(item, index) in bookData.columns" :label="item.label" :prop="item.prop" :key="index" :min-width="item.width"> <template slot-scope="scope"> <span v-if="item.prop==='amt'"> {{ moneyFormat(scope.row.amt, scope.row.cur) }} </span> <span v-else> {{ scope.row[item.prop] }} </span> </template> </el-table-column> <el-table-column label="操作" width="140px" fixed="right"> <template slot-scope="scope"> <c-button type="primary" size="small" @click="showPz(scope.row)" style="margin-right: 10px">显示</c-button> </template> </el-table-column> </el-table> </c-col> </div> <!-- -------------------衍生品回单------------------- --> <div v-if="huidanData.data && huidanData.data.length>0"> <c-col :span="24" style="height: 24px; margin-top: 20px"> <el-form-item label="衍生品回单" class="messageLabel"> </el-form-item> </c-col> <c-col :span="24" style="height: 0px; margin-top: -5px"> <el-divider></el-divider> </c-col> <c-col :span="24"> <el-table :data="huidanData.data" :columns="huidanData.columns" :highlight-current-row="true" :paginationShow="false" style="width: 100%"> <el-table-column label="序号" width="80px"> <template slot-scope="scope"> {{ scope.$index+1 }} </template> </el-table-column> <el-table-column show-overflow-tooltip v-for="(item, index) in huidanData.columns" :label="item.label" :prop="item.prop" :key="index" :min-width="item.width"> <template slot-scope="scope"> <span v-if="item.prop==='jine1'"> {{ moneyFormat(scope.row.jine1, scope.row.huobi1) }} </span> <span v-else-if="item.prop==='jine2'"> {{ moneyFormat(scope.row.jine2, scope.row.huobi2) }} </span> <span v-else> {{ scope.row[item.prop] }} </span> </template> </el-table-column> <el-table-column label="操作" width="140px" fixed="right"> <template slot-scope="scope"> <c-button type="primary" size="small" @click="showHuidan(scope.row)" style="margin-right: 10px">显示</c-button> </template> </el-table-column> </el-table> </c-col> </div> <!-- -------------------盖章文件信息------------------- --> <div v-if="imgList.data && imgList.data.length>0"> <c-col :span="24" style="height: 24px; margin-top: 20px"> <el-form-item label="盖章文件信息" class="messageLabel"> </el-form-item> </c-col> <c-col :span="24" style="height: 0px; margin-top: -5px"> <el-divider></el-divider> </c-col> <c-col :span="24"> <el-table :data="imgList.data" :columns="imgList.columns" :highlight-current-row="true" :paginationShow="false" style="width: 100%"> <el-table-column label="序号" width="80px"> <template slot-scope="scope"> {{ scope.$index+1 }} </template> </el-table-column> <el-table-column show-overflow-tooltip v-for="(item, index) in imgList.columns" :label="item.label" :prop="item.prop" :key="index" :min-width="item.width"> <template slot-scope="scope"> <span v-if="item.prop==='filetype'"> {{ getCodelabelFiltyp(scope.row, "filtyp")}} </span> <span v-else-if="item.prop==='sta'"> {{ tranSta(scope.row.sta) }} </span> <span v-else> {{ scope.row[item.prop] }} </span> </template> </el-table-column> <el-table-column label="操作" width="140px" fixed="right"> <template slot-scope="scope"> <c-button type="primary" size="small" @click="showYptImg(scope.row)" style="margin-right: 10px">显示</c-button> </template> </el-table-column> </el-table> </c-col> </div> <!-- -------------------返回信息------------------- --> <div v-if="dtaret && dtaret.objtyp==='JSD'" > <c-col :span="24" style="height: 24px"> <el-form-item label="返回信息" class="messageLabel"> </el-form-item> </c-col> <c-col :span="24" style="height: 10px; margin-bottom: 10px"> <el-divider></el-divider> </c-col> <c-col :span="11"> <c-col :span="24"> <el-form-item label="交易成交汇率"> <c-input v-model="dtaret.jqmrhl" disabled></c-input> </el-form-item> </c-col> <c-col :span="24"> <el-form-item label="总行确认汇率"> <c-input v-model="dtaret.cjiohl" disabled></c-input> </el-form-item> </c-col> <c-col :span="24"> <el-form-item label="新核心业务编号"> <c-input v-model="dtaret.yewubh" disabled ></c-input> </el-form-item> </c-col> <c-col :span="24"> <el-form-item label="总行向分行返还收益金额" class="mylabel"> <c-input v-model="dtaret.bfxjcr" disabled></c-input> </el-form-item> </c-col> <c-col :span="24"> <el-form-item label="总行扣划违约金金额"> <c-input v-model="dtaret.dclije" disabled></c-input> </el-form-item> </c-col> </c-col> <!-- ========================= Right ========================= --> <c-col :span="11" :offset="1"> <c-col :span="24"> <el-form-item label="系统内平盘汇率"> <c-input v-model="dtaret.jqmchl" disabled></c-input> </el-form-item> </c-col> <c-col :span="24"> <el-form-item label="差额交割汇率"> <c-input v-model="dtaret.paijia" disabled></c-input> </el-form-item> </c-col> <c-col :span="24"> <el-form-item label="总行向客户返还收益金额" class="mylabel"> <c-input v-model="dtaret.bfxjzq" disabled></c-input> </el-form-item> </c-col> <c-col :span="24"> <el-form-item label="分行扣划违约金额"> <c-input v-model="dtaret.beiyje" disabled></c-input> </el-form-item> </c-col> <c-col :span="24"> <el-form-item label="交割日"> <c-input v-model="dtaret.qixiri" disabled></c-input> </el-form-item> </c-col> </c-col> </div> </c-content> </div> </el-form> <div class="btn-wrap"> <c-button size="small" type="primary" v-if="parentsInfo.trninr" style="margin-left: 0" @click="showRelInfo">分行业务详情</c-button> <c-button size="small" v-if="completeFlag" type="primary" style="margin-left: 12" @click="onNodeStatus(trninr)">交易节点</c-button> <c-button size="small" v-if="!completeFlag" type="primary" style="margin-left: 12" @click="handleDisplay">交易快照</c-button> <c-button size="small" @click="exit" type="primary" style="margin-left: 10px">返回</c-button> </div> </div> </c-content> </c-page> <!-- 预览弹框 --> <message-view ref="msgView"></message-view> <parentsDetail :parentsVisiable="parentsVisiable" :parentsInfo="parentsInfo" @closeDialog="closeDialog"></parentsDetail> <!--交易节点状态 弹窗 --> <nodeStatusDialog ref="nodeStatus" :activities="activities" :nextNode="nextNode"/> </div> </template> <script> import Trnrel from "../model"; import Api from "~/service/Api"; import event from "../event"; import commonFunctions from "~/mixin/commonFunctions.js"; import MessageView from "~/components/business/docpan/views/MessageView"; import { log } from "util"; import { display } from "~/service/business/file"; import parentsDetail from './parentsDetail.vue' import nodeStatusDialog from './nodeStatusDialog.vue' import moment from 'moment' export default { provide() { return { root: this }; }, name: "TrnrelDetail", mixins: [event, commonFunctions], components: { MessageView,parentsDetail,nodeStatusDialog}, data() { return { model: new Trnrel().data, parentsVisiable:false, parentsInfo:{ trninr:"", inifrm:"", sdhflg:"" }, trn: {}, gleData: { columns: [ { label: "账号", prop: "act",width:"210px" }, { label: "借/贷", prop: "dbtcdt",width: "60px" }, { label: "币种", prop: "cur",width:"110px" }, { label: "金额", prop: "amt",width:"210px" }, { label: "牌价类型", prop: "status" ,width:"110px"}, { label: "牌价", prop: "rat",width:"210px"}, { label: "客户编号", prop: "cliextkey",width:"110px"}, { label: "收入", prop: "income"} ], data: [] }, bookData: { columns: [ { label: "传票类型", prop: "pzName",width:"140px" }, { label: "账号", prop: "ptyAct",width:"160px" }, { label: "科目", prop: "trmcod" ,width:"110px"}, { label: "币种", prop: "cur",width:"110px"}, { label: "金额", prop: "amt",width:"140px"}, { label: "创建日期", prop: "createDt",width:"160px"}, { label: "摘要", prop: "gleRemark",width:"260px"} ], data: [] }, huidanData: { columns: [ { label: "交易品种", prop: "joyipz",width:"140px" }, { label: "交易日期", prop: "jyriqi",width:"160px" }, { label: "客户名称", prop: "kehum1" ,width:"110px"}, { label: "币种1", prop: "huobi1",width:"110px"}, { label: "金额1", prop: "jine1",width:"140px"}, { label: "币种2", prop: "huobi2",width:"110px"}, { label: "金额2", prop: "jine2",width:"140px"}, { label: "成交汇率", prop: "huilv1",width:"160px"} ], data: [] }, imgList: { columns: [ { label: "流水号", prop: "ftynum",width:"160px" }, { label: "mftcusid", prop: "mftcusid",width:"120px" }, { label: "文件类型", prop: "filetype" ,width:"180px"}, { label: "安心签编号", prop: "axqno",width:"180px"}, { label: "文件名称", prop: "filename",width:"210px"}, { label: "签章文件名称", prop: "sighfilenam",width:"210px"}, { label: "状态", prop: "sta",width:"90px"}, { label: "描述", prop: "rstext",width:"120px"} ], data: [] }, dtaret:{}, smhList: { columns: [ { label: "角色", prop: "name",width:"110px" }, { label: "描述", prop: "extkey",width:"210px" }, { label: "介质", prop: "cortyp",width:"110px" }, { label: "报文格式", prop: "docsnf",width:"110px" }, { label: "传送方式", prop: "apf" } ], data: [] }, trsList: { columns: [ { label: "类型", prop: "sigidx" ,width:"110px" }, { label: "用户", prop: "nam" ,width:"160px" }, { label: "工号", prop: "usr" ,width:"180px" }, { label: "日期/时间", prop: "dattim" } ], data: [] }, wfeList: { columns: [ { label: "服务", prop: "wfssub" ,width:"110px" }, { label: "名称", prop: "srv" ,width:"110px" }, { label: "交易状态", prop: "sta" ,width:"110px" }, { label: "最新更新", prop: "dattim" ,width:"180px" }, { label: "重试", prop: "rtycnt" ,width:"110px" }, // {label: "目标时间",prop: "tardattim",width:"180px" }, { label: "备注1", prop: "txt" ,width:"310px" }, { label: "备注2", prop: "txt2" } ], data: [] }, dbCodes:{ srvtxt:[], filtyp:[], gnztyp:[] }, flg: [], atptxt: "", relstaEN: "", usgtxt: "", activities: [], nextNode:[], suppress:"", completeFlag:this.$route.path==='/business/trnrelDetail'?true:false, trninr:this.$route.query.inr }; }, mounted() { this.getdbCode('srvtxt','','srvtxt'); this.getdbCode('filtyp','','filtyp'); this.getdbCode('gnztyp','','gnztyp'); this.loadData(); this.completeFlag=this.$route.path==='/business/trnrelDetail'?true:false; }, methods: { // dealDisplay(row){ // this.$refs.displayDialog.isShowDisplay=true; // this.$refs.displayDialog.inifrm=row.inifrm; // this.$refs.displayDialog.trninr=row.trninr; // }, closeDialog(){ this.parentsVisiable=false; }, async getdbCode(codeType, uil, codeNam) { let params = { codeType: codeType, uil: uil ? uil : 'EN' } let rtnmsg = await Api.post("/manager/dic/listDicInfo", params) if (rtnmsg.respCode === SUCCESS) { let srvtxt = rtnmsg.data.map(item => ({ value: item.codeValue, label: item.codeName })); this.dbCodes[codeNam] = srvtxt } }, async showMsg(row){ this.$refs.msgView.fileViewDispaly(-1,{smhinr:row.inr}) }, async showPz(row){ this.$refs.msgView.showPz(row) }, async showHuidan(row){ this.$refs.msgView.showHuidan(row) }, async showYptImg(row){ this.$refs.msgView.showYptImg(row) }, async handleDisplay() { let inr = this.$route.query.inr; let inifrm = this.$route.query.inifrm; let inidattim = this.$route.query.inidattim; let businessType = 'TRN'; const loading = this.loading("快照数据加载中"); // 历史快照 if(inr.length == 8 && moment(inidattim).format('YYYY') <= new Date().getFullYear()) { this.routerPush({ path: '/business/HistoryRecord', query: { businessInr: inr, businessType: businessType } }) }else if(inr.length == 16){ this.routerPush({ path: `/display/${inifrm}`, query: { businessInr: inr, businessType: businessType } }) } // this.routerPush({ // path: `/display/${inifrm}`, // query: { // businessInr: inr, // businessType: businessType // } // }); }, async loadData() { let params = { trninr: this.$route.query.inr }; const loading = this.loading(); const rtnmsg = await Api.post("/public/quesel/getDetailInfo", params); if (rtnmsg.respCode == SUCCESS) { this.trn = rtnmsg.data.trn; this.dtaret=rtnmsg.data.dtaret; this.parentsInfo.trninr=rtnmsg.data.othtrninr; this.parentsInfo.inifrm=rtnmsg.data.othinifrm; this.parentsInfo.sdhflg=rtnmsg.data.sdhflg; rtnmsg.data.gleList.forEach(item=>{ item.status="Stored" }) this.gleData.data = rtnmsg.data.gleList; this.bookData.data = rtnmsg.data.gleBookList; if(rtnmsg.data.smhList){ rtnmsg.data.smhList.forEach((item)=>{ let oldextkey=item.extkey; item.name=item.nam.substring(0,3) item.extkey=item.nam.substring(4); switch(item.cortyp){ case "LET": item.apf="Letter"; item.docsnf="simple letter"; break; case "SWT": item.apf="Letter"; item.docsnf=""; break; case "ERX": item.apf="E-Trade"; item.docsnf="ERX"; break; } if(item.dir==="<"){ item.name=""; } if(!item.extkey){ item.extkey=oldextkey; } }) } this.smhList.data=rtnmsg.data.smhList; this.trsList.data = rtnmsg.data.trsList; this.wfeList.data = rtnmsg.data.wfeList; this.imgList.data = rtnmsg.data.imgList; this.huidanData.data = rtnmsg.data.huidanList; } loading.close(); }, getCodelabel(value,codenam){ const codeobj = this.dbCodes[codenam].find(obj => obj.value === value); return codeobj ? codeobj.label : value; }, getCodelabelFiltyp(row,codenam){ let objtyp=this.$route.query.inifrm?this.$route.query.inifrm.substring(0,3):""; if("-nit-nct-git-gct-hit-net-get-".indexOf(objtyp)>=0){ const codeobj = this.dbCodes[codenam].find(obj => obj.value === row.filetype); return codeobj ? codeobj.label : row.filetype; }else if("-dit-bdt-det-bft-bpt-trt-dft-".indexOf(objtyp)>=0){ codenam = "gnztyp"; const codeobj = this.dbCodes[codenam].find(obj => obj.value === row.title); return codeobj ? codeobj.label : row.title; }else{ //贾老师规定文件类型 为银行面函 return "银行面函"; } }, tranSta(val){ let valtxt=""; switch(val){ case "F": valtxt="已完成"; break; case "W": valtxt="待处理"; break; } return valtxt; }, formatter(val) { let label; let wfetrssta = [ { label: "Done", value: "D" }, { label: "发布", value: "1" }, { label: "Cancel", value: "C" }, { label: "Error", value: "E" }, { label: "Open", value: "O" }, { label: "建立", value: "6" }, { label: "Waiting", value: "W" }, { label: "拒绝", value: "2" }, { label: "有效", value: "A" }, { label: "外部确认", value: "5" }, { label: "Skip", value: "S" }, { label: "需求修改", value: "3" }, { label: "创建时签名", value: "4" }, { label: "Retry", value: "R" } ]; for (let i of wfetrssta) { if (i.value === val) { label = i.label; break; } } return label; }, async handleDetail(index, row) { const params = { index: row.idx }; let rtnmsg = await Api.post( `${this.requestPrefix}/executeDocpanDetail`, params ); if (rtnmsg.respCode == SUCCESS) { this.title = row.pandsc; (this.centerDialogVisible = true), this.updateModel(rtnmsg.data); this.dialog = this.docpan.doceot[row.idx]; this.index = row.idx; } }, exit() { this.$store.commit("delTagsArry", this.$route.path); this.$router.back() }, showRelInfo(){ this.parentsVisiable=true; }, async onNodeStatus(trninr) { if(!trninr){ trninr=this.$route.query.inr; } this.$refs.nodeStatus.nodeStatusVisible = true; let params = { trninr: trninr } let res = await Api.post("/public/quesel/getAllOreList", params); if (res.respCode == SUCCESS) { this.activities = res.data; } }, } }; </script> <style scoped lang="less"> .messageLabel { /deep/ .el-form-item__label { text-align: left; font-weight: bold; font-size: 15px; color: #1561e0; width: auto !important; } } #business_container { .eContainer { .c-page-container-div { .eibs-tab { /deep/ .el-form { height: calc(100% - 64px)!important; } } } } } .eibs-tab { /deep/ .el-divider--horizontal { margin-top: 10px; } /deep/ .el-form-item__label { text-align: left; font-weight: bold; } /deep/ .el-col { .el-divider--horizontal { margin-top: 5px; } } /deep/ .el-form { overflow: auto!important; margin-bottom: 0!important; .el-form-item { margin-bottom: 10px; } } /deep/ .el-form-item__label{ padding-right: 15px!important; } //.mylabel{ // width: 155px!important; //} //.el-form-item .mylabel .el-form-item--small .el-form-item__label .new-style { // width: 155px!important; //} .btn-wrap { padding: 10px 0px; display: flex; justify-content: center; background: #fff; box-shadow: var(--box-shadow); } } .fot{ position: fixed; bottom: 0; width: 100%; line-height: var(--footer-height); color: #fff; } </style>