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

<template>
  <div class="main">
    <div class="main-body">
      <div class="xl_main mt15 mar-B20" v-loading="loading">
        <div class="n-tit">
          <h3>{{info.title}}</h3>

          <h4>
            来源:{{info.department }}   &nbsp;&nbsp;
            类型:{{categorys[info.category] }}  &nbsp;&nbsp;
            时间:{{info.publishTime|toDate}}  &nbsp;&nbsp;
            <span class="ml10"><i class="el-icon-view"></i> {{info.viewCount}}</span>
            <span class="ml10"><i class="el-icon-download"></i> {{info.downloadCount}}</span>
          </h4>
        </div>


        <div>
          <div class="fr">

            <el-button  type="text"  size="small" v-if="isLeader==2 && info.status==1 &&info.isOpen<2"
                    @click="dialogConfirm=true">审核</el-button>
            <el-button  type="text" size="small"  v-if="isLeader==3 && info.status==2 &&info.isOpen<2" 
                    @click="dialogPublish=true">发布</el-button>


            <el-button v-if="!isLike" icon="el-icon-star-off" @click="likeArtical" size="small"> 收藏</el-button>
            <el-button v-else icon="el-icon-star-on" type="info" @click="unLikeArtical" size="small">取消</el-button>
            <el-button  icon="el-icon-download" v-if="isLeader>0 || info.isOpen==1" @click="download" size="small"> 下载</el-button>
          </div>
          <div v-html="info.brief" />
        </div>

        <div>
          <h4 class="p20"> 操作记录 </h4>
          <el-table :data="logs" border stripe v-loading="loading">
            <el-table-column label="时间" prop="createAt" align="center">
              <template slot-scope="{ row }">
                <span >{{row.createAt|toDatetime}}</span>
              </template>
            </el-table-column>

            <el-table-column label="操作人" prop="nickname" align="center">
              <template slot-scope="{ row }">
                {{row.nickname}} - {{actions[row.action]}}
              </template>
            </el-table-column>

            <el-table-column label="备注"  prop="content" align="center">

            </el-table-column>


            <el-table-column label="操作前"  prop="status" align="center">
              <template slot-scope="{ row }">
                {{statusMap[row.oldStatus] }}
              </template>
            </el-table-column>

            <el-table-column label="操作后"  prop="status" align="center" >
              <template slot-scope="{ row }">
                {{statusMap[row.newStatus] }}
              </template>
            </el-table-column>

          </el-table>
        </div>

      </div>
    </div>

    <el-dialog title="科长审核文件" center :visible.sync="dialogConfirm"  >
      <el-form class="p20" label-width="100px"  label-position="left"
        ref="elForm" :model="info" :rules="rules" >

        <el-form-item label="文件标题" class="mt20" prop="category">
           <el-input  v-model="info.title" type="textarea" autosize></el-input>
        </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="category">
           <el-switch :active-value="1" :inactive-value="0" v-model="form.action"></el-switch>
        </el-form-item>

        <el-form-item label="审核意见" class="mt20" prop="category">
           <el-input  v-model="form.content" type="textarea" autosize></el-input>
        </el-form-item>



        <el-form-item >
          <el-button type="warning" @click="dialogConfirm=false" class="btn-md">
            审核取消
          </el-button>
          <el-button type="primary" @click="onConfirm" class="btn-md">
            确认审核
          </el-button>
        </el-form-item>

      </el-form>

    </el-dialog>


    <el-dialog title="分管审核文件" center :visible.sync="dialogPublish"  >
      <el-form class="p20" label-width="100px"  label-position="left"
        ref="elForm" :model="info" :rules="rules" >

        <el-form-item label="文件标题" class="mt20" prop="category">
           <el-input  v-model="info.title" type="textarea" autosize></el-input>
        </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="action">
           <el-switch :active-value="1" :inactive-value="0" v-model="form.action"></el-switch>
        </el-form-item>

        <el-form-item label="审核意见" class="mt20" prop="content">
           <el-input  v-model="form.content" type="textarea" autosize></el-input>
        </el-form-item>



        <el-form-item >
          <el-button type="warning" @click="dialogPublish=false" class="btn-md">
            审核取消
          </el-button>
          <el-button type="primary" @click="onPublish" class="btn-md">
            确认审核
          </el-button>
        </el-form-item>

      </el-form>

    </el-dialog>

    <div style="height: 60px;"></div>
  </div>
