借阅管理 样式调整和模态框

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

@@ -2,8 +2,8 @@
   <div class="to-lend">
     <head-slot>
       <el-button icon="el-icon-plus" size="mini">增加</el-button>
-      <el-button icon="el-icon-minus" size="mini">修改</el-button>
-      <el-button icon="el-icon-minus" size="mini">删除</el-button>
+      <el-button icon="el-icon-edit" size="mini">修改</el-button>
+      <el-button icon="el-icon-delete" size="mini">删除</el-button>
       <el-input size="small" clearable placeholder="请输入关键词" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" />
       <span>
         <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" />

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

@@ -1,6 +1,8 @@
 <template>
-  <div class="head-container">
-    <slot />
+  <div class="head">
+    <div class="head-container">
+      <slot />
+    </div>
   </div>
 </template>
 
@@ -9,7 +11,12 @@ export default {}
 </script>
 
 <style lang="scss" scoped>
-.head-container {
+.head{
+  .head-container {
   padding: 0 20px 20px 20px;
 }
+}
+::v-deep.el-input-group__prepend{
+  background-color: #f00;
+}
 </style>

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

@@ -1,10 +1,14 @@
 <template>
-  <div class="to-lend">
+  <div class="lend-confirm">
     <headSlot>
-      <el-button icon="el-icon-plus" size="mini">借出</el-button>
-      <el-button icon="el-icon-minus" size="mini">重新登记</el-button>
-      <el-button icon="el-icon-minus" size="mini">移出</el-button>
-      <el-button icon="el-icon-minus" size="mini">导出</el-button>
+      <el-button
+        icon="el-icon-plus"
+        size="mini"
+        @click="lendFormVisible = true"
+      >借出</el-button>
+      <el-button icon="el-icon-edit" size="mini" disabled>重新登记</el-button>
+      <el-button icon="el-icon-minus" size="mini" disabled>移出</el-button>
+      <el-button icon="el-icon-download" size="mini" disabled>导出</el-button>
     </headSlot>
     <!--表格渲染-->
     <el-table
@@ -27,8 +31,24 @@
       <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="lendFormVisible">
+      <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="fieldName" label="档号" min-width="140" />
+        <el-table-column label="题名" min-width="85" />
+        <el-table-column label="状态" min-width="85" />
+      </el-table>
+      <div slot="footer" class="dialog-footer">
+        <el-button disabled>解除警报</el-button>
+      </div>
+    </el-dialog>
+
     <!-- 分页 -->
-    <el-pagination
+    <!-- <el-pagination
       :current-page="currentPage4"
       :page-sizes="[100, 200, 300, 400]"
       :page-size="100"
@@ -36,7 +56,7 @@
       :total="400"
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
-    />
+    /> -->
     <!-- <pagination /> -->
   </div>
 </template>
@@ -47,7 +67,10 @@ export default {
   components: { headSlot },
   data() {
     return {
-      tableData: []
+      tableData: [],
+      gridData: [],
+      lendFormVisible: false,
+      lendForm: {}
     }
   },
   methods: {
@@ -57,13 +80,25 @@ export default {
     clickRowHandler() {
       console.log('clickRowHandler')
     }
-
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.to-lend {
+.lend-confirm {
+
+  // .footer-btn{
+  //   text-align: center;
+  //   background-color: #031435;
+  // }
+}
+::v-deep .el-dialog__footer{
+    background-color: #031435;
+
+}
 
+.el-dialog .dialog-footer{
+  padding: 0;
+  margin: 0;
 }
 </style>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="lend-query">
     <head-slot>
-      <el-button icon="el-icon-minus" size="mini">导出</el-button>
+      <el-button icon="el-icon-download" size="mini">导出</el-button>
       <el-select v-model="lendState" class="filter-item" style="width: 100px">
         <el-option
           v-for="item in lendStateOptions"
@@ -11,19 +11,24 @@
         />
       </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="keyWord"
         size="small"
         clearable
         placeholder="请输入关键词"
-        style="width: 400px"
+        style="width: 300px"
+        class="input-prepend"
       >
-        <el-select
-          slot="prepend"
-          v-model="cateSearch"
-          class="filter-item"
-          style="width: 100px"
-        >
+        <el-select slot="prepend" v-model="cateSearch" style="width: 100px">
           <el-option
             v-for="item in cateSearchOptions"
             :key="item.value"
@@ -113,14 +118,27 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style rel="stylesheet/scss" lang="scss" scoped>
 .lend-query {
+}
+::v-deep.input-prepend {
+  background-color: #021941;
+  border-radius: 3px;
+    // word-spacing: -10px;
+  border: 1px solid #339cff;
+  .el-select {
+    background-color: #021941;
+    color: #fff;
+  }
   .el-input__inner {
-    padding: 0;
+    background-color: #021941;
+    border: none;
+    caret-color:#fff;
   }
-  .el-input-group__prepend{
-      padding: 0;
-      width: 100px;
+  .el-input-group__prepend {
+    // background-color: #021941;
+    border: none;
   }
+
 }
 </style>

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

@@ -2,7 +2,7 @@
   <div class="to-lend">
     <head-slot>
       <el-button icon="el-icon-plus" size="mini">归还</el-button>
-      <el-button icon="el-icon-minus" size="mini">导出</el-button>
+      <el-button icon="el-icon-download" size="mini">导出</el-button>
     </head-slot>
     <!--表格渲染-->
     <el-table

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

@@ -1,8 +1,16 @@
 <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">移出</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>
 
     <!--表格渲染-->
@@ -23,6 +31,94 @@
       <el-table-column prop="isColumnLength" label="借阅状态" min-width="85" />
       <el-table-column prop="isColumnLength" label="操作时间" min-width="85" />
     </el-table>
+    <!-- 借阅登记模态框 -->
+    <el-dialog
+      append-to-body
+      :close-on-click-modal="false"
+      :visible.sync="recordFormVisible"
+      title="借阅登记"
+    >
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <el-form
+          ref="form"
+          :model="recordForm"
+          :rules="rules"
+          size="small"
+          label-width="80px"
+        >
+          <el-form-item label="借阅人" prop="borrowerName">
+            <el-input v-model="recordForm.borrowerName" style="width: 420px" />
+          </el-form-item>
+          <el-form-item label="电话号码" prop="tel">
+            <el-input v-model="recordForm.tel" style="width: 420px" />
+          </el-form-item>
+          <el-form-item label="所属部门" prop="department" class="down-select">
+            <el-select
+              v-model="recordForm.departmentDatas"
+              style="width: 420px"
+              multiple
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in recordForm.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="recordForm.idType"
+              style="width: 420px"
+              multiple
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in recordForm.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="recordForm.idNumber" style="width: 420px" />
+          </el-form-item>
+          <el-form-item label="借阅时间" prop="lendDate">
+            <date-range-picker style="width: 420px" />
+          </el-form-item>
+          <el-form-item label="借阅目的" prop="borrowGoal" class="down-select">
+            <el-select
+              v-model="recordForm.borrowGoal"
+              style="width: 420px"
+              multiple
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in recordForm.borrowGoal"
+                :key="item.name"
+                :disabled="level !== 1 && item.level <= level"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="recordFormVisible = false">取消</el-button>
+          <el-button
+            type="primary"
+            @click="handleRecordConfirm"
+          >确认</el-button>
+        </div>
+      </div>
+    </el-dialog>
+
     <!-- 分页 -->
     <!-- <el-pagination
       :current-page="currentPage4"
@@ -42,23 +138,71 @@
 // import crudOperation from '@crud/CRUD.operation'
 // import CRUD, { presenter } from '@crud/crud'
 import headSlot from '../components/headSlot.vue'
+import DateRangePicker from '@/components/DateRangePicker'
+
 export default {
-  components: { headSlot },
+  components: { headSlot, DateRangePicker },
 
   data() {
     return {
-      tableData: []
+      tableData: [],
+      recordFormVisible: false,
+      recordForm: {
+        borrowerName: '',
+        tel: '',
+        departmentDatas: [],
+        idType: [],
+        idNumber: '',
+        lendDate: '',
+        borrowGoal: []
+      },
+      rules: {
+        borrowerName: [
+          { required: true, message: '请输入姓名', trigger: 'blur' }
+        ],
+        tel: [{ required: true, message: '请输入电话号码', trigger: 'blur' }]
+      }
     }
   },
   methods: {
     handleRecord() {
-      console.log(111111)
+      this.recordFormVisible = true
+    },
+    handleRemove() {
+      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
     },
     selectionChangeHandler() {
       console.log('selectionChangeHandler')
     },
     clickRowHandler() {
       console.log('clickRowHandler')
+    },
+    handleRecordConfirm() {
+      console.log(111111)
+      this.recordFormVisible = false
+      // this.$alert('这是一段内容', '标题名称', {
+      //   confirmButtonText: '确定',
+      //   callback: action => {
+      //     this.$message({
+      //       type: 'info',
+      //       message: `action: ${ action }`
+      //     });
+      //   }
+      // });
     }
   }
 }
@@ -66,6 +210,5 @@ export default {
 
 <style lang="scss" scoped>
 .to-lend {
-
 }
 </style>