test-web/src/views/weixingrong/vehicleEnquirChange/vehicleEnquirChange.vue

<script lang='ts' setup>
    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: '蓝色',
        },
        {
            value: 'Option2',
            label: '黄色',
        },
        {
            value: 'Option3',
            label: '黑色',
        },
        {
            value: 'Option4',
            label: '白色',
        },
        {
            value: 'Option5',
            label: '渐变绿色',
        },
        {
            value: 'Option6',
            label: '黄绿双拼色',
        },
        {
            value: 'Option7',
            label: '蓝白渐变色',
        },
        {
            value: 'Option8',
            label: '未确定',
        },
        {
            value: 'Option9',
            label: '绿色',
        },
        {
            value: 'Option10',
            label: '红色',
        },
    ]
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
const tableData = [
  {
    carId: '贵CEP186_0',
    customerNo: '52010116110441017',
    customerName: '周金碧',
    certificatesType: '身份证（含临时身份证）',
    identificationNo: '522125196110110029',
    carNo: '贵CEP186',
    carColor: '白色',
    carStyle: '一型客车',
    updateTime: '2018/03/17 21:15:13',
  },
  {
    carId: '贵CEP186_0',
    customerNo: '52010116110441017',
    customerName: '周金碧',
    certificatesType: '身份证（含临时身份证）',
    identificationNo: '522125196110110029',
    carNo: '贵CEP186',
    carColor: '白色',
    carStyle: '一型客车',
    updateTime: '2018/03/17 21:15:13',
  },
  {
    carId: '贵CEP186_0',
    customerNo: '52010116110441017',
    customerName: '周金碧',
    certificatesType: '身份证（含临时身份证）',
    identificationNo: '522125196110110029',
    carNo: '贵CEP186',
    carColor: '白色',
    carStyle: '一型客车',
    updateTime: '2018/03/17 21:15:13',
  },
]
</script>
<template>
    <div class="OBU-query content-warpper">
        <el-form :inline="true" :model="OBUList" class="demo-form-inline">
            
            <el-form-item label="车牌号码" :label-width="searchLabelWidth">
                <el-input v-model="OBUList.carNo" placeholder="车牌号码" />
            </el-form-item>
            <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"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="所有人证件类型" :label-width="searchLabelWidth">
                <el-select v-model="OBUList.carColors" class="m-2" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="所有人证件号" :label-width="searchLabelWidth">
                <el-input v-model="OBUList.OBUno" placeholder="所有人证件号" />
            </el-form-item>
            <el-form-item label="所有人名称" :label-width="searchLabelWidth">
                <el-input v-model="OBUList.OBUno" placeholder="所有人名称" />
            </el-form-item>
            <el-form-item label="客户编号" :label-width="searchLabelWidth">
                <el-input v-model="OBUList.OBUno" placeholder="客户编号" />
            </el-form-item>
            <el-form-item label="每条页数" :label-width="searchLabelWidth">
                <el-select v-model="OBUList.pages" placeholder="请选择"   class="pageSelect">
                    <el-option
                    v-for="item in pages"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    />
                </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" 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" />
            <el-table-column prop="carId" label="车牌编号" width="120" align="center" />
            <el-table-column prop="customerNo" label="客户编号" width="180" align="center" />
            <el-table-column prop="customerName" label="客户名称" width="100" align="center" />
            <el-table-column prop="certificatesType" label="客户证件类型" width="180" align="center" />
            <el-table-column prop="identificationNo" label="客户证件号码" width="180" align="center" />
            <el-table-column prop="carNo" label="车牌号码" width="100" align="center" />
            <el-table-column prop="carColor" label="车牌颜色" width="120" align="center" />
            <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="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>