zianxin/pj_admin_cloud
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：11

Browse Source
This commit is contained in:
dzc committed 2026-01-29 19:29:49 +08:00
1 parent fa6f374df3
commit b0588654f6
3 files changed
+89 -158
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/Material/index.vue
+69 -115
View File
@@ -4,35 +4,20 @@
<div class="flex-1 min-h-0">
<el-scrollbar>
<div class="pt-4 material-left__content p-b-4">
<el-tree
ref="treeRef"
node-key="id"
:data="cateLists"
empty-text="''"
:highlight-current="true"
:expand-on-click-node="false"
:current-node-key="cateId"
@node-click="handleCatSelect"
>
<el-tree ref="treeRef" node-key="id" :data="cateLists" empty-text="''" :highlight-current="true"
:expand-on-click-node="false" :current-node-key="cateId" @node-click="handleCatSelect">
<template v-slot="{ data }">
<div class="flex items-center flex-1 min-w-0 pr-4">
<img class="w-[20px] h-[16px] mr-3" src="/@/assets/icon_folder.png"/>
<img class="w-[20px] h-[16px] mr-3" src="/@/assets/icon_folder.png" />
<span class="flex-1 mr-2 truncate">
{{ data.name }}
</span>
{{ data.name }}
</span>
<el-dropdown v-if="data.id > 0" :hide-on-click="false">
<span class="muted m-r-10">···</span>
<template #dropdown>
<el-dropdown-menu>
<popover-input
@confirm="handleEditCate($event, data.id)"
size="default"
:value="data.name"
width="400px"
:limit="20"
show-limit
teleported
>
<popover-input @confirm="handleEditCate($event, data.id)" size="default" :value="data.name"
width="400px" :limit="20" show-limit teleported>
<div>
<el-dropdown-item> {{ $t('material.editGroup') }}</el-dropdown-item>
</div>
@@ -59,8 +44,9 @@
<div class="flex flex-col material__center">
<div class="flex operate-btn">
<div class="flex flex-1">
<el-button icon="folder-add" type="primary" class="ml10" v-auth="'sys_file_del'" @click="visibleUpload = true"
>{{ $t('material.uploadFileTip') }}
<el-button icon="folder-add" type="primary" class="ml10" v-auth="'sys_file_del'"
@click="visibleUpload = true">{{
$t('material.uploadFileTip') }}
</el-button>
<el-button v-if="mode == 'page'" :disabled="!select.length" @click.stop="batchFileDelete()">
@@ -68,7 +54,7 @@
</el-button>
<popup v-if="mode == 'page'" class="ml-3" @confirm="batchFileMove" :disabled="!select.length"
:title="$t('material.moveBtn')">
:title="$t('material.moveBtn')">
<template #trigger>
<el-button :disabled="!select.length">{{ $t('material.moveBtn') }}</el-button>
</template>
@@ -84,12 +70,12 @@
</popup>
</div>
<el-input class="mr-16 ml-80" :placeholder="$t('file.inputfileNameTip')" v-model="fileParams.original"
@keyup.enter="refresh">
@keyup.enter="refresh">
<template #append>
<el-button @click="refresh">
<template #icon>
<el-icon>
<Search/>
<Search />
</el-icon>
</template>
</el-button>
@@ -97,28 +83,20 @@
</el-input>
<div class="flex items-center ml-2">
<el-tooltip :content="$t('material.list')" placement="top">
<div
class="list-icon"
:class="{
select: listShowType == 'table',
}"
@click="listShowType = 'table'"
>
<div class="list-icon" :class="{
select: listShowType == 'table',
}" @click="listShowType = 'table'">
<el-icon>
<Expand/>
<Expand />
</el-icon>
</div>
</el-tooltip>
<el-tooltip :content="$t('material.grid')" placement="top">
<div
class="list-icon"
:class="{
select: listShowType == 'normal',
}"
@click="listShowType = 'normal'"
>
<div class="list-icon" :class="{
select: listShowType == 'normal',
}" @click="listShowType = 'normal'">
<el-icon>
<Menu/>
<Menu />
</el-icon>
</div>
</el-tooltip>
@@ -126,7 +104,7 @@
</div>
<div class="mt-3" v-if="mode == 'page'">
<el-checkbox :disabled="!pager.lists.length" v-model="isCheckAll" @change="selectAll"
:indeterminate="isIndeterminate">
:indeterminate="isIndeterminate">
{{ $t('material.allCheck') }}
</el-checkbox>
</div>
@@ -138,7 +116,7 @@
<file-item :uri="getFileUri(item)" :file-size="fileSize" :type="type" @click="selectFile(item)">
<div class="item-selected" v-if="isSelect(item.id)">
<el-icon class="el-input__icon">
<Check/>
<Check />
</el-icon>
</div>
</file-item>
@@ -147,15 +125,8 @@
{{ item.original }}
</div>
<div class="flex items-center justify-center operation-btns">
<popover-input
@confirm="handleFileRename($event, item.id)"
size="default"
:value="item.name"
width="400px"
:limit="50"
show-limit
teleported
>
<popover-input @confirm="handleFileRename($event, item.id)" size="default" :value="item.name"
width="400px" :limit="50" show-limit teleported>
<el-button type="primary" link> {{ $t('material.rename') }}</el-button>
</popover-input>
<el-button type="primary" link @click="handleDownFile(item)"> {{ $t('material.download') }}</el-button>
@@ -165,19 +136,11 @@
</ul>
</el-scrollbar>
<el-table
ref="tableRef"
class="mt-4"
v-show="listShowType == 'table'"
:data="pager.lists"
width="100%"
height="100%"
size="large"
@row-click="selectFile"
>
<el-table ref="tableRef" class="mt-4" v-show="listShowType == 'table'" :data="pager.lists" width="100%"
height="100%" size="large" @row-click="selectFile">
<el-table-column width="55">
<template #default="{ row }">
<el-checkbox :modelValue="isSelect(row.id)" @change="selectFile(row)"/>
<el-checkbox :modelValue="isSelect(row.id)" @change="selectFile(row)" />
</template>
</el-table-column>
<el-table-column label="图片" width="100">
@@ -192,19 +155,12 @@
</el-link>
</template>
</el-table-column>
<el-table-column prop="createTime" label="上传时间" min-width="100"/>
<el-table-column prop="createTime" label="上传时间" min-width="100" />
<el-table-column label="操作" width="150" fixed="right">
<template #default="{ row }">
<div class="inline-block">
<popover-input
@confirm="handleFileRename($event, row.id)"
size="default"
:value="row.name"
width="400px"
:limit="50"
show-limit
teleported
>
<popover-input @confirm="handleFileRename($event, row.id)" size="default" :value="row.name"
width="400px" :limit="50" show-limit teleported>
<el-button type="primary" link> 重命名</el-button>
</popover-input>
</div>
@@ -219,12 +175,12 @@
</el-table>
<div class="flex items-center justify-center flex-1" v-if="!pager.lists.length">{{
$t('el.transfer.noData')
$t('el.transfer.noData')
}}~
</div>
</div>
<div>
<pagination v-bind="pager" @change="getFileList" layout="total, prev, pager, next, jumper"/>
<pagination v-bind="pager" @change="getFileList" layout="total, prev, pager, next, jumper" />
</div>
</div>
<div class="material__right" v-if="mode == 'picker'">
@@ -249,35 +205,31 @@
</el-scrollbar>
</div>
</div>
<preview v-model="showPreview" :url="previewUrl" :type="type" :fileName="fileName"/>
<preview v-model="showPreview" :url="previewUrl" :type="type" :fileName="fileName" />
</div>
<el-dialog :title="$t('material.uploadFileTip')" v-model="visibleUpload" :destroy-on-close="true" draggable>
<upload-file @change="refresh" v-if="props.type === 'image'" :data="{ groupId: cateId, type: typeValue }"
:fileType="['png', 'jpg', 'jpeg']"/>
:fileType="['png', 'jpg', 'jpeg']" />
<upload-file @change="refresh" v-if="props.type === 'video'" :data="{ groupId: cateId, type: typeValue }"
:fileType="['mp4']"/>
:fileType="['mp4']" />
<upload-file
@change="refresh"
v-if="props.type === 'file'"
:data="{ cid: cateId, type: typeValue }"
:fileType="['doc', 'xls', 'ppt', 'txt', 'pdf', 'docx', 'xlsx', 'pptx']"
/>
<upload-file @change="refresh" v-if="props.type === 'file'" :data="{ cid: cateId, type: typeValue }"
:fileType="['doc', 'xls', 'ppt', 'txt', 'pdf', 'docx', 'xlsx', 'pptx', 'apk']" />
</el-dialog>
</template>
<script lang="ts" setup>
const Popup = defineAsyncComponent(() => import('/@/components/Popup/index.vue'));
const PopoverInput = defineAsyncComponent(() => import('/@/components/PopoverInput/index.vue'));
import {useCate, useFile} from './hook';
import { useCate, useFile } from './hook';
import FileItem from './file.vue';
import Preview from './preview.vue';
import type {Ref} from 'vue';
import type { Ref } from 'vue';
import other from '/@/utils/other';
const {proxy} = getCurrentInstance();
const { proxy } = getCurrentInstance();
const kkServerURL = import.meta.env.VITE_KK_SERVER_URL
const props = defineProps({
fileSize: {
@@ -302,7 +254,7 @@ const props = defineProps({
},
});
const emit = defineEmits(['change']);
const {limit} = toRefs(props);
const { limit } = toRefs(props);
const typeValue = computed<number>(() => {
switch (props.type) {
case 'image':
@@ -382,15 +334,15 @@ const handleDownFile = (item: any) => {
};
watch(
visible,
async (val: boolean) => {
if (val) {
getData();
}
},
{
immediate: true,
visible,
async (val: boolean) => {
if (val) {
getData();
}
},
{
immediate: true,
}
);
watch(cateId, () => {
fileParams.name = '';
@@ -398,24 +350,24 @@ watch(cateId, () => {
});
watch(
select,
(val: any[]) => {
emit('change', val);
if (val.length == pager.lists.length && val.length !== 0) {
isIndeterminate.value = false;
isCheckAll.value = true;
return;
}
if (val.length > 0) {
isIndeterminate.value = true;
} else {
isCheckAll.value = false;
isIndeterminate.value = false;
}
},
{
deep: true,
select,
(val: any[]) => {
emit('change', val);
if (val.length == pager.lists.length && val.length !== 0) {
isIndeterminate.value = false;
isCheckAll.value = true;
return;
}
if (val.length > 0) {
isIndeterminate.value = true;
} else {
isCheckAll.value = false;
isIndeterminate.value = false;
}
},
{
deep: true,
}
);
const getFileUri = (item: any) => {
@@ -434,8 +386,10 @@ defineExpose({
<style scoped lang="scss">
.material {
@apply h-full min-h-0 flex flex-1;
&__left {
@apply border-r border-br flex flex-col w-[200px];
:deep(.el-tree-node__content) {
height: 36px;
}
src/components/Upload/index.vue
+15 -42
View File
@@ -1,25 +1,11 @@
<!--文件上传组件-->
<template>
<div class="w-full upload-file">
<el-upload
ref="fileUpload"
v-if="props.type === 'default'"
:action="baseURL + other.adaptationUrl(props.uploadFileUrl)"
:before-upload="handleBeforeUpload"
:file-list="fileList"
:headers="headers"
:limit="limit"
:on-error="handleUploadError"
:on-remove="handleRemove"
:on-preview="handlePreview"
:on-exceed="handleExceed"
:data="formData"
:auto-upload="autoUpload"
:on-success="handleUploadSuccess"
class="upload-file-uploader"
drag
multiple
>
<el-upload ref="fileUpload" v-if="props.type === 'default'"
:action="baseURL + other.adaptationUrl(props.uploadFileUrl)" :before-upload="handleBeforeUpload"
:file-list="fileList" :headers="headers" :limit="limit" :on-error="handleUploadError"
:on-remove="handleRemove" :on-preview="handlePreview" :on-exceed="handleExceed" :data="formData"
:auto-upload="autoUpload" :on-success="handleUploadSuccess" class="upload-file-uploader" drag multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
{{ $t('excel.operationNotice') }}
@@ -29,8 +15,7 @@
<div class="el-upload__tip" v-if="props.isShowTip">
{{ $t('excel.pleaseUpload') }}
<template v-if="props.fileSize">
{{ $t('excel.size') }} <b style="color: #f56c6c">{{ props.fileSize }}MB</b></template
>
{{ $t('excel.size') }} <b style="color: #f56c6c">{{ props.fileSize }}MB</b></template>
<template v-if="props.fileType">
{{ $t('excel.format') }} <b style="color: #f56c6c">{{ props.fileType.join('/') }}</b>
</template>
@@ -38,23 +23,11 @@
</div>
</template>
</el-upload>
<el-upload
ref="fileUpload"
v-if="props.type === 'simple'"
:action="baseURL + other.adaptationUrl(props.uploadFileUrl)"
:before-upload="handleBeforeUpload"
:file-list="fileList"
:headers="headers"
:limit="limit"
:auto-upload="autoUpload"
:on-error="handleUploadError"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:data="formData"
:on-success="handleUploadSuccess"
class="upload-file-uploader"
multiple
>
<el-upload ref="fileUpload" v-if="props.type === 'simple'"
:action="baseURL + other.adaptationUrl(props.uploadFileUrl)" :before-upload="handleBeforeUpload"
:file-list="fileList" :headers="headers" :limit="limit" :auto-upload="autoUpload"
:on-error="handleUploadError" :on-remove="handleRemove" :on-exceed="handleExceed" :data="formData"
:on-success="handleUploadSuccess" class="upload-file-uploader" multiple>
<el-button type="primary" link>{{ $t('excel.clickUpload') }}</el-button>
</el-upload>
</div>
@@ -76,11 +49,11 @@ const props = defineProps({
// 大小限制(MB)
fileSize: {
type: Number,
default: 5,
default: 100,
},
fileType: {
type: Array,
default: () => ['png', 'jpg', 'jpeg', 'doc', 'xls', 'ppt', 'txt', 'pdf', 'docx', 'xlsx', 'pptx'],
default: () => ['png', 'jpg', 'jpeg', 'doc', 'xls', 'ppt', 'txt', 'pdf', 'docx', 'xlsx', 'pptx', 'apk'],
},
// 是否显示提示
isShowTip: {
@@ -135,7 +108,7 @@ const formData = computed(() => {
// 上传前校检格式和大小
const handleBeforeUpload = (file: File) => {
// 校检文件类型
// 校检文件类型
if (props.fileType.length) {
const fileName = file.name.split('.');
const fileExt = fileName[fileName.length - 1];
@@ -200,7 +173,7 @@ const handlePreview = (file: any) => {
// 添加 handleExceed 函数
const handleExceed = (files: File[]) => {
useMessage().warning(`${t('excel.uploadLimit')} ${props.limit} ${t('excel.files')}`);
useMessage().warning(`${t('excel.uploadLimit')} ${props.limit} ${t('excel.files')}`);
};
/**
src/views/admin/file/index.vue
+5 -1
View File
@@ -3,7 +3,8 @@
<div class="material-index">
<el-card class="!border-none" shadow="never">
<el-tabs v-model="activeTab">
<el-tab-pane v-for="item in tabsMap" :label="item.name" :name="item.type" :index="item.type" :key="item.type" lazy>
<el-tab-pane v-for="item in tabsMap" :label="item.name" :name="item.type" :index="item.type"
:key="item.type" lazy>
<material :type="item.type" mode="page" file-size="120px" :limit="-1" :page-size="20" />
</el-tab-pane>
</el-tabs>
@@ -37,13 +38,16 @@ const activeTab = ref('image');
<style lang="scss" scoped>
.material-index {
min-width: 700px;
:deep(.el-tabs) {
height: calc(100vh - 180px);
display: flex;
flex-direction: column;
.el-tabs__header {
margin-bottom: 0 !important;
}
.el-tabs__content,
.el-tab-pane {
min-height: 0;