liu_li
/
yxk-storeroom-system
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

档案管理-详情/装盒

master
xuhuajiao 3 years ago
parent
efc3b462fc
commit
70604e4a80
8 changed files with 528 additions and 68 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      package.json
  2. 99
      src/assets/styles/archives-manage.scss
  3. 3
      src/main.js
  4. 167
      src/views/archivesManage/archivesList/archivesDetail.vue
  5. 90
      src/views/archivesManage/archivesList/module/archivesInfo.vue
  6. 79
      src/views/archivesManage/archivesList/module/packing.vue
  7. 136
      src/views/archivesManage/archivesList/module/uploadFile.vue
  8. 19
      src/views/components/category/PreviewForm.vue

3
package.json
View File

@ -38,6 +38,7 @@
"element-ui": "^2.15.6", "element-ui": "^2.15.6",
"file-saver": "1.3.8", "file-saver": "1.3.8",
"fuse.js": "3.4.4", "fuse.js": "3.4.4",
"highlight.js": "^11.5.1",
"js-beautify": "^1.10.2", "js-beautify": "^1.10.2",
"js-cookie": "2.2.0", "js-cookie": "2.2.0",
"jsencrypt": "^3.0.0-rc.1", "jsencrypt": "^3.0.0-rc.1",
@ -49,6 +50,7 @@
"qs": "^6.10.1", "qs": "^6.10.1",
"screenfull": "4.2.0", "screenfull": "4.2.0",
"sortablejs": "1.8.4", "sortablejs": "1.8.4",
"vkbeautify": "^0.99.3",
"vue": "^2.6.14", "vue": "^2.6.14",
"vue-count-to": "^1.0.13", "vue-count-to": "^1.0.13",
"vue-cropper": "0.4.9", "vue-cropper": "0.4.9",
@ -60,6 +62,7 @@
"vuedraggable": "2.20.0", "vuedraggable": "2.20.0",
"vuex": "3.1.0", "vuex": "3.1.0",
"wangeditor": "^4.7.11", "wangeditor": "^4.7.11",
"x2js": "^3.4.3",
"xlsx": "^0.17.4" "xlsx": "^0.17.4"
}, },
"devDependencies": { "devDependencies": {

99
src/assets/styles/archives-manage.scss
View File

@ -6,6 +6,26 @@ $arcRed:#F65163;
$arcGreen: #1AAE93; $arcGreen: #1AAE93;
$arcCyan: #0FBED9; $arcCyan: #0FBED9;
::v-deep.input-prepend{
position: relative;
.el-input__inner {
padding-left: 80px;
}
.el-input-group__prepend {
position: absolute;
left: 0;
top: 0;
color: #fff;
background-color: transparent;
border: none;
height: 32px;
line-height: 32px;
.el-input__inner {
padding-left: 15px;
}
}
}
.container-main{ .container-main{
.left-tree-item{ .left-tree-item{
margin-bottom: 20px; margin-bottom: 20px;
@ -141,7 +161,7 @@ $arcCyan: #0FBED9;
::v-deep .is-scrolling-left, ::v-deep .is-scrolling-left,
::v-deep .is-scrolling-middle, ::v-deep .is-scrolling-middle,
::v-deep .is-scrolling-right{ ::v-deep .is-scrolling-right{
min-height: calc(100vh - 430px) !important;
min-height: calc(100vh - 434px) !important;
} }
} }
::v-deep .archives-table.el-table .el-table__fixed-right{ ::v-deep .archives-table.el-table .el-table__fixed-right{
@ -149,11 +169,12 @@ $arcCyan: #0FBED9;
box-shadow: -5px 5px 10px 1px rgba(15,164,222,0.16); box-shadow: -5px 5px 10px 1px rgba(15,164,222,0.16);
} }
// archives - tab
.archives-tab{ .archives-tab{
position: relative; position: relative;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 0 70px;
padding: 0 35px;
font-size: 16px; font-size: 16px;
border-bottom: 1px solid #339CFF; border-bottom: 1px solid #339CFF;
z-index: 1001; z-index: 1001;
@ -179,8 +200,80 @@ $arcCyan: #0FBED9;
} }
// 上传附件 // 上传附件
.upload-dialog{
::v-deep.el-dialog{
width: 940px;
.el-dialog__body{
padding: 20px 0;
}
}
}
.upload-file{ .upload-file{
.upload-curd{ .upload-curd{
margin: 20px 32px;
display: flex;
flex-direction: row;
margin: 0 32px 20px 32px;
}
.upload-demo{
position: relative;
margin-right: 10px;
::v-deep .el-upload-list{
display: none;
position: absolute;
left: 0;
bottom: 0;
}
} }
} }
.screenshot{
display: block;
margin: 0 auto;
object-fit: cover;
}
.file-down{
display: block;
width: 66px;
height: 28px;
line-height: 28px;
padding: 0;
color: #fff;
background-color: #339CFF;
border-radius: 2px;
margin: 0 auto;
&::before{
margin-right: 5px;
}
}
.drag-tip {
display: block;
padding-left: 20px;
padding-bottom: 10px;
font-style: normal;
font-weight: bold;
color: #fff;
}
// 档案详情
.base-info{
padding-top: 20px;
color: #fff;
.base-info-item{
display: flex;
flex-direction: row;
margin-bottom: 20px;
span{
display: block;
width: 160px;
text-align: right;
color: #3A99FD;
}
p{
flex: 1;
}
}
}
::v-deep.hljs{
color: #fff;
background-color: transparent;
}

3
src/main.js
View File

@ -46,6 +46,9 @@ Vue.use(Element, {
size: Cookies.get('size') || 'small' // set element-ui default size size: Cookies.get('size') || 'small' // set element-ui default size
}) })
import X2js from 'x2js' // xml数据处理插件
Vue.prototype.$x2js = new X2js() // 创建x2js对象，挂到vue原型上
Vue.config.productionTip = false Vue.config.productionTip = false
new Vue({ new Vue({

167
src/views/archivesManage/archivesList/archivesDetail.vue
View File

@ -1,28 +1,39 @@
<template> <template>
<div class="rrr">
<div>
<!--工具栏--> <!--工具栏-->
<div class="head-container"> <div class="head-container">
<div class="head-archives-top"> <div class="head-archives-top">
<div class="head-search"> <div class="head-search">
<!-- 搜索 --> <!-- 搜索 -->
<el-input v-model="query.blurry" clearable size="small" placeholder="请输入关键词" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<el-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 100px" @change="crud.toQuery">
<el-select v-if="selectedCategory.isType === 3 || selectedCategory.isType === 5" v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 100px" @change="crud.toQuery">
<i slot="prefix" class="iconfont icon-zhuangtai-fanbai" /> <i slot="prefix" class="iconfont icon-zhuangtai-fanbai" />
<el-option v-for="item in stateOptions" :key="item.key" :label="item.label" :value="item.key" /> <el-option v-for="item in stateOptions" :key="item.key" :label="item.label" :value="item.key" />
</el-select> </el-select>
<el-input v-model="query[inputSelect]" clearable size="small" placeholder="请输入关键词" style="width: 200px;" class="input-prepend filter-item" @keyup.enter.native="crud.toQuery">
<el-select slot="prepend" v-model="inputSelect" style="width: 80px" @change="querySelect">
<el-option
v-for="item in queryOption"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-input>
<rrOperation /> <rrOperation />
</div> </div>
<el-checkbox v-model="fixedStatusBar">隐藏固定状态栏</el-checkbox>
<el-checkbox v-if="selectedCategory.isType !== 1 && selectedCategory.isType !== 2" v-model="fixedStatusBar">隐藏固定状态栏</el-checkbox>
</div> </div>
<crudOperation :permission="permission"> <crudOperation :permission="permission">
<template v-slot:right> <template v-slot:right>
<el-button v-permission="permission.del" icon="el-icon-delete" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)">删除</el-button> <el-button v-permission="permission.del" icon="el-icon-delete" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)">删除</el-button>
<el-button v-permission="permission.download" :loading="crud.downloadLoading" :disabled="!crud.data.length" size="mini" icon="el-icon-download" @click="crud.doExport">导出</el-button>
<el-button v-if="selectedCategory.isType !== 1 && selectedCategory.isType !== 2" v-permission="permission.download" :loading="crud.downloadLoading" :disabled="!crud.data.length" size="mini" icon="el-icon-download" @click="crud.doExport">导出</el-button>
<el-button v-if="selectedCategory.isType === 4 || selectedCategory.isType === 5" :disabled="crud.selections.length !== 1" size="mini" icon="el-icon-download" @click="uploadFile">上传附件</el-button>
</template> </template>
<template v-slot:rightButtonGroup> <template v-slot:rightButtonGroup>
<div class="archives-handler-btn">
<div v-if="selectedCategory.isType === 3 || selectedCategory.isType === 5" class="archives-handler-btn">
<el-button class="packing-btn iconfont icon-weibiaoti-2" type="primary">装盒</el-button> <el-button class="packing-btn iconfont icon-weibiaoti-2" type="primary">装盒</el-button>
<el-button class="warehousing-btn iconfont icon-weibiaoti-2" type="primary">入库</el-button>
<el-button v-if="selectedCategory.isType === 3" class="part-btn iconfont icon-weibiaoti-2" type="primary">分卷装盒</el-button>
<!-- <el-button class="warehousing-btn iconfont icon-weibiaoti-2" type="primary">入库</el-button> -->
<el-button class="lending-btn iconfont icon-weibiaoti-2" type="primary">借阅</el-button> <el-button class="lending-btn iconfont icon-weibiaoti-2" type="primary">借阅</el-button>
<el-button class="binding-btn iconfont icon-weibiaoti-2" type="primary">绑定标签</el-button> <el-button class="binding-btn iconfont icon-weibiaoti-2" type="primary">绑定标签</el-button>
</div> </div>
@ -34,20 +45,26 @@
<span class="dialog-right-top" /> <span class="dialog-right-top" />
<span class="dialog-left-bottom" /> <span class="dialog-left-bottom" />
<div class="setting-dialog"> <div class="setting-dialog">
<!-- tab -->
<ul class="archives-tab">
<li :class="{'active': archivesTabIndex == 0}" @click="changeActiveTab(0)">基本信息</li>
<li v-if="isEditOrAdd !== 'add'" :class="{'active': archivesTabIndex == 1}" @click="changeActiveTab(1)">上传附件</li>
</ul>
<!-- form --> <!-- form -->
<PreviewForm v-if="formPreviewData.length && archivesTabIndex == 0" ref="previewForm" :is-disabled="false" :form-preview-data.sync="formPreviewData" :selected-category="selectedCategory" :arc-id="arcId" /> <PreviewForm v-if="formPreviewData.length && archivesTabIndex == 0" ref="previewForm" :is-disabled="false" :form-preview-data.sync="formPreviewData" :selected-category="selectedCategory" :arc-id="arcId" />
<!-- 上传附件 -->
<UploadFile v-if="archivesTabIndex==1" />
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button :loading="crud.status.cu === 2" type="primary" @click="handlerArchivesSubmit">保存</el-button> <el-button :loading="crud.status.cu === 2" type="primary" @click="handlerArchivesSubmit">保存</el-button>
</div> </div>
</div> </div>
</el-dialog> </el-dialog>
<!-- 上传附件 -->
<el-dialog class="upload-dialog" :modal-append-to-body="false" :close-on-click-modal="false" :before-close="handleClose" :visible.sync="uploadFileVisible" title="上传附件">
<span class="dialog-right-top" />
<span class="dialog-left-bottom" />
<div class="setting-dialog">
<UploadFile :is-upload-detail="true" />
<div slot="footer" class="dialog-footer">
<el-button :loading="crud.status.cu === 2" type="primary" @click="uploadFileSave">保存</el-button>
</div>
</div>
</el-dialog>
<!-- 删除档案 --> <!-- 删除档案 -->
<el-dialog title="删除档案" :visible.sync="deleteVisible" :before-close="handleClose"> <el-dialog title="删除档案" :visible.sync="deleteVisible" :before-close="handleClose">
<span class="dialog-right-top" /> <span class="dialog-right-top" />
@ -66,8 +83,9 @@
</div> </div>
</div> </div>
</el-dialog> </el-dialog>
<!-- table表格渲染 --> <!-- table表格渲染 -->
<el-table ref="table" v-loading="crud.loading || getTableDisplayFieldsLoading" class="archives-table" :data="crud.data" highlight-current-row style="width: 100%; " height="calc(100vh - 370px)" @selection-change="crud.selectionChangeHandler" @row-click="clickRowHandler">
<el-table ref="table" v-loading="crud.loading || getTableDisplayFieldsLoading" class="archives-table" :data="crud.data" highlight-current-row style="width: 100%; " height="calc(100vh - 370px)" @selection-change="crud.selectionChangeHandler" @row-click="clickRowHandler" @cell-dblclick="tableDoubleClick">
<el-table-column type="selection" width="55" align="center" /> <el-table-column type="selection" width="55" align="center" />
<el-table-column type="index" label="序号" width="55" align="center" /> <el-table-column type="index" label="序号" width="55" align="center" />
<el-table-column v-for="field in tableDisplayFields" :key="field.id" :label="field.fieldCnName" :align="field.displayformatType" :width="field.displayLength" show-overflow-tooltip> <el-table-column v-for="field in tableDisplayFields" :key="field.id" :label="field.fieldCnName" :align="field.displayformatType" :width="field.displayLength" show-overflow-tooltip>
@ -75,26 +93,26 @@
{{ scope.row[field.fieldName] }} {{ scope.row[field.fieldName] }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="装盒" width="100" align="center" :fixed="fixedStatusBar?false:'right'">
<el-table-column v-if="selectedCategory.isType !== 1 && selectedCategory.isType !== 2" label="装盒" width="100" align="center" :fixed="fixedStatusBar?false:'right'">
<!-- state-active 已装/已入/已借/已绑 --> <!-- state-active 已装/已入/已借/已绑 -->
<template slot-scope="scope"> <template slot-scope="scope">
<!-- 未装 / 已装 --> <!-- 未装 / 已装 -->
<span class="row-state row-packing state-active">{{ scope.row.case_no ? '已装': '未装' }}</span> <span class="row-state row-packing state-active">{{ scope.row.case_no ? '已装': '未装' }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="入库" width="100" align="center" :fixed="fixedStatusBar?false:'right'">
<el-table-column v-if="selectedCategory.isType !== 1 && selectedCategory.isType !== 2" label="入库" width="100" align="center" :fixed="fixedStatusBar?false:'right'">
<template slot-scope=""> <template slot-scope="">
<!-- 未入 / 已入 --> <!-- 未入 / 已入 -->
<span class="row-state row-warehousing">未入</span> <span class="row-state row-warehousing">未入</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="借阅" width="100" align="center" :fixed="fixedStatusBar?false:'right'">
<el-table-column v-if="selectedCategory.isType === 3 || selectedCategory.isType === 5" label="借阅" width="100" align="center" :fixed="fixedStatusBar?false:'right'">
<template slot-scope=""> <template slot-scope="">
<!-- 待借 / 不可借-用“—” 表示 / 已借 --> <!-- 待借 / 不可借-用“—” 表示 / 已借 -->
<span class="row-state row-lending">—</span> <span class="row-state row-lending">—</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="标签" width="100" align="center" :fixed="fixedStatusBar?false:'right'">
<el-table-column v-if="selectedCategory.isType === 3 || selectedCategory.isType === 5" label="标签" width="100" align="center" :fixed="fixedStatusBar?false:'right'">
<template slot-scope="scope"> <template slot-scope="scope">
<!-- 未绑 / 已绑 --> <!-- 未绑 / 已绑 -->
<span class="row-state row-binding">{{ scope.row.tid ? '已绑': '未绑' }}</span> <span class="row-state row-binding">{{ scope.row.tid ? '已绑': '未绑' }}</span>
@ -103,21 +121,35 @@
</el-table> </el-table>
<!--分页组件--> <!--分页组件-->
<pagination /> <pagination />
<!-- 删除档案 -->
<el-dialog class="upload-dialog" title="档案详情" :visible.sync="archivesInfoVisible" :before-close="handleClose">
<span class="dialog-right-top" />
<span class="dialog-left-bottom" />
<div class="setting-dialog">
<ArchivesInfo />
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click.native="handleDeltConfirm">确定</el-button>
</div>
</div>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { add, edit, del, getTableDisplayFields, getFormDisplayFields } from '@/api/archivesManage/archivesList' import { add, edit, del, getTableDisplayFields, getFormDisplayFields } from '@/api/archivesManage/archivesList'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import CRUD, { presenter, header, form } from '@crud/crud'
import { initData } from '@/api/data' import { initData } from '@/api/data'
import crudOperation from '@crud/CRUD.operation' import crudOperation from '@crud/CRUD.operation'
import rrOperation from '@crud/RR.operation' import rrOperation from '@crud/RR.operation'
import pagination from '@crud/Pagination' import pagination from '@crud/Pagination'
import PreviewForm from '@/views/components/category/PreviewForm' import PreviewForm from '@/views/components/category/PreviewForm'
import UploadFile from './module/uploadFile' import UploadFile from './module/uploadFile'
import ArchivesInfo from './module/archivesInfo'
export default { export default {
components: { crudOperation, rrOperation, pagination, PreviewForm, UploadFile },
components: { crudOperation, rrOperation, pagination, PreviewForm, UploadFile, ArchivesInfo },
mixins: [ mixins: [
presenter(), presenter(),
header(), header(),
@ -161,6 +193,12 @@ export default {
{ key: '5', label: '待借' }, { key: '5', label: '待借' },
{ key: '6', label: '已借' } { key: '6', label: '已借' }
], ],
queryOption: [
{ value: 'maintitle', label: '题名' },
{ value: 'archive_no', label: '档号' },
{ value: 'archive_year', label: '年度' }
],
inputSelect: '',
permission: { permission: {
add: ['admin', 'archivesList:add'], add: ['admin', 'archivesList:add'],
edit: ['admin', 'archivesList:edit'], edit: ['admin', 'archivesList:edit'],
@ -178,7 +216,9 @@ export default {
archivesTabIndex: 0, // 新增 archivesTabIndex: 0, // 新增
tabDisabled: true, tabDisabled: true,
arcId: null, // 档案ID arcId: null, // 档案ID
arrySort: []
arrySort: [],
uploadFileVisible: false, // 上传附件
archivesInfoVisible: false // 档案详情
} }
}, },
watch: { watch: {
@ -193,48 +233,50 @@ export default {
this.doLayout() this.doLayout()
} }
}, },
created() {
// 初始化带select的输入框的 - 搜索
this.inputSelect = this.queryOption[0].value
},
mounted() { mounted() {
}, },
methods: { methods: {
// 获取数据前设置默认参数
// [CRUD.HOOK.beforeRefresh]() {
// this.crud.query.id = this.dicPid
// },
// [CRUD.HOOK.afterRefresh](crud) {
// console.log(this.curd)
// // if (this.needRefreshTree) {
// // this.$emit('treeRefresh', crud.data)
// // }
// },
// 搜索-select
querySelect(val) {
this.inputSelect = val
},
[CRUD.HOOK.beforeRefresh]() { [CRUD.HOOK.beforeRefresh]() {
this.getTableDisplayFieldsLoading = true this.getTableDisplayFieldsLoading = true
// 档案列表获取显示列 // 档案列表获取显示列
getTableDisplayFields({ categoryId: this.selectedCategory.id }).then(data => { getTableDisplayFields({ categoryId: this.selectedCategory.id }).then(data => {
this.tableDisplayFields = data this.tableDisplayFields = data
this.getTableDisplayFieldsLoading = false this.getTableDisplayFieldsLoading = false
this.tableDisplayFields.map(item => { this.tableDisplayFields.map(item => {
if (item.displayOrder) {
if (item.queue) {
this.arrySort.push(item.fieldName + ', ' + (item.displayOrder === 1 ? 'asc' : 'desc')) this.arrySort.push(item.fieldName + ', ' + (item.displayOrder === 1 ? 'asc' : 'desc'))
} }
}) })
console.log(this.arrySort)
this.crud.sort = this.arrySort this.crud.sort = this.arrySort
new Promise((resolve, reject) => { new Promise((resolve, reject) => {
crud.loading = true
this.crud.loading = true
// 请求数据 // 请求数据
initData(crud.url, crud.getQueryParams()).then(data => {
const table = crud.getTable()
initData(this.crud.url, this.crud.getQueryParams()).then(data => {
const table = this.crud.getTable()
if (table && table.lazy) { // 懒加载子节点数据，清掉已加载的数据 if (table && table.lazy) { // 懒加载子节点数据，清掉已加载的数据
table.store.states.treeData = {} table.store.states.treeData = {}
table.store.states.lazyTreeNodeMap = {} table.store.states.lazyTreeNodeMap = {}
} }
crud.page.total = data.totalElements !== null ? data.totalElements : data.length
crud.data = data.content ? data.content : data
crud.resetDataStatus()
resolve(data)
if (data) {
this.crud.page.total = data.totalElements !== null ? data.totalElements : data.length
this.crud.data = data.content ? data.content : data
this.crud.resetDataStatus()
resolve(data)
// time 毫秒后显示表格
setTimeout(() => {
this.crud.loading = false
}, this.crud.time)
}
}).catch(err => { }).catch(err => {
crud.loading = false
this.crud.loading = false
reject(err) reject(err)
}) })
}) })
@ -255,23 +297,38 @@ export default {
this.form.dictionaryConfigId = {} this.form.dictionaryConfigId = {}
this.formPreviewData = [] this.formPreviewData = []
// 档案预编辑获取字段 // 档案预编辑获取字段
getFormDisplayFields({ categoryId: this.selectedCategory.id }).then(data => {
const params = {
categoryId: this.selectedCategory.id,
archivesId: this.arcId
}
this.getFormInfo(params)
},
// 著录界面-form/详情-api
getFormInfo(params) {
getFormDisplayFields(params).then(data => {
// this.formPreviewData = data.showFiled.filter((fields) => { return fields.isInput }) // this.formPreviewData = data.showFiled.filter((fields) => { return fields.isInput })
this.formPreviewData = data.showFiled this.formPreviewData = data.showFiled
this.form.categoryId = this.selectedCategory.id this.form.categoryId = this.selectedCategory.id
this.$nextTick(() => { this.$nextTick(() => {
if (this.isEditOrAdd === 'edit') { if (this.isEditOrAdd === 'edit') {
this.$refs.previewForm.addOrUpdateForm = this.selectedData[0]
this.$refs.previewForm.addOrUpdateForm = data.echo
} }
}) })
}) })
}, },
changeActiveTab(index) {
this.archivesTabIndex = index
},
// form - submit
handlerArchivesSubmit() { handlerArchivesSubmit() {
this.$refs.previewForm.submitForm('addOrUpdateForm') this.$refs.previewForm.submitForm('addOrUpdateForm')
}, },
// table - 双击查看详情
tableDoubleClick(row) {
this.archivesInfoVisible = true
const params = {
categoryId: this.selectedCategory.id,
archivesId: row.id
}
this.getFormInfo(params)
},
// table - 当前选中得row // table - 当前选中得row
clickRowHandler(row) { clickRowHandler(row) {
this.$refs.table.toggleRowSelection(row) this.$refs.table.toggleRowSelection(row)
@ -315,6 +372,12 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.table.doLayout() this.$refs.table.doLayout()
}) })
},
uploadFile() {
this.uploadFileVisible = true
},
uploadFileSave() {
this.uploadFileVisible = false
} }
} }
} }
@ -324,14 +387,11 @@ export default {
@import "~@/assets/styles/archives-manage.scss"; @import "~@/assets/styles/archives-manage.scss";
.preview-dialog { .preview-dialog {
::v-deep .el-dialog { ::v-deep .el-dialog {
width: 940px !important;
.el-dialog__body{ .el-dialog__body{
padding: 0; padding: 0;
height: calc(100vh - 174px);
} }
.preview-content { .preview-content {
width: auto !important; width: auto !important;
padding: 20px 144px 0 150px!important;
margin-right: 6px; margin-right: 6px;
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
@ -340,12 +400,9 @@ export default {
background-color: transparent; background-color: transparent;
} }
} }
.el-dialog__header {
width: 420px;
}
.dialog-footer{ .dialog-footer{
margin: 0 auto; margin: 0 auto;
padding: 15px 0 30px 0;
padding: 15px 0 20px 0;
} }
} }
} }

90
src/views/archivesManage/archivesList/module/archivesInfo.vue
View File

@ -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>

79
src/views/archivesManage/archivesList/module/packing.vue
View File

@ -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>

136
src/views/archivesManage/archivesList/module/uploadFile.vue
View File

@ -1,11 +1,20 @@
<template> <template>
<div class="upload-file"> <div class="upload-file">
<!-- 上传附件curd --> <!-- 上传附件curd -->
<div class="upload-curd">
<el-button icon="el-icon-plus">新增</el-button>
<el-button icon="el-icon-delete" :disabled="selections.length === 0">删除</el-button>
<el-button icon="el-icon-sort">排序</el-button>
<div v-if="isUploadDetail" class="upload-curd">
<!-- <el-button icon="el-icon-plus">新增</el-button> -->
<el-upload
class="upload-demo"
action="#"
:on-preview="handlePreview"
:file-list="fileList"
>
<el-button icon="el-icon-plus" size="small" type="primary">新增</el-button>
</el-upload>
<el-button icon="el-icon-delete" :disabled="selections.length === 0" @click="toDelete(selections)">删除</el-button>
<el-button icon="el-icon-sort" @click="sortVisible = true">排序</el-button>
</div> </div>
<!--表格渲染--> <!--表格渲染-->
<el-table <el-table
ref="table" ref="table"
@ -24,11 +33,16 @@
<el-table-column prop="fileCover" label="缩览图" min-width="60" align="center"> <el-table-column prop="fileCover" label="缩览图" min-width="60" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<div v-if="scope.row.fileCover"> <div v-if="scope.row.fileCover">
<img width="60px" height="32px" style="object-fit:cover;" :src="scope.row.fileCover" @click="showCoverVisible=true">
<img width="60px" height="32px" class="screenshot" :src="scope.row.fileCover" @click="showCoverVisible=true">
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="create_date" label="创建时间" min-width="100" align="center" /> <el-table-column prop="create_date" label="创建时间" min-width="100" align="center" />
<el-table-column v-if="!isUploadDetail" label="操作" min-width="100" align="center">
<template>
<el-button class="file-down iconfont icon-weibiaoti-2">下载</el-button>
</template>
</el-table-column>
</el-table> </el-table>
<!-- 点击缩略图看大图 --> <!-- 点击缩略图看大图 -->
@ -39,11 +53,42 @@
<img style="width:100%; height:100%;" src="https://qiniu.aiyxlib.com/yuekan-5-h5bg.jpg"> <img style="width:100%; height:100%;" src="https://qiniu.aiyxlib.com/yuekan-5-h5bg.jpg">
</div> </div>
</el-dialog> </el-dialog>
<!-- 排序 -->
<el-dialog :close-on-click-modal="false" :append-to-body="true" title="排序" :visible.sync="sortVisible" @opened="opened">
<span class="dialog-right-top" />
<span class="dialog-left-bottom" />
<div class="setting-dialog">
<i class="drag-tip">提示：请通过拖动鼠标来调整当前顺序</i>
<el-table :data="sortTableData" class="file-sort" style="width: 100%;max-height: 70vh;" row-key="id">
<el-table-column type="index" label="序号" width="100" align="center" />
<el-table-column prop="cnName" label="文件名称" />
</el-table>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click.native="handleSort">保存</el-button>
</div>
</div>
</el-dialog>
<!-- 删除附件 -->
<el-dialog title="删除附件" :append-to-body="true" :visible.sync="deleteVisible" :before-close="handleClose">
<span class="dialog-right-top" />
<span class="dialog-left-bottom" />
<div class="setting-dialog">
<div class="dialog-delt">
<p><span>确定删除已选择的附件吗？</span></p>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click.native="handleDeltConfirm">确定</el-button>
</div>
</div>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { form } from '@crud/crud' import { form } from '@crud/crud'
import Sortable from 'sortablejs'
import data from './data.json' import data from './data.json'
export default { export default {
name: 'UploadFile', name: 'UploadFile',
@ -51,23 +96,101 @@ export default {
mixins: [ mixins: [
form({}) form({})
], ],
props: {
isUploadDetail: {
type: Boolean,
default: true
}
},
data() { data() {
return { return {
tableData: [], tableData: [],
selections: [], selections: [],
showCoverVisible: false
showCoverVisible: false,
fileList: [], // 上传list
sortVisible: false, // 排序
sortTableData: [],
deleteVisible: false,
deleteData: []
} }
}, },
created() { created() {
this.tableData = data.data this.tableData = data.data
console.log(this.isUploadDetail)
}, },
methods: { methods: {
// 新增
handlePreview(file) {
console.log(file)
},
// 选择删除
toDelete(data) {
console.log(data)
this.deleteData = data
this.deleteVisible = true
},
// 确认删除
handleDeltConfirm() {
this.deleteVisible = false
const ids = []
this.deleteData.forEach(val => {
ids.push(val.id)
})
// const params = {
// 'ids': ids,
// 'categoryId': this.selectedCategory.id
// }
// 删除fetch
// del(params).then(res => {
// this.crud.delAllLoading = false
// this.$notify({
// title: '删除成功',
// type: 'success',
// duration: 2500
// })
// this.crud.refresh()
// })
},
// 排序 - 行拖拽
rowDrop(className, targetName) {
// 此时找到的元素是要拖拽元素的父容器
const tbody = document.querySelector('.' + className + ' .el-table__body-wrapper tbody')
const that = this
Sortable.create(tbody, {
// 指定父元素下可被拖拽的子元素
draggable: '.el-table__row',
onEnd({ newIndex, oldIndex }) {
if (newIndex === oldIndex) return
that[targetName].splice(newIndex, 0, that[targetName].splice(oldIndex, 1)[0])
}
})
},
// 排序
opened() {
this.rowDrop('file-sort', 'sortTableData')
},
// 排序 - data
handleSort() {
// const data = this.sortTableData.map((value, index) => {
// return { id: value.id, sort: index + 1 }
// })
// this.sortTableData.forEach((item, index) => {
// item.categorySeq = index + 1
// })
// sort(data).then(() => {
// this.sortVisible = false
// this.$emit('treeNodeSort', this.sortTableData)
// })
},
// table
clickRowHandler(row) { clickRowHandler(row) {
this.$refs.table.toggleRowSelection(row) this.$refs.table.toggleRowSelection(row)
}, },
// table
selectionChangeHandler(val) { selectionChangeHandler(val) {
this.selections = val this.selections = val
}, },
// dialog - close
handleClose(done) { handleClose(done) {
this.showCoverVisible = false this.showCoverVisible = false
done() done()
@ -78,4 +201,5 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import "~@/assets/styles/archives-manage.scss"; @import "~@/assets/styles/archives-manage.scss";
</style> </style>

19
src/views/components/category/PreviewForm.vue
View File

@ -3,7 +3,7 @@
<el-row :gutter="4"> <el-row :gutter="4">
<el-form ref="addOrUpdateForm" :model="addOrUpdateForm" :rules="rules" :validate-on-rule-change="false" label-width="120px"> <el-form ref="addOrUpdateForm" :model="addOrUpdateForm" :rules="rules" :validate-on-rule-change="false" label-width="120px">
<draggable v-bind="{draggable:'.drag-item',animation:500}" :disabled="!isDisabled" @update="datadragEnd"> <draggable v-bind="{draggable:'.drag-item',animation:500}" :disabled="!isDisabled" @update="datadragEnd">
<el-col v-for="(item,index) in formPreviewData" :key="index" class="drag-item" :span="item.isLine ? 24 : 12">
<el-col v-for="(item,index) in formPreviewData" :key="index" :class="['drag-item',item.fieldName === 'barcode'? 'barcode-input':'']" :span="item.isLine || item.fieldName === 'barcode' ? 24 : 12">
<el-form-item :label="item.fieldCnName" :prop="item.fieldName"> <el-form-item :label="item.fieldCnName" :prop="item.fieldName">
<!-- select :load-options="loadOptions"--> <!-- select :load-options="loadOptions"-->
<treeselect <treeselect
@ -12,7 +12,7 @@
:options="item.options" :options="item.options"
:normalizer="normalizer" :normalizer="normalizer"
placeholder="" placeholder=""
:style="{ width: item.editLength+'px'}"
:style="{ width: item.editLength+14+'px'}"
:disabled="isDisabled" :disabled="isDisabled"
:validate-event="!isDisabled" :validate-event="!isDisabled"
no-options-text="无数据" no-options-text="无数据"
@ -22,7 +22,7 @@
<!-- text / number / textarea / popover --> <!-- text / number / textarea / popover -->
<!-- :validate-event="isDisabled" --> <!-- :validate-event="isDisabled" -->
<el-input <el-input
v-if="item.isInputClass !== 'select' && item.isInputClass !== 'date'"
v-if="item.isInputClass !== 'select' && item.isInputClass !== 'date' && item.fieldName !== 'barcode' "
v-model="addOrUpdateForm[item.fieldName]" v-model="addOrUpdateForm[item.fieldName]"
:type="item.isInputClass === 'popover'? 'text' : item.isInputClass" :type="item.isInputClass === 'popover'? 'text' : item.isInputClass"
:rows="item.isInputClass === 'textarea' ? 3 : ''" :rows="item.isInputClass === 'textarea' ? 3 : ''"
@ -35,6 +35,17 @@
> >
<i v-if="item.isInputClass === 'popover'" slot="suffix" class="el-input__icon iconfont icon-weibiaoti-2" @click="handleCurrentFieldName(item)" /> <i v-if="item.isInputClass === 'popover'" slot="suffix" class="el-input__icon iconfont icon-weibiaoti-2" @click="handleCurrentFieldName(item)" />
</el-input> </el-input>
<div v-if="item.fieldName === 'barcode' " class="last-barcode">
<el-input
v-model="addOrUpdateForm[item.fieldName]"
type="text"
style="width: 510px"
:disabled="isDisabled"
:validate-event="!isDisabled"
@keyup.enter.native="isRepeatHandle(item)"
@blur="isRepeatHandle(item)"
/>
</div>
<!-- date --> <!-- date -->
<el-date-picker <el-date-picker
v-if="item.isInputClass === 'date'" v-if="item.isInputClass === 'date'"
@ -292,7 +303,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.preview-content { .preview-content {
width: 640px !important; width: 640px !important;
height: calc(100vh - 312px);
// height: calc(100vh - 312px);
padding: 20px 0 0 0 !important; padding: 20px 0 0 0 !important;
margin-top: 0 !important; margin-top: 0 !important;
border-radius: 4px; border-radius: 4px;

Write Preview
Loading…
Cancel
Save