借阅管理/档案盘点 按钮交互更改

src/views/archivesManage/archivesCheck/index.vue

@@ -1,84 +1,217 @@
-<template>
-  <div class="app-container container-wrap">
-    <span class="right-top-line" />
-    <span class="left-bottom-line" />
-    <div class="head-container">
-      <eHeader :dict="dict" :permission="permission" />
-      <crudOperation :permission="permission" />
-    </div>
-    <!--表格渲染-->
-    <el-table
-      ref="fieldTable"
-      style="min-width: 100%"
-      height="calc(100vh - 367px)"
-      @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>
-    <!--分页组件-->
-    <pagination />
-  </div>
-</template>
-
-<script>
-import eHeader from './module/header'
-import CRUD, { presenter } from '@crud/crud'
-import crudJob from '@/api/system/job'
-import crudOperation from '@crud/CRUD.operation'
-import pagination from '@crud/Pagination'
-
-export default {
-  name: 'Job',
-  components: { eHeader, crudOperation, pagination },
-  cruds() {
-    return CRUD({
-      title: '岗位',
-      //   url: 'api/job',
-      sort: ['jobSort,asc', 'id,desc'],
-      crudMethod: { ...crudJob },
-      optShow: {
-        add: true,
-        edit: false,
-        del: true,
-        download: false,
-        group: false
-      }
-    })
-  },
-  mixins: [presenter()],
-  dicts: ['job_status'],
-
-  data() {
-    return {
-      permission: {
-        add: ['admin', 'job:add'],
-        edit: ['admin', 'job:edit'],
-        del: ['admin', 'job:del']
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.head-container {
-  color: #fff;
-  //   display: flex;
-  //   align-items: center;
-}
-.crud-opts {
-  // display: inline-block;
-}
-</style>
+<template>
+  <div class="app-container container-wrap">
+    <span class="right-top-line" />
+    <span class="left-bottom-line" />
+    <div class="head-container">
+      <el-button
+        icon="el-icon-plus"
+        size="mini"
+        @click="addFormVisible = true"
+      >新增</el-button>
+      <el-button
+        icon="el-icon-delete"
+        size="mini"
+        style="margin:0 7px 0 7px"
+        @click="deleteVisible = true"
+      >删除</el-button>
+      <!-- <el-input
+        v-model="query.name"
+        clearable
+        size="small"
+        placeholder="输入岗位名称搜索"
+        prefix-icon="el-icon-search"
+        style="width: 200px"
+        class="filter-item"
+        @keyup.enter.native="crud.toQuery"
+      /> -->
+      <el-input
+        v-model="keyWord"
+        size="small"
+        clearable
+        placeholder="请输入关键词"
+        style="width: 300px"
+        class="input-prepend"
+        @keyup.enter.native="crud.toQuery"
+      >
+        <el-select slot="prepend" v-model="cateSearch" style="width: 100px">
+          <el-option
+            v-for="item in cateSearchOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-input>
+      <rrOperation />
+
+      <!-- <eHeader :dict="dict" :permission="permission" /> -->
+
+      <!-- <crudOperation :permission="permission" /> -->
+    </div>
+    <!--表格渲染-->
+    <el-table
+      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" />
+      <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>
+    <!-- 删除模态框 -->
+    <el-dialog title="确认删除" :visible.sync="deleteVisible" :before-close="handleClose">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <p><span style="color:#fff;">确定删除当前盘点任务？</span></p>
+        <p><span style="color:red;">提示：确定删除后,该数据将无法找回!</span></p>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click.native="handleConfirm">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <!-- 新增模态框 -->
+    <el-dialog title="新增盘点" :visible.sync="addFormVisible">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <el-table :data="gridData">
+        <el-table-column type="index" label="序号" width="55" />
+        <el-table-column prop="fieldCnName" label="状态" />
+        <el-table-column prop="fieldCnName" label="所属门类" />
+        <el-table-column prop="fieldCnName" label="子条目数" />
+        <el-table-column prop="fieldCnName" label="全宗号" />
+        <el-table-column prop="fieldName" label="档号" min-width="140" />
+        <el-table-column prop="fieldCnName" label="部门名称" />
+        <el-table-column label="题名" min-width="85" />
+        <el-table-column label="年度" min-width="85" />
+        <el-table-column label="保管期限" min-width="85" />
+        <el-table-column label="密级" min-width="85" />
+        <el-table-column label="存放位置" min-width="85" />
+      </el-table>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="handleSave">保存</el-button>
+      </div>
+    </el-dialog>
+    <!--分页组件-->
+    <pagination />
+  </div>
+</template>
+
+<script>
+// import eHeader from './module/header'
+import rrOperation from '@crud/RR.operation'
+import CRUD, { presenter } from '@crud/crud'
+// import crudJob from '@/api/system/job'
+import crudOperation from '@crud/CRUD.operation'
+import pagination from '@crud/Pagination'
+import { header } from '@crud/crud'
+
+export default {
+  name: 'Job',
+  components: { crudOperation, pagination, rrOperation },
+  mixins: [header(), presenter()],
+  props: {
+    dict: {
+      type: Object,
+      required: true
+    },
+    permission: {
+      type: Object,
+      required: true
+    }
+  },
+  cruds() {
+    return CRUD({
+      title: '岗位',
+      //   url: 'api/job',
+      //   sort: ['jobSort,asc', 'id,desc'],
+      //   crudMethod: { ...crudJob },
+      optShow: {
+        add: true,
+        edit: false,
+        del: true,
+        download: false,
+        group: false
+      }
+    })
+  },
+  dicts: ['job_status'],
+
+  data() {
+    return {
+      permission: {
+        add: ['admin', 'job:add'],
+        edit: ['admin', 'job:edit'],
+        del: ['admin', 'job:del']
+      },
+      cateSearch: '区域',
+      cateSearchOptions: [
+        { value: '选项1', label: '区域' }
+      ],
+      deleteVisible: false,
+      addFormVisible: false
+    }
+  },
+  methods: {
+    handleConfirm() {
+      this.deleteVisible = false
+    },
+    handleSave(){
+        this.addFormVisible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.head-container {
+  color: #fff;
+  //   display: flex;
+  //   align-items: center;
+}
+.crud-opts {
+  // display: inline-block;
+}
+::v-deep .input-prepend {
+  margin: 0 10px 0 0;
+  background-color: #021941;
+  border-radius: 3px;
+  // word-spacing: -10px;
+  border: 1px solid #339cff;
+  .el-select {
+    background-color: #021941;
+    color: #fff;
+  }
+  .el-input__inner {
+    background-color: #021941;
+    border: none;
+    caret-color: #fff;
+    height: 28px;
+    line-height: 28px;
+  }
+  .el-input-group__prepend {
+    border: none;
+  }
+}
+::v-deep .el-dialog__footer {
+  background-color: #031435;
+}
+
+.el-dialog .dialog-footer {
+  padding: 0;
+  margin: 0;
+}
+::v-deep .el-dialog{
+    width: 1340px;
+}
+</style>

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

@@ -1,35 +1,23 @@
 <template>
   <div class="to-lend">
     <head-slot>
-      <el-button
-        icon="el-icon-plus"
-        size="mini"
-        @click="handleAdd"
-      >增加</el-button>
-      <el-button icon="el-icon-edit" size="mini" disabled>修改</el-button>
-      <el-button
-        icon="el-icon-delete"
-        size="mini"
-        class="margin-r"
-        disabled
-      >删除</el-button>
+      <!-- <crudOperation :permission="permission" /> -->
+      <el-button icon="el-icon-plus" size="mini" @click="addFormVisible = true">新增</el-button>
+      <el-button icon="el-icon-edit" size="mini" @click="editFormVisible = true">修改</el-button>
+      <el-button icon="el-icon-delete" size="mini" @click="deleteVisible = true">删除</el-button>
+
       <!-- 搜索 -->
       <el-input
-        size="small"
+        v-model="query.name"
         clearable
+        size="small"
         placeholder="请输入关键词"
         prefix-icon="el-icon-search"
-        style="width: 200px"
+        style="width: 200px; margin-left: 10px"
         class="filter-item"
+        @keyup.enter.native="crud.toQuery"
       />
-      <span style="margin-left: -10px">
-        <el-button
-          class="filter-item"
-          size="mini"
-          type="success"
-          icon="el-icon-search"
-        />
-      </span>
+      <rrOperation />
     </head-slot>
     <!--表格渲染-->
     <el-table
@@ -126,36 +114,136 @@
         </div>
       </div>
     </el-dialog>
+    <!-- 修改模态框 -->
+    <el-dialog
+      append-to-body
+      :close-on-click-modal="false"
+      :visible.sync="editFormVisible"
+      title="修改借阅人"
+    >
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <el-form
+          ref="form"
+          :model="borrowerForm"
+          :rules="rules"
+          size="small"
+          label-width="80px"
+        >
+          <el-form-item label="借阅人" prop="borrowerName">
+            <el-input
+              v-model="borrowerForm.borrowerName"
+              style="width: 420px"
+            />
+          </el-form-item>
+          <el-form-item label="电话号码" prop="tel">
+            <el-input v-model="borrowerForm.tel" style="width: 420px" />
+          </el-form-item>
+          <el-form-item label="所属部门" prop="department" class="down-select">
+            <el-select
+              v-model="borrowerForm.departmentDatas"
+              style="width: 420px"
+              multiple
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in borrowerForm.departmentDatas"
+                :key="item.name"
+                :disabled="level !== 1 && item.level <= level"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="证件类型" prop="idType" class="down-select">
+            <el-select
+              v-model="borrowerForm.idType"
+              style="width: 420px"
+              multiple
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in borrowerForm.idType"
+                :key="item.name"
+                :disabled="level !== 1 && item.level <= level"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="证件号码" prop="idNumber">
+            <el-input v-model="borrowerForm.idNumber" style="width: 420px" />
+          </el-form-item>
+          <!-- <el-form-item label="借阅时间" prop="lendDate">
+            <date-range-picker style="width: 420px" />
+          </el-form-item> -->
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="editFormVisible = false">取消</el-button>
+          <el-button
+            type="primary"
+            @click="editFormVisible = false"
+          >确认</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <!-- 删除模态框 -->
+    <el-dialog title="确认删除" :visible.sync="deleteVisible" :before-close="handleClose">
+      <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>
     <!-- 分页 -->
-    <el-pagination
-      :current-page="currentPage4"
-      :page-sizes="[10, 20, 30, 50, 100]"
-      :page-size="100"
-      layout="total, sizes, prev, pager, next, jumper"
-      :total="0"
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-    />
-    <!-- <pagination /> -->
+    <pagination />
   </div>
 </template>
 
 <script>
 import headSlot from '../components/headSlot.vue'
-// import rrOperation from '@crud/RR.operation'
-
+import pagination from '@crud/Pagination'
+import CRUD, { presenter, header } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import crudOperation from '@crud/CRUD.operation'
 export default {
-  components: { headSlot },
+  components: { headSlot, pagination, rrOperation, crudOperation },
+  mixins: [presenter(), header()],
+  cruds() {
+    return CRUD({
+      // title: '岗位',
+      //   url: 'api/job',
+      // crudMethod: { ...crudJob },
+      optShow: {
+        add: true,
+        edit: true,
+        del: true,
+        download: false,
+        group: false
+      }
+    })
+  },
   data() {
     return {
       tableData: [],
       addFormVisible: false,
+      editFormVisible: false,
+      deleteVisible: false,
       borrowerForm: {
         borrowerName: '',
         tel: '',
         department: '',
         idType: [],
         idNumber: ''
+      },
+      permission: {
+        add: ['admin', 'lend:add'],
+        edit: ['admin', 'lend:edit'],
+        del: ['admin', 'lend:del']
       }
     }
   },
@@ -167,8 +255,10 @@ export default {
       console.log('clickRowHandler')
     },
     handleAdd() {
-      console.log(111)
       this.addFormVisible = true
+    },
+    handleConfirm() {
+      this.deleteVisible = false
     }
   }
 }

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

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

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

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <el-dialog
+      title="移出确认"
+      :visible.sync="deleteVisible"
+      :before-close="handleClose"
+    >
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <p><span style="color: #fff">确定将所选数据移出{{listName}}吗？</span></p>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click.native="handleConfirm"
+            >确定</el-button
+          >
+        </div>
+      </div>
+    </el-dialog>
+    
+  </div>
+</template>
+
+<script>
+export default {
+    props:['listName'],
+  data() {
+    return {
+      deleteVisible: false,
+    };
+  },
+   methods:{
+    handleConfirm() {
+      this.deleteVisible = false
+    //   this.reconfirmDeleteVisible = true
+    },
+   
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -1,14 +1,10 @@
 <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" @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" disabled>移出</el-button>
-      <el-button icon="el-icon-download" size="mini" disabled>导出</el-button>
+      <el-button icon="el-icon-minus" size="mini" @click="handleRemove">移出</el-button>
+      <crudOperation style="margin-left:10px" />
     </headSlot>
     <!--表格渲染-->
     <el-table
@@ -46,29 +42,44 @@
         <el-button disabled>解除警报</el-button>
       </div>
     </el-dialog>
-
-    <el-pagination
-      :current-page="currentPage4"
-      :page-sizes="[10, 20, 30, 50,100]"
-      :page-size="100"
-      layout="total, sizes, prev, pager, next, jumper"
-      :total="0"
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-    />
+    <!-- 移出确认弹框 -->
+    <delConfirm ref="delConfirmDom" :list-name="listName" />
+    <!-- 分页 -->
+    <pagination />
   </div>
 </template>
 
 <script>
 import headSlot from '../components/headSlot.vue'
+import pagination from '@crud/Pagination'
+import CRUD, { presenter } from '@crud/crud'
+import crudOperation from '@crud/CRUD.operation'
+import delConfirm from '../components/delConfirm.vue'
+
 export default {
-  components: { headSlot },
+  components: { headSlot, pagination, crudOperation, delConfirm },
+  mixins: [presenter()],
+  cruds() {
+    return CRUD({
+      // title: '岗位',
+      //   url: 'api/job',
+      // crudMethod: { ...crudJob },
+      optShow: {
+        add: false,
+        edit: false,
+        del: false,
+        download: true,
+        group: false
+      }
+    })
+  },
   data() {
     return {
       tableData: [],
       gridData: [],
       lendFormVisible: false,
-      lendForm: {}
+      lendForm: {},
+      listName: '借出确认'
     }
   },
   methods: {
@@ -81,6 +92,10 @@ export default {
     // 重新登记返回上一级
     handelReRecord() {
       this.$emit('callBack', { index: 0 })
+    },
+    // 移出
+    handleRemove() {
+      this.$refs.delConfirmDom.deleteVisible = true
     }
   }
 }
@@ -89,17 +104,12 @@ export default {
 <style lang="scss" scoped>
 .lend-confirm {
 
-  // .footer-btn{
-  //   text-align: center;
-  //   background-color: #031435;
-  // }
 }
-::v-deep .el-dialog__footer{
-    background-color: #031435;
-
+::v-deep .el-dialog__footer {
+  background-color: #031435;
 }
 
-.el-dialog .dialog-footer{
+.el-dialog .dialog-footer {
   padding: 0;
   margin: 0;
 }

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

@@ -1,8 +1,15 @@
 <template>
   <div class="lend-query">
     <head-slot>
-      <el-button icon="el-icon-download" size="mini" class="margin-r" disabled>导出</el-button>
-      <el-select v-model="lendState" class="filter-item" style="width: 100px;height:30px">
+      <!-- <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"
@@ -11,15 +18,7 @@
         />
       </el-select>
 
-      <!-- <el-input
-            v-model="deptName"
-            clearable
-            size="small"
-            placeholder="输入部门名称搜索"
-            prefix-icon="el-icon-search"
-            class="filter-item"
-            @input="getDeptDatas"
-          /> -->
+      <!-- <el-input v-model="query.name" clearable size="small" placeholder="输入岗位名称搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" /> -->
       <el-input
         v-model="keyWord"
         size="small"
@@ -27,6 +26,7 @@
         placeholder="请输入关键词"
         style="width: 300px"
         class="input-prepend"
+        @keyup.enter.native="crud.toQuery"
       >
         <el-select slot="prepend" v-model="cateSearch" style="width: 100px">
           <el-option
@@ -37,12 +37,7 @@
           />
         </el-select>
       </el-input>
-      <el-button
-        size="mini"
-        type="success"
-        icon="el-icon-search"
-      />
-      <!-- <el-button type="primary" icon="el-icon-search">搜索</el-button> -->
+      <rrOperation />
     </head-slot>
     <!--表格渲染-->
     <el-table
@@ -65,22 +60,34 @@
       <el-table-column prop="isColumnLength" label="借阅目的" min-width="85" />
     </el-table>
     <!-- 分页 -->
-    <el-pagination
-      :current-page="currentPage4"
-      :page-sizes="[10, 20, 30, 50,100]"
-      :page-size="100"
-      layout="total, sizes, prev, pager, next, jumper"
-      :total="0"
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-    />
+    <pagination />
   </div>
 </template>
 
 <script>
 import headSlot from '../components/headSlot.vue'
+import CRUD, { presenter } from '@crud/crud'
+import pagination from '@crud/Pagination'
+import rrOperation from '@crud/RR.operation'
+import crudOperation from '@crud/CRUD.operation'
+
 export default {
-  components: { headSlot },
+  components: { headSlot, pagination, rrOperation, crudOperation },
+  mixins: [presenter()],
+  cruds() {
+    return CRUD({
+      // title: '岗位',
+      //   url: 'api/job',
+      // crudMethod: { ...crudJob },
+      optShow: {
+        add: false,
+        edit: false,
+        del: false,
+        download: true,
+        group: false
+      }
+    })
+  },
   data() {
     return {
       tableData: [],
@@ -122,7 +129,7 @@ export default {
   margin: 0 10px 0 -10px;
   background-color: #021941;
   border-radius: 3px;
-    // word-spacing: -10px;
+  // word-spacing: -10px;
   border: 1px solid #339cff;
   .el-select {
     background-color: #021941;
@@ -131,14 +138,12 @@ export default {
   .el-input__inner {
     background-color: #021941;
     border: none;
-    caret-color:#fff;
+    caret-color: #fff;
     height: 28px;
     line-height: 28px;
   }
   .el-input-group__prepend {
     border: none;
   }
-
 }
-
 </style>

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

@@ -1,8 +1,8 @@
 <template>
   <div class="to-lend">
     <head-slot>
-      <el-button icon="el-icon-plus" size="mini" disabled>归还</el-button>
-      <el-button icon="el-icon-download" size="mini" disabled>导出</el-button>
+      <el-button icon="el-icon-plus" size="mini" @click="returnVisible=true">归还</el-button>
+      <crudOperation style="margin-left:10px" />
     </head-slot>
     <!--表格渲染-->
     <el-table
@@ -25,29 +25,59 @@
       <el-table-column prop="isColumnLength" label="借阅状态" min-width="85" />
       <el-table-column prop="isColumnLength" label="操作时间" min-width="85" />
     </el-table>
+    <!-- 归还确认 -->
+    <el-dialog title="归还确认" :visible.sync="returnVisible" :before-close="handleClose">
+      <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>
+    <el-dialog title="归还失败" :visible.sync="returnAgainVisible" :before-close="handleClose">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <p><span style="color:#fff;">当前标签已损坏，请先解除该档案的电子标签绑定</span></p>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click.native="handleConfirmAgain">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
     <!-- 分页 -->
-    <el-pagination
-      :current-page="currentPage4"
-      :page-sizes="[10, 20, 30, 50,100]"
-      :page-size="100"
-      layout="total, sizes, prev, pager, next, jumper"
-      :total="0"
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-    />
-    <!-- <Pagination /> -->
+    <pagination />
   </div>
 </template>
 
 <script>
 import headSlot from '../components/headSlot.vue'
-// import Pagination from '@crud/Pagination'
-
+import pagination from '@crud/Pagination'
+import CRUD, { presenter } from '@crud/crud'
+import crudOperation from '@crud/CRUD.operation'
 export default {
-  components: { headSlot },
+  components: { headSlot, pagination, crudOperation },
+  mixins: [presenter()],
+  cruds() {
+    return CRUD({
+      // title: '岗位',
+      //   url: 'api/job',
+      // crudMethod: { ...crudJob },
+      optShow: {
+        add: false,
+        edit: false,
+        del: false,
+        download: true,
+        group: false
+      }
+    })
+  },
   data() {
     return {
-      tableData: []
+      tableData: [],
+      returnVisible: false,
+      returnAgainVisible: false
     }
   },
   methods: {
@@ -56,14 +86,20 @@ export default {
     },
     clickRowHandler() {
       console.log('clickRowHandler')
+    },
+    // 归还确认
+    handleConfirm() {
+      this.returnVisible = false
+      this.returnAgainVisible = true
+    },
+    handleConfirmAgain() {
+      this.returnAgainVisible = false
     }
-
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .to-lend {
-
 }
 </style>

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

@@ -1,17 +1,8 @@
 <template>
   <div class="to-lend">
     <headSlot>
-      <el-button
-        icon="el-icon-plus"
-        size="mini"
-        @click="handleRecord"
-      >登记</el-button>
-      <el-button
-        icon="el-icon-minus"
-        size="mini"
-        disabled
-        @click="handleRemove"
-      >移出</el-button>
+      <el-button icon="el-icon-plus" size="mini" @click="handleRecord">登记</el-button>
+      <el-button icon="el-icon-minus" size="mini" @click="handleRemove">移出</el-button>
     </headSlot>
 
     <!--表格渲染-->
@@ -119,35 +110,46 @@
         </div>
       </div>
     </el-dialog>
-
+    <!-- 移出确认弹框 -->
+    <delConfirm ref="delConfirmDom" :list-name="listName" />
     <!-- 分页 -->
-    <el-pagination
-      :current-page="currentPage4"
-      :page-sizes="[10, 20, 30, 50,100]"
-      :page-size="100"
-      layout="total, sizes, prev, pager, next, jumper"
-      :total="0"
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-    />
-    <!-- <Pagination /> -->
+    <pagination />
+
   </div>
 </template>
 
 <script>
-// import Pagination from '@crud/Pagination'
+import pagination from '@crud/Pagination'
 // import crudOperation from '@crud/CRUD.operation'
 // import CRUD, { presenter } from "@crud/crud";
 // import CRUD, { presenter, header, form } from '@crud/crud'
 import headSlot from '../components/headSlot.vue'
 import DateRangePicker from '@/components/DateRangePicker'
+import CRUD, { presenter } from '@crud/crud'
+import delConfirm from '../components/delConfirm.vue'
 
 export default {
-  components: { headSlot, DateRangePicker },
+  components: { headSlot, DateRangePicker, pagination, delConfirm },
   // props:['recordFormVisible'],
+  mixins: [presenter()],
+  cruds() {
+    return CRUD({
+      // title: '岗位',
+      //   url: 'api/job',
+      // crudMethod: { ...crudJob },
+      optShow: {
+        add: false,
+        edit: false,
+        del: false,
+        download: false,
+        group: false
+      }
+    })
+  },
   data() {
     return {
       tableData: [],
+      listName: '借出列表',
       recordFormVisible: false,
       recordForm: {
         borrowerName: '',
@@ -170,24 +172,9 @@ export default {
     handleRecord() {
       this.recordFormVisible = true
     },
+    // 移出
     handleRemove() {
-      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      })
-        .then(() => {
-          this.$message({
-            type: 'success',
-            message: '删除成功!'
-          })
-        })
-        .catch(() => {
-          this.$message({
-            type: 'info',
-            message: '已取消删除'
-          })
-        })
+      this.$refs.delConfirmDom.deleteVisible = true
     },
     selectionChangeHandler() {
       console.log('selectionChangeHandler')
@@ -196,7 +183,6 @@ export default {
       console.log('clickRowHandler')
     },
     handleRecordConfirm() {
-      console.log(111111)
       this.recordFormVisible = false
       // this.$alert('这是一段内容', '标题名称', {
       //   confirmButtonText: '确定',