|
@@ -7,7 +7,9 @@
|
|
|
v-model="searchForm.name"
|
|
|
@blur="submitClick"
|
|
|
@keydown.enter="submitClick"
|
|
|
- placeholder="请输入搜索内容"
|
|
|
+ :placeholder="$t('mediaLibrary.addFilePlace')"
|
|
|
+
|
|
|
+ size="default"
|
|
|
:prefix-icon="Search"
|
|
|
></el-input>
|
|
|
</el-form-item>
|
|
@@ -16,17 +18,15 @@
|
|
|
style="width: 120px"
|
|
|
v-model="searchForm.fileType"
|
|
|
@change="submitClick"
|
|
|
- size="large"
|
|
|
- placeholder="全部"
|
|
|
+ :placeholder="$t('mediaLibrary.fileType.0')"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="(item, index) in [
|
|
|
- '全部',
|
|
|
- '图片',
|
|
|
- '视频',
|
|
|
- '音频',
|
|
|
- '模型',
|
|
|
- '其他',
|
|
|
+ $t('mediaLibrary.fileType.0'),
|
|
|
+ $t('mediaLibrary.fileType.2'),
|
|
|
+ $t('mediaLibrary.fileType.3'),
|
|
|
+ $t('mediaLibrary.fileType.4'),
|
|
|
+ $t('mediaLibrary.fileType.5'),
|
|
|
]"
|
|
|
:key="index"
|
|
|
:label="item"
|
|
@@ -39,8 +39,7 @@
|
|
|
v-model="searchForm.dictId"
|
|
|
style="width: 120px"
|
|
|
@change="submitClick"
|
|
|
- size="large"
|
|
|
- placeholder="全部"
|
|
|
+ :placeholder="$t('mediaLibrary.fileType.0')"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="(item, index) in [...allList,...dictIdList]"
|
|
@@ -51,8 +50,10 @@
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item style="float: right; margin-right: 0">
|
|
|
- <el-button type="primary" @click="handleAddfz">分组管理</el-button>
|
|
|
- <el-button type="primary" @click="handleAdd">上传</el-button>
|
|
|
+ <el-button @click="windowOpen({type: 'photography'})">{{$t('mediaLibrary.photography')}}</el-button>
|
|
|
+ <el-button @click="windowOpen({type: 'modeling'})">{{$t('mediaLibrary.Modeling')}}</el-button>
|
|
|
+ <el-button type="primary" @click="handleAddfz">{{$t('mediaLibrary.grouping')}}</el-button>
|
|
|
+ <el-button type="primary" @click="handleAdd">{{$t('mediaLibrary.upload')}}</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<!-- 表格 -->
|
|
@@ -64,10 +65,10 @@
|
|
|
style="width: 100%"
|
|
|
:row-class-name="tableRowClassName"
|
|
|
>
|
|
|
- <el-table-column prop="name" label="名称">
|
|
|
+ <el-table-column prop="name" :label="$t('program.case.title')" min-width="300px">
|
|
|
<template #default="scope">
|
|
|
<a
|
|
|
- style="color: #0960bd; cursor: pointer"
|
|
|
+ style="color: var(--primaryColor)"
|
|
|
v-if="scope.row.fileUrl"
|
|
|
target="_blank"
|
|
|
:title="scope.row.name"
|
|
@@ -83,19 +84,23 @@
|
|
|
:prop="column.prop"
|
|
|
show-overflow-tooltip
|
|
|
align="center"
|
|
|
+ :min-width="column.width"
|
|
|
:label="column.label"
|
|
|
></el-table-column>
|
|
|
- <el-table-column align="center" label="操作" width="150">
|
|
|
+ <el-table-column align="center" :label="$t('mediaLibrary.operate')" width="150">
|
|
|
<template #default="{ row }">
|
|
|
- <el-button link type="primary" size="small" @click="handleEdit(row)">
|
|
|
+ <!-- <el-button type="primary" text style="color: var(--primaryColor)" size="small" @click="handleEdit(row)">
|
|
|
编辑
|
|
|
- </el-button>
|
|
|
+ </el-button> -->
|
|
|
+ <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')}}
|
|
|
</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
@@ -113,10 +118,10 @@
|
|
|
>
|
|
|
</el-pagination>
|
|
|
<!-- 弹窗 -->
|
|
|
- <el-dialog v-model="dialogData.show" :title="dialogData.title" width="500">
|
|
|
- <el-form :model="form" label-width="110">
|
|
|
+ <el-dialog v-model="dialogData.show" :title="dialogData.title" width="400">
|
|
|
+ <el-form label-position="top" :model="form" label-width="110">
|
|
|
<el-form-item
|
|
|
- v-if="dialogData.title == '上传'"
|
|
|
+ v-if="dialogData.title == $t('sys.upload')"
|
|
|
label="文件"
|
|
|
:label-width="formLabelWidth"
|
|
|
>
|
|
@@ -134,15 +139,15 @@
|
|
|
:before-remove="removeFile"
|
|
|
>
|
|
|
<el-button type="primary">
|
|
|
- 上传
|
|
|
+ {{$t('sys.upload')}}
|
|
|
</el-button>
|
|
|
</el-upload>
|
|
|
</el-form-item>
|
|
|
<el-form-item
|
|
|
- :label="dialogData.title == '上传' ? '分组' : '修改分组'"
|
|
|
+ :label="dialogData.title == $t('sys.upload') ? $t('mediaLibrary.dictName') : $t('mediaLibrary.setGrouping')"
|
|
|
:label-width="formLabelWidth"
|
|
|
>
|
|
|
- <el-select style="width: 180px" v-model="addForm.dictId" placeholder="请选择分组">
|
|
|
+ <el-select style="width: 100%" v-model="addForm.dictId" :placeholder="$t('mediaLibrary.tips.dictId')">
|
|
|
<el-option
|
|
|
v-for="(item, index) in dictIdList"
|
|
|
:key="index"
|
|
@@ -151,22 +156,20 @@
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <div style="padding: 0 0 0 40px" v-if="dialogData.title == '上传'">
|
|
|
+ <div v-if="dialogData.title == $t('sys.upload')">
|
|
|
<div style="margin-bottom: 10px">
|
|
|
- 支持jpg、png、jpeg、mp4、wav、mp3 、shp格式文件上传。文件大小 ≤ 2G
|
|
|
+ {{$t('mediaLibrary.tips.uplooadfiletype')}}{{$t('mediaLibrary.tips.uplooadSize')}}
|
|
|
</div>
|
|
|
<!-- <span>注意:模型需使用zip包上传。包含贴图、模型、mtl文件,包内不得包含文件夹。</span> -->
|
|
|
<div style="margin-bottom: 10px">
|
|
|
<div>
|
|
|
- 上传
|
|
|
- obj:需使用zip包上传。包含贴图、模型、mtl文件,包内不得包含文件夹,文件名不得使用中文。如图:
|
|
|
+ {{$t('mediaLibrary.tips.objtips')}}
|
|
|
</div>
|
|
|
<img style="width: 150px" :src="obj" alt="" />
|
|
|
</div>
|
|
|
<div style="margin-bottom: 10px">
|
|
|
<div>
|
|
|
- 上传 osgb:需使用zip包上传。包含 Data 文件夹、xml
|
|
|
- 文件,包内不得包含文件夹,文件名不得使用中文。如图:
|
|
|
+ {{$t('mediaLibrary.tips.osgbtips')}}
|
|
|
</div>
|
|
|
<img style="width: 150px" :src="osgb" alt="" />
|
|
|
</div>
|
|
@@ -174,35 +177,35 @@
|
|
|
</el-form>
|
|
|
<template #footer>
|
|
|
<div class="dialog-footer">
|
|
|
- <el-button @click="dialogData.show = false">取消</el-button>
|
|
|
+ <el-button @click="dialogData.show = false">{{$t('sys.cancel')}}</el-button>
|
|
|
<el-button type="primary" @click="handleuploadAdd">
|
|
|
- 确定
|
|
|
+ {{$t('sys.enter')}}
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
<!-- 修改分组 -->
|
|
|
- <el-dialog v-model="dialogData.fzshow" title="分组管理" width="500">
|
|
|
- <el-form :model="form" label-width="50">
|
|
|
- <el-form-item label="分组" :label-width="formLabelWidth">
|
|
|
- <el-input v-model="dialogData.fzName" maxLength="100" style="width: 300px;" />
|
|
|
- <el-button style="margin-left: 20px" @click="handlefzAdd" type="primary">新增</el-button>
|
|
|
+ <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>分组列表</p>
|
|
|
+ <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)">删除</span>
|
|
|
+ <span class="del" @click="hanleFzDle(item)">{{$t('sys.delete')}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-form>
|
|
|
<template #footer>
|
|
|
<div class="dialog-footer">
|
|
|
- <el-button @click="dialogData.fzshow = false">取消</el-button>
|
|
|
+ <el-button @click="dialogData.fzshow = false">{{$t('sys.cancel')}}</el-button>
|
|
|
<el-button type="primary" @click="dialogData.fzshow = false">
|
|
|
- 确定
|
|
|
+ {{$t('sys.enter')}}
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -218,6 +221,9 @@ import dayjs from "dayjs";
|
|
|
import obj from "@/assets/images/obj.jpg";
|
|
|
import osgb from "@/assets/images/osgb.jpg";
|
|
|
import { ElMessage, ElMessageBox } from "element-plus";
|
|
|
+import { ui18n } from '@/i18n'
|
|
|
+import { windowOpen } from "@/util";
|
|
|
+import { getUrlData } from "@/store/user";
|
|
|
|
|
|
// 定义 props
|
|
|
const props = defineProps({
|
|
@@ -247,7 +253,7 @@ const addForm = ref({
|
|
|
});
|
|
|
const dialogData = ref({
|
|
|
show: false,
|
|
|
- title: "上传",
|
|
|
+ title: ui18n.t('sys.upload'),
|
|
|
data: {},
|
|
|
fzshow: false,
|
|
|
fzName: '',
|
|
@@ -256,30 +262,32 @@ const dialogData = ref({
|
|
|
const file = ref(null);
|
|
|
const accept = ".jpg,.png,.jpeg,.mp4,.wav,.mp3,.shp";
|
|
|
const hanleFzDle = (item) => {
|
|
|
- ElMessageBox.confirm("确定删除?", "提示", {
|
|
|
- confirmButtonText: "确定",
|
|
|
- cancelButtonText: "取消",
|
|
|
- type: "warning",
|
|
|
+ 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)
|
|
|
ElMessage({
|
|
|
type: "success",
|
|
|
- message: "删除成功",
|
|
|
+ message: ui18n.t('mediaLibrary.tips.del'),
|
|
|
});
|
|
|
});
|
|
|
|
|
|
|
|
|
console.log("upload", file);
|
|
|
};
|
|
|
+const { photography, modeling } = getUrlData()
|
|
|
const previewFile = (file) => {
|
|
|
console.log("previewFile", file);
|
|
|
};
|
|
|
const handleEdit = (data) => {
|
|
|
addForm.value.dictId = data.dictId;
|
|
|
+ console.log("data", data, addForm.value);
|
|
|
+
|
|
|
dialogData.value = {
|
|
|
show: true,
|
|
|
- title: "修改分组",
|
|
|
+ title: ui18n.t('mediaLibrary.setGrouping'),
|
|
|
data,
|
|
|
};
|
|
|
};
|
|
@@ -293,7 +301,7 @@ const handleAdd = () => {
|
|
|
fileList.value = [];
|
|
|
dialogData.value = {
|
|
|
show: true,
|
|
|
- title: "上传",
|
|
|
+ title: ui18n.t('sys.upload')
|
|
|
};
|
|
|
};
|
|
|
const handlefzAdd = async () => {
|
|
@@ -301,12 +309,12 @@ const handlefzAdd = async () => {
|
|
|
dictName: dialogData.value.fzName,
|
|
|
};
|
|
|
if (!params.dictName) {
|
|
|
- return ElMessage.error('请输入名称');
|
|
|
+ return ElMessage.error(ui18n.t('mediaLibrary.tips.placeholderName'));
|
|
|
}
|
|
|
await getaddOrUpdate(params);
|
|
|
ElMessage({
|
|
|
type: "success",
|
|
|
- message: "新增成功",
|
|
|
+ message: ui18n.t('mediaLibrary.tips.placeholderName'),
|
|
|
});
|
|
|
getFzlist();
|
|
|
dialogData.value.fzName = '';
|
|
@@ -317,7 +325,7 @@ const handleAddfz = () => {
|
|
|
|
|
|
const handleuploadAdd = async () => {
|
|
|
console.log('formData', dialogData.value.title);
|
|
|
- if (dialogData.value.title != '上传'){
|
|
|
+ if (dialogData.value.title != ui18n.t('sys.upload')){
|
|
|
await setFileaddOrUpdate({
|
|
|
id: dialogData.value.data?.id,
|
|
|
dictId: addForm.value.dictId,
|
|
@@ -327,11 +335,11 @@ const handleuploadAdd = async () => {
|
|
|
dialogData.value.title = ''
|
|
|
ElMessage({
|
|
|
type: "success",
|
|
|
- message: "操作成功",
|
|
|
+ message: ui18n.t('mediaLibrary.tips.operate'),
|
|
|
});
|
|
|
} else {
|
|
|
const formData = new FormData();
|
|
|
- formData.append("file", URL.createObjectURL(fileList.value && fileList.value[0]));
|
|
|
+ formData.append("file", fileList.value && fileList.value[0]);
|
|
|
formData.append("dictId", addForm.value.dictId);
|
|
|
uploadFile(formData).then((res) => {
|
|
|
console.log(res);
|
|
@@ -340,7 +348,7 @@ const handleuploadAdd = async () => {
|
|
|
dialogData.value.show = false;
|
|
|
ElMessage({
|
|
|
type: "success",
|
|
|
- message: "上传成功",
|
|
|
+ message: ui18n.t('mediaLibrary.tips.uplooadSuccess'),
|
|
|
});
|
|
|
}
|
|
|
});
|
|
@@ -350,20 +358,19 @@ const handleuploadAdd = async () => {
|
|
|
// 定义方法
|
|
|
const del = (row) => {
|
|
|
console.log(file, "file");
|
|
|
- ElMessageBox.confirm("确定删除?", "提示", {
|
|
|
- confirmButtonText: "确定",
|
|
|
- cancelButtonText: "取消",
|
|
|
- type: "warning",
|
|
|
+ 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: "删除成功",
|
|
|
+ message: ui18n.t('mediaLibrary.tips.del'),
|
|
|
});
|
|
|
});
|
|
|
};
|
|
|
-const allList = ref([{ dictName: "全部", id: "0" }])
|
|
|
+const allList = ref([{ dictName: ui18n.t('mediaLibrary.fileType.0'), id: "0" }])
|
|
|
const dictIdList = ref([]);
|
|
|
const tableData = ref([]);
|
|
|
const fileList = ref([]);
|
|
@@ -371,7 +378,7 @@ const currentPage = ref(1);
|
|
|
const pageSize = ref(10);
|
|
|
const total = ref(0);
|
|
|
onMounted(() => {
|
|
|
- document.body.classList.toggle("dark-mode");
|
|
|
+ // document.body.classList.toggle("dark-mode");
|
|
|
});
|
|
|
const getFzlist = () => {
|
|
|
getByKeyList({}).then((res) => {
|
|
@@ -408,7 +415,7 @@ const initData = async () => {
|
|
|
return {
|
|
|
...res,
|
|
|
statusStr:
|
|
|
- res.status == -1 ? "上传失败" : res.status == 0 ? "上传中" : "上传成功",
|
|
|
+ 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"),
|
|
|
};
|
|
|
});
|
|
@@ -417,9 +424,9 @@ const initData = async () => {
|
|
|
const floadileUrl = (record) => {
|
|
|
if (record.fileType == 3) {
|
|
|
let url = `/code/index.html?title=${record.fileName}&type=${record.fileFormat}&fileUrl=${record.fileUrl}#/sign-model`;
|
|
|
- return window.open(url);
|
|
|
+ return windowOpen(url);
|
|
|
} else {
|
|
|
- return window.open(record.fileUrl);
|
|
|
+ return windowOpen(record.fileUrl);
|
|
|
}
|
|
|
};
|
|
|
const beforeUpload = (file) => {
|
|
@@ -429,14 +436,14 @@ const beforeUpload = (file) => {
|
|
|
filetype,
|
|
|
); // 调用上面代码
|
|
|
if (!isExcel) {
|
|
|
- createMessage.error('支持jpg、png、jpeg、mp4、wav、mp3 、shp、zip格式文件上传');
|
|
|
+ createMessage.error(ui18n.t('mediaLibrary.tips.uplooadfiletype'));
|
|
|
fileList.value = [];
|
|
|
return false;
|
|
|
}
|
|
|
const isLt10M = file.size / 1024 / 1024 < 2000;
|
|
|
if (!isLt10M) {
|
|
|
fileList.value = [];
|
|
|
- createMessage.error('上传文件不能超过 2G!');
|
|
|
+ createMessage.error(ui18n.t('mediaLibrary.tips.uplooadSize'));
|
|
|
return false;
|
|
|
}
|
|
|
fileList.value = [file];
|
|
@@ -496,6 +503,7 @@ initData();
|
|
|
margin-top: 1rem;
|
|
|
}
|
|
|
.mymediaLibrary {
|
|
|
+ background-color: #292929;
|
|
|
text-align: left;
|
|
|
// .el-form-item{
|
|
|
// margin-bottom: 30px;
|
|
@@ -509,9 +517,9 @@ initData();
|
|
|
// .el-table{
|
|
|
// background-color: #535353;
|
|
|
// }
|
|
|
- // .el-form--inline .el-form-item{
|
|
|
- // margin-right: 10px;
|
|
|
- // }
|
|
|
+ .el-form--inline .el-form-item{
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
// .el-form-item, .el-select__wrapper{
|
|
|
// background-color: #535353;
|
|
|
// }
|
|
@@ -557,9 +565,13 @@ initData();
|
|
|
// --el-table-tr-bg-color: var(--el-color-success-light-9);
|
|
|
// }
|
|
|
.itemTitle{
|
|
|
- width: 400px;
|
|
|
- margin: 0 8px;
|
|
|
+ width: 100%;
|
|
|
+ margin: 0 0 10px 0;
|
|
|
.itemTitleList{
|
|
|
+ margin-top: 10px;
|
|
|
+ background: rgba(255,255,255,0.1);
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ border: 1px solid rgba(255,255,255,0.2);
|
|
|
max-height: 240px;
|
|
|
overflow-y: scroll;
|
|
|
::-webkit-scrollbar {
|
|
@@ -567,7 +579,8 @@ initData();
|
|
|
}
|
|
|
}
|
|
|
.itemTitle-list{
|
|
|
- line-height: 30px;
|
|
|
+ padding-left: 10px;
|
|
|
+ line-height: 34px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
position: relative;
|
|
@@ -580,6 +593,8 @@ initData();
|
|
|
}
|
|
|
.del{
|
|
|
color: red;
|
|
|
+ width: 40px;
|
|
|
+
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|