smoa_web/src/pages/other/file-add.vue

<template>
  <div class="main">
    <div class="main-body">
      <el-form class="p20" label-width="90px"  label-position="center"
      ref="elForm" :model="info" :rules="rules" >
        <el-row>
          <el-col :span="6" >
            <el-form-item label="所属部门" class="mt20" prop="department" >
             <el-select v-model="info.department"
              @change="selectDepartment($event)"
              collapse-tags placeholder="请选择"   :disabled="info.articalId?true:false" clearable>
               <el-option
               v-for="item in showDepartments"
               :value="item"
               :key="item.departmentId">
               {{item.department}}
               </el-option>
             </el-select>

            </el-form-item>
          </el-col>

          <el-col :span="6">
             <el-form-item label="文件分类" class="mt20" prop="category">
                 <el-select v-model="info.category" collapse-tags placeholder="请选择"  clearable>
                   <el-option v-for="(item,index) in categorys"
                   :value="index" :key="index" :label="item"></el-option>
                 </el-select>
             </el-form-item>
          </el-col>

          <el-col :span="5">
             <el-form-item label="选择年度" class="mt20" prop="bucket">
                 <el-date-picker  v-model="info.bucket" type="year"
                    format="yyyy" value-format="yyyy"  clearable></el-date-picker>
             </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="是否公开" class="mt20" prop="category">
                <el-switch :active-value="1" :inactive-value="0" v-model="info.isOpen"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>

         <el-form-item label="文件标题"  prop="title">
             <el-input  v-model="info.title" type="text"></el-input>
         </el-form-item>

        <el-form-item label="上传附件"  prop="filename">

            <span>
             <upload-file  placeholder="上传文档"  @rmImage="info.filename=''"  @onFinish="onUpload"/>
             <span style="float: left;"> {{info.filename}}</span>
            </span>

        </el-form-item>


         <el-form-item label="" class="mt20" prop="brief" label-width="0">
           <tinymce v-model="info.brief" :height="500" :width="980" />
             <!-- <el-input class="ipt-select" type="textarea" v-model="info.brief"></el-input> -->
         </el-form-item>

         <el-form-item label="上传附件"  prop="filename" v-if="info.articalId==0">
            <upload-file  placeholder="上传文档"  @rmImage="info.filename=''"  @onFinish="onUpload"/>
         </el-form-item>

          <el-form-item label="">
              <el-button type="primary" @click="onSubmit" class="btn-md">
                提交文件
              </el-button>

              <el-button type="primary" @click="preview(info.filename )" v-if="info.articalId>0" class="btn-md">
                预览附件
              </el-button>

          </el-form-item>

      </el-form>
    </div>
  </div>

</template>

<script>
  import UploadFile from "@/components/Upload/uploadFile.vue";
  import Tinymce from "@/components/Tinymce/index.vue";
  import data  from '../data/data.js'
  import {mapGetters } from 'vuex'
  import {addArtical,getArticalInfo, editArtical} from '@/api/article.js'

  export default {
    name: 'application',
    components:{ UploadFile,Tinymce },
    data() {
      return {
        loading:false,
        isLike: 0,
        articalId:0,
        dropDownValue:'',
        showDepartments:[],
        categorys:data.categorys,
        isLeader:0,
        info: {
          filename:'',
          departmentId:0,
          category:'',
          department:'',
          title:'',
          isOpen: 1,
          brief:''
        },
        rules: {
          title:[{required:true, message:'请输入标题'}],
          brief:[{required:true, message:'请输入简介'}],
          bucket:[{required:true, message:'请输入年度'}],
          category:[{required:true, message:'请输入选择分类'}],
          isOpen:[{required:true, message:'请'}],
          department:[{required:true, message:'请选择部门'}],
          filename:[{required:true, message:'请上传文件'}]
        }
      }
    },
    computed: {
    	...mapGetters("user", ["userDepartments"])
    },
    filters:{
      leader(val){
        return data.owners[ val ]
      }
    },
    created(){
      this.articalId = +this.$route.query.articalId;
      if( this.articalId){
        this.loadArtical(  this.articalId )
      }
      this.initShowDepartment()

    },
    methods:{
      initShowDepartment(){
        this.showDepartments = this.userDepartments.filter( item=>{
          return item.isLeader == 1
        })
        if( this.showDepartments.length >0){
          let department = this.showDepartments[0];
          this.info.departmentId = department.departmentId
          this.info.department = department.department;
        }
      },
      useIframe(){
        let {filename} = this.info;
        this.info.brief = `<p><iframe src="${data.preview}${filename}" style="width:100%;height:800px"></iframe></p>`;
      },
      loadArtical( articalId ){
         getArticalInfo({articalId}).then(res => {
           if (res.code == 200) {
              this.info = res.data.info;
              this.isLeader=res.data.isLeader
              if( this.isLeader < 1){
                let query= {articalId: articalId }
                this.$router.push( {path: '/file-info', query})
                return;
              }
              this.initShowDepartment()
           }
         })
      },
      onUpload(filename){
        this.info.filename = filename;
      },
      selectDepartment(item){
        this.info.departmentId = +item.departmentId;
        this.info.department = item.department
      },
      showFinish(){
        let that = this
        this.$msgbox({
          title: "提交成功",
          message: "恭喜你-提交成功",
          showCancelButton: true,
          cancelButtonText:"继续提交文件",
          confirmButtonText: "回到我的文件",
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              that.$router.back()
              // push({path:'/my-file'});

              done();
            }else{
              done();
            }
          }
        }).catch((res) => {
          console.log(res)
         });
      },
      preview(filename){
        window.open( "http://smoa.ndjsxh.cn:8888/preview/"+filename)
      },
      onSubmit(){
        this.$refs["elForm"].validate((valid) => {
          if (!valid) return;
          let {articalId, category,brief, title, isOpen,filename,bucket } = this.info;

          if( !articalId){
            addArtical( this.info ).then(res=>{
              if( res.code == 200){
                this.showFinish()
              }
            })
          }else{
            editArtical( {articalId, category, brief, title, isOpen,filename,bucket }).then( res=>{
              if( res.code == 200){
                this.$router.go(-1);
              }
            })
          }
        })
      }
    }
  }
</script>

<style>
  .ipt-select{
    width: 500px;
  }
</style>