Skip to content

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

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

上级 6b895b56
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 235 行增加 和 65 行删除
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() {
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);
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,20 +2,32 @@
<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="el-dialog-div">
<div class="dialog-content">
<el-form :model="dialogForm" class="basic-info">
<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">
<el-form-item
label="文物名称"
:label-width="formLabelWidth"
prop="name"
>
<el-input
v-model="dialogForm.name"
autocomplete="off"
......@@ -110,7 +122,11 @@
label="请输入文物数量"
></el-input-number>
</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"
......@@ -121,7 +137,11 @@
>
</el-cascader>
</el-form-item>
<el-form-item label="馆藏介绍" :label-width="formLabelWidth">
<el-form-item
label="馆藏介绍"
:label-width="formLabelWidth"
prop="intro"
>
<VueQuillEditor v-model="dialogForm.intro" />
</el-form-item>
<el-form-item label="关联文献" :label-width="formLabelWidth">
......@@ -187,7 +207,11 @@
</el-col>
<el-col :span="12">
<el-form-item label="文物封面" :label-width="formLabelWidth">
<el-form-item
label="文物封面"
:label-width="formLabelWidth"
prop="faceImage"
>
<ManualUploader
:files="faceImage"
:fileLimit="1"
......@@ -212,8 +236,8 @@
<ManualUploader
:files="videos"
:fileLimit="6"
:fileSize="50"
:fileType="['mp4', 'wav']"
:fileSize="500"
:fileType="['mp4']"
listType="text"
ref="videos"
/>
......@@ -248,6 +272,7 @@
></el-button>
</div>
</div>
</div>
</el-dialog>
</template>
......@@ -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,10 +464,12 @@ export default {
}
this.reset();
},
async handleSubmit() {
handleSubmit() {
this.$refs.form.validate(async(valid) => {
if (valid) {
var that = this;
this.submitLoading = true;
let formData = new FormData();
this.loading = true;
// 已存在的文件的对象
let successFilesObj = [];
// 需要被删除的文件Id
......@@ -480,6 +519,7 @@ export default {
}));
// formData有长度时再进行上传
if (formDataArr.length > 0) {
this.loadingText = "正在上传文件...请耐心等待";
let upLoadRes = await uploadV1(formData);
if (upLoadRes.code == 0) {
upLoadRes.data.map((resFile) => {
......@@ -516,6 +556,7 @@ export default {
}
});
if (!that.dialogForm.crId) {
this.loadingText = "正在处理文物数据...请耐心等待";
// const { deptId, regionCode } = this.userInfo;
const params = { ...this.dialogForm };
params.literature = this.literatureValues.join(",");
......@@ -530,16 +571,23 @@ export default {
params.textureType[params.textureType.length - 1].trim();
}
let res = await addCulturalRelic(params);
addCulturalRelic(params)
.then((res) => {
if (res.code == 0) {
this.$message.success("提交成功！");
this.loading = false;
setTimeout(() => {
this.submitLoading = false;
this.$emit("handleClose");
this.$emit("refresh");
this.reset();
this.$message.success("提交成功！");
}, 1000);
}
})
.then((err) => {
this.submitLoading = false;
});
} else {
console.log("this.dialogForm", this.dialogForm);
this.loadingText = "正在处理文物数据...请耐心等待";
const params = { ...this.dialogForm };
// debugger
// return
......@@ -560,16 +608,27 @@ export default {
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;
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/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);
});
}
}
};
......@@ -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);
});
}
}
};
......@@ -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,18 +230,21 @@ export default {
// 取消编辑
cancelForm() {
this.$emit("handleClose");
this.faceImage = [];
this.$refs.form.resetFields(); //对表单进行重置且移除校验结果
},
async handleSubmit() {
handleSubmit() {
this.$refs.form.validate(async (valid) => {
if (valid) {
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];
}
// debugger
// return;
if (params.id) {
let res = await upadateUser(params);
if (res.code == 0) {
......@@ -268,16 +258,20 @@ export default {
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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论