档案盘点多选/ 借阅管理 数据模拟 档案详情 按钮状态

src/views/archivesManage/archivesCheck/index.vue

@@ -40,8 +40,6 @@
       ref="fieldTable"
       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" />
@@ -70,49 +68,50 @@
       </div>
     </el-dialog>
     <!-- 新增模态框 -->
-    <el-dialog title="新增盘点" :visible.sync="addFormVisible">
+    <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"
-        :rules="rules"
         size="small"
         label-width="80px"
       >
         <el-form-item label="选择区域" prop="selectArea" class="down-select">
           <el-select
-            v-model="checkForm.selectArea"
+            v-model="selectAreaValue"
             style="width: 300px"
             multiple
+            filterable
+            clearable
             placeholder="请选择"
           >
             <el-option
-              v-for="item in checkForm.selectArea"
-              :key="item.name"
-              :disabled="level !== 1 && item.level <= level"
-              :label="item.name"
-              :value="item.id"
+              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="checkForm.category"
+            v-model="categoryValue"
             style="width: 300px"
             multiple
+            filterable
+            clearable
             placeholder="请选择"
           >
             <el-option
-              v-for="item in checkForm.category"
-              :key="item.name"
-              :disabled="level !== 1 && item.level <= level"
-              :label="item.name"
-              :value="item.id"
+              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;">生成盘点单</el-button>
+        <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" />
@@ -146,19 +145,17 @@ import pagination from '@crud/Pagination'
 import { header } from '@crud/crud'
 
 export default {
-  name: 'Job',
-  // crudOperation
   components: { pagination, rrOperation },
   mixins: [header(), presenter()],
   props: {
     dict: {
       type: Object,
       required: true
-    },
-    permission: {
-      type: Object,
-      required: true
     }
+    // permission: {
+    //   type: Object,
+    //   required: true
+    // }
   },
   cruds() {
     return CRUD({
@@ -179,29 +176,54 @@ export default {
 
   data() {
     return {
-      // permission: {
-      //   add: ['admin', 'job:add'],
-      //   edit: ['admin', 'job:edit'],
-      //   del: ['admin', 'job:del']
-      // },
+      keyWord: '',
+      gridData: [],
       cateSearch: '区域',
       cateSearchOptions: [
         { value: '选项1', label: '区域' }
       ],
       deleteVisible: false,
       addFormVisible: false,
-      checkForm: {
-        selectArea: [],
-        category: []
-      }
+      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: '位置' }
+      ]
     }
   },
+  mounted() {
+    this.dialogTableStyle()
+  },
   methods: {
     handleConfirm() {
       this.deleteVisible = false
     },
     handleSave() {
       this.addFormVisible = false
+    },
+    handleClose() {
+      console.log('close')
+    },
+    handleBuild() {
+      // console.log(this.selectAreaValue)
+      // console.log(this.categoryValue)
+      console.log(this.$refs.dialogTable.$refs)
+    },
+    dialogTableStyle() {
+      const dialogTableDom = this.$refs.dialogTable
+      const targetDialog = dialogTableDom.$refs.dialog
+      targetDialog.style.width = '1340px'
+      // console.log(dialogTableDom.$refs.dialog.style, '-------------')
     }
   }
 }
@@ -240,11 +262,11 @@ export default {
   padding: 0;
   margin: 0;
 }
-::v-deep .el-dialog{
-    width: 1340px;
-}
+// ::v-deep .el-dialog{
+//     width: 1340px;
+// }
+
 .el-form{
     display: flex;
-    // align-items: center;
 }
 </style>

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

@@ -21,20 +21,21 @@
     </head-slot>
     <!--表格渲染-->
     <el-table
-      ref="fieldTable"
+      ref="table"
+      :data="tableData"
       style="min-width: 100%"
       height="calc(100vh - 355px)"
       @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="isColumnLength" label="借阅人" min-width="85" />
-      <el-table-column prop="fieldCnName" label="所属部门" min-width="140" />
-      <el-table-column prop="fieldName" label="证件类型" min-width="140" />
-      <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 type="index" label="序号" width="100" />
+      <el-table-column prop="borrowerName" label="借阅人" min-width="85" />
+      <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="140" />
+      <el-table-column prop="borrowerTel" label="电话号码" min-width="120" />
+      <el-table-column prop="isOperationTime" label="操作时间" min-width="140" />
     </el-table>
 
     <!-- 借阅者增加模态框 -->
@@ -209,9 +210,10 @@ import headSlot from '../components/headSlot.vue'
 import pagination from '@crud/Pagination'
 import CRUD, { presenter, header } from '@crud/crud'
 import rrOperation from '@crud/RR.operation'
-import crudOperation from '@crud/CRUD.operation'
+// import crudOperation from '@crud/CRUD.operation'
+import data1 from '../data1.json'
 export default {
-  components: { headSlot, pagination, rrOperation, crudOperation },
+  components: { headSlot, pagination, rrOperation },
   mixins: [presenter(), header()],
   cruds() {
     return CRUD({
@@ -247,12 +249,18 @@ export default {
       }
     }
   },
+  mounted() {
+    this.getData()
+  },
   methods: {
+    getData() {
+      this.tableData = data1.rows
+    },
     selectionChangeHandler() {
       console.log('selectionChangeHandler')
     },
-    clickRowHandler() {
-      console.log('clickRowHandler')
+    clickRowHandler(row) {
+      this.$refs.table.toggleRowSelection(row)
     },
     handleAdd() {
       this.addFormVisible = true
@@ -265,6 +273,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.to-lend {
-}
+
 </style>

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

@@ -37,6 +37,10 @@ export default {
     handleConfirm() {
       this.deleteVisible = false
       //   this.reconfirmDeleteVisible = true
+      this.$message({
+        message: '删除成功!',
+        type: 'success'
+      })
     },
     handleClose() {
       console.log('handleClose')

src/views/archivesManage/lendManage/data1.json

@@ -0,0 +1,223 @@
+{
+    "total":12,
+    "rows":[
+        {
+            "id":"29f16d62bc7242d5ba8dc84de5451f93",
+            "isCategoryName":"文书档案-文件级",
+            "fieldCnName":"盒号",
+            "isArchivesID":"FTZN-2022-BGS-D30-0001",
+            "isTitleName":"这是一份文件的标题标题...",
+            "isFieldName":"文书-文件-2022",
+            "isStoragePath":"库房A-库区A-01列-1节1层-左",
+            "isLendStatus":"待借",
+            "isOperationTime":"2022-05-25 14:02",
+            "borrowerName":"张三",
+            "borrowDays":"2022-5-25至2022-6-25",
+            "borrowGoal":"工作考察",
+            "borrowerDepartment":"办公室",
+            "borrowerIdType":"身份证",
+            "borrowerIdNum":"420880190011115636",
+            "borrowerTel":"027-5955 7085"
+        },
+        {
+            "id":"3d6d548d30db426ea3d95d63f589b294",
+            "isCategoryName":"文书档案-卷案级",
+            "fieldCnName":"盒号",
+            "isArchivesID":"FTZN-2022-BGS-D30-0001",
+            "isTitleName":"这是一份文件的标题标题...",
+            "isFieldName":"文书-文件-2022",
+            "isStoragePath":"库房A-库区A-01列-1节1层-左",
+            "isLendStatus":"已借",
+            "isOperationTime":"2022-05-25 14:02",
+            "borrowerName":"张三",
+            "borrowDays":"2022-5-25至2022-6-25",
+            "borrowGoal":"工作考察",
+            "borrowerDepartment":"办公室",
+            "borrowerIdType":"身份证",
+            "borrowerIdNum":"420880190011115636",
+            "borrowerTel":"027-5955 7085"
+        },
+        {
+            "id":"45ff597e7cc64d11803ac422816b1e23",
+            "isCategoryName":"文书档案-文件级",
+            "fieldCnName":"盒号",
+            "isArchivesID":"FTZN-2022-BGS-D30-0001",
+            "isTitleName":"这是一份文件的标题标题...",
+            "isFieldName":"文书-文件-2022",
+            "isStoragePath":"库房A-库区A-01列-1节1层-左",
+            "isLendStatus":"待借",
+            "isOperationTime":"2022-05-25 14:02",
+            "borrowerName":"张三",
+            "borrowDays":"2022-5-25至2022-6-25",
+            "borrowGoal":"工作考察",
+            "borrowerDepartment":"办公室",
+            "borrowerIdType":"身份证",
+            "borrowerIdNum":"420880190011115636",
+            "borrowerTel":"027-5955 7085"
+        },
+        {
+            "id":"49106aa0d1534a7a900843d0c4531840",
+            "isCategoryName":"文书档案-文件级",
+            "fieldCnName":"盒号",
+            "isArchivesID":"FTZN-2022-BGS-D30-0001",
+            "isTitleName":"这是一份文件的标题标题...",
+            "isFieldName":"文书-文件-2022",
+            "isStoragePath":"库房A-库区A-01列-1节1层-左",
+            "isLendStatus":"待借",
+            "isOperationTime":"2022-05-25 14:02",
+            "borrowerName":"张三",
+            "borrowDays":"2022-5-25至2022-6-25",
+            "borrowGoal":"工作考察",
+            "borrowerDepartment":"办公室",
+            "borrowerIdType":"身份证",
+            "borrowerIdNum":"420880190011115636",
+            "borrowerTel":"027-5955 7085"
+        },
+        {
+            "id":"6e604355ff1e47e8b48117dca36420c7",
+            "isCategoryName":"文书档案-文件级",
+            "fieldCnName":"盒号",
+            "isArchivesID":"FTZN-2022-BGS-D30-0001",
+            "isTitleName":"这是一份文件的标题标题...",
+            "isFieldName":"文书-文件-2022",
+            "isStoragePath":"库房A-库区A-01列-1节1层-左",
+            "isLendStatus":"待借",
+            "isOperationTime":"2022-05-25 14:02",
+            "borrowerName":"张三",
+            "borrowDays":"2022-5-25至2022-6-25",
+            "borrowGoal":"工作考察",
+            "borrowerDepartment":"办公室",
+            "borrowerIdType":"身份证",
+            "borrowerIdNum":"420880190011115636",
+            "borrowerTel":"027-5955 7085"
+        },
+        {
+            "id":"6f4a6631d9d3424b960793704f3757b3",
+            "isCategoryName":"文书档案-文件级",
+            "fieldCnName":"盒号",
+            "isArchivesID":"FTZN-2022-BGS-D30-0001",
+            "isTitleName":"这是一份文件的标题标题...",
+            "isFieldName":"文书-文件-2022",
+            "isStoragePath":"库房A-库区A-01列-1节1层-左",
+            "isLendStatus":"已借",
+            "isOperationTime":"2022-05-25 14:02",
+            "borrowerName":"张三",
+            "borrowDays":"2022-5-25至2022-6-25",
+            "borrowGoal":"工作考察",
+            "borrowerDepartment":"办公室",
+            "borrowerIdType":"身份证",
+            "borrowerIdNum":"420880190011115636",
+            "borrowerTel":"027-5955 7085"
+        },
+        {
+            "id":"76e29d5c0a0541bfb1ee9da432183b15",
+            "isCategoryName":"文书档案-文件级",
+            "fieldCnName":"盒号",
+            "isArchivesID":"FTZN-2022-BGS-D30-0001",
+            "isTitleName":"这是一份文件的标题标题...",
+            "isFieldName":"文书-文件-2022",
+            "isStoragePath":"库房A-库区A-01列-1节1层-左",
+            "isLendStatus":"待借",
+            "isOperationTime":"2022-05-25 14:02",
+            "borrowerName":"张三",
+            "borrowDays":"2022-5-25至2022-6-25",
+            "borrowGoal":"工作考察",
+            "borrowerDepartment":"办公室",
+            "borrowerIdType":"身份证",
+            "borrowerIdNum":"420880190011115636",
+            "borrowerTel":"027-5955 7085"
+        },
+        {
+            "id":"a0ffdd94161146c49161662c3f9a70cd",
+            "isCategoryName":"文书档案-文件级",
+            "fieldCnName":"盒号",
+            "isArchivesID":"FTZN-2022-BGS-D30-0001",
+            "isTitleName":"这是一份文件的标题标题...",
+            "isFieldName":"文书-文件-2022",
+            "isStoragePath":"库房A-库区A-01列-1节1层-左",
+            "isLendStatus":"已借",
+            "isOperationTime":"2022-05-25 14:02",
+            "borrowerName":"张三",
+            "borrowDays":"2022-5-25至2022-6-25",
+            "borrowGoal":"工作考察",
+            "borrowerDepartment":"办公室",
+            "borrowerIdType":"身份证",
+            "borrowerIdNum":"420880190011115636",
+            "borrowerTel":"027-5955 7085"
+        },
+        {
+            "id":"a79e0d67165a4b08b089b309dd947908",
+            "isCategoryName":"文书档案-文件级",
+            "fieldCnName":"盒号",
+            "isArchivesID":"FTZN-2022-BGS-D30-0001",
+            "isTitleName":"这是一份文件的标题标题...",
+            "isFieldName":"文书-文件-2022",
+            "isStoragePath":"库房A-库区A-01列-1节1层-左",
+            "isLendStatus":"待借",
+            "isOperationTime":"2022-05-25 14:02",
+            "borrowerName":"张三",
+            "borrowDays":"2022-5-25至2022-6-25",
+            "borrowGoal":"工作考察",
+            "borrowerDepartment":"办公室",
+            "borrowerIdType":"身份证",
+            "borrowerIdNum":"420880190011115636",
+            "borrowerTel":"027-5955 7085"
+        },
+        {
+            "id":"ca9b850145b74eeda3c22a997696c979",
+            "isCategoryName":"文书档案-文件级",
+            "fieldCnName":"盒号",
+            "isArchivesID":"FTZN-2022-BGS-D30-0001",
+            "isTitleName":"这是一份文件的标题标题...",
+            "isFieldName":"文书-文件-2022",
+            "isStoragePath":"库房A-库区A-01列-1节1层-左",
+            "isLendStatus":"待借",
+            "isOperationTime":"2022-05-25 14:02",
+            "borrowerName":"张三",
+            "borrowDays":"2022-5-25至2022-6-25",
+            "borrowGoal":"工作考察",
+            "borrowerDepartment":"办公室",
+            "borrowerIdType":"身份证",
+            "borrowerIdNum":"420880190011115636",
+            "borrowerTel":"027-5955 7085"
+        },
+        {
+            "id":"dff5529c0d0f45b2b19f2adec7ca0102",
+            "isCategoryName":"文书档案-文件级",
+            "fieldCnName":"盒号",
+            "isArchivesID":"FTZN-2022-BGS-D30-0001",
+            "isTitleName":"这是一份文件的标题标题...",
+            "isFieldName":"文书-文件-2022",
+            "isStoragePath":"库房A-库区A-01列-1节1层-左",
+            "isLendStatus":"待借",
+            "isOperationTime":"2022-05-25 14:02",
+            "borrowerName":"张三",
+            "borrowDays":"2022-5-25至2022-6-25",
+            "borrowGoal":"工作考察",
+            "borrowerDepartment":"办公室",
+            "borrowerIdType":"身份证",
+            "borrowerIdNum":"420880190011115636",
+            "borrowerTel":"027-5955 7085"
+        },
+        {
+            "id":"f3f6ff94c26a4a54967de9cfc56a3b01",
+            "isCategoryName":"文书档案-文件级",
+            "fieldCnName":"盒号",
+            "isArchivesID":"FTZN-2022-BGS-D30-0001",
+            "isTitleName":"这是一份文件的标题标题...",
+            "isFieldName":"文书-文件-2022",
+            "isStoragePath":"库房A-库区A-01列-1节1层-左",
+            "isLendStatus":"待借",
+            "isOperationTime":"2022-05-25 14:02",
+            "borrowerName":"张三",
+            "borrowDays":"2022-5-25至2022-6-25",
+            "borrowGoal":"工作考察",
+            "borrowerDepartment":"办公室",
+            "borrowerIdType":"身份证",
+            "borrowerIdNum":"420880190011115636",
+            "borrowerTel":"027-5955 7085"
+        }
+    ],
+    "footer":null,
+    "postparam":null
+  }

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

@@ -1,42 +1,44 @@
 <template>
   <div class="lend-confirm">
     <headSlot>
-      <el-button icon="el-icon-plus" size="mini" @click="lendFormVisible = true">借出</el-button>
+      <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>
       <crudOperation style="margin-left:10px" />
     </headSlot>
     <!--表格渲染-->
     <el-table
-      ref="fieldTable"
+      ref="table"
+      :data="tableData"
       style="min-width: 100%"
       height="calc(100vh - 355px)"
       @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="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="isColumnLength" label="操作时间" min-width="85" />
+      <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="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>
     <!--借出弹框-->
-    <el-dialog title="借出" :visible.sync="lendFormVisible">
+    <el-dialog ref="dialogTable" title="借出" :visible.sync="lendFormVisible">
       <span class="dialog-right-top" />
       <span class="dialog-left-bottom" />
-      <el-table :data="gridData">
+      <el-table :data="selections">
         <el-table-column type="index" label="序号" width="55" />
-        <el-table-column prop="fieldCnName" label="所属门类" />
-        <el-table-column prop="fieldName" label="档号" min-width="140" />
-        <el-table-column label="题名" min-width="85" />
-        <el-table-column label="状态" min-width="85" />
+        <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>
       <div slot="footer" class="dialog-footer">
         <el-button disabled>解除警报</el-button>
@@ -44,6 +46,8 @@
     </el-dialog>
     <!-- 移出确认弹框 -->
     <delConfirm ref="delConfirmDom" :list-name="listName" />
+    <!-- 档案详情 -->
+    <archiveDetail ref="archiveDetailDom" />
     <!-- 分页 -->
     <pagination />
   </div>
@@ -55,9 +59,11 @@ import pagination from '@crud/Pagination'
 import CRUD, { presenter } from '@crud/crud'
 import crudOperation from '@crud/CRUD.operation'
 import delConfirm from '../components/delConfirm.vue'
+import archiveDetail from './module/archiveDetail.vue'
 
+import data1 from '../data1.json'
 export default {
-  components: { headSlot, pagination, crudOperation, delConfirm },
+  components: { headSlot, pagination, crudOperation, archiveDetail, delConfirm },
   mixins: [presenter()],
   cruds() {
     return CRUD({
@@ -76,18 +82,31 @@ export default {
   data() {
     return {
       tableData: [],
-      gridData: [],
+      selections: [],
       lendFormVisible: false,
       lendForm: {},
       listName: '借出确认'
     }
   },
+  mounted() {
+    this.getData()
+    this.dialogTableStyle()
+  },
   methods: {
-    selectionChangeHandler() {
-      console.log('selectionChangeHandler')
+    getData() {
+      this.tableData = data1.rows
+    },
+    selectionChangeHandler(val) {
+      this.selections = val
+      console.log(val)
     },
-    clickRowHandler() {
-      console.log('clickRowHandler')
+    // 档案详情
+    handleDbClick(row) {
+      this.$refs.archiveDetailDom.detailVisible = true
+      this.$refs.archiveDetailDom.rowData = row
+    },
+    clickRowHandler(row) {
+      this.$refs.table.toggleRowSelection(row)
     },
     // 重新登记返回上一级
     handelReRecord() {
@@ -96,6 +115,11 @@ export default {
     // 移出
     handleRemove() {
       this.$refs.delConfirmDom.deleteVisible = true
+    },
+    dialogTableStyle() {
+      const dialogTableDom = this.$refs.dialogTable
+      const targetDialog = dialogTableDom.$refs.dialog
+      targetDialog.style.width = '800px'
     }
   }
 }

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

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <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.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>
+        <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>
+        </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>
+        </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>
+        </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>
+        </div>
+        <p><span class="color-blue">操作时间:</span><span class="color-white">{{ rowData.isOperationTime }}</span></p>
+      </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;
+}
+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;
+  justify-content: space-between;
+  .right{
+    width: 250px;
+  }
+}
+</style>

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

@@ -41,23 +41,24 @@
     </head-slot>
     <!--表格渲染-->
     <el-table
-      ref="fieldTable"
+      ref="table"
       style="min-width: 100%"
       height="calc(100vh - 355px)"
+      :data="tableData"
       @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="isColumnLength" label="借阅状态" min-width="85" />
-      <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="isLendStatus" label="借阅状态" min-width="60" />
+      <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" />
+      <el-table-column prop="isFieldName" label="盒名称" min-width="85" />
+      <el-table-column prop="isStoragePath" label="存放位置" min-width="130" />
+      <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>
     <!-- 分页 -->
     <pagination />
@@ -70,7 +71,7 @@ import CRUD, { presenter } from '@crud/crud'
 import pagination from '@crud/Pagination'
 import rrOperation from '@crud/RR.operation'
 import crudOperation from '@crud/CRUD.operation'
-
+import data1 from '../data1.json'
 export default {
   components: { headSlot, pagination, rrOperation, crudOperation },
   mixins: [presenter()],
@@ -109,16 +110,22 @@ export default {
         { value: '选项4', label: '位置' },
         { value: '选项5', label: '档案盒' },
         { value: '选项6', label: '条形码' },
-        { value: '选项6', label: 'TID' }
+        { value: '选项7', label: 'TID' }
       ]
     }
   },
+  mounted() {
+    this.getData()
+  },
   methods: {
+    getData() {
+      this.tableData = data1.rows
+    },
     selectionChangeHandler() {
       console.log('selectionChangeHandler')
     },
-    clickRowHandler() {
-      console.log('clickRowHandler')
+    clickRowHandler(row) {
+      this.$refs.table.toggleRowSelection(row)
     }
   }
 }

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

@@ -6,24 +6,25 @@
     </head-slot>
     <!--表格渲染-->
     <el-table
-      ref="fieldTable"
+      ref="table"
       style="min-width: 100%"
       height="calc(100vh - 355px)"
+      :data="tableData"
       @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="isColumnLength" label="操作时间" min-width="85" />
+      <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="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>
     <!-- 归还确认 -->
     <el-dialog title="归还确认" :visible.sync="returnVisible" :before-close="handleClose">
@@ -56,6 +57,7 @@ import headSlot from '../components/headSlot.vue'
 import pagination from '@crud/Pagination'
 import CRUD, { presenter } from '@crud/crud'
 import crudOperation from '@crud/CRUD.operation'
+import data1 from '../data1.json'
 export default {
   components: { headSlot, pagination, crudOperation },
   mixins: [presenter()],
@@ -80,12 +82,18 @@ export default {
       returnAgainVisible: false
     }
   },
+  mounted() {
+    this.getData()
+  },
   methods: {
+    getData() {
+      this.tableData = data1.rows
+    },
     selectionChangeHandler() {
       console.log('selectionChangeHandler')
     },
-    clickRowHandler() {
-      console.log('clickRowHandler')
+    clickRowHandler(row) {
+      this.$refs.table.toggleRowSelection(row)
     },
     // 归还确认
     handleConfirm() {

src/views/archivesManage/lendManage/toLend/data1.json

@@ -1,583 +0,0 @@
-{
-    "total":12,
-    "rows":[
-        {
-            "id":"29f16d62bc7242d5ba8dc84de5451f93",
-            "fieldName":"case_no",
-            "fieldCnName":"盒号",
-            "isDefaultValue":"",
-            "isDefaultValueType":"",
-            "isPattern":null,
-            "isPrecept":null,
-            "isDataType":1,
-            "isColumnLength":10,
-            "isMaxlength":null,
-            "isMinlength":null,
-            "isSequence":7,
-            "isType":4,
-            "isGlobal":null,
-            "isSystem":0,
-            "isAccede":null,
-            "isAutoaccountvalue":null,
-            "isOperate":null,
-            "isSearch":0,
-            "isCategoryId":"f88a8b3960ac476b8d94e63961bbeabe",
-            "createTime":1518079815000,
-            "isOrder":0,
-            "isOrderSeq":0,
-            "isOrderType":"asc",
-            "isDisplay":0,
-            "isDisplayWidth":100,
-            "isDisplayOrder":0,
-            "isDisplayAlign":"center",
-            "isInputClass":"easyui-numberbox",
-            "isInput":1,
-            "isInputLength":245,
-            "isFullrow":0,
-            "isRequired":0,
-            "isInherit":1,
-            "isIncrease":0,
-            "isAuto":0,
-            "isAutoField":0,
-            "isDosearchCard":1,
-            "isSupplement":1,
-            "isSupplementNum":3,
-            "isNoRepetition":0,
-            "isAdjust":0,
-            "isAdjustSeq":0,
-            "isAdjustWidth":0,
-            "isRelevance":null,
-            "relevanceSeq":null
-        },
-        {
-            "id":"3d6d548d30db426ea3d95d63f589b294",
-            "fieldName":"fonds_no",
-            "fieldCnName":"全宗号",
-            "isDefaultValue":"",
-            "isDefaultValueType":"f646a296b4774d068ea4230c3fb46eb1",
-            "isPattern":null,
-            "isPrecept":null,
-            "isDataType":1,
-            "isColumnLength":100,
-            "isMaxlength":null,
-            "isMinlength":null,
-            "isSequence":1,
-            "isType":4,
-            "isGlobal":null,
-            "isSystem":1,
-            "isAccede":null,
-            "isAutoaccountvalue":null,
-            "isOperate":null,
-            "isSearch":null,
-            "isCategoryId":"f88a8b3960ac476b8d94e63961bbeabe",
-            "createTime":1502689065000,
-            "isOrder":0,
-            "isOrderSeq":0,
-            "isOrderType":"asc",
-            "isDisplay":0,
-            "isDisplayWidth":100,
-            "isDisplayOrder":0,
-            "isDisplayAlign":"center",
-            "isInputClass":"popmodality",
-            "isInput":1,
-            "isInputLength":245,
-            "isFullrow":0,
-            "isRequired":0,
-            "isInherit":1,
-            "isIncrease":0,
-            "isAuto":0,
-            "isAutoField":1,
-            "isDosearchCard":0,
-            "isSupplement":0,
-            "isSupplementNum":null,
-            "isNoRepetition":0,
-            "isAdjust":0,
-            "isAdjustSeq":0,
-            "isAdjustWidth":0,
-            "isRelevance":null,
-            "relevanceSeq":null
-        },
-        {
-            "id":"45ff597e7cc64d11803ac422816b1e23",
-            "fieldName":"security_class",
-            "fieldCnName":"密级",
-            "isDefaultValue":"",
-            "isDefaultValueType":"f08bc3b382914081ad4c85d103617e90",
-            "isPattern":null,
-            "isPrecept":null,
-            "isDataType":1,
-            "isColumnLength":10,
-            "isMaxlength":null,
-            "isMinlength":null,
-            "isSequence":16,
-            "isType":4,
-            "isGlobal":0,
-            "isSystem":1,
-            "isAccede":"0",
-            "isAutoaccountvalue":"0",
-            "isOperate":"0",
-            "isSearch":0,
-            "isCategoryId":"f88a8b3960ac476b8d94e63961bbeabe",
-            "createTime":1502689066000,
-            "isOrder":0,
-            "isOrderSeq":0,
-            "isOrderType":"asc",
-            "isDisplay":0,
-            "isDisplayWidth":100,
-            "isDisplayOrder":0,
-            "isDisplayAlign":"center",
-            "isInputClass":"easyui-combobox",
-            "isInput":1,
-            "isInputLength":245,
-            "isFullrow":0,
-            "isRequired":0,
-            "isInherit":0,
-            "isIncrease":0,
-            "isAuto":0,
-            "isAutoField":0,
-            "isDosearchCard":1,
-            "isSupplement":0,
-            "isSupplementNum":null,
-            "isNoRepetition":0,
-            "isAdjust":0,
-            "isAdjustSeq":0,
-            "isAdjustWidth":0,
-            "isRelevance":null,
-            "relevanceSeq":null
-        },
-        {
-            "id":"49106aa0d1534a7a900843d0c4531840",
-            "fieldName":"collator",
-            "fieldCnName":"立卷人",
-            "isDefaultValue":"",
-            "isDefaultValueType":"",
-            "isPattern":null,
-            "isPrecept":null,
-            "isDataType":1,
-            "isColumnLength":100,
-            "isMaxlength":null,
-            "isMinlength":null,
-            "isSequence":17,
-            "isType":4,
-            "isGlobal":null,
-            "isSystem":0,
-            "isAccede":null,
-            "isAutoaccountvalue":null,
-            "isOperate":null,
-            "isSearch":0,
-            "isCategoryId":"f88a8b3960ac476b8d94e63961bbeabe",
-            "createTime":1502691877000,
-            "isOrder":0,
-            "isOrderSeq":0,
-            "isOrderType":"asc",
-            "isDisplay":0,
-            "isDisplayWidth":100,
-            "isDisplayOrder":0,
-            "isDisplayAlign":"center",
-            "isInputClass":"easyui-textbox",
-            "isInput":1,
-            "isInputLength":245,
-            "isFullrow":0,
-            "isRequired":0,
-            "isInherit":1,
-            "isIncrease":0,
-            "isAuto":0,
-            "isAutoField":0,
-            "isDosearchCard":0,
-            "isSupplement":0,
-            "isSupplementNum":null,
-            "isNoRepetition":0,
-            "isAdjust":0,
-            "isAdjustSeq":0,
-            "isAdjustWidth":0,
-            "isRelevance":null,
-            "relevanceSeq":null
-        },
-        {
-            "id":"6e604355ff1e47e8b48117dca36420c7",
-            "fieldName":"content_no",
-            "fieldCnName":"-（备用字段001）",
-            "isDefaultValue":"",
-            "isDefaultValueType":"",
-            "isPattern":null,
-            "isPrecept":null,
-            "isDataType":1,
-            "isColumnLength":20,
-            "isMaxlength":null,
-            "isMinlength":null,
-            "isSequence":26,
-            "isType":4,
-            "isGlobal":null,
-            "isSystem":1,
-            "isAccede":null,
-            "isAutoaccountvalue":null,
-            "isOperate":null,
-            "isSearch":null,
-            "isCategoryId":"f88a8b3960ac476b8d94e63961bbeabe",
-            "createTime":1502689066000,
-            "isOrder":0,
-            "isOrderSeq":0,
-            "isOrderType":"asc",
-            "isDisplay":0,
-            "isDisplayWidth":100,
-            "isDisplayOrder":0,
-            "isDisplayAlign":"center",
-            "isInputClass":"easyui-numberbox",
-            "isInput":0,
-            "isInputLength":245,
-            "isFullrow":0,
-            "isRequired":0,
-            "isInherit":0,
-            "isIncrease":0,
-            "isAuto":null,
-            "isAutoField":0,
-            "isDosearchCard":0,
-            "isSupplement":0,
-            "isSupplementNum":null,
-            "isNoRepetition":0,
-            "isAdjust":0,
-            "isAdjustSeq":0,
-            "isAdjustWidth":0,
-            "isRelevance":null,
-            "relevanceSeq":null
-        },
-        {
-            "id":"6f4a6631d9d3424b960793704f3757b3",
-            "fieldName":"serial_no",
-            "fieldCnName":"-（备用字段002）",
-            "isDefaultValue":"",
-            "isDefaultValueType":"",
-            "isPattern":null,
-            "isPrecept":null,
-            "isDataType":1,
-            "isColumnLength":20,
-            "isMaxlength":null,
-            "isMinlength":null,
-            "isSequence":27,
-            "isType":4,
-            "isGlobal":null,
-            "isSystem":1,
-            "isAccede":null,
-            "isAutoaccountvalue":null,
-            "isOperate":null,
-            "isSearch":0,
-            "isCategoryId":"f88a8b3960ac476b8d94e63961bbeabe",
-            "createTime":1506049799000,
-            "isOrder":0,
-            "isOrderSeq":0,
-            "isOrderType":null,
-            "isDisplay":0,
-            "isDisplayWidth":100,
-            "isDisplayOrder":0,
-            "isDisplayAlign":"center",
-            "isInputClass":"easyui-numberbox",
-            "isInput":0,
-            "isInputLength":245,
-            "isFullrow":0,
-            "isRequired":0,
-            "isInherit":0,
-            "isIncrease":0,
-            "isAuto":0,
-            "isAutoField":0,
-            "isDosearchCard":0,
-            "isSupplement":0,
-            "isSupplementNum":null,
-            "isNoRepetition":0,
-            "isAdjust":0,
-            "isAdjustSeq":0,
-            "isAdjustWidth":0,
-            "isRelevance":null,
-            "relevanceSeq":null
-        },
-        {
-            "id":"76e29d5c0a0541bfb1ee9da432183b15",
-            "fieldName":"handover_unit",
-            "fieldCnName":"- 原移交机构",
-            "isDefaultValue":"",
-            "isDefaultValueType":null,
-            "isPattern":null,
-            "isPrecept":null,
-            "isDataType":1,
-            "isColumnLength":200,
-            "isMaxlength":null,
-            "isMinlength":null,
-            "isSequence":24,
-            "isType":4,
-            "isGlobal":null,
-            "isSystem":1,
-            "isAccede":null,
-            "isAutoaccountvalue":null,
-            "isOperate":null,
-            "isSearch":0,
-            "isCategoryId":"f88a8b3960ac476b8d94e63961bbeabe",
-            "createTime":1537007028000,
-            "isOrder":0,
-            "isOrderSeq":0,
-            "isOrderType":null,
-            "isDisplay":0,
-            "isDisplayWidth":100,
-            "isDisplayOrder":0,
-            "isDisplayAlign":"center",
-            "isInputClass":"easyui-textbox",
-            "isInput":0,
-            "isInputLength":265,
-            "isFullrow":0,
-            "isRequired":0,
-            "isInherit":0,
-            "isIncrease":0,
-            "isAuto":0,
-            "isAutoField":0,
-            "isDosearchCard":null,
-            "isSupplement":null,
-            "isSupplementNum":null,
-            "isNoRepetition":null,
-            "isAdjust":null,
-            "isAdjustSeq":null,
-            "isAdjustWidth":null,
-            "isRelevance":null,
-            "relevanceSeq":null
-        },
-        {
-            "id":"a0ffdd94161146c49161662c3f9a70cd",
-            "fieldName":"number_no",
-            "fieldCnName":"份数",
-            "isDefaultValue":"",
-            "isDefaultValueType":"",
-            "isPattern":null,
-            "isPrecept":null,
-            "isDataType":1,
-            "isColumnLength":10,
-            "isMaxlength":null,
-            "isMinlength":null,
-            "isSequence":15,
-            "isType":4,
-            "isGlobal":null,
-            "isSystem":1,
-            "isAccede":null,
-            "isAutoaccountvalue":null,
-            "isOperate":null,
-            "isSearch":null,
-            "isCategoryId":"f88a8b3960ac476b8d94e63961bbeabe",
-            "createTime":1502689065000,
-            "isOrder":0,
-            "isOrderSeq":0,
-            "isOrderType":"asc",
-            "isDisplay":0,
-            "isDisplayWidth":100,
-            "isDisplayOrder":0,
-            "isDisplayAlign":"center",
-            "isInputClass":"easyui-numberbox",
-            "isInput":1,
-            "isInputLength":245,
-            "isFullrow":0,
-            "isRequired":0,
-            "isInherit":0,
-            "isIncrease":0,
-            "isAuto":0,
-            "isAutoField":0,
-            "isDosearchCard":0,
-            "isSupplement":0,
-            "isSupplementNum":null,
-            "isNoRepetition":0,
-            "isAdjust":0,
-            "isAdjustSeq":0,
-            "isAdjustWidth":0,
-            "isRelevance":null,
-            "relevanceSeq":null
-        },
-        {
-            "id":"a79e0d67165a4b08b089b309dd947908",
-            "fieldName":"handoverTime",
-            "fieldCnName":"- 移交时间",
-            "isDefaultValue":"",
-            "isDefaultValueType":null,
-            "isPattern":null,
-            "isPrecept":null,
-            "isDataType":1,
-            "isColumnLength":100,
-            "isMaxlength":null,
-            "isMinlength":null,
-            "isSequence":25,
-            "isType":4,
-            "isGlobal":null,
-            "isSystem":1,
-            "isAccede":null,
-            "isAutoaccountvalue":null,
-            "isOperate":null,
-            "isSearch":0,
-            "isCategoryId":"f88a8b3960ac476b8d94e63961bbeabe",
-            "createTime":1537007091000,
-            "isOrder":0,
-            "isOrderSeq":0,
-            "isOrderType":null,
-            "isDisplay":0,
-            "isDisplayWidth":100,
-            "isDisplayOrder":0,
-            "isDisplayAlign":"center",
-            "isInputClass":"easyui-textbox",
-            "isInput":0,
-            "isInputLength":265,
-            "isFullrow":0,
-            "isRequired":0,
-            "isInherit":0,
-            "isIncrease":0,
-            "isAuto":0,
-            "isAutoField":0,
-            "isDosearchCard":null,
-            "isSupplement":null,
-            "isSupplementNum":null,
-            "isNoRepetition":null,
-            "isAdjust":null,
-            "isAdjustSeq":null,
-            "isAdjustWidth":null,
-            "isRelevance":null,
-            "relevanceSeq":null
-        },
-        {
-            "id":"ca9b850145b74eeda3c22a997696c979",
-            "fieldName":"relevance_no",
-            "fieldCnName":"- 批量关联号",
-            "isDefaultValue":"",
-            "isDefaultValueType":"",
-            "isPattern":null,
-            "isPrecept":null,
-            "isDataType":1,
-            "isColumnLength":20,
-            "isMaxlength":null,
-            "isMinlength":null,
-            "isSequence":23,
-            "isType":4,
-            "isGlobal":null,
-            "isSystem":1,
-            "isAccede":null,
-            "isAutoaccountvalue":null,
-            "isOperate":null,
-            "isSearch":0,
-            "isCategoryId":"f88a8b3960ac476b8d94e63961bbeabe",
-            "createTime":1517987253000,
-            "isOrder":0,
-            "isOrderSeq":0,
-            "isOrderType":null,
-            "isDisplay":0,
-            "isDisplayWidth":100,
-            "isDisplayOrder":0,
-            "isDisplayAlign":"center",
-            "isInputClass":"easyui-textbox",
-            "isInput":0,
-            "isInputLength":245,
-            "isFullrow":0,
-            "isRequired":0,
-            "isInherit":0,
-            "isIncrease":0,
-            "isAuto":0,
-            "isAutoField":0,
-            "isDosearchCard":0,
-            "isSupplement":null,
-            "isSupplementNum":null,
-            "isNoRepetition":null,
-            "isAdjust":0,
-            "isAdjustSeq":0,
-            "isAdjustWidth":0,
-            "isRelevance":null,
-            "relevanceSeq":null
-        },
-        {
-            "id":"dff5529c0d0f45b2b19f2adec7ca0102",
-            "fieldName":"checker",
-            "fieldCnName":"检查人",
-            "isDefaultValue":"",
-            "isDefaultValueType":"",
-            "isPattern":null,
-            "isPrecept":null,
-            "isDataType":1,
-            "isColumnLength":100,
-            "isMaxlength":null,
-            "isMinlength":null,
-            "isSequence":19,
-            "isType":4,
-            "isGlobal":null,
-            "isSystem":0,
-            "isAccede":null,
-            "isAutoaccountvalue":null,
-            "isOperate":null,
-            "isSearch":0,
-            "isCategoryId":"f88a8b3960ac476b8d94e63961bbeabe",
-            "createTime":1502691890000,
-            "isOrder":0,
-            "isOrderSeq":0,
-            "isOrderType":null,
-            "isDisplay":0,
-            "isDisplayWidth":100,
-            "isDisplayOrder":0,
-            "isDisplayAlign":"center",
-            "isInputClass":"easyui-textbox",
-            "isInput":1,
-            "isInputLength":245,
-            "isFullrow":0,
-            "isRequired":0,
-            "isInherit":1,
-            "isIncrease":0,
-            "isAuto":0,
-            "isAutoField":0,
-            "isDosearchCard":0,
-            "isSupplement":0,
-            "isSupplementNum":null,
-            "isNoRepetition":0,
-            "isAdjust":0,
-            "isAdjustSeq":0,
-            "isAdjustWidth":0,
-            "isRelevance":null,
-            "relevanceSeq":null
-        },
-        {
-            "id":"f3f6ff94c26a4a54967de9cfc56a3b01",
-            "fieldName":"code_class",
-            "fieldCnName":"门类代码",
-            "isDefaultValue":"WS",
-            "isDefaultValueType":"08267a6b57904b25bddb217d8474b8a2",
-            "isPattern":null,
-            "isPrecept":null,
-            "isDataType":1,
-            "isColumnLength":10,
-            "isMaxlength":null,
-            "isMinlength":null,
-            "isSequence":2,
-            "isType":4,
-            "isGlobal":null,
-            "isSystem":0,
-            "isAccede":null,
-            "isAutoaccountvalue":null,
-            "isOperate":null,
-            "isSearch":0,
-            "isCategoryId":"f88a8b3960ac476b8d94e63961bbeabe",
-            "createTime":1502691133000,
-            "isOrder":0,
-            "isOrderSeq":0,
-            "isOrderType":"asc",
-            "isDisplay":0,
-            "isDisplayWidth":100,
-            "isDisplayOrder":0,
-            "isDisplayAlign":"center",
-            "isInputClass":"popmodality",
-            "isInput":1,
-            "isInputLength":245,
-            "isFullrow":0,
-            "isRequired":0,
-            "isInherit":1,
-            "isIncrease":0,
-            "isAuto":0,
-            "isAutoField":0,
-            "isDosearchCard":0,
-            "isSupplement":0,
-            "isSupplementNum":null,
-            "isNoRepetition":0,
-            "isAdjust":0,
-            "isAdjustSeq":0,
-            "isAdjustWidth":0,
-            "isRelevance":null,
-            "relevanceSeq":null
-        }
-    ],
-    "footer":null,
-    "postparam":null
-  }

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

@@ -2,28 +2,35 @@
   <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" @click="handleRemove">移出</el-button>
-      <!-- <button @click="testClick">测试按钮</button> -->
+      <el-button icon="el-icon-minus" size="mini" :disabled="selections.length ? false : true " @click="handleRemove">移出</el-button>
+      <!-- <button @click="getTableData">测试按钮</button> -->
     </headSlot>
 
     <!--表格渲染-->
     <el-table
-      ref="fieldTable"
+      ref="table"
       style="min-width: 100%"
       height="calc(100vh - 355px)"
       :data="tableData"
+      :cell-style="cellStyle"
       @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="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="isCategoryName" label="所属门类" min-width="85" />
+      <el-table-column prop="isArchivesID" label="档号" :show-overflow-tooltip="true" min-width="120" />
+      <el-table-column prop="isTitleName" :show-overflow-tooltip="true" label="题名" min-width="120" />
+      <el-table-column prop="isFieldName" label="盒名称" min-width="85" />
+      <el-table-column prop="isStoragePath" label="存放位置" :show-overflow-tooltip="true" min-width="120" />
+      <el-table-column prop="isLendStatus" label="借阅状态" min-width="60">
+        <template slot-scope="scope">
+          <!-- 已借 / 待借 -->
+          <span class="lend-state">{{ scope.row.isLendStatus }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="isOperationTime" label="操作时间" min-width="85" />
     </el-table>
     <!-- 借阅登记模态框 -->
     <el-dialog
@@ -114,6 +121,8 @@
     </el-dialog>
     <!-- 移出确认弹框 -->
     <delConfirm ref="delConfirmDom" :list-name="listName" />
+    <!-- 档案详情 -->
+    <archiveDetail ref="archiveDetailDom" />
     <!-- 分页 -->
     <pagination />
 
@@ -127,9 +136,10 @@ import headSlot from '../components/headSlot.vue'
 import DateRangePicker from '@/components/DateRangePicker'
 import CRUD, { presenter } from '@crud/crud'
 import delConfirm from '../components/delConfirm.vue'
-import data1 from './data1.json'
+import archiveDetail from './module/archiveDetail.vue'
+import data1 from '../data1.json'
 export default {
-  components: { headSlot, DateRangePicker, pagination, delConfirm },
+  components: { headSlot, DateRangePicker, pagination, delConfirm, archiveDetail },
   mixins: [presenter()],
   cruds() {
     return CRUD({
@@ -148,6 +158,7 @@ export default {
   data() {
     return {
       tableData: [],
+      selections: [],
       listName: '借出列表',
       recordFormVisible: false,
       recordForm: {
@@ -168,19 +179,13 @@ export default {
     }
   },
   created() {
-    // this.getTableData()
+    this.getData()
   },
   methods: {
     // 获取数据
-    getTableData() {
-      this.tableData = data1
-      console.log(this.tableData)
+    getData() {
+      this.tableData = data1.rows
     },
-    // 测试按钮
-    // testClick(){
-    //   console.log(1111);
-    //   console.log(data1);
-    // },
     handleRecord() {
       this.recordFormVisible = true
     },
@@ -188,23 +193,34 @@ export default {
     handleRemove() {
       this.$refs.delConfirmDom.deleteVisible = true
     },
-    selectionChangeHandler() {
-      console.log('selectionChangeHandler')
+    // 档案详情
+    handleDbClick(row) {
+      this.$refs.archiveDetailDom.detailVisible = true
+      this.$refs.archiveDetailDom.rowData = row
     },
-    clickRowHandler() {
-      console.log('clickRowHandler')
+    selectionChangeHandler(val) {
+      this.selections = val
+    },
+    clickRowHandler(row) {
+      this.$refs.table.toggleRowSelection(row)
     },
     handleRecordConfirm() {
       this.recordFormVisible = false
-      // this.$alert('这是一段内容', '标题名称', {
-      //   confirmButtonText: '确定',
-      //   callback: action => {
-      //     this.$message({
-      //       type: 'info',
-      //       message: `action: ${ action }`
-      //     });
-      //   }
-      // });
+    },
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      // console.log(column)
+      if (row.isLendStatus === '待借' && columnIndex === 7) {
+        console.log(column, '------------')
+        return {
+          color: '#F65163'
+          // border: '1px solid #F65163'
+        }
+      } else if (row.isLendStatus === '已借' && columnIndex === 7) {
+        return {
+          // background: '#F65163',
+          color: '#fff'
+        }
+      }
     }
   }
 }

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

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <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.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.isLendStatus }}</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.isOperationTime }}</span></p>
+      </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  0 80px 110px;
+}
+p{
+  display: flex;
+  height: 50px;
+  align-items: center;
+  .color-blue{
+    color: #3A99FD;
+    width: 70px;
+    height: 19px;
+    text-align: right;
+  }
+  .color-white{
+    color: white;
+    padding: 0 0 0 20px;
+  }
+}
+</style>