回收站基础页面创建 借阅管理原型更新暂改

src/views/archivesManage/archivesCheck/data1.json

@@ -0,0 +1,103 @@
+{
+  "total":8,
+  "rows":[
+      {
+          "id":"29f16d62bc7242d5ba8dc84de5451f93",
+          "isCheckNum":"PD-202205250840",
+          "isContainPath":"父区域-子区域，父区域-子区域1",
+          "isCheckState":"已执行",
+          "isStoreNum":"233",
+          "isCheckedNum":"230",
+          "isNoCheckNum":"3",
+          "isLendNum":"111",
+          "isMisplaceNum":"20",
+          "isBuildTime":"2022-5-25  08:40"
+      },
+      {
+          "id":"3d6d548d30db426ea3d95d63f589b294",
+          "isCheckNum":"PD-202205250840",
+          "isContainPath":"父区域-子区域，父区域-子区域1",
+          "isCheckState":"已执行",
+          "isStoreNum":"233",
+          "isCheckedNum":"230",
+          "isNoCheckNum":"3",
+          "isLendNum":"111",
+          "isMisplaceNum":"20",
+          "isBuildTime":"2022-5-25  08:41"
+      },
+      {
+          "id":"45ff597e7cc64d11803ac422816b1e23",
+          "isCheckNum":"PD-202205250840",
+          "isContainPath":"父区域-子区域，父区域-子区域1",
+          "isCheckState":"待执行",
+          "isStoreNum":"233",
+          "isCheckedNum":"230",
+          "isNoCheckNum":"3",
+          "isLendNum":"111",
+          "isMisplaceNum":"20",
+          "isBuildTime":"2022-5-25  08:42"
+      },
+      {
+          "id":"49106aa0d1534a7a900843d0c4531840",
+          "isCheckNum":"PD-202205250840",
+          "isContainPath":"父区域-子区域，父区域-子区域1",
+          "isCheckState":"待执行",
+          "isStoreNum":"233",
+          "isCheckedNum":"230",
+          "isNoCheckNum":"3",
+          "isLendNum":"111",
+          "isMisplaceNum":"20",
+          "isBuildTime":"2022-5-25  08:50"
+      },
+      {
+          "id":"6e604355ff1e47e8b48117dca36420c7",
+          "isCheckNum":"PD-202205250840",
+          "isContainPath":"父区域-子区域，父区域-子区域1",
+          "isCheckState":"执行中",
+          "isStoreNum":"233",
+          "isCheckedNum":"230",
+          "isNoCheckNum":"3",
+          "isLendNum":"111",
+          "isMisplaceNum":"20",
+          "isBuildTime":"2022-5-25  08:40"
+      },
+      {
+          "id":"6f4a6631d9d3424b960793704f3757b3",
+          "isCheckNum":"PD-202205250840",
+          "isContainPath":"父区域-子区域，父区域-子区域1",
+          "isCheckState":"执行中",
+          "isStoreNum":"233",
+          "isCheckedNum":"230",
+          "isNoCheckNum":"3",
+          "isLendNum":"111",
+          "isMisplaceNum":"20",
+          "isBuildTime":"2022-5-25  08:40"
+      },
+      {
+          "id":"76e29d5c0a0541bfb1ee9da432183b15",
+          "isCheckNum":"PD-202205250840",
+          "isContainPath":"父区域-子区域，父区域-子区域1",
+          "isCheckState":"已执行",
+          "isStoreNum":"233",
+          "isCheckedNum":"230",
+          "isNoCheckNum":"3",
+          "isLendNum":"111",
+          "isMisplaceNum":"20",
+          "isBuildTime":"2022-5-25  08:40"
+      },
+      {
+          "id":"a0ffdd94161146c49161662c3f9a70cd",
+          "isCheckNum":"PD-202205250840",
+          "isContainPath":"父区域-子区域，父区域-子区域1",
+          "isCheckState":"已执行",
+          "isStoreNum":"233",
+          "isCheckedNum":"230",
+          "isNoCheckNum":"3",
+          "isLendNum":"111",
+          "isMisplaceNum":"20",
+          "isBuildTime":"2022-5-25  08:40"
+      }
+  ],
+  "footer":null,
+  "postparam":null
+}

src/views/archivesManage/archivesCheck/index.vue

@@ -6,12 +6,13 @@
       <el-button
         icon="el-icon-plus"
         size="mini"
-        @click="addFormVisible = true"
+        @click="handleAdd"
       >新增</el-button>
       <el-button
         icon="el-icon-delete"
         size="mini"
         style="margin:0 7px 0 7px"
+        :disabled="selections.length ? false : true "
         @click="deleteVisible = true"
       >删除</el-button>
       <el-input
@@ -37,21 +38,35 @@
     </div>
     <!--表格渲染-->
     <el-table
-      ref="fieldTable"
+      ref="table"
+      :data="tableData"
+      :cell-class-name="cell"
       style="min-width: 100%"
       height="calc(100vh - 315px)"
