420 lines
10 KiB
Vue
420 lines
10 KiB
Vue
<template>
|
|
<view class="container">
|
|
<VNavigationBar title="车辆详情" background-color="#fff" title-color="#333"></VNavigationBar>
|
|
<view class="body">
|
|
<view class="card">
|
|
<view class="formItem">
|
|
<text class="formLabel">车牌号</text>
|
|
<input type="text" placeholder="请输入文本" v-model="car.licenseNumber"/>
|
|
</view>
|
|
<view class="formItem">
|
|
<text class="formLabel">品牌</text>
|
|
<picker @change="brandChange" :value="brandIndex" :range="brandNamesComputed">
|
|
<view class="uni-input">{{ brandNamesComputed[brandIndex] }}</view>
|
|
</picker>
|
|
</view>
|
|
<view class="formItem">
|
|
<text class="formLabel">型号</text>
|
|
<input type="text" placeholder="请输入文本" v-model="car.carModelInput"/>
|
|
</view>
|
|
<view class="formItem">
|
|
<text class="formLabel">车辆类别</text>
|
|
<picker @change="categoryChange" :value="categoryIndex" :range="categoryNamesComputed">
|
|
<view class="uni-input">{{ categoryNamesComputed[categoryIndex] }}</view>
|
|
</picker>
|
|
</view>
|
|
<view class="formItem">
|
|
<text class="formLabel">车辆性质</text>
|
|
<picker @change="natureChange" :value="natureIndex" :range="natureNamesComputed">
|
|
<view class="uni-input">{{ natureNamesComputed[natureIndex] }}</view>
|
|
</picker>
|
|
</view>
|
|
<view class="formItem">
|
|
<text class="formLabel">注册日期</text>
|
|
<picker
|
|
mode="date"
|
|
:value="car.carRegisterDate"
|
|
start="2020-01-01"
|
|
end="2030-12-31"
|
|
@change="bindDateChange1">
|
|
<view style="margin-left: 10rpx">
|
|
{{ car.carRegisterDate}}
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<!-- <view class="formItem">-->
|
|
<!-- <text class="formLabel">车辆图片</text>-->
|
|
|
|
<!-- <u-upload-->
|
|
<!-- :action="uploadUrl"-->
|
|
<!-- :headers="headers"-->
|
|
<!-- :file-list="fileList"-->
|
|
<!-- :max-count="3"-->
|
|
<!-- :show-upload-btn="true"-->
|
|
<!-- @after-read="afterRead"-->
|
|
<!-- @delete="deleteFile"-->
|
|
<!-- @success="uploadSuccess"-->
|
|
<!-- @fail="uploadFail"-->
|
|
<!-- ></u-upload>-->
|
|
|
|
<!-- </view>-->
|
|
</view>
|
|
</view>
|
|
<view class="footer">
|
|
<view class="btnItem edit" @click="submit" v-if="bo2">
|
|
确定
|
|
</view>
|
|
|
|
<view class="btnItem delete" v-if="bo1" @click="del">
|
|
<uni-icons type="trash" color="#F92C2C"></uni-icons>
|
|
删除
|
|
</view>
|
|
<view class="line" v-if="bo1"></view>
|
|
<view class="btnItem edit" v-if="bo1" @click="update">
|
|
<uni-icons type="compose" color="#0174F6"></uni-icons>
|
|
保存
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import VNavigationBar from '@/components/VNavigationBar.vue';
|
|
import request from "../../utils/request";
|
|
|
|
export default {
|
|
components: {
|
|
VNavigationBar
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
// uploadUrl: 'https://your-server.com/upload',
|
|
// headers: {},
|
|
// fileList: [],
|
|
|
|
car: {
|
|
// 车牌号
|
|
licenseNumber: '',
|
|
// 型号
|
|
carModelInput: '',
|
|
// 品牌id
|
|
carBrand:'',
|
|
// 车辆类别 字典字段
|
|
carCategory:'',
|
|
// 车辆性质 字典字段
|
|
carNature:'',
|
|
// 注册日期
|
|
carRegisterDate:'2024-09-24',
|
|
|
|
|
|
},
|
|
bo1: false,
|
|
bo2: true,
|
|
categoryIndex: 0,
|
|
natureIndex: 0,
|
|
brandIndex: 0,
|
|
categoryList: [],
|
|
natureList: [],
|
|
brandList: []
|
|
|
|
};
|
|
},
|
|
// 计算属性，将对象数组转换为字符串数组
|
|
computed: {
|
|
// 计算属性，将对象数组转换为字符串数组 picker 标签的 range 属性 只能绑定数组
|
|
brandNamesComputed() {
|
|
return this.brandList.map(item => item.brandName);
|
|
},
|
|
natureNamesComputed() {
|
|
return this.natureList.map(item => item.label);
|
|
},
|
|
categoryNamesComputed() {
|
|
return this.categoryList.map(item => item.label);
|
|
}
|
|
},
|
|
|
|
onLoad(options) {
|
|
// 如果是修改
|
|
if (options.car) {
|
|
// 有数据为编辑 或 删除
|
|
this.car = JSON.parse(decodeURIComponent(options.car));
|
|
console.log('初始化页面数据', this.car)
|
|
this.bo1 = true;
|
|
this.bo2 = false;
|
|
} else {
|
|
// 没有数据 需要赋值一下初始化
|
|
this.bo1 = false;
|
|
this.bo2 = true;
|
|
}
|
|
|
|
// 初始化
|
|
this.getCategoryList();
|
|
this.getNatureList();
|
|
this.getBrandList();
|
|
|
|
},
|
|
methods: {
|
|
// afterRead(file) {
|
|
// console.log('文件读取完成');
|
|
// },
|
|
// deleteFile(file, index) {
|
|
// console.log('删除文件');
|
|
// this.fileList.splice(index, 1);
|
|
// },
|
|
// uploadSuccess(res, file) {
|
|
// console.log('上传成功', res);
|
|
// },
|
|
// uploadFail(error, file) {
|
|
// console.log('上传失败', error);
|
|
// },
|
|
|
|
// 品牌选择事件
|
|
brandChange(event) {
|
|
// 下标
|
|
const newIndex = event.detail.value;
|
|
this.brandIndex = newIndex;
|
|
//
|
|
this.car.carBrand = this.brandList[newIndex].id;
|
|
},
|
|
// 车辆类别选择事件
|
|
categoryChange(event) {
|
|
const newIndex = event.detail.value;
|
|
this.categoryIndex = newIndex;
|
|
//
|
|
this.car.carCategory = this.categoryList[newIndex].value;
|
|
},
|
|
// 车辆性质选择事件
|
|
natureChange(event) {
|
|
const newIndex = event.detail.value;
|
|
this.natureIndex = newIndex;
|
|
//
|
|
this.car.carNature = this.natureList[newIndex].value;
|
|
},
|
|
|
|
// 日期选择 事件
|
|
bindDateChange1(e) {
|
|
this.car.carRegisterDate = e.target.value; // 更新选择的日期到data中的date变量
|
|
|
|
},
|
|
|
|
// 查询下拉 车辆类别
|
|
async getCategoryList() {
|
|
let res = await request({
|
|
url: '/admin-api/system/dict-data/type?type=car_category',
|
|
method: 'get',
|
|
noTenantId: false
|
|
})
|
|
if (res.code == 200) {
|
|
console.log('车辆类别', res.data)
|
|
this.categoryList = res.data;
|
|
if (this.bo2 == true){
|
|
this.car.carCategory = res.data[0].value;
|
|
}
|
|
else {
|
|
// 如果是修改 遍历当前集合 将index 同步
|
|
this.categoryList.forEach((item, index) => {
|
|
if (item.value == this.car.carCategory) {
|
|
this.categoryIndex = index;
|
|
}
|
|
})
|
|
|
|
}
|
|
}
|
|
},
|
|
// 查询下拉 车辆性质
|
|
async getNatureList() {
|
|
let res = await request({
|
|
url: '/admin-api/system/dict-data/type?type=car_nature',
|
|
method: 'get',
|
|
noTenantId: false
|
|
})
|
|
if (res.code == 200) {
|
|
console.log('车辆性质', res.data)
|
|
this.natureList = res.data;
|
|
if (this.bo2 == true){
|
|
this.car.carNature = res.data[0].value;
|
|
}
|
|
else {
|
|
// 如果是修改 遍历当前集合 将index 同步
|
|
this.natureList.forEach((item, index) => {
|
|
if (item.value == this.car.carNature) {
|
|
this.natureIndex = index;
|
|
}
|
|
})
|
|
}
|
|
}
|
|
},
|
|
// 查询下拉 车辆品牌
|
|
async getBrandList() {
|
|
let res = await request({
|
|
url: '/userClient/base/carBrand/list',
|
|
method: 'get',
|
|
})
|
|
if (res.code == 200) {
|
|
console.log('车辆品牌', res.data)
|
|
this.brandList = res.data;
|
|
if (this.bo2 == true){
|
|
this.car.carBrand= res.data[0].id;
|
|
}else {
|
|
// 如果是修改 遍历当前集合 将index 同步
|
|
this.brandList.forEach((item, index) => {
|
|
if (item.id == this.car.carBrand) {
|
|
this.brandIndex = index;
|
|
}
|
|
})
|
|
}
|
|
}
|
|
},
|
|
// 新增
|
|
async submit() {
|
|
let res = await request({
|
|
url: '/userClient/base/myCar/create',
|
|
method: 'POST',
|
|
data: this.car,
|
|
})
|
|
if (res.code == 200) {
|
|
// 新增成功返回上一个页面
|
|
|
|
uni.navigateBack();
|
|
|
|
}
|
|
},
|
|
//删除
|
|
async del() {
|
|
let res = await request({
|
|
url: `/userClient/base/myCar/delete?id=${this.car.id}`,
|
|
method: 'Delete',
|
|
|
|
})
|
|
if (res.code == 200) {
|
|
// 新增成功返回上一个页面 并且上一个页面重新初始化 获取数据 怎么写
|
|
uni.navigateBack();
|
|
|
|
}
|
|
},
|
|
// 修改
|
|
async update() {
|
|
let res = await request({
|
|
url: `/userClient/base/myCar/update`,
|
|
data: this.car,
|
|
method: 'Put',
|
|
})
|
|
if (res.code == 200) {
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
|
.container {
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
background-color: #f3f5f7;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.body {
|
|
flex: 1;
|
|
height: 0;
|
|
overflow: auto;
|
|
|
|
.card {
|
|
margin: 20rpx 0;
|
|
padding: 0 32rpx;
|
|
background-color: #fff;
|
|
|
|
.formItem {
|
|
box-sizing: border-box;
|
|
width: 686rpx;
|
|
margin: 0 auto;
|
|
padding: 40rpx;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
column-gap: 20rpx;
|
|
|
|
border-bottom: 1rpx solid #dddddd;
|
|
|
|
&:last-child {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.labelVal {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
column-gap: 20rpx;
|
|
}
|
|
|
|
|
|
.formLabel {
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.formValue {
|
|
flex: 1;
|
|
width: 0;
|
|
text-align: right;
|
|
font-size: 32rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.carImg {
|
|
width: 240rpx;
|
|
height: 150rpx;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
background-color: #efefef;
|
|
}
|
|
|
|
.formImg {
|
|
margin-top: 30rpx;
|
|
width: 240rpx;
|
|
height: 150rpx;
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
background-color: #efefef;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
background: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.line {
|
|
width: 2rpx;
|
|
background-color: #dddddd;
|
|
}
|
|
|
|
.btnItem {
|
|
flex: 1;
|
|
width: 0;
|
|
padding: 34rpx 0;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
font-size: 32rpx;
|
|
|
|
&.delete {
|
|
color: #f92c2c;
|
|
}
|
|
|
|
&.edit {
|
|
color: #0174f6;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|