|
|
@@ -1,296 +1,265 @@
|
|
|
<template>
|
|
|
<div class="main">
|
|
|
<div class="main-body">
|
|
|
- <el-card class="box-card" style="margin-bottom: 60px;">
|
|
|
- <div slot="header" class="clearfix" >
|
|
|
- <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
|
|
|
- <el-form-item label="部门">
|
|
|
- <el-select v-model="searchInfo.department" collapse-tags placeholder="请选择"
|
|
|
- style="width: 130px;"
|
|
|
- @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-form class="pt20" label-width="55px" label-position="center" ref="elForm" :model="searchInfo">
|
|
|
+ <el-row>
|
|
|
|
|
|
- <el-form-item label="分类">
|
|
|
- <el-select v-model="searchInfo.category" collapse-tags placeholder="请选择" style="width: 130px;" clearable>
|
|
|
- <el-option v-for="(item,index) in categorys"
|
|
|
- :value="index" :key="index" :label="item"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
+ <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-form-item label="年份">
|
|
|
- <IBucket placeholder="年份"
|
|
|
- :info="searchInfo.bucket"
|
|
|
- :category="searchInfo.category"
|
|
|
- :department_id="departmentId"
|
|
|
- @select="okBucket"
|
|
|
- clearable style="width: 100px;" >
|
|
|
- </IBucket>
|
|
|
- </el-form-item>
|
|
|
|
|
|
- <el-form-item label="标题">
|
|
|
- <el-input placeholder="" v-model="searchInfo.keyword" clearable style="width: 300px;" ></el-input>
|
|
|
- </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-form-item>
|
|
|
- <el-button @click="handleSearch" type="primary">搜索</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
+ </el-col>
|
|
|
|
|
|
- <el-table :data="list" border stripe>
|
|
|
- <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-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-table-column label="文件标题" min-width="200" prop="title">
|
|
|
- </el-table-column>
|
|
|
+ </el-col>
|
|
|
|
|
|
- <el-table-column label="科室" min-width="50" prop="department">
|
|
|
- <template v-slot="{row}">
|
|
|
- <span> {{departmentMap[row.departmentId]}}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
+ <el-col :span="2">
|
|
|
+ <el-form-item label-width="0px">
|
|
|
+ <el-button @click="handleSearch" type="primary">搜索</el-button>
|
|
|
+ </el-form-item>
|
|
|
|
|
|
- <el-table-column label="分类" min-width="50" prop="category">
|
|
|
- <template v-slot="{row}">
|
|
|
- <span> {{categorys[row.category]}}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
+ </el-col>
|
|
|
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
|
|
|
- <el-table-column
|
|
|
- align="center"
|
|
|
- min-width="60"
|
|
|
- label="操作"
|
|
|
- class-name="small-padding fixed-width"
|
|
|
- >
|
|
|
- <template slot-scope="{row}">
|
|
|
- <el-button
|
|
|
- size="small"
|
|
|
- type="text"
|
|
|
- @click="applyDoc(row)"
|
|
|
- >详情</el-button>
|
|
|
+ <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-button
|
|
|
- size="small"
|
|
|
- v-if="isLeader(row.departmentId)"
|
|
|
- style="color:darkorange"
|
|
|
- type="text"
|
|
|
- @click="row._delete=true"
|
|
|
- >删除</el-button>
|
|
|
+ <el-table-column label="文件标题" min-width="200" prop="title">
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- <el-popover placement="top" width="160" v-model="row._delete">
|
|
|
- <p>删除动作不可逆，你是否确认删除？</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>
|
|
|
+ <el-table-column label="科室" min-width="50" prop="department">
|
|
|
+ <template v-slot="{row}">
|
|
|
+ <span> {{departmentMap[row.departmentId]}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
+ <el-table-column label="分类" min-width="50" prop="category">
|
|
|
+ <template v-slot="{row}">
|
|
|
+ <span> {{categorys[row.category]}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- <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>
|
|
|
- </el-card>
|
|
|
+ <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 IBucket from "./components/IBucket";
|
|
|
-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,
|
|
|
- IBucket
|
|
|
- },
|
|
|
- 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:''
|
|
|
- }
|
|
|
+ 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";
|
|
|
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters("user", ["userDepartments","departmentMap"])
|
|
|
- },
|
|
|
- watch:{
|
|
|
- dropDownValue(val){
|
|
|
- this.showDepartments = this.userDepartments.filter( item=>{
|
|
|
- return item.department.indexOf( val )>-1
|
|
|
- })
|
|
|
+ export default {
|
|
|
+ name: 'application',
|
|
|
+ components: {
|
|
|
+ IHeader,
|
|
|
+ IFooter
|
|
|
},
|
|
|
- "searchInfo.category"(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()
|
|
|
+ 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: ''
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
},
|
|
|
- handleSearch(){
|
|
|
- this.page = 1
|
|
|
- this.getArticalList()
|
|
|
+ computed: {
|
|
|
+ ...mapGetters("user", ["userDepartments", "departmentMap"])
|
|
|
},
|
|
|
- handleCurrentChange(page){
|
|
|
- this.page = page
|
|
|
- this.getArticalList()
|
|
|
+ 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()
|
|
|
+ }
|
|
|
},
|
|
|
- selectDepartment(item){
|
|
|
- this.departmentId = +item.departmentId||0
|
|
|
- this.page =1
|
|
|
- localStorage.setItem("@departmentId", this.departmentId)
|
|
|
+ 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()
|
|
|
},
|
|
|
- deleteArtical( row ){
|
|
|
- deleteArtical( {articalId: row.articalId}).then(res=>{
|
|
|
- if( res.code == 200){
|
|
|
- row._delete = false
|
|
|
- row.status = 4
|
|
|
- row.isOpen = 2
|
|
|
+ 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
|
|
|
}
|
|
|
- })
|
|
|
- },
|
|
|
- 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
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
- 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>
|
|
|
- .el-breadcrumb{
|
|
|
- display: inline-block;
|
|
|
- padding-left: 10px;
|
|
|
- }
|
|
|
- .box-card{
|
|
|
- margin-bottom: 20px;
|
|
|
+ .ipt-select {
|
|
|
+ width: 500px;
|
|
|
}
|
|
|
- .my-autocomplete {
|
|
|
- li {
|
|
|
- line-height: normal;
|
|
|
- padding: 7px;
|
|
|
|
|
|
- .name {
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .addr {
|
|
|
- font-size: 12px;
|
|
|
- color: #b4b4b4;
|
|
|
- }
|
|
|
|
|
|
- .highlighted .addr {
|
|
|
- color: #ddd;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .el-card__body .text{
|
|
|
- margin: 5px 0;
|
|
|
- }
|
|
|
|
|
|
- .el-card{
|
|
|
- color: #1890ff;
|
|
|
- }
|
|
|
- .el-card__header{
|
|
|
- padding: 15px 20px;
|
|
|
- }
|
|
|
- .el-menu-vertical-demo:not(.el-menu--collapse) {
|
|
|
- width: 200px;
|
|
|
- min-height: 400px;
|
|
|
- }
|
|
|
+ // .el-card{
|
|
|
+ // color: #1890ff;
|
|
|
+ // }
|
|
|
+ // .el-card__header{
|
|
|
+ // padding: 15px 20px;
|
|
|
+ // }
|
|
|
+ // .el-menu-vertical-demo:not(.el-menu--collapse) {
|
|
|
+ // width: 200px;
|
|
|
+ // min-height: 400px;
|
|
|
+ // }
|
|
|
</style>
|
