代码如下
<template>
<div>
<el-button
type="primary"
icon="el-icon-upload2"
size="mini"
@click="handleSwitch"
>快速上传</el-button
>
<el-dialog
title="材料快速上传"
width="85%"
:visible.sync="dialogVisible"
v-dialogDrag
:before-close="handleClose"
:close-on-click-modal="false"
>
<div class="big_box">
<div class="small_box">
<el-divider content-position="left">待编辑材料</el-divider>
<div class="check_box">
<div class="button_box">
<el-upload
ref="uploadFile"
class="upload-demo"
:action="action"
multiple
:on-success="successList"
:before-upload="onBeforeUpload"
:headers="uploadHeader"
:show-file-list="false"
:file-list="fileList"
>
<el-button type="primary" icon="el-icon-upload2" size="mini"
>本地上传</el-button
>
</el-upload>
<el-button
style="margin-left: 10px"
type="warning"
icon="el-icon-edit"
size="mini"
:disabled="imageArr.length === 0"
@click="handleEditAll"
>编辑</el-button
>
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
:disabled="imageArr.length === 0"
@click="handleDetailAll"
>删除</el-button
>
</div>
<div class="input_box">
<input
type="checkbox"
v-model="isChecked"
:disabled="imageList.length === 0"
@click="allChecked"
/>全选
</div>
</div>
<ul class="img_box">
<li class="cloudy" v-for="(item, index) in imageList" :key="index">
<input
type="checkbox"
:id="`checkbox${item.fileResourceId}`"
name="checkbox"
:checked="item.checked"
@click="btnPitch($event, item)"
/>
<label :for="`checkbox${item.fileResourceId}`">
<img :src="item.fileUrl" alt="" />
<div>{
{ item.fileName }}</div>
</label>
</li>
</ul>
</div>
<div class="small_box">
<el-divider content-position="left">已编辑材料</el-divider>
<el-button
type="primary"
size="mini"
:disabled="new_imageArr.length === 0"
@click="handleKeep"
>保存</el-button
>
<el-button
size="mini"
:disabled="new_imageArr.length === 0"
@click="handleEmpty"
>清空</el-button
>
<div class="right_box">
<div v-for="(item, index) in new_imageArr" :key="index">
<div>{
{ item.currentName }} {
{ item.materialsName }}</div>
<span>{
{ item.party }}</span>
<ul>
<li
class="cloudy"
v-for="item in item.imageArr"
:key="item.fileResourceId"
>
<img :src="item.fileUrl" alt="" />
<div>{
{ item.fileName }}</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<el-dialog
width="50%"
title=""
:visible.sync="innerVisible"
append-to-body
v-dialogDrag
center
:show-close="false"
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<el-form ref="form" :model="form" label-width="90px" size="small">
<el-form-item label="当前卷：" prop="currentWork">
<el-select
v-model="currentWork"
placeholder="请选择"
style="width: 40%"
@change="btnCurrentWork"
>
<el-option label="正卷" value="0" />
<el-option label="副卷" value="1" />
<el-option label="声像卷" value="2" />
</el-select>
</el-form-item>
<el-form-item label="材料名称：" prop="materials">
<el-select
v-model="form.materials"
filterable
placeholder="请选择"
style="width: 40%"
>
<el-option
v-for="item in materialsList"
:key="item.archiveCatalogId"
:label="item.catalogName"
:value="item.archiveCatalogId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="当事人：" prop="party">
<el-autocomplete
type="text"
style="width: 40%"
v-model="form.party"
placeholder="请输入"
clearable
class="inline-input"
:fetch-suggestions="querySearch"
value-key="name"
/>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="innerVisibleEnsure" size="mini"
>确 定</el-button
>
<el-button @click="innerVisibleOff" size="mini">取 消</el-button>
</span>
</el-dialog>
</el-dialog>
</div>
</template>
<script>
import {
Filelist,
FileResource,
deleteFileResource,
FileAccidentAdd,
} from "@/api/index";
import set from "@/settings";
import store from "@/./store";
import { listCatalog } from "@/api/accident/ModifyTheFile"; // 材料目录
import { getAccidentArchive } from "@/api/accident/undocumented"; // 未归档详情
export default {
data() {
return {
// 全选按钮
isChecked: false,
// 当事人信息
restaurants: [],
// 上传头参
uploadHeader: {},
action: "",
// 上传多个文件
multiple: true,
// 外层弹出框
dialogVisible: false,
// 内层弹出框
innerVisible: false,
// 本地上传的图片
fileList: [],
// 上传到服务器的图片数据
info: [],
// 上传图片完成以后请求服务器图片接口数据
imageList: [],
// 材料目录数据
materialsList: [],
// 选中的图片
imageArr: [],
// 已编辑图片
new_imageArr: [],
// 保存要分配的图片
fileAccidentList: [],
// 查询材料目录参数
queryParams: {
pageNum: 1,
pageSize: 100,
catalogType: 1,
accidentArchiveId: this.$route.query.accidentArchiveId,
},
// 当前卷
currentWork: "0",
currentName: "正卷",
// 表单
form: {
// 材料名称
materials: null,
materialsName: null,
// 当事人
party: null,
},
// 判断执行次数
index: 1,
};
},
created() {
this.getList();
this.getById();
this.Filelist();
this.action = set.basePath + "/uploadFile";
const user = store.getters;
this.uploadHeader = {
Authorization: user.token,
};
},
methods: {
async getList() {
// 查询已填写信息
await getAccidentArchive(this.$route.query.accidentArchiveId)
.then((response) => {
if (response.code === 200) {
this.restaurants = response.data.detail;
} else {
this.$message({
message: "查询失败！",
type: "warning",
});
}
})
.catch((err) => {
console.error(err);
});
},
async getById() {
// 查询材料目录列表
const params = this.queryParams;
await listCatalog(params)
.then((response) => {
if (response.code === 200) {
this.materialsList = response.rows;
} else {
this.$message({
message: "查询失败！",
type: "warning",
});
}
})
.catch((err) => {
console.error(err);
});
},
// 返回当事人信息
querySearch(queryString, cb) {
cb(this.restaurants);
},
// 打开外层弹出框
handleSwitch() {
this.dialogVisible = true;
},
// 关闭外层弹出框
handleClose(done) {
this.$confirm("确认关闭？")
.then((_) => {
done();
this.handleEmpty();
})
.catch((_) => {});
},
// 上传成功验证
successList(response, file, fileList, idx) {
this.fileList = [];
this.fileList = fileList;
// console.log("fileList", this.fileList);
// console.log("index", this.index);
this.index++;
if (this.index > this.fileList.length) {
this.index == 1;
this.getFileResource(this.fileList);
}
},
// 文件上传
getFileResource(info) {
this.info = [];
// console.log("info", info);
info.forEach((item) => {
// console.log("item.response", item.response);
item.response.data.accidentArchiveId =
this.$route.query.accidentArchiveId;
this.info.push(item.response.data);
});
FileResource(this.info).then((response) => {
this.$refs.uploadFile.clearFiles();
this.Filelist();
});
},
// 上传前验证
onBeforeUpload(file) {
if (file.size > 1024 * 1024 * 100) {
this.$message({
message: "单个文件 " + file.name + " 不能大于100M",
type: "warning",
});
return false;
} else if (file.size <= 0) {
this.$message({
message: "文件 " + file.name + " 不能为空",
type: "warning",
});
return false;
}
},
// 上传完成后 调取详情接口
async Filelist() {
const params = {
accidentArchiveId: this.$route.query.accidentArchiveId,
};
await Filelist(params)
.then((response) => {
if (response.code === 200) {
this.imageList = response.rows;
// console.log("this.imageList", this.imageList);
} else {
this.$message({
message: "查询失败！",
type: "warning",
});
}
})
.catch((err) => {
console.error(err);
});
this.inputMultiple = false;
},
// 编辑 打开内层弹出层
handleEditAll() {
this.innerVisible = true;
},
// 删除
handleDetailAll() {
const arr = this.imageArr.map((item) => item.fileResourceId);
// console.log(arr);
this.$modal
.confirm("是否确认删除所选择的数据项？该操作不可逆！")
.then(function () {
return deleteFileResource(arr);
})
.then(() => {
this.Filelist();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
// 全选
allChecked(e) {
if (e.target.checked) {
this.imageList.forEach((item) => {
item.checked = true;
let arr = Object.assign([], this.imageList);
this.imageArr = arr;
});
} else {
this.imageList.forEach((item) => {
item.checked = false;
this.imageArr = [];
});
}
},
// 切换当前卷重新请求接口
btnCurrentWork(val) {
if (val == 0) {
this.queryParams.catalogType = 1;
this.currentName = "正卷";
this.resetForm("form");
this.getById();
} else if (val == 1) {
this.queryParams.catalogType = 2;
this.currentName = "副卷";
this.resetForm("form");
this.getById();
} else {
this.queryParams.catalogType = 3;
this.currentName = "声像卷";
this.resetForm("form");
this.getById();
}
},
// 保存按钮
async handleKeep() {
await FileAccidentAdd(this.fileAccidentList)
.then((response) => {
if (response.code === 200) {
this.$message({
message: "恭喜你，保存成功",
type: "success",
});
this.handleEmpty();
this.fatherBack();
} else {
this.$message({
message: "保存失败！",
type: "error",
});
}
})
.catch((err) => {
console.error(err);
});
},
// 给父组件传递点击事件
fatherBack() {
this.$emit("rollBack");
},
// 清空按钮
handleEmpty() {
this.Filelist();
this.imageArr = [];
this.new_imageArr = [];
this.fileAccidentList = [];
},
// 单选
btnPitch(e, item) {
let result = this.imageList.map((data) => {
if (item.fileResourceId == data.fileResourceId) {
data.checked = e.target.checked;
}
return data.checked;
});
let res = result.every((data) => {
return data;
});
if (res) {
this.isChecked = true;
} else {
this.isChecked = false;
}
// console.log("item", item);
if (item.checked === true) {
this.imageArr.push(item);
// console.log("this.imageArr---------true", this.imageArr);
} else {
// console.log("this.imageArr---------false--1111", this.imageArr);
for (let i = 0; i < this.imageArr.length; i++) {
if (item.fileResourceId === this.imageArr[i].fileResourceId) {
this.imageArr.splice(i, 1);
// console.log("this.imageArr[i]", this.imageArr[i]);
// console.log("this.imageArr---------false--2222", this.imageArr);
}
}
}
},
// 内层弹出框 确认按钮
innerVisibleEnsure() {
//ES6的方法
// 移除掉已编辑的图片
this.imageList = this.imageList.filter(
(item) =>
!this.imageArr.some(
(ele) => ele.fileResourceId === item.fileResourceId
)
);
// console.log(this.imageList);
// 编辑的图片 添加到新的数组
for (let j = 0; j < this.materialsList.length; j++) {
for (let i = 0; i < this.imageArr.length; i++) {
this.imageArr[i].materials = this.form.materials;
if (
this.materialsList[j].archiveCatalogId == this.imageArr[i].materials
) {
this.form.materialsName = this.materialsList[j].catalogName;
}
}
}
const obj = {
currentName: this.currentName,
materialsName: this.form.materialsName,
party: this.form.party,
imageArr: [...this.imageArr],
};
this.new_imageArr.push(obj);
// console.log(this.new_imageArr);
// 保存要传递的数据
this.imageArr.forEach((item) => {
this.fileAccidentList.push({
accidentArchiveId: this.$route.query.accidentArchiveId,
fileName: item.fileName,
fileResourceId: item.fileResourceId,
fileSuffix: item.fileSuffix,
fileUrl: item.fileUrl,
groupName: item.groupName,
serverUrl: item.serverUrl,
archiveCatalogId: this.form.materials,
archiveType: this.currentWork,
participantsName: this.form.party,
});
});
// console.log(this.fileAccidentList);
this.imageArr = [];
this.innerVisible = false;
this.isChecked = false;
this.resetForm("form");
this.currentWork = "0";
},
// 取消 关闭内层弹出层
innerVisibleOff() {
this.innerVisible = false;
this.resetForm("form");
this.currentWork = "0";
},
},
};
</script>
<style lang="less" scoped>
.big_box {
display: flex;
justify-content: space-between;
height: 700px;
.small_box {
width: 49%;
.check_box {
display: flex;
justify-content: space-between;
.button_box {
display: flex;
}
.input_box {
display: flex;
justify-content: center;
align-items: center;
input {
cursor: pointer;
}
}
}
}
}
.img_box {
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 0px;
height: 600px;
overflow-y: auto;
}
.right_box {
height: 600px;
overflow-y: auto;
padding-top: 10px;
color: #000000;
div {
div {
font-size: 17px;
}
span {
font-size: 15px;
}
ul {
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 0px;
}
}
}
.cloudy {
width: 31%;
margin: 0 1.15%;
list-style-type: none;
position: relative;
input {
position: absolute;
cursor: pointer;
}
img {
width: 100%;
height: 220px;
object-fit: cover;
}
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
color: #000000;
font-weight: 500;
font-size: 15px !important;
}
}
</style>