8 changed files with 528 additions and 68 deletions
-
3package.json
-
99src/assets/styles/archives-manage.scss
-
3src/main.js
-
167src/views/archivesManage/archivesList/archivesDetail.vue
-
90src/views/archivesManage/archivesList/module/archivesInfo.vue
-
79src/views/archivesManage/archivesList/module/packing.vue
-
136src/views/archivesManage/archivesList/module/uploadFile.vue
-
19src/views/components/category/PreviewForm.vue
@ -0,0 +1,90 @@ |
|||
<template> |
|||
<div class="archives-info-wrap"> |
|||
<!-- tab --> |
|||
<ul class="archives-tab"> |
|||
<li :class="{'active': archivesTabIndex == 0}" @click="changeActiveTab(0)">基本信息</li> |
|||
<li :class="{'active': archivesTabIndex == 1}" @click="changeActiveTab(1)">附件</li> |
|||
<li :class="{'active': archivesTabIndex == 2}" @click="changeActiveTab(2)">元数据</li> |
|||
</ul> |
|||
<!-- 基本信息 --> |
|||
<div v-if="archivesTabIndex==0" class="base-info"> |
|||
<el-row> |
|||
<el-col :span="12" class="base-info-item"> |
|||
<span>全宗号：</span> |
|||
<p>父区域-子区域-设备1-1区1列1节1层左边</p> |
|||
</el-col> |
|||
<el-col :span="12" class="base-info-item"> |
|||
<span>TID：</span> |
|||
<p>E2806894200040159AF8AD06</p> |
|||
</el-col> |
|||
<el-col :span="12" class="base-info-item"> |
|||
<span>全宗号：</span> |
|||
<p>父区域-子区域-设备1-1区1列1节1层左边</p> |
|||
</el-col> |
|||
<el-col :span="12" class="base-info-item"> |
|||
<span>TID：</span> |
|||
<p>E2806894200040159AF8AD06</p> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
<!-- 附件 --> |
|||
<UploadFile v-if="archivesTabIndex==1" :is-upload-detail="false" /> |
|||
<!-- 元数据 --> |
|||
<div v-if="archivesTabIndex==2"> |
|||
<pre v-highlightjs="xml_show"> |
|||
<code class="highlight_s" /> |
|||
</pre> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import vkbeautify from 'vkbeautify' |
|||
import { form } from '@crud/crud' |
|||
import UploadFile from './uploadFile' |
|||
export default { |
|||
name: 'ArchivesInfo', |
|||
components: { UploadFile }, |
|||
mixins: [ |
|||
form({}) |
|||
], |
|||
data() { |
|||
return { |
|||
archivesTabIndex: 0, |
|||
textareaoutput: null, |
|||
xml_show: null |
|||
} |
|||
}, |
|||
created() { |
|||
}, |
|||
mounted() { |
|||
this.setXml() |
|||
}, |
|||
methods: { |
|||
setXml() { |
|||
const xmlstr = `<?xml version="1.0" encoding="UTF-8"?> |
|||
<note> |
|||
<to>Tove</to> |
|||
<from>Jani</from> |
|||
<heading>Reminder</heading> |
|||
<body>Don't forget me this weekend!</body> |
|||
</note>` |
|||
|
|||
this.xml_show = vkbeautify.xml(xmlstr) |
|||
|
|||
console.log('xmlstr:', xmlstr) |
|||
console.log('xml转json:', this.$x2js.xml2js(xmlstr)) |
|||
console.log('json转xml:', this.$x2js.js2xml(this.$x2js.xml2js(xmlstr))) |
|||
this.textareaoutput = xmlstr |
|||
}, |
|||
changeActiveTab(index) { |
|||
this.archivesTabIndex = index |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "~@/assets/styles/archives-manage.scss"; |
|||
|
|||
</style> |
|||
@ -0,0 +1,79 @@ |
|||
<template> |
|||
<div class="upload-file"> |
|||
<!-- 上传附件curd --> |
|||
<div class="upload-curd"> |
|||
ddd |
|||
</div> |
|||
<!--表格渲染--> |
|||
<el-table |
|||
ref="table" |
|||
:data="tableData" |
|||
style="min-width: 100%" |
|||
height="calc(100vh - 382px)" |
|||
@row-click="clickRowHandler" |
|||
@selection-change="selectionChangeHandler" |
|||
> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column type="index" label="序号" width="55" align="center" /> |
|||
<el-table-column prop="fileName" label="文件名称" min-width="140" align="center" /> |
|||
<el-table-column prop="fileFormat" label="格式" min-width="60" align="center" /> |
|||
<el-table-column prop="fileSize" label="大小" min-width="85" align="center" /> |
|||
<el-table-column prop="fileDpi" label="分辨率" min-width="85" align="center" /> |
|||
<el-table-column prop="fileCover" label="缩览图" min-width="60" align="center"> |
|||
<template slot-scope="scope"> |
|||
<div v-if="scope.row.fileCover"> |
|||
<img width="60px" height="32px" style="object-fit:cover;" :src="scope.row.fileCover" @click="showCoverVisible=true"> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="create_date" label="创建时间" min-width="100" align="center" /> |
|||
</el-table> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { form } from '@crud/crud' |
|||
import data from './data.json' |
|||
export default { |
|||
name: 'UploadFile', |
|||
components: {}, |
|||
mixins: [ |
|||
form({}) |
|||
], |
|||
data() { |
|||
return { |
|||
tableData: [], |
|||
selections: [], |
|||
showCoverVisible: false, |
|||
fileList: [], // 上传list |
|||
sortVisible: false, // 排序 |
|||
sortTableData: [], |
|||
deleteVisible: false, |
|||
deleteData: [] |
|||
} |
|||
}, |
|||
created() { |
|||
this.tableData = data.data |
|||
}, |
|||
methods: { |
|||
// table |
|||
clickRowHandler(row) { |
|||
this.$refs.table.toggleRowSelection(row) |
|||
}, |
|||
// table |
|||
selectionChangeHandler(val) { |
|||
this.selections = val |
|||
}, |
|||
// dialog - close |
|||
handleClose(done) { |
|||
this.showCoverVisible = false |
|||
done() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "~@/assets/styles/archives-manage.scss"; |
|||
|
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue