借阅管理 控制台warn处理 分离Dialog代码 表单重置

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

@@ -2,7 +2,7 @@
   <div class="to-lend">
     <head-slot>
       <!-- <crudOperation :permission="permission" /> -->
-      <el-button icon="el-icon-plus" size="mini" @click="addFormVisible = true">新增</el-button>
+      <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 ? false : true " @click="deleteVisible = true">删除</el-button>
 
@@ -39,154 +39,11 @@
     </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="borrowerFormDom"
-          :model="borrowerForm"
-          :rules="rules"
-          size="small"
-          label-width="80px"
-        >
-          <el-form-item label="借阅人" prop="addName">
-            <el-input
-              v-model="borrowerForm.borrowerName"
-              style="width: 420px"
-            />
-          </el-form-item>
-          <el-form-item label="电话号码" prop="addTel">
-            <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
-            type="primary"
-            @click="handleAddConfirm"
-          >确认</el-button>
-        </div>
-      </div>
-    </el-dialog>
+    <addBorrower ref="addBorrowerDom" />
     <!-- 修改模态框 -->
-    <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.borrowerTel" style="width: 420px" />
-          </el-form-item>
-          <el-form-item label="所属部门" prop="borrowerDepartment" 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="borrowerIdType" 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="borrowerIdNum">
-            <el-input v-model="borrowerForm.borrowerIdNum" 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>
+    <editBorrower ref="editBorrowerDom" />
     <!-- 删除模态框 -->
-    <el-dialog title="确认删除" :visible.sync="deleteVisible" :before-close="handleClose">
+    <el-dialog title="确认删除" :visible.sync="deleteVisible">
       <span class="dialog-right-top" />
       <span class="dialog-left-bottom" />
       <div class="setting-dialog">
@@ -206,11 +63,13 @@ import headSlot from '../components/headSlot.vue'
 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: { headSlot, pagination, rrOperation },
