dmc
/
test-web
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

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

master
kelly520010 3 years ago
parent
29009e4fca 5acda7a590
commit
9719d6e408
7 changed files with 254 additions and 126 deletions
Split View Show Diff Stats
  1. 103
    100
      src/components/VideoBackround/VideoBackground.vue
  2. 40
    20
      src/crud/index.vue
  3. 95
    0
      src/data/cardAfter/cardFillDo.ts
  4. 2
    0
      src/data/tableConfig.ts
  5. 1
    1
      src/layout/index.vue
  6. 12
    4
      src/views/dengmingcong/cardFillDo/cardFillDo.vue
  7. 1
    1
      src/views/system/home/Home.vue

+ 103
- 100
src/components/VideoBackround/VideoBackground.vue View File

@@ -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>

+ 40
- 20
src/crud/index.vue View File

@@ -20,11 +20,12 @@
style="width: 100%;margin: 20px 0 20px 0">
<!-- 表头拓展 -->
<el-table-column v-for="(item,index) in tableFrom.extend" :key="index" :type="item.type"
:width="item.width" />
: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>

<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 +80,8 @@
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 +91,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,16 +128,19 @@
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) {
console.log('123');
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)

//搜索条件

+ 95
- 0
src/data/cardAfter/cardFillDo.ts View File

@@ -0,0 +1,95 @@
export const Data = {
config: {

},
table: {
style: '',
extend: [{
type: 'index',
label: '序号',
width: '80'
}],
field: [
{
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: '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: '卡号',
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: '请输入卡片类型'
}
}
],
operateTitle: '操作',
operateFixed: true,
isOperate: true,
operate: {
edit: true,
delete: true
}
}
}

+ 2
- 0
src/data/tableConfig.ts View File

@@ -22,6 +22,8 @@ export const cfg = {
}
}
],
operateTitle: '', //操作栏标题
operateFixed: true, //操作栏是否固定
isOperate: true, //是否为表格添加操作处理
operate: {
edit: true, //是否编辑

+ 1
- 1
src/layout/index.vue View File

@@ -1,6 +1,6 @@
<template>
<!-- :sources="[bgVideo]" -->
<video-bg >
<video-bg :sources="[]">
<div class="as-layout-horizontal" style="width: 100%; height: 100%;opacity: 0.9;">
<!-- 此处先划出布局形式(按左右布局划分，左边菜单，右边内容) -->
<!-- 菜单部分 -->

+ 12
- 4
src/views/dengmingcong/cardFillDo/cardFillDo.vue View File

@@ -1,10 +1,18 @@
<template>
<div>
卡签补办
</div>
<!-- 卡签补办 -->
<CRUD :homeData="Data" text="123"></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" //表单数据
</script>
<style lang="scss" scoped>


+ 1
- 1
src/views/system/home/Home.vue View File

@@ -1,5 +1,5 @@
<template>
<CRUD @add="add"></CRUD>
<!-- <CRUD @add="add"></CRUD> -->
</template>

<script lang="ts" setup>

Write Preview
Loading…
Cancel
Save