<template> <div class="app-container" style="padding-top: 1px"> <div class="top_tap" > <div style="height: 90px; display: flex; justify-content: space-between;"> <div style="height: 100%; display: flex; justify-content: space-between;"> <div style="height: 100%; width: 70%; display: flex; justify-content: space-between;"> <div class="box"> <span style="font-size: 26px;color: #0DC291;font-weight: bold;">{{numberOfTanks}}</span> <span style="display: flex;font-size: 14px;font-weight: bold"> <div style="background-color: #0DC291;width: 10px;height: 10px;border-radius: 50%;margin-top: 6px;margin-right: 10px"></div> 油罐数量 </span> </div> <div class="box" > <span style="font-size: 26px;color: #00CAFF;font-weight: bold" >{{inventoryVolume}}</span> <span style="display: flex;font-size: 14px;font-weight: bold"> <div style="background-color: #00CAFF;width: 10px;height: 10px;border-radius: 50%;margin-top: 6px;margin-right: 10px"></div> 盘点升数 </span> </div> <div class="box"> <span style="font-size: 26px;color: #F44522;font-weight: bold">{{stockDifference}}</span> <span style="display: flex;font-size: 14px;font-weight: bold"> <div style="background-color: #F44522;width: 10px;height: 10px;border-radius: 50%;margin-top: 6px;margin-right: 10px"></div> 库存差异(L) </span> </div> <div class="box"> <span style="font-size: 26px;color: #F4C622;font-weight: bold">{{profitLossAmount}}</span> <span style="display: flex;font-size: 14px;font-weight: bold"> <div style="background-color: #F4C622;width: 10px;height: 10px;border-radius: 50%;margin-top: 6px;margin-right: 10px"></div> 盈亏总额(元) </span> </div> </div> <div style="height: 100%; width: 30%; display: flex; flex-direction: column; justify-content: space-between;"> <el-form ref="myForm" label-width="100px"> <el-form-item label="盘点单号"> <el-input v-model="inventoryNo.inventoryNo" @change="saveJudgment" :disabled="numberInput" style="width: 220Px"> <el-button slot="append" @click="refresh()" icon="el-icon-refresh"></el-button> </el-input> </el-form-item> <el-form-item label="盘点时间" > <el-date-picker style="width: 220Px" v-model="inventoryNo.inventoryDate" @change="saveJudgment" :disabled="numberInput" type="date" placeholder="选择日期"> </el-date-picker> </el-form-item> </el-form> </div> </div> <div style="height: 100%; width: 30%; display: flex; align-items: center; justify-content: flex-end;"> <el-button type="primary" @click="cancelPurchase" v-if="state=='yzf' || state=='qrts'">关闭</el-button> <el-button @click="cancelPurchase" v-else>取消</el-button> <el-button type="success" v-if="state=='await'" :disabled="saveFlag" @click="saveInventory()">保存</el-button> <el-button type="danger" v-if="state =='await' || state=='ysh'" :disabled="voidFlag" @click="abolition()">作废</el-button> <el-button type="primary" v-if="state=='await'" :disabled="auditFlag" @click="audit">保存并审核</el-button> <el-button type="primary" v-if="state=='ysh'" :disabled="auditFlag" @click="storage">盘点并处理库存</el-button> </div> </div> </div> <div class="center_tap" > <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <!-- <span style="font-size: 20px;font-weight: bold">盘点详情</span>--> </el-col> <el-col :span="1.5" style="width: 50%"> <!-- <el-alert--> <!-- title="为了保证盘点我准确性,请在非收银期间段内进行盘点、否则会导致盘点信息异常"--> <!-- :closable="false"--> <!-- type="error">--> <span style="color: red">● 为了保证盘点我准确性,请在非收银期间段内进行盘点、否则会导致盘点信息异常</span> <!-- </el-alert>--> </el-col> <el-col :span="15" style="text-align: right;width: 50%"> <el-button v-if="state =='await'" type="primary" icon="el-icon-plus" @click="orderAdd" >添加盘点油罐</el-button> </el-col> <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>--> </el-row> <el-table ref="tables" v-loading="loading" :data="orderList" :default-sort="defaultSort"> <el-table-column align="center" type="index" label="序号"></el-table-column> <el-table-column label="油罐名称" align="center" prop="tankName"/> <el-table-column label="油品-油号" align="center" prop="numberName"/> <el-table-column label="供应商" align="center" prop="numberName"/> <el-table-column label="上次采购信息" align="center" prop="numberName"> <el-table-column label="采购总价(元)" align="center" prop="theTotalPurchasePrice"> <template slot-scope="scope"> {{scope.row.theTotalPurchasePrice?scope.row.theTotalPurchasePrice:'--'}} </template> </el-table-column> <el-table-column label="采购油量(L)" align="center" prop="theAmountOfOilPurchased"/> <el-table-column label="采购单价(元)" align="center" prop="purchaseUnitPrice"/> </el-table-column> <el-table-column label="销售信息" align="center" prop="numberName"> <el-table-column label="销售总油量(L)" align="center" prop="totalOilVolumeSold"> <template slot-scope="scope"> {{scope.row.totalOilVolumeSold?scope.row.totalOilVolumeSold:'--'}} </template> </el-table-column> <!-- <el-table-column label="销售售出价" align="center" prop="numberName"/>--> <el-table-column label="销售总金额(元)" align="center" prop="theTotalSalePrice"> <template slot-scope="scope"> {{scope.row.theTotalSalePrice?scope.row.theTotalSalePrice:'--'}} </template> </el-table-column> </el-table-column> <el-table-column label="当前剩余油量(元/吨)" align="center" prop="currentInventoryVolume"> <template slot-scope="scope"> {{scope.row.totalPrice?scope.row.totalPrice:'--'}}/{{scope.row.theTotalSalePrice?scope.row.theTotalSalePrice:'--'}} </template> </el-table-column> <!-- <el-table-column label="当前剩余油量总价" align="center" prop="totalPrice"/>--> <el-table-column label="当前均价(元/L)" align="center" prop="currentAveragePrice" /> <el-table-column label="当前库存(L)" align="center" prop="currentInventoryVolume"/> <el-table-column label="盘点升数(L)" align="center" prop="inventoryVolume" width="150px"> <template slot-scope="scope"> <el-input-number :disabled="numberInput" v-model="scope.row.inventoryVolume" @change="change(scope.row)" controls-position="right" :min="0" :max="100000000" :step="1" :precision="2" style="max-width: 100%"></el-input-number> </template> </el-table-column> <el-table-column label="库存差异(L)" align="center" prop="stockDifference"/> <el-table-column label="盈亏金额(元)" align="center" prop="profitLossAmount"/> <el-table-column v-if="state =='await'" label="操作" align="center" class-name="small-padding fixed-width"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-edit" @click="orderDel(scope.row)" >删除</el-button> </template> <!-- v-hasPermi="['']"--> </el-table-column> </el-table> <!-- <pagination--> <!-- v-show="total>0"--> <!-- :total="total"--> <!-- :page.sync="queryParams.page"--> <!-- :limit.sync="queryParams.pageSize"--> <!-- @pagination="getList"--> <!-- />--> </div> <!-- 添加采购油品--> <el-dialog center :title="title" :visible.sync="open" width="800px" append-to-body :close-on-click-modal="false"> <el-container> <el-header style=""> <el-form ref="tankForm" :model="tankForm"> <el-row :gutter="24"> <el-col :span="8"> <el-form-item label=""> <el-select v-model="tankForm.numberId" placeholder="请选择油品油号" style="width:100%" @change="chooseOilNumber()" clearable> <el-option v-for="option in selectOilTypeByPrice" :key="option.numberId" :label="option.oilType +' '+option.oilName" :value="option.numberId" ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label=""> <el-input v-model="tankForm.tankName" placeholder="请输入油罐名称"></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-button type="primary" @click="inquireTank()" icon="el-icon-search" style="float:right; margin-right: 0px;">搜索</el-button> </el-col> </el-row> </el-form> </el-header> <el-main> <el-table ref="tables" v-loading="loading" :data="tankList" @selection-change="handleSelectionChange" border :default-sort="defaultSort"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column label="油罐名称" align="center" prop="tankName"/> <el-table-column label="油品-油号" align="center" prop="oilNumber"/> <el-table-column label="当前均价(元/L)" align="center" prop="discountedPrice" /> <el-table-column label="当前库存(L)" align="center" prop="storedQuantity"/> </el-table> </el-main> </el-container> <div class="dialog-footer" style="text-align: center"> <el-button @click="cancel">取 消</el-button> <el-button type="primary" @click="addOrder">确 定</el-button> </div> </el-dialog> </div> </template> <script> import { getSuppliersListApi2, } from "@/api/oilConfig/oilSuppliers"; import { editInventoryApi, getInventoryOrderApi, insertInventoryApi, auditInventoryApi, storageInventoryApi, insertInventoryOrderApi, updateInventoryOrderApi, updateInventoryApi, selectList2Api, insertBatchInventoryOrderApi, getInventoryByIdApi, disposeBatchApi, delInventoryOrderApi, abolitionInventoryApi, getPurchaseByTankIdApi } from "@/api/oilConfig/oilInventory"; import {getOilNameListApi} from "@/api/oilPrice"; import {selectTankByNumberApi} from "@/api/oilConfig/oilGuns"; import {BigNumber} from "bignumber.js"; import {getAuditPremApi} from "@/api/oilConfig/staff"; export default { name: "orderOrder", data() { return { orderList:[], orderForm:{ id: null, purchaseId: null, numberId: null, tankId: null, supplierId: null, productDensity: null, purchaseWeight: null, purchasePrice: null, totalAmount: null, purchaseVolume: null, storeId: null, createTime: null, updateTime: null, createBy: null, updateBy: null, preInboundInventory: null, discountedPrice: null }, purchaseId: null, purchaseOrderNumber: null, // 进货单号 incomingTime: '', //进货时间 state: 'await', numberInput: false, numberOfTanks: 0, // 油罐数量 inventoryVolume: 0, // 盘点升数 stockDifference: 0, // 库存差异 profitLossAmount: 0,// 盈亏总额 tankList:[], // tankForm: { numberId:'', tankName:'' }, inventoryId:'', // 盘点id selectOilTypeByPrice: [], // 油品 multipleSelection: [], numberList:[], suppliersList:[], saveFlag:false, auditFlag:false, voidFlag:false, storageFlag:true, // 弹出框标题 title:'', // 显示搜索条件 showSearch: true, disableInput: false, // 默认不禁用 // 是否显示弹出层 open: false, // 总条数 total: 0, // 查询参数 queryParams: { supplierId: '', inventoryId: null, page:null, pageSize:null }, // 遮罩层 loading: false, // 默认排序 defaultSort: {prop: 'createTime', order: 'descending'}, // 表单校验 rules: { supplierName: [ { required: true, message: "供应商名称不能为空", trigger: "blur" }, ], }, inventoryNo: { inventoryNo: null, inventoryDate: null }, } }, async created() { // console.log("yourParamKey",this.$route.query.purchaseId) // this.purchaseId = this.$route.query.purchaseId; // console.log("yourParamKey2",this.$route.query.purchaseId) // // if (this.$route.query.purchaseId == null) { // this.queryParams.purchaseId = -parseInt(new Date().getTime())% 100000000; // this.purchaseId = -parseInt(new Date().getTime()) % 100000000; // } this.state = this.$route.query.state; if ( this.state == null) { this.state = 'await' } if (this.state=='await') { this.numberInput = false }else { this.numberInput = true } console.log(this.state,366) this.inventoryNo.inventoryNo = this.$route.query.inventoryNo; // this.inventoryNo.inventoryDate = this.$route.query.inventoryDate; this.queryParams.inventoryId = this.$route.query.inventoryId; this.inventoryId = this.$route.query.inventoryId; this.$route.query.inventoryTime; if (this.$route.query.inventoryDate != null) { this.inventoryNo.inventoryDate = new Date(parseInt(this.$route.query.inventoryDate)) } if (this.inventoryNo.inventoryDate == null) { this.inventoryNo.inventoryDate = new Date() } if (this.inventoryNo.inventoryNo == null) { this.refresh(); } await this.getList(); this.JudgmentButton(); }, methods: { // 返回页面 cancelPurchase() { this.$router.back() }, getList(){ this.loading = true; getInventoryOrderApi(this.addDateRange(this.queryParams, this.dateRange)).then(response => { this.orderList = response.data.records; this.total = response.data.total; this.numberOfTanks = response.data.total; // 总数计算 this.sumMethod(response.data.records); }) this.loading = false; }, // 根据id获取盘点的详细信息 getInventoryById() { let this_ = this let data = 0; getInventoryByIdApi(data).then(response=>{ this_.inventoryVolume= response.data.inventoryVolume, this_.stockDifference= response.data.stockDifference, this_.profitLossAmount= response.data.profitLossAmount }).catch() }, // 计算header数据 sumMethod(data) { console.log("sumMethod",data) let this_ = this this_.inventoryVolume = new BigNumber(0), this_.stockDifference = new BigNumber(0), this_.profitLossAmount = new BigNumber(0), data.forEach(da => { if (da.inventoryVolume != null) { this_.inventoryVolume= this_.inventoryVolume.plus(da.inventoryVolume) } if (da.stockDifference != null) { this_.stockDifference= this_.stockDifference.plus(da.stockDifference) } if (da.profitLossAmount != null) { this_.profitLossAmount= this_.profitLossAmount.plus(da.profitLossAmount) } }) }, // 改变数字时 change(data) { // // 库存差异升数 // data.stockDifference = data.inventoryVolume - data.currentInventoryVolume // // 盈亏金额 // data.profitLossAmount = data.stockDifference * data.currentAveragePrice // 库存差异升数 const stockDifference = new BigNumber(data.inventoryVolume).minus(data.currentInventoryVolume); // 盈亏金额 const profitLossAmount = stockDifference.times(data.currentAveragePrice).decimalPlaces(2).toNumber(); // 将结果存回 data 对象 data.stockDifference = stockDifference.toNumber(); data.profitLossAmount = profitLossAmount; this.sumMethod(this.orderList) }, // 查询油罐 inquireTank() { this.getTankList()/**/ }, // 选择油品号之后 chooseOilNumber(data) { this.getTankList() // this.selectTankByNumber(this.orderForm.numberId); }, // 油罐列表 getTankList() { selectList2Api(this.tankForm).then(response => { this.tankList = response.data }) }, // 添加采购油品 orderAdd() { // 初始化 this.open = true; this.title = "添加盘点油罐" this.getOilNameList() // this.selectSuppliers() }, // 添加油罐到订单列表 async addOrder () { let this_ = this // 油罐列表清除数据 this_.tankList = [] this_.tankForm = {} for (const mul of this.multipleSelection) { // this.multipleSelection.forEach(mul=>{ let isDuplicate = false if (this.orderList.length > 0) { isDuplicate = this.orderList.some(order => order.tankId === mul.id); } if (isDuplicate) { this.$message({ message: '有重复油罐,请重新选择', type: 'warning' }); this.multipleSelection = [] return; } let getPurchaseByTankIdData // 根据油罐id查询数据 await getPurchaseByTankIdApi({tankId:mul.id}).then(res=>{ getPurchaseByTankIdData = res.data }) let now = { tankId: mul.id, tankName: mul.tankName, numberId: mul.numberId, numberName: mul.oilNumber, inventoryVolume:mul.storedQuantity, currentAveragePrice: mul.discountedPrice, currentInventoryVolume: mul.storedQuantity, totalPrice: mul.totalPrice, theTotalPurchasePrice:getPurchaseByTankIdData.theTotalPurchasePrice, // 采购总价 theAmountOfOilPurchased:getPurchaseByTankIdData.theAmountOfOilPurchased, // 采购油量 purchaseUnitPrice:getPurchaseByTankIdData.purchaseUnitPrice, // 采购单价 totalOilVolumeSold:getPurchaseByTankIdData.totalOilVolumeSold, // 销售总油量 theTotalSalePrice:getPurchaseByTankIdData.theTotalSalePrice, // 销售总价 // totalPrice:getPurchaseByTankIdData.purchaseUnitPrice*getPurchaseByTankIdData.totalOilVolumeSold // 当前剩余油量总价 } this_.orderList.push(now) // }) } this.multipleSelection = [] this_.open = false this.numberOfTanks = this.numberOfTanks+1 this_.sumMethod(this_.orderList); }, // 表格选择器 handleSelectionChange(val) { this.multipleSelection = val; }, // 删除dom orderDel(data) { if (data.id != null) { delInventoryOrderApi(data).then(res=>{ }) } const index = this.orderList.indexOf(data); // 查找要删除的对象的索引 if (index !== -1) { this.orderList.splice(index, 1); // 使用splice方法删除对象 } this.numberOfTanks = this.numberOfTanks-1 }, // 提交 submitForm: function() { // this.$refs["form"].validate(valid => { // if (valid) { // // 密度计算 // this.orderForm.purchaseVolume = ((this.orderForm.purchaseWeight*(1000))/this.orderForm.productDensity).toFixed(2); // // 计算小计价格 // this.orderForm.totalAmount = this.orderForm.purchasePrice * this.orderForm.purchaseWeight // // 折合单价 // this.orderForm.discountedPrice = (this.orderForm.purchaseVolume / this.orderForm.totalAmount).toFixed(2); // // 复制id // this.orderForm.purchaseId = this.purchaseId // if (!this.orderForm.id) { // insertPurchaseOrderApi(this.orderForm).then(response => { // this.$modal.msgSuccess("新增成功"); // this.open = false; // this.saveJudgment() // this.getList(); // }); // } else { // updatePurchaseOrderApi(this.orderForm).then(response => { // this.$modal.msgSuccess("修改成功"); // this.open = false; // this.getList(); // }); // } // } // }); }, // 取消 cancel() { this.open = false; }, edit() { }, // 选择油罐添加密度 chooseTank(data){ // // 根据id找密度 // this.tankList.forEach(su=>{ // if (data == su.id) { // this.orderForm.productDensity = su.oilDensity // } // }) }, // 查询所有的油品 getOilNameList() { let this_=this getOilNameListApi().then( response => { let list = response.data this_.selectOilTypeByPrice = list }); }, // 根据油品查询油罐 selectTankByNumber(data) { let numberId = data selectTankByNumberApi(numberId).then(response => { this.tankList = response.data; }); }, // 查询所有供应商 selectSuppliers() { getSuppliersListApi2().then(response => { this.suppliersList = response.data; }); }, // 刷新订单编号 refresh() { var timestamp = new Date().getTime(); var min = 100; // 最小的四位数是 1000 var max = 999; // 最大的四位数是 9999 var randomFourDigitNumber = Math.floor(Math.random() * (max - min + 1)) + min; // this.purchaseOrderNumber = timestamp+randomFourDigitNumber.toString(); this.inventoryNo.inventoryNo = timestamp+randomFourDigitNumber.toString(); }, // 保存订单信息 async saveInventory(){ let this_ = this if (this_.inventoryNo.inventoryNo == null){ this.$modal.msgSuccess("请先填写盘点号"); return -1; } if (this_.inventoryNo.inventoryDate == null){ this.$modal.msgSuccess("请先填写时间"); return -1; } if ( this_.orderList <= 0){ this.$modal.msgSuccess("请先选择至少一个油罐"); return -1; } let inventoryForm = { inventoryNumber : this_.inventoryNo.inventoryNo, inventoryTime : this_.inventoryNo.inventoryDate, inventoryVolume : parseFloat(this_.inventoryVolume), stockDifference : parseFloat(this_.stockDifference), profitLossAmount : parseFloat(this_.profitLossAmount) } // 处理列表 let oilInventoryOrderList = [] // 判断是保存还是修改 if (this_.inventoryId != null) { // 修改 inventoryForm.id = this_.inventoryId await updateInventoryApi(inventoryForm).then(response=>{ // 处理列表 // disList.inventoryId= this_.inventoryId this_.orderList.forEach(ord=>{ let now = { id: ord.id, inventoryId: this_.inventoryId, tankId: ord.tankId, numberId: ord.numberId, currentAveragePrice: ord.currentAveragePrice, currentInventoryVolume: ord.currentInventoryVolume, profitLossAmount: ord.profitLossAmount, stockDifference: ord.stockDifference, inventoryVolume: ord.inventoryVolume } oilInventoryOrderList.push(now) }) disposeBatchApi(oilInventoryOrderList).then(response=> { // 保存成功 this.$modal.msgSuccess("保存成功"); // this.getList() this.$router.push({ path: '/oilConfig/oilInventory/list', query: { } }); }) }) } else { // 新增 console.log("this_.orderList",inventoryForm) insertInventoryApi(inventoryForm).then(response=>{ // disList.inventoryId= response.data.id this_.inventoryId = response.data.id this_.state = response.data.status this_.inventoryNo.inventoryNo = response.data.inventoryNumber, // this_.inventoryNo.inventoryDate = response.data.inventoryTime, this_.orderList.forEach(ord=>{ let now = { id: ord.id, inventoryId: response.data.id, tankId: ord.tankId, numberId: ord.numberId, currentAveragePrice: ord.currentAveragePrice, currentInventoryVolume: ord.currentInventoryVolume, profitLossAmount: ord.profitLossAmount, stockDifference: ord.stockDifference, inventoryVolume: ord.inventoryVolume } oilInventoryOrderList.push(now) }) disposeBatchApi(oilInventoryOrderList).then(response=> { // 保存成功 this.$modal.msgSuccess("保存成功"); this.getList() this.$router.push({ path: '/oilConfig/oilInventory/list', query: { } }); }) // 新增列表之后重新刷新 // this.$router.push({ path: '/oilInventory/order', query: { // inventoryId: this_.inventoryId, // inventoryNo: this_.inventoryNo.inventoryNo, // inventoryDate: this_.inventoryNo.inventoryDate, // state: this_.status // } }); // }) }) } }, // 判断是否可以保存 saveJudgment(){ // if (this.inventoryNo.inventoryNo != null && this.inventoryNo.inventoryDate != null && this.orderList.length > 0) { // this.saveFlag = false; // } }, // 页面跳转 goToAbout() { this.$router.push('/oilConfig/oilInventory/list'); }, // 搜索按钮操作 handleQuery() { this.queryParams.page = 1; this.getList(); }, // 判断按钮是否可用 async JudgmentButton(){ let judgmentPermissions1 = await this.judgmentPermissions("盘点审核"); if (judgmentPermissions1 > 0){ this.auditFlag=false, this.voidFlag=false }else { this.auditFlag=true, this.voidFlag=true } let judgmentPermissions2 = await this.judgmentPermissions("盘点入库"); if (judgmentPermissions2 > 0){ this.storageFlag = false }else { this.storageFlag = true } let judgmentPermissions3 = await this.judgmentPermissions("盘点废止"); if (judgmentPermissions3 > 0){ this.voidFlag=false }else { this.voidFlag=true } }, // 判断权限 async judgmentPermissions(data) { let fil ={ auditPrem:data } return await getAuditPremApi(fil).then(res => { return res.data }); }, // 保存并审核 audit(){ // 保存 let number = this.saveInventory(); if (number != -1) { // 审核 let fil ={ id: this.inventoryId } console.log(" id: this.purchaseId",fil) auditInventoryApi(fil).then(res => { if (res.data) { this.state = 'ysh' this.$modal.msgSuccess("审核成功"); this.goToAbout() } else { this.$modal.msgWarning("暂无审核权限"); } }) } }, // 入库 storage() { let this_ = this; if (this_.inventoryNo.inventoryNo == null) { this.$modal.msgWarning("请先选择进货单号"); return; }else if (this_.inventoryNo.inventoryDate==null) { this.$modal.msgWarning("请先选择进货时间"); return; } this.$confirm('确认后盘点中的对应油品入库油罐库存将发生变化,且不可逆,确认已按照盘点数量入库吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { // 审核 let fil ={ id: this.inventoryId } storageInventoryApi(fil).then(res => { this.state = 'qrts' this.$modal.msgWarning("入库成功"); }) }).catch(() => { this.$message({ type: 'info', message: '已取消' }); }); }, // 作废 abolition(){ if (this.inventoryId < 0) { this.$modal.msgWarning("数据未保存,不可废弃"); return; } this.$confirm('确定要废弃盘点好的数据吗', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { let fil ={ id: this.inventoryId } abolitionInventoryApi(fil).then(res => { if (res.data) { this.state = 'yzf' this.$modal.msgWarning("作废成功"); this.goToAbout() } else { this.$modal.msgWarning("暂无作废权限"); } }) }).catch(() => { this.$message({ type: 'info', message: '已取消' }); }) }, } } </script> <style scoped lang="scss"> .app-container{ width: 100%; height: 100%; background: #f6f8f9; margin: 0px 0px 0px 0px; padding: 0px; } .box { height: 80%; width: 212px; margin-right: 10px; background: #FFFFFF; border: 1px solid #FF9655; border-radius: 10px; display: flex; flex-direction: column; justify-content: center; align-items: start; padding-left: 20px; } .top_tap{ border-radius: 8px; background: #fff; box-sizing: border-box; padding: 15px; margin: 10px; } .center_tap{ border-radius: 8px; background: #fff; box-sizing: border-box; padding: 15px; margin: 10px; height: 80vh; } </style>