作者 张晓杰

合同起草上传附件

@@ -34,7 +34,7 @@ const permission = { @@ -34,7 +34,7 @@ const permission = {
34 return new Promise(resolve => { 34 return new Promise(resolve => {
35 // 向后端请求路由数据 35 // 向后端请求路由数据
36 getRouters().then(res => { 36 getRouters().then(res => {
37 - console.log('全部菜单:',res) 37 + // console.log('全部菜单:',res)
38 const sdata = JSON.parse(JSON.stringify(res.data)) 38 const sdata = JSON.parse(JSON.stringify(res.data))
39 const rdata = JSON.parse(JSON.stringify(res.data)) 39 const rdata = JSON.parse(JSON.stringify(res.data))
40 const sidebarRoutes = filterAsyncRouter(sdata) 40 const sidebarRoutes = filterAsyncRouter(sdata)
@@ -50,26 +50,6 @@ const permission = { @@ -50,26 +50,6 @@ const permission = {
50 }) 50 })
51 }) 51 })
52 }, 52 },
53 - GenerateFirstLevelRoutes({ commit }) {  
54 - return new Promise(resolve => {  
55 - // 向后端请求路由数据  
56 - getFirstLevelRouters().then(res => {  
57 - console.log('一级菜单:',res)  
58 - // const sdata = JSON.parse(JSON.stringify(res.data))  
59 - // const rdata = JSON.parse(JSON.stringify(res.data))  
60 - // const sidebarRoutes = filterAsyncRouter(sdata)  
61 - // const rewriteRoutes = filterAsyncRouter(rdata, false, true)  
62 - // const asyncRoutes = filterDynamicRoutes(dynamicRoutes);  
63 - // rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })  
64 - // router.addRoutes(asyncRoutes);  
65 - // commit('SET_ROUTES', rewriteRoutes)  
66 - // commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))  
67 - // commit('SET_DEFAULT_ROUTES', sidebarRoutes)  
68 - // commit('SET_TOPBAR_ROUTES', sidebarRoutes)  
69 - // resolve(rewriteRoutes)  
70 - })  
71 - })  
72 - }  
73 } 53 }
74 } 54 }
75 55
@@ -25,14 +25,14 @@ @@ -25,14 +25,14 @@
25 25
26 <el-row :gutter="10" class="mb8"> 26 <el-row :gutter="10" class="mb8">
27 <el-col :span="1.5"> 27 <el-col :span="1.5">
28 - <el-button 28 + <!-- <el-button
29 type="primary" 29 type="primary"
30 plain 30 plain
31 icon="el-icon-plus" 31 icon="el-icon-plus"
32 size="mini" 32 size="mini"
33 @click="handleAdd" 33 @click="handleAdd"
34 v-hasPermi="['system:contract:add']" 34 v-hasPermi="['system:contract:add']"
35 - >新增</el-button> 35 + >新增</el-button> -->
36 </el-col> 36 </el-col>
37 <el-col :span="1.5"> 37 <el-col :span="1.5">
38 <el-button 38 <el-button
@@ -161,31 +161,7 @@ @@ -161,31 +161,7 @@
161 <el-input v-model="form.subjectInformation" placeholder="请输入标的物信息" /> 161 <el-input v-model="form.subjectInformation" placeholder="请输入标的物信息" />
162 </el-form-item> 162 </el-form-item>
163 <el-form-item label="附件" prop="attachments"> 163 <el-form-item label="附件" prop="attachments">
164 - <!-- <el-input v-model="form.attachments" placeholder="请输入附件" /> -->  
165 - <el-upload  
166 - multiple  
167 - :action="uploadFileUrl"  
168 - :before-upload="handleBeforeUpload"  
169 - :file-list="fileList"  
170 - :limit="3"  
171 - :on-error="handleUploadError"  
172 - :on-exceed="handleExceed"  
173 - :on-success="handleUploadSuccess"  
174 - :show-file-list="false"  
175 - :headers="headers"  
176 - class="upload-file-uploader"  
177 - ref="fileUpload"  
178 - >  
179 - <!-- 上传按钮 -->  
180 - <el-button size="mini" type="primary">选取文件</el-button>  
181 - <!-- 上传提示 -->  
182 - <div class="el-upload__tip" slot="tip">  
183 - 请上传  
184 - <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{fileSize}}MB</b> </template>  
185 - <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>  
186 - 的文件  
187 - </div>  
188 - </el-upload> 164 + <el-input v-model="form.attachments" placeholder="请输入附件" />
189 </el-form-item> 165 </el-form-item>
190 </el-form> 166 </el-form>
191 <div slot="footer" class="dialog-footer"> 167 <div slot="footer" class="dialog-footer">
@@ -205,30 +181,11 @@ export default { @@ -205,30 +181,11 @@ export default {
205 components: { 181 components: {
206 FileUpload 182 FileUpload
207 }, 183 },
  184 +
208 data() { 185 data() {
209 - const validatAttachments = (rule, value, callback) => {  
210 - console.log('this.fileList',this.fileList)  
211 - if (this.fileList.length <=0 ) {  
212 - callback(new Error("请上传附件!"));  
213 - } else {  
214 - callback();  
215 - }  
216 - }; 186 +
217 return { 187 return {
218 - fileList:[],  
219 - uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传文件服务器地址  
220 - headers: {  
221 - Authorization: "Bearer " + getToken(),  
222 - },  
223 - fileType: {  
224 - type: Array,  
225 - default: () => ["pdf"],  
226 - },  
227 - // 大小限制(MB)  
228 - fileSize: {  
229 - type: Number,  
230 - default: 5,  
231 - }, 188 +
232 // 按钮loading 189 // 按钮loading
233 buttonLoading: false, 190 buttonLoading: false,
234 // 遮罩层 191 // 遮罩层
@@ -305,8 +262,7 @@ export default { @@ -305,8 +262,7 @@ export default {
305 { required: true, message: "标的物信息不能为空", trigger: "blur" } 262 { required: true, message: "标的物信息不能为空", trigger: "blur" }
306 ], 263 ],
307 attachments: [ 264 attachments: [
308 - // { required: true, message: "附件不能为空", trigger: "blur" }  
309 - { required: true, validator: validatAttachments, trigger: "blur" } 265 + { required: true, message: "附件不能为空", trigger: "blur" }
310 ], 266 ],
311 id: [ 267 id: [
312 { required: true, message: "不能为空", trigger: "blur" } 268 { required: true, message: "不能为空", trigger: "blur" }
@@ -389,8 +345,6 @@ export default { @@ -389,8 +345,6 @@ export default {
389 submitForm() { 345 submitForm() {
390 this.$refs["form"].validate(valid => { 346 this.$refs["form"].validate(valid => {
391 if (valid) { 347 if (valid) {
392 - console.log(this.form)  
393 - return  
394 this.buttonLoading = true; 348 this.buttonLoading = true;
395 if (this.form.id != null) { 349 if (this.form.id != null) {
396 updateContract(this.form).then(response => { 350 updateContract(this.form).then(response => {
@@ -433,87 +387,6 @@ export default { @@ -433,87 +387,6 @@ export default {
433 ...this.queryParams 387 ...this.queryParams
434 }, `contract_${new Date().getTime()}.xlsx`) 388 }, `contract_${new Date().getTime()}.xlsx`)
435 }, 389 },
436 - // 上传前校检格式和大小  
437 - handleBeforeUpload(file) {  
438 - // 校检文件类型  
439 - if (this.fileType) {  
440 - const fileName = file.name.split('.');  
441 - const fileExt = fileName[fileName.length - 1];  
442 - const isTypeOk = this.fileType.indexOf(fileExt) >= 0;  
443 - if (!isTypeOk) {  
444 - this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);  
445 - return false;  
446 - }  
447 - }  
448 - // 校检文件大小  
449 - if (this.fileSize) {  
450 - const isLt = file.size / 1024 / 1024 < this.fileSize;  
451 - if (!isLt) {  
452 - this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);  
453 - return false;  
454 - }  
455 - }  
456 - this.$modal.loading("正在上传文件,请稍候...");  
457 - this.number++;  
458 - return true;  
459 - },  
460 - // 文件个数超出  
461 - handleExceed() {  
462 - this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);  
463 - },  
464 - // 上传失败  
465 - handleUploadError(err) {  
466 - this.$modal.msgError("上传文件失败,请重试");  
467 - this.$modal.closeLoading();  
468 - },  
469 - // 上传成功回调  
470 - handleUploadSuccess(res, file) {  
471 - if (res.code === 200) {  
472 - this.uploadList.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId });  
473 - this.uploadedSuccessfully();  
474 - } else {  
475 - this.number--;  
476 - this.$modal.closeLoading();  
477 - this.$modal.msgError(res.msg);  
478 - this.$refs.fileUpload.handleRemove(file);  
479 - this.uploadedSuccessfully();  
480 - }  
481 - },  
482 - // 删除文件  
483 - handleDelete(index) {  
484 - let ossId = this.fileList[index].ossId;  
485 - delOss(ossId);  
486 - this.fileList.splice(index, 1);  
487 - this.$emit("input", this.listToString(this.fileList));  
488 - },  
489 - // 上传结束处理  
490 - uploadedSuccessfully() {  
491 - if (this.number > 0 && this.uploadList.length === this.number) {  
492 - this.fileList = this.fileList.concat(this.uploadList);  
493 - this.uploadList = [];  
494 - this.number = 0;  
495 - this.$emit("input", this.listToString(this.fileList));  
496 - this.$modal.closeLoading();  
497 - }  
498 - },  
499 - // 获取文件名称  
500 - getFileName(name) {  
501 - // 如果是url那么取最后的名字 如果不是直接返回  
502 - if (name.lastIndexOf("/") > -1) {  
503 - return name.slice(name.lastIndexOf("/") + 1);  
504 - } else {  
505 - return name;  
506 - }  
507 - },  
508 - // 对象转成指定字符串分隔  
509 - listToString(list, separator) {  
510 - let strs = "";  
511 - separator = separator || ",";  
512 - for (let i in list) {  
513 - strs += list[i].ossId + separator;  
514 - }  
515 - return strs != "" ? strs.substr(0, strs.length - 1) : "";  
516 - },  
517 } 390 }
518 }; 391 };
519 </script> 392 </script>
@@ -70,8 +70,44 @@ @@ -70,8 +70,44 @@
70 </el-col> 70 </el-col>
71 <el-col :span="24"> 71 <el-col :span="24">
72 <el-form-item label="附件" prop="attachments"> 72 <el-form-item label="附件" prop="attachments">
73 - <el-input v-model="formData.attachments" placeholder="请输入附件" clearable :style="{width: '50%'}">  
74 - </el-input> 73 + <!-- <el-input v-model="formData.attachments" placeholder="请输入附件" clearable :style="{width: '50%'}" /> -->
  74 + <el-upload
  75 + multiple
  76 + :action="uploadFileUrl"
  77 + :before-upload="handleBeforeUpload"
  78 + :file-list="fileList"
  79 + :limit="limit"
  80 + :on-error="handleUploadError"
  81 + :on-exceed="handleExceed"
  82 + :on-success="handleUploadSuccess"
  83 + :show-file-list="false"
  84 + :headers="headers"
  85 + class="upload-file-uploader"
  86 + ref="fileUpload"
  87 + >
  88 + <!-- :auto-upload="false" -->
  89 + <!-- 上传按钮 -->
  90 + <el-button size="mini" type="primary">选取文件</el-button>
  91 + <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
  92 + <!-- 上传提示 -->
  93 + <div class="el-upload__tip" slot="tip">
  94 + 请上传
  95 + <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
  96 + <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
  97 + 的文件
  98 + </div>
  99 + </el-upload>
  100 + <!-- 文件列表 -->
  101 + <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
  102 + <li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
  103 + <el-link :href="`${file.url}`" :underline="false" target="_blank">
  104 + <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
  105 + </el-link>
  106 + <div class="ele-upload-list__item-content-action">
  107 + <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
  108 + </div>
  109 + </li>
  110 + </transition-group>
75 </el-form-item> 111 </el-form-item>
76 </el-col> 112 </el-col>
77 <el-col :span="24"> 113 <el-col :span="24">
@@ -86,11 +122,43 @@ @@ -86,11 +122,43 @@
86 </template> 122 </template>
87 <script> 123 <script>
88 import { listContract, getContract, delContract, addAndStart, updateContract } from "@/api/compliancemanagement/contract"; 124 import { listContract, getContract, delContract, addAndStart, updateContract } from "@/api/compliancemanagement/contract";
  125 + import { getToken } from "@/utils/auth";
89 export default { 126 export default {
90 components: {}, 127 components: {},
91 - props: [], 128 + props: {
  129 + // 数量限制
  130 + limit: {
  131 + type: Number,
  132 + default: 1,
  133 + },
  134 + // 大小限制(MB)
  135 + fileSize: {
  136 + type: Number,
  137 + default: 5,
  138 + },
  139 + // 文件类型, 例如['png', 'jpg', 'jpeg']
  140 + fileType: {
  141 + type: Array,
  142 + default: () => ["pdf"],
  143 + },
  144 + },
92 data() { 145 data() {
  146 + const validatAttachments = (rule, value, callback) => {
  147 + console.log('this.fileList',this.fileList)
  148 + if (this.fileList.length <=0 ) {
  149 + callback(new Error("请上传附件!"));
  150 + } else {
  151 + callback();
  152 + }
  153 + };
93 return { 154 return {
  155 + fileList:[],
  156 + uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传文件服务器地址
  157 + headers: {
  158 + Authorization: "Bearer " + getToken(),
  159 + },
  160 + uploadList: [],
  161 + number: 0,
94 procDefId:null, 162 procDefId:null,
95 formData: { 163 formData: {
96 contractno: undefined, 164 contractno: undefined,
@@ -147,26 +215,22 @@ @@ -147,26 +215,22 @@
147 message: '请输入乙方', 215 message: '请输入乙方',
148 trigger: 'blur' 216 trigger: 'blur'
149 }], 217 }],
150 - paymentMethod: [{  
151 - required: true,  
152 - message: '请输入付款方式',  
153 - trigger: 'blur'  
154 - }],  
155 - signingDate: [{  
156 - required: true,  
157 - message: '请选择签订日期',  
158 - trigger: 'change'  
159 - }],  
160 - subjectInformation: [{  
161 - required: true,  
162 - message: '请输入标的物信息',  
163 - trigger: 'blur'  
164 - }],  
165 - attachments: [{  
166 - required: true,  
167 - message: '请输入附件',  
168 - trigger: 'blur'  
169 - }], 218 + paymentMethod: [
  219 + {required: true, message: '请输入付款方式',trigger: 'blur'}
  220 + ],
  221 + signingDate: [
  222 + {required: true,message: '请选择签订日期',trigger: 'change'}
  223 + ],
  224 + subjectInformation: [
  225 + {required: true,message: '请输入标的物信息',trigger: 'blur'}
  226 + ],
  227 + attachments: [
  228 + // {
  229 + // required: true,
  230 + // message: '请输入附件',
  231 + // trigger: 'blur'
  232 + // },
  233 + { required: true, validator: validatAttachments, trigger: "blur" }],
170 }, 234 },
171 } 235 }
172 }, 236 },
@@ -179,9 +243,14 @@ @@ -179,9 +243,14 @@
179 243
180 submitForm() { 244 submitForm() {
181 this.$refs['elForm'].validate(valid => { 245 this.$refs['elForm'].validate(valid => {
  246 + // console.log(this.formData)
182 if (valid) { 247 if (valid) {
  248 + console.log('===',this.formData)
  249 + this.formData.attachments = this.fileList[0].name
  250 + // return
183 addAndStart(this.formData).then(response => { 251 addAndStart(this.formData).then(response => {
184 this.$modal.msgSuccess("流程启动成功"); 252 this.$modal.msgSuccess("流程启动成功");
  253 + this.$router.push({ path: '/contract/compliancemanagement/contractmanagement/contract'});
185 }) 254 })
186 } 255 }
187 }) 256 })
@@ -189,6 +258,91 @@ @@ -189,6 +258,91 @@
189 resetForm() { 258 resetForm() {
190 this.$refs['elForm'].resetFields() 259 this.$refs['elForm'].resetFields()
191 }, 260 },
  261 + // 上传前校检格式和大小
  262 + handleBeforeUpload(file) {
  263 + // 校检文件类型
  264 + if (this.fileType) {
  265 + const fileName = file.name.split('.');
  266 + const fileExt = fileName[fileName.length - 1];
  267 + const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
  268 + if (!isTypeOk) {
  269 + this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
  270 + return false;
  271 + }
  272 + }
  273 + // 校检文件大小
  274 + if (this.fileSize) {
  275 + const isLt = file.size / 1024 / 1024 < this.fileSize;
  276 + if (!isLt) {
  277 + this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
  278 + return false;
  279 + }
  280 + }
  281 + this.$modal.loading("正在上传文件,请稍候...");
  282 + this.number++;
  283 + return true;
  284 + },
  285 + // 文件个数超出
  286 + handleExceed() {
  287 + this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
  288 + },
  289 + submitUpload() {
  290 + this.$refs.upload.submit();
  291 + },
  292 + // 上传失败
  293 + handleUploadError(err) {
  294 + this.$modal.msgError("上传文件失败,请重试");
  295 + this.$modal.closeLoading();
  296 + },
  297 + // 上传成功回调
  298 + handleUploadSuccess(res, file) {
  299 + console.log('handleUploadSuccess',res)
  300 + if (res.code === 200) {
  301 + this.uploadList.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId });
  302 + this.uploadedSuccessfully();
  303 + } else {
  304 + this.number--;
  305 + this.$modal.closeLoading();
  306 + this.$modal.msgError(res.msg);
  307 + this.$refs.fileUpload.handleRemove(file);
  308 + this.uploadedSuccessfully();
  309 + }
  310 + },
  311 + // 删除文件
  312 + handleDelete(index) {
  313 + let ossId = this.fileList[index].ossId;
  314 + delOss(ossId);
  315 + this.fileList.splice(index, 1);
  316 + this.$emit("input", this.listToString(this.fileList));
  317 + },
  318 + // 上传结束处理
  319 + uploadedSuccessfully() {
  320 + if (this.number > 0 && this.uploadList.length === this.number) {
  321 + this.fileList = this.fileList.concat(this.uploadList);
  322 + this.uploadList = [];
  323 + this.number = 0;
  324 + this.$emit("input", this.listToString(this.fileList));
  325 + this.$modal.closeLoading();
  326 + }
  327 + },
  328 + // 获取文件名称
  329 + getFileName(name) {
  330 + // 如果是url那么取最后的名字 如果不是直接返回
  331 + if (name.lastIndexOf("/") > -1) {
  332 + return name.slice(name.lastIndexOf("/") + 1);
  333 + } else {
  334 + return name;
  335 + }
  336 + },
  337 + // 对象转成指定字符串分隔
  338 + listToString(list, separator) {
  339 + let strs = "";
  340 + separator = separator || ",";
  341 + for (let i in list) {
  342 + strs += list[i].ossId + separator;
  343 + }
  344 + return strs != "" ? strs.substr(0, strs.length - 1) : "";
  345 + },
192 } 346 }
193 } 347 }
194 348