-
10src/api/archivesManage/archivesList.js
-
BINsrc/assets/images/dot1.png
-
BINsrc/assets/images/dot2.png
-
BINsrc/assets/images/step01.png
-
BINsrc/assets/images/step01_1.png
-
BINsrc/assets/images/step02.png
-
BINsrc/assets/images/step02_2.png
-
BINsrc/assets/images/step03.png
-
BINsrc/assets/images/step03_3.png
-
2src/views/archivesManage/archivesList/index.vue
-
65src/views/archivesManage/archivesList/module/archivesInfo/index.vue
-
58src/views/archivesManage/archivesSearch/index.vue
-
444src/views/archivesManage/fileImport/dataImport/index.vue
-
29src/views/archivesManage/fileImport/dataImport/table.json
-
23src/views/archivesManage/fileImport/importLog/index.vue
-
58src/views/archivesManage/fileImport/index.vue
-
60src/views/archivesManage/lendManage/components/lendArchivesList.vue
-
10src/views/components/SecurityDoor.vue
-
30src/views/storeManage/warehouse3D/index.vue
After Width: 981 | Height: 128 | Size: 16 KiB |
After Width: 981 | Height: 128 | Size: 4.6 KiB |
After Width: 128 | Height: 128 | Size: 3.0 KiB |
After Width: 128 | Height: 128 | Size: 1.6 KiB |
After Width: 128 | Height: 128 | Size: 4.0 KiB |
After Width: 128 | Height: 128 | Size: 2.7 KiB |
After Width: 128 | Height: 128 | Size: 5.0 KiB |
After Width: 128 | Height: 128 | Size: 2.8 KiB |
@ -0,0 +1,444 @@ |
|||
<template> |
|||
<div class="import-container"> |
|||
<ul class="import-header"> |
|||
<li><i class="step-img01" /><span>上传数据包</span></li> |
|||
<li :class="['dot-img', {'dot-img-active':isShow02 || isShow03}]" /> |
|||
<li><i :class="['step-img02', {'step-img02-active':isShow02 || isShow03}]" /><span>读取数据</span></li> |
|||
<li :class="['dot-img', {'dot-img-active':isShow03}]" /> |
|||
<li><i :class="['step-img03', {'step-img03-active':isShow03}]" /><span>导入数据</span></li> |
|||
</ul> |
|||
<!-- <div class="import-title step01">上传数据包</div> --> |
|||
<div v-if="isShow01" class="step-content step-upload"> |
|||
<el-upload |
|||
ref="upload" |
|||
:limit="1" |
|||
:on-exceed="handleExceed" |
|||
:before-upload="beforeUpload" |
|||
:before-remove="beforeRemove" |
|||
:auto-upload="false" |
|||
:on-success="handleSuccess" |
|||
:on-error="handleError" |
|||
:on-remove="handleRemove" |
|||
accept=".zip" |
|||
:action="fileUploadApi + '?name=' + name" |
|||
> |
|||
<div class="upload-zip"><i class="el-icon-upload2" />选择文件</div> |
|||
<div slot="tip" class="el-upload__tip">上传限制文件类型:zip</div> |
|||
</el-upload> |
|||
</div> |
|||
<div v-if="isShow01" class="step-bottom-btn"> |
|||
<el-button type="primary" @click="handleStep01">下一步</el-button> |
|||
</div> |
|||
<!-- <div class="import-title step02">读取数据</div> --> |
|||
<div v-if="isShow02" class="step-content"> |
|||
<div class="import-data-number">案卷:<span>5000</span> 条 / 卷内:<span>10000</span> 条 / 资料:<span>8000</span> 条</div> |
|||
<ul class="import-tab"> |
|||
<li :class="{'active': archivesTabIndex == 0}" @click="changeActiveTab(0)">案卷</li> |
|||
<li :class="{'active': archivesTabIndex == 1}" @click="changeActiveTab(1)">文件</li> |
|||
<li :class="{'active': archivesTabIndex == 2}" @click="changeActiveTab(2)">资料</li> |
|||
</ul> |
|||
<el-table |
|||
ref="table" |
|||
:data="tableData" |
|||
style="width: 100%" |
|||
height="calc(100vh - 504px)" |
|||
@row-click="clickRowHandler" |
|||
@selection-change="selectionChangeHandler" |
|||
> |
|||
<el-table-column prop="security_class" label="密级" align="center" width="80px" /> |
|||
<el-table-column prop="medium_type" label="载体类型" align="center" width="100px" /> |
|||
<el-table-column prop="micro_number" label="缩微号" align="center" width="80px" /> |
|||
<el-table-column prop="archive_no" label="档号" align="center" width="200px" /> |
|||
<el-table-column prop="page_qty" label="文件件数" align="center" width="100px" /> |
|||
<el-table-column prop="maintitle" label="案卷题名" align="center" show-overflow-tooltip width="240px" /> |
|||
<el-table-column prop="begin_date" label="起始时间" align="center" width="140px" /> |
|||
<el-table-column prop="end_date" label="终止时间" align="center" width="140px" /> |
|||
<el-table-column prop="archive_ctg_no" label="分类号" align="center" width="140px" /> |
|||
<el-table-column prop="subject_term" label="主题词" align="center" width="140px" /> |
|||
<el-table-column prop="remarks" label="附注" align="center" width="120px" /> |
|||
<el-table-column prop="retention" label="保管期限" align="center" width="120px" /> |
|||
<el-table-column prop="archive_year" label="年度" align="center" width="100px" /> |
|||
<el-table-column prop="fonds_no" label="全宗" align="center" width="100px" /> |
|||
<el-table-column prop="piece_no" label="卷号" align="center" width="100px" /> |
|||
</el-table> |
|||
<!--分页组件--> |
|||
<el-pagination |
|||
:current-page="page.page" |
|||
:total="page.total" |
|||
:page-size="page.size" |
|||
:pager-count="5" |
|||
layout="total, prev, pager, next, sizes" |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentPage" |
|||
/> |
|||
</div> |
|||
<div v-if="isShow02" class="step-bottom-btn"> |
|||
<el-button @click="handleReturn02">上一步</el-button> |
|||
<el-button type="primary" @click="handleStep02">下一步</el-button> |
|||
</div> |
|||
<!-- <div class="import-title step03">导入数据</div> --> |
|||
<div v-if="isShow03" class="step-content step-content03"> |
|||
<el-form ref="form" :model="form" label-width="160px"> |
|||
<el-row> |
|||
<el-form-item label="案卷及文件数据"> |
|||
<el-checkbox v-model="form.file">导入</el-checkbox> |
|||
</el-form-item> |
|||
<el-form-item label="遇到重复数据导入方式"> |
|||
<el-radio-group v-model="form.fileType"> |
|||
<el-radio label="跳过" /> |
|||
<el-radio label="覆盖" /> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
</el-row> |
|||
<el-row> |
|||
<el-form-item label="资料数据"> |
|||
<el-checkbox v-model="form.data">导入</el-checkbox> |
|||
</el-form-item> |
|||
<el-form-item label="遇到重复数据导入方式"> |
|||
<el-radio-group v-model="form.dataType"> |
|||
<el-radio label="跳过" /> |
|||
<el-radio label="覆盖" /> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
</el-row> |
|||
<el-form-item> |
|||
<el-button type="primary" class="submit-btn" @click="submitForm('form')">导入</el-button> |
|||
<el-button @click="handleReturn03">取消</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<el-dialog title="确认删除" :visible.sync="deleteVisible"> |
|||
<span class="dialog-right-top" /> |
|||
<span class="dialog-left-bottom" /> |
|||
<div class="setting-dialog"> |
|||
<p><span style="color:#fff;">此操作将清空所选数据</span></p> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click.native="handleDelConfirm">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters } from 'vuex' |
|||
import tableJson from './table.json' |
|||
export default { |
|||
name: 'DataImport', |
|||
components: { }, |
|||
data() { |
|||
return { |
|||
name: '', |
|||
archivesTabIndex: 0, |
|||
deleteVisible: false, |
|||
tableData: [], |
|||
page: { |
|||
page: 1, |
|||
size: 10, |
|||
total: 0 |
|||
}, |
|||
form: { |
|||
file: true, |
|||
data: true, |
|||
fileType: '跳过', |
|||
dataType: '跳过' |
|||
}, |
|||
isShow01: true, |
|||
isShow02: false, |
|||
isShow03: false |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapGetters([ |
|||
'baseApi', |
|||
'fileUploadApi' |
|||
]) |
|||
}, |
|||
created() { |
|||
this.tableData = tableJson |
|||
}, |
|||
methods: { |
|||
handleStep01() { |
|||
this.isShow01 = false |
|||
this.isShow02 = true |
|||
}, |
|||
handleReturn02() { |
|||
this.isShow01 = true |
|||
this.isShow02 = false |
|||
this.isShow03 = false |
|||
}, |
|||
handleStep02() { |
|||
this.isShow01 = false |
|||
this.isShow02 = false |
|||
this.isShow03 = true |
|||
}, |
|||
handleReturn03() { |
|||
this.isShow01 = false |
|||
this.isShow02 = true |
|||
this.isShow03 = false |
|||
}, |
|||
changeActiveTab(index) { |
|||
this.archivesTabIndex = index |
|||
}, |
|||
handleSizeChange(size) { |
|||
this.page.size = size |
|||
this.page.page = 1 |
|||
}, |
|||
handleCurrentPage(val) { |
|||
this.page.page = val |
|||
}, |
|||
submitForm(formName) { |
|||
this.$refs[formName].validate((valid) => { |
|||
if (valid) { |
|||
alert('submit!') |
|||
} else { |
|||
console.log('error submit!!') |
|||
return false |
|||
} |
|||
}) |
|||
}, |
|||
// 上传文件 |
|||
upload() { |
|||
}, |
|||
beforeUpload(file) { |
|||
}, |
|||
handleRemove(file, fileList) { |
|||
console.log(file, fileList) |
|||
}, |
|||
handleExceed(files, fileList) { |
|||
this.$message.warning(`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`) |
|||
}, |
|||
beforeRemove(file, fileList) { |
|||
return this.$confirm('此操作将清空所选数据, 是否继续?', '提示') |
|||
}, |
|||
handleSuccess(response, file, fileList) { |
|||
// this.crud.notify('上传成功', CRUD.NOTIFICATION_TYPE.SUCCESS) |
|||
// this.$refs.upload.clearFiles() |
|||
// this.crud.status.add = CRUD.STATUS.NORMAL |
|||
// this.crud.resetForm() |
|||
// this.crud.toQuery() |
|||
}, |
|||
// 监听上传失败 |
|||
handleError(e, file, fileList) { |
|||
const msg = JSON.parse(e.message) |
|||
this.$message({ |
|||
message: msg.message, |
|||
type: 'error', |
|||
duration: 2500 |
|||
}) |
|||
this.loading = false |
|||
}, |
|||
// table |
|||
clickRowHandler(row) { |
|||
this.$refs.table.toggleRowSelection(row) |
|||
}, |
|||
// table |
|||
selectionChangeHandler(val) { |
|||
this.selections = val |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.import-container{ |
|||
padding: 30px; |
|||
height: calc(100vh - 234px); |
|||
} |
|||
.import-header{ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
li{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
text-align: center; |
|||
align-items: center; |
|||
width: 140px; |
|||
font-size: 14px; |
|||
color: #fff; |
|||
i{ |
|||
width: 45px; |
|||
height: 45px; |
|||
margin-bottom: 20px; |
|||
&.step-img01{ |
|||
background: url('~@/assets/images/step01.png') no-repeat; |
|||
background-size: contain; |
|||
} |
|||
&.step-img02{ |
|||
background: url('~@/assets/images/step02_2.png') no-repeat; |
|||
background-size: contain; |
|||
&.step-img02-active{ |
|||
background: url('~@/assets/images/step02.png') no-repeat; |
|||
background-size: contain; |
|||
} |
|||
} |
|||
&.step-img03{ |
|||
background: url('~@/assets/images/step03_3.png') no-repeat; |
|||
background-size: contain; |
|||
&.step-img03-active{ |
|||
background: url('~@/assets/images/step03.png') no-repeat; |
|||
background-size: contain; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&.dot-img{ |
|||
width: 55px; |
|||
height: 30px; |
|||
background: url('~@/assets/images/dot1.png') no-repeat; |
|||
background-size: contain; |
|||
&.dot-img-active{ |
|||
background: url('~@/assets/images/dot2.png') no-repeat; |
|||
background-size: contain; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.step-content{ |
|||
position: relative; |
|||
} |
|||
.step-content03{ |
|||
margin-top: 50px; |
|||
} |
|||
.step-upload{ |
|||
width: 40%; |
|||
padding: 30px 0; |
|||
margin: 40px auto; |
|||
background-color: #02255f; |
|||
border-radius: 3px; |
|||
div:first-child{ |
|||
display: flex; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
} |
|||
} |
|||
.import-title{ |
|||
font-size: 14px; |
|||
color: #fff; |
|||
padding-left: 50px; |
|||
margin-bottom: 6px; |
|||
height: 50px; |
|||
line-height: 50px; |
|||
&.step01{ |
|||
background: url('~@/assets/images/step01.png') no-repeat; |
|||
background-size: 30px 30px; |
|||
} |
|||
&.step02{ |
|||
background: url('~@/assets/images/step02.png') no-repeat; |
|||
background-size: 30px 30px; |
|||
} |
|||
&.step03{ |
|||
background: url('~@/assets/images/step03.png') no-repeat; |
|||
background-size: 30px 30px; |
|||
} |
|||
} |
|||
.upload-zip{ |
|||
// margin-left: 50px; |
|||
flex-direction: row !important; |
|||
width: 100px; |
|||
padding: 6px 10px; |
|||
margin-bottom: 10px; |
|||
font-size: 14px; |
|||
color: #fff; |
|||
border: 1px solid #339cff; |
|||
background-color: transparent; |
|||
border-radius: 3px; |
|||
& i{ |
|||
margin-right: 4px; |
|||
} |
|||
} |
|||
::v-deep .el-upload{ |
|||
display: block; |
|||
} |
|||
::v-deep .el-upload-list{ |
|||
margin-top: 20px; |
|||
.el-upload-list__item{ |
|||
font-size: 16px; |
|||
line-height: 30px; |
|||
&:hover{ |
|||
background-color: transparent; |
|||
} |
|||
&:first-child{ |
|||
margin-top: 0; |
|||
} |
|||
} |
|||
.el-upload-list__item-name [class^=el-icon]{ |
|||
color: #fff; |
|||
} |
|||
.el-upload-list__item-name{ |
|||
color: #fff; |
|||
} |
|||
.el-icon-close{ |
|||
display: block; |
|||
color: #fff; |
|||
top: 8px; |
|||
} |
|||
} |
|||
|
|||
.step-bottom-btn{ |
|||
text-align: center; |
|||
.el-button.el-button--primary{ |
|||
color: #fff; |
|||
background-color: #1890ff; |
|||
border-color: #1890ff; |
|||
} |
|||
} |
|||
|
|||
.import-data-number{ |
|||
position: absolute; |
|||
right: 10px; |
|||
top: 20px; |
|||
font-size: 12px; |
|||
color: #fff; |
|||
& span{ |
|||
font-weight: bold; |
|||
color: rgb(246,81,99); |
|||
} |
|||
} |
|||
.import-tab{ |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
margin-bottom: 10px; |
|||
li{ |
|||
padding: 10px 20px 14px 20px; |
|||
color: #339CFF; |
|||
cursor: pointer; |
|||
&.active{ |
|||
position: relative; |
|||
color: #fff; |
|||
&::after{ |
|||
content: ""; |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: -1px; |
|||
width: 100%; |
|||
height: 3px; |
|||
border-radius: 3px; |
|||
background-color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
::v-deep .el-form{ |
|||
.el-row{ |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
} |
|||
.el-form-item{ |
|||
margin-right: 50px; |
|||
.el-form-item__label, |
|||
.el-checkbox__label, |
|||
.el-radio__label{ |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.submit-btn{ |
|||
background-color: #3a99fd; |
|||
border-color: #3a99fd; |
|||
margin-top: 20px; |
|||
} |
|||
</style> |
@ -0,0 +1,29 @@ |
|||
[ |
|||
{ |
|||
"security_class": "机密", |
|||
"medium_type": "纸张", |
|||
"micro_number":"-", |
|||
"subject_term": "主题词123", |
|||
"remarks": "附注123", |
|||
"case_no": "A8806117A7B9058F1AA90A", |
|||
"responsibleby": "许由", |
|||
"begin_date": "2016-09-21", |
|||
"end_date": "2016-09-21", |
|||
"children_num": 1, |
|||
"tid": "", |
|||
"organization_matter": "", |
|||
"maintitle": "行政事务文件级文书档案2021002", |
|||
"archive_ctg_no": "行政事务", |
|||
"archive_year": 2021, |
|||
"page_qty": 50, |
|||
"archive_no": "AA001-D-WS.W-2023-0011", |
|||
"fonds_no": "档案室", |
|||
"created_date": "2021-10-10 ", |
|||
"id": "2102D839B14ABAC03F8FEB", |
|||
"is_storage": 2, |
|||
"department": "办公室", |
|||
"retention": "定期10年", |
|||
"piece_no": "001", |
|||
"is_borrow": "" |
|||
} |
|||
] |
@ -0,0 +1,23 @@ |
|||
<template> |
|||
<div> |
|||
导入日志 |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'ImportLog', |
|||
components: { }, |
|||
data() { |
|||
return { |
|||
} |
|||
}, |
|||
created() { |
|||
}, |
|||
methods: { |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
</style> |
@ -0,0 +1,58 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div class="tab-content"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
<span class="right-bottom-line" /> |
|||
<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" :ref="comName" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import dataImport from './dataImport/index.vue' |
|||
import importLog from './importLog/index.vue' |
|||
export default { |
|||
name: 'FileImport', |
|||
components: { dataImport, importLog }, |
|||
data() { |
|||
return { |
|||
activeIndex: 0 |
|||
} |
|||
}, |
|||
computed: { |
|||
comName: function() { |
|||
if (this.activeIndex === 0) { |
|||
return 'dataImport' |
|||
} else if (this.activeIndex === 1) { |
|||
return 'importLog' |
|||
} |
|||
return 'dataImport' |
|||
} |
|||
}, |
|||
created() { |
|||
}, |
|||
methods: { |
|||
changeActiveTab(data) { |
|||
this.activeIndex = data |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.tab-content{ |
|||
position: relative; |
|||
margin-top: 61px; |
|||
border: 1px solid #113d72; |
|||
} |
|||
.tab-content .tab-nav{ |
|||
margin-bottom: 0; |
|||
} |
|||
</style> |