mirror of
https://github.com/cool-team-official/cool-admin-vue.git
synced 2025-12-15 15:42:50 +00:00
优化
This commit is contained in:
icssoa
parent
091f09ef2b
commit
7783fb5962
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "front-next",
|
||||
"version": "5.12.0",
|
||||
"version": "5.12.1",
|
||||
"scripts": {
|
||||
"dev": "vite --host",
|
||||
"build": "vite build",
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
// @ts-nocheck
|
||||
import { Module } from "../types";
|
||||
import { Data } from "../utils";
|
||||
|
||||
@ -10,6 +9,7 @@ const module = {
|
||||
list,
|
||||
req: Promise.resolve(),
|
||||
get(name: string): Module {
|
||||
// @ts-ignore
|
||||
return this.list.find((e) => e.name == name);
|
||||
},
|
||||
add(data: Module) {
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
// @ts-nocheck
|
||||
const d: any = window;
|
||||
|
||||
// window 数据临时存储，解决热更新后失效问题
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
ref="Editor"
|
||||
v-model="content"
|
||||
:placeholder="placeholder"
|
||||
:style="{ height, fontSize }"
|
||||
:style="style"
|
||||
autofocus
|
||||
:disabled="disabled"
|
||||
indent-with-tab
|
||||
@ -21,16 +21,17 @@ import { javascript } from "@codemirror/lang-javascript";
|
||||
import { oneDark } from "@codemirror/theme-one-dark";
|
||||
import { ref, watch, computed, defineComponent } from "vue";
|
||||
import { useDark } from "@vueuse/core";
|
||||
import { isNumber } from "lodash-es";
|
||||
import { useComm } from "/@/cool";
|
||||
|
||||
export default defineComponent({
|
||||
name: "cl-codemirror",
|
||||
|
||||
props: {
|
||||
modelValue: {
|
||||
type: String,
|
||||
required: true
|
||||
components: {
|
||||
Codemirror
|
||||
},
|
||||
|
||||
props: {
|
||||
modelValue: String,
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: "请输入"
|
||||
@ -40,29 +41,22 @@ export default defineComponent({
|
||||
default: 400
|
||||
},
|
||||
fontSize: {
|
||||
type: String,
|
||||
default: "14px"
|
||||
type: [String, Number],
|
||||
default: 14
|
||||
},
|
||||
disabled: Boolean
|
||||
},
|
||||
|
||||
emits: ["update:modelValue", "change"],
|
||||
|
||||
components: {
|
||||
Codemirror
|
||||
},
|
||||
|
||||
setup(props, { emit }) {
|
||||
const { px } = useComm();
|
||||
|
||||
const Editor = ref();
|
||||
|
||||
// 是否暗黑模式
|
||||
const isDark = ref(useDark());
|
||||
|
||||
// 高度
|
||||
const height = computed(() =>
|
||||
isNumber(props.height) ? `${props.height}px` : props.height
|
||||
);
|
||||
|
||||
// 插件
|
||||
const extensions: any[] = [javascript()];
|
||||
|
||||
@ -73,6 +67,11 @@ export default defineComponent({
|
||||
// 内容
|
||||
const content = ref("");
|
||||
|
||||
// 样式
|
||||
const style = computed(() => {
|
||||
return { height: px(props.height), fontSize: px(props.fontSize) };
|
||||
});
|
||||
|
||||
// 值改变
|
||||
function onChange(value: string) {
|
||||
emit("update:modelValue", value);
|
||||
@ -83,7 +82,7 @@ export default defineComponent({
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
content.value = val;
|
||||
content.value = val || "";
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
@ -93,7 +92,7 @@ export default defineComponent({
|
||||
return {
|
||||
Editor,
|
||||
isDark,
|
||||
height,
|
||||
style,
|
||||
content,
|
||||
extensions,
|
||||
onChange
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
<template>
|
||||
<el-select v-model="value" @change="onChange" clearable>
|
||||
<el-select v-model="value" :clearable="clearable" @change="onChange">
|
||||
<el-option
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:disabled="item.disabled"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
@ -22,6 +23,10 @@ export default defineComponent({
|
||||
type: [Array, Object],
|
||||
default: () => []
|
||||
},
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
prop: String
|
||||
},
|
||||
|
||||
@ -30,7 +35,11 @@ export default defineComponent({
|
||||
setup(props, { emit }) {
|
||||
// cl-crud
|
||||
const Crud = useCrud();
|
||||
|
||||
// 选中值
|
||||
const value = ref();
|
||||
|
||||
// 列表
|
||||
const list = computed<any>(() =>
|
||||
isRef(props.options) ? props.options.value : props.options
|
||||
);
|
||||
|
||||
@ -3,20 +3,6 @@ import { ref } from "vue";
|
||||
import { storage } from "/@/cool/utils";
|
||||
import { service, config, router } from "/@/cool";
|
||||
|
||||
interface User {
|
||||
id: number;
|
||||
name: string;
|
||||
username: string;
|
||||
nickName: string;
|
||||
phone: string;
|
||||
headImg: string;
|
||||
email: string;
|
||||
status: 0 | 1;
|
||||
departmentId: string;
|
||||
createTime: Date;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
// 本地缓存
|
||||
const data = storage.info();
|
||||
|
||||
@ -27,9 +13,9 @@ export const useUserStore = defineStore("user", function () {
|
||||
// 设置标识
|
||||
function setToken(data: {
|
||||
token: string;
|
||||
expire: string;
|
||||
expire: number;
|
||||
refreshToken: string;
|
||||
refreshExpire: string;
|
||||
refreshExpire: number;
|
||||
}) {
|
||||
// 请求的唯一标识
|
||||
token.value = data.token;
|
||||
@ -58,7 +44,7 @@ export const useUserStore = defineStore("user", function () {
|
||||
}
|
||||
|
||||
// 用户信息
|
||||
const info = ref<User | null>(data.userInfo);
|
||||
const info = ref<Eps.BaseSysUserEntity | null>(data.userInfo);
|
||||
|
||||
// 设置用户信息
|
||||
function set(value: any) {
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
<ul>
|
||||
<cl-upload @success="onImageSend" :show-file-list="false">
|
||||
<li>
|
||||
<el-icon><picture /></el-icon>
|
||||
<el-icon><picture-filled /></el-icon>
|
||||
</li>
|
||||
</cl-upload>
|
||||
|
||||
@ -101,7 +101,7 @@
|
||||
import { computed, ref } from "vue";
|
||||
import { useChat } from "../hooks";
|
||||
import { useStore } from "../store";
|
||||
import { Picture, VideoCamera, Microphone } from "@element-plus/icons-vue";
|
||||
import { PictureFilled, VideoCamera, Microphone } from "@element-plus/icons-vue";
|
||||
import { useBase } from "/$/base";
|
||||
import { ContextMenu } from "@cool-vue/crud";
|
||||
import { useClipboard } from "@vueuse/core";
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="editor">
|
||||
<el-tabs>
|
||||
<el-tabs type="card">
|
||||
<el-tab-pane label="WangEditor">
|
||||
<cl-editor-wang v-model="w" :height="400" />
|
||||
</el-tab-pane>
|
||||
@ -20,7 +20,9 @@ const w = ref("Wang");
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.editor {
|
||||
background-color: #fff;
|
||||
padding: 0 10px 10px 10px;
|
||||
background-color: var(--el-bg-color);
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,74 +1,67 @@
|
||||
<template>
|
||||
<div class="demo">
|
||||
<el-image
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:src="item"
|
||||
:style="{ width: '100px', marginRight: '10px' }"
|
||||
/>
|
||||
|
||||
<div class="item">
|
||||
<p>普通上传</p>
|
||||
<el-tabs type="card">
|
||||
<el-tab-pane label="普通上传">
|
||||
<cl-upload v-model="urls" />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<div class="item">
|
||||
<p>多图上传 multiple</p>
|
||||
<cl-upload v-model="urls" multiple drag />
|
||||
</div>
|
||||
<el-tab-pane label="多图上传" lazy>
|
||||
<cl-upload text="选择图片" v-model="urls" multiple drag />
|
||||
</el-tab-pane>
|
||||
|
||||
<div class="item">
|
||||
<p>文件上传 file</p>
|
||||
<el-tab-pane label="文件上传" lazy>
|
||||
<cl-upload v-model="urls" multiple text="文件上传" type="file" />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="自定义内容">
|
||||
<cl-upload text="选择图片" multiple drag custom-class="custom-upload">
|
||||
<el-button :icon="Upload">上传</el-button>
|
||||
|
||||
<div class="item">
|
||||
<p>自定义内容</p>
|
||||
<cl-upload text="选择图片" multiple drag>
|
||||
<div style="width: 100%">
|
||||
<el-button>上传</el-button>
|
||||
</div>
|
||||
<template #item="{ item }">
|
||||
<div class="cs-item">{{ item.url }}</div>
|
||||
<div class="item" v-show="item.url">{{ item.url }}</div>
|
||||
</template>
|
||||
</cl-upload>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<div class="item">
|
||||
<p>自定义大小</p>
|
||||
<el-tab-pane label="自定义大小">
|
||||
<cl-upload text="选择图片" :size="[120, 200]" />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<div class="item">
|
||||
<p>文件空间</p>
|
||||
<el-tab-pane label="文件空间">
|
||||
<cl-upload-space />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="upload" setup>
|
||||
import { computed, ref } from "vue";
|
||||
import { ref } from "vue";
|
||||
import { Upload } from "@element-plus/icons-vue";
|
||||
|
||||
const urls = ref("");
|
||||
const list = computed(() => urls.value.split(",").filter(Boolean));
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.demo {
|
||||
background-color: var(--el-bg-color);
|
||||
.item {
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
& > p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.cs-item {
|
||||
:deep(.custom-upload) {
|
||||
.item {
|
||||
border: 1px solid var(--el-border-color);
|
||||
border-radius: 3px;
|
||||
padding: 5px 10px;
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.cl-upload__list {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
<template>
|
||||
<div class="cl-upload__wrap">
|
||||
<div class="cl-upload__wrap" :class="[customClass]">
|
||||
<div
|
||||
class="cl-upload"
|
||||
:class="[
|
||||
`cl-upload--${type}`,
|
||||
{
|
||||
'is-slot': $slots.default,
|
||||
'is-custom': $slots.item,
|
||||
'is-disabled': disabled
|
||||
}
|
||||
]"
|
||||
@ -42,11 +41,11 @@
|
||||
|
||||
<!-- 列表 -->
|
||||
<draggable
|
||||
class="cl-upload__list"
|
||||
tag="div"
|
||||
v-model="list"
|
||||
v-bind="drag.options"
|
||||
item-key="uid"
|
||||
tag="div"
|
||||
class="cl-upload__list"
|
||||
@end="update"
|
||||
>
|
||||
<template #item="{ element: item, index }">
|
||||
@ -153,14 +152,7 @@ import { extname, uuid } from "/@/cool/utils";
|
||||
import { useBase } from "/$/base";
|
||||
import { fileSize, fileName, fileType } from "../utils";
|
||||
import { useForm } from "@cool-vue/crud";
|
||||
|
||||
interface Item {
|
||||
url: string;
|
||||
preload: string;
|
||||
uid: number | string;
|
||||
progress: number;
|
||||
type?: string;
|
||||
}
|
||||
import { Upload } from "../types";
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
@ -187,6 +179,7 @@ const props = defineProps({
|
||||
},
|
||||
drag: Boolean,
|
||||
disabled: Boolean,
|
||||
customClass: String,
|
||||
|
||||
// 穿透值
|
||||
isEdit: null,
|
||||
@ -237,14 +230,14 @@ const headers = computed(() => {
|
||||
});
|
||||
|
||||
// 预览
|
||||
const pv = reactive<any>({
|
||||
const pv = reactive<{ visible: boolean; urls: string[]; index: number }>({
|
||||
visible: false,
|
||||
urls: [],
|
||||
index: 0
|
||||
});
|
||||
|
||||
// 列表
|
||||
const list = ref<Item[]>([]);
|
||||
const list = ref<Upload.Item[]>([]);
|
||||
|
||||
// 拖拽
|
||||
const drag = reactive<any>({
|
||||
@ -273,12 +266,12 @@ function getType(path: string) {
|
||||
if (props.type == "image") {
|
||||
return "image";
|
||||
} else {
|
||||
return fileType(path).value;
|
||||
return fileType(path)?.value;
|
||||
}
|
||||
}
|
||||
|
||||
// 上传前
|
||||
function beforeUpload(file: any, item?: Item) {
|
||||
function beforeUpload(file: any, item?: Upload.Item) {
|
||||
if (file.size / 1024 / 1024 >= limitSize) {
|
||||
ElMessage.error(`上传文件大小不能超过 ${limitSize}MB!`);
|
||||
return false;
|
||||
@ -321,7 +314,7 @@ function clear() {
|
||||
}
|
||||
|
||||
// 预览
|
||||
function preview(item: Item) {
|
||||
function preview(item: Upload.Item) {
|
||||
if (item.type == "image") {
|
||||
pv.visible = true;
|
||||
pv.urls = list.value.map((e) => e.preload);
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<!-- 弹框 -->
|
||||
<cl-dialog
|
||||
v-model="visible"
|
||||
title="文件空间"
|
||||
:title="title"
|
||||
height="650px"
|
||||
width="1080px"
|
||||
keep-alive
|
||||
@ -25,7 +25,7 @@
|
||||
@drop="onDrop"
|
||||
>
|
||||
<!-- 类目 -->
|
||||
<category />
|
||||
<space-category />
|
||||
|
||||
<!-- 内容 -->
|
||||
<div class="cl-upload-space__content">
|
||||
@ -49,6 +49,8 @@
|
||||
</cl-upload>
|
||||
</div>
|
||||
|
||||
<cl-flex1 />
|
||||
|
||||
<el-button type="success" :disabled="!isSelected" @click="confirm()"
|
||||
>使用选中文件 {{ selection.length }}/{{ limit }}</el-button
|
||||
>
|
||||
@ -72,7 +74,12 @@
|
||||
v-for="item in list"
|
||||
:key="item.preload || item.url"
|
||||
>
|
||||
<file-item :data="item" @select="select" @remove="remove" />
|
||||
<space-file
|
||||
:data="item"
|
||||
:list="list"
|
||||
@select="select"
|
||||
@remove="remove"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -104,19 +111,19 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="cl-upload-space">
|
||||
import { computed, onMounted, provide, reactive, ref, watch } from "vue";
|
||||
import { computed, provide, reactive, ref, watch } from "vue";
|
||||
import { isEmpty } from "lodash-es";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { Notebook, ArrowLeft, UploadFilled } from "@element-plus/icons-vue";
|
||||
import { module, useCool } from "/@/cool";
|
||||
import { useBase } from "/$/base";
|
||||
import Category from "./space/category.vue";
|
||||
import FileItem from "./space/file-item.vue";
|
||||
import SpaceCategory from "./space/category.vue";
|
||||
import SpaceFile from "./space/file.vue";
|
||||
|
||||
const props = defineProps({
|
||||
// 绑定值
|
||||
modelValue: String,
|
||||
// 选择图片的数量
|
||||
// 可选数量
|
||||
limit: Number,
|
||||
// 是否禁用
|
||||
disabled: Boolean,
|
||||
@ -126,6 +133,11 @@ const props = defineProps({
|
||||
showBtn: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 标题
|
||||
title: {
|
||||
type: String,
|
||||
default: "文件空间"
|
||||
}
|
||||
});
|
||||
|
||||
@ -152,10 +164,10 @@ const visible = ref(false);
|
||||
const loading = ref(false);
|
||||
|
||||
// 已选列表
|
||||
const selection = ref<any[]>([]);
|
||||
const selection = ref<Eps.SpaceInfoEntity[]>([]);
|
||||
|
||||
// 文件列表
|
||||
const list = ref<any[]>([]);
|
||||
const list = ref<Eps.SpaceInfoEntity[]>([]);
|
||||
|
||||
// 类目数据
|
||||
const category = reactive({
|
||||
@ -185,8 +197,15 @@ watch(
|
||||
const isSelected = computed(() => !isEmpty(selection.value));
|
||||
|
||||
// 打开
|
||||
let lock = false;
|
||||
|
||||
function open() {
|
||||
visible.value = true;
|
||||
|
||||
if (!lock) {
|
||||
lock = true;
|
||||
refresh();
|
||||
}
|
||||
}
|
||||
|
||||
// 清空选择
|
||||
@ -259,15 +278,15 @@ async function refresh(params: any = {}) {
|
||||
|
||||
// 确认选中
|
||||
function confirm() {
|
||||
emit("update:modelValue", selection.value.map((e: any) => e.url).join(","));
|
||||
emit("update:modelValue", selection.value.map((e) => e.url).join(","));
|
||||
emit("confirm", selection.value);
|
||||
|
||||
close();
|
||||
}
|
||||
|
||||
// 选择
|
||||
function select(item: any) {
|
||||
const index = selection.value.findIndex((e: any) => e.id === item.id);
|
||||
function select(item: Eps.SpaceInfoEntity) {
|
||||
const index = selection.value.findIndex((e) => e.id === item.id);
|
||||
|
||||
if (index >= 0) {
|
||||
selection.value.splice(index, 1);
|
||||
@ -279,9 +298,9 @@ function select(item: any) {
|
||||
}
|
||||
|
||||
// 删除选中
|
||||
function remove(item?: any) {
|
||||
function remove(item?: Eps.SpaceInfoEntity) {
|
||||
// 已选文件 id
|
||||
const ids: number[] = item ? [item.id] : selection.value.map((e: any) => e.id);
|
||||
const ids = item ? [item.id] : selection.value.map((e) => e.id);
|
||||
|
||||
ElMessageBox.confirm("此操作将删除文件, 是否继续?", "提示", {
|
||||
type: "warning"
|
||||
@ -292,7 +311,7 @@ function remove(item?: any) {
|
||||
// 删除文件及选择
|
||||
ids.forEach((id) => {
|
||||
[list.value, selection.value].forEach((list) => {
|
||||
const index = list.findIndex((e: any) => e.id === id);
|
||||
const index = list.findIndex((e) => e.id === id);
|
||||
list.splice(index, 1);
|
||||
});
|
||||
});
|
||||
@ -337,11 +356,8 @@ provide("space", {
|
||||
category,
|
||||
selection,
|
||||
refresh,
|
||||
loading
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
refresh();
|
||||
loading,
|
||||
list
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
@ -359,6 +375,7 @@ defineExpose({
|
||||
box-sizing: border-box;
|
||||
background-color: #f7f7f7;
|
||||
padding: 5px;
|
||||
user-select: none;
|
||||
|
||||
&__dialog {
|
||||
.el-dialog__body {
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
}"
|
||||
>
|
||||
<div class="cl-upload-space-category__search">
|
||||
<el-input v-model="keyword" placeholder="搜索" clearable />
|
||||
<el-input v-model="keyword" placeholder="搜索分类" clearable />
|
||||
<el-button type="success" @click="edit()">添加</el-button>
|
||||
</div>
|
||||
|
||||
@ -39,32 +39,29 @@
|
||||
<cl-form ref="Form" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
<script lang="ts" setup name="space-category">
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { ArrowRightBold } from "@element-plus/icons-vue";
|
||||
import { computed, inject, onMounted, ref } from "vue";
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { isEmpty } from "lodash-es";
|
||||
import { useCool } from "/@/cool";
|
||||
import { ContextMenu, useForm } from "@cool-vue/crud";
|
||||
import { useBase } from "/$/base";
|
||||
import { useSpace } from "../../hooks";
|
||||
|
||||
const { service } = useCool();
|
||||
|
||||
// 缓存
|
||||
const { app } = useBase();
|
||||
|
||||
// 接收
|
||||
const space = inject<any>("space");
|
||||
const { space } = useSpace();
|
||||
|
||||
// 数据列表
|
||||
const list = ref<any[]>([]);
|
||||
const list = ref<Eps.SpaceTypeEntity[]>([]);
|
||||
|
||||
// 搜索关键字
|
||||
const keyword = ref<string>("");
|
||||
const keyword = ref("");
|
||||
|
||||
// 过滤列表
|
||||
const flist = computed(() => {
|
||||
return list.value.filter((e: any) => e.name.includes(keyword.value));
|
||||
return list.value.filter((e) => (e.name || "").includes(keyword.value));
|
||||
});
|
||||
|
||||
// 刷新分类
|
||||
@ -72,13 +69,13 @@ async function refresh() {
|
||||
return service.space.type.list().then((res) => {
|
||||
res.unshift({
|
||||
name: "全部文件",
|
||||
id: null
|
||||
id: undefined
|
||||
});
|
||||
|
||||
list.value = res;
|
||||
|
||||
if (!isEmpty(res)) {
|
||||
if (!space.category.id) {
|
||||
if (!space.category.id && res[0].id) {
|
||||
space.category.id = res[0].id;
|
||||
}
|
||||
}
|
||||
@ -88,7 +85,7 @@ async function refresh() {
|
||||
const Form = useForm();
|
||||
|
||||
// 编辑分类
|
||||
function edit(item: any = {}) {
|
||||
function edit(item: Eps.SpaceTypeEntity = {}) {
|
||||
Form.value?.open({
|
||||
title: "添加分类",
|
||||
width: "400px",
|
||||
@ -132,7 +129,7 @@ function edit(item: any = {}) {
|
||||
}
|
||||
|
||||
// 选择类目
|
||||
function select(id: number) {
|
||||
function select(id?: number) {
|
||||
// 小屏幕下收起左侧类目
|
||||
if (app.browser.isMini) {
|
||||
space.category.visible = false;
|
||||
@ -183,7 +180,7 @@ function onContextMenu(e: any, { id, name }: any) {
|
||||
|
||||
// 是否删除当前
|
||||
if (id == space.category.id) {
|
||||
space.category.id = null;
|
||||
space.category.id = undefined;
|
||||
}
|
||||
|
||||
refresh();
|
||||
|
||||
@ -24,6 +24,11 @@
|
||||
</el-image>
|
||||
</template>
|
||||
|
||||
<!-- 视频 -->
|
||||
<template v-else-if="info.type === 'video'">
|
||||
<item-video :data="info" :list="list" />
|
||||
</template>
|
||||
|
||||
<!-- 其他 -->
|
||||
<template v-else>
|
||||
<!-- 文件名 -->
|
||||
@ -36,18 +41,21 @@
|
||||
<span
|
||||
class="cl-upload-space-file__type"
|
||||
:style="{
|
||||
backgroundColor: type.color
|
||||
backgroundColor: type?.color
|
||||
}"
|
||||
>{{ type.label }}</span
|
||||
>{{ type?.label }}</span
|
||||
>
|
||||
|
||||
<!-- 上传中 -->
|
||||
<template v-if="info.progress > 0 && info.progress < 100">
|
||||
<!-- 进度条 -->
|
||||
<div
|
||||
class="cl-upload-space-file__progress"
|
||||
v-if="info.progress > 0 && info.progress < 100"
|
||||
>
|
||||
<div class="cl-upload-space-file__progress-bar">
|
||||
<el-progress :percentage="info.progress" :show-text="false"></el-progress>
|
||||
</div>
|
||||
|
||||
<!-- 进度值 -->
|
||||
<span class="cl-upload-space-file__progress-value">{{ info.progress }}</span>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 遮罩层 -->
|
||||
@ -58,30 +66,32 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, inject } from "vue";
|
||||
<script lang="ts" setup name="space-file">
|
||||
import { computed } from "vue";
|
||||
import { ContextMenu } from "@cool-vue/crud";
|
||||
import { extname } from "/@/cool/utils";
|
||||
import { fileName, fileType } from "../../utils";
|
||||
import { fileName, fileRule } from "../../utils";
|
||||
import { useClipboard } from "@vueuse/core";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useSpace } from "../../hooks";
|
||||
import ItemVideo from "./item-video.vue";
|
||||
|
||||
const { copy } = useClipboard();
|
||||
|
||||
const props = defineProps({
|
||||
data: Object
|
||||
data: Object,
|
||||
list: Array
|
||||
});
|
||||
|
||||
const emit = defineEmits(["select", "remove"]);
|
||||
|
||||
// 接收
|
||||
const space = inject<any>("space");
|
||||
const { space } = useSpace();
|
||||
|
||||
// 文件信息
|
||||
const info = computed(() => props.data || {});
|
||||
const info = computed<Eps.SpaceInfoEntity>(() => props.data || {});
|
||||
|
||||
// 已选的序号
|
||||
const index = computed(() => space.selection.value.findIndex((e: any) => e.id === info.value.id));
|
||||
const index = computed(() => space.selection.value.findIndex((e) => e.id === info.value.id));
|
||||
|
||||
// 是否已选择
|
||||
const isSelected = computed(() => index.value >= 0);
|
||||
@ -90,7 +100,7 @@ const isSelected = computed(() => index.value >= 0);
|
||||
const url = computed(() => info.value.preload || info.value.url);
|
||||
|
||||
// 类型
|
||||
const type = computed(() => fileType(info.value.url));
|
||||
const type = computed(() => fileRule(info.value.type));
|
||||
|
||||
// 选择
|
||||
function select() {
|
||||
@ -119,8 +129,11 @@ function onContextMenu(e: any) {
|
||||
{
|
||||
label: "复制地址",
|
||||
callback(done) {
|
||||
if (info.value.url) {
|
||||
copy(info.value.url);
|
||||
ElMessage.success("复制成功");
|
||||
}
|
||||
|
||||
done();
|
||||
}
|
||||
},
|
||||
@ -187,7 +200,11 @@ function onContextMenu(e: any) {
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.is-image) {
|
||||
&.is-video {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:not(.is-image):not(.is-video) {
|
||||
padding: 10px;
|
||||
|
||||
.cl-upload-space-file {
|
||||
@ -223,12 +240,24 @@ function onContextMenu(e: any) {
|
||||
}
|
||||
|
||||
&__progress {
|
||||
&-bar {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
|
||||
&-value {
|
||||
position: absolute;
|
||||
font-size: 26px;
|
||||
|
||||
&::after {
|
||||
content: "%";
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__type {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
108
src/modules/upload/components/space/item-video.vue
Normal file
108
src/modules/upload/components/space/item-video.vue
Normal file
@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div class="item-video">
|
||||
<video ref="Video" :src="info.url" />
|
||||
|
||||
<template v-if="loaded">
|
||||
<el-icon class="icon is-pause" @click.stop="pause" v-if="info.isPlay">
|
||||
<video-pause />
|
||||
</el-icon>
|
||||
|
||||
<el-icon class="icon is-play" @click.stop="play" v-else>
|
||||
<video-play />
|
||||
</el-icon>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="item-video">
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { VideoPlay, VideoPause } from "@element-plus/icons-vue";
|
||||
import { useSpace } from "../../hooks";
|
||||
|
||||
const props = defineProps({
|
||||
data: Object,
|
||||
list: Array
|
||||
});
|
||||
|
||||
const { space } = useSpace();
|
||||
|
||||
const info = computed<Eps.SpaceInfoEntity>(() => props.data || {});
|
||||
|
||||
const Video = ref<HTMLVideoElement>();
|
||||
|
||||
const loaded = computed(() => {
|
||||
return info.value.progress === undefined || info.value.progress === 100;
|
||||
});
|
||||
|
||||
function play() {
|
||||
space.list.value.forEach((e) => {
|
||||
e.isPlay = info.value.id == e.id;
|
||||
});
|
||||
|
||||
Video.value?.play();
|
||||
}
|
||||
|
||||
function pause() {
|
||||
const item = space.list.value.find((e) => e.id == info.value.id);
|
||||
|
||||
if (item) {
|
||||
item.isPlay = false;
|
||||
}
|
||||
|
||||
Video.value?.pause();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => info.value.isPlay,
|
||||
(val) => {
|
||||
if (val) {
|
||||
play();
|
||||
} else {
|
||||
pause();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
defineExpose({
|
||||
play,
|
||||
pause
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.item-video {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
video {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
cursor: pointer;
|
||||
font-size: 30px;
|
||||
filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.25));
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
color: #eee;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.icon {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
8
src/modules/upload/hooks/index.ts
Normal file
8
src/modules/upload/hooks/index.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import { inject } from "vue";
|
||||
import { Upload } from "../types";
|
||||
|
||||
export function useSpace() {
|
||||
const space = inject("space") as Upload.Space;
|
||||
|
||||
return { space };
|
||||
}
|
||||
22
src/modules/upload/types/index.d.ts
vendored
Normal file
22
src/modules/upload/types/index.d.ts
vendored
Normal file
@ -0,0 +1,22 @@
|
||||
import { Ref } from "vue";
|
||||
|
||||
export declare namespace Upload {
|
||||
interface Item {
|
||||
url: string;
|
||||
preload: string;
|
||||
uid: number | string;
|
||||
progress: number;
|
||||
type?: string;
|
||||
}
|
||||
|
||||
interface Space {
|
||||
category: {
|
||||
id: number | undefined;
|
||||
visible: boolean;
|
||||
};
|
||||
list: Ref<Eps.SpaceInfoEntity[]>;
|
||||
selection: Ref<Eps.SpaceInfoEntity[]>;
|
||||
refresh(params: any): Promise<any>;
|
||||
loading: boolean;
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,34 @@
|
||||
import { last } from "lodash-es";
|
||||
import { filename, extname } from "/@/cool/utils";
|
||||
|
||||
// 文件规则
|
||||
const fileRules = [
|
||||
{
|
||||
label: "图片",
|
||||
value: "image",
|
||||
format: ["bmp", "jpg", "jpeg", "png", "tif", "gif", "svg", "webp"],
|
||||
color: "#67C23A"
|
||||
},
|
||||
{
|
||||
label: "视频",
|
||||
value: "video",
|
||||
format: ["avi", "wmv", "mpg", "mpeg", "mov", "rm", "ram", "swf", "flv", "mp4"],
|
||||
color: "#409EFF"
|
||||
},
|
||||
{
|
||||
label: "音频",
|
||||
value: "audio",
|
||||
format: ["mp3", "wav", "wma", "mp2", "flac", "midi", "ra", "ape", "aac", "cda"],
|
||||
color: "#E6A23C"
|
||||
},
|
||||
{
|
||||
label: "文件",
|
||||
value: "file",
|
||||
format: [],
|
||||
color: "#909399"
|
||||
}
|
||||
];
|
||||
|
||||
// 文件大小
|
||||
export function fileSize(size: number): string {
|
||||
if (!size) return "";
|
||||
@ -18,36 +47,16 @@ export function fileName(url: string) {
|
||||
return filename(url.substring(url.indexOf("_") + 1));
|
||||
}
|
||||
|
||||
// 文件类型
|
||||
// 类型信息
|
||||
export function fileType(path: string) {
|
||||
const fs = [
|
||||
{
|
||||
label: "图片",
|
||||
value: "image",
|
||||
format: ["bmp", "jpg", "jpeg", "png", "tif", "gif", "svg", "webp"],
|
||||
color: "#67C23A"
|
||||
},
|
||||
{
|
||||
label: "视频",
|
||||
value: "video",
|
||||
format: ["avi", "wmv", "mpg", "mpeg", "mov", "rm", "ram", "swf", "flv", "mp4"],
|
||||
color: "#409EFF"
|
||||
},
|
||||
{
|
||||
label: "音频",
|
||||
value: "audio",
|
||||
format: ["mp3", "wav", "wma", "mp2", "flac", "midi", "ra", "ape", "aac", "cda"],
|
||||
color: "#E6A23C"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
fs.find((e) => {
|
||||
const d = fileRules.find((e) => {
|
||||
return e.format.find((a) => a == extname(path).toLocaleLowerCase());
|
||||
}) || {
|
||||
label: "文件",
|
||||
value: "file",
|
||||
color: "#909399"
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
return d || last(fileRules);
|
||||
}
|
||||
|
||||
// 规则信息
|
||||
export function fileRule(value: string) {
|
||||
return fileRules.find((e) => e.value == value);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user