You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
549 lines
14 KiB
549 lines
14 KiB
<template>
|
|
<!-- subpages/carManagement/pages/add/add.wxml -->
|
|
<view class="personal-info">
|
|
<view class="basic-info">
|
|
<view class="item">
|
|
<view class="field">
|
|
<text class="must">*</text>
|
|
<view class="field-text">所属组织</view>
|
|
</view>
|
|
<view style="overflow-x: hidden;">
|
|
<jia-cascader :itemList="angencyList" :defaultItemList="defaultItemList"
|
|
@completeChange="completeGrid" @inputChange="change" :border="false"
|
|
:clearIcon="false"></jia-cascader>
|
|
</view>
|
|
</view>
|
|
<view :class="'item '">
|
|
<view class="field">
|
|
<text class="must">*</text>
|
|
<view class="field-text">车牌号码</view>
|
|
</view>
|
|
<view hover-class="backC" class="value-dl">
|
|
<input class="telInput" type="text" placeholder="请输入" v-model="formData.carNumber" />
|
|
</view>
|
|
</view>
|
|
<view :class="'item '">
|
|
<view class="field">
|
|
<text class="must">*</text>
|
|
<view class="field-text">车主姓名</view>
|
|
</view>
|
|
<view hover-class="backC" class="value-dl">
|
|
<input class="telInput" type="text" placeholder="请输入" v-model="formData.carOwnerName" />
|
|
</view>
|
|
</view>
|
|
<view :class="'item '">
|
|
<view class="field">
|
|
<text class="must">*</text>
|
|
<view class="field-text">车主电话</view>
|
|
</view>
|
|
<view hover-class="backC" class="value-dl">
|
|
<input class="telInput" type="text" placeholder="请输入" v-model="formData.carOwnerMobile" />
|
|
</view>
|
|
</view>
|
|
<view :class="'item '">
|
|
<view class="field">
|
|
<view class="field-text">车主身份证</view>
|
|
</view>
|
|
<view hover-class="backC" class="value-dl">
|
|
<input class="telInput" type="text" placeholder="请输入" v-model="formData.carOwnerNum" />
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="basic-info" style="padding-bottom:10px ;">
|
|
<view :class="'item '">
|
|
<view class="field">
|
|
<view class="field-text">车辆品牌</view>
|
|
</view>
|
|
<view hover-class="backC" class="value-dl">
|
|
<input class="telInput" type="text" placeholder="请输入" v-model="formData.carBrand" />
|
|
</view>
|
|
</view>
|
|
<view :class="'item '">
|
|
<view class="field">
|
|
<view class="field-text">车辆颜色</view>
|
|
</view>
|
|
<view class="value-dl">
|
|
<input class="telInput" type="text" placeholder="请输入" v-model="formData.carColor" />
|
|
</view>
|
|
</view>
|
|
|
|
<view :class="'item '">
|
|
<view class="field">
|
|
<view class="field-text">核载人数</view>
|
|
</view>
|
|
<view hover-class="backC" class="value-dl">
|
|
<u-number-box v-model="formData.carriersNum">
|
|
<view slot="minus" class="minus">
|
|
<u-icon name="minus" size="12" color=" #d0d0d0"></u-icon>
|
|
</view>
|
|
<text slot="input" style="width: 50px;text-align: center;" class="input">{{ formData.carriersNum
|
|
}}</text>
|
|
<view slot="plus" class="plus">
|
|
<u-icon name="plus" size="12" color=" #d0d0d0"></u-icon>
|
|
</view>
|
|
</u-number-box>
|
|
</view>
|
|
</view>
|
|
<view :class="'item '">
|
|
<view class="field">
|
|
<view class="field-text">购置日期</view>
|
|
</view>
|
|
<view hover-class="backC" class="value-dl" @tap="showTimePicker">
|
|
<view :class="formData.acquistionDate ? 'di-name' : 'di-name1'">{{ formData.acquistionDate ?
|
|
formData.acquistionDate : '请选择' }}
|
|
</view>
|
|
<image class="di-but" src="/static/images/right.png" mode="aspectFit" />
|
|
</view>
|
|
</view>
|
|
<u-datetime-picker :show="visibleTime" v-model="formData.acquistionDate" :maxDate="maxDate" mode="datetime"
|
|
@cancel="visibleTime = false" @confirm="onConfirmDate"></u-datetime-picker>
|
|
<view class="issue-content">
|
|
<view class="item1">
|
|
<view class="field">
|
|
<view class="field-text">备注说明</view>
|
|
</view>
|
|
</view>
|
|
<textarea maxlength="500" v-model="formData.remark" placeholder="请输入备注说明(不超过500字)"></textarea>
|
|
</view>
|
|
</view>
|
|
<view class="bot_btn">
|
|
<button type="default" :plain="true" class="bottom_btn bottom_btn_close" @tap="close">取消</button>
|
|
<button type="primary" class="btn_bule bottom_btn" @tap="saveForm">提交</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
formatTime
|
|
} from '../../../../utils/util';
|
|
const app = getApp();
|
|
import api from '../../../../utils/api';
|
|
// subpages/carManagement/pages/add/add.js
|
|
export default {
|
|
components: {
|
|
},
|
|
data() {
|
|
return {
|
|
visibleTime: false,
|
|
maxDate: null,
|
|
angencyList: [],
|
|
defaultItemList: [],
|
|
formData: {
|
|
agencyId: '',//所属组织
|
|
orgNamePath: '',//所属组织名称路径
|
|
carBrand: '',//车辆品牌
|
|
carOwnerMobile: '',//车主电话
|
|
carOwnerName: '',//车主姓名
|
|
orgIdPath: '',//所属组织路径
|
|
carNumber: '',//车牌号码
|
|
customerId: '',//客户Id
|
|
carColor: '',//车辆颜色
|
|
carriersNum: 1,//核载人数
|
|
acquistionDate: '',//购置日期
|
|
carOwnerNum: '',//车主证件号
|
|
remark: ''//备注
|
|
}
|
|
};
|
|
},
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/
|
|
onLoad(options) {
|
|
this.setData({
|
|
angencyId: app.globalData.user.agencyId,
|
|
});
|
|
this.getAgencygridtree()
|
|
},
|
|
/**
|
|
* 生命周期函数--监听页面初次渲染完成
|
|
*/
|
|
onReady() { },
|
|
/**
|
|
* 生命周期函数--监听页面显示
|
|
*/
|
|
onShow() { },
|
|
/**
|
|
* 生命周期函数--监听页面隐藏
|
|
*/
|
|
onHide() { },
|
|
/**
|
|
* 生命周期函数--监听页面卸载
|
|
*/
|
|
onUnload() { },
|
|
/**
|
|
* 页面相关事件处理函数--监听用户下拉动作
|
|
*/
|
|
onPullDownRefresh() { },
|
|
/**
|
|
* 页面上拉触底事件的处理函数
|
|
*/
|
|
onReachBottom() { },
|
|
/**
|
|
* 用户点击右上角分享
|
|
*/
|
|
onShareAppMessage() { },
|
|
methods: {
|
|
getAgencygridtree() {
|
|
api.getAgencygridtree()
|
|
.then((res) => {
|
|
this.setData({
|
|
angencyList: this.convertLabelToText([res.data])
|
|
});
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
},
|
|
change(e) {
|
|
console.log(e, '选中的');
|
|
},
|
|
completeGrid(e) {
|
|
if(e.result){
|
|
this.setData({
|
|
'formData.orgNamePath':e.result.map(item=>item.text).join(','),
|
|
'formData.orgIdPath':e.result.map(item=>item.value).join(','),
|
|
agencyId:e.result[e.result.length - 1].value
|
|
})
|
|
}
|
|
},
|
|
convertLabelToText(tree) {
|
|
return tree.map(node => {
|
|
const newNode = {
|
|
...node
|
|
};
|
|
// 将 label 替换为 text
|
|
if (newNode.agencyName !== undefined) {
|
|
newNode.text = newNode.agencyName;
|
|
delete newNode.agencyName;
|
|
}
|
|
if (newNode.subAgencyList && newNode.subAgencyList.length > 0) {
|
|
newNode.children = newNode.subAgencyList
|
|
delete newNode.subAgencyList;
|
|
}
|
|
if (newNode.agencyId) {
|
|
newNode.value = newNode.agencyId
|
|
delete newNode.agencyId;
|
|
}
|
|
if (newNode.children && newNode.children.length > 0) {
|
|
newNode.children = this.convertLabelToText(newNode.children);
|
|
}
|
|
|
|
return newNode;
|
|
});
|
|
},
|
|
showTimePicker(e) {
|
|
this.setData({
|
|
visibleTime: true,
|
|
maxDate: new Date().getTime(),
|
|
acquistionDate: new Date().getTime()
|
|
});
|
|
},
|
|
onConfirmDate(e) {
|
|
this.setData({
|
|
visibleTime: false,
|
|
'formData.acquistionDate': formatTime(e.value)
|
|
});
|
|
|
|
},
|
|
saveForm() {
|
|
console.log(this.formData);
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
/* subpages/carManagement/pages/add/add.wxss */
|
|
page {
|
|
width: 100%;
|
|
height: auto;
|
|
overflow-y: auto;
|
|
background: #f7f7f7;
|
|
padding-bottom: 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.personal-info {
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.basic-info {
|
|
width: 100%;
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
box-sizing: border-box;
|
|
padding: 0 20rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.item {
|
|
border-bottom: 1rpx solid #e7eeee;
|
|
padding: 25rpx 0;
|
|
line-height: 60rpx;
|
|
display: flex;
|
|
}
|
|
|
|
.field {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
width: 190rpx;
|
|
padding-left: 25rpx;
|
|
}
|
|
|
|
.field-d {
|
|
width: 220rpx !important;
|
|
}
|
|
|
|
.value-d {
|
|
width: 450rpx !important;
|
|
}
|
|
|
|
.field.mobile-field {
|
|
width: 250rpx !important;
|
|
}
|
|
|
|
.field .must {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
margin: 0 auto;
|
|
color: #f61616;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.field .field-text {
|
|
font-size: 32rpx;
|
|
font-family: Source Han Serif SC;
|
|
font-weight: 400;
|
|
color: #333;
|
|
}
|
|
|
|
.field .field-text-small {
|
|
font-size: 28rpx;
|
|
font-family: Source Han Serif SC;
|
|
font-weight: 400;
|
|
color: #333;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.value {
|
|
position: relative;
|
|
width: 410rpx;
|
|
display: flex;
|
|
font-size: 32rpx;
|
|
font-family: Source Han Serif SC;
|
|
font-weight: 400;
|
|
color: #333;
|
|
line-height: 60rpx;
|
|
}
|
|
|
|
.value-dl {
|
|
position: relative;
|
|
display: flex;
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
line-height: 60rpx;
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
flex: 1;
|
|
}
|
|
|
|
.telInput {
|
|
margin-left: 40rpx;
|
|
}
|
|
|
|
.di-name {
|
|
margin-right: 14rpx;
|
|
text-align: left;
|
|
width: calc(100% - 30rpx);
|
|
margin-left: 40rpx;
|
|
font-family: 'PingFangSC-Regular', sans-serif;
|
|
}
|
|
|
|
.di-name1 {
|
|
margin-right: 14rpx;
|
|
text-align: left;
|
|
width: calc(100% - 30rpx);
|
|
margin-left: 40rpx;
|
|
font-family: 'PingFangSC-Regular', sans-serif;
|
|
color: #999;
|
|
}
|
|
|
|
.di-but {
|
|
width: 30rpx;
|
|
height: 34rpx;
|
|
}
|
|
|
|
.value input {
|
|
text-align: right;
|
|
font-size: 34rpx;
|
|
color: #333;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.value .picker {
|
|
position: relative;
|
|
width: 100%;
|
|
padding-right: 40rpx;
|
|
text-align: right;
|
|
}
|
|
|
|
.value .picker .z-weak {
|
|
color: #999;
|
|
}
|
|
|
|
.value .picker .menu-arrow {
|
|
position: absolute;
|
|
top: 20rpx;
|
|
right: 0;
|
|
width: 16rpx;
|
|
height: 23rpx;
|
|
}
|
|
|
|
.value-mobile {
|
|
position: relative;
|
|
width: 410rpx;
|
|
display: flex;
|
|
font-size: 32rpx;
|
|
font-family: Source Han Serif SC;
|
|
font-weight: 400;
|
|
color: #333;
|
|
line-height: 60rpx;
|
|
display: flex;
|
|
margin-left: 30rpx;
|
|
}
|
|
|
|
.value-mobile .get-code {
|
|
padding: 0 15rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
background: linear-gradient(to right, #f40c0c, #ff4e4e);
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
border-radius: 6rpx;
|
|
margin: 0;
|
|
margin-left: 25rpx;
|
|
}
|
|
|
|
.value-mobile .button-hover {
|
|
background: rgb(175, 1, 1);
|
|
}
|
|
|
|
.value-mobile input {
|
|
text-align: right;
|
|
font-size: 34rpx;
|
|
color: #333;
|
|
height: 100%;
|
|
width: 55%;
|
|
}
|
|
|
|
.placeholder-style {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.is-open {
|
|
margin-top: 20rpx;
|
|
padding: 0 20rpx;
|
|
box-sizing: border-box;
|
|
height: 30rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
line-height: 30rpx;
|
|
}
|
|
|
|
.submit-button {
|
|
width: 100%;
|
|
height: 84rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 80rpx 0 65rpx;
|
|
}
|
|
|
|
.submit-button button {
|
|
height: 84rpx;
|
|
line-height: 84rpx;
|
|
width: 560rpx;
|
|
padding: 0;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 33rpx;
|
|
border-radius: 84rpx;
|
|
background: linear-gradient(to right, #82b4fd, #3e93fe);
|
|
}
|
|
|
|
.disabled {
|
|
pointer-events: none;
|
|
/* 禁止点击 */
|
|
}
|
|
|
|
textarea {
|
|
width: 100%;
|
|
height: 298rpx;
|
|
background-color: #f7f7f7;
|
|
padding: 30rpx;
|
|
font-size: 34rpx;
|
|
color: #333;
|
|
line-height: 50rpx;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.textarea-placeholder {
|
|
font-size: 32rpx;
|
|
color: #999;
|
|
line-height: 50rpx;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.u-icon {
|
|
border-radius: 100%;
|
|
border: solid #d0d0d0 1px;
|
|
padding: 2px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.bot_btn {
|
|
display: flex;
|
|
background-color: #fff;
|
|
z-index: 10;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 50%;
|
|
box-sizing: border-box;
|
|
transform: translateX(-50%);
|
|
padding: 12rpx 90rpx;
|
|
box-sizing: border-box;
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
.bot_btn .bottom_btn {
|
|
width: 240rpx;
|
|
height: 76rpx;
|
|
border-radius: 43rpx;
|
|
text-align: center;
|
|
line-height: 76rpx;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.bot_btn .btn_bule {
|
|
background: #3974f6;
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
|