修复菜单问题、项目适配问题、封装上传视频组件

master
许宏杰 1 year ago
parent 94e714e10c
commit 9c588d787f

@ -11,11 +11,14 @@ import autofit from "autofit.js";
export default { export default {
name: "App", name: "App",
mounted() { mounted() {
// //
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
// ()
autofit.init( autofit.init(
{ {
dh: 1080, dh: screenHeight,
dw: 1920, dw: screenWidth,
el: "#app", el: "#app",
resize: true, resize: true,
}, },

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1700631451812" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11746" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M972.8 0H51.2a51.2 51.2 0 0 0-51.2 51.2v716.8a51.2 51.2 0 0 0 51.2 51.2h921.6a51.2 51.2 0 0 0 51.2-51.2V51.2a51.2 51.2 0 0 0-51.2-51.2z m-51.2 716.8H102.4V102.4h819.2zM972.8 921.6H51.2a51.2 51.2 0 0 0 0 102.4h921.6a51.2 51.2 0 0 0 0-102.4z" p-id="11747"></path><path d="M256 512h137.216l29.184 107.008H512L375.808 200.704H278.016l-133.632 417.792h84.48z m30.208-110.592c12.288-43.52 24.576-90.624 35.328-136.192h2.56c11.776 45.056 23.04 93.184 35.84 136.192l12.288 45.568H276.48zM879.616 409.6c0-140.8-78.848-204.8-204.8-204.8h-115.712v417.28h118.784c122.88-3.584 201.728-73.728 201.728-212.48z m-237.056 142.848V267.776h26.112c77.824 0 125.952 38.4 125.952 140.288s-48.64 142.848-125.952 142.848z" p-id="11748"></path></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1700631602331" class="icon" viewBox="0 0 1251 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11901" xmlns:xlink="http://www.w3.org/1999/xlink" width="156.375" height="128"><path d="M114.062222 347.591111h0.284445-0.284445M583.395556 0a39.253333 39.253333 0 0 0-32.426667 17.635556L455.111111 150.471111a248.32 248.32 0 0 1-157.297778 101.546667l-113.777777 20.195555a339.057778 339.057778 0 0 1-44.942223 4.835556c-12.8 0-24.746667 1.706667-44.657777 3.413333C12.515556 294.968889 0 512 0 512s12.515556 217.031111 94.151111 231.537778c19.911111 1.706667 31.857778 2.844444 44.657778 3.413333a339.057778 339.057778 0 0 1 44.942222 4.835556l113.777778 20.195555A248.32 248.32 0 0 1 455.111111 873.528889l95.857778 132.835555a39.537778 39.537778 0 0 0 32.426667 17.635556A44.657778 44.657778 0 0 0 625.777778 976.782222V47.217778A44.657778 44.657778 0 0 0 583.395556 0z m232.106666 778.808889c92.728889-85.333333 137.955556-178.915556 134.257778-275.911111-5.404444-152.177778-130.844444-256-136.248889-259.413334a35.868444 35.868444 0 1 0-45.511111 55.466667s105.528889 85.333333 110.08 206.506667C881.777778 580.835556 843.946667 654.222222 768 726.755556a35.555556 35.555556 0 0 0-1.991111 50.346666 36.124444 36.124444 0 0 0 50.346667 1.706667z m224.142222 153.031111c153.315556-162.986667 223.857778-327.395556 210.204445-488.96A533.333333 533.333333 0 0 0 1055.288889 88.177778a35.555556 35.555556 0 1 0-42.666667 56.888889s150.471111 116.053333 166.4 304.355555c11.946667 140.231111-52.337778 286.151111-191.146666 434.062222a35.555556 35.555556 0 0 0 25.884444 59.733334 35.84 35.84 0 0 0 25.884444-11.377778zM203.662222 547.555556H137.386667A39.253333 39.253333 0 0 1 95.288889 512a39.253333 39.253333 0 0 1 42.097778-35.555556h66.275555A39.253333 39.253333 0 0 1 245.76 512a39.253333 39.253333 0 0 1-42.097778 35.555556z" p-id="11902"></path></svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1700631301508" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8792" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M801.8432 530.3296a51.1488 51.1488 0 1 0-72.3968-72.3968 51.1488 51.1488 0 1 0 72.3968 72.3968zM681.0112 708.096a38.4 38.4 0 0 0 27.136-65.536L382.3616 316.7232a38.4 38.4 0 0 0-54.3232 54.272l325.8368 325.8368c7.5264 7.5264 17.3568 11.264 27.136 11.264z" p-id="8793"></path><path d="M973.4144 647.5776l-70.7584-70.8096a38.4 38.4 0 1 0-54.3232 54.3232l70.7584 70.8096a64.2048 64.2048 0 0 1 0 90.5728l-126.72 126.72a64.256 64.256 0 0 1-90.5216 0L512 729.2416a38.4 38.4 0 1 0-54.3232 54.3232l189.8496 189.9008a140.288 140.288 0 0 0 99.5328 41.1648c36.096 0 72.1408-13.7216 99.584-41.1648l126.72-126.72a141.0048 141.0048 0 0 0 0.0512-199.168zM104.8576 322.0992a63.488 63.488 0 0 1-18.5856-45.2096c0-17.2032 6.6048-33.2288 18.6368-45.2608l126.72-126.7712a64.1024 64.1024 0 0 1 90.5216 0L512 294.7584a38.4 38.4 0 1 0 54.3232-54.3232L376.4224 50.5856a140.9536 140.9536 0 0 0-199.1168 0L50.5856 177.3056a139.776 139.776 0 0 0-41.1136 99.584c0 37.632 14.592 73.0112 41.1136 99.5328l189.9008 189.9008a38.2976 38.2976 0 0 0 54.272 0 38.4 38.4 0 0 0 0-54.3232L104.8576 322.0992z" p-id="8794"></path></svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1700631659368" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12965" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M825.6 820.48a520.96 520.96 0 0 0-85.333333-54.186667 730.88 730.88 0 0 0 42.666666-232.106666h170.666667a438.186667 438.186667 0 0 1-128 286.293333z m-196.266667 115.626667a349.44 349.44 0 0 0 80.64-104.106667 444.586667 444.586667 0 0 1 59.306667 35.84 438.613333 438.613333 0 0 1-139.52 68.266667zM554.666667 902.4v-115.626667a441.173333 441.173333 0 0 1 93.013333 18.773334A206.933333 206.933333 0 0 1 554.666667 902.4z m0-368.213333h156.586666a696.746667 696.746667 0 0 1-34.986666 205.226666 512 512 0 0 0-121.6-24.746666z m0-224.426667a506.026667 506.026667 0 0 0 121.6-24.746667 674.986667 674.986667 0 0 1 33.706666 177.493334H554.666667z m0-187.733333a206.933333 206.933333 0 0 1 93.013333 96.426666 439.893333 439.893333 0 0 1-93.013333 18.773334z m217.6 34.56a438.186667 438.186667 0 0 1-59.306667 35.84 350.72 350.72 0 0 0-80.64-104.106667 436.48 436.48 0 0 1 138.24 67.84z m178.773333 305.92h-170.666667a721.066667 721.066667 0 0 0-42.666666-203.946667 512 512 0 0 0 85.333333-54.186667 438.186667 438.186667 0 0 1 126.293333 257.706667z m-469.333333-224a437.76 437.76 0 0 1-102.826667-19.626667 194.986667 194.986667 0 0 1 102.826667-100.266667z m0 224h-166.4a682.666667 682.666667 0 0 1 33.706666-177.493334 512 512 0 0 0 131.84 25.6v151.893334z m0 251.733333a508.16 508.16 0 0 0-131.84 25.6 696.746667 696.746667 0 0 1-34.986667-205.226667h166.826667z m0 192a195.84 195.84 0 0 1-102.826667-100.266667 437.76 437.76 0 0 1 102.826667-19.626666z m-227.413334-37.973333H256a438.186667 438.186667 0 0 1 59.306667-35.84 350.72 350.72 0 0 0 80.64 104.106666 436.48 436.48 0 0 1-142.506667-68.693333zM72.533333 534.186667h170.666667a733.44 733.44 0 0 0 42.666667 232.106666 512 512 0 0 0-85.333334 54.186667 438.186667 438.186667 0 0 1-128-286.293333z m125.866667-330.666667A520.96 520.96 0 0 0 284.586667 256a721.066667 721.066667 0 0 0-42.666667 203.946667h-170.666667a438.186667 438.186667 0 0 1 127.146667-256.426667z m196.266667-115.626667A349.44 349.44 0 0 0 314.026667 192 444.586667 444.586667 0 0 1 256 156.16a438.613333 438.613333 0 0 1 138.24-68.266667zM512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z" p-id="12966"></path></svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1700630701955" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3505" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M336 256m-192 0a192 192 0 1 0 384 0 192 192 0 1 0-384 0Z" fill="#606266" p-id="3506"></path><path d="M336 544.256c25.28 0 49.088 2.304 71.488 7.04-0.64 4.48-0.896 9.088-0.896 13.632v214.144c0 18.816 4.736 36.928 13.312 52.928H51.264a19.2 19.2 0 0 1-18.432-24.32c49.024-175.488 150.08-263.296 303.168-263.424zM736 402.496l185.408 107.008a64 64 0 0 1 32 55.424v214.144a64 64 0 0 1-32 55.424L736 941.44a64 64 0 0 1-64 0L486.592 834.56a64 64 0 0 1-32-55.424V564.928a64 64 0 0 1 32-55.424L672 402.56a64 64 0 0 1 64 0zM704 576a96 96 0 1 0 0 192 96 96 0 0 0 0-192z" fill="#606266" p-id="3507"></path></svg>

After

Width:  |  Height:  |  Size: 932 B

@ -0,0 +1,122 @@
<template>
<el-upload
class="avatar-uploader"
:action="uploadVideoUrl"
:on-progress="uploadVideoProcess"
:on-success="handleVideoSuccess"
:before-upload="beforeUploadVideo"
:show-file-list="false"
:headers="headers"
>
<video
v-if="videoForm.showVideoPath != '' && !videoFlag"
v-bind:src="videoForm.showVideoPath"
class="avatar video-avatar"
controls="controls"
>
您的浏览器不支持视频播放
</video>
<i
v-else-if="videoForm.showVideoPath == '' && !videoFlag"
class="el-icon-plus avatar-uploader-icon"
></i>
<el-progress
v-if="videoFlag == true"
type="circle"
v-bind:percentage="videoUploadPercent"
style="margin-top: 7px"
></el-progress>
</el-upload>
</template>
<script>
import { getToken } from "@/utils/auth";
export default {
data() {
return {
baseUrl: process.env.VUE_APP_BASE_API,
uploadVideoUrl: process.env.VUE_APP_BASE_API + "/common/upload",
headers: {
Authorization: "Bearer " + getToken(),
},
videoFlag: false,
//
videoUploadPercent: "",
//
isShowUploadVideo: false,
//
videoForm: {
showVideoPath: "", //
},
};
},
methods: {
//
beforeUploadVideo(file) {
var fileSize = file.size / 1024 / 1024 < 50; // 50
if (
[
"video/mp4",
"video/ogg",
"video/flv",
"video/avi",
"video/wmv",
"video/rmvb",
"video/mov",
].indexOf(file.type) == -1 //
) {
this.$modal.msgError("请上传正确的视频格式");
return false;
}
if (!fileSize) {
this.$modal.msgError("视频大小不能超过50MB");
return false;
}
this.isShowUploadVideo = false;
},
//
uploadVideoProcess(event, file, fileList) {
//data
this.videoFlag = true;
this.videoUploadPercent = file.percentage.toFixed(0) * 1;
},
//
handleVideoSuccess(res, file) {
this.isShowUploadVideo = true;
this.videoFlag = false;
this.videoUploadPercent = 0;
console.log(res);
this.videoForm.showVideoPath = res.url;
},
},
};
</script>
<style lang="scss" scoped>
.avatar-uploader-icon {
border: 1px dashed #d9d9d9 !important;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9 !important;
border-radius: 6px !important;
position: relative !important;
overflow: hidden !important;
}
.avatar-uploader .el-upload:hover {
border: 1px dashed #d9d9d9 !important;
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 300px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 300px;
height: 178px;
display: block;
}
</style>

@ -1,67 +1,77 @@
import Vue from 'vue' import Vue from "vue";
import Cookies from 'js-cookie' import Cookies from "js-cookie";
import Element from 'element-ui' import Element from "element-ui";
import './assets/styles/element-variables.scss' import "./assets/styles/element-variables.scss";
import '@/assets/styles/index.scss' // global css import "@/assets/styles/index.scss"; // global css
import '@/assets/styles/ruoyi.scss' // ruoyi css import "@/assets/styles/ruoyi.scss"; // ruoyi css
import App from './App' import App from "./App";
import store from './store' import store from "./store";
import router from './router' import router from "./router";
import directive from './directive' // directive import directive from "./directive"; // directive
import plugins from './plugins' // plugins import plugins from "./plugins"; // plugins
import { download } from '@/utils/request' import { download } from "@/utils/request";
import './assets/icons' // icon import "./assets/icons"; // icon
import './permission' // permission control import "./permission"; // permission control
import { getDicts } from "@/api/system/dict/data"; import { getDicts } from "@/api/system/dict/data";
import { getConfigKey } from "@/api/system/config"; import { getConfigKey } from "@/api/system/config";
import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi"; import {
parseTime,
resetForm,
addDateRange,
selectDictLabel,
selectDictLabels,
handleTree,
} from "@/utils/ruoyi";
// 分页组件 // 分页组件
import Pagination from "@/components/Pagination"; import Pagination from "@/components/Pagination";
// 自定义表格工具组件 // 自定义表格工具组件
import RightToolbar from "@/components/RightToolbar" import RightToolbar from "@/components/RightToolbar";
// 富文本组件 // 富文本组件
import Editor from "@/components/Editor" import Editor from "@/components/Editor";
// 文件上传组件 // 文件上传组件
import FileUpload from "@/components/FileUpload" import FileUpload from "@/components/FileUpload";
// 图片上传组件 // 图片上传组件
import ImageUpload from "@/components/ImageUpload" import ImageUpload from "@/components/ImageUpload";
// 图片预览组件 // 图片预览组件
import ImagePreview from "@/components/ImagePreview" import ImagePreview from "@/components/ImagePreview";
// 字典标签组件 // 字典标签组件
import DictTag from '@/components/DictTag' import DictTag from "@/components/DictTag";
// 头部标签组件 // 头部标签组件
import VueMeta from 'vue-meta' import VueMeta from "vue-meta";
// 字典数据组件 // 字典数据组件
import DictData from '@/components/DictData' import DictData from "@/components/DictData";
//上传视频
import VideoUpload from "@/components/VideoUpload";
// 全局方法挂载 // 全局方法挂载
Vue.prototype.getDicts = getDicts Vue.prototype.getDicts = getDicts;
Vue.prototype.getConfigKey = getConfigKey Vue.prototype.getConfigKey = getConfigKey;
Vue.prototype.parseTime = parseTime Vue.prototype.parseTime = parseTime;
Vue.prototype.resetForm = resetForm Vue.prototype.resetForm = resetForm;
Vue.prototype.addDateRange = addDateRange Vue.prototype.addDateRange = addDateRange;
Vue.prototype.selectDictLabel = selectDictLabel Vue.prototype.selectDictLabel = selectDictLabel;
Vue.prototype.selectDictLabels = selectDictLabels Vue.prototype.selectDictLabels = selectDictLabels;
Vue.prototype.download = download Vue.prototype.download = download;
Vue.prototype.handleTree = handleTree Vue.prototype.handleTree = handleTree;
// 全局组件挂载 // 全局组件挂载
Vue.component('DictTag', DictTag) Vue.component("DictTag", DictTag);
Vue.component('Pagination', Pagination) Vue.component("Pagination", Pagination);
Vue.component('RightToolbar', RightToolbar) Vue.component("RightToolbar", RightToolbar);
Vue.component('Editor', Editor) Vue.component("Editor", Editor);
Vue.component('FileUpload', FileUpload) Vue.component("FileUpload", FileUpload);
Vue.component('ImageUpload', ImageUpload) Vue.component("ImageUpload", ImageUpload);
Vue.component('ImagePreview', ImagePreview) Vue.component("ImagePreview", ImagePreview);
Vue.component("VideoUpload", VideoUpload);
Vue.use(directive) Vue.use(directive);
Vue.use(plugins) Vue.use(plugins);
Vue.use(VueMeta) Vue.use(VueMeta);
DictData.install() DictData.install();
/** /**
* If you don't want to use mock-server * If you don't want to use mock-server
@ -73,14 +83,14 @@ DictData.install()
*/ */
Vue.use(Element, { Vue.use(Element, {
size: Cookies.get('size') || 'medium' // set element-ui default size size: Cookies.get("size") || "Default", // set element-ui default size
}) });
Vue.config.productionTip = false Vue.config.productionTip = false;
new Vue({ new Vue({
el: '#app', el: "#app",
router, router,
store, store,
render: h => h(App) render: (h) => h(App),
}) });

@ -196,7 +196,8 @@
<el-input v-model="form.videoLogo" placeholder="请输入视频封面" /> <el-input v-model="form.videoLogo" placeholder="请输入视频封面" />
</el-form-item> </el-form-item>
<el-form-item label="视频路径" prop="videoPath"> <el-form-item label="视频路径" prop="videoPath">
<el-input v-model="form.videoPath" placeholder="请输入视频路径" /> <!-- <el-input v-model="form.videoPath" placeholder="请输入视频路径" /> -->
<VideoUpload />
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">

Loading…
Cancel
Save