loser/lckt-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ init Project

Browse Source
This commit is contained in:
loser
2025-04-09 12:10:46 +08:00
parent 505d08443c
commit 75a1447d66
207 changed files with 26387 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

340
src/view/example/breakpoint/breakpoint.vue Normal file
View File

@@ -0,0 +1,340 @@
<template>
<div class="break-point">
<div class="gva-table-box">
<el-divider content-position="left">大文件上传</el-divider>
<form id="fromCont" method="post">
<!-- 新增按钮容器，使用 Flexbox 对齐按钮 -->
<div class="button-container">
<div class="fileUpload" @click="inputChange">
<span class="takeFile">选择文件</span>
<input
v-show="false"
id="file"
ref="FileInput"
multiple="multiple"
type="file"
@change="choseFile"
/>
</div>
<el-button
:disabled="limitFileSize"
type="primary"
class="uploadBtn"
@click="getFile"
>上传文件</el-button>
</div>
</form>
<div class="el-upload__tip">请上传不超过5MB的文件</div>
<div class="list">
<transition name="list" tag="p">
<div v-if="file" class="list-item">
<el-icon>
<document />
</el-icon>
<span>{{ file.name }}</span>
<span class="percentage">{{ percentage }}%</span>
<el-progress
:show-text="false"
:text-inside="false"
:stroke-width="2"
:percentage="percentage"
/>
</div>
</transition>
</div>
<div class="tips">
此版本为先行体验功能测试版，样式美化和性能优化正在进行中，上传切片文件和合成的完整文件分别再QMPlusserver目录的breakpointDir文件夹和fileDir文件夹
</div>
</div>
</div>
</template>
<script setup>
import SparkMD5 from 'spark-md5'
import {
findFile,
breakpointContinueFinish,
removeChunk,
breakpointContinue
} from '@/api/breakpoint'
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
defineOptions({
name: 'BreakPoint'
})
const file = ref(null)
const fileMd5 = ref('')
const formDataList = ref([])
const waitUpLoad = ref([])
const waitNum = ref(NaN)
const limitFileSize = ref(false)
const percentage = ref(0)
const percentageFlage = ref(true)
// 选中文件的函数
const choseFile = async (e) => {
// 点击选择文件后取消 直接return
if (!e.target.files.length) {
return
}
const fileR = new FileReader() // 创建一个reader用来读取文件流
const fileInput = e.target.files[0] // 获取当前文件
const maxSize = 5 * 1024 * 1024
file.value = fileInput // file 丢全局方便后面用 可以改进为func传参形式
percentage.value = 0
if (file.value.size < maxSize) {
fileR.readAsArrayBuffer(file.value) // 把文件读成ArrayBuffer 主要为了保持跟后端的流一致
fileR.onload = async (e) => {
// 读成arrayBuffer的回调 e 为方法自带参数 相当于 dom的e 流存在e.target.result 中
const blob = e.target.result
const spark = new SparkMD5.ArrayBuffer() // 创建md5制造工具 （md5用于检测文件一致性 这里不懂就打电话问我）
spark.append(blob) // 文件流丢进工具
fileMd5.value = spark.end() // 工具结束 产生一个a 总文件的md5
const FileSliceCap = 1 * 1024 * 1024 // 分片字节数
let start = 0 // 定义分片开始切的地方
let end = 0 // 每片结束切的地方a
let i = 0 // 第几片
formDataList.value = [] // 分片存储的一个池子 丢全局
while (end < file.value.size) {
// 当结尾数字大于文件总size的时候 结束切片
start = i * FileSliceCap // 计算每片开始位置
end = (i + 1) * FileSliceCap // 计算每片结束位置
var fileSlice = file.value.slice(start, end) // 开始切 file.slice 为 h5方法 对文件切片 参数为 起止字节数
const formData = new window.FormData() // 创建FormData用于存储传给后端的信息
formData.append('fileMd5', fileMd5.value) // 存储总文件的Md5 让后端知道自己是谁的切片
formData.append('file', fileSlice) // 当前的切片
formData.append('chunkNumber', i) // 当前是第几片
formData.append('fileName', file.value.name) // 当前文件的文件名 用于后端文件切片的命名 formData.appen 为 formData对象添加参数的方法
formDataList.value.push({ key: i, formData }) // 把当前切片信息 自己是第几片 存入我们方才准备好的池子
i++
}
const params = {
fileName: file.value.name,
fileMd5: fileMd5.value,
chunkTotal: formDataList.value.length
}
const res = await findFile(params)
// 全部切完以后 发一个请求给后端 拉当前文件后台存储的切片信息 用于检测有多少上传成功的切片
const finishList = res.data.file.ExaFileChunk // 上传成功的切片
const IsFinish = res.data.file.IsFinish // 是否是同文件不同命 （文件md5相同 文件名不同 则默认是同一个文件但是不同文件名 此时后台数据库只需要拷贝一下数据库文件即可 不需要上传文件 即秒传功能）
if (!IsFinish) {
// 当是断点续传时候
waitUpLoad.value = formDataList.value.filter((all) => {
return !(
finishList &&
finishList.some((fi) => fi.FileChunkNumber === all.key)
) // 找出需要上传的切片
})
} else {
waitUpLoad.value = [] // 秒传则没有需要上传的切片
ElMessage.success('文件已秒传!')
}
waitNum.value = waitUpLoad.value.length // 记录长度用于百分比展示
}
} else {
limitFileSize.value = true
ElMessage('请上传小于5M文件!')
}
}
const getFile = () => {
// 确定按钮
if (file.value === null) {
ElMessage('请先上传文件!')
return
}
// 检查文件上传进度
if (percentage.value === 100) {
ElMessage.success('上传已完成!') // 添加提示消息
percentageFlage.value = false
return // 如果进度已完成，阻止继续执行后续代码
}
// 如果文件未上传完成，继续上传切片
sliceFile() // 上传切片
}
const sliceFile = () => {
waitUpLoad.value &&
waitUpLoad.value.forEach((item) => {
// 需要上传的切片
item.formData.append('chunkTotal', formDataList.value.length) // 切片总数携带给后台 总有用的
const fileR = new FileReader() // 功能同上
const fileF = item.formData.get('file')
fileR.readAsArrayBuffer(fileF)
fileR.onload = (e) => {
const spark = new SparkMD5.ArrayBuffer()
spark.append(e.target.result)
item.formData.append('chunkMd5', spark.end()) // 获取当前切片md5 后端用于验证切片完整性
upLoadFileSlice(item)
}
})
}
watch(
() => waitNum.value,
() => {
percentage.value = Math.floor(
((formDataList.value.length - waitNum.value) /
formDataList.value.length) *
100
)
}
)
const upLoadFileSlice = async (item) => {
// 切片上传
const fileRe = await breakpointContinue(item.formData)
if (fileRe.code !== 0) {
return
}
waitNum.value-- // 百分数增加
if (waitNum.value === 0) {
// 切片传完以后 合成文件
const params = {
fileName: file.value.name,
fileMd5: fileMd5.value
}
const res = await breakpointContinueFinish(params)
if (res.code === 0) {
// 合成文件过后 删除缓存切片
const params = {
fileName: file.value.name,
fileMd5: fileMd5.value,
filePath: res.data.filePath
}
ElMessage.success('上传成功')
await removeChunk(params)
}
}
}
const FileInput = ref(null)
const inputChange = () => {
FileInput.value.dispatchEvent(new MouseEvent('click'))
}
</script>
<style lang="scss" scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
#fromCont {
display: inline-block;
}
.gva-table-box {
display: block;
}
.button-container {
display: flex;
align-items: center;
}
.fileUpload,
.uploadBtn {
width: 90px;
height: 35px;
line-height: 35px;
font-size: 14px;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 5px;
cursor: pointer;
}
.fileUpload {
padding: 0 15px;
background-color: #007bff;
color: #ffffff;
font-weight: 500;
transition: all 0.3s ease-in-out;
margin-right: 5px;
}
.uploadBtn {
background-color: #007bff;
color: #fff;
margin-left: 10px;
}
.fileUpload:hover {
background-color: #0056b3;
}
.uploadBtn:hover {
background-color: #0056b3;
}
.fileUpload:active,
.uploadBtn:active {
transform: translateY(2px);
}
.fileUpload input {
position: relative;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
cursor: pointer;
width: 100%;
height: 100%;
}
.fileName {
display: inline-block;
vertical-align: top;
margin: 6px 15px 0 15px;
}
.tips {
margin-top: 30px;
font-size: 14px;
font-weight: 400;
color: #606266;
}
.el-divider {
margin: 0 0 30px 0;
}
.list {
margin-top: 15px;
}
.list-item {
display: block;
margin-right: 10px;
color: #606266;
line-height: 25px;
margin-bottom: 5px;
width: 40%;
.percentage {
float: right;
}
}
.list-enter-active,
.list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
opacity: 0;
transform: translateY(-30px);
}
</style>

