档案管理 盒管理

src/assets/styles/lend-manage.scss

@@ -1,4 +1,8 @@
 // 借阅管理
+.crud-opts{
+  display: inline-block;
+}
+
 .cell-lend{
   display: inline-block;
   height: 26px;

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

@@ -0,0 +1,176 @@
+<template>
+  <div>
+    <!--工具栏-->
+    <div class="head-container">
+      <crudOperation :permission="permission">
+        <template v-slot:right>
+          <!-- 搜索 v-model="query.enabled"-->
+          <!-- <el-select clearable size="small" class="filter-item" style="width: 100px" @change="crud.toQuery">
+            <el-option v-for="item in stateOptions" :key="item.key" :label="item.label" :value="item.key" />
+          </el-select> -->
+          <el-input v-model="crud.query[inputSelect]" clearable size="small" placeholder="请输入关键词" style="width: 200px;margin-left:10px" class="input-prepend filter-item" @keyup.enter.native="crud.toQuery">
+            <el-select slot="prepend" v-model="inputSelect" style="width: 90px" @change="crud.toQuery">
+              <el-option v-for="item in queryOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-input>
+          <rrOperation />
+        </template>
+        <template v-slot:rightButtonGroup>
+          <div class="archives-handler-btn">
+            <el-button class="packing-btn iconfont icon-weibiaoti-2" type="primary" :disabled="crud.selections.length === 0" @click="openCase(crud.selections)">拆盒</el-button>
+            <el-button class="binding-btn iconfont icon-weibiaoti-2" type="primary" :disabled="crud.selections.length !== 1" @click="bindingTag(crud.selections)">绑定标签</el-button>
+          </div>
+        </template>
+      </crudOperation>
+    </div>
+    <!-- <div class="app-container container-wrap"> -->
+    <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-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" />
+      <el-table-column prop="depositNum" label="已装" align="center" />
+      <el-table-column prop="caseName" label="盒名称" align="center" />
+      <el-table-column prop="tid" label="TID" align="center" />
+      <el-table-column prop="barcode" label="条形码" align="center" />
+      <el-table-column label="存放位置" align="center">
+        <template slot-scope="scope">
+          <span v-if="scope.row.folderLocationDetails === ''">-</span>
+          <span v-else>{{ scope.row.folderLocationDetails }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="update_time" width="175" label="操作时间" align="center">
+        <template slot-scope="scope">
+          <div>{{ scope.row.update_time | parseTime }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="isColumnLength" label="操作" align="center" />
+    </el-table>
+    <!--新增编辑表单渲染-->
+    <eForm />
+    <binding-tag-dlg ref="bindingTag" :binding-id="crud.selections[0] && crud.selections[0].id" :binding-type="2" binding-txt="档案盒" @refresh="crud.refresh" />
+    <open-case-dlg ref="openCase" @refresh="crud.refresh" />
+    <pagination />
+    <!-- </div> -->
+  </div>
+</template>
+
+<script>
+import caseCrudMethod from '@/api/archivesManage/caseManage'
+import BindingTagDlg from '@/views/components/BindingTagDlg'
+import eForm from './module/form'
+import openCaseDlg from './module/openCaseDlg'
+import CRUD, { presenter, crud } from '@crud/crud'
+import crudOperation from '@crud/CRUD.operation'
+import rrOperation from '@crud/RR.operation'
+import pagination from '@crud/Pagination'
+
+export default {
+  name: 'CaseList',
+  components: { eForm, crudOperation, rrOperation, pagination, BindingTagDlg, openCaseDlg },
+  mixins: [presenter(), crud()],
+  cruds() {
+    return CRUD({
+      url: 'api/case/initCaseList',
+      crudMethod: caseCrudMethod,
+      title: '档案盒',
+      optShow: {
+        add: true,
+        edit: true,
+        del: true,
+        download: false,
+        group: false
+      }
+    })
+  },
+  data() {
+    return {
+      permission: {
+        add: ['admin', 'caseManage:add'],
+        edit: ['admin', 'caseManage:edit'],
+        del: ['admin', 'caseManage:del']
+      },
+      verifyDialVisible: false,
+      stateOptions: [
+        {
+          label: '全部',
+          value: 'center'
+        },
+        {
+          label: '未入',
+          value: 'left'
+        },
+        {
+          label: '待入',
+          value: 'right'
+        },
+        {
+          label: '已入',
+          value: 'right'
+        }
+      ],
+      inputSelect: 'caseName',
+      queryOptions: [
+        {
+          label: '盒名称',
+          value: 'caseName'
+        },
+        {
+          label: 'TID',
+          value: 'tid'
+        },
+        {
+          label: '条形码',
+          value: 'barcode'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleConfirm() {
+    },
+    handleClose(done) {
+      done()
+    },
+    clickRowHandler(row) {
+      this.$refs.table.toggleRowSelection(row)
+    },
+    bindingTag(data) {
+      if (data[0].tid) {
+        this.$refs.bindingTag.isBinding = true
+        this.$refs.bindingTag.tidCode = data[0].tid
+      }
+      this.$refs.bindingTag.bindingVisible = true
+    },
+    openCase(data) {
+      console.log(data)
+      const bool = data.some(item => item.depositNum === 0)
+      if (bool) {
+        this.$message({
+          message: '存在空档案盒不可拆盒!',
+          type: 'warning'
+        })
+      } else {
+        this.$refs.openCase.openCaseVisible = true
+        this.$refs.openCase.caseData = data
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "~@/assets/styles/archives-manage.scss";
+::v-deep div.el-dialog__footer {
+  text-align: center;
+}
+.app-container{
+  margin: 0 20px 20px;
+}
+.container-wrap{
+  min-height: calc(100vh - 242px);
+}
+
+</style>

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

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <div class="head-container">
+      <!-- <el-button v-permission="permission.download" :loading="crud.downloadLoading" size="mini" icon="el-icon-download" @click="handleExport">导出</el-button> -->
+      <el-button size="mini" icon="el-icon-download">导出</el-button>
+      <el-select slot="prepend" v-model="caseState" class="filter-item" style="width: 130px;height:30px;margin-right:10px" @change="initData">
+        <el-option v-for="item in caseStateOptions" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+      <el-input v-model="typeVal" clearable size="small" placeholder="请输入关键词" style="width: 200px;" class="input-prepend filter-item" @keyup.enter.native="initData">
+        <el-select slot="prepend" v-model="inputSelect" style="width: 80px">
+          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </el-input>
+    </div>
+    <!--表格渲染-->
+    <!-- <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" :data="tableData" style="width: 100%;" height="calc(100vh - 357px)">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column type="index" label="序号" width="55" align="center" />
+      <el-table-column prop="" label="类型" align="center" />
+      <el-table-column prop="" label="盒名称" align="center" />
+      <el-table-column prop="" label="TID" align="center" />
+      <el-table-column prop="" label="条形码" align="center" />
+      <el-table-column label="存放位置" align="center">
+        <!-- <template slot-scope="scope">
+          <span v-if="scope.row.folderLocationDetails === ''">-</span>
+          <span v-else>{{ scope.row.folderLocationDetails }}</span>
+        </template> -->
+      </el-table-column>
+      <el-table-column prop="" label="操作人" align="center" />
+      <el-table-column prop="update_time" width="175" label="操作时间" align="center">
+        <!-- <template slot-scope="scope">
+          <div>{{ scope.row.update_time | parseTime }}</div>
+        </template> -->
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <pagination />
+  </div>
+</template>
+
+<script>
+import pagination from '@crud/Pagination'
+import CRUD, { presenter, crud } from '@crud/crud'
+
+export default {
+  name: 'CaseLog',
+  components: { pagination },
+  mixins: [presenter(), crud()],
+  cruds() {
+    return CRUD({
+      // title: '岗位',
+      // url: 'api/job',
+      // crudMethod: { ...crudJob },
+      optShow: {
+        add: false,
+        edit: false,
+        del: false,
+        download: false,
+        group: false
+      }
+    })
+  },
+  data() {
+    return {
+      tableData: []
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/archives-manage.scss";
+
+</style>

src/views/archivesManage/caseManage/index.vue

@@ -1,174 +1,60 @@
 <template>
-  <div>
-    <!--工具栏-->
-    <div class="head-container">
-      <crudOperation :permission="permission">
-        <template v-slot:right>
-          <!-- 搜索 v-model="query.enabled"-->
-          <!-- <el-select clearable size="small" class="filter-item" style="width: 100px" @change="crud.toQuery">
-            <el-option v-for="item in stateOptions" :key="item.key" :label="item.label" :value="item.key" />
-          </el-select> -->
-          <el-input v-model="crud.query[inputSelect]" clearable size="small" placeholder="请输入关键词" style="width: 200px;margin-left:10px" class="input-prepend filter-item" @keyup.enter.native="crud.toQuery">
-            <el-select slot="prepend" v-model="inputSelect" style="width: 80px" @change="crud.toQuery">
-              <el-option v-for="item in queryOptions" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-          </el-input>
-          <rrOperation />
-        </template>
-        <template v-slot:rightButtonGroup>
-          <div class="archives-handler-btn">
-            <el-button class="packing-btn iconfont icon-weibiaoti-2" type="primary" :disabled="crud.selections.length === 0" @click="openCase(crud.selections)">拆盒</el-button>
-            <el-button class="binding-btn iconfont icon-weibiaoti-2" type="primary" :disabled="crud.selections.length !== 1" @click="bindingTag(crud.selections)">绑定标签</el-button>
-          </div>
-        </template>
-      </crudOperation>
-    </div>
-    <div class="app-container container-wrap">
+  <div class="app-container">
+    <div class="tab-content">
       <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 - 463px)" @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" />
-        <el-table-column prop="depositNum" label="已装" align="center" />
-        <el-table-column prop="caseName" label="盒名称" align="center" />
-        <el-table-column prop="tid" label="TID" align="center" />
-        <el-table-column prop="barcode" label="条形码" align="center" />
-        <el-table-column label="存放位置" align="center">
-          <template slot-scope="scope">
-            <span v-if="scope.row.folderLocationDetails === ''">-</span>
-            <span v-else>{{ scope.row.folderLocationDetails }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="update_time" width="175" label="操作时间" align="center">
-          <template slot-scope="scope">
-            <div>{{ scope.row.update_time | parseTime }}</div>
-          </template>
-        </el-table-column>
-        <el-table-column prop="isColumnLength" label="操作" align="center" />
-      </el-table>
-      <!--新增编辑表单渲染-->
-      <eForm />
-      <binding-tag-dlg ref="bindingTag" :binding-id="crud.selections[0] && crud.selections[0].id" :binding-type="2" binding-txt="档案盒" @refresh="crud.refresh" />
-      <open-case-dlg ref="openCase" @refresh="crud.refresh" />
-      <pagination />
+      <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>
+        <!-- 最右侧装饰img -->
+        <span class="tab-right-img" />
+      </ul>
+      <component :is="comName" />
+
     </div>
   </div>
 </template>
 
 <script>
-import caseCrudMethod from '@/api/archivesManage/caseManage'
-import BindingTagDlg from '@/views/components/BindingTagDlg'
-import eForm from './module/form'
-import openCaseDlg from './module/openCaseDlg'
-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 caseList from './caseList/index.vue'
+import caseLog from './caseLog/index.vue'
 
 export default {
-  components: { eForm, crudOperation, rrOperation, pagination, BindingTagDlg, openCaseDlg },
-  mixins: [presenter(), crud()],
-  cruds() {
-    return CRUD({
-      url: 'api/case/initCaseList',
-      crudMethod: caseCrudMethod,
-      title: '档案盒',
-      optShow: {
-        add: true,
-        edit: true,
-        del: true,
-        download: false,
-        group: false
-      }
-    })
+  name: 'CaseManage',
+  components: {
+    caseList,
+    caseLog
   },
   data() {
     return {
-      permission: {
-        add: ['admin', 'caseManage:add'],
-        edit: ['admin', 'caseManage:edit'],
-        del: ['admin', 'caseManage:del']
-      },
-      verifyDialVisible: false,
-      stateOptions: [
-        {
-          label: '全部',
-          value: 'center'
-        },
-        {
-          label: '未入',
-          value: 'left'
-        },
-        {
-          label: '待入',
-          value: 'right'
-        },
-        {
-          label: '已入',
-          value: 'right'
+      activeIndex: 0
     }
-      ],
-      inputSelect: 'caseName',
-      queryOptions: [
-        {
-          label: '盒名称',
-          value: 'caseName'
   },
-        {
-          label: 'TID',
-          value: 'tid'
-        },
-        {
-          label: '条形码',
-          value: 'barcode'
+  computed: {
+    comName: function() {
+      if (this.activeIndex === 0) {
+        return 'caseList'
+      } else if (this.activeIndex === 1) {
+        return 'caseLog'
       }
-      ]
+      return 'caseList'
     }
   },
   methods: {
-    handleConfirm() {
-    },
-    handleClose(done) {
-      done()
-    },
-    clickRowHandler(row) {
-      this.$refs.table.toggleRowSelection(row)
-    },
-    bindingTag(data) {
-      if (data[0].tid) {
-        this.$refs.bindingTag.isBinding = true
-        this.$refs.bindingTag.tidCode = data[0].tid
-      }
-      this.$refs.bindingTag.bindingVisible = true
-    },
-    openCase(data) {
-      console.log(data)
-      const bool = data.some(item => item.depositNum === 0)
-      if (bool) {
-        this.$message({
-          message: '存在空档案盒不可拆盒!',
-          type: 'warning'
-        })
-      } else {
-        this.$refs.openCase.openCaseVisible = true
-        this.$refs.openCase.caseData = data
-      }
+    changeActiveTab(data) {
+      this.activeIndex = data
     }
   }
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-@import "~@/assets/styles/archives-manage.scss";
-::v-deep div.el-dialog__footer {
-  text-align: center;
-}
-.app-container{
-  margin: 0 20px 20px;
+<style lang="scss" scoped>
+.tab-content{
+  position: relative;
+  margin-top: 61px;
+  border: 1px solid #113d72;
 }
-.container-wrap{
-  min-height: calc(100vh - 242px);
+.tab-content .tab-nav{
+  margin-bottom: 0;
 }
 </style>