Skip to content

E
exhibition_backstage
提交 093303b8 authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

增加展览和文物新增和编辑时的交互反馈；修复文物列表点击大图失效问题；新增用户的部门为必填项

上级 6b895b56
隐藏空白字符变更
内嵌 并排
正在显示 包含 1136 行增加 和 916 行删除
src/components/Uploader/ManualUploader.vue
浏览文件 @ 093303b8
<template>
<div class="images-list">
<div class="images-list" >
<el-upload
action="#"
:on-remove="handleRemove"
......@@ -13,6 +13,7 @@
:accept="fileAccept"
:auto-upload="false"
ref="ManualUploader"
:class="{ disabled: uploadDisabled }"
>
<i
v-if="listType === 'picture-card'"
......@@ -22,6 +23,7 @@
<el-button v-else size="small" type="primary">点击上传</el-button>
<div v-if="showTip" slot="tip" class="el-upload__tip">
<div v-if="advice" style="color: #f56c6c">建议：{{ advice }}</div>
提示：只能上传{{ fileTypeName || "jpg/png" }}文件，且不超过
{{ fileSize }}MB，最多上传{{ fileLimit }}个文件
</div>
......@@ -65,6 +67,10 @@ export default {
type: Number,
default: 99,
},
//建议
advice: {
type: String,
},
},
data() {
return {
......@@ -74,7 +80,20 @@ export default {
watch: {
files: {
handler: function (val) {
this.fileList = JSON.parse(JSON.stringify(val));
// this.fileList = JSON.parse(JSON.stringify(val));
// 将回填的字段从url-->pressUrl
if (val.length > 0) {
this.fileList = val.map((item) => {
return {
highImg: item.url,
lowImg: item.pressUrl,
url: item.pressUrl,
// pressUrl:item.pressUrl,
name: item.name,
fileId: item.fileId,
};
});
}
},
immediate: true,
deep: true,
......@@ -88,6 +107,9 @@ export default {
immediate: true,
deep: true,
},
advice(value) {
console.log(value);
},
},
computed: {
// 是否显示提示
......@@ -108,10 +130,36 @@ export default {
});
return fileAccept;
},
uploadDisabled() {
return this.fileList.length == this.fileLimit;
},
},
methods: {
getFiles() {
return this.fileList;
if (
this.fileType == "jpg" ||
this.fileType == "png" ||
this.fileType == "jpeg"
) {
let newFileList = this.fileList.map((item) => {
// return {
// // highImg: item.url,
// // lowImg: item.pressUrl,
// url: item.highImg,
// pressUrl: item.lowImg,
// name: item.name,
// fileId: item.fileId,
// };
item.url = item.highImg;
item.pressUrl = item.lowImg;
item.name = item.name;
item.fileId = item.fileId;
return item;
});
return newFileList;
} else {
return this.fileList;
}
},
// 上传前校检格式和大小
handleBeforeUpload(file) {
......@@ -161,22 +209,72 @@ export default {
handleRemove(file, fileList) {
// debugger
// console.log("handleRemove", file, fileList);
this.fileList.map(async (item, index) => {
let that = this;
that.fileList.map(async (item, index) => {
if (item.uid === file.uid) {
this.fileList.splice(index, 1);
that.fileList.splice(index, 1);
}
});
this.$emit("input", this.fileList);
if (
that.fileType == "jpg" ||
that.fileType == "png" ||
that.fileType == "jpeg"
) {
let newFileList = that.fileList.map((item) => {
item.url = item.highImg;
item.pressUrl = item.lowImg;
item.name = item.name;
item.fileId = item.fileId;
return item;
// return {
// // highImg: item.url,
// // lowImg: item.pressUrl,
// url: item.highImg,
// pressUrl: item.lowImg,
// name: item.name,
// fileId: item.fileId,
// };
});
that.$emit("input", newFileList);
} else {
that.$emit("input", that.fileList);
}
},
handleChange(file, fileList) {
let that = this;
// console.log("handleChange", file, fileList);
if (fileList.length == this.fileLimit) {
this.maxNum = this.fileLimit;
}
if (file.status === "ready") {
this.handleBeforeUpload(file)
.then((res) => {
that.fileList.push(res);
that.$emit("input", that.fileList);
if (
that.fileType == "jpg" ||
that.fileType == "png" ||
that.fileType == "jpeg"
) {
let newFileList = that.fileList.map((item) => {
item.url = item.highImg;
item.pressUrl = item.lowImg;
item.name = item.name;
item.fileId = item.fileId;
return item;
// return {
// // highImg: item.url,
// // lowImg: item.pressUrl,
// url: item.highImg,
// pressUrl: item.lowImg,
// name: item.name,
// fileId: item.fileId,
// };
});
that.$emit("input", newFileList);
} else {
that.$emit("input", that.fileList);
}
})
.catch((err) => {
console.log("err", err);
......
src/views/culturalRelic/components/InfoEditDialog.vue
浏览文件 @ 093303b8
......@@ -2,70 +2,82 @@
<el-dialog
:visible.sync="dialogVisible"
width="80%"
style="height: 98%"
:before-close="handleClose"
top="5vh"
top="2vh"
lock-scroll
v-loading="submitLoading"
element-loading-background="rgba(0, 0, 0, 0.7)"
:element-loading-text="loadingText"
>
<div class="title" slot="title">
<div class="divider"></div>
<div class="label">{{ title }}</div>
</div>
<div class="dialog-content">
<el-form :model="dialogForm" class="basic-info">
<el-row :gutter="50">
<el-col :span="12">
<el-form-item label="文物名称" :label-width="formLabelWidth">
<el-input
v-model="dialogForm.name"
autocomplete="off"
placeholder="请输入文物名称"
></el-input>
</el-form-item>
<el-form-item label="文物类别" :label-width="formLabelWidth">
<el-select
v-model="dialogForm.type"
placeholder="请选择文物类别"
style="width: 100%"
filterable
<div class="el-dialog-div">
<div class="dialog-content">
<el-form
:model="dialogForm"
class="basic-info"
:rules="rules"
ref="form"
>
<el-row :gutter="50">
<el-col :span="12">
<el-form-item
label="文物名称"
:label-width="formLabelWidth"
prop="name"
>
<el-option
v-for="(value, key) in dicts.culturalRelicType"
:key="key"
:label="value"
:value="key"
<el-input
v-model="dialogForm.name"
autocomplete="off"
placeholder="请输入文物名称"
></el-input>
</el-form-item>
<el-form-item label="文物类别" :label-width="formLabelWidth">
<el-select
v-model="dialogForm.type"
placeholder="请选择文物类别"
style="width: 100%"
filterable
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="文物级别" :label-width="formLabelWidth">
<el-select
v-model="dialogForm.level"
placeholder="请选择文物级别"
style="width: 100%"
filterable
>
<el-option
v-for="(value, key) in dicts.culturalRelicLevel"
:key="key"
:label="value"
:value="key"
<el-option
v-for="(value, key) in dicts.culturalRelicType"
:key="key"
:label="value"
:value="key"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="文物级别" :label-width="formLabelWidth">
<el-select
v-model="dialogForm.level"
placeholder="请选择文物级别"
style="width: 100%"
filterable
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="文物质地" :label-width="formLabelWidth">
<el-cascader
style="width: 100%"
v-model="dialogForm.textureType"
:options="culturalRelicTextureType"
:props="culturalRelicTextureProps"
placeholder="请选择文物质地"
filterable
>
</el-cascader>
<!-- <el-select
<el-option
v-for="(value, key) in dicts.culturalRelicLevel"
:key="key"
:label="value"
:value="key"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="文物质地" :label-width="formLabelWidth">
<el-cascader
style="width: 100%"
v-model="dialogForm.textureType"
:options="culturalRelicTextureType"
:props="culturalRelicTextureProps"
placeholder="请选择文物质地"
filterable
>
</el-cascader>
<!-- <el-select
v-model="dialogForm.textureType"
placeholder="请选择文物质地"
style="width: 100%"
......@@ -78,147 +90,159 @@
>
</el-option>
</el-select> -->
</el-form-item>
<el-form-item label="具体尺寸" :label-width="formLabelWidth">
<el-input
v-model="dialogForm.detailSize"
autocomplete="off"
placeholder="请输入具体尺寸"
></el-input>
</el-form-item>
<el-form-item label="文物年代" :label-width="formLabelWidth">
<el-cascader
style="width: 100%"
v-model="dialogForm.years"
:options="culturalRelicYears"
:props="culturalRelicYearsProps"
placeholder="请选择文物年代"
filterable
>
</el-cascader>
</el-form-item>
<el-form-item label="文物数量" :label-width="formLabelWidth">
<!-- <el-input
</el-form-item>
<el-form-item label="具体尺寸" :label-width="formLabelWidth">
<el-input
v-model="dialogForm.detailSize"
autocomplete="off"
placeholder="请输入具体尺寸"
></el-input>
</el-form-item>
<el-form-item label="文物年代" :label-width="formLabelWidth">
<el-cascader
style="width: 100%"
v-model="dialogForm.years"
:options="culturalRelicYears"
:props="culturalRelicYearsProps"
placeholder="请选择文物年代"
filterable
>
</el-cascader>
</el-form-item>
<el-form-item label="文物数量" :label-width="formLabelWidth">
<!-- <el-input
v-model="dialogForm.num"
autocomplete="off"
placeholder="请输入文物数量"
></el-input> -->
<el-input-number
v-model="dialogForm.num"
:min="1"
:max="1000"
label="请输入文物数量"
></el-input-number>
</el-form-item>
<el-form-item label="馆藏单位" :label-width="formLabelWidth">
<el-cascader
style="width: 100%"
v-model="dialogForm.deptId"
:options="orgTreeData"
:props="optionProps"
placeholder="请选择馆藏单位"
clearable
<el-input-number
v-model="dialogForm.num"
:min="1"
:max="1000"
label="请输入文物数量"
></el-input-number>
</el-form-item>
<el-form-item
label="馆藏单位"
:label-width="formLabelWidth"
prop="deptId"
>
</el-cascader>
</el-form-item>
<el-form-item label="馆藏介绍" :label-width="formLabelWidth">
<VueQuillEditor v-model="dialogForm.intro" />
</el-form-item>
<el-form-item label="关联文献" :label-width="formLabelWidth">
<el-select
v-model="literatureValues"
multiple
filterable
remote
reserve-keyword
placeholder="请输入关键词搜索文献"
:remote-method="searchLiterature"
:loading="loading"
style="width: 100%"
<el-cascader
style="width: 100%"
v-model="dialogForm.deptId"
:options="orgTreeData"
:props="optionProps"
placeholder="请选择馆藏单位"
clearable
>
</el-cascader>
</el-form-item>
<el-form-item
label="馆藏介绍"
:label-width="formLabelWidth"
prop="intro"
>
<el-option
v-for="item in literatureList"
:key="item.literatureId"
:label="item.name"
:value="item.literatureId"
<VueQuillEditor v-model="dialogForm.intro" />
</el-form-item>
<el-form-item label="关联文献" :label-width="formLabelWidth">
<el-select
v-model="literatureValues"
multiple
filterable
remote
reserve-keyword
placeholder="请输入关键词搜索文献"
:remote-method="searchLiterature"
:loading="loading"
style="width: 100%"
>
</el-option>
</el-select>
</el-form-item>
<el-option
v-for="item in literatureList"
:key="item.literatureId"
:label="item.name"
:value="item.literatureId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="来源方式" :label-width="formLabelWidth">
<el-input
v-model="dialogForm.sourceWay"
autocomplete="off"
placeholder="请输入来源方式"
></el-input>
</el-form-item>
<el-form-item label="来源方式" :label-width="formLabelWidth">
<el-input
v-model="dialogForm.sourceWay"
autocomplete="off"
placeholder="请输入来源方式"
></el-input>
</el-form-item>
<el-form-item label="是否上架" :label-width="formLabelWidth">
<el-switch v-model="dialogForm.status"> </el-switch>
</el-form-item>
<el-form-item label="是否上架" :label-width="formLabelWidth">
<el-switch v-model="dialogForm.status"> </el-switch>
</el-form-item>
<el-form-item label="主题词" :label-width="formLabelWidth">
<el-input
v-model="dialogForm.themeWord"
autocomplete="off"
placeholder="请输入主题词"
></el-input>
</el-form-item>
<el-form-item label="主题词" :label-width="formLabelWidth">
<el-input
v-model="dialogForm.themeWord"
autocomplete="off"
placeholder="请输入主题词"
></el-input>
</el-form-item>
<el-form-item label="3durl链接" :label-width="formLabelWidth">
<el-input
v-model="dialogForm.url3d"
autocomplete="off"
placeholder="请输入3durl链接"
></el-input>
</el-form-item>
<el-form-item label="3durl链接" :label-width="formLabelWidth">
<el-input
v-model="dialogForm.url3d"
autocomplete="off"
placeholder="请输入3durl链接"
></el-input>
</el-form-item>
<el-form-item label="备注" :label-width="formLabelWidth">
<el-input
type="textarea"
placeholder="请输入备注"
v-model="dialogForm.remark"
maxlength="100"
show-word-limit
>
</el-input>
</el-form-item>
</el-col>
<el-form-item label="备注" :label-width="formLabelWidth">
<el-input
type="textarea"
placeholder="请输入备注"
v-model="dialogForm.remark"
maxlength="100"
show-word-limit
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="文物封面" :label-width="formLabelWidth">
<ManualUploader
:files="faceImage"
:fileLimit="1"
:fileSize="200"
listType="picture-card"
:fileType="['png', 'jpeg', 'jpg']"
ref="faceImage"
/>
</el-form-item>
<el-form-item label="文物图片" :label-width="formLabelWidth">
<ManualUploader
:files="images"
:fileLimit="20"
:fileSize="200"
listType="picture-card"
:fileType="['png', 'jpeg', 'jpg']"
ref="images"
/>
</el-form-item>
<el-col :span="12">
<el-form-item
label="文物封面"
:label-width="formLabelWidth"
prop="faceImage"
>
<ManualUploader
:files="faceImage"
:fileLimit="1"
:fileSize="200"
listType="picture-card"
:fileType="['png', 'jpeg', 'jpg']"
ref="faceImage"
/>
</el-form-item>
<el-form-item label="文物图片" :label-width="formLabelWidth">
<ManualUploader
:files="images"
:fileLimit="20"
:fileSize="200"
listType="picture-card"
:fileType="['png', 'jpeg', 'jpg']"
ref="images"
/>
</el-form-item>
<el-form-item label="文物视频" :label-width="formLabelWidth">
<ManualUploader
:files="videos"
:fileLimit="6"
:fileSize="50"
:fileType="['mp4', 'wav']"
listType="text"
ref="videos"
/>
</el-form-item>
<!-- <el-form-item label="讲解词文件" :label-width="formLabelWidth">
<el-form-item label="文物视频" :label-width="formLabelWidth">
<ManualUploader
:files="videos"
:fileLimit="6"
:fileSize="500"
:fileType="['mp4']"
listType="text"
ref="videos"
/>
</el-form-item>
<!-- <el-form-item label="讲解词文件" :label-width="formLabelWidth">
<ManualUploader
:files="sayExplain"
:fileLimit="6"
......@@ -227,25 +251,26 @@
ref="sayExplain"
/>
</el-form-item> -->
<el-form-item label="文物音频" :label-width="formLabelWidth">
<ManualUploader
:files="audios"
:fileLimit="1"
:fileSize="50"
:fileType="['mp3']"
listType="text"
ref="audios"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-form-item label="文物音频" :label-width="formLabelWidth">
<ManualUploader
:files="audios"
:fileLimit="1"
:fileSize="50"
:fileType="['mp3']"
listType="text"
ref="audios"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="dialog-footer">
<el-button @click="cancelForm">取 消</el-button>
<el-button type="primary" @click="handleSubmit" :loading="loading"
>确定<i class="el-icon-s-promotion" style="margin-left: 5px"></i
></el-button>
<div class="dialog-footer">
<el-button @click="cancelForm">取 消</el-button>
<el-button type="primary" @click="handleSubmit" :loading="loading"
>确定<i class="el-icon-s-promotion" style="margin-left: 5px"></i
></el-button>
</div>
</div>
</div>
</el-dialog>
......@@ -348,6 +373,8 @@ export default {
},
formLabelWidth: "100px",
loading: false,
submitLoading: false,
loadingText: "",
literatureList: [],
literatureValues: [], //文献绑定的数组，编辑回显时需要将后台传的值转成[id1,id2,]并赋值给它,新增时记得清空，提交时改成id 的str
faceImage: [],
......@@ -376,6 +403,16 @@ export default {
children: "children",
checkStrictly: true, //单选选择任意一级选项
},
rules: {
name: [{ required: true, message: "请输入文物名称", trigger: "blur" }],
faceImage: [
{ required: true, message: "请上传封面", trigger: "change" },
],
deptId: [
{ required: true, message: "请填写馆藏单位", trigger: "change" },
],
intro: [{ required: true, message: "请填写文物介绍", trigger: "change" }],
},
};
},
async created() {
......@@ -427,149 +464,171 @@ export default {
}
this.reset();
},
async handleSubmit() {
var that = this;
let formData = new FormData();
this.loading = true;
// 已存在的文件的对象
let successFilesObj = [];
// 需要被删除的文件Id
let deleteFileArr = [];
// 添加布展本身的媒体文件至formData
const mediaArr = ["faceImage", "images", "videos", "audios"];
let newFiles = {};
mediaArr.map((media) => {
let files = [...this.$refs[media].getFiles()];
let fileIds = [];
files.map((f) => {
switch (f.status) {
case "ready":
formData.append(media, f.raw);
break;
case "success":
if (successFilesObj[media]) {
successFilesObj[media].push(f);
} else {
successFilesObj[media] = [f];
handleSubmit() {
this.$refs.form.validate(async(valid) => {
if (valid) {
var that = this;
this.submitLoading = true;
let formData = new FormData();
// 已存在的文件的对象
let successFilesObj = [];
// 需要被删除的文件Id
let deleteFileArr = [];
// 添加布展本身的媒体文件至formData
const mediaArr = ["faceImage", "images", "videos", "audios"];
let newFiles = {};
mediaArr.map((media) => {
let files = [...this.$refs[media].getFiles()];
let fileIds = [];
files.map((f) => {
switch (f.status) {
case "ready":
formData.append(media, f.raw);
break;
case "success":
if (successFilesObj[media]) {
successFilesObj[media].push(f);
} else {
successFilesObj[media] = [f];
}
fileIds.push(f.fileId);
break;
}
fileIds.push(f.fileId);
break;
}
});
newFiles[media] = fileIds;
});
});
newFiles[media] = fileIds;
});
mediaArr.map((media) => {
if (this.dialogForm[media]) {
let oldFileIdArr = this.dialogForm[media].split(",");
oldFileIdArr.map((oldId) => {
if (newFiles[media].indexOf(oldId) == -1) {
console.log(oldId + "已被删除");
deleteFileArr.push(oldId);
mediaArr.map((media) => {
if (this.dialogForm[media]) {
let oldFileIdArr = this.dialogForm[media].split(",");
oldFileIdArr.map((oldId) => {
if (newFiles[media].indexOf(oldId) == -1) {
console.log(oldId + "已被删除");
deleteFileArr.push(oldId);
}
});
}
});
}
});
// 上传所有媒体文件
let filesObj = {};
// 上传所有媒体文件
let filesObj = {};
var formDataArr = Array.from(formData.entries(), ([key, prop]) => ({
[key]: {
ContentLength: typeof prop === "string" ? prop.length : prop.size,
},
}));
// formData有长度时再进行上传
if (formDataArr.length > 0) {
let upLoadRes = await uploadV1(formData);
if (upLoadRes.code == 0) {
upLoadRes.data.map((resFile) => {
if (filesObj[resFile.fileKey]) {
filesObj[resFile.fileKey].push(resFile.fileId);
var formDataArr = Array.from(formData.entries(), ([key, prop]) => ({
[key]: {
ContentLength: typeof prop === "string" ? prop.length : prop.size,
},
}));
// formData有长度时再进行上传
if (formDataArr.length > 0) {
this.loadingText = "正在上传文件...请耐心等待";
let upLoadRes = await uploadV1(formData);
if (upLoadRes.code == 0) {
upLoadRes.data.map((resFile) => {
if (filesObj[resFile.fileKey]) {
filesObj[resFile.fileKey].push(resFile.fileId);
} else {
filesObj[resFile.fileKey] = [resFile.fileId];
}
});
}
}
// 1、回填之前先获取已存在的文件
for (const key in successFilesObj) {
// 如果文件id中含有已上传成功的某个key，如images，则将已上传成功的images推入文件id集合
if (filesObj[key]) {
successFilesObj[key].map((sf) => {
filesObj[key].push(sf.fileId);
});
} else {
filesObj[resFile.fileKey] = [resFile.fileId];
let ids = [];
successFilesObj[key].map((sf) => {
ids.push(sf.fileId);
});
filesObj[key] = ids;
}
}
// return;
// 2、回填布展自带的媒体文件
mediaArr.forEach((media) => {
if (filesObj[media]) {
this.dialogForm[media] = filesObj[media].join(",");
} else {
this.dialogForm[media] = "";
}
});
}
}
// 1、回填之前先获取已存在的文件
for (const key in successFilesObj) {
// 如果文件id中含有已上传成功的某个key，如images，则将已上传成功的images推入文件id集合
if (filesObj[key]) {
successFilesObj[key].map((sf) => {
filesObj[key].push(sf.fileId);
});
} else {
let ids = [];
successFilesObj[key].map((sf) => {
ids.push(sf.fileId);
});
filesObj[key] = ids;
}
}
// return;
// 2、回填布展自带的媒体文件
mediaArr.forEach((media) => {
if (filesObj[media]) {
this.dialogForm[media] = filesObj[media].join(",");
} else {
this.dialogForm[media] = "";
}
});
if (!that.dialogForm.crId) {
// const { deptId, regionCode } = this.userInfo;
const params = { ...this.dialogForm };
params.literature = this.literatureValues.join(",");
params.status = this.dialogForm.status ? 1 : 0;
// 处理年份
if (params.years && params.years instanceof Array) {
params.years = params.years[params.years.length - 1];
}
// 处理质地
if (params.textureType instanceof Array) {
params.textureType =
params.textureType[params.textureType.length - 1].trim();
}
if (!that.dialogForm.crId) {
this.loadingText = "正在处理文物数据...请耐心等待";
// const { deptId, regionCode } = this.userInfo;
const params = { ...this.dialogForm };
params.literature = this.literatureValues.join(",");
params.status = this.dialogForm.status ? 1 : 0;
// 处理年份
if (params.years && params.years instanceof Array) {
params.years = params.years[params.years.length - 1];
}
// 处理质地
if (params.textureType instanceof Array) {
params.textureType =
params.textureType[params.textureType.length - 1].trim();
}
let res = await addCulturalRelic(params);
if (res.code == 0) {
this.$message.success("提交成功！");
this.loading = false;
this.$emit("handleClose");
this.$emit("refresh");
this.reset();
}
} else {
console.log("this.dialogForm", this.dialogForm);
const params = { ...this.dialogForm };
// debugger
// return
params.literature = this.literatureValues.join(",");
params.status = this.dialogForm.status ? 1 : 0;
// return;
// 处理年份
if (params.years instanceof Array) {
params.years = params.years[params.years.length - 1];
}
// 处理质地
if (params.textureType instanceof Array) {
params.textureType =
params.textureType[params.textureType.length - 1].trim();
}
addCulturalRelic(params)
.then((res) => {
if (res.code == 0) {
setTimeout(() => {
this.submitLoading = false;
this.$emit("handleClose");
this.$emit("refresh");
this.reset();
this.$message.success("提交成功！");
}, 1000);
}
})
.then((err) => {
this.submitLoading = false;
});
} else {
this.loadingText = "正在处理文物数据...请耐心等待";
const params = { ...this.dialogForm };
// debugger
// return
params.literature = this.literatureValues.join(",");
params.status = this.dialogForm.status ? 1 : 0;
// return;
// 处理年份
if (params.years instanceof Array) {
params.years = params.years[params.years.length - 1];
}
// 处理质地
if (params.textureType instanceof Array) {
params.textureType =
params.textureType[params.textureType.length - 1].trim();
}
// 处理馆藏单位
if (params.deptId instanceof Array) {
params.deptId = params.deptId[params.deptId.length - 1];
}
let res = await editCulturalRelic(params);
let deleteRes = await deleteFiles(deleteFileArr);
if (res.code == 0 && deleteRes.code == 0) {
this.$message.success("修改成功！");
this.loading = false;
this.$emit("handleClose");
this.$emit("refresh");
this.reset();
// 处理馆藏单位
if (params.deptId instanceof Array) {
params.deptId = params.deptId[params.deptId.length - 1];
}
if (deleteFileArr.length > 0) {
await deleteFiles(deleteFileArr);
}
editCulturalRelic(params)
.then((res) => {
if (res.code == 0) {
setTimeout(() => {
this.submitLoading = false;
this.$emit("handleClose");
this.$emit("refresh");
this.reset();
this.$message.success("修改成功！");
}, 1000);
}
})
.catch((err) => {
this.submitLoading = false;
});
}
}
}
});
},
handleClose(done) {
......@@ -578,6 +637,7 @@ export default {
done();
this.$emit("handleClose");
this.reset();
this.submitLoading = false;
})
.catch((_) => {});
},
......@@ -616,6 +676,12 @@ export default {
font-weight: bold;
}
}
.el-dialog-div {
height: 80vh;
overflow-x: hidden;
}
.dialog-content {
padding: 0 32px;
display: flex;
......@@ -629,6 +695,7 @@ export default {
.dialog-footer {
display: flex;
align-items: flex-end;
margin: 20px 0;
}
}
......
src/views/culturalRelic/index.vue
浏览文件 @ 093303b8
......@@ -54,7 +54,6 @@
:data="list.records"
:tableTitle="tableTitle"
:operates="tableOperates"
:height="tableHeight"
>
<template v-slot:status="data">
<el-popconfirm
......@@ -69,9 +68,13 @@
</template>
<template v-slot:faceImageUrl="data">
<img
:src="data.scope.faceImagePressUrl || data.scope.faceImageUrl"
:src="
$getFullUrl(data.scope.faceImagePressUrl || data.scope.faceImageUrl)
"
alt="查看大图"
v-if="data.scope.faceImagePressUrl || data.scope.faceImageUrl"
v-if="
$getFullUrl(data.scope.faceImagePressUrl || data.scope.faceImageUrl)
"
style="cursor: pointer"
width="100px"
@click="handelPreviewImages(data.scope.faceImageUrl)"
......@@ -125,6 +128,12 @@
:visible="importRecordVisible"
@handleClose="handleImportRecordClose"
/>
<el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="imgList"
/>
</div>
</template>
......@@ -153,10 +162,11 @@ export default {
SearchBar,
ImportRecordDialog,
UploadListDialog,
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
},
data() {
return {
tableHeight: 400,
list: {
records: [],
size: 10,
......@@ -465,6 +475,7 @@ export default {
},
// 预览图片
handelPreviewImages(images) {
// debugger
this.imgViewerVisible = true;
this.imgList = [images];
},
......
src/views/display/components/InfoEditDialog.vue
浏览文件 @ 093303b8
<template>
<el-dialog
v-loading="submitLoading"
element-loading-background="rgba(0, 0, 0, 0.7)"
:element-loading-text="loadingText"
:visible.sync="dialogVisible"
width="86%"
style="height: 98%"
:before-close="handleClose"
top="2vh"
lock-scroll
......@@ -11,109 +13,130 @@
<div class="divider"></div>
<div class="label">{{ title }}</div>
</div>
<div class="dialog-content" v-if="dialogVisible">
<el-form :model="dialogForm" class="basic-info">
<el-row :gutter="50">
<el-col :span="12">
<el-form-item label="展览标题" :label-width="formLabelWidth">
<el-input
v-model="dialogForm.title"
autocomplete="off"
placeholder="请输入展览标题"
></el-input>
</el-form-item>
<el-form-item label="展览类型" :label-width="formLabelWidth">
<el-select
v-model="dialogForm.type"
placeholder="请选择展览类型"
style="width: 100%"
<div class="el-dialog-div">
<div class="dialog-content" v-if="dialogVisible">
<el-form
:model="dialogForm"
class="basic-info"
:rules="rules"
ref="form"
>
<el-row :gutter="50">
<el-col :span="12">
<el-form-item
label="展览标题"
:label-width="formLabelWidth"
prop="title"
>
<el-option
v-for="(value, key) in dicts.displayType"
:key="key"
:label="value"
:value="key"
<el-input
v-model="dialogForm.title"
autocomplete="off"
placeholder="请输入展览标题"
clearable
></el-input>
</el-form-item>
<el-form-item label="展览类型" :label-width="formLabelWidth">
<el-select
v-model="dialogForm.type"
placeholder="请选择展览类型"
style="width: 100%"
clearable
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="展览单位" :label-width="formLabelWidth">
<el-cascader
style="width: 100%"
v-model="dialogForm.deptId"
:options="orgTreeData"
:props="optionProps"
placeholder="请选择展览单位"
>
</el-cascader>
</el-form-item>
<el-form-item
label="展览性质"
:label-width="formLabelWidth"
style="display: none"
>
<el-select
v-model="dialogForm.displayCharacter"
placeholder="请选择展览性质"
style="width: 100%"
<el-option
v-for="(value, key) in dicts.displayType"
:key="key"
:label="value"
:value="key"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item
label="展览单位"
:label-width="formLabelWidth"
prop="deptId"
>
<el-option
v-for="(value, key) in dicts.displayCharacter"
:key="key"
:label="value"
:value="key"
<el-cascader
style="width: 100%"
v-model="dialogForm.deptId"
:options="orgTreeData"
:props="optionProps"
placeholder="请选择展览单位"
clearable
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="模板主题" :label-width="formLabelWidth">
<el-select
v-model="dialogForm.themeType"
placeholder="请选择模板主题"
style="width: 100%"
</el-cascader>
</el-form-item>
<el-form-item
label="展览性质"
:label-width="formLabelWidth"
style="display: none"
>
<el-option
v-for="item in themeTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
<el-select
v-model="dialogForm.displayCharacter"
placeholder="请选择展览性质"
style="width: 100%"
clearable
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="展览介绍" :label-width="formLabelWidth">
<VueQuillEditor v-model="dialogForm.intro" />
</el-form-item>
<el-form-item label="关键词" :label-width="formLabelWidth">
<el-input
v-model="dialogForm.keyword"
autocomplete="off"
placeholder="请输入关键词"
></el-input>
</el-form-item>
<el-form-item label="展览文物" :label-width="formLabelWidth">
<el-select
v-model="crIds"
multiple
filterable
remote
reserve-keyword
placeholder="请输入关键词搜索文物"
:remote-method="searchCR"
:loading="loading"
style="width: 100%"
>
<el-option
v-for="item in crList"
:key="item.crId"
:label="item.name"
:value="item.crId"
<el-option
v-for="(value, key) in dicts.displayCharacter"
:key="key"
:label="value"
:value="key"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="模板主题" :label-width="formLabelWidth">
<el-select
v-model="dialogForm.themeType"
placeholder="请选择模板主题"
style="width: 100%"
clearable
>
<el-option
v-for="item in themeTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="展览介绍" :label-width="formLabelWidth">
<VueQuillEditor v-model="dialogForm.intro" />
</el-form-item>
<el-form-item label="关键词" :label-width="formLabelWidth">
<el-input
v-model="dialogForm.keyword"
autocomplete="off"
placeholder="请输入关键词"
clearable
></el-input>
</el-form-item>
<el-form-item label="展览文物" :label-width="formLabelWidth">
<el-select
v-model="crIds"
multiple
filterable
remote
reserve-keyword
placeholder="请输入关键词搜索文物"
:remote-method="searchCR"
:loading="loading"
style="width: 100%"
clearable
>
</el-option>
</el-select>
<!-- <PageSelect
<el-option
v-for="item in crList"
:key="item.crId"
:label="item.name"
:value="item.crId"
>
</el-option>
</el-select>
<!-- <PageSelect
ref="PageSelect"
label="name"
value="crId"
......@@ -121,105 +144,113 @@
:url="pageSelectUrl"
filter-key="name"
/> -->
</el-form-item>
<el-form-item label="关联文献" :label-width="formLabelWidth">
<el-select
v-model="literatureValues"
multiple
filterable
remote
reserve-keyword
placeholder="请输入关键词搜索文献"
:remote-method="searchLiterature"
:loading="loading"
style="width: 100%"
ref="literatureSelect"
>
<el-option
v-for="item in literatureList"
:key="item.literatureId"
:label="item.name"
:value="item.literatureId"
</el-form-item>
<el-form-item label="关联文献" :label-width="formLabelWidth">
<el-select
v-model="literatureValues"
multiple
filterable
remote
reserve-keyword
placeholder="请输入关键词搜索文献"
:remote-method="searchLiterature"
:loading="loading"
style="width: 100%"
ref="literatureSelect"
clearable
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="是否上架" :label-width="formLabelWidth">
<el-switch v-model="dialogForm.status"> </el-switch>
</el-form-item>
<el-form-item label="备注" :label-width="formLabelWidth">
<el-input
type="textarea"
placeholder="请输入备注"
v-model="dialogForm.remark"
maxlength="100"
show-word-limit
<el-option
v-for="item in literatureList"
:key="item.literatureId"
:label="item.name"
:value="item.literatureId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="是否上架" :label-width="formLabelWidth">
<el-switch v-model="dialogForm.status"> </el-switch>
</el-form-item>
<el-form-item label="备注" :label-width="formLabelWidth">
<el-input
type="textarea"
placeholder="请输入备注"
v-model="dialogForm.remark"
maxlength="100"
show-word-limit
clearable
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="展览封面"
:label-width="formLabelWidth"
prop="faceImage"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="展览封面" :label-width="formLabelWidth">
<ManualUploader
:fileLimit="1"
listType="picture-card"
:fileType="['png', 'jpeg', 'jpg']"
:files="faceImage"
ref="faceImage"
/>
</el-form-item>
<el-form-item label="展览图片" :label-width="formLabelWidth">
<ManualUploader
:files="images"
:fileLimit="20"
:fileSize="50"
listType="picture-card"
:fileType="['png', 'jpeg', 'jpg']"
@handleFileReady="handleImagesReady"
ref="images"
/>
</el-form-item>
<el-form-item label="展览音频" :label-width="formLabelWidth">
<ManualUploader
:files="audios"
:fileLimit="1"
:fileSize="50"
:fileType="['mp3']"
listType="card"
@handleFileReady="handleAudiosReady"
ref="audios"
/>
</el-form-item>
<el-form-item label="展览视频" :label-width="formLabelWidth">
<ManualUploader
:files="videos"
:fileLimit="6"
:fileSize="500"
:fileType="['mp4']"
listType="card"
ref="videos"
<ManualUploader
:fileLimit="1"
listType="picture-card"
:fileType="['png', 'jpeg', 'jpg']"
:files="faceImage"
ref="faceImage"
/>
</el-form-item>
<el-form-item label="展览图片" :label-width="formLabelWidth">
<ManualUploader
:files="images"
:fileLimit="20"
:fileSize="50"
listType="picture-card"
:fileType="['png', 'jpeg', 'jpg']"
@handleFileReady="handleImagesReady"
ref="images"
:advice="imagesAdvice"
/>
</el-form-item>
<el-form-item label="展览音频" :label-width="formLabelWidth">
<ManualUploader
:files="audios"
:fileLimit="1"
:fileSize="50"
:fileType="['mp3']"
listType="card"
@handleFileReady="handleAudiosReady"
ref="audios"
/>
</el-form-item>
<el-form-item label="展览视频" :label-width="formLabelWidth">
<ManualUploader
:files="videos"
:fileLimit="6"
:fileSize="500"
:fileType="['mp4']"
listType="card"
ref="videos"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-form-item label="展览单元" :label-width="formLabelWidth">
<ExhibitionUnit
:exhibitionUnits="dialogForm.exhibitionUnits"
ref="exhibitionUnits"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-form-item label="展览单元" :label-width="formLabelWidth">
<ExhibitionUnit
:exhibitionUnits="dialogForm.exhibitionUnits"
ref="exhibitionUnits"
/>
</el-form-item>
</el-row>
</el-form>
</div>
<div class="dialog-footer">
<el-button @click="cancelForm">取 消</el-button>
<!-- <el-button @click="handlePreview">预 览</el-button> -->
<el-button type="primary" @click="handleSubmit" :disabled="loading"
>发布<i class="el-icon-s-promotion" style="margin-left: 5px"></i
></el-button>
</el-row>
</el-form>
</div>
<div class="dialog-footer">
<el-button @click="cancelForm">取 消</el-button>
<!-- <el-button @click="handlePreview">预 览</el-button> -->
<el-button type="primary" @click="handleSubmit" :disabled="loading"
>发布<i class="el-icon-s-promotion" style="margin-left: 5px"></i
></el-button>
</div>
</div>
</el-dialog>
</template>
......@@ -285,7 +316,6 @@ export default {
function loopUnit(arr) {
arr.forEach((unit) => {
if (unit.length > 0) {
// this.$set(unit, "showMediaUploader", true); //设置展示图片单元的为展开
// 如果有文物，回填文物
if (unit.culturalRelics && uni.culturalRelics.length > 0) {
this.$set(unit, "crIds", unit.culturalRelics);
......@@ -304,6 +334,7 @@ export default {
name: "",
url: this.dialogForm.faceImageUrl,
fileId: this.dialogForm.faceImage,
pressUrl: this.dialogForm.faceImagePressUrl,
},
];
}
......@@ -355,12 +386,16 @@ export default {
switch (value) {
case "1":
console.log("默认主题");
this.imagesAdvice = "";
break;
case "2":
console.log("中国风");
this.imagesAdvice =
"中国风主题建议上传10张以上的展览图片，效果更好";
break;
case "3":
console.log("红色主题");
this.imagesAdvice = "";
break;
}
},
......@@ -373,6 +408,8 @@ export default {
},
formLabelWidth: "100px",
loading: false,
submitLoading: false,
loadingText: "",
upLoadAddress: process.env.VUE_APP_BASE_API + "/sysFiles/upload",
typeOptions: [{ label: "展览类型", value: 1 }], //后期从vuex中取
disabled: false,
......@@ -394,6 +431,17 @@ export default {
children: "children",
checkStrictly: true, //单选选择任意一级选项
},
rules: {
title: [{ required: true, message: "请输入展览标题", trigger: "blur" }],
faceImage: [
{ required: true, message: "请上传封面", trigger: "change" },
],
deptId: [
{ required: true, message: "请填写展览单位", trigger: "change" },
],
intro: [{ required: true, message: "请填写展览介绍", trigger: "blur" }],
},
imagesAdvice: "",
};
},
async created() {
......@@ -471,346 +519,345 @@ export default {
this.reload();
},
// handlePreview() {
// this.loading = false;
// this.$emit("handleClose");
// this.$emit('openView')
// },
async handleSubmit() {
this.loading = true;
var that = this;
let formData = new FormData();
// 已存在的文件的对象
let successFilesObj = [];
// 需要被删除的文件Id
let deleteFileArr = [];
// 添加布展本身的媒体文件至formData
const mediaArr = ["faceImage", "images", "videos", "audios"];
let newFiles = {}; //key：字段名或者单元id名, value:不同媒体或单元已经存在的文件id数组
mediaArr.map((media) => {
let files = [...this.$refs[media].getFiles()];
let fileIds = []; //不同媒体或单元已经存在的文件id数组
files.map((f) => {
switch (f.status) {
case "ready":
formData.append(media, f.raw);
break;
case "success":
if (successFilesObj[media]) {
successFilesObj[media].push(f);
} else {
successFilesObj[media] = [f];
handleSubmit() {
// this.loading = true;
this.$refs.form.validate(async (valid) => {
if (valid) {
this.submitLoading = true;
var that = this;
let formData = new FormData();
// 已存在的文件的对象
let successFilesObj = [];
// 需要被删除的文件Id
let deleteFileArr = [];
// 添加布展本身的媒体文件至formData
const mediaArr = ["faceImage", "images", "videos", "audios"];
let newFiles = {}; //key：字段名或者单元id名, value:不同媒体或单元已经存在的文件id数组
mediaArr.map((media) => {
let files = [...this.$refs[media].getFiles()];
let fileIds = []; //不同媒体或单元已经存在的文件id数组
files.map((f) => {
switch (f.status) {
case "ready":
formData.append(media, f.raw);
break;
case "success":
if (successFilesObj[media]) {
successFilesObj[media].push(f);
} else {
successFilesObj[media] = [f];
}
fileIds.push(f.fileId);
break;
}
fileIds.push(f.fileId);
break;
}
});
newFiles[media] = fileIds;
});
});
newFiles[media] = fileIds;
});
mediaArr.map((media) => {
if (this.dialogForm[media]) {
let oldFileIdArr = this.dialogForm[media].split(",");
oldFileIdArr.map((oldId) => {
if (newFiles[media].indexOf(oldId) == -1) {
deleteFileArr.push(oldId);
mediaArr.map((media) => {
if (this.dialogForm[media]) {
let oldFileIdArr = this.dialogForm[media].split(",");
oldFileIdArr.map((oldId) => {
if (newFiles[media].indexOf(oldId) == -1) {
deleteFileArr.push(oldId);
}
});
}
});
}
});
// return
let unitIds = [];
let unitData = [...this.$refs["exhibitionUnits"].getUnitData()];
// debugger;
// return
// 批量添加image进入formdata
let newfileIdsArr = []; //不同媒体或单元已经存在的文件id数组
let oldFileIdsArr = []; //旧的ids集合
addUnitImgToFormData(unitData);
function addUnitImgToFormData(arr) {
if (arr.length > 0) {
arr.map((item) => {
if (item.imagesVo && item.imagesVo.length > 0) {
let imageFiles = item.imagesVo;
let unitOldIds = item.images.split(",");
oldFileIdsArr = oldFileIdsArr.concat(unitOldIds);
imageFiles.map((imgFile) => {
// switch (imgFile.status) {
// case "ready":
// formData.append(`unit-images-${item.euId}`, imgFile.raw);
// break;
// case "success":
// if (successFilesObj[`unit-images-${item.euId}`]) {
// successFilesObj[`unit-images-${item.euId}`].push(imgFile);
// } else {
// successFilesObj[`unit-images-${item.euId}`] = [imgFile];
// }
// newfileIdsArr.push(imgFile.fileId);
// break;
// }
if (imgFile.status && imgFile.status == "ready") {
formData.append(`unit-images-${item.euId}`, imgFile.raw);
} else {
if (successFilesObj[`unit-images-${item.euId}`]) {
successFilesObj[`unit-images-${item.euId}`].push(imgFile);
} else {
successFilesObj[`unit-images-${item.euId}`] = [imgFile];
}
newfileIdsArr.push(imgFile.fileId);
// return
let unitIds = [];
let unitData = [...this.$refs["exhibitionUnits"].getUnitData()];
// debugger;
// return
// 批量添加image进入formdata
let newfileIdsArr = []; //不同媒体或单元已经存在的文件id数组
let oldFileIdsArr = []; //旧的ids集合
addUnitImgToFormData(unitData);
function addUnitImgToFormData(arr) {
if (arr.length > 0) {
arr.map((item) => {
if (item.imagesVo && item.imagesVo.length > 0) {
let imageFiles = item.imagesVo;
let unitOldIds = item.images.split(",");
oldFileIdsArr = oldFileIdsArr.concat(unitOldIds);
imageFiles.map((imgFile) => {
if (imgFile.status && imgFile.status == "ready") {
formData.append(`unit-images-${item.euId}`, imgFile.raw);
} else {
if (successFilesObj[`unit-images-${item.euId}`]) {
successFilesObj[`unit-images-${item.euId}`].push(
imgFile
);
} else {
successFilesObj[`unit-images-${item.euId}`] = [imgFile];
}
newfileIdsArr.push(imgFile.fileId);
}
});
}
if (item.children) {
addUnitImgToFormData(item.children);
}
});
}
if (item.children) {
addUnitImgToFormData(item.children);
}
oldFileIdsArr.map((oldfileId) => {
// 如果旧的id在新的id集合中找不到，则代表该文件被删除
if (newfileIdsArr.indexOf(oldfileId) == -1) {
deleteFileArr.push(oldfileId);
}
});
}
}
oldFileIdsArr.map((oldfileId) => {
// 如果旧的id在新的id集合中找不到，则代表该文件被删除
if (newfileIdsArr.indexOf(oldfileId) == -1) {
deleteFileArr.push(oldfileId);
}
});
// return;
// addUnitIds(unitData); //添加unit的id作为上传文件的key
// function addUnitIds(arr) {
// if (arr.length > 0) {
// arr.map((item) => {
// unitIds.push(item.euId);
// if (item.children) {
// addUnitIds(item.children);
// }
// });
// }
// }
// unitIds.map(async (euId) => {
// let exhibitionUnitsDom = this.$refs.exhibitionUnits;
// let imageFiles = [];
// let videoFiles = [];
// if (exhibitionUnitsDom.$refs[`unit-images-${euId}`]) {
// imageFiles = [
// ...exhibitionUnitsDom.$refs[`unit-images-${euId}`].getFiles(),
// ];
// // debugger
// }
// if (exhibitionUnitsDom.$refs[`unit-videos-${euId}`]) {
// videoFiles = [
// ...exhibitionUnitsDom.$refs[`unit-videos-${euId}`].getFiles(),
// ];
// }
// if (imageFiles.length > 0) {
// imageFiles.forEach((imgFile) => {
// if (imgFile.status === "ready") {
// formData.append(`unit-images-${euId}`, imgFile.raw);
// } else {
// //
// if (successFilesObj[`unit-images-${euId}`]) {
// successFilesObj[`unit-images-${euId}`].push(imgFile);
// } else {
// successFilesObj[`unit-images-${euId}`] = [imgFile];
// }
// }
// });
// }
// if (videoFiles.length > 0) {
// videoFiles.forEach((videoFile) => {
// if (videoFile.status === "ready") {
// formData.append(`unit-videos-${euId}`, videoFile.raw);
// } else {
// if (successFilesObj[`unit-videos-${euId}`]) {
// successFilesObj[`unit-videos-${euId}`].push(videoFiles);
// } else {
// successFilesObj[`unit-videos-${euId}`] = [videoFiles];
// }
// }
// });
// }
// });
// 上传所有媒体文件
let filesObj = {};
var formDataArr = Array.from(formData.entries(), ([key, prop]) => ({
[key]: {
ContentLength: typeof prop === "string" ? prop.length : prop.size,
},
}));
// console.log("formDataArr,length", formDataArr.length);
// formData有长度时再进行上传
if (formDataArr.length > 0) {
let upLoadRes = await uploadV1(formData);
if (upLoadRes.code == 0) {
upLoadRes.data.map((resFile) => {
if (filesObj[resFile.fileKey]) {
filesObj[resFile.fileKey].push(resFile.fileId);
// return;
// addUnitIds(unitData); //添加unit的id作为上传文件的key
// function addUnitIds(arr) {
// if (arr.length > 0) {
// arr.map((item) => {
// unitIds.push(item.euId);
// if (item.children) {
// addUnitIds(item.children);
// }
// });
// }
// }
// unitIds.map(async (euId) => {
// let exhibitionUnitsDom = this.$refs.exhibitionUnits;
// let imageFiles = [];
// let videoFiles = [];
// if (exhibitionUnitsDom.$refs[`unit-images-${euId}`]) {
// imageFiles = [
// ...exhibitionUnitsDom.$refs[`unit-images-${euId}`].getFiles(),
// ];
// // debugger
// }
// if (exhibitionUnitsDom.$refs[`unit-videos-${euId}`]) {
// videoFiles = [
// ...exhibitionUnitsDom.$refs[`unit-videos-${euId}`].getFiles(),
// ];
// }
// if (imageFiles.length > 0) {
// imageFiles.forEach((imgFile) => {
// if (imgFile.status === "ready") {
// formData.append(`unit-images-${euId}`, imgFile.raw);
// } else {
// //
// if (successFilesObj[`unit-images-${euId}`]) {
// successFilesObj[`unit-images-${euId}`].push(imgFile);
// } else {
// successFilesObj[`unit-images-${euId}`] = [imgFile];
// }
// }
// });
// }
// if (videoFiles.length > 0) {
// videoFiles.forEach((videoFile) => {
// if (videoFile.status === "ready") {
// formData.append(`unit-videos-${euId}`, videoFile.raw);
// } else {
// if (successFilesObj[`unit-videos-${euId}`]) {
// successFilesObj[`unit-videos-${euId}`].push(videoFiles);
// } else {
// successFilesObj[`unit-videos-${euId}`] = [videoFiles];
// }
// }
// });
// }
// });
// 上传所有媒体文件
let filesObj = {};
var formDataArr = Array.from(formData.entries(), ([key, prop]) => ({
[key]: {
ContentLength: typeof prop === "string" ? prop.length : prop.size,
},
}));
// console.log("formDataArr,length", formDataArr.length);
// formData有长度时再进行上传
if (formDataArr.length > 0) {
this.loadingText = "正在上传文件...请耐心等待";
let upLoadRes = await uploadV1(formData);
if (upLoadRes.code == 0) {
upLoadRes.data.map((resFile) => {
if (filesObj[resFile.fileKey]) {
filesObj[resFile.fileKey].push(resFile.fileId);
} else {
filesObj[resFile.fileKey] = [resFile.fileId];
}
});
}
}
// 1、回填之前先获取已存在的文件
for (const key in successFilesObj) {
// 如果文件id中含有已上传成功的某个key，如images，则将已上传成功的images推入文件id集合
if (filesObj[key]) {
successFilesObj[key].map((sf) => {
filesObj[key].push(sf.fileId);
});
// filesObj[key].push(successFilesObj[key].fileId);
} else {
filesObj[resFile.fileKey] = [resFile.fileId];
let ids = [];
successFilesObj[key].map((sf) => {
ids.push(sf.fileId);
});
filesObj[key] = ids;
}
}
// 2、回填布展自带的媒体文件
mediaArr.forEach((media) => {
if (filesObj[media]) {
this.dialogForm[media] = filesObj[media].join(",");
} else {
this.dialogForm[media] = "";
}
});
}
}
// 1、回填之前先获取已存在的文件
for (const key in successFilesObj) {
// 如果文件id中含有已上传成功的某个key，如images，则将已上传成功的images推入文件id集合
if (filesObj[key]) {
successFilesObj[key].map((sf) => {
filesObj[key].push(sf.fileId);
});
// filesObj[key].push(successFilesObj[key].fileId);
} else {
let ids = [];
successFilesObj[key].map((sf) => {
ids.push(sf.fileId);
});
filesObj[key] = ids;
}
}
// 2、回填布展自带的媒体文件
mediaArr.forEach((media) => {
if (filesObj[media]) {
this.dialogForm[media] = filesObj[media].join(",");
} else {
this.dialogForm[media] = "";
}
});
// 3、回填布展单元媒体文件,修改关联文物为Str，和显示隐藏控制器
backFillUnit(unitData);
function backFillUnit(arr) {
if (arr.length > 0) {
arr.map((unit) => {
// 如果进行了文件上传
if (Object.keys(filesObj).length > 0) {
for (const key in filesObj) {
let type = key.split("-")[1];
let euId = key.split("-")[2];
if (euId == unit.euId) {
switch (type) {
case "images":
unit.images = filesObj[key].join(",");
break;
case "videos":
unit.videos = filesObj[key].join(",");
break;
// 3、回填布展单元媒体文件,修改关联文物为Str，和显示隐藏控制器
backFillUnit(unitData);
function backFillUnit(arr) {
if (arr.length > 0) {
arr.map((unit) => {
// 如果进行了文件上传
if (Object.keys(filesObj).length > 0) {
for (const key in filesObj) {
let type = key.split("-")[1];
let euId = key.split("-")[2];
if (euId == unit.euId) {
switch (type) {
case "images":
unit.images = filesObj[key].join(",");
break;
case "videos":
unit.videos = filesObj[key].join(",");
break;
}
}
}
}
}
}
let crIdArr = unit.crIds;
unit.crIds = crIdArr ? crIdArr.join(",") : "";
var deleteArr = ["euId", "isEditing"];
deleteArr.forEach((i) => {
if (unit[i]) {
delete unit[i];
}
});
// }
if (unit.children) {
backFillUnit(unit.children);
let crIdArr = unit.crIds;
unit.crIds = crIdArr ? crIdArr.join(",") : "";
var deleteArr = ["euId", "isEditing"];
deleteArr.forEach((i) => {
if (unit[i]) {
delete unit[i];
}
});
// }
if (unit.children) {
backFillUnit(unit.children);
}
});
}
});
}
}
}
if (!that.dialogForm.exhibitionId) {
const { deptId, regionCode } = this.userInfo;
const params = {
...this.dialogForm,
exhibitionUnits: unitData,
deptId,
regionCode,
};
params.literature = this.literatureValues.join(",");
params.status = this.dialogForm.status ? 1 : 0;
params.crIds = this.crIds.join(",");
params.displayCharacter = 1; //传布展
addDisplay(params)
.then((res) => {
if (res.code == 0) {
this.$message.success("提交成功！");
this.loading = false;
this.$emit("refresh");
this.reload();
if (!that.dialogForm.exhibitionId) {
this.loadingText = "正在处理展览数据...请耐心等待";
const { deptId, regionCode } = this.userInfo;
const params = {
...this.dialogForm,
exhibitionUnits: unitData,
deptId,
regionCode,
};
params.literature = this.literatureValues.join(",");
params.status = this.dialogForm.status ? 1 : 0;
params.crIds = this.crIds.join(",");
params.displayCharacter = 1; //传布展
addDisplay(params)
.then((res) => {
if (res.code == 0) {
setTimeout(() => {
// this.loading = false;
this.$emit("refresh");
this.reload();
this.submitLoading = false;
this.$message.success("提交成功！");
}, 1000);
}
})
.catch((err) => {
// this.loading = false;
this.submitLoading = false;
});
} else {
this.loadingText = "正在处理展览数据...请耐心等待";
const {
exhibitionId,
title,
type,
keyword,
intro,
themeType,
remark,
faceImage,
faceImageUrl,
images,
audios,
videos,
regionCode,
deptId,
displayCharacter,
} = this.dialogForm;
let literature = this.literatureValues.join(",");
let crIds = this.crIds.join(",");
let status = this.dialogForm.status ? 1 : 0;
// return;
const params = {
exhibitionId,
title,
type,
keyword,
intro,
themeType,
remark,
audios,
deptId,
faceImage,
faceImageUrl,
images,
regionCode,
videos,
status,
literature,
crIds,
displayCharacter,
exhibitionUnits: unitData,
};
// 处理馆藏单位
if (params.deptId instanceof Array) {
params.deptId = params.deptId[params.deptId.length - 1];
}
})
.catch((err) => {
this.loading = false;
});
} else {
const {
exhibitionId,
title,
type,
keyword,
intro,
themeType,
remark,
faceImage,
faceImageUrl,
images,
audios,
videos,
regionCode,
deptId,
displayCharacter,
} = this.dialogForm;
let literature = this.literatureValues.join(",");
let crIds = this.crIds.join(",");
let status = this.dialogForm.status ? 1 : 0;
// return;
const params = {
exhibitionId,
title,
type,
keyword,
intro,
themeType,
remark,
audios,
deptId,
faceImage,
faceImageUrl,
images,
regionCode,
videos,
status,
literature,
crIds,
displayCharacter,
exhibitionUnits: unitData,
};
// 处理馆藏单位
if (params.deptId instanceof Array) {
params.deptId = params.deptId[params.deptId.length - 1];
}
// return;
editDisplay(params)
.then(async (res) => {
let deleteRes;
console.log(res);
// return
// return;
if (deleteFileArr.length > 0) {
await deleteFiles(deleteFileArr);
}
if (res.code == 0) {
this.$message.success("提交成功！");
this.$emit("refresh");
this.reload();
this.loading = false;
}
})
.catch((err) => {
console.log("err222222", err);
this.loading = false;
});
}
// }
editDisplay(params)
.then(async (res) => {
let deleteRes;
console.log(res);
// return
if (res.code == 0) {
this.$emit("refresh");
this.reload();
setTimeout(() => {
this.loadingText = "上传完毕";
this.submitLoading = false;
this.$message.success("提交成功！");
}, 1000);
}
})
.catch((err) => {
console.log("err", err);
this.submitLoading = false;
});
}
}
});
},
// 清空编辑组件中的所有值
reload() {
......@@ -831,9 +878,6 @@ export default {
images: "", //图片id集合
videos: "", //视频id集合
crIds: [], //关联文物集合
showMediaUploader: false,
// showImageUploader: false, //后期去掉
// showVideoUploader: false, //后期去掉
},
];
......@@ -848,6 +892,7 @@ export default {
.then((_) => {
done();
this.reload();
this.submitLoading = false;
})
.catch((_) => {});
},
......@@ -904,6 +949,10 @@ export default {
font-weight: bold;
}
}
.el-dialog-div {
height: 80vh;
overflow-x: hidden;
}
.dialog-content {
padding: 0 32px;
display: flex;
......@@ -918,6 +967,7 @@ export default {
.dialog-footer {
display: flex;
justify-content: flex-end;
margin: 20px 50px;
}
.video-lists {
......
src/views/display/index.vue
浏览文件 @ 093303b8
......@@ -324,7 +324,7 @@ export default {
// 预览图片
handelPreviewImages(images) {
this.imgViewerVisible = true;
this.imgList = [images];
this.imgList = [images];
},
handleClosePreviewDialog() {
......
src/views/user/components/InfoEditDialog.vue
浏览文件 @ 093303b8
......@@ -12,8 +12,12 @@
<div class="label">{{ title }}</div>
</div>
<div class="dialog-content">
<el-form :model="dialogForm" class="basic-info">
<el-form-item label="账号" :label-width="formLabelWidth">
<el-form :model="dialogForm" class="basic-info" :rules="rules" ref="form">
<el-form-item
label="账号"
:label-width="formLabelWidth"
prop="username"
>
<el-input
v-model="dialogForm.username"
autocomplete="off"
......@@ -21,10 +25,15 @@
clearable
></el-input>
</el-form-item>
<el-form-item label="密码" :label-width="formLabelWidth">
<el-form-item
label="密码"
:label-width="formLabelWidth"
prop="password"
>
<el-input
v-model="dialogForm.password"
autocomplete="off"
show-password
type="password"
placeholder="请输入密码"
clearable
......@@ -54,13 +63,18 @@
clearable
></el-input>
</el-form-item>
<el-form-item label="所属部门" :label-width="formLabelWidth">
<el-form-item
label="所属部门"
:label-width="formLabelWidth"
prop="deptId"
>
<el-cascader
style="width: 100%"
v-model="dialogForm.deptId"
:options="orgTreeData"
:props="optionProps"
placeholder="请选择所属部门"
clearable
>
</el-cascader>
</el-form-item>
......@@ -135,9 +149,6 @@ export default {
deep: true,
immediate: true,
},
// orgTreeData(value){
// console.log(1111,value);
// }
},
data() {
var validatePass = (rule, value, callback) => {
......@@ -165,19 +176,7 @@ export default {
if (!pattern.test(value)) {
callback(new Error("账号长度4-20个字符，只能包括字母、数字、下划线"));
} else {
const formData = new FormData();
formData.append("userName", value);
checkUserName(formData)
.then((res) => {
if (res.code == "0") {
callback();
} else {
callback(res.msg);
}
})
.catch((err) => {
console.error(err);
});
callback();
}
}
};
......@@ -190,20 +189,7 @@ export default {
if (!pattern.test(value)) {
callback(new Error("请输入合法手机号/电话号"));
} else {
const formData = new FormData();
formData.append("phone", value);
checkPhone(formData)
.then((res) => {
console.log(res);
if (res.code == "0") {
callback();
} else {
callback(res.msg);
}
})
.catch((err) => {
console.error(err);
});
callback();
}
}
};
......@@ -223,7 +209,7 @@ export default {
username: [
{ validator: validateUserName, trigger: "blur", required: true },
],
phone: [{ validator: validatePhone, trigger: "blur", required: true }],
// phone: [{ validator: validatePhone, trigger: "blur", required: true }],
nickName: [
{ required: true, message: "请输入昵称", trigger: "blur" },
{
......@@ -236,6 +222,7 @@ export default {
password: [
{ validator: validatePass, trigger: "blur", required: true },
],
deptId: [{ required: true, message: "请输入部门", trigger: "change" }],
},
};
},
......@@ -243,41 +230,48 @@ export default {
// 取消编辑
cancelForm() {
this.$emit("handleClose");
this.faceImage = [];
this.$refs.form.resetFields(); //对表单进行重置且移除校验结果
},
async handleSubmit() {
let params = JSON.parse(JSON.stringify(this.dialogForm));
// 修改状态
params.status = this.status ? 1 : 0;
// return;
// 处理馆藏单位
if (params.deptId instanceof Array) {
params.deptId = params.deptId[params.deptId.length - 1];
}
if (params.id) {
let res = await upadateUser(params);
if (res.code == 0) {
this.$message.success("修改成功！");
this.reload();
handleSubmit() {
this.$refs.form.validate(async (valid) => {
if (valid) {
let params = JSON.parse(JSON.stringify(this.dialogForm));
// 修改状态
params.status = this.status ? 1 : 0;
// 处理馆藏单位
if (params.deptId instanceof Array) {
params.deptId = params.deptId[params.deptId.length - 1];
}
// debugger
// return;
if (params.id) {
let res = await upadateUser(params);
if (res.code == 0) {
this.$message.success("修改成功！");
this.reload();
}
} else {
let res = await addUser(params);
if (res.code == 0) {
this.$message.success("添加成功！");
this.reload();
}
}
}
} else {
let res = await addUser(params);
if (res.code == 0) {
this.$message.success("添加成功！");
this.reload();
}
}
});
},
reload() {
this.$emit("refresh");
this.$emit("handleClose");
this.$refs.form.resetFields(); //对表单进行重置且移除校验结果
},
handleClose(done) {
this.$confirm("确认关闭？")
.then((_) => {
done();
this.$emit("handleClose");
this.$refs.form.resetFields(); //对表单进行重置且移除校验结果
})
.catch((_) => {});
},
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论