</template>

<script>
  import IHeader from "./components/IHeader";
  import IFooter from "./components/IFooter";
  import { authDB } from '@/db'
  import {toDate,toDatetime} from '@/utils/date.js'
  import data from '../data/data.js'
  import {
    getArticalInfo,
    likeArtical,
    unLikeArtical,
    confirmArtical,

    publishArtical
  } from '@/api/article.js'
  import {
    downloadFile,
    downloadArtical,
    applyArtical
  } from '@/api/article.js'

  import {
    download
  } from '@/utils/download.js'
  import {
    mapGetters
  } from "vuex";

  export default {
    name: 'application',
    components: {
      IHeader,
      IFooter
    },
    filters: {
      toDatetime,
      toDate
    },
    data() {
      return {
        loading: false,
        articalId: 0,
        isLeader: 0,
        recommend: [],
        apply_list: [],
        logs:[],
        isLike: 0,
        actions: data.actions,
        openMap: data.openMap,
        statusMap: data.statusMap,
        owners: data.owners,
        categorys: data.categorys,
        dialogConfirm: false,
        dialogPublish: false,
        info: {},
        form:{ action:1,content:'' },
        rules:{}

      }
    },
    computed: {
      ...mapGetters("user", ["userDepartments"])
    },
    created() {
      this.articalId = +this.$route.query.articalId || 0;
      if (this.articalId) {
        this.getArticalInfo()
      }
    },
    methods: {
      download() {
        let articalId = this.articalId
        if (this.isLeader > 0 || this.info.isOpen == 1) {
          downloadFile( {articalId}).then( res=>{
            if( res.code == 200){
              this.$message.successMsg("初始化成功", 1)
              window.open( res.data, "_blank");
            }
          })
        } else {
          this.$message.errorMsg("无权限下载", 1)
        }
      },
      onConfirm(){
        let {departmentId,category, articalId } = this.info;
        let param = {departmentId,category, articalId }
        param.action = +this.form.action
        param.content = this.form.content
        confirmArtical( param ).then( res=>{
          if( res.code == 200){
              this.$message.successMsg("确认成功", 1)
              this.dialogConfirm = false
              this.info.status = 2
          }
        })

      },
      onPublish(){
        let {departmentId,category, articalId } = this.info;
        let param = {departmentId,category, articalId }
        param.action = +this.form.action
        param.content = this.form.content
        publishArtical( param ).then( res=>{
          if( res.code == 200){
            this.$message.successMsg("确认成功", 1)
            this.dialogPublish = false
            this.info.status = 3
          }
        })
      },
      applyDownload() {
        let param = {
          articalId: this.articalId
        }
        this.loading = true;
        applyArtical(param).then(res => {
          if (res.code == 200) {
            this.$message.successMsg("申请成功", 1)
          }
          this.loading = false;
        }).catch(() => {
          this.loading = false
        })
      },
      likeArtical() {
        let param = {
          articalId: this.articalId
        }
        this.loading = true;
        likeArtical(param).then(res => {
          if (res.code == 200) {
            this.$message.successMsg("收藏成功", 1)
            this.isLike = 1
          }
          this.loading = false;
        }).catch(() => {
          this.loading = false
        })
      },
      unLikeArtical() {
        let param = {
          articalId: this.articalId
        }
        this.loading = true;
        unLikeArtical(param).then(res => {
          console.log("res", res)
          if (res.code == 200) {
            this.$message.successMsg("取消成功", 1)
            this.isLike = 0
          }
          this.loading = false;
        }).catch(() => {
          this.loading = false
        })
      },
      getArticalInfo() {
        let param = {
          articalId: this.articalId
        }
        getArticalInfo(param).then(res => {
          if (res.code == 200) {
            this.info = res.data.info;
            for (let i in this.userDepartments) {
              if (this.userDepartments[i].departmentId == this.info.departmentId) {
                this.isLeader = this.userDepartments[i].isLeader;
              }
            }
            this.logs = res.data.logs||[];
            this.recommend = res.data.recommend || [];
            this.apply_list = res.data.apply_list || [];
            this.isLike = res.data.isLike || 0;
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import  "../../styles/main.css";

  .nopad{
      border-top: 1px dashed #ccc;
      padding: 0px !important;
      // border: none;
      height: 100px;
  }



</style>