|
@@ -7,9 +7,9 @@
|
|
|
<el-select v-model="value" filterable placeholder="请选择">
|
|
|
<el-option
|
|
|
v-for="item in options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value">
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.groupName"
|
|
|
+ :value="item.id">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
@@ -23,69 +23,182 @@
|
|
|
<div class="collection-info">
|
|
|
<div class="collection-info-li">
|
|
|
<label>团 号:</label>
|
|
|
- <span>A57WU4</span>
|
|
|
+ <span>{{groupInfo.tourCode}}</span>
|
|
|
</div>
|
|
|
<div class="collection-info-li">
|
|
|
<label>客 户:</label>
|
|
|
- <span>徐薇</span>
|
|
|
+ <span>{{groupInfo.clientName}}</span>
|
|
|
</div>
|
|
|
<div class="collection-info-li">
|
|
|
<label>出访国家:</label>
|
|
|
- <span>德国、法国、马来西亚</span>
|
|
|
+ <span>{{groupInfo.visitCountry|filter_city}}</span>
|
|
|
</div>
|
|
|
<div class="collection-info-li">
|
|
|
<label>起止日期:</label>
|
|
|
- <span> 2023-10-15 ~ 2023-10-24 </span>
|
|
|
+ <span> {{groupInfo.tontractTime|filter_time}}~{{groupInfo.visitDate|filter_time}}</span>
|
|
|
</div>
|
|
|
<div class="collection-info-li">
|
|
|
<label>天数/人数:</label>
|
|
|
- <span>10天/6人</span>
|
|
|
+ <span>{{groupInfo.visitDays}}天/{{groupInfo.visitPNumber}}人</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="collection-ipt">
|
|
|
- <div class="collection-ipt-li">
|
|
|
- <label>付款方信息(TO):</label>
|
|
|
- <el-input
|
|
|
- style="width: 222px;"
|
|
|
- size="mini"
|
|
|
- placeholder="请输入内容"
|
|
|
- v-model="input"
|
|
|
- clearable>
|
|
|
- </el-input>
|
|
|
- </div>
|
|
|
- <div class="collection-ipt-li">
|
|
|
- <label>付款方电话(TEL):</label>
|
|
|
- <el-input
|
|
|
- style="width: 222px;"
|
|
|
- size="mini"
|
|
|
- placeholder="请输入内容"
|
|
|
- v-model="input2"
|
|
|
- clearable>
|
|
|
- </el-input>
|
|
|
- </div>
|
|
|
- <div class="collection-ipt-li">
|
|
|
- <label>付款日期(DATE):</label>
|
|
|
- <el-input
|
|
|
- style="width: 222px;"
|
|
|
- size="mini"
|
|
|
- placeholder="请输入内容"
|
|
|
- v-model="input3"
|
|
|
- clearable>
|
|
|
- </el-input>
|
|
|
- </div>
|
|
|
+ <div class="collection-checked">
|
|
|
+ <el-checkbox-group v-model="checkedCities">
|
|
|
+ <el-checkbox v-for="type in Cities" :label="type" :key="type">{{type}}</el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ <el-button type="primary">添加一行</el-button>
|
|
|
</div>
|
|
|
- <div class="collection-text">
|
|
|
- <div class="collection-text-li">
|
|
|
- <label>注(ATTENTION):</label>
|
|
|
- <el-input
|
|
|
- style="width: 935px;"
|
|
|
- size="mini"
|
|
|
- type="textarea"
|
|
|
- autosize
|
|
|
- placeholder="请输入内容"
|
|
|
- v-model="textarea1">
|
|
|
- </el-input>
|
|
|
- </div>
|
|
|
+ <div class="collection-form">
|
|
|
+ <el-table
|
|
|
+ :border="barderis"
|
|
|
+ ref="multipleTable"
|
|
|
+ :data="tableData"
|
|
|
+ tooltip-effect="dark"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ type="selection"
|
|
|
+ width="40">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="addingModeName"
|
|
|
+ label="增加方式"
|
|
|
+ width="100"
|
|
|
+ v-if="checkedCities.includes('增加方式')">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="createTime"
|
|
|
+ label="时间"
|
|
|
+ width="100"
|
|
|
+ v-if="checkedCities.includes('时间')">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="费用名称"
|
|
|
+ width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input v-model="scope.row.priceName"></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="单 价"
|
|
|
+ width="80">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input class="editNum" type="number" oninput="value=value.replace(/[^\d.]/g,'')" v-model="scope.row.price"></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="数 量"
|
|
|
+ width="80">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input v-model="scope.row.count"></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="单 位"
|
|
|
+ width="80">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input v-model="scope.row.unit"></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="币 种"
|
|
|
+ width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-select v-model="scope.row.currency">
|
|
|
+ <el-option
|
|
|
+ v-for="item in currencyoptions"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ <!-- <template slot-scope="scope">
|
|
|
+ <el-input v-model="scope.row.currency"></el-input>
|
|
|
+ </template> -->
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="汇 率"
|
|
|
+ width="80">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input v-model="scope.row.rate"></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="itemSumPrice"
|
|
|
+ label="应收金额"
|
|
|
+ width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="已收金额"
|
|
|
+ width="100">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="到款时间"
|
|
|
+ width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="币 种"
|
|
|
+ width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-select v-model="scope.row.addingWay">
|
|
|
+ <el-option
|
|
|
+ v-for="item in currencyoptions"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="收款类型"
|
|
|
+ width="130">
|
|
|
+ <!-- eslint-disable-next-line -->
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-select v-model="scope.row.attention" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in typeoptions"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="to"
|
|
|
+ label="付款方信息"
|
|
|
+ width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="toTel"
|
|
|
+ label="付款方电话"
|
|
|
+ width="120"
|
|
|
+ v-if="checkedCities.includes('付款方电话')">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="payDate"
|
|
|
+ label="付款日期"
|
|
|
+ width="120"
|
|
|
+ v-if="checkedCities.includes('付款日期')">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="attention"
|
|
|
+ label="备注">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input v-model="scope.row.attention" placeholder="请输入内容"></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="尾 款"
|
|
|
+ width="100"
|
|
|
+ v-if="checkedCities.includes('尾 款')">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -94,28 +207,69 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- options: [{
|
|
|
- value: '选项1',
|
|
|
- label: '黄金糕'
|
|
|
- }, {
|
|
|
- value: '选项2',
|
|
|
- label: '双皮奶'
|
|
|
- }, {
|
|
|
- value: '选项3',
|
|
|
- label: '蚵仔煎'
|
|
|
- }, {
|
|
|
- value: '选项4',
|
|
|
- label: '龙须面'
|
|
|
- }, {
|
|
|
- value: '选项5',
|
|
|
- label: '北京烤鸭'
|
|
|
- }],
|
|
|
+ barderis:true,
|
|
|
+ options: [],
|
|
|
value: '',
|
|
|
- input:'',
|
|
|
- input2:'',
|
|
|
- input3:'',
|
|
|
- textarea:''
|
|
|
+ currencyoptions:'',
|
|
|
+ typeoptions:'',
|
|
|
+ checkedCities:[],
|
|
|
+ Cities:['增加方式', '付款方电话', '尾 款', '时间','付款日期'],
|
|
|
+ tableData: [],
|
|
|
+ multipleSelection: [],
|
|
|
+ groupInfo:{}
|
|
|
}
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ GetForeignReceivablesDataSources(){
|
|
|
+ var url = "/api/Financial/GetForeignReceivablesDataSources"
|
|
|
+ var that = this
|
|
|
+ this.$axios({
|
|
|
+ method: 'post',
|
|
|
+ url: url,
|
|
|
+ headers: {
|
|
|
+ Authorization: 'Bearer ' + this.token
|
|
|
+ },
|
|
|
+ }).then(function (res) {
|
|
|
+ console.log(res)
|
|
|
+ that.options=res.data.data.groupNameData;
|
|
|
+ that.currencyoptions=res.data.data.currencyData;
|
|
|
+ that.typeoptions=res.data.data.remittanceMethodData;
|
|
|
+ if(that.value==""){
|
|
|
+ that.value=that.options[0].id;
|
|
|
+ }
|
|
|
+ that.GetGroupReceivablesInfoByDiId()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ GetGroupReceivablesInfoByDiId(){
|
|
|
+ var url = "/api/Financial/GetGroupReceivablesInfoByDiId"
|
|
|
+ var that = this
|
|
|
+ this.$axios({
|
|
|
+ method: 'post',
|
|
|
+ url: url,
|
|
|
+ headers: {
|
|
|
+ Authorization: 'Bearer ' + this.token
|
|
|
+ },
|
|
|
+ data:{
|
|
|
+ portType: 1,
|
|
|
+ diId: 2343
|
|
|
+ }
|
|
|
+ }).then(function (res) {
|
|
|
+ console.log(res)
|
|
|
+ that.groupInfo=res.data.data.groupInfo;
|
|
|
+ that.tableData=res.data.data.groupReceivedData;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filters:{
|
|
|
+ filter_time(value){
|
|
|
+ return value;
|
|
|
+ },
|
|
|
+ filter_city(value){
|
|
|
+ return value
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.GetForeignReceivablesDataSources()
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -153,31 +307,22 @@ export default {
|
|
|
color: #606266;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
-.collection-ipt{
|
|
|
- display: flex;
|
|
|
+.collection-form{
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
-.collection-ipt-li{
|
|
|
- width: 22%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-right: 10px;
|
|
|
-}
|
|
|
-.collection-ipt-li label{
|
|
|
- color: #606266;
|
|
|
- font-size: 15px;
|
|
|
- font-weight: 600;
|
|
|
-}
|
|
|
-.collection-text-li{
|
|
|
+.collection-checked{
|
|
|
+ margin-top: 10px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
}
|
|
|
-.collection-text-li label{
|
|
|
- color: #606266;
|
|
|
- font-size: 15px;
|
|
|
- font-weight: 600;
|
|
|
+
|
|
|
+.editNum input::-webkit-outer-spin-button,
|
|
|
+.editNum input::-webkit-inner-spin-button {
|
|
|
+ -webkit-appearance: none;
|
|
|
}
|
|
|
-.collection-text{
|
|
|
- margin-top: 10px;
|
|
|
+.editNum input[type="number"] {
|
|
|
+ -moz-appearance: textfield;
|
|
|
}
|
|
|
+
|
|
|
</style>
|