|
|
@@ -1,11 +1,46 @@ |
|
|
|
<script lang='ts' setup> |
|
|
|
import { reactive } from 'vue'; |
|
|
|
import { reactive,ref } from 'vue'; |
|
|
|
const OBUList = reactive({ |
|
|
|
cno: '', |
|
|
|
carNo: '', |
|
|
|
carColors: '', |
|
|
|
OBUno: '', |
|
|
|
pages: '10', |
|
|
|
}) |
|
|
|
|
|
|
|
//弹窗 |
|
|
|
const isShowDialog = ref(false) |
|
|
|
const formLabelWidth = "78px" |
|
|
|
const searchLabelWidth = "110px" |
|
|
|
const formData = reactive({ |
|
|
|
ownerName: '',//车主姓名 |
|
|
|
ownerIdType: '',//车主证件类型 |
|
|
|
ownerIdNum: '',//车主证件号码 |
|
|
|
ownerPositiveImageStr: '',//车主证件正面图片的BASE64编码 |
|
|
|
ownerNegativeImageStr: '',//车主证件反面图片的BASE64编码 |
|
|
|
scenePayType: '',//代扣协议支撑服务场景(签约渠道(银行、微信支付宝等)和用户签定的协议) |
|
|
|
}) |
|
|
|
const handleView = (item:any,v:any) => { |
|
|
|
console.log('view',item,v) |
|
|
|
} |
|
|
|
const handleEdit = (item:any,v:any) => { |
|
|
|
console.log('edit',item,v.OBUNo) |
|
|
|
isShowDialog.value = true |
|
|
|
} |
|
|
|
const pages =[ |
|
|
|
{ |
|
|
|
value: '10', |
|
|
|
label: '10', |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: '20', |
|
|
|
label: '20', |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: '30', |
|
|
|
label: '30', |
|
|
|
} |
|
|
|
] |
|
|
|
const colors = [{ |
|
|
|
value: 'Option1', |
|
|
|
label: '蓝色', |
|
|
@@ -104,18 +139,15 @@ const tableData = [ |
|
|
|
updateTime: '2018/03/17 21:15:13', |
|
|
|
}, |
|
|
|
] |
|
|
|
const handleClick = () => { |
|
|
|
console.log('click') |
|
|
|
} |
|
|
|
</script> |
|
|
|
<template> |
|
|
|
<div class="OBU-query content-warpper"> |
|
|
|
<el-form :inline="true" :model="OBUList" class="demo-form-inline"> |
|
|
|
|
|
|
|
<el-form-item label="车牌号码"> |
|
|
|
<el-form-item label="车牌号码" :label-width="searchLabelWidth"> |
|
|
|
<el-input v-model="OBUList.carNo" placeholder="车牌号码" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="车牌颜色"> |
|
|
|
<el-form-item label="车牌颜色" :label-width="searchLabelWidth"> |
|
|
|
<el-select v-model="OBUList.carColors" class="m-2" placeholder="Select"> |
|
|
|
<el-option |
|
|
|
v-for="item in colors" |
|
|
@@ -125,7 +157,7 @@ const handleClick = () => { |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="所有人证件类型"> |
|
|
|
<el-form-item label="所有人证件类型" :label-width="searchLabelWidth"> |
|
|
|
<el-select v-model="OBUList.carColors" class="m-2" placeholder="请选择"> |
|
|
|
<el-option |
|
|
|
v-for="item in options" |
|
|
@@ -135,19 +167,19 @@ const handleClick = () => { |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="所有人证件号"> |
|
|
|
<el-form-item label="所有人证件号" :label-width="searchLabelWidth"> |
|
|
|
<el-input v-model="OBUList.OBUno" placeholder="所有人证件号" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="所有人名称"> |
|
|
|
<el-form-item label="所有人名称" :label-width="searchLabelWidth"> |
|
|
|
<el-input v-model="OBUList.OBUno" placeholder="所有人名称" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="客户编号"> |
|
|
|
<el-form-item label="客户编号" :label-width="searchLabelWidth"> |
|
|
|
<el-input v-model="OBUList.OBUno" placeholder="客户编号" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="每条页数"> |
|
|
|
<el-select v-model="OBUList.carColors" class="m-2" placeholder="请选择"> |
|
|
|
<el-form-item label="每条页数" :label-width="searchLabelWidth"> |
|
|
|
<el-select v-model="OBUList.pages" placeholder="请选择" class="pageSelect"> |
|
|
|
<el-option |
|
|
|
v-for="item in options" |
|
|
|
v-for="item in pages" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value" |
|
|
@@ -155,7 +187,7 @@ const handleClick = () => { |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item><el-button type="primary" icon="Search">查询</el-button></el-form-item> |
|
|
|
<el-form-item><el-button type="warning" plain icon="Refresh">重置</el-button></el-form-item> |
|
|
|
<el-form-item><el-button type="warning" icon="Refresh">重置</el-button></el-form-item> |
|
|
|
</el-form> |
|
|
|
<el-table :data="tableData" style="width: 100%"> |
|
|
|
<el-table-column type="index" label="序号" width="64" fixed align="center" /> |
|
|
@@ -169,16 +201,52 @@ const handleClick = () => { |
|
|
|
<el-table-column prop="carStyle" label="车型" width="100" align="center" /> |
|
|
|
<el-table-column prop="updateTime" label="更新时间" width="180" align="center" /> |
|
|
|
<el-table-column fixed="right" label="操作" width="160" align="center" > |
|
|
|
<template #default> |
|
|
|
<el-button type="success" size="small" @click="handleClick">修改</el-button> |
|
|
|
<el-button type="primary" size="small">详情</el-button> |
|
|
|
<template #default="scope"> |
|
|
|
<el-button type="primary" size="small" @click="handleView(scope.$index, scope.row)">详情</el-button> |
|
|
|
<el-button type="success" size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
<el-dialog v-model="isShowDialog" title="车辆信息变更" custom-class="custom-dialog" :width="576"> |
|
|
|
<el-form :model="formData" :inline="true"> |
|
|
|
<el-form-item label="车主姓名" :label-width="formLabelWidth"> |
|
|
|
<el-input v-model="formData.ownerName" autocomplete="off" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="证件类型" :label-width="formLabelWidth"> |
|
|
|
<el-select v-model="formData.ownerIdType" placeholder="请选择"> |
|
|
|
<el-option label="Zone No.1" value="shanghai" /> |
|
|
|
<el-option label="Zone No.2" value="beijing" /> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="证件号码" :label-width="formLabelWidth"> |
|
|
|
<el-input v-model="formData.ownerIdNum" autocomplete="off" /> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<template #footer> |
|
|
|
<span class="dialog-footer"> |
|
|
|
<el-button type="danger" @click="isShowDialog = false" plain>取消</el-button> |
|
|
|
<el-button type="primary" @click="isShowDialog = false" |
|
|
|
>保存</el-button |
|
|
|
> |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<style scoped> |
|
|
|
.el-form--inline .el-form-item{ |
|
|
|
margin-right: 16px; |
|
|
|
} |
|
|
|
} |
|
|
|
.el-select-dropdown__item{ |
|
|
|
font-family: "Microsoft Yahei"; |
|
|
|
} |
|
|
|
.el-select{ |
|
|
|
width: 168px; |
|
|
|
} |
|
|
|
.pageSelect{ |
|
|
|
width: 80px; |
|
|
|
} |
|
|
|
.custom-dialog .el-button{ |
|
|
|
padding: 0 32px; |
|
|
|
} |
|
|
|
</style> |