'normal'

src/assets/css/main.css

@@ -63,10 +63,12 @@
 }
 
 .el-popover{
-  margin-top:-60px;
-  margin-left: -20px;
+  margin-top:-52px;
+  margin-left: -30px;
 }
 
+
+
 .brief{
   margin: 10px auto;
 }

src/pages/other/file-search.vue

@@ -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>

src/pages/other/my-file.vue

@@ -18,7 +18,7 @@
       </div>
 
       <div class="main-right">
-        <el-card class="nopad">
+        <!-- <el-card class="nopad"> -->
           <div slot="header" class="clearfix">
             <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
             	<el-form-item :label="selectName">
@@ -33,9 +33,9 @@
           </div>
 
 
-          <el-table :data="list"  border stripe>
+          <el-table :data="list"  border stripe :row-style="{'height':'75px'}">
 
-            <el-table-column label="序号" width="95" prop="articalId" align="center">
+            <el-table-column label="序号" width="95"  prop="articalId" align="center">
               <template v-slot="{row}">
                 <span> 【{{openMap[row.isOpen]}}】{{row.articalId}}</span>
               </template>
@@ -60,21 +60,24 @@
             </el-table-column>
 
             <el-table-column label="操作" width="150" align="center">
-              <template v-slot="{row}">
+              <template v-slot="{row, $index}">
                 <el-button  type="text"  @click="cancelEdit(row)" v-if="row._edit"> 取消 </el-button>
                 <el-button  type="text" style="color: green;" @click="confirmEdit(row)" v-if="row._edit"> 确认 </el-button>
 
 
-                <el-button  type="text" @click="initEdit(row)" v-if="!row._edit"> 改标题 </el-button>
+                <el-button  type="text" @click="initEdit(row)" v-if="!row._edit &&(selectId==5 || selectId==1)"> 改标题 </el-button>
+
+                <!-- look -->
+                <el-button  type="text" @click="editFile(row)" v-if="!row._edit && (selectId==5 || selectId==1)">编辑</el-button>
 
-                <el-button  type="text" @click="download(row)" v-if="!row._edit && selectId==1"> 下载 </el-button>
+                <el-button  type="text" @click="gotoDetail(row)"  v-else-if="!row._edit"> 查看 </el-button>
 
-                 <el-button  type="text" @click="editFile(row)" v-else-if="!row._edit && (selectId==5 || selectId==1)">编辑</el-button>
+                <!-- delete -->
 
                 <el-button v-if="!row._edit &&(selectId==5 || selectId==1) " type="text" style="color:darkorange"  @click="row._delete=true" >删除</el-button>
 
-                <el-popover placement="top" width="150" v-model="row._delete">
-                  <p>删除动作不可逆，你是否确认删除？</p>
+                <el-popover placement="top" width="150"  v-model="row._delete"  :style="{'margin-top': $index>0?'0px':'-60px'}">
+                  <p>你是否确认删除？</p>
                   <div style="text-align: right; top: 0">
                     <el-button size="mini" type="text" @click="row._delete = false">取消</el-button>
                     <el-button type="primary" size="mini" @click="deleteArtical(row)">确定</el-button>
@@ -96,7 +99,7 @@
             :total="total"
             layout="total, sizes, prev, pager, next, jumper"
           ></el-pagination>
-        </el-card>
+        <!-- </el-card> -->
 
       </div>
     </div>