<template>
<div class="HotelProductEdit">
<div class="HotelProductEdit_header">
<div>酒店报价编辑</div>
<div>
<div @click="editSave">保存</div>
</div>
</div>
<div class="HotelProductEdit_tableBox">
<el-form :model="msg" :rules="rules" :inline="true" :show-message="false" ref="hotelProductForm">
<table class="HotelProductEdit_table" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
<thead>
<tr>
<th width="20%"></th>
<th width="30%"></th>
<th width="20%"></th>
<th width="30%"></th>
</tr>
</thead>
<tbody>
<!-- 库存 -->
<tr>
<td colspan="4" class="text_title">库存</td>
</tr>
<tr>
<td class="text_tab">库存类型：</td>
<td>
<el-form-item label="" prop="InventoryType">
<el-select v-model="msg.InventoryType" :placeholder="$t('pub.pleaseSel')">
<el-option label="红日" value="1"></el-option>
<el-option label="旺季" value="2"></el-option>
<el-option label="平季" value="3"></el-option>
<el-option label="淡季" value="4"></el-option>
</el-select>
</el-form-item>
</td>
<td class="text_tab">日期选择方式：</td>
<td>
<el-form-item label="" prop="DayType">
<el-select v-model="msg.DayType" :placeholder="$t('pub.pleaseSel')" @change="dayTypeChange">
<el-option label="按年" value="1"></el-option>
<el-option label="按月" value="2"></el-option>
<el-option label="按周" value="3"></el-option>
<el-option label="自定义" value="4"></el-option>
</el-select>
</el-form-item>
</td>
</tr>
<tr>
<td class="text_tab">日期选择：</td>
<td colspan="3" class="HotelProductEdit_date">
<div v-show="msg.DayType==='1'||msg.DayType==='3'">
<em>年</em>
<el-form-item label="" prop="Year">
<el-date-picker v-model="msg.Year" type="year" value-format="yyyy" placeholder="选择年"></el-date-picker>
</el-form-item>
</div>
<div v-show="msg.DayType==='2'">
<em>月</em>
<el-form-item label="" prop="Month">
<el-date-picker v-model="msg.Month" type="month" value-format="yyyy-MM" placeholder="选择月"></el-date-picker>
</el-form-item>
</div>
<div v-show="msg.DayType==='3'">
<em>月</em>
<el-form-item label="" prop="Month">
<el-select v-model="msg.Month" placeholder="请选择月">
<el-option label="一月" value="01"></el-option>
<el-option label="二月" value="02"></el-option>
<el-option label="三月" value="03"></el-option>
<el-option label="四月" value="04"></el-option>
<el-option label="五月" value="05"></el-option>
<el-option label="六月" value="06"></el-option>
<el-option label="七月" value="07"></el-option>
<el-option label="八月" value="08"></el-option>
<el-option label="九月" value="09"></el-option>
<el-option label="十月" value="10"></el-option>
<el-option label="十一月" value="11"></el-option>
<el-option label="十二月" value="12"></el-option>
</el-select>
</el-form-item>
</div>
<div v-show="msg.DayType==='3'">
<em>周</em>
<el-form-item label="" prop="Week">
<el-select v-model="msg.Week" placeholder="请选择周">
<el-option label="星期天" value="0"></el-option>
<el-option label="星期一" value="1"></el-option>
<el-option label="星期二" value="2"></el-option>
<el-option label="星期三" value="3"></el-option>
<el-option label="星期四" value="4"></el-option>
<el-option label="星期五" value="5"></el-option>
<el-option label="星期六" value="6"></el-option>
</el-select>
</el-form-item>
</div>
<div v-show="msg.DayType==='4'">
<el-form-item label="" prop="StartDate">
<el-date-picker v-model="msg.StartDate" type="date" placeholder="选择开始时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
<em>-</em>
<el-form-item label="" prop="EndDate">
<el-date-picker v-model="msg.EndDate" type="date" placeholder="选择结束时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
</div>
</td>
</tr>
<tr>
<td class="text_tab">库存：</td>
<td colspan="3">
<el-form-item label="" prop="Inventory">
<el-input-number v-model="msg.Inventory" :min="0"></el-input-number>
</el-form-item>
</td>
</tr>
<!-- 成本价 -->
<tr>
<td colspan="4" class="text_title">成本价录入</td>
</tr>
<tr>
<td class="text_tab">标准间成本价：</td>
<td>
<el-form-item label="" prop="CostPrice">
<el-input-number v-model="msg.CostPrice" :precision="2" :min="0"></el-input-number>
</el-form-item>
</td>
<td class="text_tab">大床间成本价：</td>
<td>
<el-form-item label="" prop="BidroomPrice">
<el-input-number v-model="msg.BidroomPrice" :precision="2" :min="0"></el-input-number>
</el-form-item>
</td>
</tr>
<tr>
<td class="text_tab">单人间成本价：</td>
<td>
<el-form-item label="" prop="SingleroomPrice">
<el-input-number v-model="msg.SingleroomPrice" :precision="2" :min="0"></el-input-number>
</el-form-item>
</td>
<td class="text_tab">小孩不占床成本价：</td>
<td>
<el-form-item label="" prop="ChildNotBedPrice">
<el-input-number v-model="msg.ChildNotBedPrice" :precision="2" :min="0"></el-input-number>
</el-form-item>
</td>
</tr>
<tr>
<td class="text_tab">加床成本价：</td>
<td>
<el-form-item label="" prop="AddBedPrice">
<el-input-number v-model="msg.AddBedPrice" :precision="2" :min="0"></el-input-number>
</el-form-item>
</td>
<td class="text_tab">司机房成本价：</td>
<td>
<el-form-item label="" prop="DriverRoomPrice">
<el-input-number v-model="msg.DriverRoomPrice" :precision="2" :min="0"></el-input-number>
</el-form-item>
</td>
</tr>
<tr>
<td class="text_tab">导游房成本价：</td>
<td>
<el-form-item label="" prop="GuideRoomPrice">
<el-input-number v-model="msg.GuideRoomPrice" :precision="2" :min="0"></el-input-number>
</el-form-item>
</td>
<td class="text_tab">成本币种：</td>
<td>
<el-form-item label="" prop="CurrencyId">
<el-select v-model="msg.CurrencyId" :placeholder="$t('pub.pleaseSel')" style="width:100px;" @change="currencyChange">
<el-option :label="$t('pub.unlimitedSel')" value='0'></el-option>
<el-option v-for="(item,index) in allCurrencyList" :key="index" :label="item.Name" :value="item.ID"></el-option>
</el-select>
</el-form-item>
<em>（汇率</em>
<el-form-item label="" prop="CurrentRate">
<el-input v-model="msg.CurrentRate" :placeholder="$t('hotel.hotel_CurrentRate')" style="width:80px;"></el-input>
</el-form-item>
<em>）</em>
</td>
</tr>
<!-- 加价 -->
<tr>
<td colspan="4" class="text_title">加价录入</td>
</tr>
<tr>
<td class="text_tab">周末加价：</td>
<td>
<el-form-item label="" prop="WeekendAddPrice">
<el-input-number v-model="msg.WeekendAddPrice" :precision="2" :min="0"></el-input-number>
</el-form-item>
</td>
<td class="text_tab">内部加价：</td>
<td>
<el-form-item label="" prop="InteriorAddPrice">
<el-input-number v-model="msg.InteriorAddPrice" :precision="2" :min="0"></el-input-number>
</el-form-item>
</td>
</tr>
<tr>
<td class="text_tab">B2B加价：</td>
<td>
<el-form-item label="" prop="B2BPrice">
<el-input-number v-model="msg.B2BPrice" :precision="2" :min="0"></el-input-number>
</el-form-item>
</td>
<td class="text_tab">B2C加价：</td>
<td>
<el-form-item label="" prop="B2CPrice">
<el-input-number v-model="msg.B2CPrice" :precision="2" :min="0"></el-input-number>
</el-form-item>
</td>
</tr>
<!-- 其他信息 -->
<tr>
<td colspan="4" class="text_title">其他信息</td>
</tr>
<tr>
<td class="text_tab">供应商：</td>
<td colspan="3">
<el-form-item label="" prop="Supplier">
<el-select v-model="msg.Supplier" :placeholder="$t('pub.pleaseSel')">
<el-option :label="$t('pub.unlimitedSel')" value='0'></el-option>
<el-option v-for="(item,index) in SupplierList" :key="index" :label="item.Name" :value="item.ID"></el-option>
</el-select>
</el-form-item>
</td>
</tr>
<tr>
<td class="text_tab">备注：</td>
<td colspan="3" style="padding: 10px 20px;">
<el-form-item label="" prop="Remark">
<el-input type="textarea" v-model="msg.Remark" :rows="2" :placeholder="$t('fnc.qsrneirong')" style="width: 755px;"></el-input>
</el-form-item>
</td>
</tr>
</tbody>
</table>
</el-form>
</div>
</div>
</template>
<script>
export default {
data () {
var emptyJudge = (rule, value, callback) => {
if (value.toString().trim()==='') {
this.$message.error(rule.message)
callback(new Error())
} else {
callback()
}
}
var numJudge = (rule, value, callback) => {
let regPos = /^\d+(\.\d+)?$/;
if (!regPos.test(value)) {
this.$message.error(rule.message)
callback(new Error())
} else {
callback()
}
}
var dateJudge = (rule, value, callback) => {
if (this.msg.Year === null) {
this.msg.Year = ''
}
if (this.msg.Month === null) {
this.msg.Month = ''
}
if (this.msg.DayType === '1') {
if (this.msg.Year.toString().trim() === '' && rule.field === 'Year') {
this.$message.error('请选择年')
callback(new Error())
} else {
callback()
}
} else if (this.msg.DayType === '2') {
if (this.msg.Month.toString().trim() === '' && rule.field === 'Month') {
this.$message.error('请选择月')
callback(new Error())
} else {
callback()
}
} else if (this.msg.DayType === '3') {
if (this.msg.Year.toString().trim() === '' && rule.field === 'Year') {
this.$message.error('请选择年')
callback(new Error())
} else if (this.msg.Week.toString().trim() === '' && rule.field === 'Week') {
this.$message.error('请选择周')
callback(new Error())
} else {
callback()
}
} else if (this.msg.DayType === '4') {
if (this.msg.StartDate.toString().trim() === '' && rule.field === 'StartDate') {
this.$message.error('请选择开始时间')
callback(new Error())
} else if (this.msg.EndDate.toString().trim() === '' && rule.field === 'EndDate') {
this.$message.error('请选择结束时间')
callback(new Error())
} else {
callback()
}
}
}
return {
loading: false,
msg: {
Hotel: '0',
Supplier: '',
Inventory: '0',
B2BPrice: '0',
B2CPrice: '0',
Remark: '',
CostPrice: '0',
CurrencyId: '',
CurrentRate: '',
StartDate: '',
EndDate: '',
InventoryType: '',
BidroomPrice: '0',
SingleroomPrice: '0',
ChildNotBedPrice: '0',
AddBedPrice: '0',
DriverRoomPrice: '0',
WeekendAddPrice: '0',
InteriorAddPrice: '0',
GuideRoomPrice: '0',
DayType: '4',
Year: '',
Month: '',
Week: ''
},
rules: {
InventoryType: { validator: emptyJudge, message: '请选择库存类型', trigger: 'blur' },
DayType: { validator: emptyJudge, message: '请选择日期选择方式', trigger: 'blur' },
Year: { validator: dateJudge, message: '请选择年', trigger: 'blur' },
Month: { validator: dateJudge, message: '请选择月', trigger: 'blur' },
Week: { validator: dateJudge, message: '请选择周', trigger: 'blur' },
StartDate: { validator: dateJudge, message: '请选择开始时间', trigger: 'blur' },
EndDate: { validator: dateJudge, message: '请选择结束时间', trigger: 'blur' },
Inventory: { validator: numJudge, message: '请输入库存', trigger: 'blur' },
CostPrice: { validator: numJudge, message: '请输入标准间成本价', trigger: 'blur' },
BidroomPrice: { validator: numJudge, message: '请输入大床间成本价：', trigger: 'blur' },
SingleroomPrice: { validator: numJudge, message: '请输入单人间成本价', trigger: 'blur' },
ChildNotBedPrice: { validator: numJudge, message: '请输入小孩不占床成本价', trigger: 'blur' },
AddBedPrice: { validator: numJudge, message: '请输入加床成本价', trigger: 'blur' },
DriverRoomPrice: { validator: numJudge, message: '请输入司机房成本价', trigger: 'blur' },
GuideRoomPrice: { validator: numJudge, message: '请输入导游房成本价', trigger: 'blur' },
CurrencyId: { validator: emptyJudge, message: '请选择成本币种', trigger: 'blur' },
CurrentRate: { validator: emptyJudge, message: '请输入汇率', trigger: 'blur' },
WeekendAddPrice: { validator: numJudge, message: '请输入周末加价', trigger: 'blur' },
InteriorAddPrice: { validator: numJudge, message: '请输入内部加价', trigger: 'blur' },
B2BPrice: { validator: numJudge, message: '请输入B2B加价', trigger: 'blur' },
B2CPrice: { validator: numJudge, message: '请输入B2C加价', trigger: 'blur' },
},
allCurrencyList: [],
SupplierList: []
}
},
methods: {
// 获取详情
getDetail: function () {
this.loading = true
this.apipost('dict_post_HotelOffer_GetHotelPriceInfo', {
HotelId: this.msg.Hotel,
Time: this.msg.StartDate
}, res => {
if (res.data.resultCode === 1) {
let data = res.data.data
this.msg.Supplier = data.Supplier===0?'0':data.Supplier
this.msg.Inventory = data.Inventory
this.msg.B2BPrice = data.B2BPrice
this.msg.B2CPrice = data.B2CPrice
this.msg.Remark = data.Remark
this.msg.CostPrice = data.CostPrice
this.msg.CurrencyId = data.CurrencyId
this.msg.CurrentRate = data.CurrentRate
this.msg.StartDate = data.Date
this.msg.EndDate = data.Date
this.msg.InventoryType = data.InventoryType.toString()
this.msg.BidroomPrice = data.BidroomPrice
this.msg.SingleroomPrice = data.SingleroomPrice
this.msg.ChildNotBedPrice = data.ChildNotBedPrice
this.msg.AddBedPrice = data.AddBedPrice
this.msg.DriverRoomPrice = data.DriverRoomPrice
this.msg.WeekendAddPrice = data.WeekendAddPrice
this.msg.InteriorAddPrice = data.InteriorAddPrice
this.msg.GuideRoomPrice = data.GuideRoomPrice
} else {
this.$message.error(res.data.message)
}
this.loading = false
})
},
// 日期类型切换
dayTypeChange: function (val) {
this.msg.Year = ''
this.msg.Month = ''
this.msg.Week = ''
this.msg.StartDate = ''
this.msg.EndDate = ''
},
//获取所有币种
getAllCurrency() {
this.apipost("financeinfo_post_GetList",{},res => {
if (res.data.resultCode === 1) {
this.allCurrencyList = res.data.data;
} else {
this.$message.error('币种获取失败')
}
},err => {});
},
// 币种切换
currencyChange: function (val) {
this.msg.CurrentRate = 0
for (let i = 0; i < this.allCurrencyList.length; i++) {
if (val === this.allCurrencyList[i].ID) {
this.msg.CurrentRate = this.allCurrencyList[i].Rate;
}
}
},
// 获取供应商
initSupplier() {
this.apipost("supplier_post_GetAllList",{Type: 1},res => {
if (res.data.resultCode === 1) {
this.SupplierList = res.data.data;
} else {
this.$message.error('供应商获取失败')
}
},err => {});
},
// 保存按钮
editSave: function () {
this.$refs['hotelProductForm'].validate((valid) => {
if (valid) {
if (this.loading === false) {
this.loading = true
this.apipost('dict_post_HotelOffer_SetNewHotelPrice', this.msg, res => {
if (res.data.resultCode === 1) {
this.$message.success('编辑成功')
} else {
this.$message.error(res.data.message)
}
this.loading = false
})
}
} else {
return false;
}
});
}
},
mounted: function () {
this.getAllCurrency()
this.initSupplier()
let type = this.$route.query.type===undefined?'1':this.$route.query.type
this.msg.Hotel = this.$route.query.HotelId===undefined?'0':this.$route.query.HotelId
let nowDate = new Date().Format('yyyy-MM-dd');
this.msg.DayType = '4'
this.msg.StartDate = this.$route.query.day===undefined?nowDate:this.$route.query.day
this.msg.EndDate = this.$route.query.day===undefined?nowDate:this.$route.query.day
if (type === '2') {
this.getDetail()
}
},
}
</script>
<style>
.HotelProductEdit{
width: 100%;
}
.HotelProductEdit_header{
position: relative;
padding: 15px 0;
width: 100%;
border-bottom: 1px solid #cccccc;
}
.HotelProductEdit_header>div:nth-child(1){
display: inline-block;
padding: 0 10px;
width: 150px;
height: 20px;
line-height: 20px;
font-size: 16px;
color: #000000;
border-left: 2px solid #e95252;
}
.HotelProductEdit_header>div:nth-child(2){
position: absolute;
top: 0px;
right: 0px;
height: 50px;
line-height: 50px;
}
.HotelProductEdit_header>div:nth-child(2)>div{
display: inline-block;
padding: 0 15px;
height: 30px;
line-height: 28px;
font-size: 14px;
color: #E95252;
background: #fff;
border: 1px solid #E95252;
border-radius: 15px;
cursor: pointer;
}
.HotelProductEdit_tableBox{
margin: auto;
padding: 20px 0;
width: 1000px;
}
.HotelProductEdit_table {
width: 100%;
color: #333;
border-bottom: 1px solid #cccccc;
border-right: 1px solid #cccccc;
}
.HotelProductEdit_table tr {
background: #fff;
}
.HotelProductEdit_table tr th {
height: 0px;
}
.HotelProductEdit_table tr td {
padding: 0 20px;
height: 40px;
font-size: 12px;
text-align: left;
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
}
.HotelProductEdit_table tr td em {
display: inline-block;
height: 40px;
line-height: 40px;
}
.HotelProductEdit_table tr td .el-form-item{
margin-right: 0px;
margin-bottom: 0px;
}
.HotelProductEdit_table tr td .el-input-number{
line-height: 32px;
}
.HotelProductEdit_table tr td .el-input__inner{
height: 34px;
border: none;
border-bottom: 1px solid #dcdfe6;
}
.HotelProductEdit_table tr td .el-textarea__inner{
resize: none;
border: none;
border-bottom: 1px solid #dcdfe6;
}
.HotelProductEdit_table tr .text_title{
font-size: 14px;
text-align: center;
background-color: #cccccc;
}
.HotelProductEdit_table tr .text_tab{
background-color: #E5E5E5;
}
.HotelProductEdit_date>div{
display: inline-block;
vertical-align: middle;
}
.HotelProductEdit_date>div>em{
padding: 0 5px;
}
</style>