From b42e7956e5ddd3a2eedc357462c595c7d875f86f Mon Sep 17 00:00:00 2001
From: x_ying <2438792676@qq.com>
Date: Fri, 29 Jul 2022 16:51:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A1=A3=E6=A1=88=E6=A3=80=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../archivesManage/archivesSearch/index.vue   | 170 +++++++++++++++++-
 .../archivesSearch/module/detailDialog.vue    | 140 +++++++++++++++
 2 files changed, 308 insertions(+), 2 deletions(-)
 create mode 100644 src/views/archivesManage/archivesSearch/module/detailDialog.vue

diff --git a/src/views/archivesManage/archivesSearch/index.vue b/src/views/archivesManage/archivesSearch/index.vue
index 8f2f78a..238252c 100644
--- a/src/views/archivesManage/archivesSearch/index.vue
+++ b/src/views/archivesManage/archivesSearch/index.vue
@@ -1,15 +1,181 @@
 <template>
   <div>
-    <h1 style="color:#fff">档案检索</h1>
+    <div>
+      <div class="head-container">
+        <h2>模糊检索</h2>
+        <div>
+          <div class="search-input">
+            <el-input v-model="keywords" placeholder="请输入内容" class="input-with-select" style="width:50%;">
+              <el-select slot="prepend" v-model="select" placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+              <el-button slot="append" icon="el-icon-search" />
+            </el-input>
+          </div>
+        </div>
+      </div>
+      <div class="search-result">
+        <div class="search-title">
+          <p>检索结果</p>
+          <p>本次检索结果共计{{ resNum }}条数据</p>
+        </div>
+        <el-table
+          ref="table"
+          :data="crud.data"
+          style="width: 100%;"
+          height="calc(100vh - 493px)"
+          @row-dblclick="handleDbClick"
+        >
+          <!-- <el-table-column type="selection" width="55" align="center" /> -->
+          <el-table-column type="index" label="序号" width="90" align="center" />
+          <el-table-column prop="" label="子条数目" align="center" min-width="150" />
+          <el-table-column prop="" label="门类级别" align="center" min-width="100" />
+          <el-table-column prop="" label="门类名称" align="center" min-width="150" />
+          <el-table-column prop="" label="全宗号" align="center" min-width="180" />
+          <el-table-column prop="" label="档号" align="center" min-width="180" />
+          <el-table-column prop="" label="归档年度" align="center" min-width="100" />
+          <el-table-column prop="" label="题名" align="center" min-width="180" />
+          <el-table-column prop="" label="保密程度" align="center" min-width="100" />
+          <el-table-column prop="" label="部门" align="center" min-width="100" />
+          <el-table-column prop="" label="盒名称" align="center" min-width="180" />
+          <el-table-column prop="" label="所在位置" align="center" min-width="180" />
+          <el-table-column prop="" label="创建时间" align="center" min-width="180" />
+        </el-table>
+        <pagination />
+        <!-- 详情 -->
+        <detailDialog ref="detailDom" />
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import pagination from '@crud/Pagination'
+import CRUD, { presenter, crud } from '@crud/crud'
+import detailDialog from './module/detailDialog.vue'
 export default {
-
+  name: 'ArchivesSearch',
+  components: { pagination, detailDialog },
+  mixins: [presenter(), crud()],
+  cruds() {
+    return CRUD({
+      url: 'api/storage/initStorageLogList',
+      sort: ['update_time,desc']
+      // crudMethod: caseCrudMethod,
+    })
+  },
+  data() {
+    return {
+      keywords: '',
+      select: 1,
+      options: [
+        { value: 1, label: '题名' },
+        { value: 2, label: '档号' },
+        { value: 3, label: '年度' },
+        { value: 4, label: '密级' },
+        { value: 5, label: '盒名称' },
+        { value: 6, label: '保管期限' },
+        { value: 7, label: '部门名称' }
+      ],
+      resNum: 0
+    }
+  },
+  methods: {
+    // 双击详情
+    handleDbClick() {
+      this.$refs.detailDom.detailVisible = true
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
+// @import "~@/assets/styles/archives-manage.scss";
+// @import "~@/assets/styles/lend-manage.scss";
+
+.head-container{
+  padding: 100px 0 30px 0;
+  text-align: center;
+  h2{
+    color: #fff;
+    margin-bottom: 30px;
+  }
+}
+// ::v-deep .input-prepend .el-input__inner{
+//   padding-left: 135px;
+//   height: 42px;
+// }
+.search-area {
+  height: 100%;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  & .search-input {
+    // width: 796px;
+    & .el-select .el-input {
+      width: 130px;
+    }
+    // & ::v-deep .input-with-select ::v-deep .el-input-group__prepend {
+    //   background-color: #fff;
+    // }
+  }
+}
+// 补充不生效
+::v-deep .el-input-group {
+  height: 42px;
+  & > input {
+    height: 42px;
+    border: 1px solid #339cff;
+    background-color: #021941;
+    &::placeholder {
+      color: #fff;
+    }
+  }
+}
+::v-deep .el-input-group__prepend {
+  width: 125px;
+  background-color: #339cff;
+  border: 1px solid #339cff;
+  border-radius: 34px;
+  border-right: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 
+}
+::v-deep .el-input__inner {
+  color: #fff;
+}
+::v-deep .el-input-group__prepend div.el-select .el-input__inner{
+  color: #fff;
+  text-align: center;
+}
+::v-deep .el-input-group__append {
+  width: 72px;
+  left: -20px;
+  text-align: center;
+  background-color: #339cff;
+  border: 1px solid #339cff;
+  border-radius: 34px;
+  & i {
+    font-size: 25px;
+    color: #fff;
+  }
+}
+//检索结果
+.search-result{
+  padding: 0 20px;
+  color: #fff;
+  .search-title{
+    padding:0 30px;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+  }
+}
 </style>
diff --git a/src/views/archivesManage/archivesSearch/module/detailDialog.vue b/src/views/archivesManage/archivesSearch/module/detailDialog.vue
new file mode 100644
index 0000000..7976081
--- /dev/null
+++ b/src/views/archivesManage/archivesSearch/module/detailDialog.vue
@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <el-dialog title="档案盒详情" :visible.sync="detailVisible">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <div class="archives-info-wrap">
+          <!-- tab -->
+          <ul class="archives-tab">
+            <li :class="{'active': archivesTabIndex == 0}" @click="changeActiveTab(0)">基本信息</li>
+            <li :class="{'active': archivesTabIndex == 2}" @click="changeActiveTab(2)">元数据</li>
+          </ul>
+          <!-- 基本信息 -->
+          <div v-show="archivesTabIndex==0" class="base-info item-content">
+            <div>
+              <div class="dpflex">
+                <p class="left"><span class="color-blue">全宗名：</span><span class="color-white">{{ }}</span></p>
+                <p class="right"><span class="color-blue">部门名称：</span><span class="color-white">{{ }}</span></p>
+              </div>
+              <div class="dpflex">
+                <p class="left"><span class="color-blue">归档年度：</span><span class="color-white">{{ }}</span></p>
+                <p class="right"><span class="color-blue">目录号：</span><span class="color-white">{{ }}</span></p>
+              </div>
+              <div class="dpflex">
+                <p class="left"><span class="color-blue">实体分类号：</span><span class="color-white">{{ }}</span></p>
+                <p class="right"><span class="color-blue">件号：</span><span class="color-white">{{ }}</span></p>
+              </div>
+              <div class="dpflex">
+                <p class="left"><span class="color-blue">成文日期：</span><span class="color-white">{{ }}</span></p>
+                <p class="right"><span class="color-blue">案卷级档号：</span><span class="color-white">{{ }}</span></p>
+              </div>
+              <p class="sin-row"><span class="color-blue">题名：</span><span class="color-white">{{ }}</span></p>
+
+              <div class="dpflex">
+                <p class="left"><span class="color-blue">保管期限：</span><span class="color-white">{{ }}</span></p>
+                <p class="right"><span class="color-blue">密级：</span><span class="color-white">{{ }}</span></p>
+              </div>
+              <div class="dpflex">
+                <p class="left"><span class="color-blue">总页数：</span><span class="color-white">{{ }}</span></p>
+                <p class="right"><span class="color-blue">总份数：</span><span class="color-white">{{ }}</span></p>
+              </div>
+              <div class="dpflex">
+                <p class="left"><span class="color-blue">立卷人：</span><span class="color-white">{{ }}</span></p>
+                <p class="right"><span class="color-blue">立卷时间：</span><span class="color-white">{{ }}</span></p>
+              </div>
+              <div class="dpflex">
+                <p class="left"><span class="color-blue">检查人：</span><span class="color-white">{{ }}</span></p>
+                <p class="right"><span class="color-blue">检查时间：</span><span class="color-white">{{ }}</span></p>
+              </div>
+              <p class="sin-row"><span class="color-blue">备注：</span><span class="color-white">{{ }}</span></p>
+
+              <div class="dpflex">
+                <p class="left"><span class="color-blue">TID：</span><span class="color-white">{{ }}</span></p>
+                <p class="right"><span class="color-blue">盒名称：</span><span class="color-white">{{ }}</span></p>
+              </div>
+              <div class="dpflex">
+                <p class="left"><span class="color-blue">库房位置：</span><span class="color-white">{{ }}</span></p>
+                <p class="right"><span class="color-blue">借阅状态：</span><span class="color-white">{{ }}</span></p>
+              </div>
+              <p class="sin-row"><span class="color-blue">条形码：</span><span class="color-white">{{ }}</span></p>
+            </div>
+          </div>
+          <!-- 元数据 -->
+          <div v-if="archivesTabIndex==2" class="item-content">
+            <pre v-highlightjs="xml_show">
+            <code class="highlight_s">
+              {{ xml_show }}
+            </code>
+          </pre>
+          </div>
+        </div>
+
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      detailVisible: false,
+      rowData: {},
+      tableData: [],
+      archivesTabIndex: 0,
+      xml_show: null
+
+    }
+  },
+  methods: {
+    changeActiveTab(index) {
+      this.archivesTabIndex = index
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/archives-manage.scss";
+
+::v-deep .el-dialog{
+  width: 820px;
+}
+::v-deep .el-dialog__body{
+  padding: 20px 0;
+  height: 600px;
+}
+.dpflex{
+  display: flex;
+  p{
+    margin-bottom: 20px;
+  }
+  .left{
+    width: 400px;
+  }
+}
+.sin-row{
+  margin-bottom: 20px;
+}
+.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: -100px;
+    bottom: -10px;
+}
+::v-deep .el-tabs__item{
+  color: #339CFF;
+  &.is-active{
+    color: #fff;
+  }
+}
+</style>