<!-- 附件上传组件 -->
|
<template>
|
<div>
|
<el-form
|
:inline="true"
|
:info="infoid"
|
:donorno="donorno"
|
:flowname="flowname"
|
:annexno="annexno"
|
ref="annexUpload"
|
>
|
<el-row style="margin-bottom: 10px">
|
<el-col :span="4">
|
<el-button type="primary" size="small" @click="showUploadDialog"
|
>附件上传</el-button
|
>
|
</el-col>
|
<!-- <el-col :span="4">
|
<el-button type="primary" size="small" @click="showAnnexTableDialog">查看已上传附件</el-button>
|
</el-col> -->
|
</el-row>
|
<el-row>
|
<el-table v-loading="loading" :data="donateannexList" border>
|
<el-table-column fixed label="序号" min-width="20%" align="center">
|
<template slot-scope="scope">
|
<span
|
>{{
|
(queryParams.pageNum - 1) * queryParams.pageSize +
|
(scope.$index + 1)
|
}}
|
</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="附件类别" align="center" prop="annexno">
|
<template slot-scope="scope">
|
<dict-tag
|
:options="dict.type.sys_attachment_category"
|
:value="scope.row.annexno"
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column label="附件名称" align="center" prop="annexname" />
|
<el-table-column
|
label="上传时间"
|
align="center"
|
prop="createTime"
|
width="160"
|
>
|
<template slot-scope="scope">
|
<span>{{
|
parseTime(scope.row.createTime, "{y}-{m}-{d} {hh}:{mm}")
|
}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="操作"
|
align="center"
|
class-name="small-padding fixed-width"
|
>
|
<template slot-scope="scope">
|
<!-- <el-button
|
size="mini"
|
type="text"
|
icon="el-icon-delete"
|
@click="handleDownload(scope.row)"
|
>下载</el-button> -->
|
<el-link
|
:href="`${baseUrl}${scope.row.annexurl}`"
|
:underline="false"
|
type="primary"
|
target="_blank"
|
>
|
<span class="el-icon-document">下载</span>
|
</el-link>
|
<el-button
|
type="text"
|
icon="el-icon-delete"
|
@click="handleDelete(scope.row)"
|
v-hasPermi="['project:donateannex:remove']"
|
>删除</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination
|
v-show="total > 0"
|
:total="total"
|
:page.sync="queryParams.pageNum"
|
:limit.sync="queryParams.pageSize"
|
@pagination="getAnnexList"
|
/>
|
</el-row>
|
</el-form>
|
|
<!-- 添加或修改捐献附件对话框 -->
|
<el-dialog :visible.sync="isShowUploadDialog" width="500px" append-to-body>
|
<el-form ref="form" :model="annexform" :rules="rules" label-width="80px">
|
<el-form-item label="流程名称" prop="flowname">
|
<el-input
|
v-model="annexform.flowname"
|
placeholder="请输入流程名称"
|
disabled
|
/>
|
</el-form-item>
|
<el-form-item label="附件类别" prop="annexno">
|
<el-select v-model="annexform.annexno" placeholder="请选择附件类别">
|
<el-option
|
v-for="dict in dict.type.sys_attachment_category"
|
:key="dict.value"
|
:label="dict.label"
|
:value="dict.value"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="附件名称" prop="annexname">
|
<el-input
|
v-model="annexform.annexname"
|
placeholder="请输入附件名称"
|
/>
|
</el-form-item>
|
<el-form-item label="上传时间" prop="uploadtime">
|
<el-date-picker
|
clearable
|
size="small"
|
v-model="uploadtime"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
placeholder="请选择上传时间"
|
>
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="地区" prop="addresss" v-show="false">
|
<div>
|
<li_area_select
|
ref="addSelect"
|
v-model="address"
|
></li_area_select>
|
<!-- <div>{{defultAddress}}</div> -->
|
</div>
|
</el-form-item>
|
<el-form-item label="来源" prop="source">
|
<el-input
|
v-model="annexform.source"
|
placeholder="请输入附件来源"
|
/>
|
</el-form-item>
|
<el-form-item label="上传附件">
|
<el-upload
|
size="mini"
|
class="upload-demo"
|
:action="uploadFileUrl"
|
:file-list="fileList"
|
multiple
|
:limit="1"
|
:headers="headers"
|
:on-success="
|
(response, file, fileList) =>
|
uploadSccess(response, file, fileList)
|
"
|
:on-error="handleUploadError"
|
:on-exceed="handleExceed"
|
:on-remove="(file, fileList) => removeFile(file, fileList)"
|
>
|
<el-button size="small" type="primary">上传</el-button>
|
</el-upload>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="submit">确 定</el-button>
|
<el-button @click="cancel">取 消</el-button>
|
</div>
|
</el-dialog>
|
|
<!-- 已上传附件列表 -->
|
<el-dialog
|
:visible.sync="isShowAnnexTableDialog"
|
width="900px"
|
append-to-body
|
>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="cancel">取 消</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
//例如：import 《组件名称》 from '《组件路径》';
|
import { getToken } from "@/utils/auth";
|
import {
|
listDonateannex,
|
delDonateannex,
|
addDonateannex,
|
} from "@/api/project/donateannex";
|
import Li_area_select from "@/components/Address";
|
import {
|
getDonatebaseinfo
|
} from "@/api/project/donatebaseinfo";
|
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
name: "annexUpload",
|
props: {
|
infoid: {
|
default: 0,
|
},
|
donorno: {
|
type: String,
|
default: "",
|
},
|
flowname: {
|
type: String,
|
default: "",
|
},
|
annexno: {
|
type: String,
|
default: "",
|
},
|
},
|
dicts: ["sys_attachment_category"],
|
components: {
|
Li_area_select
|
},
|
data() {
|
//这里存放数据
|
return {
|
total: 0,
|
|
// 查询参数
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
infoid: null,
|
//donorno:this.donorno
|
},
|
|
//loading
|
loading: false,
|
annexform: {},
|
|
// 表单校验
|
rules: {
|
annexname: [
|
{ required: true, message: "附件名称不能为空", trigger: "blur" },
|
],
|
annexno: [
|
{ required: true, message: "附件类别不能为空", trigger: "change" },
|
]
|
},
|
address: {
|
sheng: "浙江省",
|
shi: "",
|
qu: "",
|
},
|
uploadtime:"",
|
baseUrl: process.env.VUE_APP_BASE_API,
|
// 上传的图片服务器地址
|
uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload",
|
//上传附件请求头
|
headers: {
|
Authorization: "Bearer " + getToken(),
|
},
|
//是否显示附件上传弹窗
|
isShowUploadDialog: false,
|
//文件列表
|
fileList: [],
|
//是否显示已上传附件列表
|
isShowAnnexTableDialog: false,
|
//所有已捐献附件列表
|
donateannexList: [],
|
};
|
},
|
//监听属性 类似于data概念
|
computed: {},
|
//监控data中的数据变化
|
watch: {},
|
//方法集合
|
methods: {
|
//显示所有的上传文件
|
getAnnexList() {
|
if (this.infoid != null || this.infoid != undefined) {
|
this.queryParams.infoid = this.infoid.toString();
|
this.loading = true;
|
listDonateannex(this.queryParams).then((response) => {
|
this.loading = false;
|
this.donateannexList = response.rows;
|
this.total = response.total;
|
this.loading = false;
|
});
|
getDonatebaseinfo(this.infoid).then((response) => {
|
this.uploadtime = response.data.createTime;
|
this.address.sheng = response.data.registerprovincename;
|
this.address.shi = response.data.registercityname;
|
this.address.qu = response.data.registertownname;
|
});
|
|
} else {
|
this.queryParams.infoid = "";
|
}
|
},
|
//显示已上传附件列表
|
showAnnexTableDialog() {
|
this.isShowAnnexTableDialog = true;
|
this.getAnnexList();
|
},
|
//文件上传成功回调
|
uploadSccess(response, file, fileList) {
|
//获取附件信息位置
|
if (response.code == 200) {
|
this.$modal.msgSuccess(response.msg);
|
this.fileList.push({ name: response.fileName, url: response.fileName });
|
} else {
|
console.log(response.msg);;
|
}
|
console.log("上传文件后：" + JSON.stringify(this.fileList));
|
},
|
// 删除文件
|
removeFile(file, fileList) {
|
this.fileList = [];
|
for (let i = 0; i < fileList.length; i++) {
|
this.fileList({ name: fileList[i].name, url: fileList[i].url });
|
}
|
console.log("移除文件后：" + JSON.stringify(this.fileList));
|
//this.fileList.splice(index, 1);
|
//this.$emit("input", this.listToString(this.fileList));
|
},
|
// 文件个数超出
|
handleExceed() {
|
this.$message.error(`上传文件数量已超过!`);
|
},
|
// 上传失败
|
handleUploadError(err) {
|
this.$message.error("上传失败, 请重试" + err);
|
},
|
// 表单重置
|
reset() {
|
this.annexform = {
|
infoid: this.infoid,
|
donorno: this.donorno,
|
annexname: null,
|
annexno: this.annexno,
|
expirestime: null,
|
isrequired: null,
|
flowname: this.flowname,
|
donationcategory: null,
|
annexurl: null,
|
uploadtime:'',
|
province:'',
|
provincename:'',
|
city:'',
|
cityname:'',
|
town:'',
|
townname:'',
|
source:''
|
};
|
this.resetForm("form");
|
},
|
/** 删除按钮操作 */
|
handleDelete(row) {
|
this.loading = true;
|
const ids = row.id || this.ids;
|
this.$modal
|
.confirm('是否确认删除捐献附件编号为"' + ids + '"的数据项？')
|
.then(function () {
|
return delDonateannex(ids);
|
})
|
.then(() => {
|
this.loading = false;
|
this.getAnnexList();
|
this.$modal.msgSuccess("删除成功");
|
})
|
.catch(() => {});
|
},
|
//下载附件
|
handleDownload(row) {},
|
//显示附件上传弹窗
|
showUploadDialog() {
|
//console.log("infoid:" + this.infoid + " donorono:" + this.donorno + " foolowName"+ this.flowname);
|
if (
|
this.infoid == "" ||
|
this.infoid == null ||
|
this.infoid == undefined
|
) {
|
this.$modal.msgWarning("捐献案例未保存，请先保存再上传附件");
|
return;
|
}
|
this.reset();
|
this.isShowUploadDialog = true;
|
},
|
submit() {
|
if (this.fileList.length == 0) {
|
this.$modal.msgWarning("未选择文件，无需保存");
|
return;
|
}
|
if(this.uploadtime == null || this.uploadtime == undefined || this.uploadtime ==""){
|
this.$modal.msgWarning("上传时间不可为空");
|
return;
|
}
|
this.$refs["form"].validate((valid) => {
|
if (valid) {
|
|
this.annexform.province = this.$refs.addSelect.getSheng();
|
|
this.annexform.provincename = this.address.sheng;
|
|
this.annexform.city = this.$refs.addSelect.getShi();
|
this.annexform.cityname = this.address.shi;
|
|
this.annexform.town = this.$refs.addSelect.getQu();
|
this.annexform.townname = this.address.qu;
|
|
this.annexform.uploadtime = this.uploadtime;
|
|
if (this.annexform.id != null) {
|
updateDonateannex(this.annexform).then((response) => {
|
this.$modal.msgSuccess("修改成功");
|
this.open = false;
|
this.getList();
|
});
|
} else {
|
//循环文件列表，上传保存附件表
|
for (let i = 0; i < this.fileList.length; i++) {
|
this.annexform.annexurl = this.fileList[i].url;
|
addDonateannex(this.annexform).then((response) => {
|
this.$modal.msgSuccess("新增成功");
|
if (i == this.fileList.length - 1) {
|
this.isShowUploadDialog = false;
|
this.fileList = [];
|
this.getAnnexList();
|
return;
|
}
|
});
|
}
|
}
|
}
|
});
|
},
|
// 对象转成指定字符串分隔
|
listToString(list, separator) {
|
let strs = "";
|
separator = separator || ",";
|
for (let i in list) {
|
strs += list[i].url + separator;
|
}
|
return strs != "" ? strs.substr(0, strs.length - 1) : "";
|
},
|
cancel() {
|
this.isShowUploadDialog = false;
|
this.isShowAnnexTableDialog = false;
|
},
|
},
|
//生命周期 - 创建完成（可以访问当前this实例）
|
created() {
|
this.reset();
|
// this.getAnnexList();
|
},
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
mounted() {},
|
beforeCreate() {}, //生命周期 - 创建之前
|
beforeMount() {}, //生命周期 - 挂载之前
|
beforeUpdate() {}, //生命周期 - 更新之前
|
updated() {}, //生命周期 - 更新之后
|
beforeDestroy() {}, //生命周期 - 销毁之前
|
destroyed() {}, //生命周期 - 销毁完成
|
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
};
|
</script>
|
<style lang='scss' scoped>
|
//@import url(); 引入公共css类
|
</style>
|
