|
|
@@ -0,0 +1,547 @@
|
|
|
+<template>
|
|
|
+ <div class="mymediaLibrary">
|
|
|
+ <!-- 表头搜索 -->
|
|
|
+ <el-form :inline="true" :model="searchForm">
|
|
|
+ <el-form-item class="formitem">
|
|
|
+ <el-input
|
|
|
+ v-model="searchForm.name"
|
|
|
+ @blur="submitClick"
|
|
|
+ @keydown.enter="submitClick"
|
|
|
+ placeholder="请输入搜索内容"
|
|
|
+ :prefix-icon="Search"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-select
|
|
|
+ style="width: 120px"
|
|
|
+ v-model="searchForm.fileType"
|
|
|
+ @change="submitClick"
|
|
|
+ size="large"
|
|
|
+ placeholder="全部"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in [
|
|
|
+ '全部',
|
|
|
+ '图片',
|
|
|
+ '视频',
|
|
|
+ '音频',
|
|
|
+ '模型',
|
|
|
+ '其他',
|
|
|
+ ]"
|
|
|
+ :key="index"
|
|
|
+ :label="item"
|
|
|
+ :value="index"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-select
|
|
|
+ v-model="searchForm.dictId"
|
|
|
+ style="width: 120px"
|
|
|
+ @change="submitClick"
|
|
|
+ size="large"
|
|
|
+ placeholder="全部"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in [...allList,...dictIdList]"
|
|
|
+ :key="index"
|
|
|
+ :label="item.dictName"
|
|
|
+ :value="item.id"
|
|
|
+ />
|
|
|
+ </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-form-item>
|
|
|
+ </el-form>
|
|
|
+ <!-- 表格 -->
|
|
|
+ <el-table
|
|
|
+ size="large"
|
|
|
+ :data="tableData"
|
|
|
+ style="width: 100%"
|
|
|
+ :row-class-name="tableRowClassName"
|
|
|
+ >
|
|
|
+ <el-table-column prop="name" label="名称">
|
|
|
+ <template #default="scope">
|
|
|
+ <a
|
|
|
+ style="color: #0960bd; cursor: pointer"
|
|
|
+ v-if="scope.row.fileUrl"
|
|
|
+ target="_blank"
|
|
|
+ :title="scope.row.name"
|
|
|
+ @click="floadileUrl(scope.row)"
|
|
|
+ >
|
|
|
+ {{ scope.row.name }}</a
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ v-for="column in columns"
|
|
|
+ :key="column.prop"
|
|
|
+ :prop="column.prop"
|
|
|
+ align="center"
|
|
|
+ :label="column.label"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column align="center" label="操作" width="150">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-button link type="primary" size="small" @click="handleEdit(row)">
|
|
|
+ 编辑
|
|
|
+ </el-button>
|
|
|
+ <span
|
|
|
+ class="oper-span"
|
|
|
+ @click="del(row)"
|
|
|
+ style="color: var(--primaryColor)"
|
|
|
+ >
|
|
|
+ 删除
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- 分页 -->
|
|
|
+ <el-pagination
|
|
|
+ class="mt-3"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="currentPage"
|
|
|
+ :page-sizes="[10, 20, 30]"
|
|
|
+ :page-size="pageSize"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="total"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ <!-- 弹窗 -->
|
|
|
+ <el-dialog v-model="dialogData.show" :title="dialogData.title" width="500">
|
|
|
+ <el-form :model="form" label-width="110">
|
|
|
+ <el-form-item
|
|
|
+ v-if="dialogData.title == '上传'"
|
|
|
+ label="文件"
|
|
|
+ :label-width="formLabelWidth"
|
|
|
+ >
|
|
|
+ <!-- <el-input v-model="addForm.name" autocomplete="off" /> -->
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ style="width: 100%"
|
|
|
+ :multiple="false"
|
|
|
+ :limit="1"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ :file-list="fileList"
|
|
|
+ :http-request="() => {}"
|
|
|
+ :on-preview="previewFile"
|
|
|
+ :accept="accept"
|
|
|
+ :before-remove="removeFile"
|
|
|
+ >
|
|
|
+ <el-button type="primary">
|
|
|
+ 上传
|
|
|
+ </el-button>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ :label="dialogData.title == '' ? '分组' : '修改分组'"
|
|
|
+ :label-width="formLabelWidth"
|
|
|
+ >
|
|
|
+ <el-select style="width: 180px" v-model="addForm.dictId" placeholder="请选择分组">
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in dictIdList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.dictName"
|
|
|
+ :value="item.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <div style="padding: 0 0 0 40px" v-if="dialogData.title == '上传'">
|
|
|
+ <div style="margin-bottom: 10px">
|
|
|
+ 支持jpg、png、jpeg、mp4、wav、mp3 、shp格式文件上传。文件大小 ≤ 2G
|
|
|
+ </div>
|
|
|
+ <!-- <span>注意：模型需使用zip包上传。包含贴图、模型、mtl文件，包内不得包含文件夹。</span> -->
|
|
|
+ <div style="margin-bottom: 10px">
|
|
|
+ <div>
|
|
|
+ 上传
|
|
|
+ obj：需使用zip包上传。包含贴图、模型、mtl文件，包内不得包含文件夹，文件名不得使用中文。如图：
|
|
|
+ </div>
|
|
|
+ <img style="width: 150px" :src="obj" alt="" />
|
|
|
+ </div>
|
|
|
+ <div style="margin-bottom: 10px">
|
|
|
+ <div>
|
|
|
+ 上传 osgb：需使用zip包上传。包含 Data 文件夹、xml
|
|
|
+ 文件，包内不得包含文件夹,文件名不得使用中文。如图：
|
|
|
+ </div>
|
|
|
+ <img style="width: 150px" :src="osgb" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button @click="dialogData.show = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="handleuploadAdd">
|
|
|
+ 确定
|
|
|
+ </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" style="width: 300px;" />
|
|
|
+ <el-button style="margin-left: 20px" @click="handlefzAdd" type="primary">新增</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="itemTitle">
|
|
|
+ <p>分组列表</p>
|
|
|
+ <div class="itemTitleList">
|
|
|
+ <div class="itemTitle-list" v-for="(item, index) in dictIdList" :key="index">
|
|
|
+ <span>{{ item.dictName }}</span>
|
|
|
+ <span @click="hanleFzDle(item)">删除</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button @click="dialogData.fzshow = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="handleuploadAdd">
|
|
|
+ 确定
|
|
|
+ </el-button>
|
|
|
+ </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 } from "@/store/case";
|
|
|
+import dayjs from "dayjs";
|
|
|
+import obj from "@/assets/images/obj.jpg";
|
|
|
+import osgb from "@/assets/images/osgb.jpg";
|
|
|
+import { ElMessage, ElMessageBox } from "element-plus";
|
|
|
+
|
|
|
+// 定义 props
|
|
|
+const props = defineProps({
|
|
|
+ columns: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ searchColumns: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ getData: {
|
|
|
+ type: Function,
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
+});
|
|
|
+// 定义响应式数据
|
|
|
+const searchForm = ref({
|
|
|
+ name: "",
|
|
|
+ fileType: 0,
|
|
|
+ dictId: "0",
|
|
|
+});
|
|
|
+const addForm = ref({
|
|
|
+ fileType: "",
|
|
|
+ dictId: "",
|
|
|
+ name: "",
|
|
|
+});
|
|
|
+const dialogData = ref({
|
|
|
+ show: false,
|
|
|
+ title: "上传",
|
|
|
+ data: {},
|
|
|
+ fzshow: false,
|
|
|
+ fzName: '',
|
|
|
+ fzList: [],
|
|
|
+});
|
|
|
+const file = ref(null);
|
|
|
+const accept = ".jpg,.png,.jpeg,.mp4,.wav,.mp3,.shp";
|
|
|
+const hanleFzDle = (item) => {
|
|
|
+ ElMessageBox.confirm("确定删除？", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ }).then(async () => {
|
|
|
+ await getfzdel(item);
|
|
|
+ dictIdList.value = dictIdList.value.filter(item1 => item1.id !== item.id)
|
|
|
+ ElMessage({
|
|
|
+ type: "success",
|
|
|
+ message: "删除成功",
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ console.log("upload", file);
|
|
|
+};
|
|
|
+const previewFile = (file) => {
|
|
|
+ console.log("previewFile", file);
|
|
|
+};
|
|
|
+const handleEdit = (data) => {
|
|
|
+ addForm.value.dictId = data.dictId;
|
|
|
+ dialogData.value = {
|
|
|
+ show: true,
|
|
|
+ title: "修改分组",
|
|
|
+ data,
|
|
|
+ };
|
|
|
+};
|
|
|
+
|
|
|
+const removeFile = () => {
|
|
|
+ return true;
|
|
|
+};
|
|
|
+const handleAdd = () => {
|
|
|
+ addForm.value.dictId = '';
|
|
|
+ dialogData.value = {
|
|
|
+ show: true,
|
|
|
+ title: "上传",
|
|
|
+ };
|
|
|
+};
|
|
|
+const handlefzAdd = async () => {
|
|
|
+ let params = {
|
|
|
+ dictName: dialogData.value.fzName,
|
|
|
+ };
|
|
|
+ if (!params.dictName) {
|
|
|
+ return ElMessage.error('请输入名称');
|
|
|
+ }
|
|
|
+ await getaddOrUpdate(params);
|
|
|
+ ElMessage({
|
|
|
+ type: "success",
|
|
|
+ message: "新增成功",
|
|
|
+ });
|
|
|
+ getFzlist();
|
|
|
+ dialogData.value.fzName = '';
|
|
|
+};
|
|
|
+const handleAddfz = () => {
|
|
|
+ dialogData.value.fzshow = true;
|
|
|
+};
|
|
|
+
|
|
|
+const handleuploadAdd = () => {
|
|
|
+ if (file.value) {
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append("file", file.value);
|
|
|
+ formData.append("dictId", addForm.value.dictId);
|
|
|
+ console.log(formData);
|
|
|
+ }
|
|
|
+};
|
|
|
+// 定义方法
|
|
|
+const del = (row) => {
|
|
|
+ console.log(file, "file");
|
|
|
+ ElMessageBox.confirm("确定删除？", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ }).then(async () => {
|
|
|
+ await getdictFiledel({id: row.id});
|
|
|
+ initData();
|
|
|
+ ElMessage({
|
|
|
+ type: "success",
|
|
|
+ message: "删除成功",
|
|
|
+ });
|
|
|
+ });
|
|
|
+};
|
|
|
+const allList = ref([{ dictName: "全部", id: "0" }])
|
|
|
+const dictIdList = ref([]);
|
|
|
+const tableData = ref([]);
|
|
|
+const fileList = ref([]);
|
|
|
+const currentPage = ref(1);
|
|
|
+const pageSize = ref(10);
|
|
|
+const total = ref(0);
|
|
|
+onMounted(() => {
|
|
|
+ document.body.classList.toggle("dark-mode");
|
|
|
+});
|
|
|
+const getFzlist = () => {
|
|
|
+ getByKeyList({}).then((res) => {
|
|
|
+ console.log("getByKeyList", res);
|
|
|
+ dictIdList.value = res;
|
|
|
+ });
|
|
|
+};
|
|
|
+getFzlist();
|
|
|
+const submitClick = () => {
|
|
|
+ console.log("submitClick", searchForm.value);
|
|
|
+ currentPage.value = 1;
|
|
|
+ initData();
|
|
|
+};
|
|
|
+const tableRowClassName = ({ row, rowIndex }) => {
|
|
|
+ if (rowIndex === 1) {
|
|
|
+ return "warning-row";
|
|
|
+ } else if (rowIndex === 3) {
|
|
|
+ return "success-row";
|
|
|
+ }
|
|
|
+ return "";
|
|
|
+};
|
|
|
+
|
|
|
+// 初始化数据
|
|
|
+const initData = async () => {
|
|
|
+ const { list, totalCount } = await props.getData({
|
|
|
+ ...searchForm.value,
|
|
|
+ fileType:
|
|
|
+ searchForm.value.fileType == 0 ? "" : searchForm.value.fileType - 1,
|
|
|
+ dictId: searchForm.value.dictId == 0 ? "" : searchForm.value.dictId,
|
|
|
+ pageNum: currentPage.value,
|
|
|
+ pageSize: pageSize.value,
|
|
|
+ });
|
|
|
+ tableData.value = list.map((res) => {
|
|
|
+ return {
|
|
|
+ ...res,
|
|
|
+ statusStr:
|
|
|
+ res.status == -1 ? "上传失败" : res.status == 0 ? "上传中" : "上传成功",
|
|
|
+ createTime: dayjs(res.createTime).format("YYYY-MM-DD HH:mm:ss"),
|
|
|
+ };
|
|
|
+ });
|
|
|
+ total.value = totalCount;
|
|
|
+};
|
|
|
+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);
|
|
|
+ } else {
|
|
|
+ return window.open(record.fileUrl);
|
|
|
+ }
|
|
|
+};
|
|
|
+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) {
|
|
|
+ createMessage.error('支持jpg、png、jpeg、mp4、wav、mp3 、shp、zip格式文件上传');
|
|
|
+ fileList.value = [];
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ const isLt10M = file.size / 1024 / 1024 < 2000;
|
|
|
+ if (!isLt10M) {
|
|
|
+ fileList.value = [];
|
|
|
+ createMessage.error('上传文件不能超过 2G!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ fileList.value = [file];
|
|
|
+ return true;
|
|
|
+ };
|
|
|
+// 监听搜索表单变化
|
|
|
+watch(searchForm, () => {
|
|
|
+ currentPage.value = 1;
|
|
|
+ initData();
|
|
|
+});
|
|
|
+
|
|
|
+// 处理分页大小变化
|
|
|
+const handleSizeChange = (newSize) => {
|
|
|
+ pageSize.value = newSize;
|
|
|
+ initData();
|
|
|
+};
|
|
|
+
|
|
|
+// 处理当前页码变化
|
|
|
+const handleCurrentChange = (newPage) => {
|
|
|
+ currentPage.value = newPage;
|
|
|
+ initData();
|
|
|
+};
|
|
|
+
|
|
|
+// 处理搜索按钮点击
|
|
|
+const handleSearch = () => {
|
|
|
+ currentPage.value = 1;
|
|
|
+ initData();
|
|
|
+};
|
|
|
+
|
|
|
+// 重置搜索表单
|
|
|
+const resetSearch = () => {
|
|
|
+ Object.keys(searchForm.value).forEach((key) => {
|
|
|
+ searchForm.value[key] = "";
|
|
|
+ });
|
|
|
+ currentPage.value = 1;
|
|
|
+ initData();
|
|
|
+};
|
|
|
+
|
|
|
+// 初始化数据
|
|
|
+initData();
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+:root {
|
|
|
+ // --el-bg-color: #151515;
|
|
|
+ // --colorColor: #fff;
|
|
|
+}
|
|
|
+// /* 覆盖 Element Plus 的 CSS 变量 */
|
|
|
+// --el-color-primary: #1890ff;
|
|
|
+// --el-bg-color: #141414;
|
|
|
+// --el-text-color-primary: #ffffff;
|
|
|
+// /* 可以根据需要覆盖更多变量 */
|
|
|
+.mb-3 {
|
|
|
+ margin-bottom: 1rem;
|
|
|
+}
|
|
|
+.mt-3 {
|
|
|
+ margin-top: 1rem;
|
|
|
+}
|
|
|
+.mymediaLibrary {
|
|
|
+ text-align: left;
|
|
|
+ // .el-form-item{
|
|
|
+ // margin-bottom: 30px;
|
|
|
+ // }
|
|
|
+ // .el-table th.el-table__cell{
|
|
|
+ // background-color: #1d1d1d;
|
|
|
+ // color: #fff;
|
|
|
+ // }
|
|
|
+ // width: 100%;
|
|
|
+ // --el-input-bg-color: #535353;
|
|
|
+ // .el-table{
|
|
|
+ // background-color: #535353;
|
|
|
+ // }
|
|
|
+ // .el-form--inline .el-form-item{
|
|
|
+ // margin-right: 10px;
|
|
|
+ // }
|
|
|
+ // .el-form-item, .el-select__wrapper{
|
|
|
+ // background-color: #535353;
|
|
|
+ // }
|
|
|
+ // .el-input__wrapper, .el-select__wrapper{
|
|
|
+ // background-color: #535353;
|
|
|
+ // box-shadow: none;
|
|
|
+ // }
|
|
|
+ // .el-input__inner, .el-select__selected-item{
|
|
|
+ // color: #fff;
|
|
|
+ // }
|
|
|
+ // /* 局部修改具有 custom-table 类名的 el-table 的背景颜色 */
|
|
|
+ // .custom-table.el-table {
|
|
|
+ // background-color: #535353;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // /* 修改表头背景颜色 */
|
|
|
+ // .custom-table.el-table__header-wrapper th {
|
|
|
+ // background-color: #535353;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // /* 修改表格行的背景颜色 */
|
|
|
+ // .el-table tr {
|
|
|
+ // background-color: #535353;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // /* 修改表格行悬停时的背景颜色 */
|
|
|
+ // .custom-table.el-table__body tr:hover>td {
|
|
|
+ // background-color: #535353;
|
|
|
+ // }
|
|
|
+ // .el-table th.el-table__cell{
|
|
|
+ // background-color: #1d1d1d
|
|
|
+ // }
|
|
|
+ // .el-table .el-table__cell{
|
|
|
+ // border-color: #303030 !important;
|
|
|
+ // }
|
|
|
+ // .el-table--fit .el-table__inner-wrapper:before{
|
|
|
+ // background-color: none;
|
|
|
+ // }
|
|
|
+ // .el-table .warning-row {
|
|
|
+ // --el-table-tr-bg-color: var(--el-color-warning-light-9);
|
|
|
+ // }
|
|
|
+ // .el-table .success-row {
|
|
|
+ // --el-table-tr-bg-color: var(--el-color-success-light-9);
|
|
|
+ // }
|
|
|
+ .itemTitle{
|
|
|
+ width: 400px;
|
|
|
+ margin: 0 8px;
|
|
|
+ .itemTitleList{
|
|
|
+ max-height: 240px;
|
|
|
+ overflow-y: scroll;
|
|
|
+ ::-webkit-scrollbar {
|
|
|
+ display: none; /* Chrome Safari */
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .itemTitle-list{
|
|
|
+ line-height: 30px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