215
src/view/example/customer/customer.vue Normal file
View File

@@ -0,0 +1,215 @@
<template>
<div>
<warning-bar
title="在资源权限中将此角色的资源权限清空 或者不包含创建者的角色 即可屏蔽此客户资源的显示"
/>
<div class="gva-table-box">
<div class="gva-btn-list">
<el-button type="primary" icon="plus" @click="openDrawer"
>新增</el-button
>
</div>
<el-table
ref="multipleTable"
:data="tableData"
style="width: 100%"
tooltip-effect="dark"
row-key="ID"
>
<el-table-column type="selection" width="55" />
<el-table-column align="left" label="接入日期" width="180">
<template #default="scope">
<span>{{ formatDate(scope.row.CreatedAt) }}</span>
</template>
</el-table-column>
<el-table-column
align="left"
label="姓名"
prop="customerName"
width="120"
/>
<el-table-column
align="left"
label="电话"
prop="customerPhoneData"
width="120"
/>
<el-table-column
align="left"
label="接入人ID"
prop="sysUserId"
width="120"
/>
<el-table-column align="left" label="操作" min-width="160">
<template #default="scope">
<el-button
type="primary"
link
icon="edit"
@click="updateCustomer(scope.row)"
>变更</el-button
>
<el-button
type="primary"
link
icon="delete"
@click="deleteCustomer(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<div class="gva-pagination">
<el-pagination
:current-page="page"
:page-size="pageSize"
:page-sizes="[10, 30, 50, 100]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
</div>
</div>
<el-drawer
v-model="drawerFormVisible"
:before-close="closeDrawer"
:show-close="false"
>
<template #header>
<div class="flex justify-between items-center">
<span class="text-lg">客户</span>
<div>
<el-button @click="closeDrawer">取 消</el-button>
<el-button type="primary" @click="enterDrawer">确 定</el-button>
</div>
</div>
</template>
<el-form :inline="true" :model="form" label-width="80px">
<el-form-item label="客户名">
<el-input v-model="form.customerName" autocomplete="off" />
</el-form-item>
<el-form-item label="客户电话">
<el-input v-model="form.customerPhoneData" autocomplete="off" />
</el-form-item>
</el-form>
</el-drawer>
</div>
</template>
<script setup>
import {
createExaCustomer,
updateExaCustomer,
deleteExaCustomer,
getExaCustomer,
getExaCustomerList
} from '@/api/customer'
import WarningBar from '@/components/warningBar/warningBar.vue'
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { formatDate } from '@/utils/format'
defineOptions({
name: 'Customer'
})
const form = ref({
customerName: '',
customerPhoneData: ''
})
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const tableData = ref([])
// 分页
const handleSizeChange = (val) => {
pageSize.value = val
getTableData()
}
const handleCurrentChange = (val) => {
page.value = val
getTableData()
}
// 查询
const getTableData = async () => {
const table = await getExaCustomerList({
page: page.value,
pageSize: pageSize.value
})
if (table.code === 0) {
tableData.value = table.data.list
total.value = table.data.total
page.value = table.data.page
pageSize.value = table.data.pageSize
}
}
getTableData()
const drawerFormVisible = ref(false)
const type = ref('')
const updateCustomer = async (row) => {
const res = await getExaCustomer({ ID: row.ID })
type.value = 'update'
if (res.code === 0) {
form.value = res.data.customer
drawerFormVisible.value = true
}
}
const closeDrawer = () => {
drawerFormVisible.value = false
form.value = {
customerName: '',
customerPhoneData: ''
}
}
const deleteCustomer = async (row) => {
ElMessageBox.confirm('确定要删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
const res = await deleteExaCustomer({ ID: row.ID })
if (res.code === 0) {
ElMessage({
type: 'success',
message: '删除成功'
})
if (tableData.value.length === 1 && page.value > 1) {
page.value--
}
getTableData()
}
})
}
const enterDrawer = async () => {
let res
switch (type.value) {
case 'create':
res = await createExaCustomer(form.value)
break
case 'update':
res = await updateExaCustomer(form.value)
break
default:
res = await createExaCustomer(form.value)
break
}
if (res.code === 0) {
closeDrawer()
getTableData()
}
}
const openDrawer = () => {
type.value = 'create'
drawerFormVisible.value = true
}
</script>
<style></style>

