|
@@ -5,10 +5,9 @@
|
|
|
<el-form-item class="formitem">
|
|
|
<el-input
|
|
|
v-model="searchForm.name"
|
|
|
- @change="submitClick"
|
|
|
+ @input="submitClick"
|
|
|
@keydown.enter="submitClick"
|
|
|
:placeholder="$t('mediaLibrary.addFilePlace')"
|
|
|
-
|
|
|
size="default"
|
|
|
:prefix-icon="Search"
|
|
|
></el-input>
|
|
@@ -36,43 +35,57 @@
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item style="margin-right: 0px">
|
|
|
- <el-select class="groupingSelcet"
|
|
|
+ <el-select
|
|
|
+ class="groupingSelcet"
|
|
|
v-model="searchForm.dictId"
|
|
|
style="width: 120px"
|
|
|
@change="submitClick"
|
|
|
:placeholder="$t('mediaLibrary.fileType.0')"
|
|
|
>
|
|
|
<el-option
|
|
|
- v-for="(item, index) in [...allList,...dictIdList]"
|
|
|
+ v-for="(item, index) in [...allList, ...dictIdList]"
|
|
|
:key="index"
|
|
|
:label="item.dictName"
|
|
|
:value="item.id"
|
|
|
/>
|
|
|
</el-select>
|
|
|
<div class="grouping" @click="handleAddfz">
|
|
|
- <img :src="groupingSvg" alt="">
|
|
|
+ <img :src="groupingSvg" alt="" />
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
<el-form-item style="float: right; margin-right: 0">
|
|
|
- <el-button @click="windowOpen({type: 'photography', library: true})">{{$t('mediaLibrary.photography')}}</el-button>
|
|
|
- <el-button v-if="modeling == 1" @click="windowOpen({type: 'modeling', library: true})">{{$t('mediaLibrary.Modeling')}}</el-button>
|
|
|
+ <el-button
|
|
|
+ @click="windowOpen({ type: 'photography', library: true })"
|
|
|
+ >{{ $t("mediaLibrary.photography") }}</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ v-if="modeling == 1"
|
|
|
+ @click="windowOpen({ type: 'modeling', library: true })"
|
|
|
+ >{{ $t("mediaLibrary.Modeling") }}</el-button
|
|
|
+ >
|
|
|
<!--v-if="photography == 1" <el-button type="primary" @click="handleAddfz">{{$t('mediaLibrary.grouping')}}</el-button> -->
|
|
|
- <el-button type="primary" @click="handleAdd">{{$t('mediaLibrary.upload')}}</el-button>
|
|
|
+ <el-button type="primary" @click="handleAdd">{{
|
|
|
+ $t("mediaLibrary.upload")
|
|
|
+ }}</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<!-- 表格 -->
|
|
|
<el-table
|
|
|
- tooltip-effect="dark"
|
|
|
- ref="tableRef"
|
|
|
- size="large"
|
|
|
+ tooltip-effect="dark"
|
|
|
+ ref="tableRef"
|
|
|
+ size="large"
|
|
|
:data="tableData"
|
|
|
style="width: 100%"
|
|
|
:row-class-name="tableRowClassName"
|
|
|
>
|
|
|
- <el-table-column prop="name" :label="$t('program.case.title')" min-width="300px">
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ :label="$t('program.case.title')"
|
|
|
+ min-width="300px"
|
|
|
+ >
|
|
|
<template #default="scope">
|
|
|
<a
|
|
|
- style="color: var(--primaryColor);cursor: pointer;"
|
|
|
+ style="color: var(--primaryColor); cursor: pointer"
|
|
|
v-if="scope.row.fileUrl"
|
|
|
target="_blank"
|
|
|
:title="scope.row.name"
|
|
@@ -91,20 +104,28 @@
|
|
|
:min-width="column.width"
|
|
|
:label="column.label"
|
|
|
></el-table-column>
|
|
|
- <el-table-column align="center" :label="$t('mediaLibrary.operate')" width="150">
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ :label="$t('mediaLibrary.operate')"
|
|
|
+ width="150"
|
|
|
+ >
|
|
|
<template #default="{ row }">
|
|
|
<!-- <el-button type="primary" text style="color: var(--primaryColor)" size="small" @click="handleEdit(row)">
|
|
|
编辑
|
|
|
</el-button> -->
|
|
|
- <span class="oper-span" style="color: var(--primaryColor)" @click="handleEdit(row)">
|
|
|
- {{$t('sys.edit')}}
|
|
|
+ <span
|
|
|
+ class="oper-span"
|
|
|
+ style="color: var(--primaryColor)"
|
|
|
+ @click="handleEdit(row)"
|
|
|
+ >
|
|
|
+ {{ $t("sys.edit") }}
|
|
|
</span>
|
|
|
<span
|
|
|
class="oper-span"
|
|
|
@click="del(row)"
|
|
|
style="color: var(--primaryColor)"
|
|
|
>
|
|
|
- {{$t('sys.delete')}}
|
|
|
+ {{ $t("sys.delete") }}
|
|
|
</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
@@ -112,7 +133,7 @@
|
|
|
<!-- 分页 -->
|
|
|
<el-pagination
|
|
|
class="mt-3"
|
|
|
- background
|
|
|
+ background
|
|
|
@size-change="handleSizeChange"
|
|
|
@current-change="handleCurrentChange"
|
|
|
:current-page="currentPage"
|
|
@@ -147,15 +168,23 @@
|
|
|
:before-remove="removeFile"
|
|
|
>
|
|
|
<el-button type="primary">
|
|
|
- {{$t('sys.upload')}}
|
|
|
+ {{ $t("sys.upload") }}
|
|
|
</el-button>
|
|
|
</el-upload>
|
|
|
</el-form-item>
|
|
|
<el-form-item
|
|
|
- :label="dialogData.title == $t('sys.upload') ? $t('mediaLibrary.dictName') : $t('mediaLibrary.setGrouping')"
|
|
|
+ :label="
|
|
|
+ dialogData.title == $t('sys.upload')
|
|
|
+ ? $t('mediaLibrary.dictName')
|
|
|
+ : $t('mediaLibrary.setGrouping')
|
|
|
+ "
|
|
|
:label-width="formLabelWidth"
|
|
|
>
|
|
|
- <el-select style="width: 100%" v-model="addForm.dictId" :placeholder="$t('mediaLibrary.tips.dictId')">
|
|
|
+ <el-select
|
|
|
+ style="width: 100%"
|
|
|
+ v-model="addForm.dictId"
|
|
|
+ :placeholder="$t('mediaLibrary.tips.dictId')"
|
|
|
+ >
|
|
|
<el-option
|
|
|
v-for="(item, index) in dictIdList"
|
|
|
:key="index"
|
|
@@ -166,18 +195,19 @@
|
|
|
</el-form-item>
|
|
|
<div v-if="dialogData.title == $t('sys.upload')">
|
|
|
<div style="margin-bottom: 10px">
|
|
|
- {{$t('mediaLibrary.tips.uplooadfiletype')}}{{$t('mediaLibrary.tips.uplooadSize')}}
|
|
|
+ {{ $t("mediaLibrary.tips.uplooadfiletype")
|
|
|
+ }}{{ $t("mediaLibrary.tips.uplooadSize") }}
|
|
|
</div>
|
|
|
<!-- <span>注意:模型需使用zip包上传。包含贴图、模型、mtl文件,包内不得包含文件夹。</span> -->
|
|
|
<div style="margin-bottom: 10px">
|
|
|
<div>
|
|
|
- {{$t('mediaLibrary.tips.objtips')}}
|
|
|
+ {{ $t("mediaLibrary.tips.objtips") }}
|
|
|
</div>
|
|
|
<img style="width: 150px" :src="obj" alt="" />
|
|
|
</div>
|
|
|
<div style="margin-bottom: 10px">
|
|
|
<div>
|
|
|
- {{$t('mediaLibrary.tips.osgbtips')}}
|
|
|
+ {{ $t("mediaLibrary.tips.osgbtips") }}
|
|
|
</div>
|
|
|
<img style="width: 150px" :src="osgb" alt="" />
|
|
|
</div>
|
|
@@ -185,70 +215,136 @@
|
|
|
</el-form>
|
|
|
<template #footer>
|
|
|
<div class="dialog-footer">
|
|
|
- <el-button @click="dialogData.show = false">{{$t('sys.cancel')}}</el-button>
|
|
|
+ <el-button @click="dialogData.show = false">{{
|
|
|
+ $t("sys.cancel")
|
|
|
+ }}</el-button>
|
|
|
<el-button type="primary" @click="handleuploadAdd">
|
|
|
- {{$t('sys.enter')}}
|
|
|
+ {{ $t("sys.enter") }}
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
<!-- 修改分组 -->
|
|
|
- <el-dialog v-model="dialogData.fzshow" :title="$t('mediaLibrary.grouping')" width="400">
|
|
|
- <el-form label-position="top" :model="form" label-width="50">
|
|
|
- <el-form-item :label="$t('mediaLibrary.addgrouping')" :label-width="formLabelWidth">
|
|
|
- <el-input v-model="dialogData.fzName" maxLength="100" style="width: 278px;" />
|
|
|
- <el-button style="margin-left: 20px;width: 60px" @click="handlefzAdd">{{$t('common.add')}}</el-button>
|
|
|
- </el-form-item>
|
|
|
- <div class="itemTitle">
|
|
|
- <p>{{$t('mediaLibrary.groupingList')}}</p>
|
|
|
- <div class="itemTitleList">
|
|
|
- <div class="itemTitle-list" v-for="(item, index) in dictIdList" :key="index">
|
|
|
- <span class="name">{{ item.dictName }}</span>
|
|
|
- <span class="del" @click="hanleFzDle(item)">{{$t('sys.delete')}}</span>
|
|
|
+ <el-dialog
|
|
|
+ v-model="dialogData.fzshow"
|
|
|
+ :title="$t('mediaLibrary.grouping')"
|
|
|
+ width="400"
|
|
|
+ >
|
|
|
+ <el-form label-position="top" :model="form" label-width="50">
|
|
|
+ <el-form-item
|
|
|
+ :label="$t('mediaLibrary.addgrouping')"
|
|
|
+ :label-width="formLabelWidth"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="dialogData.fzName"
|
|
|
+ maxLength="100"
|
|
|
+ style="width: 278px"
|
|
|
+ />
|
|
|
+ <el-button
|
|
|
+ style="margin-left: 20px; width: 60px"
|
|
|
+ @click="handlefzAdd"
|
|
|
+ >{{ $t("common.add") }}</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ <div class="itemTitle">
|
|
|
+ <p>{{ $t("mediaLibrary.groupingList") }}</p>
|
|
|
+ <div class="itemTitleList">
|
|
|
+ <div class="itemTitle-list" v-if="!dictIdList?.length">
|
|
|
+ {{ $t("program.undata") }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="itemTitle-list"
|
|
|
+ v-for="(item, index) in dictIdList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <span class="name">{{ item.dictName }}</span>
|
|
|
+ <span class="del" @click="hanleFzDle(item)">{{
|
|
|
+ $t("sys.delete")
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </el-form>
|
|
|
- <template #footer>
|
|
|
- <div class="dialog-footer">
|
|
|
- <el-button @click="dialogData.fzshow = false">{{$t('sys.cancel')}}</el-button>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button @click="dialogData.fzshow = false">{{
|
|
|
+ $t("sys.cancel")
|
|
|
+ }}</el-button>
|
|
|
<el-button type="primary" @click="dialogData.fzshow = false">
|
|
|
- {{$t('sys.enter')}}
|
|
|
+ {{ $t("sys.enter") }}
|
|
|
</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- //查看资源下载 -->
|
|
|
+ <el-dialog
|
|
|
+ v-model="dialogDowm.show"
|
|
|
+ :title="$t("sys.query")"
|
|
|
+ :width="dialogDowm.type == 4 ? 800 : 600"
|
|
|
+ @close="handleClose"
|
|
|
+ >
|
|
|
+ <div class="showContent">
|
|
|
+ <img
|
|
|
+ style="width: 100%; object-fit: cover"
|
|
|
+ :src="dialogDowm.url"
|
|
|
+ alt=""
|
|
|
+ v-if="dialogDowm.type == 0"
|
|
|
+ />
|
|
|
+ <video
|
|
|
+ ref="audio"
|
|
|
+ controls
|
|
|
+ style="width: 100%; object-fit: cover; max-height: 300px"
|
|
|
+ :style="{ height: dialogDowm.type == 2 ? '50px' : 'auto' }"
|
|
|
+ :src="dialogDowm.url"
|
|
|
+ alt=""
|
|
|
+ v-else-if="dialogDowm.type == 1 || dialogDowm.type == 2"
|
|
|
+ />
|
|
|
+ <iframe
|
|
|
+ style="width: 100%; height: 400px"
|
|
|
+ v-else
|
|
|
+ :src="dialogDowm.url"
|
|
|
+ frameborder="0"
|
|
|
+ ></iframe>
|
|
|
</div>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
- <!-- //查看资源下载 -->
|
|
|
- <el-dialog v-model="dialogDowm.show" title="资源查看" :width="dialogDowm.type == 4?800:600" @close="handleClose">
|
|
|
- <div class="showContent">
|
|
|
- <img style="width: 100%;object-fit: cover;" :src="dialogDowm.url" alt="" v-if="dialogDowm.type == 0"/>
|
|
|
- <video ref="audio" controls style="width: 100%;object-fit: cover;" :style="{height:dialogDowm.type == 2?'50px':'auto'}":src="dialogDowm.url" alt="" v-else-if="dialogDowm.type == 1 || dialogDowm.type == 2"/>
|
|
|
- <iframe style="width: 100%; height: 400px" v-else :src="dialogDowm.url" frameborder="0"></iframe>
|
|
|
- </div>
|
|
|
- <template #footer>
|
|
|
- <div class="dialog-footer">
|
|
|
- <el-button @click="dialogDowm.show = false">{{$t('sys.cancel')}}</el-button>
|
|
|
- <el-button v-if="dialogDowm.type == 0" type="primary" @click="hanleDown">
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button @click="dialogDowm.show = false">{{
|
|
|
+ $t("sys.cancel")
|
|
|
+ }}</el-button>
|
|
|
+ <el-button
|
|
|
+ v-if="dialogDowm.type == 0"
|
|
|
+ type="primary"
|
|
|
+ @click="hanleDown"
|
|
|
+ >
|
|
|
下载
|
|
|
</el-button>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { Search } from "@element-plus/icons-vue";
|
|
|
import { ref, watch, onMounted } from "vue";
|
|
|
-import { getByKeyList, getfzdel, getdictFiledel, getaddOrUpdate, setFileaddOrUpdate, uploadFile, getUrlSrc } from "@/store/case";
|
|
|
+import {
|
|
|
+ getByKeyList,
|
|
|
+ getfzdel,
|
|
|
+ getdictFiledel,
|
|
|
+ getaddOrUpdate,
|
|
|
+ setFileaddOrUpdate,
|
|
|
+ uploadFile,
|
|
|
+ getUrlSrc,
|
|
|
+} from "@/store/case";
|
|
|
import dayjs from "dayjs";
|
|
|
import obj from "@/assets/images/obj.jpg";
|
|
|
import osgb from "@/assets/images/osgb.jpg";
|
|
|
import { ElMessage, ElMessageBox, genFileId } from "element-plus";
|
|
|
-import { ui18n } from '@/i18n'
|
|
|
+import { ui18n } from "@/i18n";
|
|
|
import { windowOpen } from "@/util";
|
|
|
import { getUrlData } from "@/store/user";
|
|
|
import groupingSvg from "@/assets/images/grouping.svg";
|
|
|
+import { ElLoading } from "element-plus";
|
|
|
|
|
|
// 定义 props
|
|
|
const props = defineProps({
|
|
@@ -278,46 +374,51 @@ const addForm = ref({
|
|
|
});
|
|
|
const dialogDowm = ref({
|
|
|
show: false,
|
|
|
- url: '',
|
|
|
- type: '',
|
|
|
+ url: "",
|
|
|
+ type: "",
|
|
|
data: {},
|
|
|
});
|
|
|
const dialogData = ref({
|
|
|
show: false,
|
|
|
- title: ui18n.t('sys.upload'),
|
|
|
+ title: ui18n.t("sys.upload"),
|
|
|
data: {},
|
|
|
fzshow: false,
|
|
|
- fzName: '',
|
|
|
+ fzName: "",
|
|
|
fzList: [],
|
|
|
});
|
|
|
-const upload = ref(null)
|
|
|
+const upload = ref(null);
|
|
|
const file = ref(null);
|
|
|
const audio = ref(null);
|
|
|
+const loadingText = ref("0%");
|
|
|
+
|
|
|
const accept = ".jpg,.png,.jpeg,.mp4,.wav,.mp3,.shp,.zip";
|
|
|
const handleClose = () => {
|
|
|
console.log("handleClose", audio.value);
|
|
|
- if(audio.value){
|
|
|
- audio.value.pause()
|
|
|
+ if (audio.value) {
|
|
|
+ audio.value.pause();
|
|
|
}
|
|
|
};
|
|
|
const hanleFzDle = (item) => {
|
|
|
- ElMessageBox.confirm(ui18n.t('mediaLibrary.tips.deltext'), ui18n.t('sys.dialogTitle'), {
|
|
|
- confirmButtonText: ui18n.t('sys.enter'),
|
|
|
- cancelButtonText: ui18n.t('sys.cancel'),
|
|
|
- }).then(async () => {
|
|
|
+ ElMessageBox.confirm(
|
|
|
+ ui18n.t("mediaLibrary.tips.deltext"),
|
|
|
+ ui18n.t("sys.dialogTitle"),
|
|
|
+ {
|
|
|
+ confirmButtonText: ui18n.t("sys.enter"),
|
|
|
+ cancelButtonText: ui18n.t("sys.cancel"),
|
|
|
+ }
|
|
|
+ ).then(async () => {
|
|
|
await getfzdel(item);
|
|
|
- dictIdList.value = dictIdList.value.filter(item1 => item1.id !== item.id)
|
|
|
+ dictIdList.value = dictIdList.value.filter((item1) => item1.id !== item.id);
|
|
|
initData();
|
|
|
ElMessage({
|
|
|
type: "success",
|
|
|
- message: ui18n.t('mediaLibrary.tips.del'),
|
|
|
+ message: ui18n.t("mediaLibrary.tips.del"),
|
|
|
});
|
|
|
});
|
|
|
-
|
|
|
|
|
|
console.log("upload", file);
|
|
|
};
|
|
|
-const { photography, modeling } = getUrlData()
|
|
|
+const { photography, modeling } = getUrlData();
|
|
|
const previewFile = (file) => {
|
|
|
console.log("previewFile", file);
|
|
|
};
|
|
@@ -327,7 +428,7 @@ const handleEdit = (data) => {
|
|
|
|
|
|
dialogData.value = {
|
|
|
show: true,
|
|
|
- title: ui18n.t('mediaLibrary.setGrouping'),
|
|
|
+ title: ui18n.t("mediaLibrary.setGrouping"),
|
|
|
data,
|
|
|
};
|
|
|
};
|
|
@@ -337,85 +438,102 @@ const removeFile = () => {
|
|
|
};
|
|
|
const handleAdd = () => {
|
|
|
fileList.value = [];
|
|
|
- addForm.value.dictId = '';
|
|
|
- dialogData.value.title = ui18n.t('sys.upload');
|
|
|
+ addForm.value.dictId = "";
|
|
|
+ dialogData.value.title = ui18n.t("sys.upload");
|
|
|
setTimeout(() => {
|
|
|
- dialogData.value.show = true;
|
|
|
- }, 100)
|
|
|
+ dialogData.value.show = true;
|
|
|
+ }, 100);
|
|
|
};
|
|
|
const handlefzAdd = async () => {
|
|
|
let params = {
|
|
|
- dictName: dialogData.value.fzName,
|
|
|
+ dictName: dialogData.value.fzName?.trim(),
|
|
|
};
|
|
|
if (!params.dictName) {
|
|
|
- return ElMessage.error(ui18n.t('mediaLibrary.tips.placeholderName'));
|
|
|
+ return ElMessage.error(ui18n.t("mediaLibrary.tips.placeholderName"));
|
|
|
}
|
|
|
await getaddOrUpdate(params);
|
|
|
ElMessage({
|
|
|
type: "success",
|
|
|
- message: ui18n.t('mediaLibrary.tips.add'),
|
|
|
+ message: ui18n.t("mediaLibrary.tips.add"),
|
|
|
});
|
|
|
getFzlist();
|
|
|
- dialogData.value.fzName = '';
|
|
|
+ dialogData.value.fzName = "";
|
|
|
};
|
|
|
const handleAddfz = () => {
|
|
|
dialogData.value.fzshow = true;
|
|
|
};
|
|
|
|
|
|
const handleuploadAdd = async () => {
|
|
|
- console.log('formData', dialogData.value.title);
|
|
|
- if (dialogData.value.title != ui18n.t('sys.upload')){
|
|
|
- if (!addForm.value.dictId) return ElMessage.error(ui18n.t('mediaLibrary.tips.dictId'));
|
|
|
+ console.log("formData", dialogData.value.title);
|
|
|
+ if (dialogData.value.title != ui18n.t("sys.upload")) {
|
|
|
+ if (!addForm.value.dictId)
|
|
|
+ return ElMessage.error(ui18n.t("mediaLibrary.tips.dictId"));
|
|
|
await setFileaddOrUpdate({
|
|
|
id: dialogData.value.data?.id,
|
|
|
dictId: addForm.value.dictId,
|
|
|
- })
|
|
|
+ });
|
|
|
initData();
|
|
|
- dialogData.value.show = false
|
|
|
- dialogData.value.title = ''
|
|
|
+ dialogData.value.show = false;
|
|
|
+ dialogData.value.title = "";
|
|
|
ElMessage({
|
|
|
type: "success",
|
|
|
- message: ui18n.t('mediaLibrary.tips.operate'),
|
|
|
+ message: ui18n.t("mediaLibrary.tips.operate"),
|
|
|
});
|
|
|
} else {
|
|
|
const formData = new FormData();
|
|
|
- const file = fileList.value && fileList.value[0]
|
|
|
- if (!file) return ElMessage.error(ui18n.t('mediaLibrary.tips.addUploadErr'));
|
|
|
- console.log(file, "file");
|
|
|
+ const file = fileList.value && fileList.value[0];
|
|
|
+ if (!file) return ElMessage.error(ui18n.t("common.NoFilesSelected"));
|
|
|
formData.append("file", file);
|
|
|
formData.append("dictId", addForm.value.dictId);
|
|
|
- uploadFile(formData).then((res) => {
|
|
|
- console.log(res);
|
|
|
- if (res.status == 1) {
|
|
|
- initData();
|
|
|
- dialogData.value.show = false;
|
|
|
- ElMessage({
|
|
|
- type: "success",
|
|
|
- message: ui18n.t('mediaLibrary.tips.uplooadSuccess'),
|
|
|
- });
|
|
|
- }else{
|
|
|
- ElMessage.error(ui18n.t('mediaLibrary.tips.uplooadErr'));
|
|
|
- }
|
|
|
- });
|
|
|
+ console.log(file, formData, "formData");
|
|
|
+ const loading = ElLoading.service({
|
|
|
+ lock: true,
|
|
|
+ text: loadingText.value,
|
|
|
+ background: "rgba(0, 0, 0, 0.7)",
|
|
|
+ });
|
|
|
+ uploadFile({ file, dictId: addForm.value.dictId }, (completeProgress) => {
|
|
|
+ console.log("上传进度", completeProgress);
|
|
|
+ // props.progress = completeProgress; //上传过程
|
|
|
+ loadingText.value = completeProgress + "%";
|
|
|
+ loading.setText(loadingText.value)
|
|
|
+ }).then((res) => {
|
|
|
+ loading.close();
|
|
|
+ if (res?.status == 1) {
|
|
|
+ initData();
|
|
|
+ dialogData.value.show = false;
|
|
|
+ ElMessage({
|
|
|
+ type: "success",
|
|
|
+ message: ui18n.t("mediaLibrary.tips.uplooadSuccess"),
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ ElMessage.error(ui18n.t("mediaLibrary.tips.uplooadErr"));
|
|
|
+ }
|
|
|
+ });
|
|
|
console.log(formData);
|
|
|
}
|
|
|
};
|
|
|
// 定义方法
|
|
|
const del = (row) => {
|
|
|
console.log(file, "file");
|
|
|
- ElMessageBox.confirm(ui18n.t('mediaLibrary.tips.deltext'), ui18n.t('sys.dialogTitle'), {
|
|
|
- confirmButtonText: ui18n.t('sys.enter'),
|
|
|
- cancelButtonText: ui18n.t('sys.cancel'),
|
|
|
- }).then(async () => {
|
|
|
- await getdictFiledel({id: row.id});
|
|
|
+ ElMessageBox.confirm(
|
|
|
+ ui18n.t("mediaLibrary.tips.deltext"),
|
|
|
+ ui18n.t("sys.dialogTitle"),
|
|
|
+ {
|
|
|
+ confirmButtonText: ui18n.t("sys.enter"),
|
|
|
+ cancelButtonText: ui18n.t("sys.cancel"),
|
|
|
+ }
|
|
|
+ ).then(async () => {
|
|
|
+ await getdictFiledel({ id: row.id });
|
|
|
initData();
|
|
|
ElMessage({
|
|
|
type: "success",
|
|
|
- message: ui18n.t('mediaLibrary.tips.del'),
|
|
|
+ message: ui18n.t("mediaLibrary.tips.del"),
|
|
|
});
|
|
|
});
|
|
|
};
|
|
|
-const allList = ref([{ dictName: ui18n.t('mediaLibrary.fileType.0'), id: "0" }])
|
|
|
+const allList = ref([
|
|
|
+ { dictName: ui18n.t("mediaLibrary.fileType.0"), id: "0" },
|
|
|
+]);
|
|
|
const dictIdList = ref([]);
|
|
|
const tableData = ref([]);
|
|
|
const fileList = ref([]);
|
|
@@ -460,54 +578,75 @@ const initData = async () => {
|
|
|
return {
|
|
|
...res,
|
|
|
statusStr:
|
|
|
- res.status == -1 ? ui18n.t('mediaLibrary.tips.uplooadErr') : res.status == 0 ? ui18n.t('mediaLibrary.tips.uplooad') : ui18n.t('mediaLibrary.tips.uplooadSuccess'),
|
|
|
+ res.status == -1
|
|
|
+ ? ui18n.t("mediaLibrary.tips.uplooadErr")
|
|
|
+ : res.status == 0
|
|
|
+ ? ui18n.t("mediaLibrary.tips.uplooad")
|
|
|
+ : ui18n.t("mediaLibrary.tips.uplooadSuccess"),
|
|
|
createTime: dayjs(res.createTime).format("YYYY-MM-DD HH:mm:ss"),
|
|
|
};
|
|
|
});
|
|
|
total.value = totalCount;
|
|
|
};
|
|
|
const floadileUrl = (record) => {
|
|
|
- dialogDowm.value.show = true;
|
|
|
dialogDowm.value.type = record.fileType;
|
|
|
dialogDowm.value.data = record;
|
|
|
if (record.fileType == 3) {
|
|
|
// let url = `/code/index.html?title=${record.fileName}&type=${record.fileFormat}&fileUrl=${record.fileUrl}#/sign-model`;
|
|
|
- dialogDowm.value.url = getUrlSrc({...record, type: 101});
|
|
|
- return windowOpen({url, library: true});
|
|
|
- } else {
|
|
|
- dialogDowm.value.url = getUrlSrc({type: 102}) +'/'+ record.fileUrl;
|
|
|
+ dialogDowm.value.url = getUrlSrc({ ...record, type: 101 });
|
|
|
+ dialogDowm.value.show = true;
|
|
|
+ // return windowOpen({url: dialogDowm.value.url, library: true});
|
|
|
+ } else if (
|
|
|
+ record.fileType == 2 ||
|
|
|
+ record.fileType == 1 ||
|
|
|
+ record.fileType == 0
|
|
|
+ ) {
|
|
|
+ dialogDowm.value.url = getUrlSrc({ type: 102 }) + "/" + record.fileUrl;
|
|
|
+ dialogDowm.value.show = true;
|
|
|
// return windowOpen({url: record.fileUrl, library: true});
|
|
|
+ } else {
|
|
|
+ hanleDown();
|
|
|
}
|
|
|
};
|
|
|
const handleExceed = (files) => {
|
|
|
- const file = files[0]
|
|
|
- if(!beforeUpload(file)) {
|
|
|
+ const file = files[0];
|
|
|
+ if (!beforeUpload(file)) {
|
|
|
return false;
|
|
|
}
|
|
|
- upload.value && upload.value.clearFiles()
|
|
|
- file.uid = genFileId()
|
|
|
- upload.value && upload.value.handleStart(file)
|
|
|
+ upload.value && upload.value.clearFiles();
|
|
|
+ file.uid = genFileId();
|
|
|
+ upload.value && upload.value.handleStart(file);
|
|
|
};
|
|
|
const beforeUpload = (file) => {
|
|
|
- console.log('beforeUpload', file);
|
|
|
- const filetype = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase();
|
|
|
- const isExcel = ['jpg', 'jpg', 'png', 'jpeg', 'mp4', 'wav', 'mp3', 'shp', 'zip'].includes(
|
|
|
- filetype,
|
|
|
- ); // 调用上面代码
|
|
|
- if (!isExcel) {
|
|
|
- ElMessage.error(ui18n.t('mediaLibrary.tips.uplooadfiletype'));
|
|
|
- fileList.value = [];
|
|
|
- return false;
|
|
|
- }
|
|
|
- const isLt10M = file.size / 1024 / 1024 < 2000;
|
|
|
- if (!isLt10M) {
|
|
|
- fileList.value = [];
|
|
|
- ElMessage.error(ui18n.t('mediaLibrary.tips.uplooadSize'));
|
|
|
- return false;
|
|
|
- }
|
|
|
- fileList.value = [file];
|
|
|
- return true;
|
|
|
- };
|
|
|
+ console.log("beforeUpload", file);
|
|
|
+ const filetype = file.name
|
|
|
+ .substring(file.name.lastIndexOf(".") + 1)
|
|
|
+ .toLowerCase();
|
|
|
+ const isExcel = [
|
|
|
+ "jpg",
|
|
|
+ "jpg",
|
|
|
+ "png",
|
|
|
+ "jpeg",
|
|
|
+ "mp4",
|
|
|
+ "wav",
|
|
|
+ "mp3",
|
|
|
+ "shp",
|
|
|
+ "zip",
|
|
|
+ ].includes(filetype); // 调用上面代码
|
|
|
+ if (!isExcel) {
|
|
|
+ ElMessage.error(ui18n.t("mediaLibrary.tips.uplooadfiletype"));
|
|
|
+ fileList.value = [];
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ const isLt10M = file.size / 1024 / 1024 < 2000;
|
|
|
+ if (!isLt10M) {
|
|
|
+ fileList.value = [];
|
|
|
+ ElMessage.error(ui18n.t("mediaLibrary.tips.uplooadSize"));
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ fileList.value = [file];
|
|
|
+ return true;
|
|
|
+};
|
|
|
// 监听搜索表单变化
|
|
|
watch(searchForm, () => {
|
|
|
currentPage.value = 1;
|
|
@@ -528,12 +667,12 @@ const handleCurrentChange = (newPage) => {
|
|
|
// 下载资源
|
|
|
const hanleDown = () => {
|
|
|
const item = dialogDowm.value.data;
|
|
|
- const a = document.createElement('a');
|
|
|
+ const a = document.createElement("a");
|
|
|
a.href = dialogDowm.value.url;
|
|
|
a.download = `${item.name}.${item.fileFormat}`; // 下载后的文件名
|
|
|
a.click();
|
|
|
a.remove();
|
|
|
-}
|
|
|
+};
|
|
|
// 处理搜索按钮点击
|
|
|
const handleSearch = () => {
|
|
|
currentPage.value = 1;
|
|
@@ -584,24 +723,24 @@ initData();
|
|
|
// .el-table{
|
|
|
// background-color: #535353;
|
|
|
// }
|
|
|
- .grouping{
|
|
|
+ .grouping {
|
|
|
padding: 7px 10px;
|
|
|
background-color: var(--el-fill-color-blank);
|
|
|
box-shadow: 0 0 0 1px var(--el-border-color);
|
|
|
- border-radius: 0 4px 4px 0 ;
|
|
|
- opacity: 0.7;
|
|
|
- cursor: pointer;
|
|
|
- &:hover{
|
|
|
- box-shadow: 0 0 0 1px #6C6E72;
|
|
|
+ border-radius: 0 4px 4px 0;
|
|
|
+ opacity: 0.7;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ box-shadow: 0 0 0 1px #6c6e72;
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
- .groupingSelcet{
|
|
|
- .el-select__wrapper{
|
|
|
- border-radius:4px 0 0 4px;
|
|
|
+ .groupingSelcet {
|
|
|
+ .el-select__wrapper {
|
|
|
+ border-radius: 4px 0 0 4px;
|
|
|
}
|
|
|
}
|
|
|
- .el-form--inline .el-form-item{
|
|
|
+ .el-form--inline .el-form-item {
|
|
|
margin-right: 20px;
|
|
|
}
|
|
|
// .el-form-item, .el-select__wrapper{
|
|
@@ -648,34 +787,34 @@ initData();
|
|
|
// .el-table .success-row {
|
|
|
// --el-table-tr-bg-color: var(--el-color-success-light-9);
|
|
|
// }
|
|
|
- .itemTitle{
|
|
|
+ .itemTitle {
|
|
|
width: 100%;
|
|
|
margin: 0 0 10px 0;
|
|
|
- .itemTitleList{
|
|
|
+ .itemTitleList {
|
|
|
margin-top: 10px;
|
|
|
- background: rgba(255,255,255,0.1);
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
border-radius: 4px 4px 4px 4px;
|
|
|
- border: 1px solid rgba(255,255,255,0.2);
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
max-height: 240px;
|
|
|
overflow-y: scroll;
|
|
|
::-webkit-scrollbar {
|
|
|
display: none; /* Chrome Safari */
|
|
|
}
|
|
|
}
|
|
|
- .itemTitle-list{
|
|
|
+ .itemTitle-list {
|
|
|
padding-left: 10px;
|
|
|
line-height: 34px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
position: relative;
|
|
|
cursor: pointer;
|
|
|
- .name{
|
|
|
+ .name {
|
|
|
width: 350px;
|
|
|
overflow: hidden; //超出的文本隐藏
|
|
|
text-overflow: ellipsis; //溢出用省略号显示
|
|
|
white-space: nowrap; //溢出不换行
|
|
|
}
|
|
|
- .del{
|
|
|
+ .del {
|
|
|
color: red;
|
|
|
width: 40px;
|
|
|
|
|
@@ -684,16 +823,15 @@ initData();
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-.showContent{
|
|
|
- iframe{
|
|
|
+.showContent {
|
|
|
+ iframe {
|
|
|
body:-webkit-full-page-media {
|
|
|
background-color: none;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-.el-pager li.is-active{
|
|
|
+.el-pager li.is-active {
|
|
|
border: 1px solid var(--el-color-primary);
|
|
|
background-color: none;
|
|
|
-
|
|
|
}
|
|
|
</style>
|