Merge branch 'master' of https://gitee.com/dmc_qq/etc-project

src/App.vue

@@ -23,5 +23,6 @@ body {
 #app {
   width: 100%;
   height: 100%;
+  font-family: 'Microsoft Yahei', Arial, sans-serif
 }
 </style>

src/components/VideoBackround/VideoBackground.vue

@@ -2,7 +2,9 @@
   <section class="VideoBg">
     <video ref="video" autoplay loop muted>
       <!-- autoplay 立马播放 loop 循环播放 muted 静音播放-->
-      <source v-for="source in sources" :src="source" :type="getMediaType(source)" />
+      <div :v-if="sources">
+        <source v-for="source in sources" :src="source" :type="getMediaType(source)" />
+      </div>
     </video>
     <div class="VideoBg__content">
       <slot />
@@ -11,124 +13,125 @@
 </template>
 
 <script>
-export default {
-  props: {
-    sources: {
-      type: Array,
-      required: true,
+  export default {
+    props: {
+      sources: {
+        type: Array,
+        required: true,
+      },
+      img: {
+        type: String,
+      },
+      height: {
+        type: Number,
+      },
     },
-    img: {
-      type: String,
-    },
-    height: {
-      type: Number,
-    },
-  },
-
-  data() {
-    return {
-      videoRatio: null,
-    }
-  },
-
-  mounted() {
-    // 创建完实体后
-    this.setImageUrl() // 判断是否为图片则显示图片
-    this.setContainerHeight() // 设置高度
-
-    if (this.videoCanPlay()) {
-      // 视频显示
-      this.$refs.video.oncanplay = () => {
-        if (!this.$refs.video) {
-          return
-        }
 
-        this.videoRatio = this.$refs.video.videoWidth / this.$refs.video.videoHeight // 获取视频高宽比例
-        this.setVideoSize()
-        this.$refs.video.style.visibility = 'visible' // 显示视频
+    data() {
+      return {
+        videoRatio: null,
       }
-    }
-
-    window.addEventListener('resize', this.resize)
-  },
-
-  beforeUnmount() {
-    window.removeEventListener('resize', this.resize)
-  },
+    },
 
-  methods: {
-    // 方法对象
-    resize() {
-      this.setContainerHeight()
+    mounted() {
+      // 创建完实体后
+      this.setImageUrl() // 判断是否为图片则显示图片
+      this.setContainerHeight() // 设置高度
 
       if (this.videoCanPlay()) {
-        this.setVideoSize()
+        // 视频显示
+        this.$refs.video.oncanplay = () => {
+          if (!this.$refs.video) {
+            return
+          }
+
+          this.videoRatio = this.$refs.video.videoWidth / this.$refs.video.videoHeight // 获取视频高宽比例
+          this.setVideoSize()
+          this.$refs.video.style.visibility = 'visible' // 显示视频
+        }
       }
-    },
 
-    videoCanPlay() {
-      return !!this.$refs.video.canPlayType
+      window.addEventListener('resize', this.resize)
     },
 
-    setImageUrl() {
-      if (this.img) {
-        this.$el.style.backgroundImage = `url(${this.img})`
-      }
+    beforeUnmount() {
+      window.removeEventListener('resize', this.resize)
     },
 
-    setContainerHeight() {
-      this.$el.style.height = this.height || `${window.innerHeight}px`
-    },
+    methods: {
+      // 方法对象
+      resize() {
+        this.setContainerHeight()
 
-    setVideoSize() {
-      let width
-      let height
-      const containerRatio = this.$el.offsetWidth / this.$el.offsetHeight // 获取屏幕高宽比例
+        if (this.videoCanPlay()) {
+          this.setVideoSize()
+        }
+      },
 
-      if (containerRatio > this.videoRatio) {
-        width = this.$el.offsetWidth
-      } else {
-        height = this.$el.offsetHeight
-      }
+      videoCanPlay() {
+        return !!this.$refs.video.canPlayType
+      },
 
-      this.$refs.video.style.width = width ? `${width}px` : 'auto'
-      this.$refs.video.style.height = height ? `${height}px` : 'auto'
+      setImageUrl() {
+        if (this.img) {
+          this.$el.style.backgroundImage = `url(${this.img})`
+        }
+      },
 
-      // this.$refs.video.style.width = this.$el.offsetWidth
-      // this.$refs.video.style.height = this.$refs.video.videoHeight - 20 + 'px'
-    },
+      setContainerHeight() {
+        this.$el.style.height = this.height || `${window.innerHeight}px`
+      },
+
+      setVideoSize() {
+        let width
+        let height
+        const containerRatio = this.$el.offsetWidth / this.$el.offsetHeight // 获取屏幕高宽比例
+
+        if (containerRatio > this.videoRatio) {
+          width = this.$el.offsetWidth
+        } else {
+          height = this.$el.offsetHeight
+        }
+
+        this.$refs.video.style.width = width ? `${width}px` : 'auto'
+        this.$refs.video.style.height = height ? `${height}px` : 'auto'
+
+        // this.$refs.video.style.width = this.$el.offsetWidth
+        // this.$refs.video.style.height = this.$refs.video.videoHeight - 20 + 'px'
+      },
 
-    getMediaType(src) {
-      // 获取文件类型
-      return 'video/' + src.split('.').pop()
+      getMediaType(src) {
+        // 获取文件类型
+        return 'video/' + src.split('.').pop()
+      },
     },
-  },
-}
+  }
 </script>
 
 //相对定位 center(中间) cover(覆盖) overflow: hidden(溢出隐藏)
 <style>
-.VideoBg {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  overflow: hidden;
-}
-
-.VideoBg video {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  visibility: hidden;
-  transform: translate(-50%, -50%);
-}
-/* 内容浮动显示在上方*/
-
-.VideoBg__content {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-</style>
+  .VideoBg {
+    position: relative;
+    background-size: cover;
+    background-position: center;
+    overflow: hidden;
+  }
+
+  .VideoBg video {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    visibility: hidden;
+    transform: translate(-50%, -50%);
+  }
+
+  /* 内容浮动显示在上方*/
+
+  .VideoBg__content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+</style>

src/crud/components/Search.operation.vue

@@ -1,9 +1,8 @@
 <template>
     <span>
         <slot />
-        <el-button type="success" icon="Search">搜索{{crud.searchShow}}
-        </el-button>
-        <el-button type="warning" icon="RefreshLeft">重置</el-button>
+        <el-button type="success" icon="Search" @click="Search">搜索</el-button>
+        <el-button type="warning" icon="RefreshLeft" @click="RefreshLeft">重置</el-button>
     </span>
 </template>
 <script>
@@ -14,7 +13,12 @@
     export default {
         mixins: [crudConfig()], //运用混入的的方法
         props: { //插值
-
+            searchCondition: {
+                type: Object,
+                default: function () {
+                    return {}
+                }
+            }
         },
         mounted() {
 
@@ -25,7 +29,12 @@
             }
         },
         methods: { //方法
-
+            Search() { //搜索
+                console.log(this.searchCondition,'=====');
+            },
+            RefreshLeft() { //重置
+                this.$emit('RefreshLeft')
+            }
         }
     }
 </script>

src/crud/index.vue

@@ -1,13 +1,9 @@
 <template>
     <div style="opacity: 1;background-color: #FFF;padding:20px">
         <!-- 搜索框组件 -->
-        <search-operation v-show="SSearch">
-            <!-- 搜索 监听回车-->
-            <el-input v-model="searchCondition.name" clearable placeholder="输入名称搜索" style="width: 200px;"
-                @keyup.enter.native="search" />
-            <!-- 日期搜索 -->
-            <el-date-picker v-model="searchCondition.date" type="date" placeholder="输入日期搜索"
-                style="width: 200px;margin: 0 10px 0 10px;" />
+        <search-operation v-show="SSearch" :searchCondition="searchCondition" @RefreshLeft="RefreshLeft">
+            <!-- 具名插槽 -->
+            <slot name="search" :searchCondition="searchCondition" />
         </search-operation>
 
         <!-- CRUD组件 -->
@@ -17,14 +13,16 @@
 
         <!-- 表单组件 -->
         <el-table ref="multipleTableRef" :data="testData" @selection-change="handleSelectionChange"
-            style="width: 100%;margin: 20px 0 20px 0">
+            style="width: 100%;margin: 20px 0 20px 0" :border="tableFrom.border">
             <!-- 表头拓展 -->
-            <el-table-column v-for="(item,index) in tableFrom.extend" :key="index" :type="item.type"
-                :width="item.width" />
+            <el-table-column v-for="(item,index) in tableFrom.extend" :key="index" :type="item.type" :width="item.width"
+                :label="item.label" />
             <!-- 字段内容 -->
             <el-table-column v-for="(item,index) in tableFrom.field" :key="index" :prop="item.prop" :label="item.label"
-                :width="item.width" />
-            <el-table-column>
+                :width="item.width" :show-overflow-tooltip="!item.overflow" />
+
+            <el-table-column :fixed="tableFrom.operateFixed ? 'right' : 'false'" :label="tableFrom.operateTitle"
+                width="150px">
                 <!-- 默认插槽值 -->
                 <template #default="scope">
                     <ud-operation :scope="scope" :data="testData" @handleEdit="handleEdit" @handleDelete="handleDelete">
@@ -79,12 +77,6 @@
     import crudOperation from '@/crud/components/CRUD.operation.vue'
     import searchOperation from '@/crud/components/Search.operation.vue'
     import udOperation from '@/crud/components/UD.operation.vue'
-    import {
-        homeData
-    } from '@/data/tableConfig' //表单配置
-    import {
-        tableData
-    } from "@/data/tableData" //表单数据
     import {
         reactive,
         ref,
@@ -94,9 +86,29 @@
     // 声明事件
     const emit = defineEmits(['add', 'remove', 'refresh', 'edit', 'search', 'submit', 'handleEdit', 'handleDelete'])
 
-    const tableFrom = homeData.table //表单字段
+    // 声明props
+    const props = defineProps({
+        homeData: {
+            type: Object,
+            default: function () {
+                return {}
+            }
+        },
+        tableData: {
+            type: Array,
+            default: function () {
+                return []
+            }
+        },
+        text: {
+            type: String,
+            default: ''
+        }
+    })
+
+    const tableFrom = props.homeData ? props.homeData.table : [] //表单字段
     const multipleTableRef = ref() //表单ref(清空全选)
-    const testData = ref(tableData) //表单数据
+    const testData = ref(props.tableData) //表单数据
     const visible = ref(false) //删除提示框是否显示
     const dialogFormVisible = ref(false) //表单弹框是否显示
     const formLabelWidth = '80px' //默认表单宽度
@@ -111,20 +123,22 @@
     let initRules = {}
     let initForm = {}
     //初始化数据
-    tableFrom.field.forEach(element => {
-        initForm[element.prop] = ''
-        if (element.form.required) {
-            initRules[element.prop] = [{
-                required: true,
-                message: element.label + '不能为空',
-                trigger: 'blur'
-            }]
-        }
-    });
+    if (tableFrom) {
+        tableFrom.field.forEach(element => {
+            initForm[element.prop] = ''
+            if (element.form.required) {
+                initRules[element.prop] = [{
+                    required: true,
+                    message: element.label + '不能为空',
+                    trigger: 'blur'
+                }]
+            }
+        });
+    }
     const rules = reactive(initRules)
 
     //搜索条件
-    const searchCondition = reactive({
+    let searchCondition = reactive({
         name: '',
         date: ''
     })
@@ -132,6 +146,11 @@
     //表单字段
     const form = ref(initForm)
 
+    //重置
+    const RefreshLeft = () => {
+        Object.keys(searchCondition).forEach(key => (searchCondition[key] = ''));
+    }
+
     //添加
     const add = () => {
         console.log('点击了添加按钮');

src/data/cardAfter/cardFillDo.ts

@@ -0,0 +1,100 @@
+export const Data = {
+    search: {
+        fileOne: '',
+        fileTwo: '',
+        fileThree: ''
+    },
+    table: {
+        style: '',
+        extend: [{
+            type: 'index',
+            label: '序号',
+            width: '80'
+        }],
+        field: [ //表格
+            {
+                prop: 'name',
+                label: '客户名称',
+                width: '120',
+                overflow: true,
+                form: {
+                    required: true,
+                    type: 'input',
+                    placeholder: '请输入客户名称'
+                }
+            }, {
+                prop: 'name',
+                label: '车牌号码',
+                width: '120',
+                form: {
+                    required: true,
+                    type: 'input',
+                    placeholder: '请输入车牌号码'
+                }
+            }, {
+                prop: 'name',
+                label: '车牌颜色',
+                width: '120',
+                form: {
+                    required: true,
+                    type: 'input',
+                    placeholder: '请输入车牌颜色'
+                }
+            }, {
+                prop: 'name',
+                label: '卡号',
+                width: '180',
+                form: {
+                    required: true,
+                    type: 'input',
+                    placeholder: '卡号'
+                }
+            }, {
+                prop: 'name',
+                label: '卡片状态',
+                width: '120',
+                form: {
+                    required: true,
+                    type: 'input',
+                    placeholder: '请输入卡片状态'
+                }
+            }, {
+                prop: 'name',
+                label: '卡片类型',
+                width: '120',
+                form: {
+                    required: true,
+                    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: '操作',
+        operateFixed: true,
+        isOperate: true,
+        operate: {
+            edit: true,
+            delete: true
+        }
+    }
+}

src/data/menuData.ts

@@ -22,23 +22,23 @@ export const list = [
                 path: 'home',
                 children: [{
                     title: '用户信息查询及变更服务',
-                    path: 'home',
+                    path: 'userQueryChange',
                     children: []
                 }, {
                     title: '车辆信息查询及变更服务',
-                    path: 'home',
+                    path: 'vehicleEnquirChange',
                     children: []
                 }, {
                     title: '签约信息查询服务',
-                    path: 'home',
+                    path: 'signingQuery',
                     children: []
                 }, {
                     title: '卡片信息查询服务',
-                    path: 'home',
+                    path: 'cardQueries',
                     children: []
                 }, {
                     title: 'OBU信息查询服务',
-                    path: 'home',
+                    path: 'OBUQuery',
                     children: []
                 }]
             },

src/data/tableConfig.ts

@@ -1,4 +1,7 @@
 export const cfg = {
+    search: { //搜索字段配置
+
+    },
     table: { //table 样式配置
         style: '', //默认表格样式
         extend: [{ //表头拓展
@@ -10,6 +13,7 @@ export const cfg = {
                 prop: '', //字段名称
                 label: '', //字段标识
                 width: '', //字段表头宽度
+                overflow: true, //文本超出是否显示省略号(默认false)
                 form: { //表单内容
                     required: true, //表单是否不能为空
                     type: '', //表单类型
@@ -22,7 +26,10 @@ export const cfg = {
                 }
             }
         ],
-        isOperate: true, //是否为表格添加操作处理
+        border: false, //是否添加边框(默认false)
+        operateTitle: '', //操作栏标题
+        operateFixed: false, //操作栏是否固定(默认false)
+        isOperate: true, //是否为表格添加操作处(默认true)
         operate: {
             edit: true, //是否编辑
             delete: true //是否删除

src/layout/components/TabControl.vue

@@ -1,7 +1,7 @@
 <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

@@ -1,10 +1,10 @@
 <template>
   <!-- :sources="[bgVideo]" -->
-  <video-bg >
+  <video-bg :sources="[]">
     <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;" />
@@ -12,8 +12,8 @@
         </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>
 
@@ -30,14 +30,16 @@
           <div style=" background-color: #ffffff; padding: 10px 0px 10px 0px">
             <!-- 选项卡 -->
             <TabContainer>
-              <!-- 主体内容页面 -->
-              <!-- 路由缓存 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/router/index.ts

@@ -30,6 +30,46 @@ const routes: RouteRecordRaw[] = [
           key: () => import('@/views/system/menu/index.vue'),
         },
       },
+      {
+        path: '/views/weixingrong/cardQueries',
+        name: 'cardQueries',
+        meta: { title: '卡片信息查询', isAuth: true }, //用户自定内容
+        components: {
+          key: () => import('@/views/weixingrong/cardQueries/cardQueries.vue'),
+        },
+      },
+      {
+        path: '/views/weixingrong/OBUQuery',
+        name: 'OBUQuery',
+        meta: { title: 'OBU信息查询', isAuth: true }, //用户自定内容
+        components: {
+          key: () => import('@/views/weixingrong/OBUQuery/OBUQuery.vue'),
+        },
+      },
+      {
+        path: '/views/weixingrong/signingQuery',
+        name: 'signingQuery',
+        meta: { title: '签约信息查询', isAuth: true }, //用户自定内容
+        components: {
+          key: () => import('@/views/weixingrong/signingQuery/signingQuery.vue'),
+        },
+      },
+      {
+        path: '/views/weixingrong/userQueryChange',
+        name: 'userQueryChange',
+        meta: { title: '用户信息查询', isAuth: true }, //用户自定内容
+        components: {
+          key: () => import('@/views/weixingrong/userQueryChange/userQueryChange.vue'),
+        },
+      },
+      {
+        path: '/views/weixingrong/vehicleEnquirChange',
+        name: 'vehicleEnquirChange',
+        meta: { title: '车辆信息查询', isAuth: true }, //用户自定内容
+        components: {
+          key: () => import('@/views/weixingrong/vehicleEnquirChange/vehicleEnquirChange.vue'),
+        },
+      },
       {
         path: '/views/fancongcong/advancepaymentaccount',
         name: 'advancepaymentaccount',

src/views/dengmingcong/cardFillDo/cardFillDo.vue

@@ -1,10 +1,72 @@
 <template>
-    <div>
-        卡签补办
-    </div>
+    <!-- 卡签补办 -->
+    <CRUD :homeData="Data" text="123">
+        <template #search="{ searchCondition }">
+            <!-- 搜索 监听回车 @keyup.enter.native="search"-->
+            <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>
 <script setup lang="ts">
+    import CRUD from "@/crud/index.vue";
+    // import {
+    //     homeData
+    // } from '@/data/tableConfig' //表单配置
+    import {
+        Data
+    } from '@/data/cardAfter/cardFillDo' //表单配置
+    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>
 

src/views/system/home/Home.vue

@@ -1,5 +1,5 @@
 <template>
-  <CRUD @add="add"></CRUD>
+  <!-- <CRUD @add="add"></CRUD> -->
 </template>
 
 <script lang="ts" setup>

src/views/weixingrong/OBUQuery/OBUQuery.vue

@@ -0,0 +1,9 @@
+<script lang='ts' setup>
+    
+</script>
+<template>
+    OBU信息查询服务
+</template>
+<style scoped>
+    
+</style>

src/views/weixingrong/cardQueries/cardQueries.vue

@@ -0,0 +1,9 @@
+<script lang='ts' setup>
+    
+</script>
+<template>
+    卡片信息查询服务
+</template>
+<style scoped>
+    
+</style>

src/views/weixingrong/signingQuery/signingQuery.vue

@@ -0,0 +1,9 @@
+<script lang='ts' setup>
+    
+</script>
+<template>
+    签约信息查询服务
+</template>
+<style scoped>
+    
+</style>

src/views/weixingrong/userQueryChange/userQueryChange.vue

@@ -0,0 +1,9 @@
+<script lang='ts' setup>
+    
+</script>
+<template>
+    用户查询及变更服务
+</template>
+<style scoped>
+    
+</style>

src/views/weixingrong/vehicleEnquirChange/vehicleEnquirChange.vue

@@ -0,0 +1,9 @@
+<script lang='ts' setup>
+    
+</script>
+<template>
+    车辆信息查询及变更服务
+</template>
+<style scoped>
+    
+</style>