19
src/view/example/index.vue Normal file
View File

@@ -0,0 +1,19 @@
<template>
<div>
<router-view v-slot="{ Component }">
<transition mode="out-in" name="el-fade-in-linear">
<keep-alive :include="routerStore.keepAliveRouters">
<component :is="Component" />
</keep-alive>
</transition>
</router-view>
</div>
</template>
<script setup>
import { useRouterStore } from '@/pinia/modules/router'
const routerStore = useRouterStore()
defineOptions({
name: 'Example'
})
</script>

245
src/view/example/upload/scanUpload.vue Normal file
View File

@@ -0,0 +1,245 @@
<template>
<div class="flex justify-center w-full pt-2">
<el-upload
ref="uploadRef"
class="h5-uploader"
:action="`${getBaseUrl()}/fileUploadAndDownload/upload`"
accept="image/*"
:show-file-list="false"
:auto-upload="false"
:headers="{ 'x-token': token }"
:data="{'classId': classId}"
:on-success="handleImageSuccess"
:on-change="handleFileChange"
>
<el-icon class="h5-uploader-icon"><Plus /></el-icon>
</el-upload>
</div>
<div class="flex flex-col w-full h-auto p-0 pt-4">
<!-- 左侧编辑区 -->
<div class="flex-1 min-h-[60vh]">
<div class="w-screen h-[calc(100vh-175px)] rounded">
<template v-if="isCrop">
<VueCropper
ref="cropperRef"
:img="imgSrc"
mode="contain"
outputType="jpeg"
:autoCrop="true"
:autoCropWidth="cropWidth"
:autoCropHeight="cropHeight"
:fixedBox="false"
:fixed="fixedRatio"
:fixedNumber="fixedNumber"
:centerBox="true"
:canMoveBox="true"
:full="false"
:maxImgSize="windowWidth"
:original="true"
></VueCropper>
</template>
<template v-else>
<div class="flex justify-center items-center w-full h-[calc(100vh-175px)]">
<el-image v-if="imgSrc" :src="imgSrc" class="max-w-full max-h-full" mode="cover" />
</div>
</template>
</div>
</div>
</div>
<!-- 工具栏 -->
<div class="toolbar">
<el-button-group v-if="isCrop">
<el-tooltip content="向左旋转">
<el-button @click="rotate(-90)" :icon="RefreshLeft" />
</el-tooltip>
<el-tooltip content="向右旋转">
<el-button @click="rotate(90)" :icon="RefreshRight" />
</el-tooltip>
<el-button :icon="Plus" @click="changeScale(1)"></el-button>
<el-button :icon="Minus" @click="changeScale(-1)"></el-button>
</el-button-group>
<el-switch
size="large"
v-model="isCrop"
inline-prompt
active-text="裁剪"
inactive-text="裁剪"
/>
<el-button type="primary" @click="handleUpload" :loading="uploading"> {{ uploading ? '上传中...' : '上 传' }}
</el-button>
</div>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted } from 'vue'
import { ElLoading, ElMessage } from 'element-plus'
import { RefreshLeft, RefreshRight, Plus, Minus } from '@element-plus/icons-vue'
import 'vue-cropper/dist/index.css'
import { VueCropper } from 'vue-cropper'
import { getBaseUrl } from '@/utils/format'
import { useRouter } from 'vue-router'
import { useUserStore } from "@/pinia";
defineOptions({
name: 'scanUpload'
})
const classId = ref(0)
const token = ref('')
const isCrop = ref(false)
const windowWidth = ref(300)
// 获取屏幕宽度
const getWindowResize = function() {
windowWidth.value = window.innerWidth
}
// 生命周期
onMounted(() => {
getWindowResize()
window.addEventListener('resize', getWindowResize)
})
const router = useRouter()
router.isReady().then(() => {
let query = router.currentRoute.value.query
//console.log(query)
classId.value = query.id
token.value = query.token
}).catch((err) => {
console.log(err)
})
const uploadRef = ref(null)
// 响应式数据
const imgSrc = ref('')
const cropperRef = ref(null)
const { proxy } = getCurrentInstance()
const previews = ref({})
const uploading = ref(false)
// 缩放控制
const changeScale = (value) => {
proxy.$refs.cropperRef.changeScale(value)
}
const fixedNumber = ref([1, 1])
const cropWidth = ref(300)
const cropHeight = ref(300)
const fixedRatio = ref(false)
// 文件处理
const handleFileChange = (file) => {
const isImage = file.raw.type.includes('image')
if (!isImage) {
ElMessage.error('请选择图片文件')
return
}
if (file.raw.size / 1024 / 1024 > 8) {
ElMessage.error('文件大小不能超过8MB!')
return false
}
const loading = ElLoading.service({
lock: true,
text: '请稍后',
background: 'rgba(0, 0, 0, 0.7)',
})
const reader = new FileReader()
reader.onload = (e) => {
imgSrc.value = e.target.result
loading.close()
}
reader.readAsDataURL(file.raw)
}
// 旋转控制
const rotate = (degree) => {
if (degree === -90) {
proxy.$refs.cropperRef.rotateLeft()
} else {
proxy.$refs.cropperRef.rotateRight()
}
}
// 上传处理
const handleUpload = () => {
uploading.value = true
if(isCrop.value === false){
uploadRef.value.submit()
return true
}
proxy.$refs.cropperRef.getCropBlob((blob) => {
try {
const file = new File([blob], `${Date.now()}.jpg`, { type: 'image/jpeg' })
uploadRef.value.clearFiles()
uploadRef.value.handleStart(file)
uploadRef.value.submit()
} catch (error) {
uploading.value = false
ElMessage.error('上传失败: ' + error.message)
}
})
}
const handleImageSuccess = (res) => {
const { data } = res
if (data) {
imgSrc.value = null
uploading.value = false
previews.value = {}
ElMessage.success('上传成功')
}
}
</script>
<style scoped>
/* 工具栏（固定在底部） */
.toolbar {
@apply fixed bottom-0 m-0 rounded-none p-2.5 shadow-[0_-2px_10px_rgba(0,0,0,0.1)] z-[1000] flex justify-between w-screen bg-slate-900;
/* 按钮组适配 */
.el-button-group {
@apply flex gap-2;
.el-button {
@apply p-2 w-10;
}
}
}
:deep(.vue-cropper) {
@apply bg-transparent;
}
</style>
<style>
.h5-uploader .el-upload {
@apply rounded cursor-pointer relative overflow-hidden;
border: 1px dashed var(--el-border-color);
border-radius: 6px;
transition: var(--el-transition-duration-fast);
}
.h5-uploader .el-upload:hover {
border-color: var(--el-color-primary);
}
.el-icon.h5-uploader-icon {
@apply text-2xl text-gray-500 w-32 h-32 text-center;
}
</style>

