档案管理-style

src/views/archivesManage/archivesList/archivesDetail.vue

@@ -1,23 +1,48 @@
 <template>
-  <div>
+  <div class="rrr">
     <!--工具栏-->
     <div class="head-container">
-      <div>
-        <!-- 搜索 -->
-        <el-input v-model="query.query" size="small" clearable placeholder="请输入关键词" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
-        <span>
-          <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery" />
-        </span>
+      <div class="head-archives-top">
+        <div class="head-search">
+          <!-- 搜索 -->
+          <el-input
+            v-model="query.blurry"
+            clearable
+            size="small"
+            placeholder="请输入关键词"
+            prefix-icon="el-icon-search"
+            style="width: 200px;"
+            class="filter-item"
+            @keyup.enter.native="crud.toQuery"
+          />
+          <el-select
+            v-model="query.enabled"
+            clearable
+            size="small"
+            placeholder="状态"
+            class="filter-item"
+            style="width: 126px"
+            @change="crud.toQuery"
+          >
+            <i slot="prefix" class="iconfont icon-zhuangtai-fanbai" />
+            <el-option
+              v-for="item in stateOptions"
+              :key="item.key"
+              :label="item.label"
+              :value="item.key"
+            />
+          </el-select>
+          <rrOperation />
+        </div>
         <el-checkbox v-model="fixedStatusBar">隐藏固定状态栏</el-checkbox>
       </div>
       <crudOperation :permission="permission">
         <template v-slot:rightButtonGroup>
-          <div class="crud-opts-right">
-            <el-button size="mini" type="primary">装盒</el-button>
-            <el-button size="mini" type="primary">入库</el-button>
-            <el-button size="mini" type="primary">借阅</el-button>
-            <el-button size="mini" type="primary">绑定标签</el-button>
-            <!-- @click="" -->
+          <div class="archives-handler-btn">
+            <el-button class="packing-btn iconfont icon-weibiaoti-2" type="primary">装盒</el-button>
+            <el-button class="warehousing-btn iconfont icon-weibiaoti-2" type="primary">入库</el-button>
+            <el-button class="lending-btn iconfont icon-weibiaoti-2" type="primary">借阅</el-button>
+            <el-button class="binding-btn iconfont icon-weibiaoti-2" type="primary">绑定标签</el-button>
           </div>
         </template>
       </crudOperation>
@@ -58,7 +83,17 @@
       </div>
     </el-dialog>
     <!--表格渲染-->
-    <el-table ref="table" v-loading="crud.loading || getTableDisplayFieldsLoading" :data="crud.data" highlight-current-row style="width: 100%;" @selection-change="crud.selectionChangeHandler" @row-click="clickRowHandler">
+    <el-table
+      ref="table"
+      v-loading="crud.loading || getTableDisplayFieldsLoading"
+      class="archives-table"
+      :data="crud.data"
+      highlight-current-row
+      style="width: 100%; "
+      height="calc(100vh - 370px)"
+      @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 v-for="field in tableDisplayFields" :key="field.id" :label="field.fieldCnName" :align="field.displayformatType" :width="field.displayLength" show-overflow-tooltip>
@@ -66,6 +101,31 @@
           {{ scope.row[field.fieldName] }}
         </template>
       </el-table-column>
+      <el-table-column label="装盒" width="100" align="center" :fixed="fixedStatusBar?false:'right'">
+        <!-- state-active 已装/已入/已借/已绑 -->
+        <template slot-scope="">
+          <!-- 未装 / 已装 -->
+          <span class="row-state row-packing state-active">已装</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="入库" width="100" align="center" :fixed="fixedStatusBar?false:'right'">
+        <template slot-scope="">
+          <!-- 未入 / 已入 -->
+          <span class="row-state row-warehousing">未入</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="借阅" width="100" align="center" :fixed="fixedStatusBar?false:'right'">
+        <template slot-scope="">
+          <!-- 待借 / 不可借-用“—” 表示 / 已借 -->
+          <span class="row-state row-lending">—</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="标签" width="100" align="center" :fixed="fixedStatusBar?false:'right'">
+        <template slot-scope="">
+          <!-- 未绑 / 已绑 -->
+          <span class="row-state row-binding">未绑</span>
+        </template>
+      </el-table-column>
     </el-table>
     <!--分页组件-->
     <pagination />
