<template>
|
<!-- 表单数据 -->
|
<view class="the-form-data">
|
<!-- <view class="formData">
|
<view class="formData-row">
|
<view class="formData-row_input">
|
<text>字段标题</text>
|
<u--input
|
placeholder="请输入内容"
|
border="surround"
|
v-model="value"
|
@change="change"
|
></u--input>
|
</view>
|
<view class="formData-row_input">
|
<text>字段标题</text>
|
<u--input
|
placeholder="请输入内容"
|
border="surround"
|
v-model="value"
|
@change="change"
|
></u--input>
|
</view>
|
</view>
|
<view class="formData-row">
|
<view class="formData-row_input">
|
<text>字段标题</text>
|
<u--input
|
placeholder="请输入内容"
|
border="surround"
|
v-model="value"
|
@change="change"
|
></u--input>
|
</view>
|
<view class="formData-row_input">
|
<text>字段标题</text>
|
<u--input
|
placeholder="请输入内容"
|
border="surround"
|
v-model="value"
|
@change="change"
|
></u--input>
|
</view>
|
</view>
|
<view class="formData-row">
|
<view class="formData-row_textarea">
|
<text>字段标题</text>
|
<u--textarea height="130" v-model="value1" placeholder="请输入内容" ></u--textarea>
|
</view>
|
</view>
|
</view> -->
|
<!-- <view class="dataTable">
|
<uni-table border stripe emptyText="暂无更多数据">
|
<uni-tr>
|
<uni-th align="center">字段标题</uni-th>
|
<uni-th align="center">字段标题</uni-th>
|
</uni-tr>
|
<uni-tr>
|
<uni-td align="center">字段标题</uni-td>
|
<uni-td align="center">字段标题</uni-td>
|
</uni-tr>
|
<uni-tr>
|
<uni-th align="center">字段标题</uni-th>
|
<uni-th align="center">字段标题</uni-th>
|
</uni-tr>
|
<uni-tr>
|
<uni-td align="center">字段标题</uni-td>
|
<uni-td align="center">字段标题</uni-td>
|
</uni-tr>
|
<uni-tr>
|
<uni-th align="center">字段标题</uni-th>
|
<uni-th align="center">字段标题</uni-th>
|
</uni-tr>
|
<uni-tr>
|
<uni-td align="center">字段标题</uni-td>
|
<uni-td align="center">字段标题</uni-td>
|
</uni-tr>
|
</uni-table>
|
</view> -->
|
|
<view class="formDataContaniner">
|
<u--form labelPosition="left" :model="formData" ref="formRef">
|
<u-form-item labelWidth="20%" label="结算客户" ref="customerNameRef">
|
<u--input v-model="formData.customerName" disabled disabledColor="#ffffff"></u--input>
|
</u-form-item>
|
<u-form-item labelWidth="20%" label="编号" >
|
<u--input disabled disabledColor="#ffffff" v-model="formData.number" placeholder="请输入编号"></u--input>
|
</u-form-item>
|
<u-form-item labelWidth="20%" label="合同编号" ref="contractNumRef">
|
<u--input v-model="formData.contractNum" disabled disabledColor="#ffffff"></u--input>
|
</u-form-item>
|
<u-form-item labelWidth="20%" label="合同名称" ref="contractNameRef">
|
<u--input v-model="formData.contractName" disabled disabledColor="#ffffff" ></u--input>
|
</u-form-item>
|
<u-form-item labelWidth="20%" label="付款方式" ref="payTypeRef">
|
<u--input :value="formData.payType == 0? '现汇':'承兑'" disabled disabledColor="#ffffff" placeholder="请选择付款方式" ></u--input>
|
|
</u-form-item>
|
<u-form-item labelWidth="20%" label="日期" ref="timeDataRef">
|
<u--input :value="formData.createTime != null ?formData.createTime.slice(0,10):'暂无' + ' 至 ' + formData.endDate != null? formData.endDate:'暂无'" disabled disabledColor="#ffffff" placeholder="请选择范围日期"></u--input>
|
</u-form-item>
|
|
</u--form>
|
</view>
|
|
<view class="card">
|
<view class="cardList" v-for="(item,index) in formData.contractOrders">
|
<view class="cardList-container">
|
<view class="cardList_item">
|
收货人：
|
<text>{{ item.customerAddressName }}</text>
|
</view>
|
<view class="cardList_item">
|
<view class="">
|
矿厂：
|
<text>{{ item.filedName }}</text>
|
</view>
|
<view class="">
|
煤厂：
|
<text>{{ item.compName }}</text>
|
</view>
|
</view>
|
|
<view class="cardList_item">
|
<view class="">
|
品种：
|
<text>{{ item.coalName }}</text>
|
</view>
|
<view class="">
|
运输：
|
<text>{{ item.trainType == 1 ? '地销' : '路运' }}</text>
|
</view>
|
</view>
|
<view class="cardList_item">
|
<view class="">
|
单价：
|
<text>{{ item.price }}</text>
|
</view>
|
<view class="">
|
订单金额：
|
<text>{{ item.amount }}</text>
|
</view>
|
<!-- <view class="">
|
订单数量：<text>218.899</text>
|
</view> -->
|
</view>
|
</view>
|
</view>
|
</view>
|
|
|
|
<!-- 菜单栏 -->
|
<popup-menu @menuShow="menushow" ref="menuRef"></popup-menu>
|
</view>
|
</template>
|
|
<script>
|
import popupMenu from '@/components/common/popup-menu/popup-menu.vue';
|
export default {
|
data() {
|
return {
|
value:'',
|
value1:'',
|
model1: {
|
userInfo: {
|
name: ''
|
}
|
},
|
formData:{},
|
applicationId:0,
|
menuShow:false
|
};
|
},
|
onShow(){
|
if(this.menuShow == true){
|
this.$refs.menuRef.menuClick()
|
}
|
this.init();
|
},
|
onLoad(options){
|
this.applicationId = JSON.parse(options.index); // 字符串转对象
|
},
|
// 点击导航栏菜单后
|
onNavigationBarButtonTap(e) {
|
// console.log(e);
|
this.$refs.menuRef.menuClick()
|
},
|
components:{
|
popupMenu
|
},
|
methods:{
|
init(){
|
this.requestFormData();
|
},
|
requestFormData(){
|
uni.showLoading({
|
title:'加载中...'
|
})
|
this.$reqGet('formData',{},this.applicationId).then(res=>{
|
console.log('表单',res);
|
uni.hideLoading();
|
if(res.code == 0){
|
this.formData = res.data
|
}
|
})
|
},
|
menushow(e){
|
this.menuShow = e
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep.the-form-data {
|
// 表单
|
// .formData{
|
// width:91%;
|
// margin:vww(16) auto 0;
|
// .formData-row{
|
// margin-top:vww(16);
|
// display:flex;
|
// justify-content: space-between;
|
// .formData-row_input{
|
// width:47%;
|
// .u-input{
|
// margin-top:vww(10);
|
// }
|
// text{
|
// font-size:vww(13);
|
// }
|
// }
|
// .formData-row_textarea{
|
// width:100%;
|
// .u-textarea{
|
// margin-top:vww(10);
|
// }
|
// text{
|
// font-size: vww(13);
|
// }
|
// }
|
// }
|
// }
|
// 表格
|
// .dataTable{
|
// width:91%;
|
// margin:vww(48) auto 0;
|
// .uni-table{
|
// .uni-table-tr{
|
// .uni-table-th{
|
// background-color: #F5F5F5;
|
// font-size:vww(13);
|
// color:#111111;
|
// font-weight: 500;
|
// }
|
// .uni-table-td{
|
// background-color: #FFFFFF;
|
// font-size:vww(13);
|
// color:#111111;
|
// }
|
// }
|
// }
|
// }
|
|
|
|
|
// 表单
|
// .u-form{
|
// .u-form-item{
|
// .u-form-item__body{
|
// .u-form-item__body__left{
|
// .u-form-item__body__left__content{
|
// .u-form-item__body__left__content__label{
|
|
// }
|
// }
|
// }
|
// .u-form-item__body__right{
|
// .u-form-item__body__right__content{
|
// .u-form-item__body__right__content__slot{
|
// .u-input {
|
// .u-input__content{
|
// .u-input__content__field-wrapper{
|
|
// }
|
// }
|
// }
|
// }
|
// }
|
// }
|
// }
|
// }
|
// }
|
|
|
|
|
.formDataContaniner {
|
.u-form {
|
width: 91%;
|
margin: 0 auto 0;
|
.u-form-item {
|
.u-form-item__body {
|
.u-form-item__body__left {
|
.u-form-item__body__left__content {
|
.u-form-item__body__left__content__label {
|
}
|
}
|
}
|
.u-form-item__body__right {
|
.u-form-item__body__right__content {
|
.u-form-item__body__right__content__slot {
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.card{
|
width:91%;
|
margin:0 auto;
|
.cardList {
|
height: vww(130);
|
border-radius: vww(4);
|
padding: vww(10);
|
box-shadow: 0 2px 16px #e5e5e5, 0 0 1px #e5e5e5, 0 0 1px #e5e5e5;
|
margin-top: vww(10);
|
.cardList-container {
|
.cardList_item {
|
margin-top: vww(12);
|
font-size: 14px;
|
display: flex;
|
view {
|
width: 50%;
|
&:nth-child(2) {
|
margin-left: vww(20);
|
}
|
}
|
}
|
}
|
}
|
}
|
|
|
}
|
</style>
|
