m

src/layout/index.vue

 
 <style lang="scss" scoped>
   .el-menu-vertical-demo:not(.el-menu--collapse) {
-    width: 200px;
+    width: 240px;
     min-height: 400px;
   }
 

src/views/weixingrong/OBUQuery/OBUQuery.vue

 <script lang='ts' setup>
 
-import { reactive } from 'vue';
-const labelWith = 68
+import { reactive,ref } from 'vue';
+const dialogFormVisible = ref(false)
+const labelWith = '68px'
+const formLabelWidth = '140px'
+const form =reactive({
+    name: '',
+    region: ''
+})
 const OBUList = reactive({
         cno: '',
         carNo: '',
     }
 ]
 const colors = [{
-            value: 'Option1',
+            value: '蓝色',
             label: '蓝色',
         },
         {
-            value: 'Option2',
+            value: '黄色',
             label: '黄色',
         },
         {
-            value: 'Option3',
+            value: '黑色',
             label: '黑色',
         },
         {
-            value: 'Option4',
+            value: '白色',
             label: '白色',
         },
         {
-            value: 'Option5',
+            value: '渐变绿色',
             label: '渐变绿色',
         },
         {
-            value: 'Option6',
+            value: '黄绿双拼色',
             label: '黄绿双拼色',
         },
         {
-            value: 'Option7',
+            value: '蓝白渐变色',
             label: '蓝白渐变色',
-        },
-        {
-            value: 'Option8',
-            label: '未确定',
-        },
+        },        
         {
-            value: 'Option9',
+            value: '绿色',
             label: '绿色',
         },
         {
-            value: 'Option10',
+            value: '红色',
             label: '红色',
         },
+        {
+            value: '未确定',
+            label: '未确定',
+        },
     ]
 const tableData = [
   {
-    customerName: '周金波',
+    customerName: '郭达',
     carNo: '贵CEP186',
     carColor: '白色',
     carStyle: '一型客车',
     OBUStatus: '正常',
   },
   {
-    customerName: '周金波',
+    customerName: '王媛媛',
     carNo: '贵CEP186',
     carColor: '白色',
     carStyle: '一型客车',
     OBUStatus: '正常',
   },
   {
-    customerName: '周金波',
+    customerName: '李丽',
     carNo: '贵CEP186',
     carColor: '白色',
     carStyle: '一型客车',
 }
 const handleEdit = (item:any,v:any) => {
   console.log('edit',item,v.OBUNo)
+  dialogFormVisible.value = true
 }
 </script>
 <template>
             </template>
             </el-table-column>
         </el-table>
+        <el-dialog v-model="dialogFormVisible" title="Shipping address" custom-class="custom-dialog666666666">
+            <el-form :model="form">
+            <el-form-item label="Promotion name" :label-width="formLabelWidth">
+                <el-input v-model="form.name" autocomplete="off" />
+            </el-form-item>
+            <el-form-item label="Zones" :label-width="formLabelWidth">
+                <el-select v-model="form.region" placeholder="Please select a zone">
+                <el-option label="Zone No.1" value="shanghai" />
+                <el-option label="Zone No.2" value="beijing" />
+                </el-select>
+            </el-form-item>
+            </el-form>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="dialogFormVisible = false">取消</el-button>
+                    <el-button type="primary" @click="dialogFormVisible = false"
+                    >保存</el-button
+                    >
+                </span>
+            </template>
+        </el-dialog>
     </div>
 </template>
 <style scoped>
 .pageSelect{
     width: 80px;
 }
+.custom-dialog{
+    transform: translate(-50%,-50%);
+}
 </style>

src/views/weixingrong/vehicleEnquirChange/vehicleEnquirChange.vue

 <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: '蓝色',
     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"
                     />
                 </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"
                     />
                 </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"
                 </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" />
             <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>