提交 2ba7ac06 authored 作者: 龙菲's avatar 龙菲

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

上级 4ee4982e
<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);
......
......@@ -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];
},
......
......@@ -324,7 +324,7 @@ export default {
// 预览图片
handelPreviewImages(images) {
this.imgViewerVisible = true;
this.imgList = [images];
this.imgList = [images];
},
handleClosePreviewDialog() {
......
......@@ -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 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论