You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
2.5 KiB
Vue
142 lines
2.5 KiB
Vue
<template>
|
|
<view class="Main">
|
|
<view class="Add">
|
|
<text class="AddText" @click='ClickAdd'><text class='icon'>+</text>添加</text>
|
|
</view>
|
|
<view class="Unit" v-for="(item,index) in form" :key='index'>
|
|
<view class="UnitBox">
|
|
<view class="title">提单号：</view>
|
|
<input class="input" v-model="item.A" placeholder="请输入提单号" />
|
|
</view>
|
|
<view class="UnitBox">
|
|
<view class="title">场站：</view>
|
|
<uni-data-select class='select' v-model="item.B" :localdata="range" @change="change"></uni-data-select>
|
|
</view>
|
|
<view class="bottom"></view>
|
|
</view>
|
|
<view class="buttonBox">
|
|
<button class="buttonBoxButton" type="default" size="mini" @click="close">关闭</button>
|
|
<button class="buttonBoxButton" type="primary" size="mini">订阅</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
GetYaRDList
|
|
} from '../../../common/js/api/homePage/moveTrace.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
form: [{
|
|
A: '',
|
|
B: ''
|
|
}],
|
|
range: [],
|
|
}
|
|
},
|
|
mounted() {
|
|
GetYaRDList().then(res => {
|
|
res.value.forEach(item => {
|
|
item.value = item.code
|
|
item.text = item.name
|
|
})
|
|
this.range = res.value
|
|
})
|
|
},
|
|
methods: {
|
|
close() {
|
|
this.$emit('close')
|
|
},
|
|
ClickAdd() {
|
|
this.form.push({
|
|
A: '',
|
|
B: ''
|
|
})
|
|
},
|
|
change(e) {
|
|
console.log(this.form);
|
|
console.log("e:", e);
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.Main {
|
|
background: #f2f2f2;
|
|
height: 100%;
|
|
padding: 1rem;
|
|
margin-bottom: 1rem;
|
|
.Add {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
color: #337ab7;
|
|
|
|
.AddText {
|
|
height: 1.5rem;
|
|
line-height: 1.5rem;
|
|
display: flex;
|
|
|
|
.icon {
|
|
display: inline-block;
|
|
height: 1.5rem;
|
|
line-height: 1.5rem;
|
|
margin-right: .3rem;
|
|
font-size: 1.5rem
|
|
}
|
|
}
|
|
}
|
|
|
|
.Unit {
|
|
.UnitBox {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: .5rem;
|
|
|
|
.title {
|
|
width: 140rpx;
|
|
text-align: right;
|
|
}
|
|
|
|
.input {
|
|
flex: 10;
|
|
width: 400rpx;
|
|
border: 1rpx solid #DCDCDC;
|
|
min-height: 36px;
|
|
border-radius: 4px;
|
|
padding: 0 5px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.select {
|
|
flex: 10;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
margin-top: 1rem;
|
|
width: 100%;
|
|
border-bottom: 1rpx solid #e8e8e8;
|
|
}
|
|
}
|
|
|
|
.buttonBox {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: .5rem;
|
|
width: 100%;
|
|
|
|
.buttonBoxButton {
|
|
margin: 0;
|
|
|
|
&:first-child {
|
|
margin-right: .5rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|