448
src/view/example/upload/upload.vue Normal file
View File

@@ -0,0 +1,448 @@
<template>
<div v-loading.fullscreen.lock="fullscreenLoading">
<div class="flex gap-4 p-2">
<div class="flex-none w-64 bg-white text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded p-4">
<el-scrollbar style="height: calc(100vh - 300px)">
<el-tree
:data="categories"
node-key="id"
:props="defaultProps"
@node-click="handleNodeClick"
default-expand-all
>
<template #default="{ node, data }">
<div class="w-36" :class="search.classId === data.ID ? 'text-blue-500 font-bold' : ''">{{ data.name }}
</div>
<el-dropdown>
<el-icon class="ml-3 text-right" v-if="data.ID > 0"><MoreFilled /></el-icon>
<el-icon class="ml-3 text-right mt-1" v-else><Plus /></el-icon>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="addCategoryFun(data)">添加分类</el-dropdown-item>
<el-dropdown-item @click="editCategory(data)" v-if="data.ID > 0">编辑分类</el-dropdown-item>
<el-dropdown-item @click="deleteCategoryFun(data.ID)" v-if="data.ID > 0">删除分类</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
</el-tree>
</el-scrollbar>
</div>
<div class="flex-1 bg-white text-slate-700 dark:text-slate-400 dark:bg-slate-900">
<div class="gva-table-box mt-0 mb-0">
<warning-bar title="点击“文件名”可以编辑；选择的类别即是上传的类别。" />
<div class="gva-btn-list gap-3">
<upload-common :image-common="imageCommon" :classId="search.classId" @on-success="onSuccess" />
<cropper-image :classId="search.classId" @on-success="onSuccess" />
<QRCodeUpload :classId="search.classId" @on-success="onSuccess" />
<upload-image
:image-url="imageUrl"
:file-size="512"
:max-w-h="1080"
:classId="search.classId"
@on-success="onSuccess"
/>
<el-button type="primary" icon="upload" @click="importUrlFunc">
导入URL
</el-button>
<el-input
v-model="search.keyword"
class="w-72"
placeholder="请输入文件名或备注"
/>
<el-button type="primary" icon="search" @click="onSubmit"
>查询
</el-button
>
</div>
<el-table :data="tableData">
<el-table-column align="left" label="预览" width="100">
<template #default="scope">
<CustomPic pic-type="file" :pic-src="scope.row.url" preview/>
</template>
</el-table-column>
<el-table-column align="left" label="日期" prop="UpdatedAt" width="180">
<template #default="scope">
<div>{{ formatDate(scope.row.UpdatedAt) }}</div>
</template>
</el-table-column>
<el-table-column
align="left"
label="文件名/备注"
prop="name"
width="180"
>
<template #default="scope">
<div class="cursor-pointer" @click="editFileNameFunc(scope.row)">
{{ scope.row.name }}
</div>
</template>
</el-table-column>
<el-table-column align="left" label="链接" prop="url" min-width="300"/>
<el-table-column align="left" label="标签" prop="tag" width="100">
<template #default="scope">
<el-tag
:type="scope.row.tag?.toLowerCase() === 'jpg' ? 'info' : 'success'"
disable-transitions
>{{ scope.row.tag }}
</el-tag>
</template>
</el-table-column>
<el-table-column align="left" label="操作" width="160">
<template #default="scope">
<el-button
icon="download"
type="primary"
link
@click="downloadFile(scope.row)"
>下载
</el-button
>
<el-button
icon="delete"
type="primary"
link
@click="deleteFileFunc(scope.row)"
>删除
</el-button
>
</template>
</el-table-column>
</el-table>
<div class="gva-pagination">
<el-pagination
:current-page="page"
:page-size="pageSize"
:page-sizes="[10, 30, 50, 100]"
:style="{ float: 'right', padding: '20px' }"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
</div>
</div>
</div>
</div>
<!-- 添加分类弹窗 -->
<el-dialog v-model="categoryDialogVisible" @close="closeAddCategoryDialog" width="520"
:title="(categoryFormData.ID === 0 ? '添加' : '编辑') + '分类'"
draggable
>
<el-form ref="categoryForm" :rules="rules" :model="categoryFormData" label-width="80px">
<el-form-item label="上级分类">
<el-tree-select
v-model="categoryFormData.pid"
:data="categories"
check-strictly
:props="defaultProps"
:render-after-expand="false"
style="width: 240px"
/>
</el-form-item>
<el-form-item label="分类名称" prop="name">
<el-input v-model.trim="categoryFormData.name" placeholder="分类名称"></el-input>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="closeAddCategoryDialog">取消</el-button>
<el-button type="primary" @click="confirmAddCategory">确定</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup>
import {
getFileList,
deleteFile,
editFileName,
importURL
} from '@/api/fileUploadAndDownload'
import {downloadImage} from '@/utils/downloadImg'
import CustomPic from '@/components/customPic/index.vue'
import UploadImage from '@/components/upload/image.vue'
import UploadCommon from '@/components/upload/common.vue'
import {CreateUUID, formatDate} from '@/utils/format'
import WarningBar from '@/components/warningBar/warningBar.vue'
import {ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {addCategory, deleteCategory, getCategoryList} from "@/api/attachmentCategory";
import CropperImage from "@/components/upload/cropper.vue";
import QRCodeUpload from "@/components/upload/QR-code.vue";
defineOptions({
name: 'Upload'
})
const fullscreenLoading = ref(false)
const path = ref(import.meta.env.VITE_BASE_API)
const imageUrl = ref('')
const imageCommon = ref('')
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const search = ref({
keyword: null,
classId: 0
})
const tableData = ref([])
// 分页
const handleSizeChange = (val) => {
pageSize.value = val
getTableData()
}
const handleCurrentChange = (val) => {
page.value = val
getTableData()
}
const onSubmit = () => {
search.value.classId = 0
page.value = 1
getTableData()
}
// 查询
const getTableData = async () => {
const table = await getFileList({
page: page.value,
pageSize: pageSize.value,
...search.value
})
if (table.code === 0) {
tableData.value = table.data.list
total.value = table.data.total
page.value = table.data.page
pageSize.value = table.data.pageSize
}
}
getTableData()
const deleteFileFunc = async (row) => {
ElMessageBox.confirm('此操作将永久删除文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(async () => {
const res = await deleteFile(row)
if (res.code === 0) {
ElMessage({
type: 'success',
message: '删除成功!'
})
if (tableData.value.length === 1 && page.value > 1) {
page.value--
}
await getTableData()
}
})
.catch(() => {
ElMessage({
type: 'info',
message: '已取消删除'
})
})
}
const downloadFile = (row) => {
if (row.url.indexOf('http://') > -1 || row.url.indexOf('https://') > -1) {
downloadImage(row.url, row.name)
} else {
downloadImage(path.value + '/' + row.url, row.name)
}
}
/**
* 编辑文件名或者备注
* @param row
* @returns {Promise<void>}
*/
const editFileNameFunc = async (row) => {
ElMessageBox.prompt('请输入文件名或者备注', '编辑', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPattern: /\S/,
inputErrorMessage: '不能为空',
inputValue: row.name
})
.then(async ({value}) => {
row.name = value
// console.log(row)
const res = await editFileName(row)
if (res.code === 0) {
ElMessage({
type: 'success',
message: '编辑成功!'
})
await getTableData()
}
})
.catch(() => {
ElMessage({
type: 'info',
message: '取消修改'
})
})
}
/**
* 导入URL
*/
const importUrlFunc = () => {
ElMessageBox.prompt('格式：文件名|链接或者仅链接。', '导入', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputType: 'textarea',
inputPlaceholder:
'我的图片|https://my-oss.com/my.png\nhttps://my-oss.com/my_1.png',
inputPattern: /\S/,
inputErrorMessage: '不能为空'
})
.then(async ({value}) => {
let data = value.split('\n')
let importData = []
data.forEach((item) => {
let oneData = item.trim().split('|')
let url, name
if (oneData.length > 1) {
name = oneData[0].trim()
url = oneData[1]
} else {
url = oneData[0].trim()
let str = url.substring(url.lastIndexOf('/') + 1)
name = str.substring(0, str.lastIndexOf('.'))
}
if (url) {
importData.push({
name: name,
url: url,
classId: search.value.classId,
tag: url.substring(url.lastIndexOf('.') + 1),
key: CreateUUID()
})
}
})
const res = await importURL(importData)
if (res.code === 0) {
ElMessage({
type: 'success',
message: '导入成功!'
})
await getTableData()
}
})
.catch(() => {
ElMessage({
type: 'info',
message: '取消导入'
})
})
}
const onSuccess = () => {
search.value.keyword = null
page.value = 1
getTableData()
}
const defaultProps = {
children: 'children',
label: 'name',
value: 'ID'
}
const categories = ref([])
const fetchCategories = async () => {
const res = await getCategoryList()
let data = {
name: '全部分类',
ID: 0,
pid: 0,
children:[]
}
if (res.code === 0) {
categories.value = res.data || []
categories.value.unshift(data)
}
}
const handleNodeClick = (node) => {
search.value.keyword = null
search.value.classId = node.ID
page.value = 1
getTableData()
}
const categoryDialogVisible = ref(false)
const categoryFormData = ref({
ID: 0,
pid: 0,
name: ''
})
const categoryForm = ref(null)
const rules = ref({
name: [
{required: true, message: '请输入分类名称', trigger: 'blur'},
{max: 20, message: '最多20位字符', trigger: 'blur'}
]
})
const addCategoryFun = (category) => {
categoryDialogVisible.value = true
categoryFormData.value.ID = 0
categoryFormData.value.pid = category.ID
}
const editCategory = (category) => {
categoryFormData.value = {
ID: category.ID,
pid: category.pid,
name: category.name
}
categoryDialogVisible.value = true
}
const deleteCategoryFun = async (id) => {
const res = await deleteCategory({id: id})
if (res.code === 0) {
ElMessage.success({type: 'success', message: '删除成功'})
await fetchCategories()
}
}
const confirmAddCategory = async () => {
categoryForm.value.validate(async valid => {
if (valid) {
const res = await addCategory(categoryFormData.value)
if (res.code === 0) {
ElMessage({type: 'success', message: '操作成功'})
await fetchCategories()
closeAddCategoryDialog()
}
}
})
}
const closeAddCategoryDialog = () => {
categoryDialogVisible.value = false
categoryFormData.value = {
ID: 0,
pid: 0,
name: ''
}
}
fetchCategories()
</script>