借阅管理

src/assets/styles/lend-manage.scss

@@ -1,44 +1,69 @@
 // 借阅管理
-.crud-opts{
+::v-deep .el-dialog .el-dialog__body{
+  .el-button{
+    background-color: #3A99FD;
+    border-color: #3A99FD;
+  }
+  .el-button.is-disabled,
+  .el-button.is-disabled:hover,
+  .el-button.is-disabled:focus{
+    background-color: #02255F;
+    color: #13439E;
+    border-color: #02255F;
+  }
+}
+
+.crud-opts {
   display: inline-block;
 }
-.iconfont::before{
+
+.iconfont::before {
   margin-right: 5px;
 }
-.cell-lend{
+
+.cell-lend {
   display: inline-block;
   height: 26px;
   line-height: 26px;
   border-radius: 13px;
   text-align: center;
 }
-.no-lend .cell-lend{
-  color:#F65163;
- border: 1px solid #F65163;
 
+.no-lend {
+  color: #F65163;
+  border: 1px solid #F65163;
 }
-.have-lend .cell-lend{
+
+.have-lend {
   color: #fff;
- background-color: #F65163;
-}
-.other-lend .cell-lend{
-color:#F65163;
- border: 1px solid #F65163;
- position: relative;
- &::after{
-  content: '';
-  display: block;
-  height: 2px;
-  width: 20px;
   background-color: #F65163;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%,-50%);
- }
 }
 
-.clear{
+.other-lend {
+  color: #F65163;
+  border: 1px solid #F65163;
+  position: relative;
+
+  &::after {
+    content: '';
+    display: block;
+    height: 2px;
+    width: 20px;
+    background-color: #F65163;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+.has-return{
+  color: #1AAE93;
+  border: 1px solid #1AAE93;
+}
+
+
+.clear {
   border-radius: 13px;
   width: 80px;
   height: 26px;
@@ -46,61 +71,72 @@ color:#F65163;
   display: inline-block;
   text-align: center;
 }
-.no-clear .clear{
+
+.no-clear .clear {
   color: #FD8042;
   border: 1px solid #FD8042;
 }
-.have-clear .clear{
+
+.have-clear .clear {
   color: #1AAE93;
   border: 1px solid #1AAE93;
 }
-.fail-clear .clear{
+
+.fail-clear .clear {
   color: #F65163;
   border: 1px solid #F65163;
 }
-.other-clear .clear{
+
+.other-clear .clear {
   color: #0FBED9;
   border: 1px solid #0FBED9;
 }
 
 //3D库房
-.iframe_box{
+.iframe_box {
   width: 100%;
   height: calc(100vh - 285px);
 }
-.warehouse{
+
+.warehouse {
   display: flex;
   max-height: calc(100vh - 184px);
   overflow: hidden;
-  .warehouse-left{
+
+  .warehouse-left {
     flex: 1;
   }
-  .warehouse-right{
+
+  .warehouse-right {
     width: 458px;
     max-height: calc(100vh - 192px);
   }
 }
-::v-deep .el-table__header-wrapper{
+
+::v-deep .el-table__header-wrapper {
   background: url('~@/assets/images/table_head_bg.png') no-repeat !important;
 }
 
-::v-deep .warehose-el-table .el-table__header .el-table__cell{
+::v-deep .warehose-el-table .el-table__header .el-table__cell {
   padding: 0;
   height: 30px;
   background: transparent;
-  .cell{
+
+  .cell {
     font-size: 14px;
   }
 }
-::v-deep .light-blue{
+
+::v-deep .light-blue {
   background-color: #011E4F !important;
 }
 
-.title-arrow{
+.title-arrow {
   position: relative;
   width: 460px;
-  &::before{
-    content:'';
+
+  &::before {
+    content: '';
     width: 36px;
     height: 12px;
     position: absolute;
@@ -109,8 +145,9 @@ color:#F65163;
     transform: translateY(-50%);
     background: url('~@/assets/images/warehouse_arrow_right.png') no-repeat;
   }
-  &::after{
-    content:'';
+
+  &::after {
+    content: '';
     width: 36px;
     height: 12px;
     position: absolute;
@@ -120,7 +157,8 @@ color:#F65163;
     background: url('~@/assets/images/warehouse_arrow_left.png') no-repeat;
   }
 }
-.table-title{
+
+.table-title {
   color: #fff;
   font-size: 16px;
   text-align: center;
@@ -128,37 +166,45 @@ color:#F65163;
   line-height: 40px;
 }
 
-.warehouse-svg{
-  margin:0 10px 1px 0;
+.warehouse-svg {
+  margin: 0 10px 1px 0;
 }
-::v-deep .el-tag.el-tag--info{
+
+::v-deep .el-tag.el-tag--info {
   height: 26px;
   line-height: 26px;
   background-color: #13439E;
   border: none;
   color: #fff;
 }
-::v-deep .el-tag.el-tag--info .el-tag__close{
+
+::v-deep .el-tag.el-tag--info .el-tag__close {
   background-color: #fff;
 }
 
 //出入库
-.dpflex{
+.dpflex {
   display: flex;
 }
-.orange-btn{
+
+.orange-btn {
   background-color: #FD8042;
   border: none;
-  &.el-button.is-disabled, &.el-button.is-disabled:hover{
+
+  &.el-button.is-disabled,
+  &.el-button.is-disabled:hover {
     background-color: #7E4021;
     color: #666;
   }
 }
-.green-btn{
+
+.green-btn {
 
   background-color: #1AAE93;
   border: none;
-  &.el-button.is-disabled, &.el-button.is-disabled:hover{
+
+  &.el-button.is-disabled,
+  &.el-button.is-disabled:hover {
     background-color: #0D5649;
     color: #666;
   }

src/views/archivesManage/archivesList/archivesAnjuan/index.vue

@@ -178,7 +178,7 @@
 <script>
 import { header, form } from '@crud/crud'
 import { mapGetters } from 'vuex'
-import { common } from '@/utils/archives'
+import { archivesCrud } from '../mixins/archives'
 import PreviewForm from '@/views/components/category/PreviewForm'
 import ArchivesInfo from '../module/archivesInfo/index'
 import Packing from '../module/packing/index'
@@ -193,7 +193,7 @@ export default {
   mixins: [
     header(),
     form({}),
-    common
+    archivesCrud
   ],
   provide() {
     return {

src/views/archivesManage/archivesList/archivesJuannei/index.vue

@@ -131,7 +131,7 @@
 <script>
 import { header, form } from '@crud/crud'
 import { mapGetters } from 'vuex'
-import { common } from '@/utils/archives'
+import { archivesCrud } from '../mixins/archives'
 import PreviewForm from '@/views/components/category/PreviewForm'
 import ArchivesInfo from '../module/archivesInfo/index'
 import UploadFile from '../module/uploadFile/index'
@@ -144,7 +144,7 @@ export default {
   mixins: [
     header(),
     form({}),
-    common
+    archivesCrud
   ],
   inject: ['recycleMain'],
   props: {

src/views/archivesManage/archivesList/archivesProject/index.vue

@@ -105,7 +105,7 @@
 
 <script>
 import { header, form } from '@crud/crud'
-import { common } from '@/utils/archives'
+import { archivesCrud } from '../mixins/archives'
 import PreviewForm from '@/views/components/category/PreviewForm'
 import ArchivesInfo from '../module/archivesInfo/index'
 import RestoreArchives from '../module/restoreArchives/index'
@@ -117,7 +117,7 @@ export default {
   mixins: [
     header(),
     form({}),
-    common
+    archivesCrud
   ],
   inject: ['recycleMain'],
   props: {

src/utils/archives.js → src/views/archivesManage/archivesList/mixins/archives.js

@@ -1,7 +1,7 @@
 import qs from 'qs'
 import { exportFile } from '@/utils/index'
 import { FetchTableDisplayFields, FetchInitArchivesView, FetchFormDisplayFields } from '@/api/archivesManage/archivesList'
-export const common = {
+export const archivesCrud = {
   // 组件共用属性
   data() {
     return {
@@ -85,7 +85,9 @@ export const common = {
       } else if (type === 2) {
         if (this.selectedCategory.isType === 2) {
           if (this.selectedCategory.children.length !== 0) {
-            this.categoryId = this.selectedCategory.children[0].children[0].id
+            if (this.selectedCategory.children[0].children.length !== 0) {
+              this.categoryId = this.selectedCategory.children[0].children[0].id
+            }
           }
         } else if (this.selectedCategory.isType === 3) {
           if (this.selectedCategory.children.length !== 0) {

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

@@ -1,23 +1,24 @@
 <template>
   <div class="to-lend">
-    <div class="head-container">
-      <!-- <crudOperation :permission="permission" /> -->
-      <el-button icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
-      <el-button icon="el-icon-edit" size="mini" :disabled="selections.length===1 ? false : true " @click="handelEdit">修改</el-button>
-      <el-button icon="el-icon-delete" size="mini" :disabled="!selections.length" @click="deleteVisible = true">删除</el-button>
-
-      <!-- 搜索 -->
-      <el-input
-        v-model="query.name"
-        clearable
-        size="small"
-        placeholder="请输入关键词"
-        prefix-icon="el-icon-search"
-        style="width: 200px; margin:0 10px 0 10px;"
-        class="filter-item"
-        @keyup.enter.native="crud.toQuery"
-      />
-      <rrOperation />
+    <div class="head-container head-archives clearfix">
+      <div class="archives-crud">
+        <el-button icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
+        <el-button icon="el-icon-edit" size="mini" :disabled="selections.length===1 ? false : true " @click="handelEdit">修改</el-button>
+        <el-button icon="el-icon-delete" size="mini" :disabled="!selections.length" @click="deleteVisible = true">删除</el-button>
+      </div>
+      <div class="head-search">
+        <el-input v-model="lendQuery[lendSelect]" clearable size="small" placeholder="请输入关键词" style="width: 200px;" class="input-prepend filter-item">
+          <el-select slot="prepend" v-model="lendSelect" style="width: 85px">
+            <el-option
+              v-for="item in queryOption"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-input>
+        <el-button class="filter-item" size="mini" type="success" icon="el-icon-search">搜索</el-button>
+      </div>
     </div>
     <!--表格渲染-->
     <el-table
@@ -61,14 +62,13 @@
 <script>
 import pagination from '@crud/Pagination'
 import CRUD, { presenter, header } from '@crud/crud'
-import rrOperation from '@crud/RR.operation'
 import addBorrower from './module/addBorrower.vue'
 import editBorrower from './module/editBorrower.vue'
 // import crudOperation from '@crud/CRUD.operation'
 import data1 from '../data1.json'
 export default {
   name: 'BorrowerManage',
-  components: { pagination, rrOperation, addBorrower, editBorrower },
+  components: { pagination, addBorrower, editBorrower },
   mixins: [presenter(), header()],
   cruds() {
     return CRUD({
@@ -89,7 +89,13 @@ export default {
       tableData: [],
       selections: [],
       editFormVisible: false,
-      deleteVisible: false
+      deleteVisible: false,
+      lendQuery: {},
+      queryOption: [
+        { value: '选项1', label: '借阅人' },
+        { value: '选项2', label: '电话号码' }
+      ],
+      lendSelect: ''
     }
   },
   mounted() {
@@ -122,5 +128,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+@import "~@/assets/styles/archives-manage.scss";
+.head-archives{
+  padding: 20px;
+}
 </style>

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

@@ -1,66 +0,0 @@
-<template>
-  <div>
-    <el-select
-      v-model="value"
-      placeholder="请选择"
-      clearable
-      filterable
-      @clear="selectClear"
-      @change="selectChange"
-    >
-      <el-option
-        v-for="(item,index) in options"
-        :key="index"
-        :label="item.label"
-        :value="item.value"
-      />
-    </el-select>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    options: {
-      type: Array,
-      required: true,
-      default() {
-        return []
-      }
-    }
-  },
-  data() {
-    return {
-      value: '',
-      selectValue: ''
-    }
-  },
-  watch: {
-    selectValue(val) {
-      this.$emit('selectValue', val)
-    }
-  },
-  methods: {
-    // selectBlur(e) {
-    //   if (e.target.value !== '') {
-    //     console.log(e)
-    //     this.$forceUpdate() // 强制更新
-    //   }
-    // },
-    selectClear() {
-      this.value = ''
-      this.$forceUpdate()
-    },
-    selectChange(val) {
-      this.selectValue = val
-      this.value = this.selectValue.split('-')[0]
-      this.$forceUpdate()
-    }
-  }
-
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>

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

@@ -8,24 +8,29 @@
           <p><span class="color-blue">单据号:</span><span class="color-white">{{ rowData.docNum }}</span></p>
           <p><span class="color-blue">借阅人:</span><span class="color-white">{{ rowData.borrowerName }}</span></p>
           <p><span class="color-blue">所属部门:</span><span class="color-white">{{ rowData.borrowerDepartment }}</span></p>
-          <p class="no-lend"><span class="color-blue">借阅状态:</span><span class="cell-lend">待借阅</span></p>
           <p><span class="color-blue">证件类型:</span><span class="color-white">{{ rowData.borrowerIdType }}</span></p>
           <p><span class="color-blue">证件号码:</span><span class="color-white">{{ rowData.borrowerIdNum }}</span></p>
           <p><span class="color-blue">电话号码:</span><span class="color-white">{{ rowData.borrowerTel }}</span></p>
           <p><span class="color-blue">借阅目的:</span><span class="color-white">{{ rowData.borrowGoal }}</span></p>
           <p><span class="color-blue">借阅日期:</span><span class="color-white">{{ rowData.borrowDays }}</span></p>
+          <p><span class="color-blue">借阅状态:</span><span class="cell-lend no-lend">{{ rowData.lendStatus }}</span></p>
           <p><span class="color-blue">操作时间:</span><span class="color-white">{{ rowData.operationTime }}</span></p>
         </div>
         <el-table :data="tableData" style="margin-top:15px">
           <el-table-column type="index" label="序号" align="center" width="55" />
-          <el-table-column prop="categoryName" label="所属门类" min-width="100" />
-          <el-table-column prop="titleName" label="题名" min-width="140" />
-          <el-table-column prop="archivesID" label="档号" min-width="130" />
-          <el-table-column prop="fieldName" label="盒名称" min-width="80" />
-          <el-table-column prop="storagePath" label="存放位置" min-width="140" />
+          <el-table-column prop="categoryName" label="门类名称" align="center" min-width="100" />
+          <el-table-column prop="titleName" label="题名" align="center" min-width="140" />
+          <el-table-column prop="archivesID" label="档号" align="center" min-width="130" />
+          <el-table-column prop="fieldName" label="盒名称" align="center" min-width="80" />
+          <el-table-column prop="storagePath" label="存放位置" align="center" min-width="140" />
+          <el-table-column prop="lendStatus" label="借阅状态" align="center" min-width="140">
+            <template slot-scope="scope">
+              <!-- 待借阅 / 逾期 have-lend / 待归还 / 已归还 has-return -->
+              <span class="cell-lend no-lend" style="width:76px">{{ scope.row.lendStatus }}</span>
+            </template>
+          </el-table-column>
         </el-table>
       </div>
-
     </el-dialog>
   </div>
 </template>
@@ -52,7 +57,7 @@ export default {
 }
 ::v-deep .el-dialog .el-dialog__header .el-dialog__close::before{
     position: absolute;
-    right: -283px;
+    right: -260px;
     bottom: -10px;
 }
 .dpflex{
@@ -80,10 +85,9 @@ export default {
       &.cell-lend{
         margin-left: 20px;
         width: 76px;
-        line-height: 26px;
+        line-height: 24px;
       }
     }
   }
 }
-
 </style>

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

@@ -43,7 +43,6 @@ export default {
       })
     },
     handleClose() {
-      // console.log('handleClose')
       this.deleteVisible = false
     }
   }

src/views/archivesManage/lendManage/index.vue

@@ -15,9 +15,7 @@
         <!-- 最右侧装饰img -->
         <span class="tab-right-img" />
       </ul>
-      <!-- <component :is="comName" :record-form-visible="recordFormVisible" /> -->
       <component :is="comName" @callBack="callBack" />
-
     </div>
   </div>
 </template>

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

@@ -4,16 +4,14 @@
       <el-button size="mini" class="iconfont icon-jiechu-fanbai" :disabled="!selections.length" @click="handleLendBtn">借出</el-button>
       <el-button size="mini" class="iconfont icon-dengji-fanbai" :disabled="!selections.length" @click="handelReRecord">重新登记</el-button>
       <el-button size="mini" class="iconfont icon-yichu-fanbai" :disabled="!selections.length" @click="handleRemove">移出</el-button>
-      <el-button :disabled="selections.length !== 1" :loading="crud.downloadLoading" size="mini" icon="el-icon-download">导出</el-button>
+      <el-button size="mini" icon="el-icon-download" :loading="crud.downloadLoading">导出</el-button>
     </div>
     <!--表格渲染-->
+    <!-- height="calc(100vh - 355px)" -->
     <el-table
       ref="table"
       :data="tableData"
       style="min-width: 100%"
-      height="calc(100vh - 355px)"
-      :cell-class-name="cell"
-      :default-sort="{ prop: 'operationTime', order: 'descending' }"
       @selection-change="selectionChangeHandler"
       @row-click="clickRowHandler"
       @row-dblclick="handleDbClick"
@@ -32,19 +30,21 @@
       <el-table-column prop="noLendStatus" align="center" label="借阅状态" min-width="70">
         <template slot-scope="scope">
           <!-- 待借阅 -->
-          <span class="cell-lend" style="width:76px">{{ scope.row.noLendStatus }}</span>
+          <span class="cell-lend no-lend" style="width:76px">{{ scope.row.noLendStatus }}</span>
         </template>
       </el-table-column>
-      <el-table-column sortable prop="operationTime" align="center" label="操作时间" min-width="120" />
+      <el-table-column prop="operationTime" align="center" label="操作时间" min-width="120" />
     </el-table>
+    <!-- 分页 -->
+    <pagination />
+    <!-- 借阅档案list -->
+    <!-- <lendArchivesList /> -->
     <!--借出弹框-->
     <lendDialog ref="lendDialogDom" />
     <!-- 移出确认弹框 -->
     <delConfirm ref="delConfirmDom" :list-name="listName" />
     <!-- 档案详情 -->
     <archiveDetail ref="archiveDetailDom" />
-    <!-- 分页 -->
-    <pagination />
   </div>
 </template>
 
@@ -52,9 +52,10 @@
 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 lendDialog from './module/lendDialog.vue'
+import delConfirm from '../components/delConfirm'
+import archiveDetail from '../components/archiveDetail'
+import lendDialog from './module/lendDialog'
+// import lendArchivesList from './module/lendArchivesList'
 import data1 from '../data1.json'
 export default {
   components: { pagination, archiveDetail, delConfirm, lendDialog },
@@ -99,7 +100,6 @@ export default {
       const arr = data1.rows.filter(item => item.docNum === row.docNum)
       archiveDetailDom.rowData = row
       archiveDetailDom.tableData = arr
-      console.log(arr)
     },
     clickRowHandler(row) {
       this.$refs.table.toggleRowSelection(row)
@@ -115,15 +115,14 @@ export default {
         this.$refs.delConfirmDom.deleteVisible = true
       }
     },
-    cell({ row, columnIndex }) {
-      if (columnIndex === 11) {
-        return 'no-lend'
-      }
-    },
+    // 借出
     handleLendBtn() {
       if (this.selections.length > 0) {
+        // 离线
         this.$refs.lendDialogDom.table = this.selections
         this.$refs.lendDialogDom.lendFormVisible = true
+        // 在线
+        // this.$message.success('借阅成功 ' + this.selections.length + ' 条数据' + ' ' + '借阅失败0条数据')
       }
     }
   }
@@ -132,13 +131,4 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@/assets/styles/lend-manage.scss';
-::v-deep .el-dialog__footer {
-  background-color: #031435;
-}
-
-.el-dialog .dialog-footer {
-  padding: 0;
-  margin: 0;
-}
-
 </style>

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

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <!--表格渲染-->
+    <!-- height="calc(100vh - 355px)" -->
+    <el-table
+      ref="table"
+      :data="tableData"
+      style="min-width: 100%"
+      @selection-change="selectionChangeHandler"
+      @row-click="clickRowHandler"
+    >
+      <el-table-column type="selection" width="55" />
+      <el-table-column type="index" label="序号" align="center" width="55" />
+      <el-table-column prop="docNum" align="center" label="单据号" min-width="85" />
+      <el-table-column prop="archiveNum" align="center" label="数量" min-width="50" />
+      <el-table-column prop="borrowerName" align="center" label="借阅人" min-width="60" />
+      <el-table-column prop="borrowerDepartment" align="center" label="所属部门" min-width="85" />
+      <el-table-column prop="borrowerIdType" align="center" label="证件类型" min-width="85" />
+      <el-table-column prop="borrowerIdNum" align="center" label="证件号码" min-width="120" />
+      <el-table-column prop="borrowerTel" align="center" label="电话号码" min-width="85" />
+      <el-table-column prop="borrowDays" align="center" label="借阅时间" min-width="150" />
+      <el-table-column prop="borrowGoal" align="center" label="借阅目的" min-width="70" />
+      <el-table-column prop="noLendStatus" align="center" label="借阅状态" min-width="70">
+        <template slot-scope="scope">
+          <!-- 待借阅 -->
+          <span class="cell-lend no-lend" style="width:76px">{{ scope.row.noLendStatus }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="operationTime" align="center" label="操作时间" min-width="120" />
+    </el-table>
+    <!-- 分页 -->
+    <pagination />
+  </div>
+</template>
+
+<script>
+import pagination from '@crud/Pagination'
+import CRUD, { presenter } from '@crud/crud'
+// import crudOperation from '@crud/CRUD.operation'
+export default {
+  components: { pagination },
+  mixins: [presenter()],
+  cruds() {
+    return CRUD({
+      url: 'api/case/initCaseList',
+      // crudMethod: caseCrudMethod,
+      title: '档案盒',
+      optShow: {
+        add: false,
+        edit: false,
+        del: false,
+        download: true,
+        group: false
+      }
+    })
+  },
+  data() {
+    return {
+      tableData: [],
+      selections: []
+    }
+  },
+  created() {
+  },
+  methods: {
+    clickRowHandler(row) {
+      this.$refs.table.toggleRowSelection(row)
+    },
+    selectionChangeHandler(val) {
+      this.selections = val
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/styles/lend-manage.scss';
+</style>

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

@@ -1,23 +1,26 @@
 <template>
   <div>
+    <!-- 离线状态时 -->
     <el-dialog ref="dialogTable" title="借出" :visible.sync="lendFormVisible">
       <span class="dialog-right-top" />
       <span class="dialog-left-bottom" />
-      <p style="color:#fff;margin:0 0 20px 20px">以下档案需要先解除电子标签警报</p>
-      <el-table :data="table" :cell-class-name="cellWarn" height="325px">
-        <el-table-column type="index" label="序号" width="80" />
-        <el-table-column prop="categoryName" label="所属门类" />
-        <el-table-column prop="archivesID" label="档号" min-width="140" />
-        <el-table-column prop="titleName" label="题名" min-width="140" />
-        <el-table-column prop="warnState" label="状态" min-width="85">
-          <template slot-scope="scope">
-            <!-- 已解除 / 未解除/解除失败 -->
-            <span class="clear">{{ scope.row.warnState }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div slot="footer" class="dialog-footer">
-        <el-button disabled>解除警报</el-button>
+      <div class="setting-dialog">
+        <p style="color: #fff; margin: 0 0 20px 40px;">以下档案需要先解除电子标签警报</p>
+        <el-table :data="table" :cell-class-name="cellWarn" height="325px">
+          <el-table-column type="index" label="序号" width="80" />
+          <el-table-column prop="categoryName" label="类型" />
+          <el-table-column prop="titleName" label="题名" min-width="140" />
+          <el-table-column prop="TID" label="TID" min-width="140" />
+          <el-table-column prop="warnState" label="状态" min-width="85">
+            <template slot-scope="scope">
+              <!-- 已解除 / 未解除 / 解除失败 -->
+              <span class="clear">{{ scope.row.warnState }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary">解除警报</el-button>
+        </div>
       </div>
     </el-dialog>
   </div>
@@ -49,12 +52,13 @@ export default {
 @import '~@/assets/styles/lend-manage.scss';
 ::v-deep .el-dialog{
   width: 950px;
-  height: 519px;
+}
+::v-deep .el-dialog .el-dialog__body{
+  padding: 20px 0;
 }
 ::v-deep .el-dialog .el-dialog__header .el-dialog__close::before{
     position: absolute;
     right: -163px;
     bottom: -4px;
 }
-
 </style>

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

@@ -5,17 +5,10 @@
     </div>
     <div class="content-container">
       <div class="state-radio">
-        <p>
-          <label>
-            <input v-model="lineStateVal" type="radio" name="lineState" value="在线"><span>在线（直接完成借阅操作）</span>
-          </label>
-        </p>
-        <p>
-          <label>
-            <input v-model="lineStateVal" type="radio" name="lineState" value="离线"><span>离线（发起借阅操作后，将借阅的档案放在读写器上进行识别，将带有电子标签的档案的报警位进行解绑或绑定）</span>
-          </label>
-        </p>
-        <!-- <button @click="btn">测试按钮</button> -->
+        <el-radio-group v-model="lineStateVal">
+          <el-radio label="0">在线（直接完成借阅操作）</el-radio>
+          <el-radio label="1">离线（发起借阅操作后，将借阅的档案放在读写器上进行识别，将带有电子标签的档案的报警位进行解绑或绑定）</el-radio>
+        </el-radio-group>
       </div>
     </div>
   </div>
@@ -25,31 +18,27 @@
 export default {
   data() {
     return {
-      lineStateVal: ''
+      lineStateVal: '0'
     }
   },
   methods: {
-    // btn() {
-    //   console.log(this.lineStateVal)
-    // }
   }
 }
 </script>
 
 <style lang="scss" scoped>
 h2{
-  color: #fff;
-}
-p{
-  height: 32px;
-  line-height: 32px;
-  input{
-    margin-right: 10px;
-  }
+  font-size: 18px;
+  color: #3A99FD;
 }
 .content-container{
   height:calc(100vh - 303px);
-  color: #fff;
   padding: 0 20px;
+  ::v-deep .el-radio{
+    display: block;
+    font-size: 16px;
+    margin-top: 20px;
+    color: #999;
+  }
 }
 </style>

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

@@ -1,41 +1,34 @@
 <template>
   <div class="lend-query">
-    <div class="head-container">
-      <!-- <el-button icon="el-icon-download" size="mini" class="margin-r" disabled
-        >导出</el-button
-      > -->
-      <crudOperation />
-      <el-select
-        v-model="lendState"
-        class="filter-item"
-        style="width: 100px; height: 30px;margin-left:10px"
-      >
-        <el-option
-          v-for="item in lendStateOptions"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        />
-      </el-select>
-      <el-input
-        v-model="keyWord"
-        size="small"
-        clearable
-        placeholder="请输入关键词"
-        style="width: 300px;margin:0 10px 0 -20px;padding-left:8px"
-        class="input-prepend filter-item"
-        @keyup.enter.native="crud.toQuery"
-      >
-        <el-select slot="prepend" v-model="cateSearch" style="width: 90px">
+    <div class="head-container head-archives clearfix">
+      <div class="archives-crud">
+        <el-button :loading="crud.downloadLoading" size="mini" icon="el-icon-download">导出</el-button>
+      </div>
+      <div class="head-search">
+        <el-select
+          v-model="lendState"
+          class="filter-item"
+          style="width: 100px; height: 30px;margin-left:10px"
+        >
           <el-option
-            v-for="item in cateSearchOptions"
+            v-for="item in lendStateOptions"
             :key="item.value"
             :label="item.label"
             :value="item.value"
           />
         </el-select>
-      </el-input>
-      <rrOperation />
+        <el-input v-model="lendQuery[lendSelect]" clearable size="small" placeholder="请输入关键词" style="width: 200px;" class="input-prepend filter-item">
+          <el-select slot="prepend" v-model="lendSelect" style="width: 85px">
+            <el-option
+              v-for="item in queryOption"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-input>
+        <el-button class="filter-item" size="mini" type="success" icon="el-icon-search">搜索</el-button>
+      </div>
     </div>
     <!--表格渲染-->
     <el-table
@@ -43,7 +36,7 @@
       style="width: 100%"
       height="calc(100vh - 356px)"
       :data="tableData"
-      :cell-class-name="cell"
+      @selection-change="selectionChangeHandler"
       @row-click="clickRowHandler"
       @row-dblclick="handleDbClick"
     >
@@ -51,8 +44,8 @@
       <el-table-column type="index" label="序号" align="center" width="55" />
       <el-table-column prop="lendStatus" align="center" label="借阅状态" width="100">
         <template slot-scope="scope">
-          <!-- 已借 / 待借 -->
-          <span class="cell-lend" style="width:76px">{{ scope.row.lendStatus }}</span>
+          <!-- 待归还 / 待借阅 / 逾期 have-lend / 待登记 / 已归还 -->
+          <span class="cell-lend has-return" style="width:76px">{{ scope.row.lendStatus }}</span>
         </template>
       </el-table-column>
       <el-table-column prop="docNum" align="center" label="单据号" width="160" />
@@ -76,13 +69,11 @@
 <script>
 import CRUD, { presenter } from '@crud/crud'
 import pagination from '@crud/Pagination'
-import rrOperation from '@crud/RR.operation'
-import crudOperation from '@crud/CRUD.operation'
 import data3 from '../data3.json'
-import archiveDetail from '../returnArchives/module/archiveDetail.vue'
+import archiveDetail from '../components/archiveDetail'
 export default {
   name: 'LendQuery',
-  components: { pagination, rrOperation, crudOperation, archiveDetail },
+  components: { pagination, archiveDetail },
   mixins: [presenter()],
   cruds() {
     return CRUD({
@@ -101,6 +92,7 @@ export default {
   data() {
     return {
       tableData: [],
+      selections: [],
       lendStateOptions: [
         { value: '选项1', label: '全部' },
         { value: '选项2', label: '待登记' },
@@ -110,9 +102,8 @@ export default {
         { value: '选项6', label: '已归还' }
       ],
       lendState: '全部',
-      keyWord: '',
-      cateSearch: '借阅人',
-      cateSearchOptions: [
+      lendQuery: {},
+      queryOption: [
         { value: '选项1', label: '借阅人' },
         { value: '选项2', label: '档号' },
         { value: '选项3', label: '题名' },
@@ -120,7 +111,8 @@ export default {
         { value: '选项5', label: '档案盒' },
         { value: '选项6', label: '条形码' },
         { value: '选项7', label: 'TID' }
-      ]
+      ],
+      lendSelect: ''
     }
   },
   mounted() {
@@ -130,22 +122,26 @@ export default {
     getData() {
       this.tableData = data3.rows
     },
+    selectionChangeHandler(val) {
+      this.selections = val
+    },
     clickRowHandler(row) {
       this.$refs.table.toggleRowSelection(row)
     },
-    cell({ row, columnIndex }) {
-      if (row.lendStatus === '逾期' && columnIndex === 2) {
-        return 'no-lend'
-      } else if (row.lendStatus === '待归还' && columnIndex === 2) {
-        return 'have-lend'
-      }
-    },
+    // cell({ row, columnIndex }) {
+    //   if (row.lendStatus === '逾期' && columnIndex === 2) {
+    //     return 'no-lend'
+    //   } else if (row.lendStatus === '待归还' && columnIndex === 2) {
+    //     return 'have-lend'
+    //   }
+    // },
     // 档案详情
     handleDbClick(row) {
       // this.$refs.table.clearSelection()
       const archiveDetailDom = this.$refs.archiveDetailDom
-      // const arr = data3.rows.filter(item => item.docNum === row.docNum)
+      const arr = data3.rows.filter(item => item.docNum === row.docNum)
       archiveDetailDom.rowData = row
+      archiveDetailDom.tableData = arr
       console.log(row)
       // 借阅状态样式类名
       if (row.lendStatus === '待归还') {
@@ -160,10 +156,9 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-@import '~@/assets/styles/lend-manage.scss';
 @import "~@/assets/styles/archives-manage.scss";
-
-::v-deep .el-icon-arrow-up:before{
-  color: #339CFF;
+@import '~@/assets/styles/lend-manage.scss';
+.head-archives{
+  padding: 20px;
 }
 </style>

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

@@ -1,8 +1,23 @@
 <template>
   <div class="to-lend">
-    <div class="head-container">
-      <el-button size="mini" class="iconfont icon-guihuan-fanbai" :disabled="!selections.length" @click="handleReturn">归还</el-button>
-      <crudOperation style="margin-left:10px" />
+    <div class="head-container head-archives clearfix">
+      <div class="archives-crud">
+        <el-button size="mini" class="iconfont icon-guihuan-fanbai" :disabled="!selections.length" @click="handleReturn">归还</el-button>
+        <el-button :loading="crud.downloadLoading" size="mini" icon="el-icon-download">导出</el-button>
+      </div>
+      <div class="head-search">
+        <el-input v-model="lendQuery[lendSelect]" clearable size="small" placeholder="请输入关键词" style="width: 200px;" class="input-prepend filter-item">
+          <el-select slot="prepend" v-model="lendSelect" style="width: 85px">
+            <el-option
+              v-for="item in queryOption"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-input>
+        <el-button class="filter-item" size="mini" type="success" icon="el-icon-search">搜索</el-button>
+      </div>
     </div>
     <!--表格渲染-->
     <el-table
@@ -10,8 +25,6 @@
       style="width:100%"
       height="calc(100vh - 355px)"
       :data="tableData"
-      :cell-class-name="cell"
-      :default-sort="{ prop: 'operationTime', order: 'descending' }"
       @selection-change="selectionChangeHandler"
       @row-click="clickRowHandler"
       @row-dblclick="handleDbClick"
@@ -29,24 +42,13 @@
       <el-table-column prop="borrowGoal" align="center" label="借阅目的" width="100" />
       <el-table-column prop="lendStatus" align="center" label="借阅状态" width="100">
         <template slot-scope="scope">
-          <!-- 逾期 / 待归还 -->
+          <!-- 逾期 have-lend / 待归还 no-lend -->
           <span class="cell-lend" style="width:76px">{{ scope.row.lendStatus }}</span>
         </template>
       </el-table-column>
       <el-table-column prop="lendHandler" align="center" label="操作人" width="100" />
-      <el-table-column sortable align="center" prop="operationTime" label="操作时间" width="180" />
+      <el-table-column align="center" prop="operationTime" label="操作时间" width="180" />
     </el-table>
-    <!-- 归还确认 -->
-    <el-dialog title="归还确认" :visible.sync="returnVisible">
-      <span class="dialog-right-top" />
-      <span class="dialog-left-bottom" />
-      <div class="setting-dialog">
-        <p><span style="color:#fff;">您将归还当前档案数据</span></p>
-        <div slot="footer" class="dialog-footer">
-          <el-button type="primary" @click.native="handleConfirm">确定</el-button>
-        </div>
-      </div>
-    </el-dialog>
     <!-- 归还失败 -->
     <returnDialog ref="returnDialogDom" />
     <!-- 档案详情 -->
@@ -59,12 +61,11 @@
 <script>
 import pagination from '@crud/Pagination'
 import CRUD, { presenter } from '@crud/crud'
-import crudOperation from '@crud/CRUD.operation'
 import data3 from '../data3.json'
-import archiveDetail from './module/archiveDetail.vue'
-import returnDialog from './module/returnDialog.vue'
+import archiveDetail from '../components/archiveDetail'
+import returnDialog from './module/returnDialog'
 export default {
-  components: { pagination, crudOperation, archiveDetail, returnDialog },
+  components: { pagination, archiveDetail, returnDialog },
   mixins: [presenter()],
   cruds() {
     return CRUD({
@@ -84,12 +85,19 @@ export default {
     return {
       tableData: [],
       selections: [],
+      lendQuery: {},
+      queryOption: [
+        { value: 'queryTitle', label: '单据号' },
+        { value: 'archiveNo', label: '借阅人' }
+      ],
+      lendSelect: '',
       returnVisible: false,
       returnAgainVisible: false
     }
   },
   mounted() {
     this.getData()
+    this.lendSelect = this.queryOption[0].value
   },
   methods: {
     getData() {
@@ -101,32 +109,16 @@ export default {
     clickRowHandler(row) {
       this.$refs.table.toggleRowSelection(row)
     },
-    // 归还确认
-    handleConfirm() {
-      this.returnVisible = false
-      const returnDialogDom = this.$refs.returnDialogDom
-      returnDialogDom.table = this.selections
-      returnDialogDom.returnVisible = true
-    },
     handleConfirmAgain() {
       this.returnAgainVisible = false
     },
-    cell({ row, columnIndex }) {
-      if (row.lendStatus === '逾期' && columnIndex === 11) {
-        return 'no-lend'
-      } else if (row.lendStatus === '待归还' && columnIndex === 11) {
-        return 'have-lend'
-      } else if (row.lendStatus === '' && columnIndex === 11) {
-        return 'other-lend'
-      }
-    },
     // 档案详情
     handleDbClick(row) {
       // this.$refs.table.clearSelection()
       const archiveDetailDom = this.$refs.archiveDetailDom
-      // const arr = data3.rows.filter(item => item.docNum === row.docNum)
+      const arr = data3.rows.filter(item => item.docNum === row.docNum)
       archiveDetailDom.rowData = row
-      console.log(row)
+      archiveDetailDom.tableData = arr
       // 借阅状态样式类名
       if (row.lendStatus === '待归还') {
         archiveDetailDom.classLend = 'have-lend'
@@ -135,9 +127,15 @@ export default {
       }
       archiveDetailDom.detailVisible = true
     },
+    // 归还
     handleReturn() {
       if (this.selections.length > 0) {
-        this.returnVisible = true
+        // 离线
+        const returnDialogDom = this.$refs.returnDialogDom
+        returnDialogDom.table = this.selections
+        returnDialogDom.returnVisible = true
+        // 在线
+        // this.$message.success('归还成功 ' + this.selections.length + ' 条数据' + ' ' + '归还失败0条数据')
       }
     }
   }
@@ -145,14 +143,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "~@/assets/styles/archives-manage.scss";
 @import '~@/assets/styles/lend-manage.scss';
-
-::v-deep .el-dialog__footer {
-  background-color: #031435;
-}
-
-.el-dialog .dialog-footer {
-  padding: 0;
-  margin: 0;
+.head-archives{
+  padding: 20px;
 }
 </style>

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

@@ -1,95 +0,0 @@
-<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.docNum }}</span></p>
-
-          <p class="right"><span class="color-blue">借阅人:</span><span class="color-white">{{ rowData.borrowerName }}</span></p>
-        </div>
-        <div class="dpflex">
-          <p class="left"><span class="color-blue">所属部门:</span><span class="color-white">{{ rowData.borrowerDepartment }}</span></p>
-          <p class="right"><span class="color-blue">证件类型:</span><span class="color-white">{{ rowData.borrowerIdType }}</span></p>
-        </div>
-        <div class="dpflex">
-          <p class="left"><span class="color-blue">证件号码:</span><span class="color-white">{{ rowData.borrowerIdNum }}</span></p>
-          <p class="right"><span class="color-blue">电话号码:</span><span class="color-white">{{ rowData.borrowerTel }}</span></p>
-        </div>
-        <div class="dpflex">
-          <p class="left"><span class="color-blue">借阅日期:</span><span class="color-white">{{ rowData.borrowDays }}</span></p>
-          <p class="right"><span class="color-blue">借阅目的:</span><span class="color-white">{{ rowData.borrowGoal }}</span></p>
-        </div>
-        <div class="dpflex">
-          <p class="left" :class="classLend"><span class="color-blue">借阅状态:</span><span class="cell-lend">{{ rowData.lendStatus }}</span></p>
-          <p class="right"><span class="color-blue">操作时间:</span><span class="color-white">{{ rowData.operationTime }}</span></p>
-        </div>
-        <div class="dpflex">
-          <p class="left"><span class="color-blue">所属门类:</span><span class="color-white">{{ rowData.categoryName }}</span></p>
-          <p class="right"><span class="color-blue">档号:</span><span class="color-white">{{ rowData.archivesID }}</span></p>
-        </div>
-        <p class="left"><span class="color-blue">题名:</span><span class="color-white">{{ rowData.titleName }}</span></p>
-        <div class="dpflex">
-          <p class="left"><span class="color-blue">盒名称:</span><span class="color-white">{{ rowData.fieldName }}</span></p>
-          <p class="right"><span class="color-blue">存放位置:</span><span class="color-white">{{ rowData.storagePath }}</span></p>
-        </div>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      detailVisible: false,
-      rowData: {},
-      classLend: ''
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import '~@/assets/styles/lend-manage.scss';
-::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;
-  }
-}
-.cell-lend{
-  width: 76px;
-  margin-left: 20px;
-}
-::v-deep .el-dialog .el-dialog__header .el-dialog__close::before{
-    position: absolute;
-    right: -83px;
-    bottom: -10px;
-}
-</style>

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

@@ -3,21 +3,23 @@
     <el-dialog ref="dialogTable" title="归还" :visible.sync="returnVisible">
       <span class="dialog-right-top" />
       <span class="dialog-left-bottom" />
-      <p style="color:#fff;margin:0 0 20px 20px">以下档案需要先恢复电子标签警报</p>
-      <el-table :data="table" :cell-class-name="cellWarn" height="325px">
-        <el-table-column type="index" label="序号" width="80" />
-        <el-table-column prop="categoryName" label="所属门类" />
-        <el-table-column prop="archivesID" label="档号" min-width="140" />
-        <el-table-column prop="titleName" label="题名" min-width="140" />
-        <el-table-column prop="warnRestoreState" label="状态" min-width="85">
-          <template slot-scope="scope">
-            <!-- 已恢复 / 未恢复/恢复失败 -->
-            <span class="clear">{{ scope.row.warnRestoreState }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div slot="footer" class="dialog-footer">
-        <el-button disabled>恢复警报</el-button>
+      <div class="setting-dialog">
+        <p style="color:#fff; margin:0 0 20px 20px;">以下档案需要先恢复电子标签警报</p>
+        <el-table :data="table" :cell-class-name="cellWarn" height="325px">
+          <el-table-column type="index" label="序号" width="80" />
+          <el-table-column prop="categoryName" label="类型" />
+          <el-table-column prop="titleName" label="题名" min-width="140" />
+          <el-table-column prop="TID" label="TID" min-width="140" />
+          <el-table-column prop="warnRestoreState" label="状态" min-width="85">
+            <template slot-scope="scope">
+              <!-- 已恢复 / 未恢复/恢复失败 -->
+              <span class="clear">{{ scope.row.warnRestoreState }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div slot="footer" class="dialog-footer">
+          <el-button disabled>恢复警报</el-button>
+        </div>
       </div>
     </el-dialog>
   </div>
@@ -49,7 +51,6 @@ export default {
 @import '~@/assets/styles/lend-manage.scss';
 ::v-deep .el-dialog{
   width: 950px;
-  height: 519px;
 }
 ::v-deep .el-dialog .el-dialog__header .el-dialog__close::before{
     position: absolute;

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

@@ -4,15 +4,12 @@
       <el-button size="mini" class="iconfont icon-dengji-fanbai" :disabled="!selections.length" @click="handleRecord">登记</el-button>
       <el-button size="mini" class="iconfont icon-yichu-fanbai" :disabled="!selections.length" @click="handleRemove">移出</el-button>
     </div>
-
     <!--表格渲染-->
     <el-table
       ref="table"
       style="min-width: 100%"
       height="calc(100vh - 355px)"
       :data="tableData"
-      :default-sort="{ prop: 'operationTime', order: 'descending' }"
-      :cell-class-name="cell"
       @selection-change="selectionChangeHandler"
       @row-click="clickRowHandler"
       @row-dblclick="handleDbClick"
@@ -27,7 +24,7 @@
       <el-table-column prop="lendStatus" align="center" label="借阅状态" min-width="60">
         <template slot-scope="scope">
           <!-- 待登记 -->
-          <span class="cell-lend" style="width:80px">{{ scope.row.lendStatus }}</span>
+          <span class="cell-lend no-lend" style="width:80px">{{ scope.row.lendStatus }}</span>
         </template>
       </el-table-column>
       <el-table-column prop="operationTime" align="center" label="操作时间" min-width="85" />
@@ -40,7 +37,6 @@
     <archiveDetail ref="archiveDetailDom" />
     <!-- 分页 -->
     <pagination />
-
   </div>
 </template>
 
@@ -75,7 +71,7 @@ export default {
     return {
       tableData: [],
       selections: [], // 选中列表
-      listName: '借出列表'
+      listName: '待借列表'
     }
   },
   created() {
@@ -85,8 +81,6 @@ export default {
     // 获取数据
     getData() {
       this.tableData = data2.rows
-      // console.log(this.crud, '---')
-      // this.crud.page.total = data2.total
     },
     handleRecord() {
       this.$refs.lendRecordDom.recordFormVisible = true
@@ -108,11 +102,6 @@ export default {
     },
     clickRowHandler(row) {
       this.$refs.table.toggleRowSelection(row) // 单击选中
-    },
-    cell({ row, columnIndex }) {
-      if (row.lendStatus === '待登记' && columnIndex === 7) {
-        return 'no-lend'
-      }
     }
   }
 }
@@ -120,7 +109,6 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@/assets/styles/lend-manage.scss';
-
 ::v-deep .el-range-separator{
   color: #fff;
   padding-top:2px ;

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

@@ -32,7 +32,7 @@ export default {
   width: 600px;
 }
 ::v-deep .el-dialog__body{
-  padding: 60px  0 80px 110px;
+  padding: 60px 0 80px 110px;
 }
 p{
   display: flex;

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

@@ -13,8 +13,20 @@
           style="margin-left:85px"
         >
           <el-form-item label="借阅人" prop="borrowerName">
-            <!-- <el-input v-model="recordForm.borrowerName" style="width: 320px" /> -->
-            <input-select :options="options" @selectValue="handleSelectValue" />
+            <el-select
+              v-model="recordForm.borrowerName"
+              placeholder="请选择"
+              clearable
+              filterable
+              @change="handleSelectValue"
+            >
+              <el-option
+                v-for="(item,index) in options"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
           </el-form-item>
           <el-form-item label="电话号码" prop="tel">
             <el-input v-model="recordForm.tel" />
@@ -82,10 +94,8 @@
 
 <script>
 import DateRangePicker from '@/components/DateRangePicker'
-import InputSelect from '../../components/InputSelect.vue'
-
 export default {
-  components: { DateRangePicker, InputSelect },
+  components: { DateRangePicker },
   data() {
     return {
       lendDates: '',
@@ -100,9 +110,7 @@ export default {
         borrowGoal: []
       },
       rules: {
-        borrowerName: [
-          { required: true, message: '请输入姓名', trigger: 'blur' }
-        ],
+        borrowerName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
         tel: [{ required: true, message: '请输入电话号码', trigger: 'blur' }]
       },
       options: [
@@ -117,13 +125,11 @@ export default {
           value: '小黑-222222222222',
           label: '小黑-222222222222'
         }
-
       ]
     }
   },
   methods: {
     handleRecordConfirm() {
-      // console.log(this.lendDates)
       this.$refs.recordFormDom.validate((valid) => {
         if (valid) {
           this.$message({
@@ -140,8 +146,9 @@ export default {
       })
     },
     handleSelectValue(val) {
-      console.log(val, '-------------')
+      this.recordForm.borrowerName = val.split('-')[0]
       this.recordForm.tel = val.split('-')[1]
+      this.$forceUpdate()
     },
     handleClose() {
       this.$refs.recordFormDom.resetFields()