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

<template>
  <div class="main">
    <div class="main-body">

      <el-form class="pt20" label-width="55px" label-position="center" ref="elForm" :model="searchInfo">
        <el-row>

          <el-col :span="5">
            <el-form-item label="部门">
              <el-select v-model="searchInfo.department" collapse-tags placeholder="请选择" style="width: 160px;" @clear="selectDepartment({})"
                clearable>
                <div class="el-input" style="width:90%;margin-left:5%;">
                  <input type="text" placeholder="请输入" class="el-input__inner" v-model="dropDownValue">
                </div>
                <el-option v-for="(item,index) in userDepartments" :value="item.departmentId" @click.native="selectDepartment(item)"
                  :key="index" :label="item.department"></el-option>
              </el-select>

            </el-form-item>


          </el-col>

          <el-col :span="5">
            <el-form-item label="分类">
              <el-select v-model="searchInfo.category" collapse-tags placeholder="请选择" style="width: 160px;" 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="4">
            <el-form-item label="年份">
              <el-date-picker v-model="searchInfo.bucket" type="year" format="yyyy" value-format="yyyy" clearable></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="标题">
              <el-input placeholder="" v-model="searchInfo.keyword" clearable></el-input>
            </el-form-item>

          </el-col>

          <el-col :span="2">
            <el-form-item label-width="0px">
              <el-button @click="handleSearch" type="primary">搜索</el-button>
            </el-form-item>

          </el-col>

        </el-row>
      </el-form>

      <div class="p10">
        <el-table :data="list" border stripe :row-style="{'height':'75px'}">
          <el-table-column label="序号" min-width="50" prop="articalId">
            <template v-slot="{row}">
              <span> 【{{openMap[row.isOpen]}}】{{row.articalId}}</span>
            </template>
          </el-table-column>

          <el-table-column label="文件标题" min-width="200" prop="title">
          </el-table-column>

          <el-table-column label="科室" min-width="50" prop="department">
            <template v-slot="{row}">
              <span> {{departmentMap[row.departmentId]}}</span>
            </template>
          </el-table-column>

          <el-table-column label="分类" min-width="50" prop="category">
            <template v-slot="{row}">
              <span> {{categorys[row.category]}}</span>
            </template>
          </el-table-column>


          <el-table-column align="center" min-width="60" label="操作" class-name="small-padding fixed-width">
            <template slot-scope="{row, $index}">
              <el-button size="small" type="text" @click="applyDoc(row)">详情</el-button>

              <el-button size="small" v-if="isLeader(row.departmentId)" style="color:darkorange" type="text" @click="row._delete=true">删除</el-button>

              <el-popover placement="top" width="160" v-model="row._delete">
                <p style="height: 20px;">你是否确认删除？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="row._delete = false">取消</el-button>
                  <el-button type="primary" size="mini" @click="deleteArtical(row)">确定</el-button>
                </div>
              </el-popover>

            </template>
          </el-table-column>
        </el-table>

        <el-pagination :current-page="page" :page-size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :page-sizes="[10, 30, 50, 100]" :style="{float:'center',padding:'20px'}" :total="total" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import IHeader from "./components/IHeader";
  import IFooter from "./components/IFooter";
  import data from '../data/data.js'
  import {
    getArticalList,
    deleteArtical
  } from '@/api/article.js'
  import {
    mapGetters
  } from "vuex";

  export default {
    name: 'application',
    components: {
      IHeader,
      IFooter
    },
    data() {
      return {
        list: [],
        departmentId: 0,
        pageSize: 10,
        page: 1,
        total: 0,
        dropDownValue: '',
        showDepartments: data.departs,
        categorys: data.categorys,
        openMap: data.openMap,
        searchInfo: {
          keyword: '',
          department: '',
          bucket: '',
          category: ''
        }

      }
    },
    computed: {
      ...mapGetters("user", ["userDepartments", "departmentMap"])
    },
    watch: {
      dropDownValue(val) {
        this.showDepartments = this.userDepartments.filter(item => {
          return item.department.indexOf(val) > -1
        })
      },
      "searchInfo.category"(val) {
        this.page = 1
        this.getArticalList()
      },
      "searchInfo.bucket"(val) {
        this.page = 1
        this.getArticalList()
      }
    },
    created() {
      this.searchInfo.category = this.$route.query.category || '';
      this.searchInfo.keyword = this.$route.query.keyword || '';
      this.departmentId = +this.$route.query.departmentId || 0;
      if (!this.departmentId) {
        this.departmentId = localStorage.getItem("@departmentId") || 0
      }
      let department = data.getDepart(this.departmentId, this.userDepartments)
      this.searchInfo.department = department.department || ''
      this.getArticalList()
    },
    methods: {
      okBucket(val) {
        this.searchInfo.bucket = val.bucket;
        this.handleSearch()
      },
      isLeader(departmentId) {
        return data.getLeader(departmentId, this.userDepartments) > 1;
      },
      handleSearch() {
        this.page = 1
        this.getArticalList()
      },
      handleSizeChange(size) {
        this.page = 1
        this.pageSize = size
        this.getArticalList()
      },
      handleSearch() {
        this.page = 1
        this.getArticalList()
      },
      handleCurrentChange(page) {
        this.page = page
        this.getArticalList()
      },
      selectDepartment(item) {
        this.departmentId = +item.departmentId || 0
        this.page = 1
        localStorage.setItem("@departmentId", this.departmentId)
        this.getArticalList()
      },
      deleteArtical(row) {
        deleteArtical({
          articalId: row.articalId
        }).then(res => {
          if (res.code == 200) {
            row._delete = false
            row.status = 4
            row.isOpen = 2
          }
        })
      },
      applyDoc(item) {
        let query = {
          articalId: item.articalId
        }
        this.$router.push({
          path: '/file-info',
          query
        })
      },
      getArticalList() {
        let param = {
          departmentId: +this.departmentId || 0,
          keyword: this.searchInfo.keyword,
          category: this.searchInfo.category,
          page: this.page,
          bucket: this.searchInfo.bucket || '',
          pageSize: this.pageSize
        }
        getArticalList(param).then(res => {
          if (res.code == 200) {
            let list = res.data.list || [];
            this.list = list.map(item => {
              item._delete = false;
              return item
            });

            this.total = res.data.total;
          }
        })
      }

    }
  }
</script>

<style lang="scss" scoped>
  .ipt-select {
    width: 500px;
  }



  // .el-card{
  //   color: #1890ff;
  // }
  // .el-card__header{
  //   padding: 15px 20px;
  // }
  // .el-menu-vertical-demo:not(.el-menu--collapse) {
  //   width: 200px;
  //   min-height: 400px;
  // }
</style>