父组件<template>
<div>
<el-row :gutter="10" type="flex" justify="space-around">
<el-col :xs="24" :sm="12" :md="8" :lg="8">
<el-badge :value="attachmentCount" class="item">
<el-button type="primary" plain icon="el-icon-s-order" size="mini" @click="openSysAttachmentDialog">
附件
</el-button>
</el-badge>
<!-- 传readonly优先使用readonly，如果没传，有流程实例id的时候不可编辑 -->
<CcedButton :billType="billType" :businessId="businessId"
:readonly="util.isEmpty(readonly) ? (!util.isEmpty(flowInsId)) : (readonly=='1')">
</CcedButton>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="8" class="
formTitle">{{ title }}</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="8" style="text-align: right;padding-right: 20px;">
<el-button type="primary" v-if="isshow && !util.isEmpty(taskId)" plain icon="el-icon-check" size="mini"
@click="showSiginDialog()">在线签字
</el-button>
<el-button type="primary"
v-if="util.isEmpty(readonly) ? (util.isEmpty(taskId) && util.isEmpty(flowInsId)) : !(readonly=='1') "
plain icon="el-icon-check" size="mini" @click="submit
Form('0')">保存
</el-button>
<el-button type="primary" v-if="!util.isEmpty(taskId)" plain icon="el-icon-check" size="mini"
@click="commitTask()">同意
</el-button>
<el-button type="warning" v-if="!util.isEmpty(taskId)" plain icon="el-icon-close" size="mini"
@click="reject()">驳回
</el-button>
<el-button type="primary" v-if="!util.isEmpty(flowInsId)" plain icon="el-icon-check" size="mini"
@click="showFlowInfoDialog()">流程信息
</el-button>
<el-button v-if="
formStatus=='0' ||
formStatus=='3'&&readonlyFlag" plain icon="el-icon-edit" type="primary" size="mini"
@click="handleUpdate">
编辑
</el-button>
<el-button v-if="(
formStatus=='0' ||
formStatus=='3')&&readonlyFlag" plain icon="el-icon-check" size="mini"
type="primary" @click="doSubmitFlow">
提交审批
</el-button>
</el-col>
</el-row>
<!-- 流程信息 -->
<FlowInfo :businessId="businessId+''" :billType="billType" v-if="showFlowInfo" :showStatus="showFlowInfo"
@closeFlowInfoDialog="closeFlowInfoDialog"></FlowInfo>
<!-- 办理任务弹窗 -->
<ConfirmCommitTask :taskId="taskId" :infoadd="infoadd" :insId="flowInsId" @closeCommitDialog="closeCommitDialog"
:commitType="commitType" :showStatus="showCommitDialog"></ConfirmCommitTask>
<!-- 单据附件弹窗 -->
<
FormAttachment :businessId="businessId" :billType="billType" v-if="showSysAttachmentDialog"
:showStatus="showSysAttachmentDialog"
:readonly="util.isEmpty(readonly) ? (!(util.isEmpty(taskId) && util.isEmpty(flowInsId))) : (readonly=='1')"
@closeSysAttachmentDialog="closeSysAttachmentDialog"></
FormAttachment>
<!-- 在线签名弹窗 -->
<SignaturePad ref="SignaturePad" :showSign="showSignInfo" :billType="billType" :insId="flowInsId"
:taskId="taskId" @closeSignDialog="closeSignDialog" @addInfoSubmit="addInfoSubmit"></SignaturePad>
</div>
</template>
<script>
import FlowInfo from "@/views/workflow/flow/flowInfo";
import SignaturePad from "@/views/workflow/flow/signaturePad";
import
FormAttachment from "@/views/common/sysAttachment/
formAttachment"
import ConfirmCommitTask from "@/views/workflow/ConfirmCommitTask";
import CcedButton from "@/views/workflow/common/ccedButton";
import {countSysAttachement} from "@/api/common/sysAttachment"
import {listByUser, getUserProfile} from '@/api/system/user'
export default {
name: "
formTopBar",
components: {FlowInfo,
FormAttachment, ConfirmCommitTask, CcedButton, SignaturePad},
props: {
title: "",
taskId: "",
flowInsId: "",
formStatus: '',
billType: "",
businessId: "",
readonly: "",
readonlyFlag:false
},
data() {
return {
commitType: "",
showCommitDialog: false,
showSysAttachmentDialog: false,
showFlowInfo: false,
openBusAttachmentDialog: false,
attachmentCount: 0,
isshow: true,
showSignInfo: false,
userInfo: {},
infoadd: {},
}
},
created() {
console.log("顶部按钮条参数：",
"标题：" + this.title + "。",
"taskId：" + this.taskId + "。",
"flowInsId：" + this.flowInsId + "。",
"billType：" + this.billType + "。",
"businessId：" + this.businessId + "。",
"readonly：" + this.readonly + "。");
console.log("判读readonly：", this.util.isEmpty(this.readonly) ? (!this.util.isEmpty(this.flowInsId)) : (this.readonly == '1'))
console.log("判断readonly：", !this.util.isEmpty(this.flowInsId));
console.log("判断编辑是否
展示", this.util.isEmpty(this.
formStatus))
console.log("头部信息",this.util.isEmpty(this.readonly))
this.getUserProfile()
// if(this.billType=="leave_apply" || this.billType=="leave_apply_zczz"|| this.billType=="leave_apply_zsscdw"|| this.billType=="leave_apply_fszs"
// || this.billType=="leave_apply_bmzfz"|| this.billType=="reception"|| this.billType=="reception_settlement" || this.billType=="dispatch_car"){
// this.isshow=true;
// }else {
// this.isshow=false;
// }
},
updated() {
this.getSysAttachementCount();
},
watch: {
billType: function (newVal, oldVal) {
if (newVal != oldVal) {
console.log("顶部按钮条：" + this.billType + "," + this.taskId + "," + this.flowInsId + "," + this.businessId);
this.getSysAttachementCount();
// this.$forceUpdate();
}
}
},
methods: {
addInfoSubmit(info) {
this.infoadd = info
},
// 用户个人信息
getUserProfile() {
getUserProfile().then(res => {
this.userInfo = res.data
})
},
closeSignDialog() {
this.showSignInfo = false;
},
showSiginDialog() {
this.showSignInfo = true;
listByUser(this.userInfo.userId).then(res => {
this.$refs.SignaturePad.setData(res.data)
})
},
// 计算附件数量
getSysAttachementCount() {
let queryParams = {
billType: this.billType,
businessId: this.businessId
}
console.log("查询附件数量=" + JSON.strin
gify(queryParams));
countSysAttachement(queryParams).then(res => {
if (200 == res.code) {
this.attachmentCount = res.data;
}
})
},
//根据实例获取流程图片--打开流程信息
showFlowInfoDialog() {
this.showFlowInfo = true;
},
//关闭流程信息窗口
closeFlowInfoDialog() {
this.showFlowInfo = false;
},
//
提交审批
commitTask() {
this.commitType = "agree";
this.showCommitDialog = true;
},
doSubmitFlow() {
this.$emit("doSubmitFlow");
},
handleUpdate() {
this.$emit("handleUpdate");
},
//驳回申请
reject() {
this.commitType = "reject";
this.showCommitDialog = true;
},
//关闭完成任务弹窗
closeCommitDialog() {
this.showCommitDialog = false;
},
//打开附件窗口
openSysAttachmentDialog() {
if (!this.businessId) {
this.$modal.msgError("请先【保存】单据！再进行附件上传！");
return;
}
this.showSysAttachmentDialog = true;
},
//关闭附件窗口
closeSysAttachmentDialog() {
this.showSysAttachmentDialog = false;
},
//保存
submit
Form() {
this.$emit("submit
Form");
}
}
}
</script>
子组件<template>
<el-dialog :visible.sync="showStatus" title="附件" width="1000px" append-to-body :before-close="beforeClose" class="commitTask" @update-attachment-count="$emit('update-attachment-count', $event)">
<el-row :gutter="10" class="mb8" v-if="!readonly">
<el-col :span="1.5">
<el-upload :action="uploadFileUrl"
:before-upload="handleBeforeUpload"
:on-error="handleUploadError"
:on-success="handleUploadSuccess"
:show-file-list="false"
:headers="headers"
class="upload-file-uploader"
ref="upload"
:data="
form"
>
<!-- 上传按钮 -->
<el-button size="mini" type="primary">上传文件</el-button>
</el-upload>
<div>
请上传[bmp,
gif, jpg, jpeg, png, doc, docx, xls, xlsx, ppt, pptx, html, htm, txt, rar, zip, gz, bz2, mp4, avi, rmvb, pdf]格式的文件
</div>
</el-col>
</el-row>
<el-table :border="Global.tableShowBorder" v-loading="loading" :data="sysAttachmentList">
<el-table-column label="文件" align="center" prop="url" width="100">
<template slot-scope="scope">
<el-image style="width: 50px; height: 50px" :src="getFileImage(scope.row.url)" fit="fill"></el-image>
</template>
</el-table-column>
<el-table-column label="文件名" align="center" prop="url" :show-overflow-tooltip="true">
<template slot-scope="scope">
{{getFileName(scope.row.url)}}
</template>
</el-table-column>
<el-table-column label="文件大小" align="center" prop="size" width="100">
<template slot-scope="scope">
{{(scope.row.size / 1024 / 1024).toFixed(2)}}MB
</template>
</el-table-column>
<el-table-column label="扩展名" align="center" prop="ext" width="80"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-download" @click="downloadFile(scope.row)">下载</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-if="!readonly">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-dialog>
</template>
<script>
import { listSysAttachment, getSysAttachment, delSysAttachment,
formAttachmentlist } from "@/api/common/sysAttachment";
import {getToken} from "@/utils/auth";
export default {
name: "SysAttachment",
props: {
businessId:"",
billType:"",
showStatus:false,
readonly:false
},
data() {
return {
//
遮罩层
loading: true,
// 附件中心表格数据
sysAttachmentList: [],
number: 0,
uploadList: [],
baseUrl: process.env.VUE_APP_BASE_API,
uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/sysAttachment/upload", // 通用上传文件
headers: {
Authorization: "Bearer " + getToken(),
},
fileSize: 100,
queryParams:{
orderByColumn:"createTime",
isAsc:"descending",
businessId: this.businessId,
billType: this.billType
},
form:{
businessId: this.businessId,
billType: this.billType
}
};
},
created() {
this.getList();
console.log("附件列表："+this.billType);
},
methods: {
/** 查询附件中心列表 */
getList() {
this.loading = true;
formAttachmentlist(this.queryParams).then(response => {
this.sysAttachmentList = response.data;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除附件？').then(function() {
return delSysAttachment(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
beforeClose(){
this.$emit('closeSysAttachmentDialog');
},
downloadFile(row){
window.open(this.baseUrl + row.url);
},
// 获取文件缩略图
getFileImage(name){
let ext = this.getFileExt(name);
console.log("文件扩展名为："+ext);
if(ext){
let lowExt = ext.toLowerCase();
if(lowExt=="doc"||lowExt=="docx"){
return require('@/assets/images/am/filext/DOC.png');
}else if(lowExt=="pdf"){
return require('@/assets/images/am/filext/PDF.png');
}else if(lowExt=="ppt"){
return require('@/assets/images/am/filext/PPT.png');
}else if(lowExt=="psd"){
return require('@/assets/images/am/filext/PSD.png');
}else if(lowExt=="txt"){
return require('@/assets/images/am/filext/TXT.png');
}else if(lowExt=="vsd"){
return require('@/assets/images/am/filext/VSD.png');
}else if(lowExt=="xmap"){
return require('@/assets/images/am/filext/XMAP.png');
}else if(lowExt=="ys"){
return require('@/assets/images/am/filext/YS.png');
}else if(lowExt=="ai"){
return require('@/assets/images/am/filext/AI.png');
}else if(lowExt=="mp3"||lowExt=="mp4"||lowExt=="wmv"||lowExt=="rmvb"||lowExt=="mkv"||lowExt=="avi"){
return require('@/assets/images/am/filext/VIDEO.png');
}else if(lowExt=="xls"||lowExt=="xlsx"){
return require('@/assets/images/am/filext/ELX.png');
}else if(lowExt=="rar"||lowExt=="zip"){
return require('@/assets/images/am/filext/RAR.png');
}else{
return require('@/assets/images/am/filext/FILE.png');
}
}
},
// 上传前校检格式和大小
handleBeforeUpload(file) {
// 校检文件大小
if (this.fileSize) {
const isLt = file.size / 1024 / 1024 < this.fileSize;
if (!isLt) {
this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
return false;
}
}
this.$modal.loading("正在上传文件，请稍候...");
this.number++;
return true;
},
// 上传失败
handleUploadError(err) {
this.$modal.msgError("上传图片失败，请重试");
this.$modal.closeLoading()
},
// 上传成功回调
handleUploadSuccess(res) {
if (res.code == 200) {
this.$message.success("上传成功");
} else if (res.code == 500) {
this.$message.error(res.msg);
}
this.getList();
this.$modal.closeLoading();
},
// 获取文件名称
getFileName(name) {
if (name.lastIndexOf("/") > -1) {
return name.slice(name.lastIndexOf("/") + 1);
} else {
return "";
}
},
// 获取扩展名
getFileExt(name){
let n = this.getFileName(name);
let ar = n.split(".");
return ar[ar.length-1];
},
// 对象转成指定字符串分隔
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) : '';
}
}
};
</script>
上传附件后红色角标数量不变具体怎么修改
本文探讨了在Internet Explorer浏览器中加载动态GIF文件遇到的问题，尤其是在表单提交过程中。文章详细介绍了如何通过预加载图片并调整其显示方式来解决这一难题。
扫一扫
2399
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
