提交 cadb721d authored 作者: 龙菲's avatar 龙菲

优化展览模块代码

上级 aa5439cd
// 关于展览的常量
export const THEME_TYPE = {
NORMAL_STYLE: {
value: '1',
......
......@@ -19,6 +19,26 @@ const transformData = {
];
return faceImage;
},
/**
* 转换服务器的封面数据到前端可用的3D模型数据
* @param {String} file3d 3D文件ID
* @param {String} file3dUrl 3D文件url
* @returns {Array} el-upload组件需要的数据
*/
file3dToClient(file3d, file3dUrl) {
if (!file3d) {
return [];
}
const file3dArr = [
{
name: "",
url: file3dUrl || "",
fileId: file3d || "",
},
];
return file3dArr;
},
/**
*
* @param {Array} arr 文献id数组
......
......@@ -72,7 +72,7 @@
style="width: 100%"
v-model="dialogForm.textureType"
:options="culturalRelicTextureType"
:props="culturalRelicTextureProps"
:props="props"
placeholder="请选择文物质地"
filterable
>
......@@ -83,7 +83,7 @@
style="width: 100%"
v-model="dialogForm.years"
:options="culturalRelicYears"
:props="culturalRelicYearsProps"
:props="props"
placeholder="请选择文物年代"
filterable
>
......@@ -236,15 +236,17 @@
ref="videos"
/>
</el-form-item>
<!-- <el-form-item label="讲解词文件" :label-width="formLabelWidth">
<ManualUploader
:files="sayExplain"
:fileLimit="6"
listType="text"
:fileType="['doc', 'tet', 'docx']"
ref="sayExplain"
/>
</el-form-item> -->
<el-form-item label="3D模型" :label-width="formLabelWidth">
<ManualUploader
:files="file3d"
:fileLimit="1"
:fileSize="500"
:fileType="['OBJ', 'STL', 'FBX', '3DS']"
listType="text"
ref="file3d"
/>
</el-form-item>
<el-form-item label="文物音频" :label-width="formLabelWidth">
<ManualUploader
:files="audios"
......@@ -281,10 +283,9 @@ import { addOrUpdateCulturalRelic } from "@/api/culturalRelic";
import { mapGetters } from "vuex";
import { uploadV1 } from "@/utils/file";
import { deleteFiles } from "@/api/file";
import { rules } from "./validateRules";
import fileUploadFunctions from "./fileUploadFuctions";
import transformData from "./transformData";
import { rules } from "./js/validateRules";
import fileUploadFunctions from "./js/fileUploadFuctions";
import transformData from "./js/transformData";
const {
faceImageToClient,
literatureIdArrToStr,
......@@ -293,6 +294,7 @@ const {
statusStrToBool,
getDeptIdArr,
getDeptIdStr,
file3dToClient
} = transformData;
export default {
name: "InfoEditDialog",
......@@ -344,21 +346,16 @@ export default {
loading: false,
submitLoading: false,
loadingText: "",
literatureList: [],
literatureIdArr: [], //文献绑定的数组,编辑回显时需要将后台传的值转成[id1,id2,]并赋值给它,新增时记得清空,提交时改成id 的str
literatureList: [], //服务器获得的文献列表
literatureIdArr: [], //文献ID集合,用于绑定数据
faceImage: [],
file3d: [],
images: [],
videos: [],
audios: [],
culturalRelicTextureType: [],
culturalRelicYears: [],
culturalRelicYearsProps: {
value: "value",
label: "label",
children: "children",
checkStrictly: true,
},
culturalRelicTextureProps: {
props: {
value: "value",
label: "label",
children: "children",
......@@ -373,7 +370,7 @@ export default {
checkStrictly: true,
},
rules,
mediaKeys: ["faceImage", "images", "videos", "audios"], //表单中的媒体
mediaKeys: ["faceImage", "images", "videos", "audios", "file3d"], //表单中的媒体
};
},
async created() {
......@@ -397,9 +394,11 @@ export default {
} = this.dialogForm;
this.dialogForm.status = statusStrToBool(status);
this.faceImage = faceImageToClient(faceImagePressUrl, faceImageUrl);
this.file3d = file3dToClient(faceImagePressUrl, faceImageUrl);
this.images = imagesVo || [];
this.videos = videosVo || [];
this.audios = audiosVo || [];
this.literatureIdArr = literatureListToIds(literatureVo);
this.dialogForm.deptId = getDeptIdArr(deptId, this.userInfo);
},
......@@ -479,6 +478,7 @@ export default {
this.uploadMediaFiles(this.mediaKeys, this.dialogForm)
.then(async (mediaForm) => {
console.log(mediaForm);
this.loadingText = "正在提交表单...";
const form = this.getSubmitForm(this.dialogForm, mediaForm);
const { status, years, textureType, deptId } = form;
const { literatureIdArr } = this;
......
......@@ -107,14 +107,10 @@
</template>
<script>
import TablePage from "@/components/Table/TablePage";
import { importZip } from "@/utils/file";
import { getToken } from "@/utils/auth";
export default {
name: "UploadListDialog",
components: {
TablePage,
},
data() {
return {
dialogVisible: false,
......
/**
* 本文件用于处理文物的相关文件上传过程中的函数
* 注意不要使用this可能导致找不到等问题,内部调用内部方法时直接使用fileUploadFuctions
*/
const fileUploadFuctions = {
/**
* 判断文件是否上传过
* @param {File | Object} file 文件对象,可能是File可能就是普通对象
* @returns {Boolean} 文件是否上传过
*/
isFileRaw(file) {
let isFileRaw = false;
isFileRaw = file.status && file.status == "ready";
return isFileRaw;
},
/**
* 判断formData中是否有数据
* @param {FormData} formData 文件对象,可能是File可能就是普通对象
* @returns {Boolean} formData中是否有数据
*/
isFormDataHasData(formData) {
const formDataArr = Array.from(formData.entries(), ([key, prop]) => ({
[key]: {
ContentLength: typeof prop === "string" ? prop.length : prop.size,
},
}));
return formDataArr.length > 0;
},
/**
* 获取对应媒体下的文件
* @param {string} mediaKey 媒体key
* @returns {Array} 媒体对应的文件
*/
getMediaFile($el, mediaKey) {
return $el.$refs[mediaKey].getFiles();
},
/**
* 获取需要上传的FormData
* @param {Array} mediaKeys 媒体keys数组
* @returns {FormData} formData 需要上传的formdata
*/
getNeedUploadFormData($el, mediaKeys) {
const formData = new FormData();
mediaKeys.forEach((mediaKey) => {
const currentFileList = fileUploadFuctions.getMediaFile($el, mediaKey);
currentFileList.forEach((file) => {
if (fileUploadFuctions.isFileRaw(file)) {
formData.append(mediaKey, file.raw);
}
});
});
return formData;
},
/**
* 获取需要已经存在(数据库已存储的)文件ID对象
* @param {Array} mediaKeys 媒体keys数组
* @returns {Object} 已经存在(数据库已存储的)文件ID对象
*/
getOldIdsObj(mediaKeys, dialogForm) {
let oldFileIdsObj = {};
mediaKeys.forEach((key) => {
if (dialogForm[key]) {
oldFileIdsObj[key] = dialogForm[key];
} else {
oldFileIdsObj[key] = "";
}
});
return oldFileIdsObj;
},
/**
* 获取返回结果中的文件id对象
* @param {Array} mediaKeys 媒体keys数组
* @param {Object} requestRes 上传返回的数据对象
* @returns {Object} 新上传的文件id对象
*/
getNewIdsObj(mediaKeys, requestRes) {
let newUploadedFileIdsObj = {};
mediaKeys.forEach((key) => {
newUploadedFileIdsObj[key] = fileUploadFuctions.getResIdStrByMedia(
key,
requestRes
);
});
return newUploadedFileIdsObj;
},
/**
* 获取上传返回结果中的id字符串
* @param {Array} mediaKeys 媒体keys数组
* @param {Object} requestRes 上传返回的数据对象
* @returns {string} 新上传的文件id字符串
*/
getResIdStrByMedia(mediaKey, requestRes) {
const arr = [];
requestRes.data.forEach((item) => {
if (item.fileKey == mediaKey) {
arr.push(item.fileId);
}
});
const str = arr.length > 0 ? arr.join(",") : "";
return str;
},
/**
* 获取新旧合并的文件id对象
* @param {Array} mediaKeys 媒体keys数组
* @param {Object} oldObj 已经存在的
* @param {Object} newObj 新上传的
* @returns {string} 新上传的文件id字符串
*/
getMergedIdsObj(oldObj, newObj, mediaKeys) {
const obj = {};
mediaKeys.forEach((key) => {
let newArr = newObj[key].split(",");
let oldArr = oldObj[key].split(",");
let fullArr = [...new Set([...newArr, ...oldArr])];
let fullStr = fullArr.join(",");
obj[key] = fullStr.substring(0, fullStr.length - 1);
});
return obj;
},
/**
* 获取需要被删除的文件ID合集
* @param {Array} mediaKeys 媒体keys数组
* @param {Object} dialogForm 表单对象
* @param {Object} newUploadedFileIdsObj 最新上传之后的
* @returns {Object} 新上传的文件id对象
*/
getDeleteFileArr(oldObj, newObj, mediaKeys) {
const arr = [];
mediaKeys.forEach((key) => {
let newArr = newObj[key].split(",");
let oldArr = oldObj[key].split(",");
let fullArr = [...new Set([...newArr, ...oldArr])];
oldArr.forEach((oldId) => {
if (!fullArr.includes(oldId)) {
arr.push(oldId);
}
});
});
return arr;
},
};
export default fileUploadFuctions;
const transformData = {
/**
* 转换服务器的封面数据到前端可用的封面数据
* @param {String} faceImagePressUrl 压缩过得封面
* @param {String} faceImageUrl 封面原图
* @returns {Array} el-upload组件需要的数据
*/
faceImageToClient(faceImagePressUrl, faceImageUrl) {
if (!faceImageUrl) {
return [];
}
const faceImage = [
{
name: "",
url: faceImageUrl || "",
pressUrl: faceImagePressUrl || faceImageUrl || "",
fileId: faceImage || "",
},
];
return faceImage;
},
/**
* 转换服务器的封面数据到前端可用的3D模型数据
* @param {String} file3d 3D文件ID
* @param {String} file3dUrl 3D文件url
* @returns {Array} el-upload组件需要的数据
*/
file3dToClient(file3d, file3dUrl) {
if (!file3d) {
return [];
}
const file3dArr = [
{
name: "",
url: file3dUrl || "",
fileId: file3d || "",
},
];
return file3dArr;
},
/**
*
* @param {Array} arr 文献id数组
* @returns {String} 提交给服务器需要的以逗号隔开的字符串
*/
literatureIdArrToStr(arr) {
let str = "";
if (arr.length == 0) {
return "";
}
const result = arr.join(",");
str = result.substring(0, result.length - 1);
return str;
},
/**
*
* @param {Array} literatureVo 文献数组,每个条目是一个文献对象
* @returns {Array} 文献ID集合
*/
literatureListToIds(literatureVo) {
if (!literatureVo || literatureVo.length == 0) {
return [];
} else {
const ids = literatureVo.map((item) => {
return item.ids;
});
return ids;
}
},
/**
* 转换状态从布尔型到数值型
* @param {Boolean} statusBoolean 布尔值的状态
* @returns {Number} 提交给服务器需要的以逗号隔开的数值
*/
statusBoolToNum(statusBoolean) {
const statusNumber = statusBoolean ? 1 : 0;
return statusNumber;
},
/**
* 转换状态从数值型到布尔型
* @param {String} statusString 字符串型的状态
* @returns {Boolean} 组件需要的布尔值
*/
statusStrToBool(statusString) {
const statusBoolean = Boolean(Number(statusString));
return statusBoolean;
},
/**
* 回填馆藏单位
* @param {String} deptId 部门ID
* @param {Object} userInfo 当前用户的信息
* @returns {Array} 符合element-ui使用的数组
*/
getDeptIdArr(deptId, userInfo) {
let deptIdArr = [];
if (deptId) {
deptIdArr = [deptId];
} else if (userInfo) {
deptIdArr = [userInfo.deptId];
}
return deptIdArr;
},
/**
* 回填馆藏单位
* @param {Array} deptArr 部门ID集合
* @returns {String} 部门ID字符串
*/
getDeptIdStr(deptArr) {
let str = "";
if (deptArr.length == 0) {
return "";
}
const result = deptArr.join(",");
str = result.substring(0, result.length - 1);
return str;
},
};
export default transformData;
......@@ -78,25 +78,18 @@
</template>
<script>
import TablePage from "@/components/Table/TablePage.vue";
import TableOperation from "@/components/Table/TableOperation.vue";
import {
importRecordsTitle,
importOperates,
importOperations,
} from "../config";
} from "../configs/import";
import { parseTime, getYestoday } from "@/utils/index";
import { getImportListPage, deleteByBatchNum } from "@/api/file";
import { getLogList } from "@/api/log";
import SearchBar from "@/components/SearchBar";
export default {
name: "ImportRecordDialog",
components: {
TablePage,
TableOperation,
SearchBar,
},
props: {
visible: {
type: Boolean,
......
......@@ -407,7 +407,6 @@ export default {
handler: function (value) {
if (value) {
this.dialogForm = JSON.parse(JSON.stringify(value));
// 新增情况下默认单位和地区是当前用户
if (!this.dialogForm.exhibitionId) {
this.dialogForm.deptId = this.userInfo.deptId;
this.dialogForm.regionCode = this.userInfo.regionCode;
......
export const title = [{
prop: "title",
label: "标题",
columnAlign: 'center',
width: 120,
showOverFlowToolTip: true,
},
{
prop: "keyword",
label: "关键词",
columnAlign: 'center',
showOverFlowToolTip: true,
},
{
prop: "type",
label: "展览类型",
columnAlign: 'center',
isDisplayType: true,
showOverFlowToolTip: true,
},
{
prop: "deptName",
label: "展览单位",
columnAlign: 'center', showOverFlowToolTip: true,
},
{
prop: "regionName",
label: "所在地区",
columnAlign: 'center', showOverFlowToolTip: true,
},
{
prop: "faceImageUrl",
label: "封面",
columnAlign: 'center',
isFaceImage: true,
width: 130
},
// {
// prop: "intro",
// label: "展览介绍",
// columnAlign: 'center',
// },
// {
// prop: "literature",
// label: "关联文献",
// columnAlign: 'center',
// width:100
// },
{
prop: "collectCount",
label: "收藏量",
columnAlign: 'center',
sortable: true
},
{
prop: "loveCount",
label: "点赞量",
columnAlign: 'center',
sortable: true
},
{
prop: "browseCount",
label: "浏览量",
columnAlign: 'center',
sortable: true
},
{
prop: "status",
label: "是否上架",
columnAlign: 'center',
isStatus: true
},
{
prop: "checkStatus",
label: "审核状态",
columnAlign: 'center',
},
{
prop: "checkRemark",
label: "审核意见",
columnAlign: 'center',
showOverFlowToolTip: true,
},
{
prop: "themeType",
label: "模板主题",
columnAlign: 'center',
},
{
prop: "remark",
label: "备注",
columnAlign: 'center',
showOverFlowToolTip: true,
},
// {
// prop: "images",
// label: "展览图片",
// columnAlign: 'center',
// isImages: true
// },
// {
// prop: "audios",
// label: "展览音频",
// columnAlign: 'center',
// isAudios: true
// },
// {
// prop: "videos",
// label: "展览视频",
// columnAlign: 'center',
// isVideos: true
// },
]
export const operates = {
operate: true,
label: "操作",
width: "320px",
minwidth: "220px",
titleAlign: "center",
columnAlign: "center",
}
export const operations = [{
type: 'view',
title: '预览'
},
{
type: 'edit',
title: '编辑'
},
// {
// type: 'approval',
// title: '提交审核'
// },
{
type: 'delete',
title: '删除'
},
]
export const literatureTableTitle = [{
prop: "name",
label: "文献名称",
columnAlign: 'center',
},
{
prop: "authors",
label: "作者",
columnAlign: 'center',
},
{
prop: "remark",
label: "备注",
columnAlign: 'center',
},
]
export const importRecordsTitle = [{
prop: "createTime",
label: "导入时间",
columnAlign: "left",
needTimeTag: true
},
// {
// prop: "batchNum",
// label: "导入批次",
// columnAlign: "center",
// },
{
prop: "sourceName",
label: "文件名称",
columnAlign: "center",
width: 300
},
{
prop: 'username',
label: '操作用户',
columnAlign: "center",
},
{
prop: 'optType',
label: '操作类型',
columnAlign: "center",
},
// {
// prop: "fileSize",
// label: "文件大小",
// columnAlign: "center",
// },
// {
// prop: "remark",
// label: "备注",
// columnAlign: "center",
// width: "60px",
// },
]
export const importOperates = {
operate: true,
label: "操作",
width: "220px",
minwidth: "220px",
titleAlign: "center",
columnAlign: "center",
}
export const importOperations = [{
type: 'delete',
title: '删除记录及展览'
},]
export const importRecordsTitle = [{
prop: "createTime",
label: "导入时间",
columnAlign: "left",
needTimeTag: true
},
// {
// prop: "batchNum",
// label: "导入批次",
// columnAlign: "center",
// },
{
prop: "sourceName",
label: "文件名称",
columnAlign: "center",
width: 300
},
{
prop: 'username',
label: '操作用户',
columnAlign: "center",
},
{
prop: 'optType',
label: '操作类型',
columnAlign: "center",
},
// {
// prop: "fileSize",
// label: "文件大小",
// columnAlign: "center",
// },
// {
// prop: "remark",
// label: "备注",
// columnAlign: "center",
// width: "60px",
// },
]
export const importOperates = {
operate: true,
label: "操作",
width: "220px",
minwidth: "220px",
titleAlign: "center",
columnAlign: "center",
}
export const importOperations = [{
type: 'delete',
title: '删除记录及展览'
},]
\ No newline at end of file
export const searchConfig = [
{
prop: "title",
type: "input",
label: "展览名称",
},
{
prop: "status",
type: "select",
label: "上下架状态",
selectOptions: [
{
label: "已上线",
value: "1",
},
{
label: "已下线",
value: "0",
},
],
},
{
prop: "checkStatus",
type: "select",
label: "审核状态",
selectOptions: [
{
label: "已通过",
value: "1",
},
{
label: "审核中",
value: "0",
},
{
label: "待提交",
value: "-1",
},
{
label: "已驳回",
value: "-2",
},
],
},
];
export const title = [
{
prop: "title",
label: "标题",
columnAlign: "center",
width: 120,
showOverFlowToolTip: true,
},
{
prop: "keyword",
label: "关键词",
columnAlign: "center",
showOverFlowToolTip: true,
},
{
prop: "type",
label: "展览类型",
columnAlign: "center",
isDisplayType: true,
showOverFlowToolTip: true,
},
{
prop: "deptName",
label: "展览单位",
columnAlign: "center",
showOverFlowToolTip: true,
},
{
prop: "regionName",
label: "所在地区",
columnAlign: "center",
showOverFlowToolTip: true,
},
{
prop: "faceImageUrl",
label: "封面",
columnAlign: "center",
isFaceImage: true,
width: 130,
},
// {
// prop: "intro",
// label: "展览介绍",
// columnAlign: 'center',
// },
// {
// prop: "literature",
// label: "关联文献",
// columnAlign: 'center',
// width:100
// },
{
prop: "collectCount",
label: "收藏量",
columnAlign: "center",
sortable: true,
},
{
prop: "loveCount",
label: "点赞量",
columnAlign: "center",
sortable: true,
},
{
prop: "browseCount",
label: "浏览量",
columnAlign: "center",
sortable: true,
},
{
prop: "status",
label: "是否上架",
columnAlign: "center",
isStatus: true,
},
{
prop: "checkStatus",
label: "审核状态",
columnAlign: "center",
},
{
prop: "checkRemark",
label: "审核意见",
columnAlign: "center",
showOverFlowToolTip: true,
},
{
prop: "themeType",
label: "模板主题",
columnAlign: "center",
},
{
prop: "remark",
label: "备注",
columnAlign: "center",
showOverFlowToolTip: true,
},
// {
// prop: "images",
// label: "展览图片",
// columnAlign: 'center',
// isImages: true
// },
// {
// prop: "audios",
// label: "展览音频",
// columnAlign: 'center',
// isAudios: true
// },
// {
// prop: "videos",
// label: "展览视频",
// columnAlign: 'center',
// isVideos: true
// },
];
export const operates = {
operate: true,
label: "操作",
width: "320px",
minwidth: "220px",
titleAlign: "center",
columnAlign: "center",
};
export const operations = [
{
type: "view",
title: "预览",
},
{
type: "edit",
title: "编辑",
},
// {
// type: 'approval',
// title: '提交审核'
// },
{
type: "delete",
title: "删除",
},
];
......@@ -2,15 +2,6 @@
<div class="app-container" v-loading="loading">
<div class="top-bar">
<SearchBar :config="searchConfig" @search="search" @reset="reset" />
<!-- <el-button
type="primary"
@click.native="handleOperation({ type: 'add' })"
icon="el-icon-plus"
>
发布</el-button
>
</div> -->
<!-- <el-button type="primary" @click.native="handleCopy">复制</el-button> -->
</div>
<div class="tools">
<div class="tools-item">
......@@ -160,12 +151,6 @@
:displayDetail="curPreviewObj"
@handleClose="handleClosePreviewDialog"
/>
<!-- <CopyDialog
:visible="copyDialogVisible"
@handleClose="handleCloseCopyDialog"
@handleCopySelect="handleCopySelect"
:list="list"
/> -->
<ImportRecordDialog
:visible="importRecordVisible"
@reload="loadData"
......@@ -188,9 +173,7 @@
</template>
<script>
import TablePage from "@/components/Table/TablePage.vue";
import TableOperation from "@/components/Table/TableOperation.vue";
import { title, operates, operations } from "./config";
import { title, operates, operations } from "./configs/list";
import {
getListPer,
deleteDisplay,
......@@ -200,26 +183,20 @@ import {
import InfoEditDialog from "./components/InfoEditDialog";
import PreviewDialog from "./components/PreviewDialog";
import ImportRecordDialog from "./components/ImportRecordDialog";
// import CopyDialog from "./components/CopyDialog";
import SearchBar from "@/components/SearchBar";
import UploadListDialog from "./components/UploadListDialog";
import { mapGetters } from "vuex";
import { themeTypeCode } from "./contants";
import { getToken } from "@/utils/auth";
import { importZip } from "@/utils/file";
import { titles } from "@/utils/boutiqueTitles";
import { searchConfig } from "./configs/list";
export default {
components: {
TablePage,
TableOperation,
InfoEditDialog,
PreviewDialog,
SearchBar,
// CopyDialog,
ImportRecordDialog,
UploadListDialog,
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
},
data() {
let that = this;
......@@ -234,51 +211,7 @@ export default {
name: "",
status: "",
},
searchConfig: [
{
prop: "title",
type: "input",
label: "展览名称",
},
{
prop: "status",
type: "select",
label: "上下架状态",
selectOptions: [
{
label: "已上线",
value: "1",
},
{
label: "已下线",
value: "0",
},
],
},
{
prop: "checkStatus",
type: "select",
label: "审核状态",
selectOptions: [
{
label: "已通过",
value: "1",
},
{
label: "审核中",
value: "0",
},
{
label: "待提交",
value: "-1",
},
{
label: "已驳回",
value: "-2",
},
],
},
],
searchConfig,
editDialogVisible: false,
isAdd: true,
form: {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论