438 lines
10 KiB
Vue
438 lines
10 KiB
Vue
<template>
|
|
<view class="edit">
|
|
<view class="container">
|
|
<view class="formTitle">
|
|
基本信息
|
|
</view>
|
|
<ul>
|
|
<li class="hjLi">
|
|
<p class="liTitle"><span class="required">*</span>资损发生环节</p>
|
|
<van-radio-group class="radioList" v-model="radio" direction="horizontal">
|
|
<van-radio name="收车交接">收车交接</van-radio>
|
|
<van-radio name="卸船（舱内）">卸船（舱内）</van-radio>
|
|
<van-radio name="卸船（场地）">卸船（场地）</van-radio>
|
|
<van-radio name="移车">移车</van-radio>
|
|
<van-radio name="交接检查">交接检查</van-radio>
|
|
<van-radio name="查验">查验</van-radio>
|
|
<van-radio name="巡场">巡场</van-radio>
|
|
<van-radio name="提货交接">提货交接</van-radio>
|
|
<van-radio name="装船（舱内）">装船（舱内）</van-radio>
|
|
<van-radio name="装船（场地）">装船（场地）</van-radio>
|
|
<van-radio name="理货">理货</van-radio>
|
|
<van-radio name="退关">退关</van-radio>
|
|
<van-radio name="退运">退运</van-radio>
|
|
<van-radio name="直装">直装</van-radio>
|
|
<van-radio name="客户反馈" class="radioInput">客户反馈
|
|
</van-radio>
|
|
<van-radio name="其他">其他</van-radio>
|
|
</van-radio-group>
|
|
</li>
|
|
<li>
|
|
<p class="liTitle">板车照片</p>
|
|
<van-uploader>
|
|
<van-button icon="plus" type="info">图片上传</van-button>
|
|
</van-uploader>
|
|
<view class="picture">
|
|
<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
|
|
</view>
|
|
</li>
|
|
<li>
|
|
<p class="liTitle">板车车牌照</p>
|
|
<van-uploader>
|
|
<van-button icon="plus" type="info">图片上传</van-button>
|
|
</van-uploader>
|
|
<view class="picture">
|
|
<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
|
|
</view>
|
|
</li>
|
|
<li class="zisun">
|
|
<p class="liTitle"><span class="required">*</span>责损负责人:</p>
|
|
<van-field v-model="lossHead" placeholder="请输入" />
|
|
</li>
|
|
<li>
|
|
<p class="liTitle"><span class="required">*</span>签名:</p>
|
|
</li>
|
|
</ul>
|
|
<view class="formTitle">
|
|
质损信息
|
|
</view>
|
|
<ul class="zsInfo">
|
|
<li>
|
|
<p class="liTitle"><span class="required">*</span>车架号/条形码:</p>
|
|
<van-field v-model="carValue" placeholder="请输入" />
|
|
</li>
|
|
<li>
|
|
<p class="liTitle"><span class="required">*</span>船名航次:</p>
|
|
<uni-data-select v-model="shipValue" :localdata="shipList" @change="shipChange"></uni-data-select>
|
|
</li>
|
|
<li>
|
|
<p class="liTitle"><span class="required">*</span>车型:</p>
|
|
<uni-data-select v-model="carModel" :localdata="carList" @change="carChange"></uni-data-select>
|
|
</li>
|
|
<li>
|
|
<p class="liTitle"><span class="required">*</span>品牌:</p>
|
|
<uni-data-select v-model="brandValue" :localdata="brandList"
|
|
@change="brandChange"></uni-data-select>
|
|
</li>
|
|
<li>
|
|
<p class="liTitle"><span class="required">*</span>场位:</p>
|
|
<uni-data-select v-model="fieldValue" :localdata="fieldList"
|
|
@change="fieldChange"></uni-data-select>
|
|
</li>
|
|
<li>
|
|
<p class="liTitle"><span class="required">*</span>质损时间:</p>
|
|
<uni-datetime-picker type="datetime" v-model="zsDate" @change="dateChange" />
|
|
</li>
|
|
<li class="zsLi">
|
|
<p class="liTitle"><span class="required">*</span>质损货物品类:</p>
|
|
<van-radio-group class="radioList" v-model="zsRadio" direction="horizontal">
|
|
<van-radio name="商品车">商品车</van-radio>
|
|
<van-radio name="特种车">特种车</van-radio>
|
|
<van-radio name="备件/件杂货">备件/件杂货</van-radio>
|
|
<van-radio name="其他">其他
|
|
<template>
|
|
<van-field v-model="other" placeholder="请输入" />
|
|
</template>
|
|
</van-radio>
|
|
</van-radio-group>
|
|
</li>
|
|
<li class="zsLi">
|
|
<p class="liTitle"><span class="required">*</span>资损概况:</p>
|
|
<van-checkbox-group class="radioList" v-model="result1">
|
|
<van-checkbox name="碰撞">碰撞</van-checkbox>
|
|
<van-checkbox name="追尾">追尾</van-checkbox>
|
|
<van-checkbox name="短装/卸">短装/卸</van-checkbox>
|
|
<van-checkbox name="其他">其他
|
|
<template>
|
|
<van-field v-model="other1" placeholder="请输入" />
|
|
</template>
|
|
</van-checkbox>
|
|
</van-checkbox-group>
|
|
</li>
|
|
<li class="zsLi">
|
|
<p class="liTitle"><span class="required">*</span>损伤情况:</p>
|
|
<van-checkbox-group class="radioList" v-model="result2">
|
|
<van-checkbox name="磕伤（点状）">磕伤（点状）</van-checkbox>
|
|
<van-checkbox name="擦伤（面状）">擦伤（面状）</van-checkbox>
|
|
<van-checkbox name="划伤（线状）">划伤（线状）</van-checkbox>
|
|
<van-checkbox name="凹陷（凹状）">凹陷（凹状）</van-checkbox>
|
|
<van-checkbox name="其他">其他
|
|
<template>
|
|
<van-field v-model="other2" placeholder="请输入" />
|
|
</template>
|
|
</van-checkbox>
|
|
</van-checkbox-group>
|
|
</li>
|
|
<li class="zsLi">
|
|
<p class="liTitle"><span class="required">*</span>处置情况:</p>
|
|
<van-checkbox-group class="radioList" v-model="result3">
|
|
<van-checkbox name="带伤发运">带伤发运</van-checkbox>
|
|
<van-checkbox name="取消发运">取消发运</van-checkbox>
|
|
<van-checkbox name="补装/卸">补装/卸</van-checkbox>
|
|
<van-checkbox name="短装/卸">短装/卸</van-checkbox>
|
|
<van-checkbox name="其他">其他
|
|
<template>
|
|
<van-field v-model="other3" placeholder="请输入" />
|
|
</template>
|
|
</van-checkbox>
|
|
</van-checkbox-group>
|
|
</li>
|
|
<li class="tpLi">
|
|
<p class="liTitle">资损照片</p>
|
|
<van-uploader>
|
|
<van-button icon="plus" type="info">图片上传</van-button>
|
|
</van-uploader>
|
|
<view class="picture">
|
|
<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
|
|
</view>
|
|
</li>
|
|
<li class="tpLi">
|
|
<p class="liTitle">车架号图片</p>
|
|
<van-uploader>
|
|
<van-button icon="plus" type="info">图片上传</van-button>
|
|
</van-uploader>
|
|
<view class="picture">
|
|
<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
|
|
</view>
|
|
</li>
|
|
</ul>
|
|
<view class="btnList">
|
|
<van-button type="default" @click="cancel">取消</van-button>
|
|
<van-button type="info">提交</van-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 基本信息
|
|
radio: '', // 资损发生环节
|
|
lossHead: "", // 资损负责人
|
|
|
|
// 质损信息
|
|
carValue: "", // 车架号
|
|
shipValue: "", // 船名
|
|
shipList: [{
|
|
value: 0,
|
|
text: "船名0"
|
|
},
|
|
{
|
|
value: 1,
|
|
text: "船名1"
|
|
},
|
|
{
|
|
value: 2,
|
|
text: "船名2"
|
|
},
|
|
],
|
|
carModel: "", // 车型
|
|
carList: [{
|
|
value: 0,
|
|
text: "车型0"
|
|
},
|
|
{
|
|
value: 1,
|
|
text: "车型1"
|
|
},
|
|
{
|
|
value: 2,
|
|
text: "车型2"
|
|
},
|
|
],
|
|
brandValue: "", // 品牌
|
|
brandList: [{
|
|
value: 0,
|
|
text: "品牌0"
|
|
},
|
|
{
|
|
value: 1,
|
|
text: "品牌1"
|
|
},
|
|
{
|
|
value: 2,
|
|
text: "品牌2"
|
|
},
|
|
],
|
|
fieldValue: "", // 场位
|
|
fieldList: [{
|
|
value: 0,
|
|
text: "场位0"
|
|
},
|
|
{
|
|
value: 1,
|
|
text: "场位1"
|
|
},
|
|
{
|
|
value: 2,
|
|
text: "场位2"
|
|
},
|
|
],
|
|
zsDate: "", // 质损时间
|
|
zsRadio: "", // 质损货物品类单选框
|
|
other: "", // 质损货物品类其他
|
|
result1: [], // 资损概况多选框
|
|
other1: "", // 资损概况其他
|
|
result2: [], // 损伤情况多选框
|
|
other2: "", // 损伤情况其他
|
|
result3: [], // 处置情况多选框
|
|
other3: "", // 处置情况其他
|
|
}
|
|
},
|
|
onLoad() {},
|
|
methods: {
|
|
// 船名
|
|
shipChange(e) {
|
|
this.shipValue = e
|
|
},
|
|
// 车型
|
|
carChange(e) {
|
|
this.carModel = e
|
|
},
|
|
// 品牌
|
|
brandChange(e) {
|
|
this.brandValue = e
|
|
},
|
|
// 场位
|
|
fieldChange(e) {
|
|
this.fieldValue = e
|
|
},
|
|
// 质损日期
|
|
dateChange(e) {
|
|
this.zsDate = e
|
|
},
|
|
// 取消
|
|
cancel() {
|
|
console.log("取消")
|
|
uni.navigateTo({
|
|
url: '..//monitor/index'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
.edit {
|
|
.container {
|
|
padding: 20px 30px;
|
|
|
|
input::placeholder {
|
|
color: #6a6a6a !important;
|
|
}
|
|
|
|
.formTitle {
|
|
padding-left: 10px;
|
|
border-left: 5px solid #2979ff;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
ul {
|
|
margin-top: 10px;
|
|
|
|
li {
|
|
margin-bottom: 20px;
|
|
|
|
.liTitle {
|
|
margin-bottom: 10px;
|
|
font-size: 16px;
|
|
|
|
.required {
|
|
color: red;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
.radioList {
|
|
display: flex;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
|
|
/deep/.van-field__control {
|
|
color: #6a6a6a;
|
|
}
|
|
|
|
/deep/.van-field__control::-webkit-input-placeholder {
|
|
color: #6a6a6a;
|
|
}
|
|
}
|
|
|
|
.hjLi {
|
|
|
|
/deep/.van-radio {
|
|
min-width: 15%;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
}
|
|
|
|
.zisun {
|
|
display: flex;
|
|
|
|
/deep/.van-field {
|
|
width: 300px;
|
|
}
|
|
|
|
.liTitle {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
.picture {
|
|
margin-top: 20px;
|
|
|
|
/deep/.file-picker__box {
|
|
width: 120px !important;
|
|
height: 120px !important;
|
|
padding-top: 0;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.zsInfo {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
|
|
li {
|
|
width: 48%;
|
|
display: flex;
|
|
|
|
.liTitle {
|
|
text-align: right;
|
|
width: 120px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
/deep/.van-field {
|
|
width: calc(100% - 120px);
|
|
}
|
|
|
|
/deep/.uni-select {
|
|
background-color: #fff;
|
|
height: 44px;
|
|
}
|
|
}
|
|
|
|
.zsLi {
|
|
width: 100%;
|
|
|
|
.liTitle {
|
|
width: 120px;
|
|
}
|
|
|
|
.radioList {
|
|
margin-top: 0;
|
|
|
|
/deep/.van-radio__label {
|
|
display: flex;
|
|
line-height: 44px;
|
|
}
|
|
|
|
/deep/.van-checkbox__label {
|
|
display: flex;
|
|
line-height: 44px;
|
|
}
|
|
|
|
/deep/.van-checkbox {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
/deep/.van-cell {
|
|
margin-left: 10px;
|
|
width: 250px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tpLi {
|
|
width: 100%;
|
|
display: block;
|
|
|
|
.liTitle {
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btnList {
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
/deep/ .van-button {
|
|
margin: 30px 20px;
|
|
width: 120px;
|
|
height: 50px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |