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

<script lang='ts' setup>
    import { reactive } from 'vue';
    const OBUList = reactive({
        cno: '',
        carNo: '',
        carColors: '',
        OBUno: '',
    })
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 = [
  {
    creatTime: '2012-01-10 09:30:15',
    customerName: '周金波',
    carNo: '贵CEP186',
    carColor: '白色',
    carStyle: '一型客车',
    cardNo: '5202161708027065',
    cardType: '一般卡类型',
    productType: '一般卡产品类型',
    updateTime: '2012-01-10 09:30:15',
    modifyTime: '2012-01-10 09:30:15',
    cardStatus: '正常',
  },
  
]
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-input v-model="OBUList.cno" placeholder="客户编号" />
            </el-form-item>
            <el-form-item label="车牌号码">
                <el-input v-model="OBUList.carNo" placeholder="车牌号码" />
            </el-form-item>
            <el-form-item label="车牌颜色">
                <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="卡表面号">
                <el-input v-model="OBUList.OBUno" placeholder="卡表面号" />
            </el-form-item>
            <el-form-item><el-button type="primary">读卡</el-button></el-form-item>
            <el-form-item label="卡类型">
                <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="状态">
                <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="每条页数">
                <el-select v-model="OBUList.carColors" class="m-2" placeholder="Select">
                    <el-option
                    v-for="item in options"
                    :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" plain 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 fixed prop="creatTime" label="创建时间" width="100" align="center" />
            <el-table-column fixed prop="customerName" label="客户名称" width="100" 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="cardNo" label="卡表面号" width="160" align="center" />
            <el-table-column prop="cardType" label="卡类型" width="120" align="center" />
            <el-table-column prop="productType" label="产品类型" width="120" align="center" />
            <el-table-column prop="cardStatus" label="状态" width="100" align="center" />
            <el-table-column prop="updateTime" label="状态变更时间" width="100" align="center" />
            <el-table-column prop="modifyTime" label="更新时间" width="100" align="center" />
            <el-table-column fixed="right" label="操作" width="160" align="center" >
            <template #default>
                <el-button type="primary" size="small" @click="handleClick">详情</el-button>
                <el-button type="success" size="small">修改</el-button>
            </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<style scoped>
 .el-form--inline .el-form-item{
    margin-right: 16px;
}   
</style>