大屏与公共页面
This commit is contained in:
chenlinlin
parent
53bd29677b
commit
4af02c6599
|
|
@ -0,0 +1,87 @@
|
|||
<template>
|
||||
<!-- 全局进度条组件 -->
|
||||
<ProgressBar />
|
||||
<router-view v-if="isReady"></router-view>
|
||||
<div v-else class="loading-container">
|
||||
<div class="loading-spinner"></div>
|
||||
<div class="loading-text">路由加载中...</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, nextTick } from 'vue'
|
||||
import { useUserStore } from '@/stores/modules/user'
|
||||
import { useRouteStore } from '@/stores/modules/router'
|
||||
import { addDynamicRoutes } from '@/router'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import ProgressBar from '@/components/ProgressBar.vue'
|
||||
|
||||
const isReady = ref(false)
|
||||
const userStore = useUserStore()
|
||||
const routerStore = useRouteStore()
|
||||
const router = useRouter()
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
console.log('开始初始化应用...')
|
||||
|
||||
// 初始化用户信息
|
||||
await userStore.init()
|
||||
|
||||
// 确保路由已加载
|
||||
// if (routerStore.defaultRoutes.length === 0) {
|
||||
// routerStore.initDefaultRoutes()
|
||||
// // 强制加载动态路由
|
||||
// addDynamicRoutes()
|
||||
// }
|
||||
|
||||
// 等待一些时间确保路由已完全加载
|
||||
await new Promise((resolve) => setTimeout(resolve, 500))
|
||||
|
||||
// 检查路由表是否已加载
|
||||
console.log(
|
||||
'当前路由表：',
|
||||
router.getRoutes().map((r) => r.path)
|
||||
)
|
||||
|
||||
// 标记应用已准备好
|
||||
await nextTick()
|
||||
isReady.value = true
|
||||
console.log('应用初始化完成，准备渲染路由视图')
|
||||
|
||||
// 跳转
|
||||
router.push(router)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.loading-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 50%;
|
||||
border-top-color: #409eff;
|
||||
animation: spin 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
margin-top: 16px;
|
||||
font-size: 16px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,180 @@
|
|||
<template>
|
||||
<el-card :class="mergeParameters.cardClass">
|
||||
<div class="clearfix" style="display: flex; align-items: center; justify-content: space-between;">
|
||||
<span><span style="color: red;" v-if="mergeParameters.required">*</span>{{ mergeParameters.title }}</span>
|
||||
<el-upload
|
||||
ref="upload"
|
||||
:show-file-list="false"
|
||||
:action="mergeParameters.url"
|
||||
:multiple="mergeParameters.multiple"
|
||||
:auto-upload="mergeParameters.autoUpload"
|
||||
:on-error="mergeFileActions.error"
|
||||
:on-change="mergeFileActions.change"
|
||||
:on-success="mergeFileActions.success"
|
||||
:headers="mergeParameters.headers">
|
||||
<el-button v-if="mergeParameters.mode !== 'detail' && mergeParameters.isShowBtn" slot="trigger" type="primary">
|
||||
<template #icon>
|
||||
<font-awesome-icon icon="upload"/>
|
||||
</template>
|
||||
选择文件
|
||||
</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div>
|
||||
<el-table :data="tableData" border style="width: 100%; padding-top: 5px;">
|
||||
<el-table-column fixed prop="name" :label="mergeParameters.tableTitle + '名称'"/>
|
||||
<el-table-column v-if="mergeParameters.isShowType" fixed prop="type"
|
||||
:label="mergeParameters.tableTitle + '文件类型'" width="200" align="center"></el-table-column>
|
||||
<el-table-column v-if="mergeParameters.autoUpload" fixed prop="uploadStatus" width="100" label="上传状态"></el-table-column>
|
||||
<el-table-column fixed="right" label="操作" width="120" align="center" class-name="control-column">
|
||||
<template #default="scope">
|
||||
<el-space>
|
||||
<el-link type="primary" v-if="isDowload(scope.row)" size="small" @click="downloadFile(scope.row)">
|
||||
{{ isPicture(scope.row.name) ? '查看' : '下载' }}
|
||||
</el-link>
|
||||
<el-link type="primary" size="small" v-if="mergeParameters.mode !== 'detail'"
|
||||
@click="deleteRow(scope.$index, tableData,scope.row)">
|
||||
删除
|
||||
</el-link>
|
||||
</el-space>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<PictureView ref="pictureViewRef"/>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import {computed, defineEmits, defineProps, reactive, ref} from "vue"
|
||||
import {merge} from "lodash"
|
||||
import {ElMessage} from "element-plus"
|
||||
import PictureView from "@pages/common/PictureView.vue";
|
||||
const pictureViewRef = ref(null)
|
||||
const props = defineProps({
|
||||
parameters: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
fileActions: {
|
||||
type: Object,
|
||||
},
|
||||
filesData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
const onError = (err, file, fileList) => { // 文件上传失败时的钩子
|
||||
ElMessage.error('上传失败!' + err)
|
||||
}
|
||||
|
||||
const deleteRow = (index, fileList ,row) => { // 点击删除时的方法
|
||||
const source = Object.assign([], fileList)
|
||||
let id = fileList[index].id// 记录删除的ID
|
||||
fileList.splice(index, 1)
|
||||
emit('on-remove', fileList, id, {index: index, source: source},row)
|
||||
}
|
||||
|
||||
const viewPicture = (scope) => { // 预览图片
|
||||
}
|
||||
|
||||
const isPicture = (fileName) => { // 是否是图片
|
||||
return /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(fileName)
|
||||
}
|
||||
|
||||
const isDowload = (file) => { // 是否显示下载按钮
|
||||
return mergeParameters.mode !== 'add' && file.url
|
||||
}
|
||||
|
||||
const downloadFile = (row) => { // 下载文件
|
||||
if (row && row.downloadUrl) {
|
||||
if (/(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(row.type) || /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(row.name)) {
|
||||
pictureViewRef.value.viewPicture(row.downloadUrl)
|
||||
} else {
|
||||
window.open(row.downloadUrl)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const onChange = (file, fileList) => { // 文件上传时的钩子
|
||||
emit('on-change', file)
|
||||
}
|
||||
|
||||
const onSuccess = (response, file, fileList) => { // 文件上传成功时的钩子
|
||||
let data = response.data
|
||||
data.bz = mergeParameters.autoUpload ? mergeParameters.title : fileMap[file.uid] ? fileMap[file.uid] : '' // 当自动上传时，上传文件备注默认为标题
|
||||
data.fileType = mergeParameters.fileType
|
||||
if (response.result === 'success') {
|
||||
data.uploadStatus = '上传成功'
|
||||
if (mergeParameters.autoUpload) { // 自动上传
|
||||
emit('on-success', data, file)
|
||||
} else { // 手动上传回调
|
||||
data.uid = file.uid
|
||||
emit('on-manual-success', data)
|
||||
}
|
||||
} else {
|
||||
ElMessage.error('上传失败!:'+response.msg)
|
||||
}
|
||||
}
|
||||
|
||||
const defaultParameters = {
|
||||
headers: {},
|
||||
url: null,
|
||||
title: '文件上传',
|
||||
tableTitle: '材料',
|
||||
autoUpload: false,
|
||||
required: true,
|
||||
multiple: true,
|
||||
mode: 'add',
|
||||
isShowBtn: true,
|
||||
isShowType: true,
|
||||
fileType: '',
|
||||
cardClass: 'box-card'
|
||||
}
|
||||
|
||||
const defaultFileActions = {
|
||||
error: onError,
|
||||
change: onChange,
|
||||
success: onSuccess
|
||||
}
|
||||
|
||||
const fileMap = reactive(merge({}))
|
||||
const mergeParameters = reactive(merge({}, defaultParameters, props.parameters))
|
||||
const mergeFileActions = reactive(merge({}, defaultFileActions, props.fileActions))
|
||||
|
||||
const emit = defineEmits(['on-remove', 'on-success', 'on-manual-success', 'update:actions'])
|
||||
|
||||
const mergeActions = reactive(merge({}, defaultFileActions, props.actions))
|
||||
emit('update:actions', mergeActions)
|
||||
|
||||
const tableData = computed(() => {
|
||||
let arr = []
|
||||
for (let data of props.filesData) {
|
||||
arr.push(data)
|
||||
}
|
||||
return arr
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.el-card {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.linkFix {
|
||||
.el-link {
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
padding-top: 0px !important;
|
||||
}
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,177 @@
|
|||
<template>
|
||||
<div class="pic-div">
|
||||
<el-upload v-if="mergeParameters.mode !== 'detail'"
|
||||
:action="mergeParameters.url"
|
||||
list-type="picture-card"
|
||||
:multiple="mergeParameters.multiple"
|
||||
:headers="mergeParameters.headers"
|
||||
:auto-upload="mergeParameters.autoUpload"
|
||||
:limit="mergeParameters.limit"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:on-remove="handleRemove"
|
||||
:on-change="handleChange"
|
||||
:on-success="onSuccess"
|
||||
:on-error="onError"
|
||||
:on-exceed="handleExceed"
|
||||
:file-list="pictureList"
|
||||
accept="image/gif,image/jpg,image/jpeg,image/png,image/GIF,image/JPG">
|
||||
<el-icon>
|
||||
<Plus/>
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
<el-upload v-if="mergeParameters.mode === 'detail'"
|
||||
class="noUpOnly"
|
||||
action="#"
|
||||
list-type="picture-card"
|
||||
:auto-upload="mergeParameters.autoUpload"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:file-list="pictureList">
|
||||
<template #file="{ file }">
|
||||
<img style="width: 148px; height: 148px;" class="el-upload-list__item-thumbnail" :src="file.url">
|
||||
<div v-if="file.name">
|
||||
<el-tooltip effect="dark" :content="file.name">
|
||||
<span class="el-upload-list__item-actions">
|
||||
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
|
||||
<el-icon><zoom-in/></el-icon>
|
||||
</span>
|
||||
<span class="el-upload-list__item-delete" @click="handleDownload(file)">
|
||||
<el-icon><Download/></el-icon>
|
||||
</span>
|
||||
</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div v-else>
|
||||
<span class="el-upload-list__item-actions">
|
||||
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
|
||||
<el-icon><zoom-in/></el-icon>
|
||||
</span>
|
||||
<span class="el-upload-list__item-delete" @click="handleDownload(file)">
|
||||
<el-icon><Download/></el-icon>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible" append-to-body>
|
||||
<img width="100%" :src="dialogImageUrl" alt="">
|
||||
</el-dialog>
|
||||
<PictureView ref="pictureViewRef"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import {ElMessage} from "element-plus"
|
||||
import {defineEmits, defineProps, reactive, toRefs, ref, watch, toRaw} from "vue"
|
||||
import {merge} from "lodash"
|
||||
import PictureView from "@pages/common/PictureView.vue"
|
||||
import {Delete, Download, Plus, ZoomIn} from '@element-plus/icons-vue'
|
||||
import {useUserStore} from "@/stores/modules/user.js"
|
||||
|
||||
const userStore = useUserStore()
|
||||
const props = defineProps({
|
||||
parameters: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
formData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
|
||||
const state = reactive({
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
pictureList: [],
|
||||
disabled: false,
|
||||
mpNum: 0,
|
||||
modifyFileList: []
|
||||
})
|
||||
const pictureViewRef = ref(null)
|
||||
|
||||
const {
|
||||
dialogImageUrl,
|
||||
dialogVisible,
|
||||
pictureList,
|
||||
disabled
|
||||
} = toRefs(state)
|
||||
|
||||
const defaultParameters = {
|
||||
mode: 'add',
|
||||
isAddCallback: true,
|
||||
isModifyCallback: true,
|
||||
multiple: true,
|
||||
autoUpload: false,
|
||||
limit: 5,
|
||||
limitSize: 2,
|
||||
industryCategory: 'PUB',
|
||||
displayMsg: false,
|
||||
specialTreatment: false,
|
||||
backPic: false,
|
||||
headers: {'industry-category': 'PUB', 'Authorization': `Bearer ${userStore.token}`},
|
||||
url: '/api/uploads'
|
||||
}
|
||||
|
||||
const mergeParameters = reactive(merge({}, defaultParameters, props.parameters))
|
||||
const emit = defineEmits(['on-remove', 'on-success', 'del-picture-id', 'on-change', 'on-pic-view', 'on-remove'])
|
||||
|
||||
function onSuccess(res, file, fileList) {
|
||||
if (mergeParameters.autoUpload) {
|
||||
emit('on-success', res.data, file, props.formData)
|
||||
} else
|
||||
emit('on-success', fileList)
|
||||
}
|
||||
|
||||
function onError(res) {
|
||||
ElMessage.error('上传失败：', res)
|
||||
}
|
||||
|
||||
function handleChange(file, fileList) {
|
||||
file.status = 'success'
|
||||
emit('on-change', file, fileList, props.formData)
|
||||
if(!mergeParameters.autoUpload)
|
||||
pictureList.value = fileList
|
||||
}
|
||||
|
||||
function handleRemove(file, fileList) { // 这里的file.id是已经存在服务器中的文件
|
||||
pictureList.value = fileList
|
||||
if (file.id) {
|
||||
emit('del-picture', file, props.formData)
|
||||
}
|
||||
emit('on-remove', file, props.formData)
|
||||
}
|
||||
|
||||
function handlePictureCardPreview(file) {
|
||||
if (mergeParameters.backPic)
|
||||
emit('on-pic-view', file.url, pictureList.value.map(o => o.url))
|
||||
else
|
||||
pictureViewRef.value.viewPicture(file.url, pictureList.value.map(o => o.url))
|
||||
}
|
||||
|
||||
function handleDownload(file) { // 下载文件
|
||||
if (file && file.url) {
|
||||
window.open(file.url)
|
||||
}
|
||||
}
|
||||
|
||||
function handleExceed(files, fileList) {
|
||||
ElMessage.warning(`当前限制选择 ${mergeParameters.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
|
||||
}
|
||||
|
||||
pictureList.value = props.formData?.urls || []
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
.pic-div {
|
||||
.el-upload-list__item-thumbnail, .el-upload-list__item-actions, .el-upload-list__item, .el-upload--picture-card {
|
||||
object-fit: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.noUpOnly div.el-upload--picture-card {
|
||||
display: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<template>
|
||||
<div class="pic_image__preview">
|
||||
<el-image ref="imageRef"
|
||||
style="width: 0px; height: 0px"
|
||||
:src="src"
|
||||
:preview-src-list="srcList">
|
||||
</el-image>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {reactive, ref, toRefs} from "vue"
|
||||
import defPic from '@/assets/image/pic.gif'
|
||||
|
||||
const state = reactive({
|
||||
src: defPic,
|
||||
srcList: [defPic]
|
||||
})
|
||||
const {src, srcList} = toRefs(state)
|
||||
|
||||
const imageRef = ref(null)
|
||||
|
||||
function viewPicture(url, urls) {
|
||||
if (urls && urls.length > 1) srcList.value = urls
|
||||
else if (url) srcList.value = [url]
|
||||
imageRef.value.$el.querySelector('img').click()
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
viewPicture
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-icon-circle-close {
|
||||
color: red !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
<template>
|
||||
<el-dialog :open="modelValue" title="在线签名" :show-footer="false" type="medium" @update:open="handleClose">
|
||||
<div class="signature-container">
|
||||
<canvas
|
||||
ref="canvasRef"
|
||||
class="signature-canvas"
|
||||
width="800"
|
||||
height="300"
|
||||
@mousedown="startDrawing"
|
||||
@mousemove="draw"
|
||||
@mouseup="stopDrawing"
|
||||
@mouseleave="stopDrawing"/>
|
||||
<div class="signature-actions">
|
||||
<el-button type="danger" @click="clearCanvas">清除</el-button>
|
||||
<el-button type="primary" @click="saveSignature">保存签名</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import ElDialog from "@/components/ElDialog/index.vue"
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: boolean): void
|
||||
(e: 'save', dataUrl: string): void
|
||||
}>()
|
||||
|
||||
const canvasRef = ref<HTMLCanvasElement | null>(null)
|
||||
let isDrawing = false
|
||||
let lastX = 0
|
||||
let lastY = 0
|
||||
let ctx: CanvasRenderingContext2D | null = null
|
||||
|
||||
// 初始化画布
|
||||
const initCanvas = () => {
|
||||
if (canvasRef.value) {
|
||||
const canvas = canvasRef.value
|
||||
ctx = canvas.getContext('2d')
|
||||
if (ctx) {
|
||||
ctx.strokeStyle = '#000'
|
||||
ctx.lineWidth = 4
|
||||
ctx.lineJoin = 'round'
|
||||
ctx.lineCap = 'round'
|
||||
clearCanvas()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 开始绘制
|
||||
const startDrawing = (e: MouseEvent) => {
|
||||
if (!ctx) return
|
||||
isDrawing = true
|
||||
;[lastX, lastY] = [e.offsetX, e.offsetY]
|
||||
}
|
||||
|
||||
// 绘制过程
|
||||
const draw = (e: MouseEvent) => {
|
||||
if (!isDrawing || !ctx) return
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(lastX, lastY)
|
||||
ctx.lineTo(e.offsetX, e.offsetY)
|
||||
ctx.stroke()
|
||||
;[lastX, lastY] = [e.offsetX, e.offsetY]
|
||||
}
|
||||
|
||||
// 停止绘制
|
||||
const stopDrawing = () => {
|
||||
isDrawing = false
|
||||
}
|
||||
|
||||
// 清除画布
|
||||
const clearCanvas = () => {
|
||||
if (canvasRef.value && ctx) {
|
||||
ctx.fillStyle = '#fff'
|
||||
ctx.fillRect(0, 0, canvasRef.value.width, canvasRef.value.height)
|
||||
}
|
||||
}
|
||||
|
||||
// 保存签名
|
||||
const saveSignature = () => {
|
||||
if (canvasRef.value) {
|
||||
const dataUrl = canvasRef.value.toDataURL('image/png')
|
||||
emit('save', dataUrl)
|
||||
handleClose()
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
const handleClose = () => {
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
|
||||
// 监听弹窗打开状态，初始化画布
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
if (val) {
|
||||
setTimeout(() => {
|
||||
initCanvas()
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
initCanvas()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.signature-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.signature-canvas {
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.signature-actions {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue