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