|
|
|
<template>
|
|
|
|
<div class="app-container">
|
|
|
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
|
<el-form-item label="单位编号" prop="orgcode">
|
|
|
|
<!-- <el-form-item label="单位编号" prop="orgcode">
|
|
|
|
<el-input
|
|
|
|
v-model="queryParams.orgcode"
|
|
|
|
placeholder="请输入单位编号"
|
|
|
|
clearable
|
|
|
|
@keyup.enter.native="handleQuery"
|
|
|
|
/>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item> -->
|
|
|
|
<el-form-item label="证书编号" prop="certificateNo">
|
|
|
|
<el-input
|
|
|
|
v-model="queryParams.certificateNo"
|
|
...
|
...
|
@@ -117,7 +117,12 @@ |
|
|
|
<span>{{ parseTime(scope.row.certificateValidityPeriod, '{y}-{m}-{d}') }}</span>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column label="证书附件" align="center" prop="certificateAttachment" />
|
|
|
|
<el-table-column label="证书附件" align="center" prop="certificateAttachment" >
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
|
|
|
<img src="@/assets/images/PDF.png" @click="openFile(scope.row.certificateAttachment)" width="40px" height="auto" style="cursor: pointer"/>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
|
<template slot-scope="scope">
|
|
|
|
<el-button
|
|
...
|
...
|
@@ -150,7 +155,7 @@ |
|
|
|
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
|
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
|
|
|
<el-form-item label="单位编号" prop="orgcode">
|
|
|
|
<el-input v-model="form.orgcode" placeholder="请输入单位编号" />
|
|
|
|
<el-input v-model="this.orgcode" placeholder="请输入单位编号" :disabled="true"/>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="证书编号" prop="certificateNo">
|
|
|
|
<el-input v-model="form.certificateNo" placeholder="请输入证书编号" />
|
|
...
|
...
|
@@ -161,21 +166,49 @@ |
|
|
|
<el-form-item label="发证时间" prop="issuanceDate">
|
|
|
|
<el-date-picker clearable
|
|
|
|
v-model="form.issuanceDate"
|
|
|
|
type="datetime"
|
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
|
placeholder="请选择发证时间">
|
|
|
|
</el-date-picker>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="证书有效期" prop="certificateValidityPeriod">
|
|
|
|
<el-date-picker clearable
|
|
|
|
v-model="form.certificateValidityPeriod"
|
|
|
|
type="datetime"
|
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
|
placeholder="请选择证书有效期">
|
|
|
|
</el-date-picker>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="证书附件" prop="certificateAttachment">
|
|
|
|
<el-input v-model="form.certificateAttachment" placeholder="请输入证书附件" />
|
|
|
|
<el-upload
|
|
|
|
class="upload-demo"
|
|
|
|
ref="upload"
|
|
|
|
:accept="'application/pdf'"
|
|
|
|
:before-upload="beforeUpload"
|
|
|
|
:action="this.url"
|
|
|
|
:headers="this.headers"
|
|
|
|
:on-preview="handlePreview"
|
|
|
|
:on-remove="handleRemove"
|
|
|
|
:on-change="handleChange"
|
|
|
|
:file-list="this.fileList"
|
|
|
|
:auto-upload="false"
|
|
|
|
:limit="1"
|
|
|
|
:multiple="false"
|
|
|
|
:on-success="handleSuccess"
|
|
|
|
:before-remove="beforeRemove"
|
|
|
|
:on-exceed="handleExceed"
|
|
|
|
name="files"
|
|
|
|
>
|
|
|
|
<el-button slot="trigger" size="small" type="primary"
|
|
|
|
>选取文件</el-button
|
|
|
|
>
|
|
|
|
<el-button
|
|
|
|
style="margin-left: 10px"
|
|
|
|
size="small"
|
|
|
|
type="success"
|
|
|
|
@click="submitUpload"
|
|
|
|
>上传到服务器</el-button
|
|
|
|
>
|
|
|
|
<div slot="tip" class="el-upload__tip">
|
|
|
|
只能上传大小不超过 5MB 的 PDF 文件
|
|
|
|
</div>
|
|
|
|
</el-upload>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
...
|
...
|
@@ -187,12 +220,21 @@ |
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { listOrginfoCertificate, getOrginfoCertificate, delOrginfoCertificate, addOrginfoCertificate, updateOrginfoCertificate } from "@/api/compliancemanagement/orginfoCertificate";
|
|
|
|
|
|
|
|
import { listOrginfoCertificate, getOrginfoCertificate, delOrginfoCertificate, addOrginfoCertificate, updateOrginfoCertificate,selectByOrgnCode } from "@/api/compliancemanagement/orginfoCertificate";
|
|
|
|
import { getToken } from "@/utils/auth";
|
|
|
|
import VuePdf from 'vue-pdf';
|
|
|
|
export default {
|
|
|
|
name: "OrginfoCertificate",
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
// 设置上传的请求头部
|
|
|
|
headers: { Authorization: "Bearer " + getToken() },
|
|
|
|
// 上传的地址
|
|
|
|
url: process.env.VUE_APP_BASE_API + "/common/uploads",
|
|
|
|
// urlhead: "http://joycart.zgftlm.com",
|
|
|
|
urlhead:process.env.VUE_APP_BASE_API,
|
|
|
|
fileList: [],
|
|
|
|
file:[],
|
|
|
|
// 按钮loading
|
|
|
|
buttonLoading: false,
|
|
|
|
// 遮罩层
|
|
...
|
...
|
@@ -213,6 +255,7 @@ export default { |
|
|
|
title: "",
|
|
|
|
// 是否显示弹出层
|
|
|
|
open: false,
|
|
|
|
orgcode:'',
|
|
|
|
// 查询参数
|
|
|
|
queryParams: {
|
|
|
|
pageNum: 1,
|
|
...
|
...
|
@@ -253,12 +296,25 @@ export default { |
|
|
|
};
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
this.getList();
|
|
|
|
// this.getList();
|
|
|
|
this.orgcode=this.$route.query.orgcode
|
|
|
|
this.getorgcode(this.orgcode);
|
|
|
|
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
//根据单位编号查询列表
|
|
|
|
getorgcode(orgcode){
|
|
|
|
console.log(orgcode)
|
|
|
|
selectByOrgnCode(orgcode).then(response =>{
|
|
|
|
console.log(response.data)
|
|
|
|
this.orginfoCertificateList = response.data
|
|
|
|
this.loading = false;
|
|
|
|
})
|
|
|
|
},
|
|
|
|
/** 查询单位证照表列表 */
|
|
|
|
getList() {
|
|
|
|
this.loading = true;
|
|
|
|
this.queryParams.orgcode=this.orgcode
|
|
|
|
listOrginfoCertificate(this.queryParams).then(response => {
|
|
|
|
this.orginfoCertificateList = response.rows;
|
|
|
|
this.total = response.total;
|
|
...
|
...
|
@@ -305,14 +361,18 @@ export default { |
|
|
|
},
|
|
|
|
/** 新增按钮操作 */
|
|
|
|
handleAdd() {
|
|
|
|
|
|
|
|
this.reset();
|
|
|
|
this.form.orgcode=this.orgcode
|
|
|
|
this.open = true;
|
|
|
|
this.title = "添加单位证照表";
|
|
|
|
},
|
|
|
|
/** 修改按钮操作 */
|
|
|
|
handleUpdate(row) {
|
|
|
|
this.loading = true;
|
|
|
|
|
|
|
|
this.reset();
|
|
|
|
this.form.orgcode=this.orgcode
|
|
|
|
const id = row.id || this.ids
|
|
|
|
getOrginfoCertificate(id).then(response => {
|
|
|
|
this.loading = false;
|
|
...
|
...
|
@@ -366,7 +426,70 @@ export default { |
|
|
|
this.download('compliancemanagement/orginfoCertificate/export', {
|
|
|
|
...this.queryParams
|
|
|
|
}, `orginfoCertificate_${new Date().getTime()}.xlsx`)
|
|
|
|
},
|
|
|
|
|
|
|
|
openFile(filePath) {
|
|
|
|
|
|
|
|
this.currentFile = this.urlhead+filePath;
|
|
|
|
console.log(this.currentFile)
|
|
|
|
this.dialogVisible = true;
|
|
|
|
|
|
|
|
},
|
|
|
|
beforeUpload(file) {
|
|
|
|
const isPDF = file.type === 'application/pdf';
|
|
|
|
const isLt5M = file.size / 1024 / 1024 < 5;
|
|
|
|
|
|
|
|
if (!isPDF) {
|
|
|
|
this.$message.error('只能上传 PDF 文件');
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
if (!isLt5M) {
|
|
|
|
this.$message.error('上传文件大小不能超过 5MB');
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
// 如果需要其他处理，可以在这里添加
|
|
|
|
|
|
|
|
return true; // 返回 true 允许上传
|
|
|
|
},
|
|
|
|
handleChange(file, fileList) {
|
|
|
|
this.fileList = fileList;
|
|
|
|
},
|
|
|
|
handleSuccess(response, file, fileList) {
|
|
|
|
// response 是上传成功后的响应数据
|
|
|
|
// 可以从中获取文件地址或文件名
|
|
|
|
// 假设后端返回的数据结构中有一个字段 url 表示文件地址
|
|
|
|
const fileUrl = response.data.fileNames;
|
|
|
|
// 将文件地址或文件名赋值给表单的字段
|
|
|
|
this.form.certificateAttachment =fileUrl;
|
|
|
|
},
|
|
|
|
handleRemove(file, fileList) {
|
|
|
|
this.form.certificateAttachment=''
|
|
|
|
console.log(file, fileList);
|
|
|
|
},
|
|
|
|
handlePreview(file) {
|
|
|
|
console.log(file);
|
|
|
|
},
|
|
|
|
handleExceed(files, fileList) {
|
|
|
|
this.$message.warning(
|
|
|
|
`当前限制上传 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
|
|
|
|
files.length + fileList.length
|
|
|
|
} 个文件`
|
|
|
|
);
|
|
|
|
},
|
|
|
|
beforeRemove(file, fileList) {
|
|
|
|
this.fileList = fileList;
|
|
|
|
if (file && file.status==="success") {
|
|
|
|
return this.$confirm(`确定移除 ${file.name}？`);
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
submitUpload() {
|
|
|
|
// 手动触发上传操作
|
|
|
|
// this.$refs.upload.submit()
|
|
|
|
// 构建 FormData 对象
|
|
|
|
this.$refs.upload.submit()
|
|
|
|
},
|
|
|
|
}
|
|
|
|
};
|
|
|
|
</script> |
...
|
...
|
|
