|
@@ -2,81 +2,97 @@
|
|
|
<div class="entryquotation-all">
|
|
|
<div class="entryquotation-title">出入境报价表</div>
|
|
|
<div class="entryquotation-form">
|
|
|
- <div class="entryquotation-form-li" v-for="(item,index) in tabledata" :key="index">
|
|
|
+ <div class="entryquotation-form-li" v-for="(item, index) in tabledata" :key="index">
|
|
|
<div class="entryquotation-form-title">
|
|
|
- {{item.itemName}}
|
|
|
+ {{ item.itemName }}
|
|
|
</div>
|
|
|
<div class="entryquotation-form-content">
|
|
|
- <div class="entryquotation-content" v-for="(items,index) in item.infos" :key="index">
|
|
|
+ <div class="entryquotation-form-addbtn">
|
|
|
+ <el-button size="small" @click="appenditems(item)" type="primary">新增</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="entryquotation-content" v-for="(items, subIndex) in item.infos" :key="subIndex">
|
|
|
<div class="entryquotation-content-box">
|
|
|
<label>描述:</label>
|
|
|
- <el-input style="width:340px" autosize type="textarea" v-model="items.feeName"></el-input>
|
|
|
+ <el-input style="width:318px" autosize type="textarea" v-model="items.feeName"></el-input>
|
|
|
</div>
|
|
|
<div class="entryquotation-content-box">
|
|
|
<label>单价:</label>
|
|
|
- <el-input-number size="small" :precision="2" :controls="false" v-model="items.unitPrice"></el-input-number>
|
|
|
+ <el-input-number style="width:110px" size="small" :precision="2" :controls="false" v-model="items.unitPrice" @change="calculateTotal(items)"></el-input-number>
|
|
|
+ </div>
|
|
|
+ <div class="entryquotation-content-box">
|
|
|
+ <label>币种:</label>
|
|
|
+ <el-select style="width:110px" size="small" v-model="items.currency" filterable placeholder="请选择">
|
|
|
+ <el-option v-for="opt in options" :key="opt.currencyCode" :label="opt.currencyCode" :value="opt.currencyCode"></el-option>
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
<div class="entryquotation-content-box">
|
|
|
<label>数量:</label>
|
|
|
- <el-input-number size="small" :precision="2" :controls="false" v-model="items.quantity"></el-input-number>
|
|
|
+ <el-input-number style="width:110px" size="small" :precision="2" :controls="false" v-model="items.quantity" @change="calculateTotal(items)"></el-input-number>
|
|
|
</div>
|
|
|
<div class="entryquotation-content-box">
|
|
|
<label>小计:</label>
|
|
|
- <el-input-number size="small" :precision="2" :controls="false" v-model="items.totalAmt"></el-input-number>
|
|
|
+ <el-input-number style="width:110px" size="small" :precision="2" :controls="false" v-model="items.totalAmt" disabled></el-input-number>
|
|
|
</div>
|
|
|
- <el-button size="small" type="danger">移除</el-button>
|
|
|
- <!-- {{ items.feeName }} -->
|
|
|
+ <el-button size="small" type="danger" @click="removeItem(item.infos, subIndex)">移除</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="entryquotation-form-totalprice">
|
|
|
<div class="entryquotation-content-box">
|
|
|
<label>该项总计:</label>
|
|
|
- <el-input-number size="small" :precision="2" :controls="false" v-model="item.totalAmt"></el-input-number>
|
|
|
+ <el-input-number size="small" :precision="2" :controls="false" v-model="item.totalAmt" disabled></el-input-number>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
+
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- tabledata:[],
|
|
|
- }
|
|
|
+ tabledata: [],
|
|
|
+ options: [],
|
|
|
+ };
|
|
|
},
|
|
|
- methods:{
|
|
|
- //
|
|
|
- EnterExitCostQuoteEntryExitCosts(){
|
|
|
- this.tabledata=[];
|
|
|
- var url = "/api/Groups/EnterExitCostQuoteEntryExitCosts"
|
|
|
- var that = this
|
|
|
+ methods: {
|
|
|
+ EnterExitCostQuoteEntryExitCosts() {
|
|
|
+ var url = "/api/Groups/EnterExitCostQuoteEntryExitCosts";
|
|
|
+ var that = this;
|
|
|
this.$axios({
|
|
|
method: 'post',
|
|
|
url: url,
|
|
|
- headers: {
|
|
|
- Authorization: 'Bearer'
|
|
|
- },
|
|
|
- data:{
|
|
|
- portType: 1,
|
|
|
- diId:2477,
|
|
|
- currUserId: 330,
|
|
|
- }
|
|
|
+ headers: { Authorization: 'Bearer' },
|
|
|
+ data: { portType: 1, diId: 2477, currUserId: 330 }
|
|
|
}).then(function (res) {
|
|
|
- if(res.data.code==200){
|
|
|
- that.tabledata=res.data.data.feeItems;
|
|
|
- }else{
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ that.options = res.data.data.rates;
|
|
|
+ that.tabledata = res.data.data.feeItems;
|
|
|
+ } else {
|
|
|
that.$message.error(res.data.msg);
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ appenditems(item) {
|
|
|
+ item.infos.push({ feeName: '', unitPrice: 0, currency: '', quantity: 1, totalAmt: 0 });
|
|
|
+ },
|
|
|
+ removeItem(infos, index) {
|
|
|
+ infos.splice(index, 1);
|
|
|
},
|
|
|
+ calculateTotal(items) {
|
|
|
+ items.totalAmt = items.unitPrice * items.quantity;
|
|
|
+ },
|
|
|
+ calculateItemTotal(item) {
|
|
|
+ item.totalAmt = item.infos.reduce((sum, info) => sum + info.totalAmt, 0);
|
|
|
+ }
|
|
|
},
|
|
|
- mounted(){
|
|
|
+ mounted() {
|
|
|
this.EnterExitCostQuoteEntryExitCosts();
|
|
|
}
|
|
|
-}
|
|
|
+};
|
|
|
</script>
|
|
|
-<style>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
.entryquotation-all {
|
|
|
background-color: #fff;
|
|
|
padding: 10px;
|
|
@@ -84,54 +100,54 @@ export default {
|
|
|
border-radius: 10px;
|
|
|
min-height: 840px;
|
|
|
}
|
|
|
-.entryquotation-title{
|
|
|
+.entryquotation-title {
|
|
|
text-align: center;
|
|
|
font-size: 17px;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
-.entryquotation-form{
|
|
|
+.entryquotation-form {
|
|
|
border: 1px solid #ebeef5;
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
-.entryquotation-form-li{
|
|
|
+.entryquotation-form-li {
|
|
|
display: flex;
|
|
|
}
|
|
|
-.entryquotation-form-title{
|
|
|
+.entryquotation-form-title {
|
|
|
padding: 10px;
|
|
|
-
|
|
|
-}
|
|
|
-.entryquotation-form-title{
|
|
|
- width: 20%;
|
|
|
+ width: 15%;
|
|
|
border-bottom: 1px solid #ebeef5;
|
|
|
border-right: 1px solid #ebeef5;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
-.entryquotation-form-content{
|
|
|
- width: 65%;
|
|
|
+.entryquotation-form-content {
|
|
|
+ width: 70%;
|
|
|
border-bottom: 1px solid #ebeef5;
|
|
|
border-right: 1px solid #ebeef5;
|
|
|
padding: 10px;
|
|
|
}
|
|
|
-.entryquotation-form-totalprice{
|
|
|
+.entryquotation-form-totalprice {
|
|
|
width: 15%;
|
|
|
border-bottom: 1px solid #ebeef5;
|
|
|
padding: 10px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
-.entryquotation-content{
|
|
|
+.entryquotation-content {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin: 5px 0;
|
|
|
}
|
|
|
-.entryquotation-content-box{
|
|
|
+.entryquotation-content-box {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-right: 15px;
|
|
|
padding: 5px 0;
|
|
|
}
|
|
|
-.entryquotation-content-box label{
|
|
|
+.entryquotation-content-box label {
|
|
|
margin-right: 5px;
|
|
|
}
|
|
|
-</style>
|
|
|
+.entryquotation-form-addbtn {
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+</style>
|