借阅管理 状态style 排序 按钮功能补全

src/assets/styles/lend-manage.scss

@@ -0,0 +1,55 @@
+.no-lend .cell-lend{
+  color:#F65163;
+ border: 1px solid #F65163;
+ padding: 2px 8px;
+ border-radius: 11px;
+}
+.have-lend .cell-lend{
+  color: #fff;
+  padding: 2px 8px;
+ border-radius: 11px;
+ background-color: #F65163;
+}
+.other-lend .cell-lend{
+color:#F65163;
+ border: 1px solid #F65163;
+ padding: 2px 8px;
+ border-radius: 11px;
+ position: relative;
+ display: inline-block;
+ width: 46px;
+ height: 22px;
+ &::after{
+  content: '';
+  display: block;
+  height: 2px;
+  width: 20px;
+  background-color: #F65163;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%,-50%);
+ }
+}
+
+.clear{
+  border-radius: 13px;
+  width: 80px;
+  height: 26px;
+  line-height: 26px;
+  display: inline-block;
+  text-align: center;
+}
+.no-clear .clear{
+  color: #FD8042;
+  border: 1px solid #FD8042;
+}
+.have-clear .clear{
+  color: #1AAE93;
+  border: 1px solid #1AAE93;
+}
+.fail-clear .clear{
+  color: #F65163;
+  border: 1px solid #F65163;
+}
+

src/views/archivesManage/archivesCheck/index.vue

@@ -262,9 +262,6 @@ export default {
   padding: 0;
   margin: 0;
 }