@@ -76,11 +136,12 @@
 import { add, edit, getTableDisplayFields, getFormDisplayFields } from '@/api/archivesManage/archivesList'
 import CRUD, { presenter, header, form } from '@crud/crud'
 import crudOperation from '@crud/CRUD.operation'
+import rrOperation from '@crud/RR.operation'
 import pagination from '@crud/Pagination'
 import PreviewForm from '@/views/components/category/PreviewForm'
 
 export default {
-  components: { crudOperation, pagination, PreviewForm },
+  components: { crudOperation, rrOperation, pagination, PreviewForm },
   mixins: [
     presenter(),
     header(),
@@ -132,12 +193,22 @@ export default {
       //     { required: true, message: '请输入字典代码', trigger: 'blur' }
       //   ]
       // },
+      stateOptions: [
+        { key: '1', label: '全部' },
+        { key: '2', label: '已装盒' },
+        { key: '3', label: '未装盒' },
+        { key: '4', label: '已入库' },
+        { key: '5', label: '未入库' },
+        { key: '6', label: '已借阅' },
+        { key: '7', label: '可借阅' },
+        { key: '8', label: '不可借阅' }
+      ],
       permission: {
         add: ['admin', 'archivesList:add'],
         edit: ['admin', 'archivesList:edit'],
         del: ['admin', 'archivesList:del']
       },
-      fixedStatusBar: true,
+      fixedStatusBar: false,
       deleteVisible: false,
       deleteData: {},
       tableDisplayFields: [],
@@ -218,12 +289,7 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-::v-deep .filter-item input {
-  margin-left: 10px;
-}
-.el-input-number.is-controls-right {
-  margin-right: 10px;
-}
+@import "~@/assets/styles/archives-manage.scss";
 .preview-dialog {
   ::v-deep .el-dialog {
     width: 680px;

src/views/archivesManage/archivesList/index.vue

@@ -2,13 +2,23 @@
   <div class="app-container">
     <!-- 门类列表 -->
     <el-row class="container-main" :gutter="20">
-      <el-col class="container-left curd-in-out" :xs="10" :sm="8" :md="5" :lg="6" :xl="5" style="height: calc(50vh - 70px)">
-        <span class="right-top-line" />
-        <span class="left-bottom-line" />
-        <div class="tree-title">档案门类</div>
-        <!--门类树状结构-->
-        <el-tree ref="tree" v-loading="crud.loading" :data="crud.data" :props="defaultProps" node-key="id" :expand-on-click-node="false" highlight-current @node-click="handleNodeClick" />
+      <el-col class="curd-in-out" :xs="10" :sm="8" :md="5" :lg="6" :xl="5">
+        <div class="container-left left-tree-item">
+          <span class="right-top-line" />
+          <span class="left-bottom-line" />
+          <div class="tree-title">档案门类</div>
+          <!--门类树状结构-->
+          <el-tree ref="tree" v-loading="crud.loading" :data="crud.data" :props="defaultProps" node-key="id" :expand-on-click-node="false" highlight-current @node-click="handleNodeClick" />
+        </div>
+        <div class="container-left left-tree-item">
+          <span class="right-top-line" />
+          <span class="left-bottom-line" />
+          <div class="tree-title">智能门类</div>
+          <!--门类树状结构-->
+          <el-tree ref="tree" v-loading="crud.loading" :data="crud.data" :props="defaultProps" node-key="id" :expand-on-click-node="false" highlight-current @node-click="handleNodeClick" />
+        </div>
       </el-col>
+
       <!-- 档案管理列表 -->
       <el-col class="container-right" :xs="14" :sm="18" :md="19" :lg="18" :xl="19">
         <span class="right-top-line" />
@@ -68,5 +78,6 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
+@import "~@/assets/styles/archives-manage.scss";
 </style>