<template>
<div class="car_add">
<div>
<div class="communal-title">
<div>OP费用填写明细</div>
</div>
</div>
<el-skeleton :rows="28" animated :loading="loading">
<div style="display: flex;justify-content: space-between;">
<div style="width: 80%;display: flex;">
<div style="width: 25%;margin-right: 10px;">
<el-select v-model="diId" placeholder="团组选择" clearable filterable style="width: 100%;"
:disabled="true">
<el-option v-for="item in delegationInfoList" :key="item.id" :label="item.teamName"
:value="item.id">
</el-option>
</el-select>
</div>
<div style="width: 25%;">
<el-select v-model="currency" placeholder="币种选择" clearable filterable style="width: 80%;">
<el-option v-for="item in currencyList" :key="item.currencyId"
:label="item.currencyName + '(' + item.currencyCode + ')'" :value="item.currencyId">
</el-option>
</el-select>
</div>
</div>
</div>
<div style="display: flex;justify-content: space-between;margin: 10px 0;" class="checkbox-style">
<el-checkbox-group v-model="checkList" @change="checkBoxChange">
<el-checkbox v-for="(item, index) in checkItems" :key="index" :label=item></el-checkbox>
</el-checkbox-group>
</div>
<div style="margin:10px 0;color:#606266;font-size:16px;">
<span style="font-weight: bold;">团队名称：</span>
<span style="color:#606266;">{{ delegationInfo.teamName }} </span>
<span style="font-weight: bold;">客户：</span>
<span style="color:#606266;">{{ delegationInfo.clientName }} </span>
<span style="font-weight: bold;">出访国家：</span>
<span style="color:#606266;">{{ delegationInfo.visitCountry }} </span>
<span style="font-weight: bold;">起止日期：</span>
<span style="color:#606266;">{{ delegationInfo.visitDate }} </span>
<span style="font-weight: bold;">天数/人数：</span>
<span style="color:#606266;">{{ delegationInfo.visitDays }}天/{{
delegationInfo.visitPNumber }}人</span>
</div>
<hr style='background-color:#5555; height:1px; border:none;' />
<div>
<template>
<el-table :data="ContentList" :border=true style="width: 100%">
<el-table-column prop="num" label="序 号" width="55">
<template slot-scope="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column prop="SIdName" label="费用项目" width="120">
<template slot-scope="scope">
<span style="display: none;">{{ scope.row.sId }}</span>{{ scope.row.sidName }}
</template>
</el-table-column>
<el-table-column prop="datePrice" label="日期" width="160">
<template slot-scope="scope">
<el-date-picker style="width: 100%;" v-model="scope.row.datePrice" type="date"
:picker-options="startPickerOptions" value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期">
</el-date-picker>
</template>
</el-table-column>
<el-table-column label="金额/币种" width="400">
<template slot-scope="scope">
<div class="el-input-number-style pice-ys">
<el-input-number size="small" placeholder="请输入金额" v-model="scope.row.price"
:controls="false" @change="PriceChange"></el-input-number>
<!-- <el-input placeholder="请输入金额" v-model="scope.row.price" clearable style="width:180px;"
@change="PriceChange" /> -->
<el-select size="small" v-model="currency" placeholder="币种选择" clearable filterable
style="width:120px" :disabled="true">
<el-option v-for="item in currencyList" :key="item.currencyId"
:label="item.currencyCode" :value="item.currencyId">
</el-option>
</el-select>
</div>
</template>
</el-table-column>
<el-table-column label="数量" width="100">
<template slot-scope="scope">
<el-input size="small" style="width: 100%;" placeholder="选择单位" v-model="scope.row.count"
@change="PriceChange">
</el-input>
</template>
</el-table-column>
<el-table-column label="单位" width="200">
<template slot-scope="scope">
<!-- <el-input size="small" style="width: 100%;" placeholder="选择单位" v-model="scope.row.units"
@change="PriceChange"></el-input> -->
<el-select v-model="scope.row.units" filterable placeholder="选择单位">
<el-option v-for="item in unitsArr" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="费用明细">
<template slot-scope="scope">
<el-input type="textarea" :rows="1" placeholder="费用明细"
v-model="scope.row.priceContent"></el-input>
</template>
</el-table-column>
<!-- <el-table-column label="备注">
<template slot-scope="scope">
<el-input type="textarea" :rows="1" placeholder="备注" v-model="scope.row.remark"></el-input>
</template>
</el-table-column> -->
</el-table>
<hr style='background-color:#5555; height:1px; border:none;' />
<el-form :model="OPContenData" ref="OPContenData" :rules="OPContenDataRules" label-width="100px"
class="demo-ruleForm">
<div style="display: flex;">
<div style="width: 25%;">
<el-form-item label="此次付款百分比:" prop="payPercentage" label-width="160px">
<el-input placeholder="此次付款百分比" v-model="OPContenData.payPercentage">
<template slot="append">%</template>
</el-input>
</el-form-item>
</div>
<div style="width: 25%;">
<el-form-item label="收款方:" prop="payee" label-width="160px">
<el-input placeholder="收款方" v-model="OPContenData.payee">
</el-input>
</el-form-item>
</div>
<div style="width: 25%;">
<el-form-item label="费用标识:" prop="orbitalPrivateTransfer" label-width="160px">
<el-select v-model="OPContenData.orbitalPrivateTransfer" clearable filterable
placeholder="费用标识" style="width: 100%;">
<el-option :key=0 :value="0" label="公转"></el-option>
<el-option :key=1 :value="1" label="私转"></el-option>
</el-select>
</el-form-item>
</div>
<div style="width: 25%;">
<el-form-item label="支付方式:" prop="payDId" label-width="160px">
<el-select v-model="OPContenData.payDId" placeholder="支付方式" clearable filterable
style="width:100%">
<el-option v-for="item in payment" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</div>
</div>
<div style="display: flex;">
<div style="width: 25%;">
<el-form-item label="总金额:" label-width="160px">
<el-input placeholder="金额" v-model="countCost" :disabled="true"
style="width: 120px;"></el-input>
<el-select v-model="currency" placeholder="币种选择" clearable filterable
style="width:100px" :disabled="true">
<el-option v-for="item in currencyList" :key="item.currencyId"
:label="item.currencyCode" :value="item.currencyId">
</el-option>
</el-select>
</el-form-item>
</div>
<div style="width: 75%;text-align: right;">
<el-form-item>
<el-button type="primary" @click="addBtn">保存</el-button>
<el-button @click="EscAdd">取消</el-button>
</el-form-item>
</div>
</div>
</el-form>
</template>
</div>
</el-skeleton>
</div>
</template>
<script>
export default {
data() {
return {
startPickerOptions: {
},
pageId: '',
token: '',
cTable: '',
userId: 0,
id: '',
diId: '',
loading: true,
currency: 836,
countCost: 0,
delegationInfo: {},
delegationInfoList: [],//团组下拉框
currencyList: [],
payment: [],
IsAuditGM: 0,
ContentList: [],
OPContenData: {
diId: '',
cTGGRId: '',
orbitalPrivateTransfer: 0,
payPercentage: '80',
payee: '',
payDId: '',
currency: '',
OPContentList: [],
CreateUserId: 0
},
OPContenDataRules: {
payPercentage: [
{ required: true, message: '请输入付款百分比', trigger: ['blur', 'change'] },
],
orbitalPrivateTransfer: [
{ required: true, message: '请选择费用标识', trigger: ['blur', 'change'] },
],
payee: [
{ required: true, message: '请输入收款方', trigger: ['blur', 'change'] },
],
payDId: [
{ required: true, message: '请选择付款方式', trigger: ['blur', 'change'] },
]
},
unitsArr: [],
checkItems: ["车费", "导游费", "客户午餐费用", "导游景点费", "导游小费", "接送机费", "其他费用", "司机工资", "司机小费", "司机餐补", "车超时费", "导游餐补", "导游房补", "导游交通", "客户早餐费用", "客户晚餐费用", "景点门票费", "饮料/零食/水果", "住补费用", "翻译费"],
checkList: [],
sourceList: [],
}
},
methods: {
//初始化下拉框
initializeSelect() {
//团组下拉框绑定
var url = "/api/Groups/CarTouristGuideGroundContentInitialize"
var that = this
this.$axios({
method: 'post',
url: url,
headers: {
Authorization: 'Bearer ' + this.token
},
data: {
userId: that.userId,
id: that.id,
}
}).then(function (res) {
if (res.data.code == 200) {
console.log(res)
that.delegationInfoList = res.data.data.delegations;
for (let index = 0; index < that.delegationInfoList.length; index++) {
if (that.delegationInfoList[index].id == that.diId) {
that.delegationInfo = that.delegationInfoList[index];
break;
}
}
//that.ContentList = res.data.data.carTouristGuides;
that.sourceList = res.data.data.carTouristGuides;
that.payment = res.data.data.payment;
var CreditCardPayment = res.data.data.creditCardPayment;
if (CreditCardPayment != null) {
that.OPContenData.payDId = CreditCardPayment.payDId
that.OPContenData.payee = CreditCardPayment.payee
that.currency = CreditCardPayment.paymentCurrency
that.OPContenData.payPercentage = CreditCardPayment.payPercentage
that.countCost = CreditCardPayment.payMoney
that.OPContenData.orbitalPrivateTransfer = CreditCardPayment.orbitalPrivateTransfer
that.IsAuditGM = CreditCardPayment.isAuditGM;
}
that.unitsArr = res.data.data.ssdv;
var start = new Date(res.data.data.start).getTime();
var end = new Date(res.data.data.end).getTime();
that.startPickerOptions.disabledDate = (time) => {
return time.getTime() < start || time.getTime() > end;
}
that.checkList = res.data.data.checkedItem;
that.checkBoxChange();
that.loading = false;
//that.OpCarTouristGuideGroundContenById()
} else {
this.$message.error('初始化失败' + res.data.msg);
}
})
},
//获取ctable
PostPageLinkCTable() {
var url = "/api/Business/PostPageLinkCTable"
var that = this
this.$axios({
method: 'post',
url: url,
headers: {
Authorization: 'Bearer ' + this.token
},
data: {
pageId: that.pageId,
}
}).then(function (res) {
if (res.data.code == 200) {
that.cTable = res.data.data.cTable
that.PostGroupTeamRateByDiIdAndCTableId();
}
})
},
//获取团组币种
PostGroupTeamRateByDiIdAndCTableId() {
var url = "/api/Business/PostGroupTeamRateByDiIdAndCTableId"
var that = this
this.$axios({
method: 'post',
url: url,
headers: {
Authorization: 'Bearer ' + this.token
},
data: {
portType: 1,
diId: that.diId,
cTable: that.cTable,
}
}).then(function (res) {
console.log(res)
if (res.data.code == 200) {
that.currencyList = res.data.data.teamRates;
that.currency = that.currencyList[0].currencyId;
}
})
},
// OpCarTouristGuideGroundContenById() {
// var url = "/api/Groups/OpCarTouristGuideGroundContentById"
// var that = this
// this.$axios({
// method: 'post',
// url: url,
// headers: {
// Authorization: 'Bearer ' + this.token
// },
// data: {
// id: that.id
// }
// }).then(function (res) {
// if (res.data.code == 200) {
// var CarTouristsContent = res.data.data.carTouristsContent;
// if (CarTouristsContent.length != 0) {
// CarTouristsContent.forEach(function (item) {
// that.ContentList.forEach(function (item1) {
// if (item.sId == item1.sId) {
// item1.id = item.id
// item1.price = item.price
// item1.priceContent = item.priceContent
// //item1.remark = item.remark
// }
// })
// })
// }
// that.loading = false
// }
// })
// },
addBtn() {
if (this.IsAuditGM == 1) {
this.$message.error('已通过审核，不可修改！');
} else {
if (this.diId == null && this.diId == undefined && this.diId == "") {
this.$message.error("请选择团组名称");
return;
} else {
var that = this
that.$refs.OPContenData.validate((valid) => {
if (valid) {
that.OPContenData.diId = that.diId;
that.OPContenData.cTGGRId = that.id;
that.OPContenData.currency = that.currency;
that.OPContenData.CreateUserId = that.userId;
that.OPContenData.selectCheck = that.checkList;
that.OPContenData.OPContentList = [];
that.ContentList.forEach(function (item) {
that.OPContenData.OPContentList.push({
id: item.id,
sId: item.sId,
price: item.price,
priceContent: item.priceContent,
datePrice: item.datePrice,
count: item.count,
units: item.units,
//remark: item.remark,
})
})
var url = "/api/Groups/OpCarTouristGuideGroundContent"
that.$axios({
method: 'post',
url: url,
headers: {
Authorization: 'Bearer ' + that.token
},
data: that.OPContenData
}).then(function (res) {
if (res.data.code == 200) {
that.$message({
message: res.data.msg,
type: 'success'
});
that.EscAdd();
} else {
that.$message.error(res.data.msg);
}
})
} else {
this.$message.error('请完善信息在保存！');
return false;
}
})
}
}
},
EscAdd() {
this.$router.push({
path: "/home/CarTouristGuideGroundId",
query: {
diId: this.diId
}
})
},
PriceChange() {
var countCost = 0;
this.ContentList.forEach(function (item) {
if (item.price) {
countCost += parseFloat(item.price)
}
})
this.countCost = countCost
},
checkBoxChange() {
this.ContentList = [];
for (var soure = 0; soure < this.sourceList.length; soure++) {
for (var item = 0; item < this.checkList.length; item++) {
if (this.sourceList[soure].sidName == this.checkList[item]) {
this.ContentList.push(this.sourceList[soure]);
}
}
}
this.PriceChange();
}
},
mounted() {
this.pageId = localStorage.getItem('indexs').split('-')[1];
console.log(this.pageId)
this.token = JSON.parse(localStorage.getItem('userinif')).token;
this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId
this.id = this.$route.query.id
this.diId = parseInt(this.$route.query.diId)
this.PostPageLinkCTable();
this.initializeSelect();
//this.OpCarTouristGuideGroundContenById();
}
}
</script>
<style>
.communal-list {
background-color: #fff;
padding: 10px;
box-shadow: 0 0 5px #0005;
border-radius: 10px;
}
.car_add .communal-title {
display: flex;
font-size: 17px;
font-weight: 600;
color: #555;
margin-bottom: 20px;
justify-content: space-between;
align-items: center;
}
.appraise-box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 50px 0;
}
.appraise-box>div {
width: 30%;
}
.communal-box {
display: flex;
}
.communal-box>button {
margin-left: 10px;
padding: 8px 20px;
}
.car_add {
background-color: #fff;
padding: 20px;
box-shadow: 0 0 5px #0005;
border-radius: 10px;
}
.el-input-number-style .el-input input {
text-align: left;
}
.pice-ys .el-input-number {
width: 250px;
}
@media screen and (max-width: 1700px) {
.appraise-box>div {
width: 48%;
}
.appraise-box>div el-form-item__content {
width: 260px !important;
}
}
.checkbox-style .el-checkbox {
width: 120px;
margin: 10px 10px;
}
</style>