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

<template>
  <div class="main">
    <div class="main-body">
      <el-form class="p20" label-width="100px"  label-position="left"
      ref="elForm" :model="info" :rules="rules" >

         <el-form-item label="所属部门" class="mt20" prop="department">
           <el-select v-model="info.department"
            @change="selectDepartment($event)"
            collapse-tags placeholder="请选择"  clearable>
             <el-option
             v-for="item in showDepartments"
             :value="item"
             :key="item.departmentId">
             {{item.department}}
             </el-option>
           </el-select>
         </el-form-item>

         <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-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-form-item label="文件标题" class="mt20" prop="title">
             <el-input class="ipt-select" v-model="info.title"></el-input>
         </el-form-item>

         <el-form-item label="文件简介" class="mt20" prop="brief">
             <el-input class="ipt-select" type="textarea" v-model="info.brief"></el-input>
         </el-form-item>

         <el-form-item label="上传文件"  prop="filename">
            <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-form-item>

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

</template>

<script>
  import UploadFile from "@/components/Upload/uploadFile.vue";
  import data  from '../data/data.js'
  import {mapGetters } from 'vuex'
  import {addArtical} from '@/api/article.js'
  export default {
    name: 'application',
    components:{ UploadFile },
    data() {
      return {
        loading:false,
        isLike: 0,
        dropDownValue:'',
        showDepartments:[],
        categorys:data.categorys,
        info: {
          filename:'',
          departmentId:0,
          category:'',
          department:'',
          title:'',
          isOpen: 1,
          brief:''
        },
        rules: {
          title:[{required:true, message:'请输入标题'}],
          brief:[{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 ]
      }
    },
    beforeMount(){
      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;
      }
    },
    methods:{
      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.push({path:'/my-file'});
              done();
            }else{
              done();
            }
          }
        }).catch((res) => {
          console.log(res)
         });
      },
      onSubmit(){
        this.$refs["elForm"].validate((valid) => {
          if (!valid) return;
          addArtical( this.info ).then(res=>{
            if( res.code == 200){
              this.showFinish()
            }
          })
        })
      }
    }
  }
</script>

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