2022年5月9日15:15:10

src/crud/index.vue

         <!-- 搜索框组件 -->
         <search-operation v-show="SSearch" :searchCondition="searchCondition" @RefreshLeft="RefreshLeft">
             <!-- 具名插槽 -->
-            <slot name="search" :scope="searchCondition" />
+            <slot name="search" :searchCondition="searchCondition" />
         </search-operation>
 
         <!-- CRUD组件 -->

src/data/cardAfter/cardFillDo.ts

 export const Data = {
-    config: {
-
+    search: {
+        fileOne: '',
+        fileTwo: '',
+        fileThree: ''
     },
     table: {
         style: '',
             label: '序号',
             width: '80'
         }],
-        field: [
+        field: [ //表格
             {
                 prop: 'name',
                 label: '客户名称',
                     type: 'input',
                     placeholder: '请输入客户名称'
                 }
-            }, {
-                prop: 'name',
-                label: '证件类型',
-                width: '180',
-                form: {
-                    required: true,
-                    type: 'input',
-                    placeholder: '请输入证件类型'
-                }
-            }, {
-                prop: 'name',
-                label: '证件号码',
-                width: '180',
-                form: {
-                    required: true,
-                    type: 'input',
-                    placeholder: '请输入证件号码'
-                }
             }, {
                 prop: 'name',
                 label: '车牌号码',
                     type: 'input',
                     placeholder: '请输入卡片类型'
                 }
-            }
+            },
+            {
+                prop: 'name',
+                label: 'OBU编号',
+                width: '180',
+                form: {
+                    required: true,
+                    type: 'input',
+                    placeholder: 'OBU编号'
+                }
+            }, {
+                prop: 'name',
+                label: 'OBU状态',
+                width: '120',
+                form: {
+                    required: true,
+                    type: 'input',
+                    placeholder: 'OBU状态'
+                }
+            },
         ],
         border: true,
         operateTitle: '操作',

src/data/tableConfig.ts

 export const cfg = {
+    search: { //搜索字段配置
+
+    },
     table: { //table 样式配置
         style: '', //默认表格样式
         extend: [{ //表头拓展

src/layout/components/TabControl.vue

 <template>
     <!-- 标签选项卡模块 :model-value="props.editableTabsValue"(只读) -->
     <el-tabs v-model="editableTabsValue.index" type="card" @tab-click="tabClick" @tab-remove="removeTab"
-        @contextmenu.prevent.native="openMenu($event)">
+        @contextmenu.stop.prevent.native="openMenu($event)">
         <el-tab-pane v-for="item in editableTabs" :key="item.name" :closable="item.start" :label="item.title"
             :name="item.name">
             <slot></slot>

src/layout/index.vue

     <div class="as-layout-horizontal" style="width: 100%; height: 100%;opacity: 0.9;">
       <!-- 此处先划出布局形式(按左右布局划分，左边菜单，右边内容) -->
       <!-- 菜单部分 -->
-      <div class="bg-theme" style="height: 100%;width: 280px;">
+      <div class="bg-theme" style="height: 100%;">
         <!-- 菜单头部部分 -->
         <div class="as-gravity-center-start" style="height: 10%;">
           <img rel="icon" src="/logo2.png" style="width: 60px;height: 60px;" />
         </div>
 
         <!-- 菜单主体部分 -->
-        <el-menu :default-active="menuIndex.menuIndex" style="height: 100%;width: 280px;" mode="vertical"
-          :router="false" @select="select" :collapse="!menuStart.menuIsExpansion" class="el-menu-vertical-demo">
+        <el-menu :default-active="menuIndex.menuIndex" width="280" style="height: 100%" mode="vertical" :router="false"
+          @select="select" :collapse="!menuStart.menuIsExpansion" class="el-menu-vertical-demo">
           <SidebarItem :list="list" />
         </el-menu>
 
           <div style=" background-color: #ffffff; padding: 10px 0px 10px 0px">
             <!-- 选项卡 -->
             <TabContainer>
-              <!-- 主体内容页面 -->
-              <router-view name="key"></router-view>
-              <!-- 路由缓存 https://blog.csdn.net/kDevelop/article/details/122036896 -->
-              <!-- <router-view name="key" v-slot="{ Component }">
-                <keep-alive style="height:100vh">
-                  <component :is="Component" />
-                </keep-alive>
-              </router-view> -->
             </TabContainer>
+
+            <!-- 主体内容页面 -->
+            <router-view name="key"></router-view>
+            <!-- 路由缓存 https://blog.csdn.net/kDevelop/article/details/122036896 -->
+            <!-- <router-view name="key" v-slot="{ Component }">
+              <keep-alive style="height:100vh">
+                <component :is="Component" />
+              </keep-alive>
+            </router-view> -->
           </div>
         </div>
       </div>

src/views/dengmingcong/cardFillDo/cardFillDo.vue

     <CRUD :homeData="Data" text="123">
         <template #search="{ searchCondition }">
             <!-- 搜索 监听回车 @keyup.enter.native="search"-->
-            <!-- <el-input v-model="searchCondition.name" clearable placeholder="输入名称搜索" style="width: 200px;" /> -->
+            <el-input v-model="searchCondition.fileOne" clearable placeholder="卡号" style="width: 200px;" />
+            <el-input v-model="searchCondition.fileTwo" clearable placeholder="车牌号码" style="width: 200px;margin: 0 10px 0 10px;" />
             <!-- 日期搜索 -->
             <!-- <el-date-picker v-model="searchCondition.date" type="date" placeholder="输入日期搜索"
                 style="width: 200px;margin: 0 10px 0 10px;" value-format="YYYY-MM-DD" /> -->
+            <el-select v-model="searchCondition.fileThree" placeholder="--请输入车牌颜色--" style="margin-right: 10px;">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
         </template>
     </CRUD>
 </template>
     import {
         tableData
     } from "@/data/tableData" //表单数据
+
+    const options = [{
+            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: '红色',
+        },
+    ]
 </script>
 <style lang="scss" scoped>