借阅管理基础页面

3 years ago · 366815c27f
8 changed files with 518 additions and 0 deletions
--- a/src/views/archivesManage/lendManage/borrowerManage/index.vue
+++ b/src/views/archivesManage/lendManage/borrowerManage/index.vue
@ -0,0 +1,68 @@
+<template>
+  <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-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" />
+      </span>
+    </head-slot>
+    <!--表格渲染-->
+    <el-table
+      ref="fieldTable"
+      style="min-width: 100%"
+      height="calc(100vh - 302px)"
+      @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>
+    <!-- 分页 -->
+    <el-pagination
+      :current-page="currentPage4"
+      :page-sizes="[100, 200, 300, 400]"
+      :page-size="100"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="400"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+    <!-- <pagination /> -->
+  </div>
+</template>
+
+<script>
+import headSlot from '../components/headSlot.vue'
+export default {
+  components: { headSlot },
+  data() {
+    return {
+      tableData: []
+    }
+  },
+  methods: {
+    selectionChangeHandler() {
+      console.log('selectionChangeHandler')
+    },
+    clickRowHandler() {
+      console.log('clickRowHandler')
+    }
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.to-lend {
+
+}
+</style>
--- a/src/views/archivesManage/lendManage/components/headSlot.vue
+++ b/src/views/archivesManage/lendManage/components/headSlot.vue
@ -0,0 +1,15 @@
+<template>
+  <div class="head-container">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped>
+.head-container {
+  padding: 0 20px 20px 20px;
+}
+</style>
--- a/src/views/archivesManage/lendManage/index.vue
+++ b/src/views/archivesManage/lendManage/index.vue
@ -0,0 +1,102 @@
+<template>
+  <div class="app-container lend-container">
+    <!-- 借阅列表 -->
+    <el-row class="container-main" :gutter="20">
+      <!-- 借阅管理tab -->
+      <el-col
+        class="container-right tab-content"
+        :xs="14"
+        :sm="18"
+        :md="19"
+        :lg="18"
+        :xl="24"
+      >
+        <span class="right-top-line" />
+        <span class="left-bottom-line" />
+        <ul class="tab-nav">
+          <li
+            :class="{ 'active-tab-nav': activeIndex == 0 }"
+            @click="changeActiveTab(0)"
+          >
+            待借档案<i />
+          </li>
+          <li
+            :class="{ 'active-tab-nav': activeIndex == 1 }"
+            @click="changeActiveTab(1)"
+          >
+            借出确认<i />
+          </li>
+          <li
+            :class="{ 'active-tab-nav': activeIndex == 2 }"
+            @click="changeActiveTab(2)"
+          >
+            归还档案<i />
+          </li>
+          <li
+            :class="{ 'active-tab-nav': activeIndex == 3 }"
+            @click="changeActiveTab(3)"
+          >
+            借阅查询<i />
+          </li>
+          <li
+            :class="{ 'active-tab-nav': activeIndex == 4 }"
+            @click="changeActiveTab(4)"
+          >
+            借阅者管理<i />
+          </li>
+          <!-- 最右侧装饰img -->
+          <span class="tab-right-img" />
+        </ul>
+        <component :is="comName" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import toLend from './toLend/index.vue'
+import lendConfirm from './lendConfirm/index.vue'
+import returnArchives from './returnArchives/index.vue'
+import lendQuery from './lendQuery/index.vue'
+import borrowerManage from './borrowerManage/index.vue'
+
+export default {
+  name: 'BorrowManage',
+  components: {
+    toLend,
+    lendConfirm,
+    returnArchives,
+    lendQuery,
+    borrowerManage
+  },
+  data() {
+    return {
+      activeIndex: 0
+    }
+  },
+  computed: {
+    comName: function() {
+      if (this.activeIndex === 0) {
+        return 'toLend'
+      } else if (this.activeIndex === 1) {
+        return 'lendConfirm'
+      } else if (this.activeIndex === 2) {
+        return 'returnArchives'
+      } else if (this.activeIndex === 3) {
+        return 'lendQuery'
+      } else if (this.activeIndex === 4) {
+        return 'borrowerManage'
+      }
+      return 'toLend'
+    }
+  },
+  methods: {
+    changeActiveTab(data) {
+      this.activeIndex = data
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
--- a/src/views/archivesManage/lendManage/lendConfirm/index.vue
+++ b/src/views/archivesManage/lendManage/lendConfirm/index.vue
@ -0,0 +1,69 @@
+<template>
+  <div class="to-lend">
+    <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>
+    </headSlot>
+    <!--表格渲染-->
+    <el-table
+      ref="fieldTable"
+      style="min-width: 100%"
+      height="calc(100vh - 302px)"
+      @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>
+    <!-- 分页 -->
+    <el-pagination
+      :current-page="currentPage4"
+      :page-sizes="[100, 200, 300, 400]"
+      :page-size="100"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="400"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+    <!-- <pagination /> -->
+  </div>
+</template>
+
+<script>
+import headSlot from '../components/headSlot.vue'
+export default {
+  components: { headSlot },
+  data() {
+    return {
+      tableData: []
+    }
+  },
+  methods: {
+    selectionChangeHandler() {
+      console.log('selectionChangeHandler')
+    },
+    clickRowHandler() {
+      console.log('clickRowHandler')
+    }
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.to-lend {
+
+}
+</style>
--- a/src/views/archivesManage/lendManage/lendQuery/index.vue
+++ b/src/views/archivesManage/lendManage/lendQuery/index.vue
@ -0,0 +1,126 @@
+<template>
+  <div class="lend-query">
+    <head-slot>
+      <el-button icon="el-icon-minus" size="mini">导出</el-button>
+      <el-select v-model="lendState" class="filter-item" style="width: 100px">
+        <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: 400px"
+      >
+        <el-select
+          slot="prepend"
+          v-model="cateSearch"
+          class="filter-item"
+          style="width: 100px"
+        >
+          <el-option
+            v-for="item in cateSearchOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-input>
+      <el-button
+        size="mini"
+        type="success"
+        icon="el-icon-search"
+      >搜索</el-button>
+      <!-- <el-button type="primary" icon="el-icon-search">搜索</el-button> -->
+    </head-slot>
+    <!--表格渲染-->
+    <el-table
+      ref="fieldTable"
+      style="min-width: 100%"
+      height="calc(100vh - 302px)"
+      @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>
+    <!-- 分页 -->
+    <el-pagination
+      :current-page="currentPage4"
+      :page-sizes="[100, 200, 300, 400]"
+      :page-size="100"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="400"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+    <!-- <pagination /> -->
+  </div>
+</template>
+
+<script>
+import headSlot from '../components/headSlot.vue'
+export default {
+  components: { headSlot },
+  data() {
+    return {
+      tableData: [],
+      lendStateOptions: [
+        { value: '选项1', label: '全部' },
+        { value: '选项2', label: '待登记' },
+        { value: '选项3', label: '待借阅' },
+        { value: '选项4', label: '待归还' },
+        { value: '选项5', label: '逾期' },
+        { value: '选项6', label: '已归还' }
+      ],
+      lendState: '全部',
+      keyWord: '',
+      cateSearch: '借阅人',
+      cateSearchOptions: [
+        { value: '选项1', label: '借阅人' },
+        { value: '选项2', label: '档号' },
+        { value: '选项3', label: '题名' },
+        { value: '选项4', label: '位置' },
+        { value: '选项5', label: '档案盒' },
+        { value: '选项6', label: '条形码' },
+        { value: '选项6', label: 'TID' }
+      ]
+    }
+  },
+  methods: {
+    selectionChangeHandler() {
+      console.log('selectionChangeHandler')
+    },
+    clickRowHandler() {
+      console.log('clickRowHandler')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.lend-query {
+  .el-input__inner {
+    padding: 0;
+  }
+  .el-input-group__prepend{
+      padding: 0;
+      width: 100px;
+  }
+}
+</style>
--- a/src/views/archivesManage/lendManage/returnArchives/index.vue
+++ b/src/views/archivesManage/lendManage/returnArchives/index.vue
@ -0,0 +1,67 @@
+<template>
+  <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>
+    </head-slot>
+    <!--表格渲染-->
+    <el-table
+      ref="fieldTable"
+      style="min-width: 100%"
+      height="calc(100vh - 302px)"
+      @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>
+    <!-- 分页 -->
+    <el-pagination
+      :current-page="currentPage4"
+      :page-sizes="[100, 200, 300, 400]"
+      :page-size="100"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="400"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+    <!-- <pagination /> -->
+  </div>
+</template>
+
+<script>
+import headSlot from '../components/headSlot.vue'
+export default {
+  components: { headSlot },
+  data() {
+    return {
+      tableData: []
+    }
+  },
+  methods: {
+    selectionChangeHandler() {
+      console.log('selectionChangeHandler')
+    },
+    clickRowHandler() {
+      console.log('clickRowHandler')
+    }
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.to-lend {
+
+}
+</style>
--- a/src/views/archivesManage/lendManage/toLend/index.vue
+++ b/src/views/archivesManage/lendManage/toLend/index.vue
@ -0,0 +1,71 @@
+<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>
+    </headSlot>
+
+    <!--表格渲染-->
+    <el-table
+      ref="fieldTable"
+      style="min-width: 100%"
+      height="calc(100vh - 302px)"
+      @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>
+    <!-- 分页 -->
+    <el-pagination
+      :current-page="currentPage4"
+      :page-sizes="[100, 200, 300, 400]"
+      :page-size="100"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="400"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+    <!-- <pagination /> -->
+  </div>
+</template>
+
+<script>
+// import pagination from '@crud/Pagination'
+// import crudOperation from '@crud/CRUD.operation'
+// import CRUD, { presenter } from '@crud/crud'
+import headSlot from '../components/headSlot.vue'
+export default {
+  components: { headSlot },
+
+  data() {
+    return {
+      tableData: []
+    }
+  },
+  methods: {
+    handleRecord() {
+      console.log(111111)
+    },
+    selectionChangeHandler() {
+      console.log('selectionChangeHandler')
+    },
+    clickRowHandler() {
+      console.log('clickRowHandler')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.to-lend {
+
+}
+</style>
--- a/src/views/archivesManage/lendManage/toLend/module/form.vue
+++ b/src/views/archivesManage/lendManage/toLend/module/form.vue