【新增】增加报告上传流程
This commit is contained in:
zhoulingpo
@@ -0,0 +1,281 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="processFormRef" :model="form" label-width="150px"
|
||||
:rules="processFormRule" class="label-input-form" size="medium">
|
||||
<el-row>
|
||||
<el-col :span="9">
|
||||
<el-form-item label="流程名称:" prop="prcName">
|
||||
<el-input :disabled="formControl || formControlname" v-model="form.prcName"
|
||||
placeholder="请输入流程名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="9">
|
||||
<el-form-item label="报告名称:" prop="name">
|
||||
<el-input :disabled="formControl" v-model="form.name"
|
||||
placeholder="请输入报告名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="9" :offset="6" >
|
||||
<el-form-item label="报告年份:" prop="year">
|
||||
<el-date-picker :disabled="formControl" v-model="form.year" type="year" value-format="yyyy" placeholder="请选择报告年份"
|
||||
prefix-icon="null" :picker-options="pickerOptions" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="9">
|
||||
<el-form-item label="报告所属部门:" prop="department">
|
||||
<el-input :disabled="formControl" v-model="form.department" placeholder="请选择报告所属部门" maxlength="100" ></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="9" :offset="6">
|
||||
<el-form-item label="报告涉密等级:" prop="confidentialLevel">
|
||||
<el-select :disabled="formControl" v-model="form.confidentialLevel" placeholder="请选择报告涉密等级">
|
||||
<el-option v-for="item in confidentialLevelOptions" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="9">
|
||||
<el-form-item label="关键词:" prop="tags">
|
||||
<vue-tags-input :disabled="formControl" :class="{'is-diable':formControl}" placeholder="请输入关键词" v-model="form.tags" :tags="tags"
|
||||
:avoid-adding-duplicates="false" @tags-changed="newTags =>{
|
||||
if(newTags[newTags.length - 1].text.length <= 20){
|
||||
if(tags.length < 10){
|
||||
tags = newTags
|
||||
}else{
|
||||
this.$message({type:'error',message:'关键词数量不能超过10个'})
|
||||
tags = newTags.slice(0,-1)
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.$message({type:'error',message:'单个关键词不能超过20个字'})
|
||||
tags = newTags.slice(0,-1)
|
||||
}
|
||||
|
||||
}" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="9" :offset="6">
|
||||
<el-form-item label="报告隐私等级:" prop="privacyLevelOptions">
|
||||
<el-select :disabled="formControl" v-model="form.privacyLevelOptions" placeholder="请选择报告隐私等级">
|
||||
<el-option v-for="item in privacyLevelOptions" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="9">
|
||||
<el-form-item label="标签:" prop="department">
|
||||
<el-cascader :disabled="formControl" width="100%" v-model="form.labelList" :options="cascaderOptions" filterable
|
||||
:props="{ checkStrictly: true }" clearable placeholder="请选择标签">
|
||||
<template slot-scope="{ node, data }">
|
||||
<span :title="data.label">{{ data.label }}</span>
|
||||
</template>
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-form-item label="内容摘要:" prop="mainContent">
|
||||
<el-input :disabled="formControl" v-model="form.mainContent" placeholder="请填写内容摘要" type="textarea" maxlength="500"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="9">
|
||||
<el-form-item label="上传报告:" required>
|
||||
<el-upload action="#" :http-request="(params) => uploadFile(params)" :show-file-list="false"
|
||||
:before-upload="beforeUploadFile">
|
||||
<el-button :disabled="formControl" >选择文件</el-button>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="9">
|
||||
<el-form-item label="权限设置:" required>
|
||||
<el-button :disabled="formControl">选择文件</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { fileType } from '@/utils/fileType'
|
||||
import VueTagsInput from '@johmun/vue-tags-input';
|
||||
export default {
|
||||
components:{
|
||||
VueTagsInput
|
||||
},
|
||||
props:{
|
||||
formControl:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
formControlname:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
processForm:{
|
||||
type:Object
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
confidentialLevelOptions:[],
|
||||
cascaderOptions: [],
|
||||
privacyLevelOptions: [],
|
||||
tags:[],
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
return time.getFullYear() > new Date().getFullYear() + 1 || time.getFullYear() < new Date().getFullYear() - 10;
|
||||
},
|
||||
},
|
||||
form:{
|
||||
|
||||
},
|
||||
processFormRule:{
|
||||
prcName:[
|
||||
{
|
||||
required:true,
|
||||
message:"流程名称不能为空",
|
||||
trigger:'change'
|
||||
},{
|
||||
max:100,
|
||||
message:"流程名称不能超过100字符",
|
||||
trigger:'change'
|
||||
}
|
||||
],
|
||||
name: [{
|
||||
required:true,
|
||||
message:"报告名称不能为空",
|
||||
trigger:'change'
|
||||
},{
|
||||
max:100,
|
||||
message:"报告名称不能超过100字符",
|
||||
trigger:'change'
|
||||
}],
|
||||
mainContent: [{
|
||||
max:500,
|
||||
message:"内容摘要不能超过500字符",
|
||||
trigger:'change'
|
||||
}],
|
||||
year: [{
|
||||
required:true,
|
||||
message:"报告年份不能为空",
|
||||
trigger:'change'
|
||||
}],
|
||||
reportUserIdList:[
|
||||
{
|
||||
required:true,
|
||||
message:"权限不能为空",
|
||||
trigger:'change'
|
||||
}
|
||||
],
|
||||
fileName:[
|
||||
{
|
||||
required:true,
|
||||
message:"报告文件不能为空", trigger:'change'
|
||||
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
//用递归方式去除children
|
||||
getTreeData(data) {
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (data[i].children.length < 1) {
|
||||
// children若为空数组，则将children设为undefined
|
||||
data[i].children = undefined;
|
||||
} else {
|
||||
// children若不为空数组，则继续 递归调用 本方法
|
||||
this.getTreeData(data[i].children);
|
||||
}
|
||||
}
|
||||
return data;
|
||||
},
|
||||
updateList(){
|
||||
this.$api.report.labelList().then(res => {
|
||||
this.cascaderOptions=this.getTreeData(res.data)
|
||||
})
|
||||
this.$forceUpdate()
|
||||
},
|
||||
// 上传文件
|
||||
uploadFile(params) {
|
||||
let fd = new FormData();
|
||||
fd.append('file', params.file);
|
||||
this.$api.report.reportUploadFile(fd).then(({ data }) => {
|
||||
this.form.fileName = data.name;
|
||||
this.form.fileId = data.key;
|
||||
})
|
||||
},
|
||||
// 上传文件前
|
||||
beforeUploadFile(file) {
|
||||
let realFileType = file.name.split('.')[file.name.split('.').length - 1];
|
||||
const isType = (
|
||||
file.type === fileType.pdf || file.type === fileType.xls || file.type === fileType.xlsx || file.type === fileType.doc || file.type === fileType.docx || file.type === fileType.ppt || file.type === fileType.pptx
|
||||
|| realFileType === 'pdf' || realFileType === 'xls' || realFileType === 'xlsx' || realFileType === 'doc' || realFileType === 'docx' || realFileType === 'ppt' || realFileType === 'pptx'
|
||||
);
|
||||
const isSize = file.size / 1024 / 1024 < 200;
|
||||
if (!isType) {
|
||||
this.$message.error('仅能上传 pdf｜xls｜xlsx｜doc｜docx｜ppt｜pptx 格式文件');
|
||||
}
|
||||
if (!isSize) {
|
||||
this.$message.error('您最大可上传200M文件');
|
||||
}
|
||||
return isType && isSize;
|
||||
},
|
||||
submit(){
|
||||
let flag
|
||||
this.$refs.processFormRef.validate(v=>{
|
||||
flag=v
|
||||
return v
|
||||
})
|
||||
return flag
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.updateList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .ti-input {
|
||||
border-radius: 4px;
|
||||
border: 1px solid #DCDFE6;
|
||||
min-height: 40px;
|
||||
line-height: 40px;
|
||||
|
||||
.ti-new-tag-input{
|
||||
padding-left: 5px;
|
||||
|
||||
}
|
||||
.ti-new-tag-input::placeholder {
|
||||
color: #C0C4CC;
|
||||
font-size: 14px;
|
||||
}
|
||||
.ti-new-tag-input:-ms-input-placeholder {
|
||||
color: #C0C4CC;
|
||||
font-size: 14px;
|
||||
}
|
||||
.ti-new-tag-input:-moz-placeholder {
|
||||
color: #C0C4CC;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
::v-deep .vue-tags-input :focus{
|
||||
border: 1px solid #1890ff;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user