盒管理 档案盒详情

src/api/archivesManage/caseManage.js

@@ -1,4 +1,5 @@
 import request from '@/utils/request'
+import qs from 'qs'
 
 export function add(form) {
   return edit(form)
@@ -62,4 +63,11 @@ export function unpacking(data) {
     data: data
   })
 }
-export default { add, edit, del, unpacking }
+// 盒详情
+export function findInCase(params) {
+  return request({
+    url: 'api/case/findInCase' + '?' + qs.stringify(params, { indices: false }),
+    method: 'get'
+  })
+}
+export default { add, edit, del, unpacking, findInCase }

src/views/archivesManage/caseManage/caseList/index.vue

@@ -2,7 +2,6 @@
   <div>
     <!--工具栏-->
     <div class="head-container">
-      <!-- <button @click="test">测试</button> -->
       <crudOperation :permission="permission">
         <template v-slot:right>
           <!-- 搜索 v-model="query.enabled"-->
@@ -28,13 +27,13 @@
     <span class="right-top-line" />
     <span class="left-bottom-line" />
     <!--表格渲染-->
-    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" height="calc(100vh - 357px)" @selection-change="crud.selectionChangeHandler" @row-click="clickRowHandler">
+    <el-table ref="table" v-loading="crud.loading" :cell-class-name="cell" :data="crud.data" style="width: 100%;" height="calc(100vh - 357px)" @row-dblclick="handleDbClick" @selection-change="crud.selectionChangeHandler" @row-click="clickRowHandler">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column type="index" label="序号" width="55" align="center" />
-      <el-table-column prop="depositNum" label="入库" align="center">
-        <!-- <template slot-scope="scope">
-          <span v-if="" class="clear" style="width:56px">{{ scope.row.inState }}</span>
-        </template> -->
+      <el-table-column prop="depositNum" label="入库" align="center" min-width="56">
+        <template slot-scope="scope">
+          <span v-if="scope.row.depositNum===0" class="clear" style="width:56px">未入</span>
+        </template>
       </el-table-column>
       <el-table-column prop="depositNum" label="已装" align="center" min-width="56" />
       <el-table-column prop="caseName" label="盒名称" :show-overflow-tooltip="true" align="center" min-width="150" />
@@ -58,6 +57,8 @@
     <open-case-dlg ref="openCase" @refresh="crud.refresh" />
     <pagination />
     <!-- </div> -->
+    <!-- 档案盒详情 -->
+    <detailDialog ref="detailDom" />
   </div>
 </template>
 
@@ -70,10 +71,10 @@ import CRUD, { presenter, crud } from '@crud/crud'
 import crudOperation from '@crud/CRUD.operation'
 import rrOperation from '@crud/RR.operation'
 import pagination from '@crud/Pagination'
