#app { | #app { | ||||
width: 100%; | width: 100%; | ||||
height: 100%; | height: 100%; | ||||
font-family: 'Microsoft Yahei', Arial, sans-serif | |||||
} | } | ||||
</style> | </style> |
<section class="VideoBg"> | <section class="VideoBg"> | ||||
<video ref="video" autoplay loop muted> | <video ref="video" autoplay loop muted> | ||||
<!-- 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> | </video> | ||||
<div class="VideoBg__content"> | <div class="VideoBg__content"> | ||||
<slot /> | <slot /> | ||||
</template> | </template> | ||||
<script> | <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()) { | 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> | </script> | ||||
//相对定位 center(中间) cover(覆盖) overflow: hidden(溢出隐藏) | //相对定位 center(中间) cover(覆盖) overflow: hidden(溢出隐藏) | ||||
<style> | <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> |
<template> | <template> | ||||
<span> | <span> | ||||
<slot /> | <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> | </span> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
export default { | export default { | ||||
mixins: [crudConfig()], //运用混入的的方法 | mixins: [crudConfig()], //运用混入的的方法 | ||||
props: { //插值 | props: { //插值 | ||||
searchCondition: { | |||||
type: Object, | |||||
default: function () { | |||||
return {} | |||||
} | |||||
} | |||||
}, | }, | ||||
mounted() { | mounted() { | ||||
} | } | ||||
}, | }, | ||||
methods: { //方法 | methods: { //方法 | ||||
Search() { //搜索 | |||||
console.log(this.searchCondition,'====='); | |||||
}, | |||||
RefreshLeft() { //重置 | |||||
this.$emit('RefreshLeft') | |||||
} | |||||
} | } | ||||
} | } | ||||
</script> | </script> |
<template> | <template> | ||||
<div style="opacity: 1;background-color: #FFF;padding:20px"> | <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> | </search-operation> | ||||
<!-- CRUD组件 --> | <!-- CRUD组件 --> | ||||
<!-- 表单组件 --> | <!-- 表单组件 --> | ||||
<el-table ref="multipleTableRef" :data="testData" @selection-change="handleSelectionChange" | <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" | <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"> | <template #default="scope"> | ||||
<ud-operation :scope="scope" :data="testData" @handleEdit="handleEdit" @handleDelete="handleDelete"> | <ud-operation :scope="scope" :data="testData" @handleEdit="handleEdit" @handleDelete="handleDelete"> | ||||
import crudOperation from '@/crud/components/CRUD.operation.vue' | import crudOperation from '@/crud/components/CRUD.operation.vue' | ||||
import searchOperation from '@/crud/components/Search.operation.vue' | import searchOperation from '@/crud/components/Search.operation.vue' | ||||
import udOperation from '@/crud/components/UD.operation.vue' | import udOperation from '@/crud/components/UD.operation.vue' | ||||
import { | |||||
homeData | |||||
} from '@/data/tableConfig' //表单配置 | |||||
import { | |||||
tableData | |||||
} from "@/data/tableData" //表单数据 | |||||
import { | import { | ||||
reactive, | reactive, | ||||
ref, | ref, | ||||
// 声明事件 | // 声明事件 | ||||
const emit = defineEmits(['add', 'remove', 'refresh', 'edit', 'search', 'submit', 'handleEdit', 'handleDelete']) | 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 multipleTableRef = ref() //表单ref(清空全选) | ||||
const testData = ref(tableData) //表单数据 | |||||
const testData = ref(props.tableData) //表单数据 | |||||
const visible = ref(false) //删除提示框是否显示 | const visible = ref(false) //删除提示框是否显示 | ||||
const dialogFormVisible = ref(false) //表单弹框是否显示 | const dialogFormVisible = ref(false) //表单弹框是否显示 | ||||
const formLabelWidth = '80px' //默认表单宽度 | const formLabelWidth = '80px' //默认表单宽度 | ||||
let initRules = {} | let initRules = {} | ||||
let initForm = {} | 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 rules = reactive(initRules) | ||||
//搜索条件 | //搜索条件 | ||||
const searchCondition = reactive({ | |||||
let searchCondition = reactive({ | |||||
name: '', | name: '', | ||||
date: '' | date: '' | ||||
}) | }) | ||||
//表单字段 | //表单字段 | ||||
const form = ref(initForm) | const form = ref(initForm) | ||||
//重置 | |||||
const RefreshLeft = () => { | |||||
Object.keys(searchCondition).forEach(key => (searchCondition[key] = '')); | |||||
} | |||||
//添加 | //添加 | ||||
const add = () => { | const add = () => { | ||||
console.log('点击了添加按钮'); | console.log('点击了添加按钮'); |
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 | |||||
} | |||||
} | |||||
} |
path: 'home', | path: 'home', | ||||
children: [{ | children: [{ | ||||
title: '用户信息查询及变更服务', | title: '用户信息查询及变更服务', | ||||
path: 'home', | |||||
path: 'userQueryChange', | |||||
children: [] | children: [] | ||||
}, { | }, { | ||||
title: '车辆信息查询及变更服务', | title: '车辆信息查询及变更服务', | ||||
path: 'home', | |||||
path: 'vehicleEnquirChange', | |||||
children: [] | children: [] | ||||
}, { | }, { | ||||
title: '签约信息查询服务', | title: '签约信息查询服务', | ||||
path: 'home', | |||||
path: 'signingQuery', | |||||
children: [] | children: [] | ||||
}, { | }, { | ||||
title: '卡片信息查询服务', | title: '卡片信息查询服务', | ||||
path: 'home', | |||||
path: 'cardQueries', | |||||
children: [] | children: [] | ||||
}, { | }, { | ||||
title: 'OBU信息查询服务', | title: 'OBU信息查询服务', | ||||
path: 'home', | |||||
path: 'OBUQuery', | |||||
children: [] | children: [] | ||||
}] | }] | ||||
}, | }, |
export const cfg = { | export const cfg = { | ||||
search: { //搜索字段配置 | |||||
}, | |||||
table: { //table 样式配置 | table: { //table 样式配置 | ||||
style: '', //默认表格样式 | style: '', //默认表格样式 | ||||
extend: [{ //表头拓展 | extend: [{ //表头拓展 | ||||
prop: '', //字段名称 | prop: '', //字段名称 | ||||
label: '', //字段标识 | label: '', //字段标识 | ||||
width: '', //字段表头宽度 | width: '', //字段表头宽度 | ||||
overflow: true, //文本超出是否显示省略号(默认false) | |||||
form: { //表单内容 | form: { //表单内容 | ||||
required: true, //表单是否不能为空 | required: true, //表单是否不能为空 | ||||
type: '', //表单类型 | type: '', //表单类型 | ||||
} | } | ||||
} | } | ||||
], | ], | ||||
isOperate: true, //是否为表格添加操作处理 | |||||
border: false, //是否添加边框(默认false) | |||||
operateTitle: '', //操作栏标题 | |||||
operateFixed: false, //操作栏是否固定(默认false) | |||||
isOperate: true, //是否为表格添加操作处(默认true) | |||||
operate: { | operate: { | ||||
edit: true, //是否编辑 | edit: true, //是否编辑 | ||||
delete: true //是否删除 | delete: true //是否删除 |
<template> | <template> | ||||
<!-- 标签选项卡模块 :model-value="props.editableTabsValue"(只读) --> | <!-- 标签选项卡模块 :model-value="props.editableTabsValue"(只读) --> | ||||
<el-tabs v-model="editableTabsValue.index" type="card" @tab-click="tabClick" @tab-remove="removeTab" | <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" | <el-tab-pane v-for="item in editableTabs" :key="item.name" :closable="item.start" :label="item.title" | ||||
:name="item.name"> | :name="item.name"> | ||||
<slot></slot> | <slot></slot> |
<template> | <template> | ||||
<!-- :sources="[bgVideo]" --> | <!-- :sources="[bgVideo]" --> | ||||
<video-bg > | |||||
<video-bg :sources="[]"> | |||||
<div class="as-layout-horizontal" style="width: 100%; height: 100%;opacity: 0.9;"> | <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%;"> | <div class="as-gravity-center-start" style="height: 10%;"> | ||||
<img rel="icon" src="/logo2.png" style="width: 60px;height: 60px;" /> | <img rel="icon" src="/logo2.png" style="width: 60px;height: 60px;" /> | ||||
</div> | </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" /> | <SidebarItem :list="list" /> | ||||
</el-menu> | </el-menu> | ||||
<div style=" background-color: #ffffff; padding: 10px 0px 10px 0px"> | <div style=" background-color: #ffffff; padding: 10px 0px 10px 0px"> | ||||
<!-- 选项卡 --> | <!-- 选项卡 --> | ||||
<TabContainer> | <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> | </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> | </div> | ||||
</div> | </div> |
key: () => import('@/views/system/menu/index.vue'), | 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', | path: '/views/fancongcong/advancepaymentaccount', | ||||
name: 'advancepaymentaccount', | name: 'advancepaymentaccount', |
<template> | <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> | </template> | ||||
<script setup lang="ts"> | <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> | </script> | ||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
<template> | <template> | ||||
<CRUD @add="add"></CRUD> | |||||
<!-- <CRUD @add="add"></CRUD> --> | |||||
</template> | </template> | ||||
<script lang="ts" setup> | <script lang="ts" setup> |
<script lang='ts' setup> | |||||
</script> | |||||
<template> | |||||
OBU信息查询服务 | |||||
</template> | |||||
<style scoped> | |||||
</style> |
<script lang='ts' setup> | |||||
</script> | |||||
<template> | |||||
卡片信息查询服务 | |||||
</template> | |||||
<style scoped> | |||||
</style> |
<script lang='ts' setup> | |||||
</script> | |||||
<template> | |||||
签约信息查询服务 | |||||
</template> | |||||
<style scoped> | |||||
</style> |
<script lang='ts' setup> | |||||
</script> | |||||
<template> | |||||
用户查询及变更服务 | |||||
</template> | |||||
<style scoped> | |||||
</style> |
<script lang='ts' setup> | |||||
</script> | |||||
<template> | |||||
车辆信息查询及变更服务 | |||||
</template> | |||||
<style scoped> | |||||
</style> |