gitY
/
DiKongGanZhiPingTai
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

媒体库-视频部分

Browse Source
main
滕嵩 1 month ago
parent 8d5dc54cd1
commit 5daf0b4897
6 changed files with 349 additions and 220 deletions
Show Stats Download Patch File Download Diff File

315
src/views/demo/system/mediaLibrary/index.vue
Unescape Escape View File

@ -30,21 +30,29 @@
</div>
</template>
<template #bodyCell="{ column, record }">
<div v-if="tableType == 'table'">
<div v-if="tableTypeAfterShow == 'table'">
<template v-if="column.key === 'name'">
<!-- 文件夹 -->
<FolderOpenOutlined v-if="!record.objectKey" style="font-size: 20px" />
<FileOutlined
v-if="record.objectKey && !record.objectKey.includes('jpeg')"
style="font-size: 20px"
/>
<!-- 图片 -->
<img
v-if="record.objectKey && record.objectKey.includes('jpeg')"
:src="`${VITE_MEDIALIBRARY_IMAGE_URL + (record.minipic ? record.minipic : record.objectKey)}`"
:width="30"
:height="20"
/>
<!-- 视频 -->
<PlaySquareTwoTone
v-if="record.objectKey && record.objectKey.includes('mp4')"
style="font-size: 20px"
/>
<!-- 文件夹或者图片、视频 -->
<span
v-if="!record.objectKey || (record.objectKey && record.objectKey.includes('jpeg'))"
v-if="
!record.objectKey ||
(record.objectKey &&
(record.objectKey.includes('jpeg') || record.objectKey.includes('mp4')))
"
@click="lookRecord(record)"
@mouseover="record.isHovered = true"
@mouseout="record.isHovered = false"
@ -55,8 +63,21 @@
>
{{ record.name }}
</span>
<!-- 其他文件 -->
<FileOutlined
v-if="
record.objectKey &&
!record.objectKey.includes('jpeg') &&
!record.objectKey.includes('mp4')
"
style="font-size: 20px"
/>
<span
v-if="record.objectKey && !record.objectKey.includes('jpeg')"
v-if="
record.objectKey &&
!record.objectKey.includes('jpeg') &&
!record.objectKey.includes('mp4')
"
:style="{
marginLeft: '5px',
}"
@ -133,12 +154,12 @@
</div>
</template>
</BasicTable>
<div v-if="tableType == 'store'" class="storeDivsAllChoose">
<div v-if="tableTypeAfterShow == 'store'" class="storeDivsAllChoose">
<a-checkbox v-model:checked="checkNameChecked" @change="changeStore($event, 'allChoose')">
全选
</a-checkbox>
</div>
<div v-if="tableType == 'store'" class="storeDivs">
<div v-if="tableTypeAfterShow == 'store'" class="storeDivList">
<div
v-for="record in showTableData"
:key="record.id"
@ -147,38 +168,64 @@
@mouseover="record.isHovered = true"
@mouseout="record.isHovered = false"
>
<!-- 选中 -->
<div style="position: absolute; top: 0px; left: 5px">
<a-checkbox v-model:checked="record.checked" @change="changeStore($event, record)" />
</div>
<!-- 文件夹 -->
<FolderOpenOutlined
v-if="!record.objectKey"
style="font-size: 40px"
@click="lookRecord(record)"
/>
<!-- 图片 -->
<img
v-if="record.objectKey"
v-if="record.objectKey && record.objectKey.includes('jpeg')"
:src="`${VITE_MEDIALIBRARY_IMAGE_URL + (record.minipic ? record.minipic : record.objectKey)}`"
:width="60"
:height="40"
:width="100"
:height="60"
style="position: absolute; top: 10px; left: 32.5px"
@click="lookRecord(record)"
/>
<!-- 视频 -->
<PlaySquareTwoTone
v-if="record.objectKey && record.objectKey.includes('mp4')"
style="font-size: 40px"
/>
<!-- 文件夹或者图片、视频 -->
<span
v-if="
!record.objectKey ||
(record.objectKey &&
(record.objectKey.includes('jpeg') || record.objectKey.includes('mp4')))
"
class="storeDivSpanName"
:style="{
textDecoration: record.isHovered ? 'underline' : 'none',
position: 'absolute',
bottom: '10px',
left: '0px',
width: '100%',
height: '30px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
}"
@click="lookRecord(record)"
>
{{ record.name }}
</span>
<!-- 其他文件 -->
<FileOutlined
v-if="
record.objectKey &&
!record.objectKey.includes('jpeg') &&
!record.objectKey.includes('mp4')
"
style="font-size: 40px"
/>
<span
v-if="
record.objectKey &&
!record.objectKey.includes('jpeg') &&
!record.objectKey.includes('mp4')
"
class="storeDivSpanName"
>
{{ record.name }}
</span>
</div>
</div>
</div>
@ -273,6 +320,7 @@
PlaySquareTwoTone,
FileOutlined,
BorderInnerOutlined,
YoutubeOutlined,
} from '@ant-design/icons-vue';
import {
GetMediaFile,
@ -300,51 +348,76 @@
const showTableData = ref();
// 表格还是文件夹
const tableType = ref('table');
const tableTypeAfterShow = ref('table');
const tableHeight: any = ref(0);
watch(
() => tableType.value,
(newval) => {
showTableData.value = getDataSource();
// 表格
const containers = document.querySelectorAll('.ant-table-container');
if (newval) {
tableHeight.value = containers[0] ? containers[0]?.scrollHeight : 0;
} else {
tableHeight.value = 0;
}
if (containers) {
containers.forEach((container) => {
container.style.display = tableType.value === 'table' ? 'block' : 'none';
});
}
// 分页
const paginations = document.querySelectorAll('.ant-pagination');
if (paginations) {
paginations.forEach((pagination) => {
pagination.style.display = tableType.value === 'table' ? 'block' : 'none';
// 格子
if (newval === 'store') {
// 数据
GetMediaFile({
parentKey: nowParentKey.value,
page: 1,
limit: 1000,
}).then((res) => {
showTableData.value = res.items;
tableTypeAfterShow.value = newval;
// 表格-隐藏
const containers = document.querySelectorAll('.ant-table-container');
tableHeight.value = containers[0] ? containers[0]?.scrollHeight : 0;
if (containers) {
containers.forEach((container) => {
container.style.display = 'none';
});
}
// 分页-隐藏
const paginations = document.querySelectorAll('.ant-pagination');
if (paginations) {
paginations.forEach((pagination) => {
pagination.style.display = 'none';
});
}
// 选中：表格→格子
let selectRowsIdArray = getSelectRows().map((item) => item.id);
showTableData.value.forEach((item) => {
if (selectRowsIdArray.includes(item.id)) {
item.checked = true;
changeStore(
{
target: {
checked: true,
},
},
item,
);
}
});
});
}
// 选中
// 框架
if (tableType.value === 'store') {
let selectRowsIdArray = getSelectRows().map((item) => item.id);
showTableData.value.forEach((item) => {
if (selectRowsIdArray.includes(item.id)) {
item.checked = true;
changeStore(
{
target: {
checked: true,
},
},
item,
);
// 表格
if (newval === 'table') {
reload().then((res) => {
tableTypeAfterShow.value = newval;
// 表格-显示
const containers = document.querySelectorAll('.ant-table-container');
tableHeight.value = containers[0] ? containers[0]?.scrollHeight : 0;
if (containers) {
containers.forEach((container) => {
container.style.display = 'block';
});
}
// 分页-显示
const paginations = document.querySelectorAll('.ant-pagination');
if (paginations) {
paginations.forEach((pagination) => {
pagination.style.display = 'block';
});
}
// 选中：格子→表格
let selectRowsIdArray = showTableData.value.filter((item) => item.checked);
setSelectedRows(selectRowsIdArray);
});
} else {
// 表格
let selectRowsIdArray = showTableData.value.filter((item) => item.checked);
setSelectedRows(selectRowsIdArray);
}
},
);
@ -417,6 +490,8 @@
// 接口请求前 参数处理
let temp = {
...data,
page: tableTypeAfterShow.value == 'table' ? data.page : 1,
limit: tableTypeAfterShow.value == 'table' ? data.limit : 1000,
parentKey: nowParentKey.value,
};
return temp;
@ -502,12 +577,10 @@
page: 1,
limit: 100,
}).then((res) => {
previewRecordList.value = uniqueByKey(res.items, null);
getDataSource().forEach((item) => {
if (item.id == nowPreviewRecord.value.id) {
nowPreviewRecord.value = item;
}
});
previewRecordList.value = uniqueByKey(res.items, nowPreviewRecord.value);
nowPreviewRecord.value = getDataSource().find(
(item) => item.id == nowPreviewRecord.value.id,
);
});
}
}, 500);
@ -541,16 +614,16 @@
}
// 压缩
function compressFolderOrFile() {
let rows = getSelectRows();
if (rows.length > 0) {
const record = rows;
openCompressFileModal(true, {
tableData: getDataSource(),
record,
});
} else {
return createMessage.warn('请选择一个或者多个文件/文件夹压缩');
}
// let rows = getSelectRows();
// if (rows.length > 0) {
// const record = rows;
// openCompressFileModal(true, {
// tableData: getDataSource(),
// record,
// });
// } else {
// return createMessage.warn('请选择一个或者多个文件/文件夹压缩');
// }
}
// 重命名
function renameRecord(record) {
@ -634,48 +707,42 @@
});
}
}
// 去重
function uniqueByKey(arrlist, record) {
let resultList: any = [];
arrlist.forEach((arr) => {
if (
arr.objectKey &&
!resultList.some((item) => item.objectKey === arr.objectKey) &&
arr.objectKey.includes('jpeg')
) {
// 保持顺序
if (record) {
if (
(arr.objectKey == record.objectKey && record.id == arr.id) ||
arr.objectKey != record.objectKey
) {
if (!arr.fileTags) {
arr.fileTags = [];
} else {
arr.fileTags = JSON.parse(arr.fileTags);
}
if (!arr.graffitiJson) {
arr.graffitiJson = [];
} else {
arr.graffitiJson = JSON.parse(arr.graffitiJson);
}
resultList.push(arr);
if (record.objectKey.includes('.jpeg')) {
arrlist
.filter((item) => item.objectKey && item.objectKey.includes('jpeg'))
.forEach((item) => {
if (!item.fileTags) {
item.fileTags = [];
} else {
item.fileTags = JSON.parse(item.fileTags);
}
} else {
if (!arr.fileTags) {
arr.fileTags = [];
if (!item.graffitiJson) {
item.graffitiJson = [];
} else {
item.graffitiJson = JSON.parse(item.graffitiJson);
}
resultList.push(item);
});
}
if (record.objectKey.includes('mp4')) {
arrlist
.filter((item) => item.objectKey && item.objectKey.includes('mp4'))
.forEach((item) => {
if (!item.fileTags) {
item.fileTags = [];
} else {
arr.fileTags = JSON.parse(arr.fileTags);
item.fileTags = JSON.parse(item.fileTags);
}
if (!arr.graffitiJson) {
arr.graffitiJson = [];
if (!item.graffitiJson) {
item.graffitiJson = [];
} else {
arr.graffitiJson = JSON.parse(arr.graffitiJson);
item.graffitiJson = JSON.parse(item.graffitiJson);
}
resultList.push(arr);
}
}
});
resultList.push(item);
});
}
return resultList;
}
// 图片选择
@ -795,29 +862,47 @@
padding-left: 16px;
background: #ffffff;
display: flex;
align-items: flex-start;
align-items: center;
justify-content: flex-start;
}
.storeDivs {
.storeDivList {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
height: 566px;
height: 72.5%;
background: #ffffff;
margin: 0px 16px 16px 16px;
// gap: 20px;
overflow-y: auto;
.storeDiv {
position: relative;
width: 160px;
height: 120px;
width: 165px;
height: 130px;
outline: 1px solid #000000;
margin: 16px;
display: flex;
align-items: center;
justify-content: center;
.storeDivSpanName {
position: absolute;
bottom: 16px;
left: 0px;
width: 100%;
height: 30px;
cursor: pointer;
white-space: pre-wrap;
word-break: break-all;
overflow-wrap: break-word;
max-width: 100%;
display: block;
}
}
}

22
src/views/demo/system/mediaLibrary/preview/index.vue
Unescape Escape View File

@ -18,7 +18,12 @@
<div class="mainBody">
<div class="imgOrVideo">
<!-- 图片 -->
<div class="imageDiv" v-if="props.nowPreviewRecord.objectKey">
<div
class="imageDiv"
v-if="
props.nowPreviewRecord.objectKey && props.nowPreviewRecord.objectKey.includes('jpeg')
"
>
<PreviewImage
:nowPreviewRecord="props.nowPreviewRecord"
:previewRecordList="props.previewRecordList"
@ -28,7 +33,12 @@
/>
</div>
<!-- 视频 -->
<div class="videoDiv" v-if="props.nowPreviewRecord.type == 'video'">
<div
class="videoDiv"
v-if="
props.nowPreviewRecord.objectKey && props.nowPreviewRecord.objectKey.includes('mp4')
"
>
<PreviewVideo
:nowPreviewRecord="props.nowPreviewRecord"
:previewRecordList="props.previewRecordList"
@ -39,7 +49,9 @@
</div>
<div class="information">
<PreviewImageInformation
v-if="props.nowPreviewRecord.objectKey"
v-if="
props.nowPreviewRecord.objectKey && props.nowPreviewRecord.objectKey.includes('jpeg')
"
:nowPreviewRecord="props.nowPreviewRecord"
:previewRecordList="props.previewRecordList"
@chooseNowPreviewRecord="chooseNowPreviewRecord"
@ -48,7 +60,9 @@
@openPathModal="openPathModal"
/>
<PreviewVideoInformation
v-if="props.nowPreviewRecord.type == 'video'"
v-if="
props.nowPreviewRecord.objectKey && props.nowPreviewRecord.objectKey.includes('mp4')
"
:nowPreviewRecord="props.nowPreviewRecord"
:previewRecordList="props.previewRecordList"
@chooseNowPreviewRecord="chooseNowPreviewRecord"

22
src/views/demo/system/mediaLibrary/preview/previewImage.vue
Unescape Escape View File

@ -518,17 +518,11 @@
FontColorsOutlined,
RedoOutlined,
OneToOneOutlined,
FileImageOutlined,
BorderHorizontalOutlined,
ExpandOutlined,
CompressOutlined,
} from '@ant-design/icons-vue';
import {
UpdatePicStatus,
Deletepic,
UpdatePicName,
UpdatePicParentKey,
} from '@/api/demo/mediaLibrary';
import { UpdatePicStatus, Deletepic } from '@/api/demo/mediaLibrary';
import { useMessage } from '@/hooks/web/useMessage';
import { cloneDeep } from 'lodash-es';
import { getAppEnvConfig } from '@/utils/env';
@ -544,7 +538,9 @@
// 上一张、下一张图片
function clickLeftOrRightButton(direction) {
const list = props.previewRecordList.filter((item) => item.objectKey);
const list = props.previewRecordList.filter(
(item) => item.objectKey && item.objectKey.includes('jpeg'),
);
graffitiFlag.value = false;
for (let index = 0; index < list.length; index++) {
if (list[index].id == props.nowPreviewRecord.id) {
@ -657,7 +653,7 @@
// 删除
function deleteImage() {
let content = '确定要删除选择的文件/文件夹吗？';
let content = '确定要删除选择的文件吗？';
if (props.previewRecordList.length == 1) {
content = '下列图片只有一个，删除此图片后将会关闭此弹窗，确定要删除选择的文件吗？';
}
@ -671,7 +667,7 @@
ids: ids,
}).then((res) => {
handleSuccess(props.nowPreviewRecord);
createMessage.success(res);
createMessage.success('删除成功');
});
},
});
@ -831,7 +827,7 @@
const mouseCanvasRef = ref();
// 鼠标按下
function onMouseDown(event) {
if (graffitiFlag.value || graffitis.value.some((item) => item.status != 'success')) {
if (graffitiFlag.value || graffitis.value?.some((item) => item.status != 'success')) {
// 涂鸦
if (nowGraffiti.value != -1) return;
if (graffitis.value.findIndex((item) => item.status == 'mouse') != -1) return;
@ -868,7 +864,7 @@
}
// 鼠标移动
function onMouseMove(event) {
if (graffitiFlag.value || graffitis.value.some((item) => item.status != 'success')) {
if (graffitiFlag.value || graffitis.value?.some((item) => item.status != 'success')) {
// 涂鸦
const rect = mouseCanvasRef.value.getBoundingClientRect();
if (!isDragging.value) return;
@ -892,7 +888,7 @@
}
// 鼠标松开
function onMouseUp(event) {
if (graffitiFlag.value || graffitis.value.some((item) => item.status != 'success')) {
if (graffitiFlag.value || graffitis.value?.some((item) => item.status != 'success')) {
// 涂鸦
if (!isDragging.value) return;
const rect = mouseCanvasRef.value.getBoundingClientRect();

13
src/views/demo/system/mediaLibrary/preview/previewImageInformation.vue
Unescape Escape View File

@ -225,12 +225,7 @@
CheckOutlined,
CloseOutlined,
} from '@ant-design/icons-vue';
import {
UpdatePicStatus,
Deletepic,
UpdatePicName,
UpdatePicParentKey,
} from '@/api/demo/mediaLibrary';
import { UpdatePicStatus, UpdatePicName } from '@/api/demo/mediaLibrary';
import { Map } from './preview';
import { useMessage } from '@/hooks/web/useMessage';
const { createMessage, createConfirm } = useMessage();
@ -304,9 +299,12 @@
id: props.nowPreviewRecord.id,
fileTags: JSON.stringify(fileTags.value),
graffitiJson: JSON.stringify(graffitiJson.value),
display: props.nowPreviewRecord.display,
showOnMap: props.nowPreviewRecord.showOnMap,
}).then((res) => {
addFileTagsFlag.value = true;
newFileTagsName.value = '';
createMessage.success('添加标签成功');
emits('handleSuccess');
});
} else {
@ -331,7 +329,10 @@
id: props.nowPreviewRecord.id,
fileTags: JSON.stringify(fileTags.value),
graffitiJson: JSON.stringify(graffitiJson.value),
display: props.nowPreviewRecord.display,
showOnMap: props.nowPreviewRecord.showOnMap,
}).then((res) => {
createMessage.success('删除标签成功');
emits('handleSuccess');
});
},

57
src/views/demo/system/mediaLibrary/preview/previewVideo.vue
Unescape Escape View File

@ -1,7 +1,13 @@
<template>
<div class="videoDiv">
<div class="showVideo">
<video :src="props.nowPreviewRecord.url" class="video-player" controls muted autoplay></video>
<video
:src="`${VITE_MEDIALIBRARY_IMAGE_URL + props.nowPreviewRecord.objectKey}`"
class="video-player"
controls
muted
autoplay
></video>
</div>
<div class="bottomDiv">
@ -12,7 +18,7 @@
<template #title>
<span>下载</span>
</template>
<DownloadOutlined @click="fetchAndDownloadVideo(props.nowPreviewRecord.url)" />
<DownloadOutlined @click="fetchAndDownloadVideo(props.nowPreviewRecord.objectKey)" />
</a-tooltip>
</div>
<!-- 删除 -->
@ -28,8 +34,8 @@
<div class="imageList">
<div v-for="li in props.previewRecordList" :key="li.id" @click="chooseNowPreviewRecord(li)">
<div
v-if="li.objectKey"
:class="li.id == props.nowPreviewRecord.id ? 'bottom_div_choose' : 'bottom_div'"
v-if="li.type == 'video'"
>
<img :src="li.gifZoomImage" :width="60" :height="40" />
</div>
@ -53,13 +59,20 @@
LeftOutlined,
RightOutlined,
} from '@ant-design/icons-vue';
import { Deletepic } from '@/api/demo/mediaLibrary';
import { getAppEnvConfig } from '@/utils/env';
import { useMessage } from '@/hooks/web/useMessage';
const { VITE_MEDIALIBRARY_IMAGE_URL } = getAppEnvConfig();
const { createConfirm, createMessage } = useMessage();
const props = defineProps(['nowPreviewRecord', 'previewRecordList']);
const emit = defineEmits(['chooseNowPreviewRecord', 'reloadTable']);
const emits = defineEmits(['chooseNowPreviewRecord', 'handleSuccess']);
// 上一张、下一张图片
// 上一张、下一张视频
function clickLeftOrRightButton(direction) {
const list = props.previewRecordList.filter((item) => item.type == 'video');
const list = props.previewRecordList.filter(
(item) => item.objectKey && item.objectKey.includes('mp4'),
);
for (let index = 0; index < list.length; index++) {
if (list[index].id == props.nowPreviewRecord.id) {
if (direction == 'left') {
@ -82,7 +95,7 @@
// 下载
async function fetchAndDownloadVideo(url) {
try {
const response = await fetch(url, {
const response = await fetch(VITE_MEDIALIBRARY_IMAGE_URL + url, {
mode: 'cors',
});
if (!response.ok) {
@ -92,7 +105,7 @@
const urlObject = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = urlObject;
link.download = props.nowPreviewRecord.name;
link.download = props.nowPreviewRecord.name || 'download';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
@ -102,10 +115,34 @@
}
}
// 删除
function deleteVideo() {}
function deleteVideo() {
let content = '确定要删除选择的文件吗？';
if (props.previewRecordList.length == 1) {
content = '下列视频只有一个，删除此视频后将会关闭此弹窗，确定要删除选择的文件吗？';
}
createConfirm({
iconType: 'info',
title: '删除',
content: content,
onOk: async () => {
let ids = props.nowPreviewRecord.id;
Deletepic({
ids: ids,
}).then((res) => {
handleSuccess(props.nowPreviewRecord);
createMessage.success(res);
});
},
});
}
// 刷新表格
function handleSuccess(record = null) {
emits('handleSuccess', record);
}
// 选择
function chooseNowPreviewRecord(value) {
emit('chooseNowPreviewRecord', value);
emits('chooseNowPreviewRecord', value);
}
</script>
<style lang="less" scoped>

140
src/views/demo/system/mediaLibrary/preview/previewVideoInformation.vue
Unescape Escape View File

@ -12,7 +12,7 @@
<EditOutlined style="font-size: 20px; color: #07aaed" @click="editNameChange" />
</span>
<span class="infovalue_name" v-if="!editNameFlag">
<a-input v-model:value="editName" size="small" style="width: 80%" />
<a-input v-model:value="editName" size="small" />
<CheckOutlined
style="margin-left: 10px; color: green"
@click="pressEnterNameFunction"
@ -99,14 +99,17 @@
</a-col>
<a-col :span="17">
<span class="infovalue_graffitiNum">
<a-tag color="success" v-for="la in props.nowPreviewRecord.label" :key="la">
<a-tag color="success" v-for="la in props.nowPreviewRecord.fileTags" :key="la">
{{ la }}
</a-tag>
<PlusSquareOutlined style="font-size: 20px; color: #07aaed" @click="addLabelChange" />
<PlusSquareOutlined
style="font-size: 20px; color: #07aaed"
@click="addFileTagsChange"
/>
</span>
<a-modal
title="标签设置"
:open="addLabelFlag"
:open="addFileTagsFlag"
:mask="false"
:maskClosable="false"
:closable="false"
@ -115,24 +118,24 @@
<div style="display: block">
<div
style="display: flex; flex-wrap: wrap; gap: 5px; width: 96%; margin: 10px"
v-if="props.nowPreviewRecord.label && props.nowPreviewRecord.label.length > 0"
v-if="props.nowPreviewRecord.fileTags.length > 0"
>
已添加的标签：
<div
v-for="la in props.nowPreviewRecord.label"
v-for="la in props.nowPreviewRecord.fileTags"
:key="la"
style="border: 1px solid #595959; border-radius: 3px"
>
<span style="margin-left: 5px">{{ la }}</span>
<CloseOutlined
style="margin-left: 5px; margin-right: 5px"
@click="deleteLabel(la)"
@click="deleteFileTags(la)"
/>
</div>
</div>
<div style="display: inline-flex; gap: 5px; width: 96%; margin: 10px">
<a-input v-model:value="newLabelName" size="small" placeholder="请输入标签" />
<a-button type="primary" @click="pressEnterLabelFunction">添加</a-button>
<a-input v-model:value="newFileTagsName" size="small" placeholder="请输入标签" />
<a-button type="primary" @click="pressEnterFileTagsFunction">添加</a-button>
</div>
<div
style="
@ -145,8 +148,8 @@
>
<a-button
@click="
addLabelFlag = false;
newLabelName = '';
addFileTagsFlag = false;
newFileTagsName = '';
"
>
关闭
@ -160,21 +163,19 @@
</div>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import { ref, watch, computed } from 'vue';
import {
EditOutlined,
PlusSquareOutlined,
EnvironmentOutlined,
CheckOutlined,
CloseOutlined,
} from '@ant-design/icons-vue';
import { orgPosGroup } from '@/api/demo/system';
import { Map } from './preview';
import { UpdatePicName, UpdatePicStatus } from '@/api/demo/mediaLibrary';
import { useMessage } from '@/hooks/web/useMessage';
const { createMessage, createConfirm } = useMessage();
const { createMessage } = useMessage();
const props = defineProps(['nowPreviewRecord', 'previewRecordList', 'hideOrShowTextboxFlag']);
const emit = defineEmits(['chooseNowPreviewRecord', 'reloadTable']);
const props = defineProps(['nowPreviewRecord', 'previewRecordList']);
const emits = defineEmits(['chooseNowPreviewRecord', 'handleSuccess']);
// 修改名称--------------------------------
const editNameFlag = ref(true);
@ -195,21 +196,14 @@
}
let query = {
id: props.nowPreviewRecord.id,
newName: newName,
name: newName,
};
props.nowPreviewRecord.name = newName;
editNameFlag.value = true;
emit('reloadTable');
return;
// 调用接口
const data = await orgPosGroup(query);
if (data) {
UpdatePicName(query).then((res) => {
props.nowPreviewRecord.name = newName;
editNameFlag.value = true;
emit('reloadTable');
return createMessage.success('修改名称成功');
} else {
return createMessage.error('修改名称失败');
}
createMessage.success(res);
emits('handleSuccess');
});
}
function editNameBlur() {
editNameFlag.value = true;
@ -217,64 +211,66 @@
}
// 标签--------------------------------
const addLabelFlag = ref(false);
const newLabelName = ref('');
function addLabelChange() {
addLabelFlag.value = true;
const addFileTagsFlag = ref(false);
const newFileTagsName = ref('');
const fileTags: any = ref([]);
watch(
() => props.nowPreviewRecord,
() => {
fileTags.value = props.nowPreviewRecord.fileTags ? props.nowPreviewRecord.fileTags : [];
},
{
deep: true,
immediate: true,
},
);
// 标签弹窗打开
function addFileTagsChange() {
addFileTagsFlag.value = true;
}
// 添加标签方法
async function pressEnterLabelFunction() {
if (!newLabelName.value) {
async function pressEnterFileTagsFunction() {
if (!newFileTagsName.value) {
return;
}
if (
!props.nowPreviewRecord.label ||
!props.nowPreviewRecord.label.includes(newLabelName.value)
) {
if (!props.nowPreviewRecord.label) {
props.nowPreviewRecord.label = [];
}
props.nowPreviewRecord.label.push(newLabelName.value);
let query = {
if (!fileTags.value.includes(newFileTagsName.value)) {
fileTags.value.push(newFileTagsName.value);
UpdatePicStatus({
id: props.nowPreviewRecord.id,
newLabel: props.nowPreviewRecord.label,
};
addLabelFlag.value = true;
chooseNowPreviewRecord({
...props.nowPreviewRecord,
label: props.nowPreviewRecord.label,
fileTags: JSON.stringify(fileTags.value),
graffitiJson: props.nowPreviewRecord.graffitiJson,
display: props.nowPreviewRecord.display,
showOnMap: props.nowPreviewRecord.showOnMap,
}).then((res) => {
addFileTagsFlag.value = true;
newFileTagsName.value = '';
createMessage.success('添加标签成功');
emits('handleSuccess');
});
emit('reloadTable');
newLabelName.value = '';
return;
// 调用接口
const data = await orgPosGroup(query);
if (data) {
addLabelFlag.value = true;
emit('reloadTable');
return createMessage.success('修改名称成功');
} else {
return createMessage.error('修改名称失败');
}
} else {
return createMessage.error('此标签已存在！');
}
}
// 删除标签
function deleteLabel(value) {
props.nowPreviewRecord.label = props.nowPreviewRecord.label.filter((item) => item !== value);
chooseNowPreviewRecord({
...props.nowPreviewRecord,
label: props.nowPreviewRecord.label,
function deleteFileTags(value) {
fileTags.value = fileTags.value.filter((item) => item !== value);
UpdatePicStatus({
id: props.nowPreviewRecord.id,
fileTags: JSON.stringify(fileTags.value),
graffitiJson: props.nowPreviewRecord.graffitiJson,
display: props.nowPreviewRecord.display,
showOnMap: props.nowPreviewRecord.showOnMap,
}).then((res) => {
createMessage.success('删除标签成功');
emits('handleSuccess');
});
emit('reloadTable');
}
// 选择
function chooseNowPreviewRecord(value) {
emit('chooseNowPreviewRecord', value);
emits('chooseNowPreviewRecord', value);
}
</script>
<style lang="less" scoped>

Write Preview
Loading…
Cancel
Save