-
+import detailDialog from './module/detailDialog.vue'
 export default {
   name: 'CaseList',
-  components: { eForm, crudOperation, rrOperation, pagination, BindingTagDlg, openCaseDlg },
+  components: { eForm, crudOperation, rrOperation, pagination, BindingTagDlg, openCaseDlg, detailDialog },
   mixins: [presenter(), crud()],
   cruds() {
     return CRUD({
@@ -133,14 +134,6 @@ export default {
     }
   },
   methods: {
-    // test() {
-    //   console.log(this.crud.data, '---')
-    // },
-    handleConfirm() {
-    },
-    handleClose(done) {
-      done()
-    },
     clickRowHandler(row) {
       this.$refs.table.toggleRowSelection(row)
     },
@@ -163,13 +156,42 @@ export default {
         this.$refs.openCase.openCaseVisible = true
         this.$refs.openCase.caseData = data
       }
+    },
+    // 表格双击
+    handleDbClick(row) {
+      // console.log(row, 'row')
+      this.$refs.detailDom.rowData = row
+      const params = {
+        caseId: row.id
+        // caseId: '1716F6C668C83A929C738B'
+      }
+      this.crud.crudMethod.findInCase(params).then(res => {
+        console.log(res, 'res')
+        if (res) {
+          this.$refs.detailDom.tableData = res.archives
+        }
+      })
+      this.$refs.detailDom.detailVisible = true
+    },
+    // 单元格样式
+    cell({ row, columnIndex }) {
+      if (row.depositNum === 0 && columnIndex === 2) { // 未入
+        console.log(row.depositNum, '-----')
+        return 'fail-clear'
+      } else if (row.depositNum === '待入' && columnIndex === 2) { // 待入
+        return 'no-clear'
+      } else if (row.depositNum === '待入' && columnIndex === 2) { // 已入
+        return 'have-clear'
+      }
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+@import '~@/assets/styles/lend-manage.scss';
 @import "~@/assets/styles/archives-manage.scss";
+
 ::v-deep div.el-dialog__footer {
   text-align: center;
 }
@@ -190,4 +212,7 @@ export default {
   padding-left: 13px !important;
 
 }
+.crud-opts{
+  display: flex;
+}
 </style>

src/views/archivesManage/caseManage/caseList/module/detailDialog.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <el-dialog title="档案盒详情" :visible.sync="detailVisible">
+      <span class="dialog-right-top" />
+      <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.caseName }}</span></p>
+          <p class="right"><span class="color-blue">盒条码：</span><span class="color-white">{{ rowData.barcode }}</span></p>
+        </div>
+        <div class="dpflex">
+          <p class="left"><span class="color-blue">存放位置：</span><span class="color-white">{{ rowData.folderLocation }}</span></p>
+          <p class="right"><span class="color-blue">TID：</span><span class="color-white">{{ rowData.tid }}</span></p>
+        </div>
+        <p class="left"><span class="color-blue">创建时间：</span><span class="color-white">{{ rowData.create_time | parseTime }}</span></p>
+        <el-table :data="tableData" style="margin-top:15px;height:373px">
+          <el-table-column type="index" label="序号" align="center" width="55" />
+          <el-table-column prop="child" label="子条数目" align="center" width="100" />
+          <el-table-column prop="categoryType" label="门类级别" align="center" width="100" />
+          <el-table-column prop="categoryName" label="门类名称" align="center" width="100" />
+          <el-table-column prop="fondsNo" label="全宗号" align="center" width="180" />
+          <el-table-column prop="archivesId" label="档号" align="center" width="220" />
+          <el-table-column prop="archiveYear" label="归档年度" align="center" width="150" />
+          <el-table-column prop="maintitle" :show-overflow-tooltip="true" align="center" label="题名" width="180" />
+          <el-table-column prop="securityClass" label="保密程度" align="center" width="150" />
+          <el-table-column prop="department" label="部门名称" align="center" width="150" />
+          <el-table-column prop="caseName" label="盒名称" align="center" width="150" />
+          <el-table-column prop="folderLocation" align="center" label="所在位置" width="180" />
+          <el-table-column prop="create_time" align="center" label="创建时间" width="150">
+            <template slot-scope="scope">
+              <div>{{ scope.row.create_time | parseTime }}</div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      detailVisible: false,
+      rowData: {},
+      tableData: []
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog{
+  width: 950px;
+  height: 520px;
+}
+::v-deep .el-dialog__body{
+  padding: 20px 0;
+}
+.dpflex{
+  display: flex;
+  p{
+    margin-bottom: 20px;
+  }
+  .left{
+    width: 400px;
+  }
+}
+.color-blue{
+    width: 86px;
+    display: inline-block;
+    text-align: right;
+    color: #339CFF;
+}
+.color-white{
+  color: #fff;
+}
+::v-deep .el-dialog .el-dialog__header .el-dialog__close::before{
+    position: absolute;
+    right: -160px;
+    bottom: -10px;
+}
+</style>