+  components: { headSlot, pagination, rrOperation, addBorrower, editBorrower },
   mixins: [presenter(), header()],
   cruds() {
     return CRUD({
@@ -230,23 +89,8 @@ export default {
     return {
       tableData: [],
       selections: [],
-      addFormVisible: false,
       editFormVisible: false,
-      deleteVisible: false,
-      borrowerForm: {},
-      // permission: {
-      //   add: ['admin', 'lend:add'],
-      //   edit: ['admin', 'lend:edit'],
-      //   del: ['admin', 'lend:del']
-      // },
-      rules: {
-        addName: [
-          { required: true, message: '请输入姓名', trigger: 'blur' }
-        ],
-        addTel: [
-          { required: true, message: '请输入电话号码', trigger: 'blur' }
-        ]
-      }
+      deleteVisible: false
     }
   },
   mounted() {
@@ -263,28 +107,16 @@ export default {
       this.$refs.table.toggleRowSelection(row)
     },
     handleAdd() {
-      this.addFormVisible = true
+      this.$refs.addBorrowerDom.addFormVisible = true
     },
     handleDelConfirm() {
       this.deleteVisible = false
     },
     handelEdit() {
-      this.borrowerForm = this.selections[0]
-      this.editFormVisible = true
-    },
-    handleAddConfirm() {
-      this.$refs.borrowerFormDom.validate((valid) => {
-        if (valid) {
-          this.$message({
-            message: '新增成功！',
-            type: 'success'
-          })
-          this.addFormVisible = false
-        } else {
-          this.$message.error('新增失败！')
-          return false
-        }
-      })
+      const editBorrowerDom = this.$refs.editBorrowerDom
+      console.log(editBorrowerDom.borrowerForm)
+      editBorrowerDom.borrowerForm = JSON.parse(JSON.stringify(this.selections[0]))
+      editBorrowerDom.editFormVisible = true
     }
   }
 }

src/views/archivesManage/lendManage/borrowerManage/module/addBorrower.vue

@@ -0,0 +1,120 @@
+<template>
+  <div>
+    <el-dialog
+      append-to-body
+      :close-on-click-modal="false"
+      :visible.sync="addFormVisible"
+      title="借阅人信息"
+      @close="handleClose"
+    >
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <el-form
+          ref="borrowerFormDom"
+          :model="borrowerForm"
+          :rules="rules"
+          size="small"
+          label-width="80px"
+          style="margin-left:90px"
+        >
+          <el-form-item label="借阅人" prop="borrowerName">
+            <el-input
+              v-model="borrowerForm.borrowerName"
+            />
+          </el-form-item>
+          <el-form-item label="电话号码" prop="tel">
+            <el-input v-model="borrowerForm.tel" />
+          </el-form-item>
+          <el-form-item label="所属部门" prop="department" class="down-select">
+            <el-select
+              v-model="borrowerForm.departmentDatas"
+              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"
+              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" />
+          </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
+            type="primary"
+            @click="handleAddConfirm"
+          >确认</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      addFormVisible: false,
+      borrowerForm: {},
+      rules: {
+        borrowerName: [
+          { required: true, message: '请输入姓名', trigger: 'blur' }
+        ],
+        tel: [
+          { required: true, message: '请输入电话号码', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    handleAddConfirm() {
+      this.$refs.borrowerFormDom.validate((valid) => {
+        if (valid) {
+          this.$message({
+            message: '新增成功！',
+            type: 'success'
+          })
+          this.$refs.borrowerFormDom.resetFields()
+          this.addFormVisible = false
+        } else {
+          this.$message.error('新增失败！')
+        }
+      })
+    },
+    handleClose() {
+      this.$refs.borrowerFormDom.resetFields()
+      this.$refs.borrowerFormDom.clearValidate()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog .el-form .el-input__inner{
+  width: 300px;
+}
+</style>

src/views/archivesManage/lendManage/borrowerManage/module/editBorrower.vue

@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <el-dialog
+      append-to-body
+      :close-on-click-modal="false"
+      :visible.sync="editFormVisible"
+      title="修改借阅人"
+      @close="handleClose"
+    >
+      <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"
+          style="margin-left:90px"
+        >
+          <el-form-item label="借阅人" prop="borrowerName">
+            <el-input
+              v-model="borrowerForm.borrowerName"
+            />
+          </el-form-item>
+          <el-form-item label="电话号码" prop="borrowerTel">
+            <el-input v-model="borrowerForm.borrowerTel" />
+          </el-form-item>
+          <el-form-item label="所属部门" prop="borrowerDepartment" class="down-select">
+            <el-select
+              v-model="borrowerForm.departmentDatas"
+
+              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="borrowerIdType" class="down-select">
+            <el-select
+              v-model="borrowerForm.idType"
+              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="borrowerIdNum">
+            <el-input v-model="borrowerForm.borrowerIdNum" />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button
+            type="primary"
+            @click="handleEditComfirm"
+          >确认</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      editFormVisible: false,
+      borrowerForm: {},
+      rules: {
+        borrowerName: [
+          { required: true, message: '请输入姓名', trigger: 'blur' }
+        ],
+        borrowerTel: [
+          { required: true, message: '请输入电话号码', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    handleEditComfirm() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.$message({
+            message: '修改成功！',
+            type: 'success'
+          })
+          this.editFormVisible = false
+          this.$refs.form.resetFields()
+        } else {
+          this.$message.error('修改失败！')
+          return false
+        }
+      })
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+      this.$refs.form.clearValidate()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog .el-form .el-input__inner{
+  width: 300px;
+}
+</style>

src/views/archivesManage/lendManage/data1.json

@@ -65,7 +65,7 @@
             "borrowerIdNum":"420880190011115636",
             "borrowerTel":"027-5955 7085",
             "warnState":"未解除",
-            "docNum":"JY202205050003",
+            "docNum":"JY202205050002",
             "archiveNum":"1",
             "lendHandler":"管理员"
         },

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

@@ -66,7 +66,7 @@ export default {
   cruds() {
     return CRUD({
       // title: '岗位',
-      //   url: 'api/job',
+      // url: 'api/job',
       // crudMethod: { ...crudJob },
       optShow: {
         add: false,
@@ -101,17 +101,9 @@ export default {
       const archiveDetailDom = this.$refs.archiveDetailDom
       archiveDetailDom.detailVisible = true
       const arr = data1.rows.filter(item => item.docNum === row.docNum)
-      archiveDetailDom.rowData = arr
-      console.log(arr[0])
-      // 借阅状态样式类名
-      if (arr[0].lendStatus === '已借') {
-        archiveDetailDom.classLend = 'have-lend'
-      } else if (arr[0].lendStatus === '待借') {
-        archiveDetailDom.classLend = 'no-lend'
-      } else {
-        archiveDetailDom.classLend = 'other-lend'
-      }
-      console.log(archiveDetailDom.classLend)
+      archiveDetailDom.rowData = row
+      archiveDetailDom.tableData = arr
+      console.log(arr)
     },
     clickRowHandler(row) {
       this.$refs.table.toggleRowSelection(row)

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

@@ -5,22 +5,22 @@
       <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[0].borrowerName }}</span></p>
-          <p class="center"><span class="color-blue">所属部门:</span><span class="color-white">{{ rowData[0].borrowerDepartment }}</span></p>
-          <p :class="classLend" class="right"><span class="color-blue">借阅状态:</span><span class="cell-lend">{{ rowData[0].lendStatus }}</span></p>
+          <p class="left"><span class="color-blue">借阅人:</span><span class="color-white">{{ rowData.borrowerName }}</span></p>
+          <p class="center"><span class="color-blue">所属部门:</span><span class="color-white">{{ rowData.borrowerDepartment }}</span></p>
+          <p class="right no-lend"><span class="color-blue">借阅状态:</span><span class="cell-lend">待借阅</span></p>
         </div>
         <div class="dpflex">
-          <p class="left"><span class="color-blue">证件类型:</span><span class="color-white">{{ rowData[0].borrowerIdType }}</span></p>
-          <p class="center"><span class="color-blue">证件号码:</span><span class="color-white">{{ rowData[0].borrowerIdNum }}</span></p>
-          <p class="right"><span class="color-blue">电话号码:</span><span class="color-white">{{ rowData[0].borrowerTel }}</span></p>
+          <p class="left"><span class="color-blue">证件类型:</span><span class="color-white">{{ rowData.borrowerIdType }}</span></p>
+          <p class="center"><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[0].borrowGoal }}</span></p>
-          <p class="center"><span class="color-blue">借阅日期:</span><span class="color-white">{{ rowData[0].borrowDays }}</span></p>
-          <p class="right"><span class="color-blue">操作时间:</span><span class="color-white">{{ rowData[0].operationTime }}</span></p>
+          <p class="left"><span class="color-blue">借阅目的:</span><span class="color-white">{{ rowData.borrowGoal }}</span></p>
+          <p class="center"><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.operationTime }}</span></p>
         </div>
       </div>
-      <el-table :data="rowData" style="margin-top:15px">
+      <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" />
@@ -37,8 +37,8 @@ export default {
   data() {
     return {
       detailVisible: false,
-      rowData: [],
-      classLend: ''
+      rowData: {},
+      tableData: []
     }
   }
 }

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

@@ -7,7 +7,7 @@
       <div class="state-radio">
         <p>
           <label>
-            <input v-model="lineStateVal" type="radio" name="lineState" value="在线" @click="handleOnLine"><span>在线（直接完成借阅操作）</span>
+            <input v-model="lineStateVal" type="radio" name="lineState" value="在线"><span>在线（直接完成借阅操作）</span>
           </label>
         </p>
         <p>

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

@@ -46,7 +46,6 @@
       height="calc(100vh - 355px)"
       :data="tableData"
       :cell-class-name="cell"
-      @selection-change="selectionChangeHandler"
       @row-click="clickRowHandler"
       @row-dblclick="handleDbClick"
     >
@@ -134,9 +133,6 @@ export default {
     getData() {
       this.tableData = data3.rows
     },
-    selectionChangeHandler() {
-      console.log('selectionChangeHandler')
-    },
     clickRowHandler(row) {
       this.$refs.table.toggleRowSelection(row)
     },
@@ -151,15 +147,16 @@ export default {
     handleDbClick(row) {
       this.$refs.table.clearSelection()
       const archiveDetailDom = this.$refs.archiveDetailDom
-      archiveDetailDom.detailVisible = true
-      const arr = data3.rows.filter(item => item.docNum === row.docNum)
-      archiveDetailDom.rowData = arr
+      // const arr = data3.rows.filter(item => item.docNum === row.docNum)
+      archiveDetailDom.rowData = row
+      console.log(row)
       // 借阅状态样式类名
-      if (arr[0].lendStatus === '待归还') {
+      if (row.lendStatus === '待归还') {
         archiveDetailDom.classLend = 'have-lend'
-      } else if (arr[0].lendStatus === '逾期') {
+      } else if (row.lendStatus === '逾期') {
         archiveDetailDom.classLend = 'no-lend'
       }
+      archiveDetailDom.detailVisible = true
     }
   }
 }

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

@@ -38,7 +38,7 @@
       <el-table-column sortable align="center" prop="operationTime" label="操作时间" width="180" />
     </el-table>
     <!-- 归还确认 -->
-    <el-dialog title="归还确认" :visible.sync="returnVisible" :before-close="handleClose">
+    <el-dialog title="归还确认" :visible.sync="returnVisible">
       <span class="dialog-right-top" />
       <span class="dialog-left-bottom" />
       <div class="setting-dialog">
@@ -126,16 +126,16 @@ export default {
     handleDbClick(row) {
       this.$refs.table.clearSelection()
       const archiveDetailDom = this.$refs.archiveDetailDom
-      archiveDetailDom.detailVisible = true
-      const arr = data3.rows.filter(item => item.docNum === row.docNum)
-      archiveDetailDom.rowData = arr
+      // const arr = data3.rows.filter(item => item.docNum === row.docNum)
+      archiveDetailDom.rowData = row
+      console.log(row)
       // 借阅状态样式类名
-      if (arr[0].lendStatus === '待归还') {
+      if (row.lendStatus === '待归还') {
         archiveDetailDom.classLend = 'have-lend'
-      } else if (arr[0].lendStatus === '逾期') {
+      } else if (row.lendStatus === '逾期') {
         archiveDetailDom.classLend = 'no-lend'
       }
-      console.log(archiveDetailDom.classLend)
+      archiveDetailDom.detailVisible = true
     },
     handleReturn() {
       if (this.selections.length > 0) {

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

@@ -5,34 +5,34 @@
       <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[0].docNum }}</span></p>
+          <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[0].borrowerName }}</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[0].borrowerDepartment }}</span></p>
-          <p class="right"><span class="color-blue">证件类型:</span><span class="color-white">{{ rowData[0].borrowerIdType }}</span></p>
+          <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[0].borrowerIdNum }}</span></p>
-          <p class="right"><span class="color-blue">电话号码:</span><span class="color-white">{{ rowData[0].borrowerTel }}</span></p>
+          <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[0].borrowDays }}</span></p>
-          <p class="right"><span class="color-blue">借阅目的:</span><span class="color-white">{{ rowData[0].borrowGoal }}</span></p>
+          <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[0].lendStatus }}</span></p>
-          <p class="right"><span class="color-blue">操作时间:</span><span class="color-white">{{ rowData[0].operationTime }}</span></p>
+          <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[0].categoryName }}</span></p>
-          <p class="right"><span class="color-blue">档号:</span><span class="color-white">{{ rowData[0].archivesID }}</span></p>
+          <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[0].titleName }}</span></p>
+        <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[0].fieldName }}</span></p>
-          <p class="right"><span class="color-blue">存放位置:</span><span class="color-white">{{ rowData[0].storagePath }}</span></p>
+          <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>
@@ -44,7 +44,7 @@ export default {
   data() {
     return {
       detailVisible: false,
-      rowData: [],
+      rowData: {},
       classLend: ''
     }
   }

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="recordFormVisible" title="借阅登记">
+    <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="recordFormVisible" title="借阅登记" @close="handleClose">
       <span class="dialog-right-top" />
       <span class="dialog-left-bottom" />
       <div class="setting-dialog">
@@ -54,7 +54,7 @@
           </el-form-item>
           <el-form-item label="借阅时间" prop="lendDate">
             <date-range-picker v-model="lendDates" />
-            <!-- <el-date-picker v-model="lendDates" type="daterange" start-placeholder="开始日期" range-separator="至" end-placeholder="结束日期" style="width: 420px;" /> -->
+            <!-- <el-date-picker v-model="lendDates" type="daterange" start-placeholder="开始日期" range-separator="至" end-placeholder="结束日期" style="width: 320px;" /> -->
           </el-form-item>
           <el-form-item label="借阅目的" prop="borrowGoal" class="down-select">
             <el-select
@@ -131,6 +131,8 @@ export default {
             type: 'success'
           })
           this.recordFormVisible = false
+          this.$refs.recordFormDom.resetFields()
+          this.$refs.recordFormDom.clearValidate()
         } else {
           this.$message.error('登记失败！')
           return false
@@ -140,6 +142,10 @@ export default {
     handleSelectValue(val) {
       console.log(val, '-------------')
       this.recordForm.tel = val.split('-')[1]
+    },
+    handleClose() {
+      this.$refs.recordFormDom.resetFields()
+      this.$refs.recordFormDom.clearValidate()
     }
   }
 }