【新增】增加报告上传流程

2023-05-05 09:30:28 +08:00
parent cd4ee9f5ba
commit 75280806fc
8 changed files with 1078 additions and 3 deletions
@@ -0,0 +1,137 @@
+<template>
+    <div class="AuditOperationBox">
+        <el-form
+                ref="examineForm"
+                :model="examineForm"
+                :rules="examineFormRules"
+                size="medium"
+                class="label-input-form prc-content-border">
+<!--          <el-row :gutter="24">-->
+<!--            <el-col :span="9">-->
+<!--              <el-form-item label="选择赋权时间:" prop="date"-->
+<!--                            label-width="132px" class="add-form-item"-->
+<!--                            :class="{'form-item-disabled': formdisableflag}">-->
+<!--                <el-date-picker-->
+<!--                  v-model="examineForm.date"-->
+<!--                  type="date"-->
+<!--                  placeholder="选择赋权时间">-->
+<!--                </el-date-picker>-->
+<!--              </el-form-item>-->
+<!--            </el-col>-->
+<!--          </el-row>-->
+            <el-row :gutter="24">
+                <el-col :span="24">
+                    <el-form-item label="审批结果:" prop="flag"
+                                  label-width="132px" class="add-form-item"
+                                  :class="{'form-item-disabled': formdisableflag}">
+                        <el-radio-group :disabled="formdisableflag" v-model="examineForm.flag" >
+                            <el-radio :label="'1'">同意</el-radio>
+                            <el-radio :label="'2'">不同意</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="24">
+                <el-col :span="24">
+                    <el-form-item :prop="!formdisableflag?'approvalOpinion':''" label-width="132px" class="add-form-item">
+                        <template slot="label">审批意见:</template>
+                        <el-input :disabled="formdisableflag" :maxlength='1000'
+                                v-model="examineForm.approvalOpinion"
+                                placeholder="请输入审批意见"
+                                :autosize="{ minRows: 2, maxRows: 4}"
+                                type="textarea"
+                        />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+<!--            <el-row :gutter="24">-->
+<!--                <el-col :span="24">-->
+<!--                    <el-form-item label="附件" prop="entStandText" label-width="132px" class="add-form-item"-->
+<!--                                  :class="{'form-item-disabled': formdisableflag}">-->
+<!--                        <el-button-->
+<!--                                size="small"-->
+<!--                                class="form-upload-btn"-->
+<!--                                            icon="el-icon-upload"-->
+<!--                                @click="clickButtonToUpload('approvalFile')"-->
+<!--                        >-->
+<!--                            {{ examineForm.approvalFile === 'null' || examineForm.approvalFile === '' ||-->
+<!--                            examineForm.approvalFile == null ? '点击上传' : '查看已上传的文件' }}-->
+<!--                        </el-button>-->
+<!--                    </el-form-item>-->
+<!--                </el-col>-->
+<!--            </el-row>-->
+        </el-form>
+
+    </div>
+</template>
+
+<script>
+
+export default {
+  name: 'AuditOperation',
+  props: {
+    isDisable:{
+      type:Boolean,
+      default:false
+    },
+    examine:{
+      type:Object
+    }
+  },
+
+  data () {
+    return {
+      examineForm: {
+        planReasonFile: '',
+        oldName: '',
+        flag: '1',
+        approvalOpinion: ''
+      },
+      examineFormRules: {
+        flag: [
+          { required: true, message: '审核结果不能为空', trigger: 'change' }
+        ],
+        approvalOpinion: [
+          { type: 'string', max: 500, message: '审批意见不能超过500个字符', trigger: 'blur' }
+        ]
+      },
+      formdisableflag: false
+
+    }
+  },
+  created () {
+    // 判断穿过来的query里的参数 是不是查看
+    if (this.isDisable) {
+      this.examineForm = this.examine
+      this.formdisableflag = true
+    }
+  },
+  methods: {
+
+    /** 在提交表单的校验 通过继续执行 */
+    submit () {
+      this.isSubmit = false
+      this.$refs.examineForm.validate((valid) => {
+        if (valid) {
+          this.isSubmit = true
+          return true
+        } else {
+          this.$message.warning('请检查表单是否填写正确')
+          return false
+        }
+      })
+    }
+
+  }
+}
+</script>
+
+<style scoped>
+    .AssignButton {
+        font-size: 18px;
+    }
+
+    .AssignButton:hover {
+        cursor: pointer;
+    }
+</style>
@@ -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>