-// ::v-deep .el-dialog{
-//     width: 1340px;
-// }
 
 .el-form{
     display: flex;

src/views/archivesManage/lendManage/borrowerManage/index.vue

@@ -3,8 +3,8 @@
     <head-slot>
       <!-- <crudOperation :permission="permission" /> -->
       <el-button icon="el-icon-plus" size="mini" @click="addFormVisible = true">新增</el-button>
-      <el-button icon="el-icon-edit" size="mini" @click="editFormVisible = true">修改</el-button>
-      <el-button icon="el-icon-delete" size="mini" @click="deleteVisible = true">删除</el-button>
+      <el-button icon="el-icon-edit" size="mini" :disabled="selections.length ? false : true " @click="handelEdit">修改</el-button>
+      <el-button icon="el-icon-delete" size="mini" :disabled="selections.length ? false : true " @click="deleteVisible = true">删除</el-button>
 
       <!-- 搜索 -->
       <el-input
@@ -138,10 +138,10 @@
               style="width: 420px"
             />
           </el-form-item>
-          <el-form-item label="电话号码" prop="tel">
-            <el-input v-model="borrowerForm.tel" style="width: 420px" />
+          <el-form-item label="电话号码" prop="borrowerTel">
+            <el-input v-model="borrowerForm.borrowerTel" style="width: 420px" />
           </el-form-item>
-          <el-form-item label="所属部门" prop="department" class="down-select">
+          <el-form-item label="所属部门" prop="borrowerDepartment" class="down-select">
             <el-select
               v-model="borrowerForm.departmentDatas"
               style="width: 420px"
@@ -157,7 +157,7 @@
               />
             </el-select>
           </el-form-item>
-          <el-form-item label="证件类型" prop="idType" class="down-select">
+          <el-form-item label="证件类型" prop="borrowerIdType" class="down-select">
             <el-select
               v-model="borrowerForm.idType"
               style="width: 420px"
@@ -173,8 +173,8 @@
               />
             </el-select>
           </el-form-item>
-          <el-form-item label="证件号码" prop="idNumber">
-            <el-input v-model="borrowerForm.idNumber" style="width: 420px" />
+          <el-form-item label="证件号码" prop="borrowerIdNum">
+            <el-input v-model="borrowerForm.borrowerIdNum" style="width: 420px" />
           </el-form-item>
           <!-- <el-form-item label="借阅时间" prop="lendDate">
             <date-range-picker style="width: 420px" />
@@ -232,16 +232,11 @@ export default {
   data() {
     return {
       tableData: [],
+      selections: [],
       addFormVisible: false,
       editFormVisible: false,
       deleteVisible: false,
-      borrowerForm: {
-        borrowerName: '',
-        tel: '',
-        department: '',
-        idType: [],
-        idNumber: ''
-      },
+      borrowerForm: {},
       permission: {
         add: ['admin', 'lend:add'],
         edit: ['admin', 'lend:edit'],
@@ -256,8 +251,8 @@ export default {
     getData() {
       this.tableData = data1.rows
     },
-    selectionChangeHandler() {
-      console.log('selectionChangeHandler')
+    selectionChangeHandler(val) {
+      this.selections = val
     },
     clickRowHandler(row) {
       this.$refs.table.toggleRowSelection(row)
@@ -267,6 +262,17 @@ export default {
     },
     handleConfirm() {
       this.deleteVisible = false
+    },
+    handelEdit() {
+      if (this.selections.length === 1) {
+        this.borrowerForm = this.selections[0]
+        this.editFormVisible = true
+      } else {
+        this.$message({
+          message: '只可以选中1条数据进行修改',
+          type: 'warning'
+        })
+      }
     }
   }
 }

src/views/archivesManage/lendManage/components/archiveDetail.vue

@@ -1,15 +0,0 @@
-<template>
-  <div>
-    档案详情
-  </div>
-</template>
-
-<script>
-export default {
-
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>

src/views/archivesManage/lendManage/data1.json

@@ -9,15 +9,16 @@
             "isTitleName":"这是一份文件的标题标题...",
             "isFieldName":"文书-文件-2022",
             "isStoragePath":"库房A-库区A-01列-1节1层-左",
-            "isLendStatus":"待借",
-            "isOperationTime":"2022-05-25 14:02",
-            "borrowerName":"张三",
+            "isLendStatus":"",
+            "isOperationTime":"2022-05-26 14:02",
+            "borrowerName":"李四",
             "borrowDays":"2022-5-25至2022-6-25",
             "borrowGoal":"工作考察",
             "borrowerDepartment":"办公室",
             "borrowerIdType":"身份证",
             "borrowerIdNum":"420880190011115636",
-            "borrowerTel":"027-5955 7085"
+            "borrowerTel":"027-5955 7085",
+            "isWarnState":"已解除"
         },
         {
             "id":"3d6d548d30db426ea3d95d63f589b294",
@@ -35,7 +36,8 @@
             "borrowerDepartment":"办公室",
             "borrowerIdType":"身份证",
             "borrowerIdNum":"420880190011115636",
-            "borrowerTel":"027-5955 7085"
+            "borrowerTel":"027-5955 7085",
+            "isWarnState":"已解除"
         },
         {
             "id":"45ff597e7cc64d11803ac422816b1e23",
@@ -46,14 +48,15 @@
             "isFieldName":"文书-文件-2022",
             "isStoragePath":"库房A-库区A-01列-1节1层-左",
             "isLendStatus":"待借",
-            "isOperationTime":"2022-05-25 14:02",
+            "isOperationTime":"2022-05-27 14:02",
             "borrowerName":"张三",
             "borrowDays":"2022-5-25至2022-6-25",
             "borrowGoal":"工作考察",
             "borrowerDepartment":"办公室",
             "borrowerIdType":"身份证",
             "borrowerIdNum":"420880190011115636",
-            "borrowerTel":"027-5955 7085"
+            "borrowerTel":"027-5955 7085",
+            "isWarnState":"未解除"
         },
         {
             "id":"49106aa0d1534a7a900843d0c4531840",
@@ -64,14 +67,15 @@
             "isFieldName":"文书-文件-2022",
             "isStoragePath":"库房A-库区A-01列-1节1层-左",
             "isLendStatus":"待借",
-            "isOperationTime":"2022-05-25 14:02",
+            "isOperationTime":"2022-05-28 14:02",
             "borrowerName":"张三",
             "borrowDays":"2022-5-25至2022-6-25",
             "borrowGoal":"工作考察",
             "borrowerDepartment":"办公室",
             "borrowerIdType":"身份证",
             "borrowerIdNum":"420880190011115636",
-            "borrowerTel":"027-5955 7085"
+            "borrowerTel":"027-5955 7085",
+            "isWarnState":"未解除"
         },
         {
             "id":"6e604355ff1e47e8b48117dca36420c7",
@@ -89,7 +93,8 @@
             "borrowerDepartment":"办公室",
             "borrowerIdType":"身份证",
             "borrowerIdNum":"420880190011115636",
-            "borrowerTel":"027-5955 7085"
+            "borrowerTel":"027-5955 7085",
+            "isWarnState":"解除失败"
         },
         {
             "id":"6f4a6631d9d3424b960793704f3757b3",
@@ -107,7 +112,8 @@
             "borrowerDepartment":"办公室",
             "borrowerIdType":"身份证",
             "borrowerIdNum":"420880190011115636",
-            "borrowerTel":"027-5955 7085"
+            "borrowerTel":"027-5955 7085",
+            "isWarnState":"解除失败"
         },
         {
             "id":"76e29d5c0a0541bfb1ee9da432183b15",
@@ -136,8 +142,8 @@
             "isFieldName":"文书-文件-2022",
             "isStoragePath":"库房A-库区A-01列-1节1层-左",
             "isLendStatus":"已借",
-            "isOperationTime":"2022-05-25 14:02",
-            "borrowerName":"张三",
+            "isOperationTime":"2022-07-25 14:02",
+            "borrowerName":"王五",
             "borrowDays":"2022-5-25至2022-6-25",
             "borrowGoal":"工作考察",
             "borrowerDepartment":"办公室",
@@ -171,7 +177,7 @@
             "isTitleName":"这是一份文件的标题标题...",
             "isFieldName":"文书-文件-2022",
             "isStoragePath":"库房A-库区A-01列-1节1层-左",
-            "isLendStatus":"待借",
+            "isLendStatus":"",
             "isOperationTime":"2022-05-25 14:02",
             "borrowerName":"张三",
             "borrowDays":"2022-5-25至2022-6-25",
@@ -189,7 +195,7 @@
             "isTitleName":"这是一份文件的标题标题...",
             "isFieldName":"文书-文件-2022",
             "isStoragePath":"库房A-库区A-01列-1节1层-左",
-            "isLendStatus":"待借",
+            "isLendStatus":"",
             "isOperationTime":"2022-05-25 14:02",
             "borrowerName":"张三",
             "borrowDays":"2022-5-25至2022-6-25",
@@ -208,7 +214,7 @@
             "isFieldName":"文书-文件-2022",
             "isStoragePath":"库房A-库区A-01列-1节1层-左",
             "isLendStatus":"待借",
-            "isOperationTime":"2022-05-25 14:02",
+            "isOperationTime":"2022-06-25 14:02",
             "borrowerName":"张三",
             "borrowDays":"2022-5-25至2022-6-25",
             "borrowGoal":"工作考察",

src/views/archivesManage/lendManage/index.vue

@@ -40,7 +40,7 @@
         <span class="tab-right-img" />
       </ul>
       <!-- <component :is="comName" :record-form-visible="recordFormVisible" /> -->
-      <component :is="comName" />
+      <component :is="comName" @callBack="callBack" />
 
     </div>
   </div>
@@ -90,7 +90,6 @@ export default {
     },
     // 重新登记
     callBack(val) {
-      console.log(val, '-------------------')
       this.activeIndex = val.index
     }
   }

src/views/archivesManage/lendManage/lendConfirm/index.vue

@@ -3,7 +3,7 @@
     <headSlot>
       <el-button icon="el-icon-plus" size="mini" :disabled="selections.length ? false : true " @click="lendFormVisible = true">借出</el-button>
       <el-button icon="el-icon-edit" size="mini" @click="handelReRecord">重新登记</el-button>
-      <el-button icon="el-icon-minus" size="mini" @click="handleRemove">移出</el-button>
+      <el-button icon="el-icon-minus" size="mini" :disabled="selections.length ? false : true " @click="handleRemove">移出</el-button>
       <crudOperation style="margin-left:10px" />
     </headSlot>
     <!--表格渲染-->
@@ -12,6 +12,8 @@
       :data="tableData"
       style="min-width: 100%"
       height="calc(100vh - 355px)"
+      :cell-class-name="cell"
+      :default-sort="{ prop: 'isOperationTime', order: 'descending' }"
       @selection-change="selectionChangeHandler"
       @row-click="clickRowHandler"
       @row-dblclick="handleDbClick"
@@ -26,19 +28,29 @@
       <el-table-column prop="borrowerName" label="借阅人" min-width="60" />
       <el-table-column prop="borrowDays" label="借阅时间" min-width="115" />
       <el-table-column prop="borrowGoal" label="借阅目的" min-width="60" />
-      <el-table-column prop="isLendStatus" label="借阅状态" min-width="60" />
-      <el-table-column prop="isOperationTime" label="操作时间" min-width="85" />
+      <el-table-column prop="isLendStatus" label="借阅状态" min-width="60">
+        <template slot-scope="scope">
+          <!-- 已借 / 待借 -->
+          <span class="cell-lend">{{ scope.row.isLendStatus }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column sortable prop="isOperationTime" label="操作时间" min-width="85" />
     </el-table>
     <!--借出弹框-->
     <el-dialog ref="dialogTable" title="借出" :visible.sync="lendFormVisible">
       <span class="dialog-right-top" />
       <span class="dialog-left-bottom" />
-      <el-table :data="selections">
+      <el-table :data="selections" :cell-class-name="cellWarn">
         <el-table-column type="index" label="序号" width="55" />
         <el-table-column prop="isCategoryName" label="所属门类" />
         <el-table-column prop="isArchivesID" label="档号" min-width="140" />
         <el-table-column prop="isTitleName" label="题名" min-width="140" />
-        <el-table-column prop="" label="状态" min-width="85" />
+        <el-table-column prop="isWarnState" label="状态" min-width="85">
+          <template slot-scope="scope">
+            <!-- 已解除 / 未解除/解除失败 -->
+            <span class="clear">{{ scope.row.isWarnState }}</span>
+          </template>
+        </el-table-column>
       </el-table>
       <div slot="footer" class="dialog-footer">
         <el-button disabled>解除警报</el-button>
@@ -110,6 +122,7 @@ export default {
     },
     // 重新登记返回上一级
     handelReRecord() {
+      console.log(11)
       this.$emit('callBack', { index: 0 })
     },
     // 移出
@@ -120,13 +133,31 @@ export default {
       const dialogTableDom = this.$refs.dialogTable
       const targetDialog = dialogTableDom.$refs.dialog
       targetDialog.style.width = '800px'
+    },
+    cell({ row, columnIndex }) {
+      if (row.isLendStatus === '待借' && columnIndex === 10) {
+        return 'no-lend'
+      } else if (row.isLendStatus === '已借' && columnIndex === 10) {
+        return 'have-lend'
+      } else if (row.isLendStatus === '' && columnIndex === 10) {
+        return 'other-lend'
+      }
+    },
+    cellWarn({ row, columnIndex }) {
+      if (row.isWarnState === '已解除' && columnIndex === 4) {
+        return 'no-clear'
+      } else if (row.isWarnState === '未解除' && columnIndex === 4) {
+        return 'have-clear'
+      } else if (row.isWarnState === '解除失败' && columnIndex === 4) {
+        return 'fail-clear'
+      }
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
+@import '~@/assets/styles/lend-manage.scss';
 ::v-deep .el-dialog__footer {
   background-color: #031435;
 }
@@ -135,4 +166,5 @@ export default {
   padding: 0;
   margin: 0;
 }
+
 </style>

src/views/archivesManage/lendManage/lendQuery/index.vue

@@ -45,12 +45,18 @@
       style="min-width: 100%"
       height="calc(100vh - 355px)"
       :data="tableData"
+      :cell-class-name="cell"
       @selection-change="selectionChangeHandler"
       @row-click="clickRowHandler"
     >
       <el-table-column type="selection" width="55" />
       <el-table-column type="index" label="序号" width="55" />
-      <el-table-column prop="isLendStatus" label="借阅状态" min-width="60" />
+      <el-table-column prop="isLendStatus" label="借阅状态" min-width="60">
+        <template slot-scope="scope">
+          <!-- 已借 / 待借 -->
+          <span class="cell-lend">{{ scope.row.isLendStatus }}</span>
+        </template>
+      </el-table-column>
       <el-table-column prop="isFieldName" label="所属门类" min-width="85" />
       <el-table-column prop="isArchivesID" label="档号" min-width="130" />
       <el-table-column prop="isTitleName" label="题名" min-width="130" />
@@ -59,6 +65,7 @@
       <el-table-column prop="borrowerName" label="借阅人" min-width="60" />
       <el-table-column prop="borrowDays" label="借阅时间" min-width="130" />
       <el-table-column prop="borrowGoal" label="借阅目的" min-width="85" />
+      <el-table-column v-if="false" sortable prop="isOperationTime" label="操作时间" min-width="85" />
     </el-table>
     <!-- 分页 -->
     <pagination />
@@ -126,12 +133,22 @@ export default {
     },
     clickRowHandler(row) {
       this.$refs.table.toggleRowSelection(row)
+    },
+    cell({ row, columnIndex }) {
+      if (row.isLendStatus === '待借' && columnIndex === 2) {
+        return 'no-lend'
+      } else if (row.isLendStatus === '已借' && columnIndex === 2) {
+        return 'have-lend'
+      } else if (row.isLendStatus === '' && columnIndex === 2) {
+        return 'other-lend'
+      }
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+@import '~@/assets/styles/lend-manage.scss';
 ::v-deep.input-prepend {
   margin: 0 10px 0 -10px;
   background-color: #021941;

src/views/archivesManage/lendManage/returnArchives/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="to-lend">
     <head-slot>
-      <el-button icon="el-icon-plus" size="mini" @click="returnVisible=true">归还</el-button>
+      <el-button icon="el-icon-plus" size="mini" :disabled="selections.length ? false : true " @click="returnVisible=true">归还</el-button>
       <crudOperation style="margin-left:10px" />
     </head-slot>
     <!--表格渲染-->
@@ -10,6 +10,8 @@
       style="min-width: 100%"
       height="calc(100vh - 355px)"
       :data="tableData"
+      :cell-class-name="cell"
+      :default-sort="{ prop: 'isOperationTime', order: 'descending' }"
       @selection-change="selectionChangeHandler"
       @row-click="clickRowHandler"
     >
@@ -23,8 +25,13 @@
       <el-table-column prop="borrowerName" label="借阅人" min-width="60" />
       <el-table-column prop="borrowDays" label="借阅时间" min-width="115" />
       <el-table-column prop="borrowGoal" label="借阅目的" min-width="60" />
-      <el-table-column prop="isLendStatus" label="借阅状态" min-width="60" />
-      <el-table-column prop="isOperationTime" label="操作时间" min-width="85" />
+      <el-table-column prop="isLendStatus" label="借阅状态" min-width="60">
+        <template slot-scope="scope">
+          <!-- 已借 / 待借 -->
+          <span class="cell-lend">{{ scope.row.isLendStatus }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column sortable prop="isOperationTime" label="操作时间" min-width="85" />
     </el-table>
     <!-- 归还确认 -->
     <el-dialog title="归还确认" :visible.sync="returnVisible" :before-close="handleClose">
@@ -41,6 +48,7 @@
       <span class="dialog-right-top" />
       <span class="dialog-left-bottom" />
       <div class="setting-dialog">
+        <!-- 判断 "归还成功" "当前标签已损坏...." -->
         <p><span style="color:#fff;">当前标签已损坏，请先解除该档案的电子标签绑定</span></p>
         <div slot="footer" class="dialog-footer">
           <el-button type="primary" @click.native="handleConfirmAgain">确定</el-button>
@@ -78,6 +86,7 @@ export default {
   data() {
     return {
       tableData: [],
+      selections: [],
       returnVisible: false,
       returnAgainVisible: false
     }
@@ -89,8 +98,8 @@ export default {
     getData() {
       this.tableData = data1.rows
     },
-    selectionChangeHandler() {
-      console.log('selectionChangeHandler')
+    selectionChangeHandler(val) {
+      this.selections = val
     },
     clickRowHandler(row) {
       this.$refs.table.toggleRowSelection(row)
@@ -102,11 +111,20 @@ export default {
     },
     handleConfirmAgain() {
       this.returnAgainVisible = false
+    },
+    cell({ row, columnIndex }) {
+      if (row.isLendStatus === '待借' && columnIndex === 10) {
+        return 'no-lend'
+      } else if (row.isLendStatus === '已借' && columnIndex === 10) {
+        return 'have-lend'
+      } else if (row.isLendStatus === '' && columnIndex === 10) {
+        return 'other-lend'
+      }
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
+@import '~@/assets/styles/lend-manage.scss';
 </style>

src/views/archivesManage/lendManage/toLend/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="to-lend">
     <headSlot>
-      <el-button icon="el-icon-plus" size="mini" @click="handleRecord">登记</el-button>
-      <el-button icon="el-icon-minus" size="mini" :disabled="selections.length ? false : true " @click="handleRemove">移出</el-button>
+      <el-button icon="el-icon-document-add" size="mini" @click="handleRecord">登记</el-button>
+      <el-button icon="el-icon-document-remove" size="mini" :disabled="selections.length ? false : true " @click="handleRemove">移出</el-button>
       <!-- <button @click="getTableData">测试按钮</button> -->
     </headSlot>
 
@@ -12,7 +12,8 @@
       style="min-width: 100%"
       height="calc(100vh - 355px)"
       :data="tableData"
-      :cell-style="cellStyle"
+      :cell-class-name="cell"
+      :default-sort="{ prop: 'isOperationTime', order: 'descending' }"
       @selection-change="selectionChangeHandler"
       @row-click="clickRowHandler"
       @row-dblclick="handleDbClick"
@@ -27,10 +28,10 @@
       <el-table-column prop="isLendStatus" label="借阅状态" min-width="60">
         <template slot-scope="scope">
           <!-- 已借 / 待借 -->
-          <span class="lend-state">{{ scope.row.isLendStatus }}</span>
+          <span class="cell-lend">{{ scope.row.isLendStatus }}</span>
         </template>
       </el-table-column>
-      <el-table-column prop="isOperationTime" label="操作时间" min-width="85" />
+      <el-table-column sortable prop="isOperationTime" label="操作时间" min-width="85" />
     </el-table>
     <!-- 借阅登记模态框 -->
     <el-dialog
@@ -207,19 +208,13 @@ export default {
     handleRecordConfirm() {
       this.recordFormVisible = false
     },
-    cellStyle({ row, column, rowIndex, columnIndex }) {
-      // console.log(column)
+    cell({ row, columnIndex }) {
       if (row.isLendStatus === '待借' && columnIndex === 7) {
-        console.log(column, '------------')
-        return {
-          color: '#F65163'
-          // border: '1px solid #F65163'
-        }
+        return 'no-lend'
       } else if (row.isLendStatus === '已借' && columnIndex === 7) {
-        return {
-          // background: '#F65163',
-          color: '#fff'
-        }
+        return 'have-lend'
+      } else if (row.isLendStatus === '' && columnIndex === 7) {
+        return 'other-lend'
       }
     }
   }
@@ -227,5 +222,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+@import '~@/assets/styles/lend-manage.scss';
 </style>