<template>
|
<basic-container class="hasButTwo">
|
<avue-crud
|
:option="option"
|
:table-loading="loading"
|
:data="data"
|
: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="type" slot-scope="{ row }">
|
<el-tag :class="row.type != 2 ? 'red' : ''">{{
|
row.type != 2 ? "未上传" : "已上传"
|
}}</el-tag>
|
</template>
|
<template slot="downtemplate" slot-scope="{ row }">
|
<el-tag
|
@click="downTemplates(row.template)"
|
class="hand"
|
:class="row.template == '' ? 'red' : ''"
|
>{{ row.template == "" ? "无模板" : "下载模板" }}</el-tag
|
>
|
</template>
|
<template slot-scope="{ type, size, row }" slot="menu">
|
<el-button
|
icon="el-icon-upload2"
|
:size="size"
|
:type="type"
|
@click="upData(row)"
|
>上传</el-button
|
>
|
<el-button
|
icon="el-icon-download"
|
:size="size"
|
:type="type"
|
:disabled="row.type != 2"
|
@click="dowmData(row)"
|
>下载</el-button
|
>
|
</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>
|
</basic-container>
|
</template>
|
|
<script>
|
import { getUseInfor, getTemplate, addUseInfor } from "@/api/resource/attach";
|
import { mapGetters } from "vuex";
|
|
export default {
|
props: ["type", "opens", "enclosure", "ptype"],
|
data() {
|
var type = this.type;
|
var deptid = this.$route.query.deptId;
|
var cardid = this.$store.getters.userInfo.Id;
|
return {
|
form: {},
|
query: {},
|
putParam: "",
|
loading: false,
|
page: {
|
pageSize: 10,
|
currentPage: 1,
|
total: 0
|
},
|
attachBox: false,
|
selectionList: [],
|
option: {
|
height: 600,
|
|
calcHeight: 30,
|
tip: false,
|
align: "center",
|
searchShow: false,
|
columnBtn: false,
|
menuWidth: 180,
|
searchMenuSpan: 6,
|
border: false,
|
index: true,
|
delBtn: false,
|
stripe: true,
|
viewBtn: true,
|
selection: true,
|
dialogClickModal: false,
|
column: [
|
{
|
label: "附件名称",
|
prop: "originalname",
|
overHidden: true
|
},
|
{
|
label: "附件状态",
|
prop: "type",
|
width: 110,
|
slot: true,
|
overHidden: true
|
},
|
{
|
label: "示范模板",
|
prop: "downtemplate",
|
width: 110,
|
// overHidden: true,
|
slot: true
|
}
|
]
|
},
|
data: [],
|
attachForm: {},
|
attachOption: {
|
submitBtn: false,
|
emptyBtn: false,
|
column: [
|
{
|
label: "拖拽上传",
|
prop: "imgUrl5",
|
type: "upload",
|
span: 12,
|
drag: true,
|
propsHttp: {
|
res: "data"
|
},
|
tip:
|
"支持上传jpg/png/doc/docx/xls/xlsx文件，图片不超过500Kb，文档不超过3Mb",
|
action:
|
// "/api/blade-resource/oss/endpoint/put-file-attach",
|
"/api/blade-resource/oss/endpoint/put-file-attach?deptid=&type=" +
|
type +
|
"&cardid=" +
|
cardid
|
}
|
]
|
},
|
imgSee: false,
|
imgUrl: "",
|
|
saveIds: [],
|
saveLinks: [],
|
onceIds: "",
|
onceLinks: ""
|
};
|
},
|
computed: {
|
...mapGetters(["permission", "canDoIt"]),
|
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(",");
|
}
|
},
|
mounted() {
|
// console.log(this.enclosure, "enclosure");
|
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);
|
}
|
},
|
methods: {
|
upData(val) {
|
// console.log(val);
|
this.onceIds = +val.id + "";
|
this.attachBox = true;
|
},
|
dowmData(val) {
|
console.log(val.down);
|
window.open(val.down);
|
//
|
},
|
downTemplates(val) {
|
// console.log(val);
|
if (val == "") {
|
return;
|
}
|
window.open(val);
|
// window.open(`/api/examScore/export-template`);
|
},
|
handleUpload() {
|
this.attachBox = true;
|
},
|
uploadAfter(res, done, loading, column) {
|
// window.console.log(res.link);
|
var test = /^http:\/\/.*/;
|
if (!test.test(res.link)) {
|
this.$message.error("上传失败");
|
return;
|
}
|
this.onceLinks = res.link;
|
// console.log(res);
|
// return;
|
var haveit = null;
|
for (let k in this.saveIds) {
|
if (this.saveIds[k] == this.onceIds) {
|
// this.saveLinks[k] = this.onceLinks;
|
haveit = k;
|
break;
|
}
|
}
|
if (haveit != null) {
|
this.saveLinks[haveit] = this.onceLinks;
|
} else {
|
this.saveIds.push(this.onceIds);
|
this.saveLinks.push(this.onceLinks);
|
}
|
// console.log(this.saveIds);
|
// console.log(this.saveLinks);
|
|
// console.log(this.$store.getters.userInfo.Id);
|
var params = {
|
userid: this.$store.getters.userInfo.Id,
|
ptype: this.ptype,
|
templateid: this.saveIds.join(","),
|
links: this.saveLinks.join(",")
|
};
|
// console.log(params);
|
// loading();
|
// return;
|
addUseInfor(params).then(res => {
|
// console.log(res);
|
this.$message({
|
type: "success",
|
message: "操作成功!"
|
});
|
});
|
this.refreshChange();
|
this.attachBox = false;
|
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 = {}) {
|
var that = this;
|
var data = [];
|
// console.log(this.$store.getters.userInfo.Id);
|
// this.data = this.enclosure;
|
params["ptype"] = this.ptype;
|
getTemplate(params, 1, 50).then(res => {
|
data = res.data.data.records;
|
// console.log(data, "::template");
|
params["userid"] = this.$store.getters.userInfo.Id;
|
getUseInfor(params).then(res => {
|
var userInfo = res.data.data.records;
|
// console.log(userInfo, "::userInfo");
|
if (userInfo.length == 0) {
|
for (var k in data) {
|
data[k]["type"] = 1;
|
}
|
that.data = data;
|
this.saveIds = [];
|
this.saveLinks = [];
|
} else {
|
this.saveIds = userInfo[0].templateid.split(",");
|
this.saveLinks = userInfo[0].links.split(",");
|
for (let k in data) {
|
for (let i in this.saveIds) {
|
if (+data[k].id == this.saveIds[i]) {
|
data[k]["type"] = 2;
|
data[k]["down"] = this.saveLinks[i];
|
}
|
}
|
// data[k]["type"] = 1;
|
}
|
that.data = data;
|
}
|
});
|
});
|
},
|
|
seeImages(row) {
|
this.imgUrl = "";
|
this.imgUrl = "url(" + row.link + ") center center / contain no-repeat";
|
// console.log(this.imgUrl);
|
// this.imgUrl = row.link;
|
|
this.imgSee = true;
|
},
|
|
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 lang="scss" scoped>
|
.red {
|
border: 1px solid rgba($color: #ff5656, $alpha: 0.3) !important;
|
background-color: rgba($color: #ff5151, $alpha: 0.1) !important;
|
color: rgba($color: #ff5151, $alpha: 1) !important;
|
}
|
.hand:hover {
|
cursor: pointer;
|
}
|
// .longbut {
|
// // background-color: red !important;
|
// width: 125px;
|
// }
|
// .shortbut {
|
// // background-color: green !important;
|
// width: 80px;
|
// }
|
</style>
|
