作者 张晓杰

合同起草上传附件

... ... @@ -34,7 +34,7 @@ const permission = {
return new Promise(resolve => {
// 向后端请求路由数据
getRouters().then(res => {
console.log('全部菜单:',res)
// console.log('全部菜单:',res)
const sdata = JSON.parse(JSON.stringify(res.data))
const rdata = JSON.parse(JSON.stringify(res.data))
const sidebarRoutes = filterAsyncRouter(sdata)
... ... @@ -50,26 +50,6 @@ const permission = {
})
})
},
GenerateFirstLevelRoutes({ commit }) {
return new Promise(resolve => {
// 向后端请求路由数据
getFirstLevelRouters().then(res => {
console.log('一级菜单:',res)
// const sdata = JSON.parse(JSON.stringify(res.data))
// const rdata = JSON.parse(JSON.stringify(res.data))
// const sidebarRoutes = filterAsyncRouter(sdata)
// const rewriteRoutes = filterAsyncRouter(rdata, false, true)
// const asyncRoutes = filterDynamicRoutes(dynamicRoutes);
// rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
// router.addRoutes(asyncRoutes);
// commit('SET_ROUTES', rewriteRoutes)
// commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))
// commit('SET_DEFAULT_ROUTES', sidebarRoutes)
// commit('SET_TOPBAR_ROUTES', sidebarRoutes)
// resolve(rewriteRoutes)
})
})
}
}
}
... ...
... ... @@ -25,14 +25,14 @@
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
<!-- <el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:contract:add']"
>新增</el-button>
>新增</el-button> -->
</el-col>
<el-col :span="1.5">
<el-button
... ... @@ -161,31 +161,7 @@
<el-input v-model="form.subjectInformation" placeholder="请输入标的物信息" />
</el-form-item>
<el-form-item label="附件" prop="attachments">
<!-- <el-input v-model="form.attachments" placeholder="请输入附件" /> -->
<el-upload
multiple
:action="uploadFileUrl"
:before-upload="handleBeforeUpload"
:file-list="fileList"
:limit="3"
:on-error="handleUploadError"
:on-exceed="handleExceed"
:on-success="handleUploadSuccess"
:show-file-list="false"
:headers="headers"
class="upload-file-uploader"
ref="fileUpload"
>
<!-- 上传按钮 -->
<el-button size="mini" type="primary">选取文件</el-button>
<!-- 上传提示 -->
<div class="el-upload__tip" slot="tip">
请上传
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{fileSize}}MB</b> </template>
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
的文件
</div>
</el-upload>
<el-input v-model="form.attachments" placeholder="请输入附件" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
... ... @@ -205,30 +181,11 @@ export default {
components: {
FileUpload
},
data() {
const validatAttachments = (rule, value, callback) => {
console.log('this.fileList',this.fileList)
if (this.fileList.length <=0 ) {
callback(new Error("请上传附件!"));
} else {
callback();
}
};
return {
fileList:[],
uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传文件服务器地址
headers: {
Authorization: "Bearer " + getToken(),
},
fileType: {
type: Array,
default: () => ["pdf"],
},
// 大小限制(MB)
fileSize: {
type: Number,
default: 5,
},
// 按钮loading
buttonLoading: false,
// 遮罩层
... ... @@ -305,8 +262,7 @@ export default {
{ required: true, message: "标的物信息不能为空", trigger: "blur" }
],
attachments: [
// { required: true, message: "附件不能为空", trigger: "blur" }
{ required: true, validator: validatAttachments, trigger: "blur" }
{ required: true, message: "附件不能为空", trigger: "blur" }
],
id: [
{ required: true, message: "不能为空", trigger: "blur" }
... ... @@ -389,8 +345,6 @@ export default {
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
console.log(this.form)
return
this.buttonLoading = true;
if (this.form.id != null) {
updateContract(this.form).then(response => {
... ... @@ -433,87 +387,6 @@ export default {
...this.queryParams
}, `contract_${new Date().getTime()}.xlsx`)
},
// 上传前校检格式和大小
handleBeforeUpload(file) {
// 校检文件类型
if (this.fileType) {
const fileName = file.name.split('.');
const fileExt = fileName[fileName.length - 1];
const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
if (!isTypeOk) {
this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
return false;
}
}
// 校检文件大小
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;
},
// 文件个数超出
handleExceed() {
this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
},
// 上传失败
handleUploadError(err) {
this.$modal.msgError("上传文件失败,请重试");
this.$modal.closeLoading();
},
// 上传成功回调
handleUploadSuccess(res, file) {
if (res.code === 200) {
this.uploadList.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId });
this.uploadedSuccessfully();
} else {
this.number--;
this.$modal.closeLoading();
this.$modal.msgError(res.msg);
this.$refs.fileUpload.handleRemove(file);
this.uploadedSuccessfully();
}
},
// 删除文件
handleDelete(index) {
let ossId = this.fileList[index].ossId;
delOss(ossId);
this.fileList.splice(index, 1);
this.$emit("input", this.listToString(this.fileList));
},
// 上传结束处理
uploadedSuccessfully() {
if (this.number > 0 && this.uploadList.length === this.number) {
this.fileList = this.fileList.concat(this.uploadList);
this.uploadList = [];
this.number = 0;
this.$emit("input", this.listToString(this.fileList));
this.$modal.closeLoading();
}
},
// 获取文件名称
getFileName(name) {
// 如果是url那么取最后的名字 如果不是直接返回
if (name.lastIndexOf("/") > -1) {
return name.slice(name.lastIndexOf("/") + 1);
} else {
return name;
}
},
// 对象转成指定字符串分隔
listToString(list, separator) {
let strs = "";
separator = separator || ",";
for (let i in list) {
strs += list[i].ossId + separator;
}
return strs != "" ? strs.substr(0, strs.length - 1) : "";
},
}
};
</script>
... ...
... ... @@ -70,8 +70,44 @@
</el-col>
<el-col :span="24">
<el-form-item label="附件" prop="attachments">
<el-input v-model="formData.attachments" placeholder="请输入附件" clearable :style="{width: '50%'}">
</el-input>
<!-- <el-input v-model="formData.attachments" placeholder="请输入附件" clearable :style="{width: '50%'}" /> -->
<el-upload
multiple
:action="uploadFileUrl"
:before-upload="handleBeforeUpload"
:file-list="fileList"
:limit="limit"
:on-error="handleUploadError"
:on-exceed="handleExceed"
:on-success="handleUploadSuccess"
:show-file-list="false"
:headers="headers"
class="upload-file-uploader"
ref="fileUpload"
>
<!-- :auto-upload="false" -->
<!-- 上传按钮 -->
<el-button size="mini" type="primary">选取文件</el-button>
<!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
<!-- 上传提示 -->
<div class="el-upload__tip" slot="tip">
请上传
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
的文件
</div>
</el-upload>
<!-- 文件列表 -->
<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
<li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
<el-link :href="`${file.url}`" :underline="false" target="_blank">
<span class="el-icon-document"> {{ getFileName(file.name) }} </span>
</el-link>
<div class="ele-upload-list__item-content-action">
<el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
</div>
</li>
</transition-group>
</el-form-item>
</el-col>
<el-col :span="24">
... ... @@ -86,11 +122,43 @@
</template>
<script>
import { listContract, getContract, delContract, addAndStart, updateContract } from "@/api/compliancemanagement/contract";
import { getToken } from "@/utils/auth";
export default {
components: {},
props: [],
props: {
// 数量限制
limit: {
type: Number,
default: 1,
},
// 大小限制(MB)
fileSize: {
type: Number,
default: 5,
},
// 文件类型, 例如['png', 'jpg', 'jpeg']
fileType: {
type: Array,
default: () => ["pdf"],
},
},
data() {
const validatAttachments = (rule, value, callback) => {
console.log('this.fileList',this.fileList)
if (this.fileList.length <=0 ) {
callback(new Error("请上传附件!"));
} else {
callback();
}
};
return {
fileList:[],
uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传文件服务器地址
headers: {
Authorization: "Bearer " + getToken(),
},
uploadList: [],
number: 0,
procDefId:null,
formData: {
contractno: undefined,
... ... @@ -147,26 +215,22 @@
message: '请输入乙方',
trigger: 'blur'
}],
paymentMethod: [{
required: true,
message: '请输入付款方式',
trigger: 'blur'
}],
signingDate: [{
required: true,
message: '请选择签订日期',
trigger: 'change'
}],
subjectInformation: [{
required: true,
message: '请输入标的物信息',
trigger: 'blur'
}],
attachments: [{
required: true,
message: '请输入附件',
trigger: 'blur'
}],
paymentMethod: [
{required: true, message: '请输入付款方式',trigger: 'blur'}
],
signingDate: [
{required: true,message: '请选择签订日期',trigger: 'change'}
],
subjectInformation: [
{required: true,message: '请输入标的物信息',trigger: 'blur'}
],
attachments: [
// {
// required: true,
// message: '请输入附件',
// trigger: 'blur'
// },
{ required: true, validator: validatAttachments, trigger: "blur" }],
},
}
},
... ... @@ -179,9 +243,14 @@
submitForm() {
this.$refs['elForm'].validate(valid => {
// console.log(this.formData)
if (valid) {
console.log('===',this.formData)
this.formData.attachments = this.fileList[0].name
// return
addAndStart(this.formData).then(response => {
this.$modal.msgSuccess("流程启动成功");
this.$router.push({ path: '/contract/compliancemanagement/contractmanagement/contract'});
})
}
})
... ... @@ -189,6 +258,91 @@
resetForm() {
this.$refs['elForm'].resetFields()
},
// 上传前校检格式和大小
handleBeforeUpload(file) {
// 校检文件类型
if (this.fileType) {
const fileName = file.name.split('.');
const fileExt = fileName[fileName.length - 1];
const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
if (!isTypeOk) {
this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
return false;
}
}
// 校检文件大小
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;
},
// 文件个数超出
handleExceed() {
this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
},
submitUpload() {
this.$refs.upload.submit();
},
// 上传失败
handleUploadError(err) {
this.$modal.msgError("上传文件失败,请重试");
this.$modal.closeLoading();
},
// 上传成功回调
handleUploadSuccess(res, file) {
console.log('handleUploadSuccess',res)
if (res.code === 200) {
this.uploadList.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId });
this.uploadedSuccessfully();
} else {
this.number--;
this.$modal.closeLoading();
this.$modal.msgError(res.msg);
this.$refs.fileUpload.handleRemove(file);
this.uploadedSuccessfully();
}
},
// 删除文件
handleDelete(index) {
let ossId = this.fileList[index].ossId;
delOss(ossId);
this.fileList.splice(index, 1);
this.$emit("input", this.listToString(this.fileList));
},
// 上传结束处理
uploadedSuccessfully() {
if (this.number > 0 && this.uploadList.length === this.number) {
this.fileList = this.fileList.concat(this.uploadList);
this.uploadList = [];
this.number = 0;
this.$emit("input", this.listToString(this.fileList));
this.$modal.closeLoading();
}
},
// 获取文件名称
getFileName(name) {
// 如果是url那么取最后的名字 如果不是直接返回
if (name.lastIndexOf("/") > -1) {
return name.slice(name.lastIndexOf("/") + 1);
} else {
return name;
}
},
// 对象转成指定字符串分隔
listToString(list, separator) {
let strs = "";
separator = separator || ",";
for (let i in list) {
strs += list[i].ossId + separator;
}
return strs != "" ? strs.substr(0, strs.length - 1) : "";
},
}
}
... ...