<template> <el-row> <el-card style="background-color: #F5F7FA"> <!-- 搜索区域--> <el-row class="toolbar"> <el-col :span="5"> <el-input v-model="queryInfo.waybillNum" prefix-icon="el-icon-search" size="small" placeholder="主单号" clearable> <template slot="prepend">主单号</template> </el-input> </el-col> <el-col :span="5" style="margin-left: 10px"> <el-input v-model="queryInfo.hbs_serial_number" prefix-icon="el-icon-search" size="small" placeholder="分单号" clearable> <template slot="prepend">分单号</template> </el-input> </el-col> <el-col :span="5" style="margin-left: 10px"> <el-input v-model="queryInfo.opter" prefix-icon="el-icon-search" size="small" placeholder="操作代理人" clearable> <template slot="prepend">代理人</template> </el-input> </el-col> <el-col :span="5" style="margin-left: 10px"> <el-button type="primary" icon="el-icon-search" size="small" @click="getList()"> 查询 </el-button> <!-- <el-button type="success" icon="el-icon-edit" size="small" @click="applyAdd()">新增</el-button>--> </el-col> </el-row> <!-- 列表区域--> <el-row> <template> <el-table :data="tableData" border :cell-style="{textAlign:'center'}" style="border-radius: 10px 10px 0px 0px;line-height: 25px" :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small" > <el-table-column prop="waybillNum" label="主单号"> </el-table-column> <el-table-column prop="hbs_serial_number" label="分单号"> </el-table-column> <el-table-column prop="opter" label="代理人"> </el-table-column> <el-table-column prop="origin" label="起始站"> </el-table-column> <el-table-column prop="destination" label="目的站"> </el-table-column> <el-table-column prop="quantity_picecs" label="件数"> </el-table-column> <el-table-column prop="quantity_weight" label="重量"> </el-table-column> <el-table-column prop="cariier" label="承运人"> </el-table-column> <el-table-column prop="flightNumber" label="航班号"> </el-table-column> <el-table-column prop="day" label="航班日期"> </el-table-column> <el-table-column fixed="right" label="操作" width="160"> <template slot-scope="scope"> <el-button type="success" size="mini" @click="applyEdit(scope.row)">编辑</el-button> <!-- <el-button type="danger" size="mini" @click="applyDel(scope.row)">删除</el-button>--> </template> </el-table-column> </el-table> </template> </el-row> <el-row style="margin-top: 10px" class="toolbar"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pageNum" :page-size="queryInfo.pageSize" :page-sizes="[10, 50, 100, 500]" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </el-row> <el-row> <el-dialog :title="dialogMap[dialogApply]" :visible.sync="apply_dialog" width="50%" > <el-form :model="addForm" :rules="rules" ref="addForm" style="margin-top: 40px"> <el-row> <el-col :span="11"> <el-form-item label=" " :label-width="formLabelWidth" prop="billTypeName"> <el-input v-model="addForm.billTypeName" autocomplete="off" size="small" style="width: 260px"> <template slot="prepend">费用类别名称</template> </el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label=" " :label-width="formLabelWidth" prop="billRateUnit"> <el-input v-model="addForm.billRateUnit" autocomplete="off" size="small" style="width: 260px"> <template slot="prepend">计费单位</template> </el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label=" " :label-width="formLabelWidth" prop="billRate"> <el-input v-model="addForm.billRate" autocomplete="off" size="small" style="width: 260px"> <template slot="prepend">费率</template> </el-input> </el-form-item> </el-col> </el-row> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="apply_dialog = false" size="small">取 消</el-button> <el-button type="primary" @click="dialogApply==='create'?add():edit()" size="small">提 交</el-button> </div> </el-dialog> </el-row> </el-card> </el-row> </template> <script> import {selectList,selectByKey} from '../../api/remote_interface/byont_import'; export default { name: "Telegram", data() { return { queryInfo: { waybillNum:'', hbs_serial_number:'', opter:'', // 当前页数 pageNum: 1, // 每页大小 pageSize: 10, }, total: 0, tableData:[], dialogMap: { update: '编辑', create: '新增' }, dis: undefined, dialogApply: 'update', apply_dialog: false, addForm: { billTypeName: '', billTypeId: '', billRateUnit: '', billRate: '', }, formLabelWidth: '220px', rules: { billTypeName: [ { required: true, message: '必填', trigger: 'change' } ], }, } }, methods: { handleCurrentChange(val) { this.queryInfo.pageNum = val this.getList() }, handleSizeChange(val) { this.queryInfo.pageSize = val this.getList() }, getList() { const _this = this selectList(this.queryInfo).then((response) => { const res = response.data 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()) }) }, // 打开编辑 applyEdit(row) { this.$router.push({ path:'/Way', query:{id:row.id} }) }, // 编辑功能 edit() { // 进行表单的预验证 this.$refs.addForm.validate(valid => { // 未通过,表单预校验 if (!valid) return selectByKey(this.addForm).then((response) => { // console.log(row) const res = response.data if (res.code != '200') { return this.$message.error(res.msg) } this.$message.success(res.msg) // 隐藏对话框 this.apply_dialog = false // 刷新列表 this.getList() }).catch(error => { this.$message.error(error.toString()) }) }) }, }, mounted() { this.getList(); } } </script> <style scoped> .toolbar{ height: 60px; background-color: white; /*line-height: 60px;*/ vertical-align: middle; border-radius: 5px 5px 5px 5px; padding: 15px 0 0 20px; box-shadow: 0px 5px 5px #e5e8eb; } .my-text-area .prepand{ float: left; width:89px; height: 28px; font-size: 12px; line-height: 28px; } </style> <style> .my-text-area .el-textarea__inner{ min-height: 28px; height: 28px; border-bottom-left-radius: 0; border-top-left-radius: 0; } </style>