<template>
|
<basic-container>
|
<div>
|
<slot name="buts"></slot>
|
<avue-crud
|
:option="option"
|
:table-loading="loading"
|
:data="seeData"
|
:page.sync="page"
|
:permission="permissionList"
|
:before-open="beforeOpen"
|
v-model="form"
|
ref="crud"
|
@row-del="rowDel"
|
@search-change="searchChange"
|
@search-reset="searchReset"
|
@selection-change="selectionChange"
|
@current-change="currentChange"
|
@size-change="sizeChange"
|
@refresh-change="refreshChange"
|
@on-load="onLoad"
|
>
|
<template slot-scope="{ row }" slot="links">
|
<el-tag>
|
{{ getType(row.link) }}
|
</el-tag>
|
</template>
|
<template slot="menuLeft">
|
<!-- <el-button type="primary"-->
|
<!-- size="small"-->
|
<!-- plain-->
|
<!-- icon="el-icon-upload2"-->
|
<!-- @click="handleUpload">上 传-->
|
<!-- </el-button>-->
|
<!-- <el-button type="danger"-->
|
<!-- size="small"-->
|
<!-- icon="el-icon-delete"-->
|
<!-- plain-->
|
<!-- @click="handleDelete">删 除-->
|
<!-- </el-button>-->
|
</template>
|
<template slot-scope="scope" slot="menu">
|
<el-button
|
type="text"
|
icon="el-icon-download"
|
size="small"
|
@click="handleDownload(scope.row)"
|
>下载
|
</el-button>
|
<el-button
|
type="text"
|
icon="el-icon-picture-outline-round"
|
size="small"
|
v-show="!fileFormat(scope.row)"
|
@click="seeImages(scope.row)"
|
>预览
|
</el-button>
|
</template>
|
<!-- <template slot-scope="{ row }" slot="attachSize">
|
<el-tag>{{ `${row.attachSize} KB` }}</el-tag>
|
</template> -->
|
</avue-crud>
|
<el-dialog
|
title="附件管理"
|
append-to-body
|
:visible.sync="attachBox"
|
width="555px"
|
>
|
<avue-form
|
ref="form"
|
:option="attachOption"
|
v-model="attachForm"
|
:upload-after="uploadAfter"
|
>
|
</avue-form>
|
</el-dialog>
|
|
<el-dialog
|
title="预览"
|
append-to-body
|
:visible.sync="imgSee"
|
class="see-img-box"
|
>
|
<div class="img" :style="{ background: imgUrl }"></div>
|
</el-dialog>
|
</div>
|
</basic-container>
|
</template>
|
|
<script>
|
import {
|
getUseInfor,
|
getTemplate,
|
getList,
|
getDetail,
|
remove
|
} from "@/api/resource/attachOnce";
|
import { mapGetters } from "vuex";
|
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
|
|
export default {
|
components: { ElImageViewer },
|
data() {
|
return {
|
form: {},
|
query: {},
|
loading: true,
|
page: {
|
pageSize: 10,
|
currentPage: 1,
|
total: 0,
|
...this.$store.state.control.changePageSize
|
},
|
attachBox: false,
|
selectionList: [],
|
option: {
|
height: 620,
|
calcHeight: 30,
|
tip: false,
|
searchShow: true,
|
searchMenuSpan: 6,
|
searchShowBtn: false,
|
headerAlign: "center",
|
border: true,
|
index: true,
|
align: "center",
|
delBtn: false,
|
viewBtn: true,
|
selection: true,
|
dialogClickModal: false,
|
...this.$store.state.control.clearOtherBut,
|
column: [
|
{
|
label: "附件名称",
|
prop: "id",
|
rules: [
|
{
|
required: true,
|
message: "请输入附件地址",
|
trigger: "blur"
|
}
|
]
|
},
|
{
|
label: "附件地址",
|
prop: "link",
|
rules: [
|
{
|
required: true,
|
message: "请输入附件地址",
|
trigger: "blur"
|
}
|
]
|
},
|
{
|
label: "附件格式",
|
prop: "links",
|
width: 120,
|
rules: [
|
{
|
required: true,
|
message: "请输入附件地址",
|
trigger: "blur"
|
}
|
]
|
}
|
]
|
},
|
data: [],
|
imgSee: false,
|
imgUrl: "",
|
ourData: [],
|
seeData: []
|
};
|
},
|
created() {
|
var flag = false,
|
i = 0,
|
ind = null;
|
this.$store.state.tags.tagList.forEach((item, index) => {
|
if (item.label == "附件查阅") {
|
if (flag == false) {
|
ind = index;
|
flag = true;
|
}
|
i++;
|
}
|
});
|
if (i > 1) {
|
this.$store.state.tags.tagList.splice(ind, 1);
|
}
|
// var deptid = this.$route.query.deptid;
|
// var type = this.$route.query.type;
|
// this.attachOption.column[0].action += deptid + "&type=" + type;
|
},
|
computed: {
|
...mapGetters(["permission"]),
|
permissionList() {
|
return {
|
addBtn: false,
|
editBtn: false,
|
viewBtn: false,
|
delBtn: this.vaildData(this.permission.attach_delete, false)
|
};
|
},
|
ids() {
|
let ids = [];
|
this.selectionList.forEach(ele => {
|
ids.push(ele.id);
|
});
|
return ids.join(",");
|
}
|
},
|
methods: {
|
handleUpload() {
|
this.attachBox = true;
|
},
|
uploadAfter(res, done, loading, column) {
|
window.console.log(column);
|
this.attachBox = false;
|
this.refreshChange();
|
done();
|
},
|
handleDownload(row) {
|
window.open(`${row.link}`);
|
},
|
rowDel(row) {
|
this.$confirm("确定将选择数据删除?", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
return remove(row.id);
|
})
|
.then(() => {
|
this.onLoad(this.page);
|
this.$message({
|
type: "success",
|
message: "操作成功!"
|
});
|
});
|
},
|
handleDelete() {
|
if (this.selectionList.length === 0) {
|
this.$message.warning("请选择至少一条数据");
|
return;
|
}
|
this.$confirm("确定将选择数据删除?", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
return remove(this.ids);
|
})
|
.then(() => {
|
this.onLoad(this.page);
|
this.$message({
|
type: "success",
|
message: "操作成功!"
|
});
|
this.$refs.crud.toggleSelection();
|
});
|
},
|
beforeOpen(done, type) {
|
if (["edit", "view"].includes(type)) {
|
getDetail(this.form.id).then(res => {
|
this.form = res.data.data;
|
});
|
}
|
done();
|
},
|
searchReset() {
|
this.query = {};
|
this.onLoad(this.page);
|
},
|
searchChange(params, done) {
|
this.query = params;
|
this.page.currentPage = 1;
|
this.onLoad(this.page, params);
|
done();
|
},
|
selectionChange(list) {
|
this.selectionList = list;
|
},
|
selectionClear() {
|
this.selectionList = [];
|
this.$refs.crud.toggleSelection();
|
},
|
currentChange(currentPage) {
|
this.page.currentPage = currentPage;
|
},
|
sizeChange(pageSize) {
|
this.page.pageSize = pageSize;
|
},
|
refreshChange() {
|
this.onLoad(this.page, this.query);
|
},
|
onLoad(page, params = {}) {
|
this.loading = true;
|
this.data = [];
|
params["ptype"] = this.$route.query.type;
|
getTemplate(params, 1, 50).then(res => {
|
//获取模板
|
const mobel = res.data.data.records;
|
console.log(mobel);
|
params["userid"] = this.$route.query.deptid;
|
getUseInfor(params).then(res => {
|
//处理对应数据
|
const data = res.data.data.records[0];
|
console.log(data);
|
if (data == [] || data == undefined) {
|
this.data = [];
|
this.loading = false;
|
return;
|
}
|
var links = data.links.split(",");
|
var id = data.templateid.split(",");
|
for (let k in links) {
|
this.data.push({
|
link: links[k],
|
id: +id[k]
|
});
|
}
|
console.log(this.data);
|
for (let n in this.data) {
|
//处理模板
|
for (let m in mobel) {
|
if (this.data[n].id == mobel[m].id) {
|
this.data[n].id = mobel[m].originalname;
|
}
|
}
|
}
|
this.ourData = [
|
...this.data
|
// ...this.data,
|
// ...this.data,
|
// ...this.data,
|
// ...this.data,
|
// ...this.data,
|
// ...this.data,
|
// ...this.data,
|
// ...this.data,
|
// ...this.data,
|
// ...this.data,
|
// ...this.data,
|
];
|
this.page.total = this.ourData.length;
|
function doit(data, page) {
|
return data.slice(
|
(+page.currentPage - 1) * +page.pageSize,
|
+page.currentPage * +page.pageSize
|
);
|
}
|
this.seeData = doit(this.ourData, page);
|
this.loading = false;
|
});
|
});
|
// getList(
|
// page.currentPage,
|
// page.pageSize,
|
// Object.assign(params, this.query),
|
// this.$route.query.deptid,
|
// this.$route.query.type
|
// ).then((res) => {
|
// const data = res.data.data;
|
// this.page.total = data.total;
|
// this.data = data.records;
|
// this.loading = false;
|
// this.selectionClear();
|
// });
|
},
|
|
seeImages(row) {
|
this.imgUrl = "";
|
this.imgUrl = "url(" + row.link + ") center center / contain no-repeat";
|
|
this.imgSee = true;
|
},
|
getType(file) {
|
var filename = file;
|
var index1 = filename.lastIndexOf(".");
|
var index2 = filename.length;
|
var type = filename.substring(index1, index2);
|
return type;
|
},
|
fileFormat(row) {
|
var index = row.link.lastIndexOf(".");
|
var ext = row.link.substr(index + 1);
|
|
return (
|
[
|
"png",
|
"jpg",
|
"jpeg",
|
"bmp",
|
"gif",
|
"webp",
|
"psd",
|
"svg",
|
"tiff"
|
].indexOf(ext.toLowerCase()) == -1
|
);
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.img {
|
height: 100%;
|
}
|
</style>
|
