667 lines
15 KiB
Vue
667 lines
15 KiB
Vue
<template>
|
|
<view class="edit">
|
|
<view class="container">
|
|
<view class="formTitle">
|
|
基本信息
|
|
</view>
|
|
|
|
<view class="ul">
|
|
<view class="li">
|
|
<p class="liTitle"><text class="required">*</text>资损发生环节</p>
|
|
<radio-group class="radioList" @change="radioChange">
|
|
<label class="radioBox" v-for="(item, index) in radioList" :key="item.value">
|
|
<view>
|
|
<radio :value="item.value" :checked="index === current" />
|
|
</view>
|
|
<view>{{item.name}}</view>
|
|
</label>
|
|
</radio-group>
|
|
</view>
|
|
<view class="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>
|
|
</view>
|
|
<view class="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>
|
|
</view>
|
|
<view class="li zisun">
|
|
<p class="liTitle"><text class="required">*</text>责损负责人:</p>
|
|
<uni-easyinput class="inputBox" v-model="lossHead" placeholder="请输入"></uni-easyinput>
|
|
</view>
|
|
<view class="li zisun">
|
|
<p class="liTitle"><text class="required">*</text>签名:</p>
|
|
<p class="sign" @click="sign">点击签名</p>
|
|
</view>
|
|
</view>
|
|
<view class="formTitle">
|
|
质损信息
|
|
</view>
|
|
<view class="ul zsInfo">
|
|
<view class="li">
|
|
<p class="liTitle"><text class="required">*</text>车架号/条形码:</p>
|
|
<uni-easyinput class="inputBox" v-model="carValue" placeholder="请输入"></uni-easyinput>
|
|
</view>
|
|
<view class="li">
|
|
<p class="liTitle"><text class="required">*</text>船名航次:</p>
|
|
<uni-data-select v-model="shipValue" :localdata="shipList" @change="shipChange"></uni-data-select>
|
|
</view>
|
|
<view class="li">
|
|
<p class="liTitle"><text class="required">*</text>车型:</p>
|
|
<uni-data-select v-model="carModel" :localdata="carList" @change="carChange"></uni-data-select>
|
|
</view>
|
|
<view class="li">
|
|
<p class="liTitle"><text class="required">*</text>品牌:</p>
|
|
<uni-data-select v-model="brandValue" :localdata="brandList"
|
|
@change="brandChange"></uni-data-select>
|
|
</view>
|
|
<view class="li">
|
|
<p class="liTitle"><text class="required">*</text>场位:</p>
|
|
<uni-data-select v-model="fieldValue" :localdata="fieldList"
|
|
@change="fieldChange"></uni-data-select>
|
|
</view>
|
|
<view class="li">
|
|
<p class="liTitle"><text class="required">*</text>质损时间:</p>
|
|
<uni-datetime-picker type="datetime" v-model="zsDate" @change="dateChange" />
|
|
</view>
|
|
<view class="li zsLi">
|
|
<p class="liTitle"><text class="required">*</text>质损货物品类:</p>
|
|
<radio-group @change="radioChange2" class="radioList2">
|
|
<label class="radioBox" v-for="(item, index) in radioList2" :key="item.value">
|
|
<view>
|
|
<radio :value="item.value" :checked="index === current2" />
|
|
</view>
|
|
<view class="boxInfo">{{item.name}}<uni-easyinput class="inputBox" v-model="other"
|
|
placeholder="请输入" v-if="item.name == '其他'"></uni-easyinput></view>
|
|
</label>
|
|
</radio-group>
|
|
</view>
|
|
<view class="li imageLi">
|
|
<image src="../../static/images/car1.png"></image>
|
|
<image src="../../static/images/car2.png"></image>
|
|
<image src="../../static/images/car3.png"></image>
|
|
<image src="../../static/images/car4.png"></image>
|
|
<image src="../../static/images/car5.png"></image>
|
|
</view>
|
|
<view class="li zsLi">
|
|
<p class="liTitle"><text class="required">*</text>资损概况:</p>
|
|
<checkbox-group class="radioList2" @change="checkboxChange">
|
|
<label class="radioBox" v-for="item in checklist" :key="item.value">
|
|
<view>
|
|
<checkbox :value="item.value" :checked="item.checked" />
|
|
</view>
|
|
<view class="boxInfo">{{item.name}}<uni-easyinput class="inputBox" v-model="other1"
|
|
placeholder="请输入" v-if="item.name == '其他'"></uni-easyinput>
|
|
</view>
|
|
</label>
|
|
</checkbox-group>
|
|
</view>
|
|
<view class="li zsLi">
|
|
<p class="liTitle"><text class="required">*</text>损伤情况:</p>
|
|
<checkbox-group class="radioList2" @change="checkboxChange2">
|
|
<label class="radioBox" v-for="item in checklist2" :key="item.value">
|
|
<view>
|
|
<checkbox :value="item.value" :checked="item.checked" />
|
|
</view>
|
|
<view class="boxInfo">{{item.name}}<uni-easyinput class="inputBox" v-model="other2"
|
|
placeholder="请输入" v-if="item.name == '其他'"></uni-easyinput>
|
|
</view>
|
|
</label>
|
|
</checkbox-group>
|
|
</view>
|
|
<view class="li zsLi">
|
|
<p class="liTitle"><text class="required">*</text>处置情况:</p>
|
|
<checkbox-group class="radioList2" @change="checkboxChange3">
|
|
<label class="radioBox" v-for="item in checklist3" :key="item.value">
|
|
<view>
|
|
<checkbox :value="item.value" :checked="item.checked" />
|
|
</view>
|
|
<view class="boxInfo">{{item.name}}<uni-easyinput class="inputBox" v-model="other3"
|
|
placeholder="请输入" v-if="item.name == '其他'"></uni-easyinput>
|
|
</view>
|
|
</label>
|
|
</checkbox-group>
|
|
</view>
|
|
<view class="li 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>
|
|
</view>
|
|
<view class="li 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>
|
|
</view>
|
|
</view>
|
|
<view class="btnList">
|
|
<van-button type="default" @click="cancel">取消</van-button>
|
|
<van-button type="info">提交</van-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "monEdit",
|
|
data() {
|
|
return {
|
|
// 基本信息
|
|
lossHead: "", // 资损负责人
|
|
radioList: [{
|
|
value: "1",
|
|
name: "收车交接"
|
|
},
|
|
{
|
|
value: "2",
|
|
name: "卸船（舱内）"
|
|
}, {
|
|
value: "3",
|
|
name: "卸船（场地）"
|
|
}, {
|
|
value: "4",
|
|
name: "移车"
|
|
}, {
|
|
value: "5",
|
|
name: "交接检查"
|
|
}, {
|
|
value: "6",
|
|
name: "查验"
|
|
}, {
|
|
value: "7",
|
|
name: "巡场"
|
|
}, {
|
|
value: "8",
|
|
name: "提货交接"
|
|
}, {
|
|
value: "9",
|
|
name: "装船（舱内）"
|
|
}, {
|
|
value: "10",
|
|
name: "装船（场地）"
|
|
}, {
|
|
value: "11",
|
|
name: "装船（场地）"
|
|
}, {
|
|
value: "12",
|
|
name: "理货"
|
|
}, {
|
|
value: "13",
|
|
name: "退关"
|
|
}, {
|
|
value: "14",
|
|
name: "退运"
|
|
}, {
|
|
value: "15",
|
|
name: "直装"
|
|
}, {
|
|
value: "16",
|
|
name: "客户反馈"
|
|
}, {
|
|
value: "17",
|
|
name: "其他"
|
|
},
|
|
],
|
|
current: "",
|
|
|
|
// 质损信息
|
|
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: "", // 质损时间
|
|
radioList2: [{
|
|
value: "1",
|
|
name: "商品车"
|
|
},
|
|
{
|
|
value: "2",
|
|
name: "特种车"
|
|
},
|
|
{
|
|
value: "3",
|
|
name: "备件/件杂货"
|
|
},
|
|
{
|
|
value: "4",
|
|
name: "其他"
|
|
}
|
|
],
|
|
current2: "",
|
|
other: "", // 质损货物品类其他
|
|
checkValue: [], // 资损概况多选框选中
|
|
checklist: [{ // 资损概况多选框
|
|
value: "碰撞",
|
|
name: "碰撞",
|
|
},
|
|
{
|
|
value: "追尾",
|
|
name: "追尾",
|
|
},
|
|
{
|
|
value: "短装/卸",
|
|
name: "短装/卸",
|
|
},
|
|
{
|
|
value: "其他",
|
|
name: "其他",
|
|
}
|
|
],
|
|
other1: "", // 资损概况其他
|
|
checkValue2: [], // 资损概况多选框选中
|
|
checklist2: [{
|
|
value: "磕伤（点状）",
|
|
name: "磕伤（点状）",
|
|
},
|
|
{
|
|
value: "擦伤（面状）",
|
|
name: "擦伤（面状）",
|
|
}, {
|
|
value: "划伤（线状）",
|
|
name: "划伤（线状）",
|
|
}, {
|
|
value: "凹陷（凹状）",
|
|
name: "凹陷（凹状）",
|
|
}, {
|
|
value: "其他",
|
|
name: "其他",
|
|
}
|
|
],
|
|
other2: "", // 损伤情况其他
|
|
checkValue3: [], // 处置情况多选框选中
|
|
checklist3: [{ // 处置情况多选框
|
|
value: "带伤发运",
|
|
name: "带伤发运",
|
|
},
|
|
{
|
|
value: "取消发运",
|
|
name: "取消发运",
|
|
},
|
|
{
|
|
value: "补装/卸",
|
|
name: "补装/卸",
|
|
}, {
|
|
value: "短装/卸",
|
|
name: "短装/卸",
|
|
},
|
|
{
|
|
value: "其他",
|
|
name: "其他",
|
|
}
|
|
],
|
|
other3: "", // 处置情况其他
|
|
}
|
|
},
|
|
methods: {
|
|
radioChange: function(evt) {
|
|
for (let i = 0; i < this.radioList.length; i++) {
|
|
if (this.radioList[i].value === evt.detail.value) {
|
|
this.current = i;
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
radioChange2: function(evt) {
|
|
for (let i = 0; i < this.radioList2.length; i++) {
|
|
if (this.radioList2[i].value === evt.detail.value) {
|
|
this.current2 = i;
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
checkboxChange(e) {
|
|
var items = this.checklist,
|
|
values = e.detail.value;
|
|
for (var i = 0, lenI = items.length; i < lenI; ++i) {
|
|
const item = items[i]
|
|
if (values.includes(item.value)) {
|
|
this.$set(item, 'checked', true)
|
|
} else {
|
|
this.$set(item, 'checked', false)
|
|
}
|
|
}
|
|
let newArr = []
|
|
this.checklist.forEach(v => {
|
|
if (v.checked) {
|
|
newArr.push(v.name)
|
|
}
|
|
})
|
|
this.checkValue = newArr.filter((v, index) => {
|
|
return newArr.indexOf(v) === index
|
|
})
|
|
},
|
|
checkboxChange2(e) {
|
|
var items = this.checklist2,
|
|
values = e.detail.value;
|
|
for (var i = 0, lenI = items.length; i < lenI; ++i) {
|
|
const item = items[i]
|
|
if (values.includes(item.value)) {
|
|
this.$set(item, 'checked', true)
|
|
} else {
|
|
this.$set(item, 'checked', false)
|
|
}
|
|
}
|
|
let newArr = []
|
|
this.checklist2.forEach(v => {
|
|
if (v.checked) {
|
|
newArr.push(v.name)
|
|
}
|
|
})
|
|
this.checkValue2 = newArr.filter((v, index) => {
|
|
return newArr.indexOf(v) === index
|
|
})
|
|
},
|
|
checkboxChange3(e) {
|
|
var items = this.checklist3,
|
|
values = e.detail.value;
|
|
for (var i = 0, lenI = items.length; i < lenI; ++i) {
|
|
const item = items[i]
|
|
if (values.includes(item.value)) {
|
|
this.$set(item, 'checked', true)
|
|
} else {
|
|
this.$set(item, 'checked', false)
|
|
}
|
|
}
|
|
let newArr = []
|
|
this.checklist3.forEach(v => {
|
|
if (v.checked) {
|
|
newArr.push(v.name)
|
|
}
|
|
})
|
|
this.checkValue3 = newArr.filter((v, index) => {
|
|
return newArr.indexOf(v) === index
|
|
})
|
|
},
|
|
// 点击签名
|
|
sign() {
|
|
uni.navigateTo({
|
|
url: '/pages/monitor/sign'
|
|
})
|
|
},
|
|
// 船名
|
|
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() {
|
|
uni.navigateTo({
|
|
url: '/pages/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;
|
|
flex-wrap: wrap;
|
|
margin-top: 20px;
|
|
|
|
.radioBox {
|
|
display: flex;
|
|
width: 14%;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.zisun {
|
|
display: flex;
|
|
|
|
.liTitle {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
.picture {
|
|
margin-top: 20px;
|
|
|
|
/deep/.file-picker__box {
|
|
width: 120px !important;
|
|
height: 120px !important;
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
|
|
.inputBox {
|
|
/deep/.is-input-border {
|
|
width: 345px;
|
|
}
|
|
}
|
|
|
|
.sign {
|
|
color: #2979ff;
|
|
line-height: 40px;
|
|
margin-left: 20px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
}
|
|
|
|
.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/.uni-select {
|
|
background-color: #fff;
|
|
height: 44px;
|
|
}
|
|
|
|
}
|
|
|
|
.zsLi {
|
|
width: 100%;
|
|
line-height: 36px;
|
|
|
|
.liTitle {
|
|
width: 120px;
|
|
}
|
|
|
|
.radioList2 {
|
|
display: flex;
|
|
}
|
|
|
|
.radioBox {
|
|
display: flex;
|
|
margin-left: 10px;
|
|
|
|
.boxInfo {
|
|
display: flex;
|
|
|
|
/deep/.is-input-border {
|
|
width: 240px;
|
|
}
|
|
|
|
/deep/.uni-easyinput {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tpLi {
|
|
width: 100%;
|
|
display: block;
|
|
|
|
.liTitle {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
.imageLi {
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
height: 400px;
|
|
|
|
image {
|
|
height: auto;
|
|
}
|
|
|
|
image:nth-of-type(1) {
|
|
width: 25%;
|
|
}
|
|
|
|
image:nth-of-type(2) {
|
|
width: 25%;
|
|
}
|
|
|
|
image:nth-of-type(3) {
|
|
width: 50%;
|
|
}
|
|
|
|
image:nth-of-type(4) {
|
|
width: 50%;
|
|
}
|
|
|
|
image:nth-of-type(5) {
|
|
width: 50%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btnList {
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
/deep/ .van-button {
|
|
margin: 30px 20px;
|
|
width: 120px;
|
|
height: 50px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |