【修改】修改报告上传流程

src/views/reportProcess/components/reportForm.vue

@@ -2,14 +2,6 @@
   <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">
@@ -28,22 +20,52 @@
       <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-input  readonly :disabled="formControl" v-model="form.departmentName" @click.na.native="handleClick"   placeholder="请选择报告所属部门"
+            ></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 dict['classified_level']" :key="item.itemValue" :label="item.itemName"
-                         :value="item.itemValue">
-              </el-option>
-            </el-select>
+          <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="9">
+        <el-col :span="9" >
+          <el-form-item label="报告涉密等级:" prop="confidentialLevel">
+            <el-select :disabled="formControl" v-model="form.confidentialLevel" placeholder="请选择报告涉密等级" @change="reportLevel">
+              <el-option v-for="item in privacyLevelOptions " :key="item.value" :label="item.value"
+                         :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="9" :offset="6" v-if="isShowTime">
+          <el-form-item label="保密到期日期:" prop="secrecyLast">
+          <el-date-picker :disabled="formControl" v-model="form.secrecyLast" type="year" value-format="yyyy"
+                          placeholder="请选择保密到期日期"
+                          prefix-icon="null" :picker-options="proOptions"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+
+        <el-col :span="9" >
+          <el-form-item label="报告隐私等级:" prop="privacyLevel">
+            <el-select :disabled="formControl" v-model="form.privacyLevel" placeholder="请选择报告隐私等级">
+              <el-option v-for="item in  confidentialLevelOptions" :key="item.value" :label="item.value"
+                         :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="9" :offset="6">
           <el-form-item label="关键词:" prop="tags">
             <vue-tags-input :disabled="formControl" :class="{'is-diable':formControl}" placeholder="请输入关键词"
                             v-model="form.tags" :tags="tags"
@@ -64,30 +86,10 @@
                            }"/>
           </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  dict['privacy_level']" :key="item.itemValue" :label="item.itemName" :value="item.itemValue">
-              </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-col :span="24">
           <el-form-item label="内容摘要:" prop="mainContent">
             <el-input :disabled="formControl" v-model="form.mainContent" placeholder="请填写内容摘要" type="textarea"
                       maxlength="500"></el-input>
@@ -95,63 +97,45 @@
         </el-col>
       </el-row>
       <el-row>
-        <el-col :span="9">
+        <el-col :span="5">
           <el-form-item label="上传报告:" prop="fileId">
-            <el-upload action="#" :http-request="(params) => uploadFile(params)" :show-file-list="true"
+            <el-upload action="#" :http-request="(params) => uploadFile(params)" :show-file-list="false"
                        :before-upload="beforeUploadFile" :on-remove="handleRemove"
                        :file-list="fileList">
-              <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" @click="openDialog">权限设置</el-button>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <el-dialog title="权限设置" :visible.sync="dialogUser" width="950px" :close-on-click-modal="false"
-               :close-on-press-escape="false" modal-append-to-body append-to-body>
-      <div class="user-form">
-        <div style="text-align: center">
-          <newTranslate
-            @loadMore="loadMore"
-            style="text-align: left; display: inline-block"
-            filterable
-            v-model="listOne"
-            :titles="['全部人员', '预览权限人员','预览和下载权限人员']"
-            :props="{
-              key: 'value',
-              label: 'desc'
-            }"
-            :loadingMore="loadingMore"
-            :data="allUser"
-            :listTwo.sync="listTwo"
-            :button-texts="['全部', '预览', '预览与下载']"
-          ></newTranslate>
-        </div>
-        <div class="done">
-          <el-button type="default" @click="closeD">取消</el-button>
-          <el-button type="primary" v-if="!formControl" @click="saveCheck">确定</el-button>
+              <el-button class="uploadBtn" :disabled="formControl">选择文件</el-button>
 
-        </div>
-      </div>
-    </el-dialog>
+            </el-upload>
+
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+        <span class="uploadFile" v-if="form.fileName">
+                <span :title="fileList[0].name">{{fileList[0].name}}</span>
+                 <i class="el-icon-cloudy iconstyle"></i>
+                 <i class="el-icon-delete iconstyle" @click="delFile"></i>
+              </span>
+        </el-col>
+      </el-row>
+
+    </el-form>
+    <orgTable :visible.sync="visibleOrgTable" title="人员列表" dialog-model :config="{
+      value: orgTableVal,
+        valueName: orgTableValName
+     }" :workNumFlag="true" :isOrg="true" :maxSelected="100" @confirm="isTreeOk"></orgTable>
   </div>
 </template>
 <script>
 import {fileType} from '@/utils/fileType'
 import newTranslate from "../../../components/newTranslate";
 import VueTagsInput from '@johmun/vue-tags-input';
-
+import orgTable from '@/components/OrgTable'
+import {privacyLevelOptions,confidentialLevelOptions} from '@/utils/Enum/enum'
 export default {
-  dicts:['classified_level','privacy_level'],
+  dicts: ['classified_level', 'privacy_level'],
   components: {
     VueTagsInput,
-    newTranslate
+    newTranslate,
+    orgTable
   },
   props: {
 
@@ -169,14 +153,18 @@ export default {
   },
   data() {
     return {
-      loadingMore:false,
+      privacyLevelOptions,
+      confidentialLevelOptions,
+      orgTableVal:'',
+      orgTableValName: '',
+      visibleOrgTable:false,
+      isShowTime:false, //是否显示日期
+      loadingMore: false,
       listTwo: [], //存储下载预览的
       allUser: [],  //存储全部的
       listOne: [1],
       dialogUser: false,
-      confidentialLevelOptions: [],
       cascaderOptions: [],
-      privacyLevelOptions: [],
       tags: [],
       pickerOptions: {
         disabledDate(time) {
@@ -185,7 +173,7 @@ export default {
       },
       form: {},
       processFormRule: {
-        fileId:[
+        fileId: [
           {
             required: true,
             message: "上传报告不能为空",
@@ -242,25 +230,57 @@ export default {
         pageNo: 1,
         pageSize: 10
       },
-      fileList:[]
+      fileList: []
     }
   },
-  watch:{
-    processForm(val){
-      debugger
-      this.form=this.processForm
+  watch: {
+    processForm(val) {
+      this.form = this.processForm
     }
   },
   methods: {
-    loadMore(){
+    handleClick(){
+      this.orgTableVal=this.form.department
+      this.orgTableValName=this.form.departmentName
+      this.visibleOrgTable=true
+    },
+    isTreeOk(checkedList){
+      const parts = []
+      const partsName = []
+      checkedList.map((item, index) => {
+        parts.push(item.id)
+        partsName.push(item.orgName)
+      })
+      this.qcrList = checkedList
+      this.form.department = parts.toString()
+      this.form.departmentName = partsName.toString()
+
+    },
+    delFile() {
+      this.fileList=[]
+      this.form.fileName = '';
+      this.form.fileId = '';
+    },
+    reportLevel(item){
+      let imList=['普通商密','核心商密']
+
+     if( imList.indexOf(this.form.confidentialLevel)>-1){
+       this.isShowTime=true
+       this.form.secrecyLast = ''
+     }else{
+       this.isShowTime=false
+       this.form.secrecyLast = ''
+     }
+    },
+    loadMore() {
       this.q.pageNo++
       this.getAllPerson()
     },
     closeD() {
       if (this.$route.query.isBegin || this.$route.query.isDraft) {
-        this.listOne=[]
-        this.listTwo=[]
-      }else{
+        this.listOne = []
+        this.listTwo = []
+      } else {
 
       }
       this.dialogUser = false
@@ -284,30 +304,31 @@ export default {
             }
             return obj
           })
-          this.form.powerList=[...list1,...list2]
+          this.form.powerList = [...list1, ...list2]
           this.dialogUser = false
         } else {
-        //如果是发起人编辑节点
-        let list1 = this.listOne.map(item => {
-          let obj = {
-            userId: item.id,
-            power: 1
-          }
-          return obj
-        })
-        let list2 = this.listTwo.map(item => {
-          let obj = {
-            userId: item.id,
-            power: 2
-          }
-          return obj
-        })
-        this.form.powerList = [...list1, ...list2]
+          //如果是发起人编辑节点
+          let list1 = this.listOne.map(item => {
+            let obj = {
+              userId: item.id,
+              power: 1
+            }
+            return obj
+          })
+          let list2 = this.listTwo.map(item => {
+            let obj = {
+              userId: item.id,
+              power: 2
+            }
+            return obj
+          })
+          this.form.powerList = [...list1, ...list2]
+        }
+      } else {
       }
-    }else{}
 
-  },
-  //获取全部人员
+    },
+    //获取全部人员
     getAllPerson() {
       this.$api.user.sysUserList(this.q).then(({data}) => {
         let newlist = data.records.map(item => {
@@ -318,7 +339,7 @@ export default {
           }
           return obj
         })
-        this.allUser=[...this.allUser,...newlist]
+        this.allUser = [...this.allUser, ...newlist]
         this.total = data.total
         this.q.pageNo = data.current
         this.q.pageSize = data.size
@@ -326,77 +347,76 @@ export default {
           this.q.pageNo = 1
           this.sysUserList()
         }
-        this.loadingMore=false
+        this.loadingMore = false
       })
     },
-  handleChange(value, direction, movedKeys) {
-    console.log(value, direction, movedKeys);
-  },
-  openDialog() {
-    this.dialogUser = true
-  },
+    handleChange(value, direction, movedKeys) {
+      console.log(value, direction, movedKeys);
+    },
+    openDialog() {
+      this.dialogUser = true
+    },
     handleRemove(file, fileList) {
       console.log(file, fileList);
-      this.form.fileName ='';
+      this.form.fileName = '';
       this.form.fileId = '';
-      this.fileList=[]
+      this.fileList = []
     },
-  //用递归方式去除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);
+    //用递归方式去除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;
+        this.fileList = [data]
+      })
+    },
+    // 上传文件前
+    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
     }
-    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;
-      this.fileList=[data]
-    })
-  },
-  // 上传文件前
-  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()
-  {
+  mounted() {
     this.updateList()
     this.getAllPerson()
   }
@@ -448,5 +468,30 @@ export default {
     }
   }
 }
+.uploadBtn {
+  vertical-align: super;
+}
+.uploadFile{
+  margin-left: -35px;
+  height: 36px;
+  display: inline-block;
+  span{
+    display: inline-block;
+    color:#555;
+    max-width: 200px;
+    font-size: 15px;
+    word-break: keep-all;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  .iconstyle{
+  margin-left: 5px;
+    font-size: 25px;
+    vertical-align: center;
+    line-height: 40px;
+    color: #555;
+    cursor: pointer;
+  }
+}
 
 </style>