借阅管理 样式调整

src/main.js

@@ -37,7 +37,6 @@ import { parseTime } from '@/utils/index.js'
 Vue.filter('parseTime', function(time, cFormat) {
   return parseTime(time, cFormat)
 })
-
 Vue.use(checkPer)
 Vue.use(VueHighlightJS)
 Vue.use(mavonEditor)

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

@@ -1,12 +1,34 @@
 <template>
   <div class="to-lend">
     <head-slot>
-      <el-button icon="el-icon-plus" size="mini">增加</el-button>
-      <el-button icon="el-icon-edit" size="mini">修改</el-button>
-      <el-button icon="el-icon-delete" size="mini" class="margin-r">删除</el-button>
-      <el-input size="small" clearable placeholder="请输入关键词" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" />
-      <span style="margin-left:-10px">
-        <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" />
+      <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>
+      <!-- 搜索 -->
+      <el-input
+        size="small"
+        clearable
+        placeholder="请输入关键词"
+        prefix-icon="el-icon-search"
+        style="width: 200px"
+        class="filter-item"
+      />
+      <span style="margin-left: -10px">
+        <el-button
+          class="filter-item"
+          size="mini"
+          type="success"
+          icon="el-icon-search"
+        />
       </span>
     </head-slot>
     <!--表格渲染-->
@@ -26,10 +48,88 @@
       <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="addFormVisible"
+      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="">
+            <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="addFormVisible = false">取消</el-button>
+          <el-button
+            type="primary"
+            @click="addFormVisible = false"
+          >确认</el-button>
+        </div>
+      </div>
+    </el-dialog>
     <!-- 分页 -->
     <el-pagination
       :current-page="currentPage4"
-      :page-sizes="[10, 20, 30, 50,100]"
+      :page-sizes="[10, 20, 30, 50, 100]"
       :page-size="100"
       layout="total, sizes, prev, pager, next, jumper"
       :total="0"
@@ -42,11 +142,21 @@
 
 <script>
 import headSlot from '../components/headSlot.vue'
+// import rrOperation from '@crud/RR.operation'
+
 export default {
   components: { headSlot },
   data() {
     return {
-      tableData: []
+      tableData: [],
+      addFormVisible: false,
+      borrowerForm: {
+        borrowerName: '',
+        tel: '',
+        department: '',
+        idType: [],
+        idNumber: ''
+      }
     }
   },
   methods: {
@@ -55,14 +165,16 @@ export default {
     },
     clickRowHandler() {
       console.log('clickRowHandler')
+    },
+    handleAdd() {
+      console.log(111)
+      this.addFormVisible = true
     }
-
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .to-lend {
-
 }
 </style>

src/views/archivesManage/lendManage/index.vue

@@ -39,7 +39,7 @@
         <!-- 最右侧装饰img -->
         <span class="tab-right-img" />
       </ul>
-      <component :is="comName" />
+      <component :is="comName" :record-form-visible="recordFormVisible" @callBack="callBack" />
     </div>
   </div>
 </template>
@@ -63,6 +63,7 @@ export default {
   data() {
     return {
       activeIndex: 0
+      // recordFormVisible:false
     }
   },
   computed: {
@@ -84,6 +85,11 @@ export default {
   methods: {
     changeActiveTab(data) {
       this.activeIndex = data
+    },
+    // 重新登记
+    callBack(val) {
+      console.log(val, '-------------------')
+      this.activeIndex = val.index
     }
   }
 }

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

@@ -6,7 +6,7 @@
         size="mini"
         @click="lendFormVisible = true"
       >借出</el-button>
-      <el-button icon="el-icon-edit" size="mini" disabled>重新登记</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>
     </headSlot>
@@ -77,6 +77,10 @@ export default {
     },
     clickRowHandler() {
       console.log('clickRowHandler')
+    },
+    // 重新登记返回上一级
+    handelReRecord() {
+      this.$emit('callBack', { index: 0 })
     }
   }
 }

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

@@ -1,7 +1,7 @@
 <template>
   <div class="lend-query">
     <head-slot>
-      <el-button icon="el-icon-download" size="mini" class="margin-r">导出</el-button>
+      <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-option
           v-for="item in lendStateOptions"

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">归还</el-button>
-      <el-button icon="el-icon-download" size="mini">导出</el-button>
+      <el-button icon="el-icon-plus" size="mini" disabled>归还</el-button>
+      <el-button icon="el-icon-download" size="mini" disabled>导出</el-button>
     </head-slot>
     <!--表格渲染-->
     <el-table

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

@@ -9,6 +9,7 @@
       <el-button
         icon="el-icon-minus"
         size="mini"
+        disabled
         @click="handleRemove"
       >移出</el-button>
     </headSlot>
@@ -143,32 +144,7 @@ import DateRangePicker from '@/components/DateRangePicker'
 
 export default {
   components: { headSlot, DateRangePicker },
-  // mixins: [
-  // presenter()
-  // header(),
-  // form({})
-  // ],
-  // cruds() {
-  //   return [
-  //     CRUD({
-  //       title: "字典内容",
-  //       url: "api/dictrionary/findSubsetById",
-  //       query: { id: "" },
-  //       crudMethod: { ...crudDictDetail },
-  //       optShow: {
-  //         add: false,
-  //         edit: true,
-  //         del: false,
-  //         reset: false,
-  //         download: false,
-  //         group: false,
-  //       },
-  //       queryOnPresenterCreated: false,
-  //       confirmDeleteMsg: "确认删除当前字典内容么？",
-  //       sort: ["dicSequence,asc"],
-  //     }),
-  //   ];
-  // },
+  // props:['recordFormVisible'],
   data() {
     return {
       tableData: [],