26 changed files with 137 additions and 2595 deletions
-
54src/components/GithubCorner/index.vue
-
188src/components/HeaderSearch/index.vue
-
78src/components/JavaEdit/index.vue
-
140src/components/PanThumb/index.vue
-
149src/components/RightPanel/index.vue
-
60src/components/Screenfull/index.vue
-
57src/components/SizeSelect/index.vue
-
138src/components/UploadExcel/index.vue
-
81src/components/YamlEdit/index.vue
-
1src/layout/components/Navbar.vue
-
2src/layout/index.vue
-
1src/views/archiveKeeping/inStorage/pendingInArchive/mixins/index.js
-
16src/views/archiveUtilize/archiveEditing/module/material.vue
-
116src/views/archiveUtilize/archiveSearch/module/resultList.vue
-
1src/views/archivesManage/managementLibrary/mixins/index.js
-
33src/views/collectReorganizi/collectionLibrary/module/uploadFile/index.vue
-
124src/views/components/Echarts.vue
-
353src/views/components/archivesDetail/anjuan.vue
-
275src/views/components/archivesDetail/archivesInfo/index.vue
-
33src/views/components/archivesDetail/detail.vue
-
367src/views/components/archivesDetail/juannei.vue
-
355src/views/components/archivesDetail/project.vue
-
13src/views/components/archivesListModule/index.vue
-
41src/views/components/excel/upload-excel.vue
-
31src/views/system/processManage/runningProcess/module/businessDetails/index.vue
-
25src/views/system/user/cart.vue
@ -1,54 +0,0 @@ |
|||||
<template> |
|
||||
<a href="https://XXXXXXX" target="_blank" class="github-corner" aria-label="View source on Github"> |
|
||||
<svg |
|
||||
width="80" |
|
||||
height="80" |
|
||||
viewBox="0 0 250 250" |
|
||||
style="fill:#40c9c6; color:#fff;" |
|
||||
aria-hidden="true" |
|
||||
> |
|
||||
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" /> |
|
||||
<path |
|
||||
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" |
|
||||
fill="currentColor" |
|
||||
style="transform-origin: 130px 106px;" |
|
||||
class="octo-arm" |
|
||||
/> |
|
||||
<path |
|
||||
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" |
|
||||
fill="currentColor" |
|
||||
class="octo-body" |
|
||||
/> |
|
||||
</svg> |
|
||||
</a> |
|
||||
</template> |
|
||||
|
|
||||
<style scoped> |
|
||||
.github-corner:hover .octo-arm { |
|
||||
animation: octocat-wave 560ms ease-in-out |
|
||||
} |
|
||||
|
|
||||
@keyframes octocat-wave { |
|
||||
0%, |
|
||||
100% { |
|
||||
transform: rotate(0) |
|
||||
} |
|
||||
20%, |
|
||||
60% { |
|
||||
transform: rotate(-25deg) |
|
||||
} |
|
||||
40%, |
|
||||
80% { |
|
||||
transform: rotate(10deg) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@media (max-width:500px) { |
|
||||
.github-corner:hover .octo-arm { |
|
||||
animation: none |
|
||||
} |
|
||||
.github-corner .octo-arm { |
|
||||
animation: octocat-wave 560ms ease-in-out |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,188 +0,0 @@ |
|||||
<template> |
|
||||
<div :class="{'show':show}" class="header-search"> |
|
||||
<svg-icon class-name="search-icon" icon-class="search" @click.stop="click" /> |
|
||||
<el-select |
|
||||
ref="headerSearchSelect" |
|
||||
v-model="search" |
|
||||
:remote-method="querySearch" |
|
||||
filterable |
|
||||
default-first-option |
|
||||
remote |
|
||||
placeholder="Search" |
|
||||
class="header-search-select" |
|
||||
@change="change" |
|
||||
> |
|
||||
<el-option v-for="item in options" :key="item.path" :value="item" :label="item.title.join(' > ')" /> |
|
||||
</el-select> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
// fuse is a lightweight fuzzy-search module |
|
||||
// make search results more in line with expectations |
|
||||
import Fuse from 'fuse.js' |
|
||||
import path from 'path' |
|
||||
|
|
||||
export default { |
|
||||
name: 'HeaderSearch', |
|
||||
data() { |
|
||||
return { |
|
||||
search: '', |
|
||||
options: [], |
|
||||
searchPool: [], |
|
||||
show: false, |
|
||||
fuse: undefined |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
routes() { |
|
||||
return this.$store.state.permission.routers |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
routes() { |
|
||||
this.searchPool = this.generateRoutes(this.routes) |
|
||||
}, |
|
||||
searchPool(list) { |
|
||||
this.initFuse(list) |
|
||||
}, |
|
||||
show(value) { |
|
||||
if (value) { |
|
||||
document.body.addEventListener('click', this.close) |
|
||||
} else { |
|
||||
document.body.removeEventListener('click', this.close) |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.searchPool = this.generateRoutes(this.routes) |
|
||||
}, |
|
||||
methods: { |
|
||||
click() { |
|
||||
this.show = !this.show |
|
||||
if (this.show) { |
|
||||
this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus() |
|
||||
} |
|
||||
}, |
|
||||
close() { |
|
||||
this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur() |
|
||||
this.options = [] |
|
||||
this.show = false |
|
||||
}, |
|
||||
change(val) { |
|
||||
if (this.ishttp(val.path)) { |
|
||||
// http(s):// 路径新窗口打开 |
|
||||
window.open(val.path, '_blank') |
|
||||
} else { |
|
||||
this.$router.push(val.path) |
|
||||
} |
|
||||
this.search = '' |
|
||||
this.options = [] |
|
||||
this.$nextTick(() => { |
|
||||
this.show = false |
|
||||
}) |
|
||||
}, |
|
||||
initFuse(list) { |
|
||||
this.fuse = new Fuse(list, { |
|
||||
shouldSort: true, |
|
||||
threshold: 0.4, |
|
||||
location: 0, |
|
||||
distance: 100, |
|
||||
maxPatternLength: 32, |
|
||||
minMatchCharLength: 1, |
|
||||
keys: [{ |
|
||||
name: 'title', |
|
||||
weight: 0.7 |
|
||||
}, { |
|
||||
name: 'path', |
|
||||
weight: 0.3 |
|
||||
}] |
|
||||
}) |
|
||||
}, |
|
||||
// Filter out the routes that can be displayed in the sidebar |
|
||||
// And generate the internationalized title |
|
||||
generateRoutes(routes, basePath = '/', prefixTitle = []) { |
|
||||
let res = [] |
|
||||
|
|
||||
for (const router of routes) { |
|
||||
// skip hidden router |
|
||||
if (router.hidden) { continue } |
|
||||
|
|
||||
const data = { |
|
||||
path: !this.ishttp(router.path) ? path.resolve(basePath, router.path) : router.path, |
|
||||
title: [...prefixTitle] |
|
||||
} |
|
||||
|
|
||||
if (router.meta && router.meta.title) { |
|
||||
data.title = [...data.title, router.meta.title] |
|
||||
|
|
||||
if (router.redirect !== 'noRedirect') { |
|
||||
// only push the routes with title |
|
||||
// special case: need to exclude parent router without redirect |
|
||||
res.push(data) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// recursive child routes |
|
||||
if (router.children) { |
|
||||
const tempRoutes = this.generateRoutes(router.children, data.path, data.title) |
|
||||
if (tempRoutes.length >= 1) { |
|
||||
res = [...res, ...tempRoutes] |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
return res |
|
||||
}, |
|
||||
querySearch(query) { |
|
||||
if (query !== '') { |
|
||||
this.options = this.fuse.search(query) |
|
||||
} else { |
|
||||
this.options = [] |
|
||||
} |
|
||||
}, |
|
||||
ishttp(url) { |
|
||||
return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1 |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.header-search { |
|
||||
font-size: 0 !important; |
|
||||
|
|
||||
.search-icon { |
|
||||
cursor: pointer; |
|
||||
font-size: 18px; |
|
||||
vertical-align: middle; |
|
||||
} |
|
||||
|
|
||||
.header-search-select { |
|
||||
font-size: 18px; |
|
||||
transition: width 0.2s; |
|
||||
width: 0; |
|
||||
overflow: hidden; |
|
||||
background: transparent; |
|
||||
border-radius: 0; |
|
||||
display: inline-block; |
|
||||
vertical-align: middle; |
|
||||
|
|
||||
::v-deep .el-input__inner { |
|
||||
border-radius: 0; |
|
||||
border: 0; |
|
||||
padding-left: 0; |
|
||||
padding-right: 0; |
|
||||
box-shadow: none !important; |
|
||||
border-bottom: 1px solid #d9d9d9; |
|
||||
vertical-align: middle; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
&.show { |
|
||||
.header-search-select { |
|
||||
width: 210px; |
|
||||
margin-left: 10px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,78 +0,0 @@ |
|||||
<template> |
|
||||
<div class="json-editor"> |
|
||||
<textarea ref="textarea" /> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import CodeMirror from 'codemirror' |
|
||||
import 'codemirror/lib/codemirror.css' |
|
||||
// 替换主题这里需修改名称 |
|
||||
import 'codemirror/theme/idea.css' |
|
||||
import 'codemirror/mode/clike/clike' |
|
||||
export default { |
|
||||
props: { |
|
||||
value: { |
|
||||
type: String, |
|
||||
required: true |
|
||||
}, |
|
||||
height: { |
|
||||
type: String, |
|
||||
required: true |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
editor: false |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
value(value) { |
|
||||
const editorValue = this.editor.getValue() |
|
||||
if (value !== editorValue) { |
|
||||
this.editor.setValue(this.value) |
|
||||
} |
|
||||
}, |
|
||||
height(value) { |
|
||||
this.editor.setSize('auto', this.height) |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.editor = CodeMirror.fromTextArea(this.$refs.textarea, { |
|
||||
mode: 'text/x-java', |
|
||||
lineNumbers: true, |
|
||||
lint: true, |
|
||||
lineWrapping: true, |
|
||||
tabSize: 2, |
|
||||
cursorHeight: 0.9, |
|
||||
// 替换主题这里需修改名称 |
|
||||
theme: 'idea', |
|
||||
readOnly: true |
|
||||
}) |
|
||||
this.editor.setSize('auto', this.height) |
|
||||
this.editor.setValue(this.value) |
|
||||
}, |
|
||||
methods: { |
|
||||
getValue() { |
|
||||
return this.editor.getValue() |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
.json-editor{ |
|
||||
height: 100%; |
|
||||
margin-bottom: 10px; |
|
||||
} |
|
||||
.json-editor >>> .CodeMirror { |
|
||||
font-size: 14px; |
|
||||
overflow-y:auto; |
|
||||
font-weight:normal |
|
||||
} |
|
||||
.json-editor >>> .CodeMirror-scroll{ |
|
||||
} |
|
||||
.json-editor >>> .cm-s-rubyblue span.cm-string { |
|
||||
color: #F08047; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,140 +0,0 @@ |
|||||
<template> |
|
||||
<div :style="{zIndex:zIndex,height:height,width:width}" class="pan-item"> |
|
||||
<div class="pan-info"> |
|
||||
<div class="pan-info-roles-container"> |
|
||||
<slot /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<img :src="image" class="pan-thumb"> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
name: 'PanThumb', |
|
||||
props: { |
|
||||
image: { |
|
||||
type: String, |
|
||||
required: true |
|
||||
}, |
|
||||
zIndex: { |
|
||||
type: Number, |
|
||||
default: 1 |
|
||||
}, |
|
||||
width: { |
|
||||
type: String, |
|
||||
default: '150px' |
|
||||
}, |
|
||||
height: { |
|
||||
type: String, |
|
||||
default: '150px' |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
.pan-item { |
|
||||
width: 200px; |
|
||||
height: 200px; |
|
||||
border-radius: 50%; |
|
||||
display: inline-block; |
|
||||
position: relative; |
|
||||
cursor: default; |
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); |
|
||||
} |
|
||||
|
|
||||
.pan-info-roles-container { |
|
||||
padding: 20px; |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.pan-thumb { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
background-size: 100%; |
|
||||
border-radius: 50%; |
|
||||
overflow: hidden; |
|
||||
position: absolute; |
|
||||
transform-origin: 95% 40%; |
|
||||
transition: all 0.3s ease-in-out; |
|
||||
} |
|
||||
|
|
||||
.pan-thumb:after { |
|
||||
content: ''; |
|
||||
width: 8px; |
|
||||
height: 8px; |
|
||||
position: absolute; |
|
||||
border-radius: 50%; |
|
||||
top: 40%; |
|
||||
left: 95%; |
|
||||
margin: -4px 0 0 -4px; |
|
||||
background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%); |
|
||||
box-shadow: 0 0 1px rgba(255, 255, 255, 0.9); |
|
||||
} |
|
||||
|
|
||||
.pan-info { |
|
||||
position: absolute; |
|
||||
width: inherit; |
|
||||
height: inherit; |
|
||||
border-radius: 50%; |
|
||||
overflow: hidden; |
|
||||
box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05); |
|
||||
} |
|
||||
|
|
||||
.pan-info h3 { |
|
||||
color: #fff; |
|
||||
text-transform: uppercase; |
|
||||
position: relative; |
|
||||
letter-spacing: 2px; |
|
||||
font-size: 18px; |
|
||||
margin: 0 60px; |
|
||||
padding: 22px 0 0 0; |
|
||||
height: 85px; |
|
||||
font-family: 'Open Sans', Arial, sans-serif; |
|
||||
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3); |
|
||||
} |
|
||||
|
|
||||
.pan-info p { |
|
||||
color: #fff; |
|
||||
padding: 10px 5px; |
|
||||
font-style: italic; |
|
||||
margin: 0 30px; |
|
||||
font-size: 12px; |
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.5); |
|
||||
} |
|
||||
|
|
||||
.pan-info p a { |
|
||||
display: block; |
|
||||
color: #333; |
|
||||
width: 80px; |
|
||||
height: 80px; |
|
||||
background: rgba(255, 255, 255, 0.3); |
|
||||
border-radius: 50%; |
|
||||
color: #fff; |
|
||||
font-style: normal; |
|
||||
font-weight: 700; |
|
||||
text-transform: uppercase; |
|
||||
font-size: 9px; |
|
||||
letter-spacing: 1px; |
|
||||
padding-top: 24px; |
|
||||
margin: 7px auto 0; |
|
||||
font-family: 'Open Sans', Arial, sans-serif; |
|
||||
opacity: 0; |
|
||||
transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s; |
|
||||
transform: translateX(60px) rotate(90deg); |
|
||||
} |
|
||||
|
|
||||
.pan-info p a:hover { |
|
||||
background: rgba(255, 255, 255, 0.5); |
|
||||
} |
|
||||
|
|
||||
.pan-item:hover .pan-thumb { |
|
||||
transform: rotate(-110deg); |
|
||||
} |
|
||||
|
|
||||
.pan-item:hover .pan-info p a { |
|
||||
opacity: 1; |
|
||||
transform: translateX(0px) rotate(0deg); |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,149 +0,0 @@ |
|||||
<template> |
|
||||
<div ref="rightPanel" :class="{show:show}" class="rightPanel-container"> |
|
||||
<div class="rightPanel-background" /> |
|
||||
<div class="rightPanel"> |
|
||||
<div class="rightPanel-items"> |
|
||||
<slot /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { addClass, removeClass } from '@/utils' |
|
||||
|
|
||||
export default { |
|
||||
name: 'RightPanel', |
|
||||
props: { |
|
||||
clickNotClose: { |
|
||||
default: false, |
|
||||
type: Boolean |
|
||||
}, |
|
||||
buttonTop: { |
|
||||
default: 250, |
|
||||
type: Number |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
show: { |
|
||||
get() { |
|
||||
return this.$store.state.settings.showSettings |
|
||||
}, |
|
||||
set(val) { |
|
||||
this.$store.dispatch('settings/changeSetting', { |
|
||||
key: 'showSettings', |
|
||||
value: val |
|
||||
}) |
|
||||
} |
|
||||
}, |
|
||||
theme() { |
|
||||
return this.$store.state.settings.theme |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
show(value) { |
|
||||
if (value && !this.clickNotClose) { |
|
||||
this.addEventClick() |
|
||||
} |
|
||||
if (value) { |
|
||||
addClass(document.body, 'showRightPanel') |
|
||||
} else { |
|
||||
removeClass(document.body, 'showRightPanel') |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.insertToBody() |
|
||||
this.addEventClick() |
|
||||
}, |
|
||||
beforeDestroy() { |
|
||||
const elx = this.$refs.rightPanel |
|
||||
elx.remove() |
|
||||
}, |
|
||||
methods: { |
|
||||
addEventClick() { |
|
||||
window.addEventListener('click', this.closeSidebar) |
|
||||
}, |
|
||||
closeSidebar(evt) { |
|
||||
const parent = evt.target.closest('.rightPanel') |
|
||||
if (!parent) { |
|
||||
this.show = false |
|
||||
window.removeEventListener('click', this.closeSidebar) |
|
||||
} |
|
||||
}, |
|
||||
insertToBody() { |
|
||||
const elx = this.$refs.rightPanel |
|
||||
const body = document.querySelector('body') |
|
||||
body.insertBefore(elx, body.firstChild) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style> |
|
||||
.showRightPanel { |
|
||||
overflow: hidden; |
|
||||
position: relative; |
|
||||
width: calc(100% - 15px); |
|
||||
} |
|
||||
</style> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.rightPanel-background { |
|
||||
position: fixed; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
opacity: 0; |
|
||||
transition: opacity .3s cubic-bezier(.7, .3, .1, 1); |
|
||||
background: rgba(0, 0, 0, .2); |
|
||||
z-index: -1; |
|
||||
} |
|
||||
|
|
||||
.rightPanel { |
|
||||
width: 100%; |
|
||||
max-width: 260px; |
|
||||
height: 100vh; |
|
||||
position: fixed; |
|
||||
top: 0; |
|
||||
right: 0; |
|
||||
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05); |
|
||||
transition: all .25s cubic-bezier(.7, .3, .1, 1); |
|
||||
transform: translate(100%); |
|
||||
background: #fff; |
|
||||
z-index: 40000; |
|
||||
} |
|
||||
|
|
||||
.show { |
|
||||
transition: all .3s cubic-bezier(.7, .3, .1, 1); |
|
||||
|
|
||||
.rightPanel-background { |
|
||||
z-index: 20000; |
|
||||
opacity: 1; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
} |
|
||||
|
|
||||
.rightPanel { |
|
||||
transform: translate(0); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.handle-button { |
|
||||
width: 48px; |
|
||||
height: 48px; |
|
||||
position: absolute; |
|
||||
left: -48px; |
|
||||
text-align: center; |
|
||||
font-size: 24px; |
|
||||
border-radius: 6px 0 0 6px !important; |
|
||||
z-index: 0; |
|
||||
pointer-events: auto; |
|
||||
cursor: pointer; |
|
||||
color: #fff; |
|
||||
line-height: 48px; |
|
||||
i { |
|
||||
font-size: 24px; |
|
||||
line-height: 48px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,60 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" /> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import screenfull from 'screenfull' |
|
||||
|
|
||||
export default { |
|
||||
name: 'Screenfull', |
|
||||
data() { |
|
||||
return { |
|
||||
isFullscreen: false |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.init() |
|
||||
}, |
|
||||
beforeDestroy() { |
|
||||
this.destroy() |
|
||||
}, |
|
||||
methods: { |
|
||||
click() { |
|
||||
if (!screenfull.enabled) { |
|
||||
this.$message({ |
|
||||
message: 'you browser can not work', |
|
||||
type: 'warning' |
|
||||
}) |
|
||||
return false |
|
||||
} |
|
||||
screenfull.toggle() |
|
||||
}, |
|
||||
change() { |
|
||||
this.isFullscreen = screenfull.isFullscreen |
|
||||
}, |
|
||||
init() { |
|
||||
if (screenfull.enabled) { |
|
||||
screenfull.on('change', this.change) |
|
||||
} |
|
||||
}, |
|
||||
destroy() { |
|
||||
if (screenfull.enabled) { |
|
||||
screenfull.off('change', this.change) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
.screenfull-svg { |
|
||||
display: inline-block; |
|
||||
cursor: pointer; |
|
||||
fill: #5a5e66;; |
|
||||
width: 20px; |
|
||||
height: 20px; |
|
||||
vertical-align: 10px; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,57 +0,0 @@ |
|||||
<template> |
|
||||
<el-dropdown trigger="click" @command="handleSetSize"> |
|
||||
<div> |
|
||||
<svg-icon class-name="size-icon" icon-class="size" /> |
|
||||
</div> |
|
||||
<el-dropdown-menu slot="dropdown"> |
|
||||
<el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value"> |
|
||||
{{ |
|
||||
item.label }} |
|
||||
</el-dropdown-item> |
|
||||
</el-dropdown-menu> |
|
||||
</el-dropdown> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
sizeOptions: [ |
|
||||
{ label: 'Default', value: 'default' }, |
|
||||
{ label: 'Medium', value: 'medium' }, |
|
||||
{ label: 'Small', value: 'small' }, |
|
||||
{ label: 'Mini', value: 'mini' } |
|
||||
] |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
size() { |
|
||||
return this.$store.getters.size |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
handleSetSize(size) { |
|
||||
this.$ELEMENT.size = size |
|
||||
this.$store.dispatch('app/setSize', size) |
|
||||
this.refreshView() |
|
||||
this.$message({ |
|
||||
message: '布局设置成功', |
|
||||
type: 'success' |
|
||||
}) |
|
||||
}, |
|
||||
refreshView() { |
|
||||
// In order to make the cached page re-rendered |
|
||||
this.$store.dispatch('tagsView/delAllCachedViews', this.$route) |
|
||||
|
|
||||
const { fullPath } = this.$route |
|
||||
|
|
||||
this.$nextTick(() => { |
|
||||
this.$router.replace({ |
|
||||
path: '/redirect' + fullPath |
|
||||
}) |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
</script> |
|
||||
@ -1,138 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick"> |
|
||||
<div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover"> |
|
||||
拖拽excel文件到此处 或者 |
|
||||
<el-button :loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload"> |
|
||||
浏览 |
|
||||
</el-button> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import XLSX from 'xlsx' |
|
||||
|
|
||||
export default { |
|
||||
props: { |
|
||||
beforeUpload: Function, // eslint-disable-line |
|
||||
onSuccess: Function// eslint-disable-line |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
loading: false, |
|
||||
excelData: { |
|
||||
header: null, |
|
||||
results: null |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
generateData({ header, results }) { |
|
||||
this.excelData.header = header |
|
||||
this.excelData.results = results |
|
||||
this.onSuccess && this.onSuccess(this.excelData) |
|
||||
}, |
|
||||
handleDrop(e) { |
|
||||
e.stopPropagation() |
|
||||
e.preventDefault() |
|
||||
if (this.loading) return |
|
||||
const files = e.dataTransfer.files |
|
||||
if (files.length !== 1) { |
|
||||
this.$message.error('只支持单个文件上传!') |
|
||||
return |
|
||||
} |
|
||||
const rawFile = files[0] |
|
||||
|
|
||||
if (!this.isExcel(rawFile)) { |
|
||||
this.$message.error('只支持.xlsx, .xls, .csv 格式文件') |
|
||||
return false |
|
||||
} |
|
||||
this.upload(rawFile) |
|
||||
e.stopPropagation() |
|
||||
e.preventDefault() |
|
||||
}, |
|
||||
handleDragover(e) { |
|
||||
e.stopPropagation() |
|
||||
e.preventDefault() |
|
||||
e.dataTransfer.dropEffect = 'copy' |
|
||||
}, |
|
||||
handleUpload() { |
|
||||
this.$refs['excel-upload-input'].click() |
|
||||
}, |
|
||||
handleClick(e) { |
|
||||
const files = e.target.files |
|
||||
const rawFile = files[0] // only use files[0] |
|
||||
if (!rawFile) return |
|
||||
this.upload(rawFile) |
|
||||
}, |
|
||||
upload(rawFile) { |
|
||||
this.$refs['excel-upload-input'].value = null // fix can't select the same excel |
|
||||
|
|
||||
if (!this.beforeUpload) { |
|
||||
this.readerData(rawFile) |
|
||||
return |
|
||||
} |
|
||||
const before = this.beforeUpload(rawFile) |
|
||||
if (before) { |
|
||||
this.readerData(rawFile) |
|
||||
} |
|
||||
}, |
|
||||
readerData(rawFile) { |
|
||||
this.loading = true |
|
||||
return new Promise((resolve, reject) => { |
|
||||
const reader = new FileReader() |
|
||||
reader.onload = e => { |
|
||||
const data = e.target.result |
|
||||
const workbook = XLSX.read(data, { type: 'array' }) |
|
||||
const firstSheetName = workbook.SheetNames[0] |
|
||||
const worksheet = workbook.Sheets[firstSheetName] |
|
||||
const header = this.getHeaderRow(worksheet) |
|
||||
const results = XLSX.utils.sheet_to_json(worksheet) |
|
||||
this.generateData({ header, results }) |
|
||||
this.loading = false |
|
||||
resolve() |
|
||||
} |
|
||||
reader.readAsArrayBuffer(rawFile) |
|
||||
}) |
|
||||
}, |
|
||||
getHeaderRow(sheet) { |
|
||||
const headers = [] |
|
||||
const range = XLSX.utils.decode_range(sheet['!ref']) |
|
||||
let C |
|
||||
const R = range.s.r |
|
||||
/* start in the first row */ |
|
||||
for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */ |
|
||||
const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] |
|
||||
/* find the cell in the first row */ |
|
||||
let hdr = 'UNKNOWN ' + C // <-- replace with your desired default |
|
||||
if (cell && cell.t) hdr = XLSX.utils.format_cell(cell) |
|
||||
headers.push(hdr) |
|
||||
} |
|
||||
return headers |
|
||||
}, |
|
||||
isExcel(file) { |
|
||||
return /\.(xlsx|xls|csv)$/.test(file.name) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
.excel-upload-input{ |
|
||||
display: none; |
|
||||
z-index: -9999; |
|
||||
} |
|
||||
.drop{ |
|
||||
border: 2px dashed #bbb; |
|
||||
width: 600px; |
|
||||
height: 160px; |
|
||||
line-height: 160px; |
|
||||
margin: 0 auto; |
|
||||
font-size: 24px; |
|
||||
border-radius: 5px; |
|
||||
text-align: center; |
|
||||
color: #bbb; |
|
||||
position: relative; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,81 +0,0 @@ |
|||||
<template> |
|
||||
<div class="json-editor"> |
|
||||
<textarea ref="textarea" /> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import CodeMirror from 'codemirror' |
|
||||
import 'codemirror/lib/codemirror.css' |
|
||||
// 替换主题这里需修改名称 |
|
||||
import 'codemirror/theme/idea.css' |
|
||||
import 'codemirror/mode/yaml/yaml' |
|
||||
export default { |
|
||||
props: { |
|
||||
value: { |
|
||||
type: String, |
|
||||
required: true |
|
||||
}, |
|
||||
height: { |
|
||||
type: String, |
|
||||
required: true |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
editor: false |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
value(value) { |
|
||||
const editorValue = this.editor.getValue() |
|
||||
if (value !== editorValue) { |
|
||||
this.editor.setValue(this.value) |
|
||||
} |
|
||||
}, |
|
||||
height(value) { |
|
||||
this.editor.setSize('auto', this.height) |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.editor = CodeMirror.fromTextArea(this.$refs.textarea, { |
|
||||
mode: 'text/x-yaml', |
|
||||
lineNumbers: true, |
|
||||
lint: true, |
|
||||
lineWrapping: true, |
|
||||
tabSize: 2, |
|
||||
cursorHeight: 0.9, |
|
||||
// 替换主题这里需修改名称 |
|
||||
theme: 'idea' |
|
||||
}) |
|
||||
this.editor.setSize('auto', this.height) |
|
||||
this.editor.setValue(this.value) |
|
||||
this.editor.on('change', cm => { |
|
||||
this.$emit('changed', cm.getValue()) |
|
||||
this.$emit('input', cm.getValue()) |
|
||||
}) |
|
||||
}, |
|
||||
methods: { |
|
||||
getValue() { |
|
||||
return this.editor.getValue() |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
.json-editor{ |
|
||||
height: 100%; |
|
||||
margin-bottom: 10px; |
|
||||
} |
|
||||
.json-editor >>> .CodeMirror { |
|
||||
font-size: 13px; |
|
||||
overflow-y:auto; |
|
||||
font-weight:normal |
|
||||
} |
|
||||
.json-editor >>> .CodeMirror-scroll{ |
|
||||
} |
|
||||
.json-editor >>> .cm-s-rubyblue span.cm-string { |
|
||||
color: #F08047; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,124 +0,0 @@ |
|||||
<template> |
|
||||
<div class="dashboard-container"> |
|
||||
<div class="dashboard-editor-container"> |
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;"> |
|
||||
<heat-map /> |
|
||||
</el-row> |
|
||||
<el-row :gutter="32"> |
|
||||
<el-col :xs="24" :sm="24" :lg="8"> |
|
||||
<div class="chart-wrapper"> |
|
||||
<radar-chart /> |
|
||||
</div> |
|
||||
</el-col> |
|
||||
<el-col :xs="24" :sm="24" :lg="8"> |
|
||||
<div class="chart-wrapper"> |
|
||||
<sunburst /> |
|
||||
</div> |
|
||||
</el-col> |
|
||||
<el-col :xs="24" :sm="24" :lg="8"> |
|
||||
<div class="chart-wrapper"> |
|
||||
<gauge /> |
|
||||
</div> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
<el-row :gutter="12"> |
|
||||
<el-col :span="12"> |
|
||||
<div class="chart-wrapper"> |
|
||||
<rich /> |
|
||||
</div> |
|
||||
</el-col> |
|
||||
<el-col :span="12"> |
|
||||
<div class="chart-wrapper"> |
|
||||
<theme-river /> |
|
||||
</div> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
<el-row :gutter="32"> |
|
||||
<el-col :xs="24" :sm="24" :lg="8"> |
|
||||
<div class="chart-wrapper"> |
|
||||
<graph /> |
|
||||
</div> |
|
||||
</el-col> |
|
||||
<el-col :xs="24" :sm="24" :lg="8"> |
|
||||
<div class="chart-wrapper"> |
|
||||
<sankey /> |
|
||||
</div> |
|
||||
</el-col> |
|
||||
<el-col :xs="24" :sm="24" :lg="8"> |
|
||||
<div class="chart-wrapper"> |
|
||||
<line3-d /> |
|
||||
</div> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
<el-row :gutter="12"> |
|
||||
<el-col :span="12"> |
|
||||
<div class="chart-wrapper"> |
|
||||
<scatter /> |
|
||||
</div> |
|
||||
</el-col> |
|
||||
<el-col :span="12"> |
|
||||
<div class="chart-wrapper"> |
|
||||
<point /> |
|
||||
</div> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;"> |
|
||||
<div class="chart-wrapper"> |
|
||||
<word-cloud /> |
|
||||
</div> |
|
||||
</el-row> |
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;"> |
|
||||
<div class="chart-wrapper"> |
|
||||
<category /> |
|
||||
</div> |
|
||||
</el-row> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import RadarChart from '@/components/Echarts/RadarChart' |
|
||||
import HeatMap from '@/components/Echarts/HeatMap' |
|
||||
import Gauge from '@/components/Echarts/Gauge' |
|
||||
import Rich from '@/components/Echarts/Rich' |
|
||||
import ThemeRiver from '@/components/Echarts/ThemeRiver' |
|
||||
import Sunburst from '@/components/Echarts/Sunburst' |
|
||||
import Graph from '@/components/Echarts/Graph' |
|
||||
import Sankey from '@/components/Echarts/Sankey' |
|
||||
import Scatter from '@/components/Echarts/Scatter' |
|
||||
import Line3D from '@/components/Echarts/Line3D' |
|
||||
import Category from '@/components/Echarts/Category' |
|
||||
import Point from '@/components/Echarts/Point' |
|
||||
import WordCloud from '@/components/Echarts/WordCloud' |
|
||||
|
|
||||
export default { |
|
||||
name: 'Echarts', |
|
||||
components: { |
|
||||
Point, |
|
||||
Category, |
|
||||
Graph, |
|
||||
HeatMap, |
|
||||
RadarChart, |
|
||||
Sunburst, |
|
||||
Gauge, |
|
||||
Rich, |
|
||||
ThemeRiver, |
|
||||
Sankey, |
|
||||
Line3D, |
|
||||
Scatter, |
|
||||
WordCloud |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style rel="stylesheet/scss" lang="scss" scoped> |
|
||||
.dashboard-editor-container { |
|
||||
padding: 18px 22px 22px 22px; |
|
||||
background-color: rgb(240, 242, 245); |
|
||||
.chart-wrapper { |
|
||||
background: #fff; |
|
||||
padding: 16px 16px 0; |
|
||||
margin-bottom: 32px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,353 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<el-dialog class="detail-dialog" :title="detailTitle" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="archivesInfoVisible" :before-close="handleClose"> |
|
||||
<div class="setting-dialog"> |
|
||||
<div class="detail-tab tab-content"> |
|
||||
<!-- tab --> |
|
||||
<ul class="tab-nav"> |
|
||||
<li :class="{'active-tab-nav': archivesTabIndex == 0}" @click="changeActiveTab(0)">基本信息</li> |
|
||||
<li :class="{'active-tab-nav': archivesTabIndex == 1}" @click="changeActiveTab(1)">文件列表</li> |
|
||||
<!-- <li v-if="isHasFile" :class="{'active-tab-nav': archivesTabIndex == 2}" @click="changeActiveTab(2)">附件</li> --> |
|
||||
<li :class="{'active-tab-nav': archivesTabIndex == 2}" @click="changeActiveTab(2)">元数据</li> |
|
||||
</ul> |
|
||||
<!-- 基本信息 --> |
|
||||
<div v-if="archivesTabIndex==0" class="base-info item-content"> |
|
||||
<el-row> |
|
||||
<el-col v-for="(item,index) in archivesDetailsData" v-show="index<archivesDetailsData.length-5" :key="index" :span="item.isLine ? 24 : 12" class="base-info-item"> |
|
||||
<span>{{ item.fieldCnName }}：</span> |
|
||||
<p :style="{ width: ( item.editLength ? item.editLength+'px' : '' ), flex: ( !item.editLength ? 1 : '' )}">{{ item.context }}</p> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
<el-row v-if="isDetailsInfo"> |
|
||||
<el-col v-for="(item,index) in archivesDetailsData.slice(archivesDetailsData.length-5,archivesDetailsData.length)" :key="'last'+index" :span=" 12" class="base-info-item"> |
|
||||
<span>{{ item.fieldCnName }}：</span> |
|
||||
<div v-if="item.fieldName === 'folder_location' && item.context" :style="{ width: item.editLength+'px', marginTop:'-6px'}"> |
|
||||
<div v-if="item.context.indexOf(',')"> |
|
||||
<el-tag |
|
||||
v-for="(val,key) in item.context.split(',')" |
|
||||
:key="key" |
|
||||
:type="val" |
|
||||
effect="dark" |
|
||||
> |
|
||||
{{ val }} |
|
||||
</el-tag> |
|
||||
</div> |
|
||||
<div v-else-if="!item.context.indexOf(',')"> |
|
||||
<el-tag effect="dark">{{ item.context }}</el-tag> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-else :style="{ width: item.editLength+'px'}" :class="[ (item.fieldName === 'borrow_type') ? 'row-state row-lending' : '' ]"> |
|
||||
{{ item.context }} |
|
||||
</div> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
</div> |
|
||||
<!-- 附件 --> |
|
||||
<!-- <UploadFile v-if="archivesTabIndex==1" ref="uploadFile" class="item-content" :is-upload-detail="false" :category-id="categoryId" :arc-id="arcId" /> --> |
|
||||
<!-- <ArchivesList v-if="archivesTabIndex==1" ref="dialogList" class="item-content" :is-upload-detail="false" :category-id="categoryId" :arc-id="arcId" /> --> |
|
||||
<div v-if="archivesTabIndex==1"> |
|
||||
<el-table |
|
||||
ref="table" |
|
||||
:data="tableData" |
|
||||
style="min-width: 100%" |
|
||||
height="500" |
|
||||
@row-click="clickRowHandler" |
|
||||
@cell-dblclick="tableDoubleClick" |
|
||||
@selection-change="selectionChangeHandler" |
|
||||
> |
|
||||
<el-table-column type="index" label="序号" width="55" align="center" /> |
|
||||
<el-table-column prop="isType" label="所属表" align="center" /> |
|
||||
<el-table-column prop="group" label="所属全宗" min-width="60" align="center" /> |
|
||||
<el-table-column prop="category" label="门类名称" min-width="85" align="center" /> |
|
||||
<el-table-column prop="number" label="档号" min-width="85" align="center" /> |
|
||||
<el-table-column prop="title" label="题名" show-overflow-tooltip min-width="140" align="center" /> |
|
||||
</el-table> |
|
||||
<!-- @size-change="sizeChangeHandler($event)" @current-change="pageChangeHandler" --> |
|
||||
<el-pagination :page-size.sync="page.size" :total="page.total" :current-page.sync="page.page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" /> |
|
||||
</div> |
|
||||
<!-- 元数据 --> |
|
||||
<div v-if="archivesTabIndex==2" class="metadata-cont item-content"> |
|
||||
<pre v-highlightjs="xml_show"> |
|
||||
<code class="highlight_s"> |
|
||||
{[xml_show]} |
|
||||
</code> |
|
||||
</pre> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div slot="footer" class="dialog-footer"> |
|
||||
<el-button type="primary" @click="archivesInfoVisible=false">确定</el-button> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-dialog> |
|
||||
<JuanneiDetail ref="juanneiDetail" /> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { form } from '@crud/crud' |
|
||||
import { FetchArchivesDetails, FetchArchivesMetadata } from '@/api/archivesManage/archivesList' |
|
||||
import JuanneiDetail from './juannei' |
|
||||
export default { |
|
||||
name: 'ArchivesInfo', |
|
||||
components: { JuanneiDetail }, |
|
||||
mixins: [ |
|
||||
form({}) |
|
||||
], |
|
||||
props: { |
|
||||
categoryId: { |
|
||||
type: String, |
|
||||
default: function() { |
|
||||
return '' |
|
||||
} |
|
||||
}, |
|
||||
arcId: { |
|
||||
type: String, |
|
||||
default: function() { |
|
||||
return '' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
detailTitle: '', |
|
||||
isHasFile: false, // 卷内/文件才有附件 |
|
||||
isDetailsInfo: false, // 项目不显示最下面5行基本信息 |
|
||||
isTidOrBorrow: true, // 卷内不显示tid/借阅状态 |
|
||||
archivesInfoVisible: false, |
|
||||
archivesTabIndex: 0, |
|
||||
archivesDetailsData: [], |
|
||||
archivesDetailsMetadata: [], |
|
||||
xml_show: null, |
|
||||
page: { |
|
||||
total: 0, |
|
||||
size: 10, |
|
||||
page: 1 |
|
||||
}, |
|
||||
tableData: [ |
|
||||
{ |
|
||||
isType: '卷案表', |
|
||||
group: ' 全宗A', |
|
||||
category: '文书档案（案卷）', |
|
||||
number: 'DAS-Y-2020-001', |
|
||||
title: '人事劳资文件级文书档案人事' |
|
||||
}, { |
|
||||
isType: '卷案表', |
|
||||
group: ' 全宗A', |
|
||||
category: '文书档案（案卷）', |
|
||||
number: 'DAS-Y-2020-001', |
|
||||
title: '人事劳资文件级文书档案人事' |
|
||||
}, { |
|
||||
isType: '卷案表', |
|
||||
group: ' 全宗A', |
|
||||
category: '文书档案（案卷）', |
|
||||
number: 'DAS-Y-2020-001', |
|
||||
title: '人事劳资文件级文书档案人事' |
|
||||
}, { |
|
||||
isType: '卷案表', |
|
||||
group: ' 全宗A', |
|
||||
category: '文书档案（案卷）', |
|
||||
number: 'DAS-Y-2020-001', |
|
||||
title: '人事劳资文件级文书档案人事' |
|
||||
} |
|
||||
], // list |
|
||||
selections: [] // table - 选中的 |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
}, |
|
||||
methods: { |
|
||||
getDetial(rowId) { |
|
||||
const params = { |
|
||||
// categoryId: this.categoryId, |
|
||||
categoryId: 'B073E8430B85B4821E7360', |
|
||||
// archivesId: rowId |
|
||||
archivesId: '2946C34412182B73FBC287' |
|
||||
} |
|
||||
FetchArchivesDetails(params).then(data => { |
|
||||
this.archivesDetailsData = data |
|
||||
// 案卷 / 文件的借阅状态 |
|
||||
this.archivesDetailsData.forEach(item => { |
|
||||
if (item.fieldName === 'borrow_type') { |
|
||||
if (item.context === 1) { |
|
||||
item.context = '待登记' |
|
||||
} else if (item.context === 2) { |
|
||||
item.context = '待借阅' |
|
||||
} else if (item.context === 3) { |
|
||||
item.context = '待归还' |
|
||||
} else if (item.context === 4 || item.context === '' || item.context === null) { |
|
||||
item.context = '-' |
|
||||
} else if (item.context === -1) { |
|
||||
item.context = '在库' |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
// 如果是卷内 - 不显示‘tid’/'借阅状态' |
|
||||
if (!this.isTidOrBorrow) { |
|
||||
const indexBorrow = this.archivesDetailsData.findIndex(item => item.fieldName === 'borrow_type') |
|
||||
const indexTid = this.archivesDetailsData.findIndex(item => item.fieldName === 'tid') |
|
||||
this.archivesDetailsData.splice(indexBorrow, 1) |
|
||||
this.archivesDetailsData.splice(indexTid, 1) |
|
||||
} |
|
||||
}) |
|
||||
FetchArchivesMetadata(params).then(data => { |
|
||||
this.archivesDetailsMetadata = data |
|
||||
}) |
|
||||
}, |
|
||||
setXml() { |
|
||||
const xmlstr = this.archivesDetailsMetadata |
|
||||
// console.log('xmlstr:', xmlstr) |
|
||||
// console.log('xml转json:', this.$x2js.xml2js(xmlstr)) |
|
||||
// console.log('json转xml:', this.$x2js.js2xml(this.$x2js.xml2js(xmlstr))) |
|
||||
// this.xml_show = vkbeautify.xml(xmlstr) |
|
||||
this.xml_show = this.showXml(xmlstr) |
|
||||
}, |
|
||||
changeActiveTab(index) { |
|
||||
this.archivesTabIndex = index |
|
||||
if (this.archivesTabIndex === 2) { |
|
||||
this.setXml() |
|
||||
} |
|
||||
this.$nextTick(() => { |
|
||||
if (this.$refs.uploadFile) { |
|
||||
this.$refs.uploadFile.tableData = [] |
|
||||
this.$refs.uploadFile.getFileList() |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
// 删除 - 关闭 |
|
||||
handleClose(done) { |
|
||||
this.archivesInfoVisible = false |
|
||||
done() |
|
||||
}, |
|
||||
// xml格式化 |
|
||||
showXml(str) { |
|
||||
var that = this |
|
||||
var text = str |
|
||||
// 去掉多余的空格 |
|
||||
text = |
|
||||
'\n' + |
|
||||
text |
|
||||
.replace(/(<\w+)(\s.*?>)/g, function($0, name, props) { |
|
||||
return name + ' ' + props.replace(/\s+(\w+=)/g, ' $1') |
|
||||
}) |
|
||||
.replace(/>\s*?</g, '>\n<') |
|
||||
// 把注释编码 |
|
||||
text = text |
|
||||
.replace(/\n/g, '\r') |
|
||||
.replace(/<!--(.+?)-->/g, function($0, text) { |
|
||||
var ret = '<!--' + escape(text) + '-->' |
|
||||
return ret |
|
||||
}) |
|
||||
.replace(/\r/g, '\n') |
|
||||
|
|
||||
// 调整格式 |
|
||||
var rgx = /\n(<(([^\?]).+?)(?:\s|\s*?>|\s*?(\/)>)(?:.*?(?:(?:(\/)>)|(?:<(\/)\2>)))?)/gm |
|
||||
var nodeStack = [] |
|
||||
var output = text.replace(rgx, function( |
|
||||
$0, |
|
||||
all, |
|
||||
name, |
|
||||
isBegin, |
|
||||
isCloseFull1, |
|
||||
isCloseFull2, |
|
||||
isFull1, |
|
||||
isFull2 |
|
||||
) { |
|
||||
var isClosed = |
|
||||
isCloseFull1 === '/' || |
|
||||
isCloseFull2 === '/' || |
|
||||
isFull1 === '/' || |
|
||||
isFull2 === '/' |
|
||||
var prefix = '' |
|
||||
if (isBegin === '!') { |
|
||||
prefix = that.getPrefix(nodeStack.length) |
|
||||
} else { |
|
||||
if (isBegin !== '/') { |
|
||||
prefix = that.getPrefix(nodeStack.length) |
|
||||
if (!isClosed) { |
|
||||
nodeStack.push(name) |
|
||||
} |
|
||||
} else { |
|
||||
nodeStack.pop() |
|
||||
prefix = that.getPrefix(nodeStack.length) |
|
||||
} |
|
||||
} |
|
||||
var ret = '\n' + prefix + all |
|
||||
return ret |
|
||||
}) |
|
||||
var outputText = output.substring(1) |
|
||||
// 把注释还原并解码，调格式 |
|
||||
outputText = outputText |
|
||||
.replace(/\n/g, '\r') |
|
||||
.replace(/(\s*)<!--(.+?)-->/g, function($0, prefix, text) { |
|
||||
if (prefix.charAt(0) === '\r') prefix = prefix.substring(1) |
|
||||
text = unescape(text).replace(/\r/g, '\n') |
|
||||
var ret = |
|
||||
'\n' + prefix + '<!--' + text.replace(/^\s*/gm, prefix) + '-->' |
|
||||
return ret |
|
||||
}) |
|
||||
outputText = outputText.replace(/\s+$/g, '').replace(/\r/g, '\r\n') |
|
||||
return outputText |
|
||||
}, |
|
||||
getPrefix(prefixIndex) { |
|
||||
var span = ' ' |
|
||||
var output = [] |
|
||||
for (var i = 0; i < prefixIndex; ++i) { |
|
||||
output.push(span) |
|
||||
} |
|
||||
return output.join('') |
|
||||
}, |
|
||||
// table |
|
||||
clickRowHandler(row) { |
|
||||
this.$refs.table.toggleRowSelection(row) |
|
||||
}, |
|
||||
// table |
|
||||
selectionChangeHandler(val) { |
|
||||
this.selections = val |
|
||||
}, |
|
||||
// table - 双击查看详情 |
|
||||
tableDoubleClick(row) { |
|
||||
this.$refs.juanneiDetail.archivesInfoVisible = true |
|
||||
this.$refs.juanneiDetail.getDetial() |
|
||||
this.$refs.juanneiDetail.detailTitle = '文件详情' |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.base-info, |
|
||||
.metadata-cont{ |
|
||||
background-color: #F6F8FC; |
|
||||
} |
|
||||
|
|
||||
// .metadata-cont{ |
|
||||
// overflow: hidden; |
|
||||
// overflow-y: scroll; |
|
||||
// } |
|
||||
|
|
||||
// 档案详情 |
|
||||
.base-info{ |
|
||||
padding: 20px 0; |
|
||||
.base-info-item{ |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
margin-bottom: 20px; |
|
||||
color: #545B65; |
|
||||
span{ |
|
||||
display: block; |
|
||||
width: 120px; |
|
||||
margin-right: 5px; |
|
||||
text-align: right; |
|
||||
color: #0C0E1E; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
code.hljs { |
|
||||
color: #0C0E1E !important; |
|
||||
height: 530px !important; |
|
||||
} |
|
||||
::v-deep .hljs-name{ |
|
||||
color: #0C0E1E !important; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,275 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog class="detail-dialog" :title="detailTitle" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="archivesInfoVisible" :before-close="handleClose"> |
|
||||
<!-- <span class="dialog-right-top" /> |
|
||||
<span class="dialog-left-bottom" /> --> |
|
||||
<div class="setting-dialog"> |
|
||||
<div class="detail-tab tab-content"> |
|
||||
<!-- tab --> |
|
||||
<ul class="tab-nav"> |
|
||||
<li :class="{'active-tab-nav': archivesTabIndex == 0}" @click="changeActiveTab(0)">基本信息</li> |
|
||||
<li v-if="isHasFile" :class="{'active-tab-nav': archivesTabIndex == 1}" @click="changeActiveTab(1)">原文列表</li> |
|
||||
<li v-if="!isHasFile && isTitleType === 3" :class="{'active-tab-nav': archivesTabIndex == 5}" @click="changeActiveTab(5)">文件列表</li> |
|
||||
<li v-if="!isHasFile && isTitleType === 2" :class="{'active-tab-nav': archivesTabIndex == 5}" @click="changeActiveTab(5)">案卷列表</li> |
|
||||
<li :class="{'active-tab-nav': archivesTabIndex == 2}" @click="changeActiveTab(2)">元数据</li> |
|
||||
<li v-if="isFourTest" :class="{'active-tab-nav': archivesTabIndex == 3}" @click="changeActiveTab(3)">四性检测</li> |
|
||||
<li v-if="isFourTest && isHasFile" :class="{'active-tab-nav': archivesTabIndex == 4}" @click="changeActiveTab(4)">操作记录</li> |
|
||||
</ul> |
|
||||
<!-- 基本信息 --> |
|
||||
<div v-if="archivesTabIndex==0" class="base-info item-content"> |
|
||||
<el-row> |
|
||||
<el-col v-for="(item,index) in archivesDetailsData" :key="index" :span="item.isLine ? 24 : 12" class="base-info-item"> |
|
||||
<span>{{ item.fieldCnName }}：</span> |
|
||||
<p :style="{ width: ( item.editLength ? item.editLength+'px' : '' ), flex: ( !item.editLength ? 1 : '' )}">{{ item.context }}</p> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
</div> |
|
||||
<!-- 附件 --> |
|
||||
<UploadFile v-if="archivesTabIndex==1" ref="uploadFile" class="item-content" :is-upload-detail="false" :selected-category="selectedCategory" :arc-id="arcId" /> |
|
||||
<!-- 元数据 --> |
|
||||
<div v-if="archivesTabIndex==2" class="metadata-cont item-content"> |
|
||||
<pre v-highlightjs="xml_show"> |
|
||||
<code class="highlight_s"> |
|
||||
{[xml_show]} |
|
||||
</code> |
|
||||
</pre> |
|
||||
</div> |
|
||||
<FourTestInfo v-if="archivesTabIndex===3" /> |
|
||||
<HandleInfo v-if="archivesTabIndex===4" /> |
|
||||
<ArchivesListModule v-show="archivesTabIndex===5" ref="archivesListModuleRef" :selected-category="selectedCategory" :is-title-type="isTitleType" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { form } from '@crud/crud' |
|
||||
import { FetchDetailsById, FetchArchivesMetadata } from '@/api/collect/collect' |
|
||||
import UploadFile from '../uploadFile/index' |
|
||||
import FourTestInfo from '../fourTestInfo/index' |
|
||||
import HandleInfo from '../handleInfo/index' |
|
||||
export default { |
|
||||
name: 'ArchivesInfo', |
|
||||
components: { UploadFile, FourTestInfo, HandleInfo }, |
|
||||
mixins: [ |
|
||||
form({}) |
|
||||
], |
|
||||
props: { |
|
||||
selectedCategory: { |
|
||||
type: Object, |
|
||||
default: function() { |
|
||||
return {} |
|
||||
} |
|
||||
}, |
|
||||
arcId: { |
|
||||
type: String, |
|
||||
default: function() { |
|
||||
return '' |
|
||||
} |
|
||||
}, |
|
||||
isTitleType: { |
|
||||
type: Number, |
|
||||
default: 2 |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
detailTitle: '', |
|
||||
isHasFile: false, // 卷内/文件才有附件 |
|
||||
isFourTest: false, |
|
||||
isDetailsInfo: false, // 项目不显示最下面5行基本信息 |
|
||||
archivesInfoVisible: false, |
|
||||
archivesTabIndex: 0, |
|
||||
archivesDetailsData: [], |
|
||||
archivesDetailsMetadata: [], |
|
||||
xml_show: null |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
}, |
|
||||
mounted() { |
|
||||
}, |
|
||||
methods: { |
|
||||
getDetial(collectLevel, rowId) { |
|
||||
const params = { |
|
||||
'categoryId': this.selectedCategory.id, |
|
||||
'categoryLevel': collectLevel, |
|
||||
'id': rowId |
|
||||
} |
|
||||
FetchDetailsById(params).then(data => { |
|
||||
this.archivesDetailsData = data.showFiled |
|
||||
.filter(field => field.fieldName in data.echo) |
|
||||
.map(field => ({ |
|
||||
editLength: field.editLength, |
|
||||
isLine: field.isLine, |
|
||||
fieldCnName: field.fieldCnName, |
|
||||
fieldName: field.fieldName, |
|
||||
context: data.echo[field.fieldName] |
|
||||
})) |
|
||||
}) |
|
||||
const metaDataParams = { |
|
||||
'categoryId': this.selectedCategory.id, |
|
||||
'categoryLevel': collectLevel, |
|
||||
'archivesId': rowId |
|
||||
} |
|
||||
FetchArchivesMetadata(metaDataParams).then(data => { |
|
||||
this.archivesDetailsMetadata = data |
|
||||
}) |
|
||||
}, |
|
||||
setXml() { |
|
||||
const xmlstr = this.archivesDetailsMetadata |
|
||||
this.xml_show = this.showXml(xmlstr) |
|
||||
}, |
|
||||
changeActiveTab(index) { |
|
||||
this.archivesTabIndex = index |
|
||||
if (this.archivesTabIndex === 2) { |
|
||||
this.setXml() |
|
||||
} else if (this.archivesTabIndex === 5) { |
|
||||
if (this.isTitleType === 2) { |
|
||||
this.$refs.archivesListModuleRef.detailLevel = 2 |
|
||||
} else if (this.isTitleType === 3) { |
|
||||
this.$refs.archivesListModuleRef.detailLevel = 3 |
|
||||
} else { |
|
||||
this.$refs.archivesListModuleRef.detailLevel = 4 |
|
||||
} |
|
||||
this.$refs.archivesListModuleRef.parentId = this.arcId |
|
||||
this.$refs.archivesListModuleRef.isDetail = true |
|
||||
this.$refs.archivesListModuleRef.getViewTable() |
|
||||
} |
|
||||
this.$nextTick(() => { |
|
||||
if (this.$refs.uploadFile) { |
|
||||
this.$refs.uploadFile.tableData = [] |
|
||||
this.$refs.uploadFile.getFileList() |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
// 删除 - 关闭 |
|
||||
handleClose(done) { |
|
||||
this.archivesInfoVisible = false |
|
||||
localStorage.removeItem('collectLevelList') |
|
||||
done() |
|
||||
}, |
|
||||
// xml格式化 |
|
||||
showXml(str) { |
|
||||
var that = this |
|
||||
var text = str |
|
||||
// 去掉多余的空格 |
|
||||
text = |
|
||||
'\n' + |
|
||||
text |
|
||||
.replace(/(<\w+)(\s.*?>)/g, function($0, name, props) { |
|
||||
return name + ' ' + props.replace(/\s+(\w+=)/g, ' $1') |
|
||||
}) |
|
||||
.replace(/>\s*?</g, '>\n<') |
|
||||
// 把注释编码 |
|
||||
text = text |
|
||||
.replace(/\n/g, '\r') |
|
||||
.replace(/<!--(.+?)-->/g, function($0, text) { |
|
||||
var ret = '<!--' + escape(text) + '-->' |
|
||||
return ret |
|
||||
}) |
|
||||
.replace(/\r/g, '\n') |
|
||||
|
|
||||
// 调整格式 |
|
||||
var rgx = /\n(<(([^\?]).+?)(?:\s|\s*?>|\s*?(\/)>)(?:.*?(?:(?:(\/)>)|(?:<(\/)\2>)))?)/gm |
|
||||
var nodeStack = [] |
|
||||
var output = text.replace(rgx, function( |
|
||||
$0, |
|
||||
all, |
|
||||
name, |
|
||||
isBegin, |
|
||||
isCloseFull1, |
|
||||
isCloseFull2, |
|
||||
isFull1, |
|
||||
isFull2 |
|
||||
) { |
|
||||
var isClosed = |
|
||||
isCloseFull1 === '/' || |
|
||||
isCloseFull2 === '/' || |
|
||||
isFull1 === '/' || |
|
||||
isFull2 === '/' |
|
||||
var prefix = '' |
|
||||
if (isBegin === '!') { |
|
||||
prefix = that.getPrefix(nodeStack.length) |
|
||||
} else { |
|
||||
if (isBegin !== '/') { |
|
||||
prefix = that.getPrefix(nodeStack.length) |
|
||||
if (!isClosed) { |
|
||||
nodeStack.push(name) |
|
||||
} |
|
||||
} else { |
|
||||
nodeStack.pop() |
|
||||
prefix = that.getPrefix(nodeStack.length) |
|
||||
} |
|
||||
} |
|
||||
var ret = '\n' + prefix + all |
|
||||
return ret |
|
||||
}) |
|
||||
var outputText = output.substring(1) |
|
||||
// 把注释还原并解码，调格式 |
|
||||
outputText = outputText |
|
||||
.replace(/\n/g, '\r') |
|
||||
.replace(/(\s*)<!--(.+?)-->/g, function($0, prefix, text) { |
|
||||
if (prefix.charAt(0) === '\r') prefix = prefix.substring(1) |
|
||||
text = unescape(text).replace(/\r/g, '\n') |
|
||||
var ret = |
|
||||
'\n' + prefix + '<!--' + text.replace(/^\s*/gm, prefix) + '-->' |
|
||||
return ret |
|
||||
}) |
|
||||
outputText = outputText.replace(/\s+$/g, '').replace(/\r/g, '\r\n') |
|
||||
return outputText |
|
||||
}, |
|
||||
getPrefix(prefixIndex) { |
|
||||
var span = ' ' |
|
||||
var output = [] |
|
||||
for (var i = 0; i < prefixIndex; ++i) { |
|
||||
output.push(span) |
|
||||
} |
|
||||
return output.join('') |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.base-info, |
|
||||
.metadata-cont{ |
|
||||
background-color: #F6F8FC; |
|
||||
|
|
||||
} |
|
||||
// 档案详情 |
|
||||
.base-info{ |
|
||||
padding: 20px 0; |
|
||||
overflow: hidden; |
|
||||
overflow-y: scroll; |
|
||||
.base-info-item{ |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
margin-bottom: 20px; |
|
||||
color: #545B65; |
|
||||
span{ |
|
||||
display: block; |
|
||||
width: 120px; |
|
||||
margin-right: 5px; |
|
||||
text-align: right; |
|
||||
color: #0C0E1E; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
code.hljs { |
|
||||
font-size: 12px; |
|
||||
color: #0C0E1E !important; |
|
||||
height: 530px !important; |
|
||||
} |
|
||||
::v-deep .hljs-name{ |
|
||||
color: #0C0E1E !important; |
|
||||
} |
|
||||
.base-info .base-info-item span.el-tag{ |
|
||||
width: auto; |
|
||||
color: #fff; |
|
||||
} |
|
||||
|
|
||||
.detail-tab .tab-nav{ |
|
||||
margin: 10px 0 18px 0; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,367 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog class="detail-dialog" :title="detailTitle" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="archivesInfoVisible" :before-close="handleClose"> |
|
||||
<div class="setting-dialog"> |
|
||||
<div class="detail-tab tab-content"> |
|
||||
<!-- tab --> |
|
||||
<ul class="tab-nav"> |
|
||||
<li :class="{'active-tab-nav': archivesTabIndex == 0}" @click="changeActiveTab(0)">基本信息</li> |
|
||||
<li :class="{'active-tab-nav': archivesTabIndex == 1}" @click="changeActiveTab(1)">原文列表</li> |
|
||||
<!-- <li v-if="isHasFile" :class="{'active-tab-nav': archivesTabIndex == 2}" @click="changeActiveTab(2)">附件</li> --> |
|
||||
<li :class="{'active-tab-nav': archivesTabIndex == 2}" @click="changeActiveTab(2)">元数据</li> |
|
||||
</ul> |
|
||||
<!-- 基本信息 --> |
|
||||
<div v-if="archivesTabIndex==0" class="base-info item-content"> |
|
||||
<el-row> |
|
||||
<el-col v-for="(item,index) in archivesDetailsData" v-show="index<archivesDetailsData.length-5" :key="index" :span="item.isLine ? 24 : 12" class="base-info-item"> |
|
||||
<span>{{ item.fieldCnName }}：</span> |
|
||||
<p :style="{ width: ( item.editLength ? item.editLength+'px' : '' ), flex: ( !item.editLength ? 1 : '' )}">{{ item.context }}</p> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
<el-row v-if="isDetailsInfo"> |
|
||||
<el-col v-for="(item,index) in archivesDetailsData.slice(archivesDetailsData.length-5,archivesDetailsData.length)" :key="'last'+index" :span=" 12" class="base-info-item"> |
|
||||
<span>{{ item.fieldCnName }}：</span> |
|
||||
<div v-if="item.fieldName === 'folder_location' && item.context" :style="{ width: item.editLength+'px', marginTop:'-6px'}"> |
|
||||
<div v-if="item.context.indexOf(',')"> |
|
||||
<el-tag |
|
||||
v-for="(val,key) in item.context.split(',')" |
|
||||
:key="key" |
|
||||
:type="val" |
|
||||
effect="dark" |
|
||||
> |
|
||||
{{ val }} |
|
||||
</el-tag> |
|
||||
</div> |
|
||||
<div v-else-if="!item.context.indexOf(',')"> |
|
||||
<el-tag effect="dark">{{ item.context }}</el-tag> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-else :style="{ width: item.editLength+'px'}" :class="[ (item.fieldName === 'borrow_type') ? 'row-state row-lending' : '' ]"> |
|
||||
{{ item.context }} |
|
||||
</div> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
</div> |
|
||||
<!-- 附件 --> |
|
||||
<!-- <UploadFile v-if="archivesTabIndex==1" ref="uploadFile" class="item-content" :is-upload-detail="false" :category-id="categoryId" :arc-id="arcId" /> --> |
|
||||
<!-- <ArchivesList v-if="archivesTabIndex==1" ref="dialogList" class="item-content" :is-upload-detail="false" :category-id="categoryId" :arc-id="arcId" /> --> |
|
||||
<div v-if="archivesTabIndex==1"> |
|
||||
<el-table |
|
||||
ref="table" |
|
||||
:data="tableData" |
|
||||
style="min-width: 100%" |
|
||||
height="500" |
|
||||
@row-click="clickRowHandler" |
|
||||
@selection-change="selectionChangeHandler" |
|
||||
> |
|
||||
<el-table-column type="index" label="序号" width="55" align="center" /> |
|
||||
<el-table-column prop="file_name" label="文件名称" show-overflow-tooltip min-width="140" align="center" /> |
|
||||
<el-table-column prop="file_type" label="格式" min-width="60" align="center" /> |
|
||||
<el-table-column prop="file_size" label="大小" min-width="85" align="center"> |
|
||||
<template slot-scope="scope"> |
|
||||
{{ getFileSize(scope.row.file_size) }} |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<!-- <el-table-column prop="file_dpi" label="分辨率" min-width="85" align="center"> |
|
||||
<template slot-scope="scope"> |
|
||||
<div v-if="!scope.row.file_dpi || scope.row.file_dpi === 'null'"> - </div> |
|
||||
<div v-else> {{ scope.row.file_dpi }} </div> |
|
||||
</template> |
|
||||
</el-table-column> --> |
|
||||
<el-table-column prop="file_thumbnail" label="缩略图" min-width="60" align="center"> |
|
||||
<template slot-scope="scope"> |
|
||||
<div v-if="scope.row.file_type === 'jpg' || scope.row.file_type === 'jpeg' || scope.row.file_type === 'png' || scope.row.file_type === 'bmp'|| scope.row.file_type === 'gif'"> |
|
||||
<img width="60px" height="32px" class="screenshot" :src="baseApi+ '/downloadFile' +scope.row.file_path" :onerror="defaultImg" @click="showCoverPreview(scope.row)"> |
|
||||
</div> |
|
||||
<div v-else> |
|
||||
<svg-icon icon-class="fujian" class-name="svg-style" /> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
<!-- @size-change="sizeChangeHandler($event)" @current-change="pageChangeHandler" --> |
|
||||
<el-pagination :page-size.sync="page.size" :total="page.total" :current-page.sync="page.page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" /> |
|
||||
</div> |
|
||||
<!-- 元数据 --> |
|
||||
<div v-if="archivesTabIndex==2" class="metadata-cont item-content"> |
|
||||
<pre v-highlightjs="xml_show"> |
|
||||
<code class="highlight_s"> |
|
||||
{[xml_show]} |
|
||||
</code> |
|
||||
</pre> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div slot="footer" class="dialog-footer"> |
|
||||
<el-button type="primary" @click="archivesInfoVisible=false">确定</el-button> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { form } from '@crud/crud' |
|
||||
import { FetchArchivesDetails, FetchArchivesMetadata } from '@/api/archivesManage/archivesList' |
|
||||
// import UploadFile from './uploadFile/index' |
|
||||
// import ArchivesList from './list/index' |
|
||||
export default { |
|
||||
name: 'ArchivesInfo', |
|
||||
components: { }, |
|
||||
mixins: [ |
|
||||
form({}) |
|
||||
], |
|
||||
props: { |
|
||||
categoryId: { |
|
||||
type: String, |
|
||||
default: function() { |
|
||||
return '' |
|
||||
} |
|
||||
}, |
|
||||
arcId: { |
|
||||
type: String, |
|
||||
default: function() { |
|
||||
return '' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
detailTitle: '', |
|
||||
isHasFile: false, // 卷内/文件才有附件 |
|
||||
isDetailsInfo: false, // 项目不显示最下面5行基本信息 |
|
||||
isTidOrBorrow: true, // 卷内不显示tid/借阅状态 |
|
||||
archivesInfoVisible: false, |
|
||||
archivesTabIndex: 0, |
|
||||
archivesDetailsData: [], |
|
||||
archivesDetailsMetadata: [], |
|
||||
xml_show: null, |
|
||||
page: { |
|
||||
total: 0, |
|
||||
size: 10, |
|
||||
page: 1 |
|
||||
}, |
|
||||
tableData: [ |
|
||||
{ |
|
||||
isType: '卷案表', |
|
||||
group: ' 全宗A', |
|
||||
category: '文书档案（案卷）', |
|
||||
number: 'DAS-Y-2020-001', |
|
||||
title: '人事劳资文件级文书档案人事' |
|
||||
}, { |
|
||||
isType: '卷案表', |
|
||||
group: ' 全宗A', |
|
||||
category: '文书档案（案卷）', |
|
||||
number: 'DAS-Y-2020-001', |
|
||||
title: '人事劳资文件级文书档案人事' |
|
||||
}, { |
|
||||
isType: '卷案表', |
|
||||
group: ' 全宗A', |
|
||||
category: '文书档案（案卷）', |
|
||||
number: 'DAS-Y-2020-001', |
|
||||
title: '人事劳资文件级文书档案人事' |
|
||||
}, { |
|
||||
isType: '卷案表', |
|
||||
group: ' 全宗A', |
|
||||
category: '文书档案（案卷）', |
|
||||
number: 'DAS-Y-2020-001', |
|
||||
title: '人事劳资文件级文书档案人事' |
|
||||
} |
|
||||
], // list |
|
||||
selections: [] // table - 选中的 |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
}, |
|
||||
methods: { |
|
||||
getFileSize(fileSize) { |
|
||||
const fileSizeInKB = (fileSize / 1024).toFixed(2) + 'kB' |
|
||||
const fileSizeInB = fileSize + 'B' |
|
||||
return (fileSize / 1024) <= 0.01 ? fileSizeInB : fileSizeInKB |
|
||||
}, |
|
||||
getDetial(rowId) { |
|
||||
const params = { |
|
||||
// categoryId: this.categoryId, |
|
||||
categoryId: 'B073E8430B85B4821E7360', |
|
||||
// archivesId: rowId |
|
||||
archivesId: '2946C34412182B73FBC287' |
|
||||
} |
|
||||
FetchArchivesDetails(params).then(data => { |
|
||||
this.archivesDetailsData = data |
|
||||
// 案卷 / 文件的借阅状态 |
|
||||
this.archivesDetailsData.forEach(item => { |
|
||||
if (item.fieldName === 'borrow_type') { |
|
||||
if (item.context === 1) { |
|
||||
item.context = '待登记' |
|
||||
} else if (item.context === 2) { |
|
||||
item.context = '待借阅' |
|
||||
} else if (item.context === 3) { |
|
||||
item.context = '待归还' |
|
||||
} else if (item.context === 4 || item.context === '' || item.context === null) { |
|
||||
item.context = '-' |
|
||||
} else if (item.context === -1) { |
|
||||
item.context = '在库' |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
// 如果是卷内 - 不显示‘tid’/'借阅状态' |
|
||||
if (!this.isTidOrBorrow) { |
|
||||
const indexBorrow = this.archivesDetailsData.findIndex(item => item.fieldName === 'borrow_type') |
|
||||
const indexTid = this.archivesDetailsData.findIndex(item => item.fieldName === 'tid') |
|
||||
this.archivesDetailsData.splice(indexBorrow, 1) |
|
||||
this.archivesDetailsData.splice(indexTid, 1) |
|
||||
} |
|
||||
}) |
|
||||
FetchArchivesMetadata(params).then(data => { |
|
||||
this.archivesDetailsMetadata = data |
|
||||
}) |
|
||||
}, |
|
||||
setXml() { |
|
||||
const xmlstr = this.archivesDetailsMetadata |
|
||||
// console.log('xmlstr:', xmlstr) |
|
||||
// console.log('xml转json:', this.$x2js.xml2js(xmlstr)) |
|
||||
// console.log('json转xml:', this.$x2js.js2xml(this.$x2js.xml2js(xmlstr))) |
|
||||
// this.xml_show = vkbeautify.xml(xmlstr) |
|
||||
this.xml_show = this.showXml(xmlstr) |
|
||||
}, |
|
||||
changeActiveTab(index) { |
|
||||
this.archivesTabIndex = index |
|
||||
if (this.archivesTabIndex === 2) { |
|
||||
this.setXml() |
|
||||
} |
|
||||
this.$nextTick(() => { |
|
||||
if (this.$refs.uploadFile) { |
|
||||
this.$refs.uploadFile.tableData = [] |
|
||||
this.$refs.uploadFile.getFileList() |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
// 删除 - 关闭 |
|
||||
handleClose(done) { |
|
||||
this.archivesInfoVisible = false |
|
||||
done() |
|
||||
}, |
|
||||
// xml格式化 |
|
||||
showXml(str) { |
|
||||
var that = this |
|
||||
var text = str |
|
||||
// 去掉多余的空格 |
|
||||
text = |
|
||||
'\n' + |
|
||||
text |
|
||||
.replace(/(<\w+)(\s.*?>)/g, function($0, name, props) { |
|
||||
return name + ' ' + props.replace(/\s+(\w+=)/g, ' $1') |
|
||||
}) |
|
||||
.replace(/>\s*?</g, '>\n<') |
|
||||
// 把注释编码 |
|
||||
text = text |
|
||||
.replace(/\n/g, '\r') |
|
||||
.replace(/<!--(.+?)-->/g, function($0, text) { |
|
||||
var ret = '<!--' + escape(text) + '-->' |
|
||||
return ret |
|
||||
}) |
|
||||
.replace(/\r/g, '\n') |
|
||||
|
|
||||
// 调整格式 |
|
||||
var rgx = /\n(<(([^\?]).+?)(?:\s|\s*?>|\s*?(\/)>)(?:.*?(?:(?:(\/)>)|(?:<(\/)\2>)))?)/gm |
|
||||
var nodeStack = [] |
|
||||
var output = text.replace(rgx, function( |
|
||||
$0, |
|
||||
all, |
|
||||
name, |
|
||||
isBegin, |
|
||||
isCloseFull1, |
|
||||
isCloseFull2, |
|
||||
isFull1, |
|
||||
isFull2 |
|
||||
) { |
|
||||
var isClosed = |
|
||||
isCloseFull1 === '/' || |
|
||||
isCloseFull2 === '/' || |
|
||||
isFull1 === '/' || |
|
||||
isFull2 === '/' |
|
||||
var prefix = '' |
|
||||
if (isBegin === '!') { |
|
||||
prefix = that.getPrefix(nodeStack.length) |
|
||||
} else { |
|
||||
if (isBegin !== '/') { |
|
||||
prefix = that.getPrefix(nodeStack.length) |
|
||||
if (!isClosed) { |
|
||||
nodeStack.push(name) |
|
||||
} |
|
||||
} else { |
|
||||
nodeStack.pop() |
|
||||
prefix = that.getPrefix(nodeStack.length) |
|
||||
} |
|
||||
} |
|
||||
var ret = '\n' + prefix + all |
|
||||
return ret |
|
||||
}) |
|
||||
var outputText = output.substring(1) |
|
||||
// 把注释还原并解码，调格式 |
|
||||
outputText = outputText |
|
||||
.replace(/\n/g, '\r') |
|
||||
.replace(/(\s*)<!--(.+?)-->/g, function($0, prefix, text) { |
|
||||
if (prefix.charAt(0) === '\r') prefix = prefix.substring(1) |
|
||||
text = unescape(text).replace(/\r/g, '\n') |
|
||||
var ret = |
|
||||
'\n' + prefix + '<!--' + text.replace(/^\s*/gm, prefix) + '-->' |
|
||||
return ret |
|
||||
}) |
|
||||
outputText = outputText.replace(/\s+$/g, '').replace(/\r/g, '\r\n') |
|
||||
return outputText |
|
||||
}, |
|
||||
getPrefix(prefixIndex) { |
|
||||
var span = ' ' |
|
||||
var output = [] |
|
||||
for (var i = 0; i < prefixIndex; ++i) { |
|
||||
output.push(span) |
|
||||
} |
|
||||
return output.join('') |
|
||||
}, |
|
||||
// table |
|
||||
clickRowHandler(row) { |
|
||||
this.$refs.table.toggleRowSelection(row) |
|
||||
}, |
|
||||
// table |
|
||||
selectionChangeHandler(val) { |
|
||||
this.selections = val |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.base-info, |
|
||||
.metadata-cont{ |
|
||||
background-color: #F6F8FC; |
|
||||
} |
|
||||
|
|
||||
// 档案详情 |
|
||||
.base-info{ |
|
||||
padding: 20px 0; |
|
||||
.base-info-item{ |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
margin-bottom: 20px; |
|
||||
color: #545B65; |
|
||||
span{ |
|
||||
display: block; |
|
||||
width: 120px; |
|
||||
margin-right: 5px; |
|
||||
text-align: right; |
|
||||
color: #0C0E1E; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
code.hljs { |
|
||||
color: #0C0E1E !important; |
|
||||
height: 530px !important; |
|
||||
} |
|
||||
::v-deep .hljs-name{ |
|
||||
color: #0C0E1E !important; |
|
||||
} |
|
||||
|
|
||||
.svg-style{ |
|
||||
width: 60px; |
|
||||
height: 32px; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,355 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<el-dialog class="detail-dialog" :title="detailTitle" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="archivesInfoVisible" :before-close="handleClose"> |
|
||||
<div class="setting-dialog"> |
|
||||
<div class="detail-tab tab-content"> |
|
||||
<!-- tab --> |
|
||||
<ul class="tab-nav"> |
|
||||
<li :class="{'active-tab-nav': archivesTabIndex == 0}" @click="changeActiveTab(0)">基本信息</li> |
|
||||
<li :class="{'active-tab-nav': archivesTabIndex == 1}" @click="changeActiveTab(1)">案卷列表</li> |
|
||||
<!-- <li v-if="isHasFile" :class="{'active-tab-nav': archivesTabIndex == 2}" @click="changeActiveTab(2)">附件</li> --> |
|
||||
<li :class="{'active-tab-nav': archivesTabIndex == 2}" @click="changeActiveTab(2)">元数据</li> |
|
||||
</ul> |
|
||||
<!-- 基本信息 --> |
|
||||
<div v-if="archivesTabIndex==0" class="base-info item-content"> |
|
||||
<el-row> |
|
||||
<el-col v-for="(item,index) in archivesDetailsData" v-show="index<archivesDetailsData.length-5" :key="index" :span="item.isLine ? 24 : 12" class="base-info-item"> |
|
||||
<span>{{ item.fieldCnName }}：</span> |
|
||||
<p :style="{ width: ( item.editLength ? item.editLength+'px' : '' ), flex: ( !item.editLength ? 1 : '' )}">{{ item.context }}</p> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
<el-row v-if="isDetailsInfo"> |
|
||||
<el-col v-for="(item,index) in archivesDetailsData.slice(archivesDetailsData.length-5,archivesDetailsData.length)" :key="'last'+index" :span=" 12" class="base-info-item"> |
|
||||
<span>{{ item.fieldCnName }}：</span> |
|
||||
<div v-if="item.fieldName === 'folder_location' && item.context" :style="{ width: item.editLength+'px', marginTop:'-6px'}"> |
|
||||
<div v-if="item.context.indexOf(',')"> |
|
||||
<el-tag |
|
||||
v-for="(val,key) in item.context.split(',')" |
|
||||
:key="key" |
|
||||
:type="val" |
|
||||
effect="dark" |
|
||||
> |
|
||||
{{ val }} |
|
||||
</el-tag> |
|
||||
</div> |
|
||||
<div v-else-if="!item.context.indexOf(',')"> |
|
||||
<el-tag effect="dark">{{ item.context }}</el-tag> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-else :style="{ width: item.editLength+'px'}" :class="[ (item.fieldName === 'borrow_type') ? 'row-state row-lending' : '' ]"> |
|
||||
{{ item.context }} |
|
||||
</div> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
</div> |
|
||||
<div v-if="archivesTabIndex==1"> |
|
||||
<el-table |
|
||||
ref="table" |
|
||||
v-loading="tableLoading" |
|
||||
class="archives-table" |
|
||||
:data="tableData" |
|
||||
height="calc(100vh - 600px)" |
|
||||
highlight-current-row |
|
||||
style="width: 100%;" |
|
||||
:row-key="rowKey" |
|
||||
@cell-dblclick="tableDoubleClick" |
|
||||
> |
|
||||
<el-table-column type="index" label="序号" width="55" align="center" /> |
|
||||
<el-table-column :label="selectedCategory.arrangeType === 1 ? '原文':'卷内'" prop="child" width="55" align="center"> |
|
||||
<template slot-scope="scope"> |
|
||||
{{ scope.row.child === '' ? 0 : scope.row.child }} |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column v-for="field in tableDisplayFields" :key="field.id" :label="field.fieldCnName" :align="field.displayformatType" :width="field.displayLength" show-overflow-tooltip> |
|
||||
<template slot="header"> |
|
||||
<el-tooltip |
|
||||
class="item" |
|
||||
effect="dark" |
|
||||
:content="field.fieldCnName" |
|
||||
placement="top-start" |
|
||||
> |
|
||||
<span>{{ field.fieldCnName }}</span> |
|
||||
</el-tooltip> |
|
||||
</template> |
|
||||
<template slot-scope="scope"> |
|
||||
{{ scope.row[field.fieldName] }} |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
</div> |
|
||||
<!-- 元数据 --> |
|
||||
<div v-if="archivesTabIndex==2" class="metadata-cont item-content"> |
|
||||
<pre v-highlightjs="xml_show"> |
|
||||
<code class="highlight_s"> |
|
||||
{[xml_show]} |
|
||||
</code> |
|
||||
</pre> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div slot="footer" class="dialog-footer"> |
|
||||
<el-button type="primary" @click="archivesInfoVisible=false">确定</el-button> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-dialog> |
|
||||
<AnjuanDetail ref="anjuanDetail" /> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { form } from '@crud/crud' |
|
||||
import { FetchDetailsById, FetchArchivesMetadata } from '@/api/collect/collect' |
|
||||
import AnjuanDetail from './anjuan' |
|
||||
export default { |
|
||||
name: 'ArchivesInfo', |
|
||||
components: { AnjuanDetail }, |
|
||||
mixins: [ |
|
||||
form({}) |
|
||||
], |
|
||||
props: { |
|
||||
selectedCategory: { |
|
||||
type: Object, |
|
||||
default: function() { |
|
||||
return {} |
|
||||
} |
|
||||
}, |
|
||||
arcId: { |
|
||||
type: String, |
|
||||
default: function() { |
|
||||
return '' |
|
||||
} |
|
||||
}, |
|
||||
isTitleType: { |
|
||||
type: Number, |
|
||||
default: 2 |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
detailTitle: '', |
|
||||
isHasFile: false, // 卷内/文件才有附件 |
|
||||
isDetailsInfo: false, // 项目不显示最下面5行基本信息 |
|
||||
isTidOrBorrow: true, // 卷内不显示tid/借阅状态 |
|
||||
archivesInfoVisible: false, |
|
||||
archivesTabIndex: 0, |
|
||||
archivesDetailsData: [], |
|
||||
archivesDetailsMetadata: [], |
|
||||
xml_show: null, |
|
||||
page: { |
|
||||
total: 0, |
|
||||
size: 10, |
|
||||
page: 1 |
|
||||
}, |
|
||||
tableData: [ |
|
||||
{ |
|
||||
isType: '卷案表', |
|
||||
group: ' 全宗A', |
|
||||
category: '文书档案（案卷）', |
|
||||
number: 'DAS-Y-2020-001', |
|
||||
title: '人事劳资文件级文书档案人事' |
|
||||
}, { |
|
||||
isType: '卷案表', |
|
||||
group: ' 全宗A', |
|
||||
category: '文书档案（案卷）', |
|
||||
number: 'DAS-Y-2020-001', |
|
||||
title: '人事劳资文件级文书档案人事' |
|
||||
}, { |
|
||||
isType: '卷案表', |
|
||||
group: ' 全宗A', |
|
||||
category: '文书档案（案卷）', |
|
||||
number: 'DAS-Y-2020-001', |
|
||||
title: '人事劳资文件级文书档案人事' |
|
||||
}, { |
|
||||
isType: '卷案表', |
|
||||
group: ' 全宗A', |
|
||||
category: '文书档案（案卷）', |
|
||||
number: 'DAS-Y-2020-001', |
|
||||
title: '人事劳资文件级文书档案人事' |
|
||||
} |
|
||||
], // list |
|
||||
selections: [] // table - 选中的 |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
}, |
|
||||
methods: { |
|
||||
getDetial(collectLevel, rowId) { |
|
||||
const params = { |
|
||||
'categoryId': this.selectedCategory.id, |
|
||||
'categoryLevel': collectLevel, |
|
||||
'id': rowId |
|
||||
} |
|
||||
FetchDetailsById(params).then(data => { |
|
||||
this.archivesDetailsData = data.showFiled |
|
||||
.filter(field => field.fieldName in data.echo) |
|
||||
.map(field => ({ |
|
||||
editLength: field.editLength, |
|
||||
isLine: field.isLine, |
|
||||
fieldCnName: field.fieldCnName, |
|
||||
fieldName: field.fieldName, |
|
||||
context: data.echo[field.fieldName] |
|
||||
})) |
|
||||
}) |
|
||||
const metaDataParams = { |
|
||||
'categoryId': this.selectedCategory.id, |
|
||||
'categoryLevel': collectLevel, |
|
||||
'archivesId': rowId |
|
||||
} |
|
||||
console.log('metaData', metaDataParams) |
|
||||
FetchArchivesMetadata(metaDataParams).then(data => { |
|
||||
this.archivesDetailsMetadata = data |
|
||||
}) |
|
||||
}, |
|
||||
setXml() { |
|
||||
const xmlstr = this.archivesDetailsMetadata |
|
||||
this.xml_show = this.showXml(xmlstr) |
|
||||
}, |
|
||||
changeActiveTab(index) { |
|
||||
this.archivesTabIndex = index |
|
||||
if (this.archivesTabIndex === 2) { |
|
||||
this.setXml() |
|
||||
} |
|
||||
this.$nextTick(() => { |
|
||||
if (this.$refs.uploadFile) { |
|
||||
this.$refs.uploadFile.tableData = [] |
|
||||
this.$refs.uploadFile.getFileList() |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
// 删除 - 关闭 |
|
||||
handleClose(done) { |
|
||||
this.archivesInfoVisible = false |
|
||||
done() |
|
||||
}, |
|
||||
// xml格式化 |
|
||||
showXml(str) { |
|
||||
var that = this |
|
||||
var text = str |
|
||||
// 去掉多余的空格 |
|
||||
text = |
|
||||
'\n' + |
|
||||
text |
|
||||
.replace(/(<\w+)(\s.*?>)/g, function($0, name, props) { |
|
||||
return name + ' ' + props.replace(/\s+(\w+=)/g, ' $1') |
|
||||
}) |
|
||||
.replace(/>\s*?</g, '>\n<') |
|
||||
// 把注释编码 |
|
||||
text = text |
|
||||
.replace(/\n/g, '\r') |
|
||||
.replace(/<!--(.+?)-->/g, function($0, text) { |
|
||||
var ret = '<!--' + escape(text) + '-->' |
|
||||
return ret |
|
||||
}) |
|
||||
.replace(/\r/g, '\n') |
|
||||
|
|
||||
// 调整格式 |
|
||||
var rgx = /\n(<(([^\?]).+?)(?:\s|\s*?>|\s*?(\/)>)(?:.*?(?:(?:(\/)>)|(?:<(\/)\2>)))?)/gm |
|
||||
var nodeStack = [] |
|
||||
var output = text.replace(rgx, function( |
|
||||
$0, |
|
||||
all, |
|
||||
name, |
|
||||
isBegin, |
|
||||
isCloseFull1, |
|
||||
isCloseFull2, |
|
||||
isFull1, |
|
||||
isFull2 |
|
||||
) { |
|
||||
var isClosed = |
|
||||
isCloseFull1 === '/' || |
|
||||
isCloseFull2 === '/' || |
|
||||
isFull1 === '/' || |
|
||||
isFull2 === '/' |
|
||||
var prefix = '' |
|
||||
if (isBegin === '!') { |
|
||||
prefix = that.getPrefix(nodeStack.length) |
|
||||
} else { |
|
||||
if (isBegin !== '/') { |
|
||||
prefix = that.getPrefix(nodeStack.length) |
|
||||
if (!isClosed) { |
|
||||
nodeStack.push(name) |
|
||||
} |
|
||||
} else { |
|
||||
nodeStack.pop() |
|
||||
prefix = that.getPrefix(nodeStack.length) |
|
||||
} |
|
||||
} |
|
||||
var ret = '\n' + prefix + all |
|
||||
return ret |
|
||||
}) |
|
||||
var outputText = output.substring(1) |
|
||||
// 把注释还原并解码，调格式 |
|
||||
outputText = outputText |
|
||||
.replace(/\n/g, '\r') |
|
||||
.replace(/(\s*)<!--(.+?)-->/g, function($0, prefix, text) { |
|
||||
if (prefix.charAt(0) === '\r') prefix = prefix.substring(1) |
|
||||
text = unescape(text).replace(/\r/g, '\n') |
|
||||
var ret = |
|
||||
'\n' + prefix + '<!--' + text.replace(/^\s*/gm, prefix) + '-->' |
|
||||
return ret |
|
||||
}) |
|
||||
outputText = outputText.replace(/\s+$/g, '').replace(/\r/g, '\r\n') |
|
||||
return outputText |
|
||||
}, |
|
||||
getPrefix(prefixIndex) { |
|
||||
var span = ' ' |
|
||||
var output = [] |
|
||||
for (var i = 0; i < prefixIndex; ++i) { |
|
||||
output.push(span) |
|
||||
} |
|
||||
return output.join('') |
|
||||
}, |
|
||||
// table |
|
||||
clickRowHandler(row) { |
|
||||
this.$refs.table.toggleRowSelection(row) |
|
||||
}, |
|
||||
// table |
|
||||
selectionChangeHandler(val) { |
|
||||
this.selections = val |
|
||||
}, |
|
||||
// table - 双击查看详情 |
|
||||
tableDoubleClick(row) { |
|
||||
this.$refs.anjuanDetail.archivesInfoVisible = true |
|
||||
this.$refs.anjuanDetail.getDetial() |
|
||||
this.$refs.anjuanDetail.detailTitle = '案卷详情' |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.base-info, |
|
||||
.metadata-cont{ |
|
||||
background-color: #F6F8FC; |
|
||||
} |
|
||||
|
|
||||
// .metadata-cont{ |
|
||||
// overflow: hidden; |
|
||||
// overflow-y: scroll; |
|
||||
// } |
|
||||
|
|
||||
// 档案详情 |
|
||||
.base-info{ |
|
||||
padding: 20px 0; |
|
||||
.base-info-item{ |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
margin-bottom: 20px; |
|
||||
color: #545B65; |
|
||||
span{ |
|
||||
display: block; |
|
||||
width: 120px; |
|
||||
margin-right: 5px; |
|
||||
text-align: right; |
|
||||
color: #0C0E1E; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
code.hljs { |
|
||||
color: #0C0E1E !important; |
|
||||
height: 530px !important; |
|
||||
} |
|
||||
::v-deep .hljs-name{ |
|
||||
color: #0C0E1E !important; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,41 +0,0 @@ |
|||||
<template> |
|
||||
<div class="app-container"> |
|
||||
<upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" /> |
|
||||
<el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;"> |
|
||||
<el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" /> |
|
||||
</el-table> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import UploadExcelComponent from '@/components/UploadExcel/index.vue' |
|
||||
|
|
||||
export default { |
|
||||
name: 'UploadExcel', |
|
||||
components: { UploadExcelComponent }, |
|
||||
data() { |
|
||||
return { |
|
||||
tableData: [], |
|
||||
tableHeader: [] |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
beforeUpload(file) { |
|
||||
const isLt1M = file.size / 1024 / 1024 < 1 |
|
||||
if (isLt1M) { |
|
||||
return true |
|
||||
} |
|
||||
|
|
||||
this.$message({ |
|
||||
message: '请不要上传大于1m的文件.', |
|
||||
type: 'warning' |
|
||||
}) |
|
||||
return false |
|
||||
}, |
|
||||
handleSuccess({ results, header }) { |
|
||||
this.tableData = results |
|
||||
this.tableHeader = header |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue