Skip to content

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

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

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