+      @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="fieldCnName" label="盘点单号" min-width="140" />
-      <el-table-column prop="fieldName" label="包含位置" min-width="140" />
-      <el-table-column label="盘点状态" min-width="85" />
-      <el-table-column prop="isColumnLength" label="在库档案" min-width="85" />
-      <el-table-column prop="isColumnLength" label="已盘档案" min-width="85" />
-      <el-table-column prop="isColumnLength" label="未盘档案" min-width="85" />
-      <el-table-column prop="isColumnLength" label="已借档案" min-width="85" />
-      <el-table-column prop="isColumnLength" label="错位档案" min-width="85" />
-      <el-table-column prop="isColumnLength" label="创建时间" min-width="85" />
+      <el-table-column prop="isCheckNum" label="盘点单号" min-width="100" />
+      <el-table-column prop="isContainPath" label="包含位置" min-width="140" />
+      <el-table-column prop="isCheckState" label="盘点状态" min-width="60">
+        <template slot-scope="scope">
+          <!-- 已执行 / 待执行/执行中 -->
+          <span class="clear">{{ scope.row.isCheckState }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="isStoreNum" label="在库档案" min-width="60" />
+      <el-table-column prop="isCheckedNum" label="已盘档案" min-width="60" />
+      <el-table-column prop="isNoCheckNum" label="未盘档案" min-width="60" />
+      <el-table-column prop="isLendNum" label="已借档案" min-width="60" />
+      <el-table-column prop="isMisplaceNum" label="错位档案" min-width="60" />
+      <el-table-column prop="isBuildTime" label="创建时间" min-width="100" />
+      <el-table-column prop="" label="操作" min-width="60">
+        <template slot-scope="scope">
+          <el-button size="mini" style="width:80px;height:26px;background:#3A99FD;padding:5px 10px" @click="handleDetail(scope.$index, scope.row)">盘点详情</el-button>
+        </template>
+      </el-table-column>
     </el-table>
     <!-- 删除模态框 -->
     <el-dialog title="确认删除" :visible.sync="deleteVisible" :before-close="handleClose">
@@ -68,69 +83,7 @@
       </div>
     </el-dialog>
     <!-- 新增模态框 -->
-    <el-dialog ref="dialogTable" title="新增盘点" :visible.sync="addFormVisible" class="dialog-table">
-      <span class="dialog-right-top" />
-      <span class="dialog-left-bottom" />
-      <el-form
-        ref="form"
-        :model="checkForm"
-        size="small"
-        label-width="80px"
-      >
-        <el-form-item label="选择区域" prop="selectArea" class="down-select">
-          <el-select
-            v-model="selectAreaValue"
-            style="width: 300px"
-            multiple
-            filterable
-            clearable
-            placeholder="请选择"
-          >
-            <el-option
-              v-for="item in selectArea"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="选择门类" prop="category" class="down-select">
-          <el-select
-            v-model="categoryValue"
-            style="width: 300px"
-            multiple
-            filterable
-            clearable
-            placeholder="请选择"
-          >
-            <el-option
-              v-for="item in category"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-button type="primary" style="margin:0 0 0 10px;height:32px;" @click="handleBuild">生成盘点单</el-button>
-      </el-form>
-      <el-table :data="gridData">
-        <el-table-column type="index" label="序号" width="55" />
-        <el-table-column prop="fieldCnName" label="状态" />
-        <el-table-column prop="fieldCnName" label="所属门类" />
-        <el-table-column prop="fieldCnName" label="子条目数" />
-        <el-table-column prop="fieldCnName" label="全宗号" />
-        <el-table-column prop="fieldName" label="档号" min-width="140" />
-        <el-table-column prop="fieldCnName" label="部门名称" />
-        <el-table-column label="题名" min-width="85" />
-        <el-table-column label="年度" min-width="85" />
-        <el-table-column label="保管期限" min-width="85" />
-        <el-table-column label="密级" min-width="85" />
-        <el-table-column label="存放位置" min-width="85" />
-      </el-table>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="handleSave">保存</el-button>
-      </div>
-    </el-dialog>
+    <addCheck ref="addCheckDom" />
     <!--分页组件-->
     <pagination />
   </div>
@@ -143,93 +96,69 @@ import CRUD, { presenter } from '@crud/crud'
 // import crudOperation from '@crud/CRUD.operation'
 import pagination from '@crud/Pagination'
 import { header } from '@crud/crud'
-
+import data1 from './data1.json'
+import addCheck from './module/addCheck.vue'
 export default {
-  components: { pagination, rrOperation },
+  components: { pagination, rrOperation, addCheck },
   mixins: [header(), presenter()],
-  props: {
-    dict: {
-      type: Object,
-      required: true
-    }
-    // permission: {
-    //   type: Object,
-    //   required: true
-    // }
-  },
   cruds() {
     return CRUD({
-      title: '岗位',
-      //   url: 'api/job',
-      //   sort: ['jobSort,asc', 'id,desc'],
-      //   crudMethod: { ...crudJob },
-      optShow: {
-        add: true,
-        edit: false,
-        del: true,
-        download: false,
-        group: false
-      }
+      title: '档案盘点'
     })
   },
   dicts: ['job_status'],
 
   data() {
     return {
+      tableData: [],
+      selections: [],
       keyWord: '',
-      gridData: [],
       cateSearch: '区域',
       cateSearchOptions: [
         { value: '选项1', label: '区域' }
       ],
-      deleteVisible: false,
-      addFormVisible: false,
-      checkForm: {},
-      selectAreaValue: [],
-      selectArea: [
-        { value: '选项1', label: '借阅人' },
-        { value: '选项2', label: '档号' },
-        { value: '选项3', label: '题名' },
-        { value: '选项4', label: '位置' }
-      ],
-      categoryValue: ['选项1'],
-      category: [
-        { value: '选项1', label: '全部' },
-        { value: '选项2', label: '档号' },
-        { value: '选项3', label: '题名' },
-        { value: '选项4', label: '位置' }
-      ]
+      deleteVisible: false
     }
   },
-  mounted() {
-    this.dialogTableStyle()
+  created() {
+    this.getData()
   },
+
   methods: {
+    getData() {
+      this.tableData = data1.rows
+    },
     handleConfirm() {
       this.deleteVisible = false
     },
-    handleSave() {
-      this.addFormVisible = false
+    handleAdd() {
+      this.$refs.addCheckDom.addFormVisible = true
     },
     handleClose() {
       console.log('close')
     },
-    handleBuild() {
-      // console.log(this.selectAreaValue)
-      // console.log(this.categoryValue)
-      console.log(this.$refs.dialogTable.$refs)
+    cell({ row, columnIndex }) {
+      if (row.isCheckState === '已执行' && columnIndex === 4) {
+        return 'have-clear'
+      } else if (row.isCheckState === '待执行' && columnIndex === 4) {
+        return 'fail-clear'
+      } else if (row.isCheckState === '执行中' && columnIndex === 4) {
+        return 'no-clear'
+      }
+    },
+    selectionChangeHandler(val) {
+      this.selections = val
     },
-    dialogTableStyle() {
-      const dialogTableDom = this.$refs.dialogTable
-      const targetDialog = dialogTableDom.$refs.dialog
-      targetDialog.style.width = '1340px'
-      // console.log(dialogTableDom.$refs.dialog.style, '-------------')
+    clickRowHandler(row) {
+      this.$refs.table.toggleRowSelection(row)
     }
+
   }
 }
 </script>
 
 <style lang="scss" scoped>
+@import '~@/assets/styles/lend-manage.scss';
 .head-container {
   color: #fff;
 }
@@ -263,7 +192,4 @@ export default {
   margin: 0;
 }
 
-.el-form{
-    display: flex;
-}
 </style>

src/views/archivesManage/archivesCheck/module/addCheck.vue

@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <el-dialog ref="dialogTable" title="新增盘点" :visible.sync="addFormVisible" class="dialog-table">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <el-form
+        ref="form"
+        :model="checkForm"
+        size="small"
+        label-width="80px"
+      >
+        <el-form-item label="选择区域" prop="selectArea" class="down-select">
+          <el-select
+            v-model="selectAreaValue"
+            style="width: 300px"
+            multiple
+            filterable
+            clearable
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in selectArea"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="选择门类" prop="category" class="down-select">
+          <el-select
+            v-model="categoryValue"
+            style="width: 300px"
+            multiple
+            filterable
+            clearable
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in category"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-button type="primary" style="margin:0 0 0 10px;height:32px;" @click="handleBuild">生成盘点单</el-button>
+      </el-form>
+      <el-table :data="gridData">
+        <el-table-column type="index" label="序号" width="55" />
+        <el-table-column prop="fieldCnName" label="状态" />
+        <el-table-column prop="fieldCnName" label="所属门类" />
+        <el-table-column prop="fieldCnName" label="子条目数" />
+        <el-table-column prop="fieldCnName" label="全宗号" />
+        <el-table-column prop="fieldName" label="档号" min-width="140" />
+        <el-table-column prop="fieldCnName" label="部门名称" />
+        <el-table-column label="题名" min-width="85" />
+        <el-table-column label="年度" min-width="85" />
+        <el-table-column label="保管期限" min-width="85" />
+        <el-table-column label="密级" min-width="85" />
+        <el-table-column label="存放位置" min-width="85" />
+      </el-table>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="handleSave">保存</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      gridData: [],
+      checkForm: {},
+      addFormVisible: false,
+      selectAreaValue: [],
+      selectArea: [
+        { value: '选项1', label: '借阅人' },
+        { value: '选项2', label: '档号' },
+        { value: '选项3', label: '题名' },
+        { value: '选项4', label: '位置' }
+      ],
+      categoryValue: ['选项1'],
+      category: [
+        { value: '选项1', label: '全部' },
+        { value: '选项2', label: '档号' },
+        { value: '选项3', label: '题名' },
+        { value: '选项4', label: '位置' }
+      ]
+    }
+  },
+  mounted() {
+    this.dialogTableStyle()
+  },
+  methods: {
+    dialogTableStyle() {
+      const dialogTableDom = this.$refs.dialogTable
+      const targetDialog = dialogTableDom.$refs.dialog
+      targetDialog.style.width = '1340px'
+    },
+    handleBuild() {
+      console.log(this.$refs.dialogTable.$refs)
+    },
+    handleSave() {
+      this.addFormVisible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-form{
+    display: flex;
+}
+</style>

src/views/archivesManage/archivesCheck/module/checkDetail.vue

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

src/views/archivesManage/lendManage/data1.json

@@ -18,7 +18,10 @@
             "borrowerIdType":"身份证",
             "borrowerIdNum":"420880190011115636",
             "borrowerTel":"027-5955 7085",
-            "isWarnState":"已解除"
+            "isWarnState":"已解除",
+            "isDocNum":"JY202205050001",
+            "isArchiveNum":"1",
+            "isHandler":"管理员"
         },
         {
             "id":"3d6d548d30db426ea3d95d63f589b294",
@@ -37,7 +40,9 @@
             "borrowerIdType":"身份证",
             "borrowerIdNum":"420880190011115636",
             "borrowerTel":"027-5955 7085",
-            "isWarnState":"已解除"
+            "isWarnState":"已解除",
+            "isDocNum":"JY202205050002",
+            "isHandler":"管理员"
         },
         {
             "id":"45ff597e7cc64d11803ac422816b1e23",
@@ -56,7 +61,10 @@
             "borrowerIdType":"身份证",
             "borrowerIdNum":"420880190011115636",
             "borrowerTel":"027-5955 7085",
-            "isWarnState":"未解除"
+            "isWarnState":"未解除",
+            "isDocNum":"JY202205050003",
+            "isArchiveNum":"1",
+            "isHandler":"管理员"
         },
         {
             "id":"49106aa0d1534a7a900843d0c4531840",
@@ -75,7 +83,10 @@
             "borrowerIdType":"身份证",
             "borrowerIdNum":"420880190011115636",
             "borrowerTel":"027-5955 7085",
-            "isWarnState":"未解除"
+            "isWarnState":"未解除",
+            "isDocNum":"JY202205050004",
+            "isArchiveNum":"1",
+            "isHandler":"管理员"
         },
         {
             "id":"6e604355ff1e47e8b48117dca36420c7",
@@ -94,7 +105,10 @@
             "borrowerIdType":"身份证",
             "borrowerIdNum":"420880190011115636",
             "borrowerTel":"027-5955 7085",
-            "isWarnState":"解除失败"
+            "isWarnState":"解除失败",
+            "isDocNum":"JY202205050005",
+            "isArchiveNum":"1"
+
         },
         {
             "id":"6f4a6631d9d3424b960793704f3757b3",
@@ -113,7 +127,9 @@
             "borrowerIdType":"身份证",
             "borrowerIdNum":"420880190011115636",
             "borrowerTel":"027-5955 7085",
-            "isWarnState":"解除失败"
+            "isWarnState":"解除失败",
+            "isDocNum":"JY202205050006",
+            "isArchiveNum":"1"
         },
         {
             "id":"76e29d5c0a0541bfb1ee9da432183b15",
@@ -131,7 +147,8 @@
             "borrowerDepartment":"办公室",
             "borrowerIdType":"身份证",
             "borrowerIdNum":"420880190011115636",
-            "borrowerTel":"027-5955 7085"
+            "borrowerTel":"027-5955 7085",
+            "isDocNum":"JY202205050007"
         },
         {
             "id":"a0ffdd94161146c49161662c3f9a70cd",
@@ -149,7 +166,8 @@
             "borrowerDepartment":"办公室",
             "borrowerIdType":"身份证",
             "borrowerIdNum":"420880190011115636",
-            "borrowerTel":"027-5955 7085"
+            "borrowerTel":"027-5955 7085",
+            "isDocNum":"JY202205050008"
         },
         {
             "id":"a79e0d67165a4b08b089b309dd947908",

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

@@ -20,13 +20,14 @@
     >
       <el-table-column type="selection" width="55" />
       <el-table-column type="index" label="序号" width="55" />
-      <el-table-column prop="isCategoryName" label="所属门类" min-width="85" />
-      <el-table-column prop="isArchivesID" label="档号" min-width="125" />
-      <el-table-column prop="isTitleName" label="题名" min-width="120" />
-      <el-table-column prop="isFieldName" label="盒名称" min-width="85" />
-      <el-table-column prop="isStoragePath" label="存放位置" min-width="130" />
+      <el-table-column prop="isDocNum" label="单据号" min-width="85" />
+      <el-table-column prop="isArchiveNum" label="数量" min-width="50" />
       <el-table-column prop="borrowerName" label="借阅人" min-width="60" />
-      <el-table-column prop="borrowDays" label="借阅时间" min-width="115" />
+      <el-table-column prop="borrowerDepartment" label="所属部门" min-width="85" />
+      <el-table-column prop="borrowerIdType" label="证件类型" min-width="85" />
+      <el-table-column prop="borrowerIdNum" label="证件号码" min-width="100" />
+      <el-table-column prop="borrowerTel" label="电话号码" min-width="85" />
+      <el-table-column prop="borrowDays" label="借阅时间" :show-overflow-tooltip="true" min-width="120" />
       <el-table-column prop="borrowGoal" label="借阅目的" min-width="60" />
       <el-table-column prop="isLendStatus" label="借阅状态" min-width="60">
         <template slot-scope="scope">
@@ -100,9 +101,8 @@ export default {
       listName: '借出确认'
     }
   },
-  mounted() {
+  created() {
     this.getData()
-    this.dialogTableStyle()
   },
   methods: {
     getData() {
@@ -110,12 +110,12 @@ export default {
     },
     selectionChangeHandler(val) {
       this.selections = val
-      console.log(val)
     },
     // 档案详情
     handleDbClick(row) {
       this.$refs.archiveDetailDom.detailVisible = true
-      this.$refs.archiveDetailDom.rowData = row
+      const arr = data1.rows.filter(item => item.isDocNum === row.isDocNum)
+      this.$refs.archiveDetailDom.rowData = arr
     },
     clickRowHandler(row) {
       this.$refs.table.toggleRowSelection(row)
@@ -129,17 +129,12 @@ export default {
     handleRemove() {
       this.$refs.delConfirmDom.deleteVisible = true
     },
-    dialogTableStyle() {
-      const dialogTableDom = this.$refs.dialogTable
-      const targetDialog = dialogTableDom.$refs.dialog
-      targetDialog.style.width = '800px'
-    },
     cell({ row, columnIndex }) {
-      if (row.isLendStatus === '待借' && columnIndex === 10) {
+      if (row.isLendStatus === '待借' && columnIndex === 11) {
         return 'no-lend'
-      } else if (row.isLendStatus === '已借' && columnIndex === 10) {
+      } else if (row.isLendStatus === '已借' && columnIndex === 11) {
         return 'have-lend'
-      } else if (row.isLendStatus === '' && columnIndex === 10) {
+      } else if (row.isLendStatus === '' && columnIndex === 11) {
         return 'other-lend'
       }
     },

src/views/archivesManage/lendManage/lendConfirm/module/archiveDetail.vue

@@ -1,32 +1,40 @@
 <template>
   <div>
-    <el-dialog title="档案详情" :visible.sync="detailVisible">
+    <el-dialog title="借阅详情" :visible.sync="detailVisible">
       <span class="dialog-right-top" />
       <span class="dialog-left-bottom" />
       <div class="setting-dialog">
-        <p><span class="color-blue">所属门类:</span><span class="color-white">{{ rowData.isCategoryName }}</span></p>
+        <!-- <p><span class="color-blue">所属门类:</span><span class="color-white">{{ rowData.isCategoryName }}</span></p>
         <p><span class="color-blue">档号:</span><span class="color-white">{{ rowData.isArchivesID }}</span></p>
         <p><span class="color-blue">题名:</span><span class="color-white">{{ rowData.isTitleName }}</span></p>
         <p><span class="color-blue">盒名称:</span><span class="color-white">{{ rowData.isFieldName }}</span></p>
-        <p><span class="color-blue">存放位置:</span><span class="color-white">{{ rowData.isStoragePath }}</span></p>
+        <p><span class="color-blue">存放位置:</span><span class="color-white">{{ rowData.isStoragePath }}</span></p> -->
         <div class="dpflex">
-          <p><span class="color-blue">借阅人:</span><span class="color-white">{{ rowData.borrowerName }}</span></p>
-          <p class="right"><span class="color-blue">所属部门:</span><span class="color-white">{{ rowData.borrowerDepartment }}</span></p>
+          <p class="left"><span class="color-blue">借阅人:</span><span class="color-white">{{ rowData[0].borrowerName }}</span></p>
+          <p class="right"><span class="color-blue">所属部门:</span><span class="color-white">{{ rowData[0].borrowerDepartment }}</span></p>
         </div>
         <div class="dpflex">
-          <p><span class="color-blue">证件类型:</span><span class="color-white">{{ rowData.borrowerIdType }}</span></p>
-          <p class="right"><span class="color-blue">证件号码:</span><span class="color-white">{{ rowData.borrowerIdNum }}</span></p>
+          <p class="left"><span class="color-blue">证件类型:</span><span class="color-white">{{ rowData[0].borrowerIdType }}</span></p>
+          <p class="right"><span class="color-blue">证件号码:</span><span class="color-white">{{ rowData[0].borrowerIdNum }}</span></p>
         </div>
         <div class="dpflex">
-          <p><span class="color-blue">电话号码:</span><span class="color-white">{{ rowData.borrowerTel }}</span></p>
-          <p class="right"><span class="color-blue">借阅日期:</span><span class="color-white">{{ rowData.borrowDays }}</span></p>
+          <p class="left"><span class="color-blue">电话号码:</span><span class="color-white">{{ rowData[0].borrowerTel }}</span></p>
+          <p class="right"><span class="color-blue">借阅日期:</span><span class="color-white">{{ rowData[0].borrowDays }}</span></p>
         </div>
         <div class="dpflex">
-          <p><span class="color-blue">借阅目的:</span><span class="color-white">{{ rowData.borrowGoal }}</span></p>
-          <p class="right"><span class="color-blue">借阅状态:</span><span class="color-white">{{ rowData.isLendStatus }}</span></p>
+          <p class="left"><span class="color-blue">借阅目的:</span><span class="color-white">{{ rowData[0].borrowGoal }}</span></p>
+          <p class="right"><span class="color-blue">借阅状态:</span><span class="color-white">{{ rowData[0].isLendStatus }}</span></p>
         </div>
-        <p><span class="color-blue">操作时间:</span><span class="color-white">{{ rowData.isOperationTime }}</span></p>
+        <p><span class="color-blue">操作时间:</span><span class="color-white">{{ rowData[0].isOperationTime }}</span></p>
       </div>
+      <el-table :data="rowData">
+        <el-table-column type="index" label="序号" width="55" />
+        <el-table-column prop="isCategoryName" label="所属门类" min-width="100" />
+        <el-table-column prop="isTitleName" label="题名" min-width="140" />
+        <el-table-column prop="isArchivesID" label="档号" min-width="130" />
+        <el-table-column prop="isFieldName" label="盒名称" min-width="80" />
+        <el-table-column prop="isStoragePath" label="存放位置" min-width="140" />
+      </el-table>
     </el-dialog>
   </div>
 </template>
@@ -36,7 +44,7 @@ export default {
   data() {
     return {
       detailVisible: false,
-      rowData: {}
+      rowData: []
     }
   }
 }
@@ -46,6 +54,9 @@ export default {
 ::v-deep .el-dialog__body{
   padding: 60px 40px 80px 40px;
 }
+::v-deep .el-dialog{
+  width: 1200px;
+}
 p{
   display: flex;
   height: 40px;
@@ -63,9 +74,11 @@ p{
 }
 .dpflex{
   display: flex;
-  justify-content: space-between;
+  .left{
+    width: 300px;
+  }
   .right{
-    width: 250px;
+    width: 300px;
   }
 }
 </style>

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

@@ -48,6 +48,7 @@
       :cell-class-name="cell"
       @selection-change="selectionChangeHandler"
       @row-click="clickRowHandler"
+      @row-dblclick="handleDbClick"
     >
       <el-table-column type="selection" width="55" />
       <el-table-column type="index" label="序号" width="55" />
@@ -67,6 +68,8 @@
       <el-table-column prop="borrowGoal" label="借阅目的" min-width="85" />
       <el-table-column v-if="false" sortable prop="isOperationTime" label="操作时间" min-width="85" />
     </el-table>
+    <!-- 档案详情 -->
+    <archiveDetail ref="archiveDetailDom" />
     <!-- 分页 -->
     <pagination />
   </div>
@@ -79,8 +82,9 @@ import pagination from '@crud/Pagination'
 import rrOperation from '@crud/RR.operation'
 import crudOperation from '@crud/CRUD.operation'
 import data1 from '../data1.json'
+import archiveDetail from './module/archiveDetail.vue'
 export default {
-  components: { headSlot, pagination, rrOperation, crudOperation },
+  components: { headSlot, pagination, rrOperation, crudOperation, archiveDetail },
   mixins: [presenter()],
   cruds() {
     return CRUD({
@@ -142,6 +146,12 @@ export default {
       } else if (row.isLendStatus === '' && columnIndex === 2) {
         return 'other-lend'
       }
+    },
+    // 档案详情
+    handleDbClick(row) {
+      this.$refs.archiveDetailDom.detailVisible = true
+      const arr = data1.rows.filter(item => item.isDocNum === row.isDocNum)
+      this.$refs.archiveDetailDom.rowData = arr
     }
   }
 }

src/views/archivesManage/lendManage/lendQuery/module/archiveDetail.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <el-dialog title="借阅详情" :visible.sync="detailVisible">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <div class="dpflex">
+          <p class="left"><span class="color-blue">单据号</span><span class="color-white">{{ rowData[0].isDocNum }}</span></p>
+          <p class="right"><span class="color-blue">借阅人:</span><span class="color-white">{{ rowData[0].borrowerName }}</span></p>
+        </div>
+        <div class="dpflex">
+          <p class="left"><span class="color-blue">证件类型:</span><span class="color-white">{{ rowData[0].borrowerIdType }}</span></p>
+          <p class="right"><span class="color-blue">所属部门:</span><span class="color-white">{{ rowData[0].borrowerDepartment }}</span></p>
+        </div>
+        <div class="dpflex">
+          <p class="left"><span class="color-blue">证件号码:</span><span class="color-white">{{ rowData[0].borrowerIdNum }}</span></p>
+          <p class="right"><span class="color-blue">电话号码:</span><span class="color-white">{{ rowData[0].borrowerTel }}</span></p>
+        </div>
+        <div class="dpflex">
+          <p class="left"><span class="color-blue">借阅日期:</span><span class="color-white">{{ rowData[0].borrowDays }}</span></p>
+          <p class="right"><span class="color-blue">借阅目的:</span><span class="color-white">{{ rowData[0].borrowGoal }}</span></p>
+        </div>
+        <div class="dpflex">
+          <p class="left"><span class="color-blue">借阅状态:</span><span class="color-white">{{ rowData[0].isLendStatus }}</span></p>
+          <p class="right"><span class="color-blue">操作时间:</span><span class="color-white">{{ rowData[0].isOperationTime }}</span></p>
+        </div>
+        <div class="dpflex">
+          <p class="left"><span class="color-blue">所属门类:</span><span class="color-white">{{ rowData[0].isCategoryName }}</span></p>
+          <p class="right"><span class="color-blue">档号:</span><span class="color-white">{{ rowData[0].isArchivesID }}</span></p>
+        </div>
+        <p class="left"><span class="color-blue">题名:</span><span class="color-white">{{ rowData[0].isTitleName }}</span></p>
+        <div class="dpflex">
+          <p class="left"><span class="color-blue">盒名称:</span><span class="color-white">{{ rowData[0].isFieldName }}</span></p>
+          <p class="right"><span class="color-blue">存放位置:</span><span class="color-white">{{ rowData[0].isStoragePath }}</span></p>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      detailVisible: false,
+      rowData: []
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog__body{
+  padding: 60px 40px 80px 40px;
+}
+::v-deep .el-dialog{
+  width: 800px;
+}
+p{
+  display: flex;
+  height: 40px;
+  align-items: center;
+  .color-blue{
+    color: #3A99FD;
+    width: 70px;
+    height: 19px;
+    text-align: right;
+  }
+  .color-white{
+    color: white;
+    padding: 0 0 0 20px;
+  }
+}
+.dpflex{
+  display: flex;
+  .left{
+    width: 350px;
+  }
+  .right{
+    width: 300px;
+  }
+}
+</style>

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

@@ -7,31 +7,34 @@
     <!--表格渲染-->
     <el-table
       ref="table"
-      style="min-width: 100%"
+      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"
+      @row-dblclick="handleDbClick"
     >
       <el-table-column type="selection" width="55" />
       <el-table-column type="index" label="序号" width="55" />
-      <el-table-column prop="isCategoryName" label="所属门类" min-width="85" />
-      <el-table-column prop="isArchivesID" label="档号" min-width="125" />
-      <el-table-column prop="isTitleName" label="题名" min-width="120" />
-      <el-table-column prop="isFieldName" label="盒名称" min-width="85" />
-      <el-table-column prop="isStoragePath" label="存放位置" min-width="130" />
+      <el-table-column prop="isDocNum" :show-overflow-tooltip="true" label="单据号" min-width="100" />
+      <el-table-column prop="isCategoryName" label="门类名称" min-width="110" />
+      <el-table-column prop="isArchivesID" :show-overflow-tooltip="true" label="档号" min-width="120" />
+      <el-table-column prop="isTitleName" :show-overflow-tooltip="true" label="题名" min-width="120" />
+      <el-table-column prop="isFieldName" label="盒名称" min-width="120" />
+      <el-table-column prop="isStoragePath" :show-overflow-tooltip="true" label="存放位置" min-width="120" />
       <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="borrowDays" :show-overflow-tooltip="true" label="借阅时间" min-width="115" />
+      <el-table-column prop="borrowGoal" label="借阅目的" min-width="80" />
+      <el-table-column prop="isLendStatus" label="借阅状态" min-width="80">
         <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-column prop="isHandler" label="操作人" min-width="60" />
+      <el-table-column sortable prop="isOperationTime" :show-overflow-tooltip="true" label="操作时间" min-width="100" />
     </el-table>
     <!-- 归还确认 -->
     <el-dialog title="归还确认" :visible.sync="returnVisible" :before-close="handleClose">
@@ -55,6 +58,8 @@
         </div>
       </div>
     </el-dialog>
+    <!-- 档案详情 -->
+    <archiveDetail ref="archiveDetailDom" />
     <!-- 分页 -->
     <pagination />
   </div>
@@ -66,8 +71,10 @@ import pagination from '@crud/Pagination'
 import CRUD, { presenter } from '@crud/crud'
 import crudOperation from '@crud/CRUD.operation'
 import data1 from '../data1.json'
+import archiveDetail from './module/archiveDetail.vue'
+
 export default {
-  components: { headSlot, pagination, crudOperation },
+  components: { headSlot, pagination, crudOperation, archiveDetail },
   mixins: [presenter()],
   cruds() {
     return CRUD({
@@ -113,13 +120,19 @@ export default {
       this.returnAgainVisible = false
     },
     cell({ row, columnIndex }) {
-      if (row.isLendStatus === '待借' && columnIndex === 10) {
+      if (row.isLendStatus === '待借' && columnIndex === 11) {
         return 'no-lend'
-      } else if (row.isLendStatus === '已借' && columnIndex === 10) {
+      } else if (row.isLendStatus === '已借' && columnIndex === 11) {
         return 'have-lend'
-      } else if (row.isLendStatus === '' && columnIndex === 10) {
+      } else if (row.isLendStatus === '' && columnIndex === 11) {
         return 'other-lend'
       }
+    },
+    // 档案详情
+    handleDbClick(row) {
+      this.$refs.archiveDetailDom.detailVisible = true
+      const arr = data1.rows.filter(item => item.isDocNum === row.isDocNum)
+      this.$refs.archiveDetailDom.rowData = arr
     }
   }
 }

src/views/archivesManage/lendManage/returnArchives/module/archiveDetail.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <el-dialog title="借阅详情" :visible.sync="detailVisible">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <div class="dpflex">
+          <p class="left"><span class="color-blue">单据号</span><span class="color-white">{{ rowData[0].isDocNum }}</span></p>
+
+          <p class="right"><span class="color-blue">借阅人:</span><span class="color-white">{{ rowData[0].borrowerName }}</span></p>
+        </div>
+        <div class="dpflex">
+          <p class="left"><span class="color-blue">所属部门:</span><span class="color-white">{{ rowData[0].borrowerDepartment }}</span></p>
+          <p class="right"><span class="color-blue">证件类型:</span><span class="color-white">{{ rowData[0].borrowerIdType }}</span></p>
+        </div>
+        <div class="dpflex">
+          <p class="left"><span class="color-blue">证件号码:</span><span class="color-white">{{ rowData[0].borrowerIdNum }}</span></p>
+          <p class="right"><span class="color-blue">电话号码:</span><span class="color-white">{{ rowData[0].borrowerTel }}</span></p>
+        </div>
+        <div class="dpflex">
+          <p class="left"><span class="color-blue">借阅日期:</span><span class="color-white">{{ rowData[0].borrowDays }}</span></p>
+          <p class="right"><span class="color-blue">借阅目的:</span><span class="color-white">{{ rowData[0].borrowGoal }}</span></p>
+        </div>
+        <div class="dpflex">
+          <p class="left"><span class="color-blue">借阅状态:</span><span class="color-white">{{ rowData[0].isLendStatus }}</span></p>
+          <p class="right"><span class="color-blue">操作时间:</span><span class="color-white">{{ rowData[0].isOperationTime }}</span></p>
+        </div>
+        <div class="dpflex">
+          <p class="left"><span class="color-blue">所属门类:</span><span class="color-white">{{ rowData[0].isCategoryName }}</span></p>
+          <p class="right"><span class="color-blue">档号:</span><span class="color-white">{{ rowData[0].isArchivesID }}</span></p>
+        </div>
+        <p class="left"><span class="color-blue">题名:</span><span class="color-white">{{ rowData[0].isTitleName }}</span></p>
+        <div class="dpflex">
+          <p class="left"><span class="color-blue">盒名称:</span><span class="color-white">{{ rowData[0].isFieldName }}</span></p>
+          <p class="right"><span class="color-blue">存放位置:</span><span class="color-white">{{ rowData[0].isStoragePath }}</span></p>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      detailVisible: false,
+      rowData: []
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog__body{
+  padding: 60px 40px 80px 40px;
+}
+::v-deep .el-dialog{
+  width: 800px;
+}
+p{
+  display: flex;
+  height: 40px;
+  align-items: center;
+  .color-blue{
+    color: #3A99FD;
+    width: 70px;
+    height: 19px;
+    text-align: right;
+  }
+  .color-white{
+    color: white;
+    padding: 0 0 0 20px;
+  }
+}
+.dpflex{
+  display: flex;
+  .left{
+    width: 350px;
+  }
+  .right{
+    width: 300px;
+  }
+}
+</style>

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

@@ -31,7 +31,7 @@
           <span class="cell-lend">{{ scope.row.isLendStatus }}</span>
         </template>
       </el-table-column>
-      <el-table-column sortable prop="isOperationTime" label="操作时间" min-width="85" />
+      <el-table-column prop="isOperationTime" label="操作时间" min-width="85" />
     </el-table>
     <!-- 借阅登记模态框 -->
     <el-dialog

src/views/archivesManage/recycleBin/index.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="app-container">
+    <el-row class="container-main" :gutter="20">
+      <!--侧边部门数据-->
+      <el-col class="container-left" :xs="9" :sm="6" :md="5" :lg="4" :xl="4">
+        <span class="right-top-line" />
+        <span class="left-bottom-line" />
+        <div class="head-container" style="color:#fff">
+          档案门类
+        </div>
+        <el-tree
+          :data="deptDatas"
+          :load="getDeptDatas"
+          :props="defaultProps"
+          :expand-on-click-node="false"
+          lazy
+          @node-click="handleNodeClick"
+        />
+      </el-col>
+      <!--用户数据-->
+      <el-col class="container-right" :xs="15" :sm="18" :md="19" :lg="20" :xl="20">
+        <span class="right-top-line" />
+        <span class="left-bottom-line" />
+        <!--工具栏-->
+        <div class="head-container">
+          <el-button size="mini">彻底删除</el-button>
+          <el-button size="mini" style="margin-right:10px">还原</el-button>
+          <!-- 搜索 -->
+          <!-- <div v-if="crud.props.searchToggle" class="head-search"> -->
+          <el-input
+            v-model="query.blurry"
+            clearable
+            size="small"
+            prefix-icon="el-icon-search"
+            placeholder="请输入关键词"
+            style="width: 200px;"
+            class="filter-item"
+          />
+          <rrOperation />
+          <!-- </div> -->
+        </div>
+        <!--表格渲染-->
+        <el-table
+          ref="table"
+          :data="tableData"
+          style="min-width: 100%"
+          height="calc(100vh - 355px)"
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column type="index" label="序号" width="55" />
+          <el-table-column prop="" label="文件" min-width="55" />
+          <el-table-column prop="" label="全宗名" min-width="85" />
+          <el-table-column prop="isArchivesID" :show-overflow-tooltip="true" label="档号" min-width="110" />
+          <el-table-column prop="" label="部门名称" min-width="85" />
+          <el-table-column prop="" label="件号" min-width="55" />
+          <el-table-column :show-overflow-tooltip="true" prop="isTitleName" label="题名" min-width="100" />
+          <el-table-column prop="" label="成文日期" min-width="80" />
+          <el-table-column prop="" label="机构(问题)" :show-overflow-tooltip="true" min-width="80" />
+          <el-table-column prop="" label="页号" min-width="60" />
+          <el-table-column prop="" label="责任者" min-width="85" />
+          <el-table-column prop="" label="保管期限" min-width="85" />
+          <el-table-column prop="" label="备注" min-width="85" />
+        </el-table>
+        <!--分页组件-->
+        <pagination />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+
+import { getDepts, getDeptSuperior } from '@/api/system/dept'
+import CRUD, { presenter, header, crud } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import pagination from '@crud/Pagination'
+import data1 from '../lendManage/data1.json'
+export default {
+  // name: 'User',
+  components: { rrOperation, pagination },
+  cruds() {
+    return CRUD({ title: '用户', url: 'api/users' })
+  },
+  mixins: [presenter(), header(), crud()],
+  // 数据字典
+  dicts: ['user_status'],
+  data() {
+    return {
+      tableData: [],
+      deptName: '',
+      depts: [],
+      deptDatas: [],
+      level: 3,
+      defaultProps: { children: 'children', label: 'name', isLeaf: 'leaf' }
+    }
+  },
+  created() {
+    this.getData()
+  },
+  methods: {
+    // 获取表格数据
+    getData() {
+      this.tableData = data1.rows
+    },
+    // 获取左侧部门数据
+    getDeptDatas(node, resolve) {
+      const sort = 'id,desc'
+      const params = { sort: sort }
+      if (typeof node !== 'object') {
+        if (node) {
+          params['name'] = node
+        }
+      } else if (node.level !== 0) {
+        params['pid'] = node.data.id
+      }
+      setTimeout(() => {
+        getDepts(params).then(res => {
+          if (resolve) {
+            resolve(res.content)
+          } else {
+            this.deptDatas = res.content
+          }
+        })
+      }, 100)
+    },
+    getDepts() {
+      getDepts({ enabled: true }).then(res => {
+        this.depts = res.content.map(function(obj) {
+          if (obj.hasChildren) {
+            obj.children = null
+          }
+          return obj
+        })
+      })
+    },
+    getSupDepts(deptId) {
+      getDeptSuperior(deptId).then(res => {
+        const date = res.content
+        this.buildDepts(date)
+        this.depts = date
+      })
+    },
+    buildDepts(depts) {
+      depts.forEach(data => {
+        if (data.children) {
+          this.buildDepts(data.children)
+        }
+        if (data.hasChildren && !data.children) {
+          data.children = null
+        }
+      })
+    },
+    // 切换部门
+    handleNodeClick(data) {
+      if (data.pid === 0) {
+        this.query.deptId = null
+      } else {
+        this.query.deptId = data.id
+      }
+      this.crud.toQuery()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  ::v-deep .vue-treeselect__control,::v-deep .vue-treeselect__placeholder,::v-deep .vue-treeselect__single-value {
+    height: 30px;
+    line-height: 30px;
+  }
+  ::v-deep .head-container .filter-item input{
+    height: 30px;
+    line-height: 30px;
+  }
+</style>