12 changed files with 2184 additions and 176 deletions
-
81src/api/archivesManage/archivesList.js
-
53src/assets/styles/archives-manage.scss
-
49src/assets/styles/yxk-admin.scss
-
15src/utils/index.js
-
164src/views/archivesManage/archivesList/archivesDetail.vue
-
183src/views/archivesManage/archivesList/index.vue
-
517src/views/archivesManage/archivesList/module/archivesAnjuan/index.vue
-
147src/views/archivesManage/archivesList/module/archivesInfo/index.vue
-
453src/views/archivesManage/archivesList/module/archivesJuannei/index.vue
-
369src/views/archivesManage/archivesList/module/archivesProject/index.vue
-
230src/views/archivesManage/archivesList/module/table/index.vue
-
99src/views/components/category/PreviewForm.vue
@ -0,0 +1,517 @@ |
|||
<template> |
|||
<div class="archives-warp"> |
|||
<!--工具栏--> |
|||
<div class="head-container head-archives clearfix"> |
|||
<div class="archives-crud"> |
|||
<!-- 新增 --> |
|||
<el-button size="mini" :disabled="isProject && selectedCategory.isType === 2" icon="el-icon-plus" @click="handleForm('add')">新增</el-button> |
|||
<!-- 修改 --> |
|||
<el-button size="mini" icon="el-icon-edit" :disabled="selections.length !== 1" @click="handleForm('edit')">修改</el-button> |
|||
<!-- 删除btn 多选 --> |
|||
<el-button v-permission="permission.del" icon="el-icon-delete" size="mini" :loading="crud.delAllLoading" :disabled="selections.length === 0" @click="toDelete(selections)">删除</el-button> |
|||
<!-- 导出btn :disabled="!crud.data.length" --> |
|||
<el-button v-permission="permission.download" :loading="crud.downloadLoading" size="mini" icon="el-icon-download" @click="doExport">导出</el-button> |
|||
<!-- 上传附件btn 针对卷内/文件 单选 --> |
|||
<el-button v-if="selectedCategory.isType===5" :disabled="selections.length !== 1" size="mini" icon="el-icon-download" @click="uploadFile">上传附件</el-button> |
|||
</div> |
|||
<div class="head-search"> |
|||
<!-- 搜索 --> |
|||
<!-- @change="crud.toQuery" --> |
|||
<el-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 100px"> |
|||
<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-select> |
|||
<!-- @keyup.enter.native="crud.toQuery" --> |
|||
<el-input v-model="query[inputSelect]" clearable size="small" placeholder="请输入关键词" style="width: 200px;" class="input-prepend filter-item"> |
|||
<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> |
|||
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button> |
|||
</div> |
|||
<div class="archives-handler-btn"> |
|||
<!-- 装盒btn 多选 --> |
|||
<el-button class="packing-btn iconfont icon-weibiaoti-2" type="primary" :disabled="selections.length === 0" @click="handlePacking(selections)">装盒</el-button> |
|||
<!-- 分卷装盒btn 针对案卷-单选 --> |
|||
<el-button v-if="selectedCategory.isType === 3" class="part-btn iconfont icon-weibiaoti-2" type="primary" :disabled="selections.length !== 1" @click="handlePartPacking(selections)">分卷装盒</el-button> |
|||
<!-- <el-button class="warehousing-btn iconfont icon-weibiaoti-2" type="primary">入库</el-button> --> |
|||
<!-- 借阅btn 多选 --> |
|||
<el-button class="lending-btn iconfont icon-weibiaoti-2" :disabled="selections.length === 0" type="primary" @click="lengingVisible=true">借阅</el-button> |
|||
<!-- 绑定标签btn 单选 --> |
|||
<el-button class="binding-btn iconfont icon-weibiaoti-2" type="primary" :disabled="selections.length !== 1" @click="handleBinding(selections)">绑定标签</el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
<!--新增 / 编辑 表单组件--> |
|||
<el-dialog class="preview-dialog" :modal-append-to-body="false" :close-on-click-modal="false" :before-close="handleClose" :visible="formVisible" :title="formTitle"> |
|||
<span class="dialog-right-top" /> |
|||
<span class="dialog-left-bottom" /> |
|||
<div class="setting-dialog"> |
|||
<!-- form --> |
|||
<PreviewForm v-if="formPreviewData.length && archivesTabIndex == 0" ref="previewForm" :is-disabled="false" :form-preview-data.sync="formPreviewData" :selected-category="selectedCategory" :parents-id="parentsId" :arc-id="arcId" @emitTableList="getTableList" /> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<!-- :loading="crud.status.cu === 2" --> |
|||
<el-button type="primary" @click="handlerArchivesSubmit">保存</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
<!-- 删除档案 --> |
|||
<el-dialog title="删除档案" :visible.sync="deleteVisible" :close-on-click-modal="false" :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> |
|||
<p v-if="selectedCategory.isType !== 5">数据来源：案卷 {{ selections.length }} 条数据 卷内 {{ totalSumAll }} 条数据</p> |
|||
<p v-else>数据来源：文件 {{ selections.length }} 条数据 附件 {{ totalSumAll }} 条数据</p> |
|||
<p class="delt-tip"><span>提示：如果删除当前档案，此档案内所附带的文件会一并删除</span></p> |
|||
</div> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click.native="handleDeltConfirm">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
<!-- table表格渲染 --> |
|||
<!-- height="calc(100vh - 350px)" --> |
|||
<el-card class="box-card" shadow="never"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
<el-table |
|||
ref="table" |
|||
v-loading="crud.loading || getTableDisplayFieldsLoading" |
|||
class="archives-table" |
|||
:data="anjuanData" |
|||
highlight-current-row |
|||
style="width: 100%; " |
|||
@selection-change="crud.selectionChangeHandler" |
|||
@row-click="clickRowHandler" |
|||
@cell-dblclick="tableDoubleClick" |
|||
@select="handleCurrentChange" |
|||
> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column type="index" label="序号" width="55" align="center" /> |
|||
<el-table-column :label=" selectedCategory.isType === 5 ? '文件':'卷内'" prop="children_num" 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> |
|||
<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-column label="装盒" width="100" align="center" :fixed="fixedStatusBar?false:'right'"> |
|||
<!-- state-active 已装/已入/已借/已绑 --> |
|||
<template slot-scope="scope"> |
|||
<!-- 未装 / 已装 --> |
|||
<span class="row-state row-packing state-active">{{ scope.row.case_no ? '已装': '未装' }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="入库" width="100" align="center" :fixed="fixedStatusBar?false:'right'"> |
|||
<template slot-scope=""> |
|||
<!-- 未入 / 已入 --> |
|||
<span class="row-state row-warehousing">未入</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="借阅" width="100" align="center" :fixed="fixedStatusBar?false:'right'"> |
|||
<template slot-scope=""> |
|||
<!-- 待借 / 不可借-用“—” 表示 / 已借 --> |
|||
<span class="row-state row-lending">—</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="标签" width="100" align="center" :fixed="fixedStatusBar?false:'right'"> |
|||
<template slot-scope="scope"> |
|||
<!-- 未绑 / 已绑 --> |
|||
<span class="row-state row-binding">{{ scope.row.tid ? '已绑': '未绑' }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<!--分页组件--> |
|||
<el-pagination |
|||
:current-page="page.page+1" |
|||
:total="page.total" |
|||
:page-size="page.size" |
|||
:pager-count="5" |
|||
layout="total, prev, pager, next, sizes" |
|||
@size-change="crud.sizeChangeHandler($event)" |
|||
@current-change="getTableList" |
|||
/> |
|||
</el-card> |
|||
|
|||
<!-- 档案详情 --> |
|||
<ArchivesInfo ref="archivesInfo" :archives-details-data="archivesDetailsData" :archives-details-metadata.sync="archivesDetailsMetadata" /> |
|||
<!-- 装盒 --> |
|||
<Packing ref="packing" /> |
|||
<!-- 装盒 --> |
|||
<PartPacking ref="partPacking" /> |
|||
<!-- 绑定标签 --> |
|||
<Binding ref="bind" :is-binding="isBinding" /> |
|||
<!-- 借阅 --> |
|||
<el-dialog title="借阅" :visible.sync="lengingVisible" :close-on-click-modal="false" :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="lengingVisible=false">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import qs from 'qs' |
|||
import { del, FetchTableDisplayFields, FetchInitArchivesView, FetchFormDisplayFields, FetchArchivesDetails, FetchArchivesMetadata } from '@/api/archivesManage/archivesList' |
|||
import { header, form } from '@crud/crud' |
|||
import { exportFile } from '@/utils/index' |
|||
// import { initData } from '@/api/data' |
|||
// import crudOperation from '@crud/CRUD.operation' |
|||
// import rrOperation from '@crud/RR.operation' |
|||
// import pagination from '@crud/Pagination' |
|||
import PreviewForm from '@/views/components/category/PreviewForm' |
|||
import ArchivesInfo from '../archivesInfo/index' |
|||
import Packing from '../packing/index' |
|||
import PartPacking from '../partPacking/index' |
|||
import Binding from '../binding/index' |
|||
|
|||
export default { |
|||
name: 'ArchivesAnjuan', |
|||
components: { PreviewForm, ArchivesInfo, Packing, Binding, PartPacking }, |
|||
mixins: [ |
|||
header(), |
|||
form({}) |
|||
], |
|||
props: { |
|||
selectedCategory: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
}, |
|||
isProject: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
projectSelection: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
}, |
|||
fixedStatusBar: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
page: { |
|||
page: 0, |
|||
size: 10, |
|||
total: 0 |
|||
}, |
|||
anjuanData: [], |
|||
formVisible: false, |
|||
formTitle: '新建档案', |
|||
isAddOrEditBtn: null, |
|||
tableDisplayFields: [], // table-list-title字段 |
|||
getTableDisplayFieldsLoading: false, // table-loading |
|||
formPreviewData: [], // 预览界面data |
|||
stateOptions: [ // 搜索 - 状态选择 |
|||
{ key: '1', label: '全部' }, |
|||
{ key: '2', label: '未装' }, |
|||
{ key: '3', label: '未入' }, |
|||
{ key: '4', label: '在库' }, |
|||
{ key: '5', label: '待借' }, |
|||
{ key: '6', label: '已借' } |
|||
], |
|||
queryOption: [ |
|||
{ value: 'maintitle', label: '题名' }, |
|||
{ value: 'archive_no', label: '档号' }, |
|||
{ value: 'archive_year', label: '年度' } |
|||
], |
|||
inputSelect: '', |
|||
permission: { |
|||
add: ['admin', 'archivesList:add'], |
|||
edit: ['admin', 'archivesList:edit'], |
|||
del: ['admin', 'archivesList:del'], |
|||
download: ['admin', 'archivesList:download'] |
|||
}, |
|||
deleteVisible: false, // 删除dialog |
|||
deleteData: {}, // 删除选中data |
|||
selections: [], // table已选择的 |
|||
archivesTabIndex: 0, // 新增 |
|||
arcId: null, // 档案ID |
|||
arrySort: [], // 多项sort-query |
|||
uploadFileVisible: false, // 上传附件 |
|||
archivesInfoVisible: false, // 档案详情 |
|||
lengingVisible: false, // 借阅 |
|||
isBinding: false, // 判断是否已绑定标签 |
|||
parentsId: null, |
|||
isAnjuan: true, |
|||
totalSumAll: 0, // 删除时，内部文件数据求和 |
|||
yearGroup: [], |
|||
archivesDetailsData: [], |
|||
archivesDetailsMetadata: '' |
|||
} |
|||
}, |
|||
watch: { |
|||
selectedCategory: function(newValue, oldValue) { |
|||
}, |
|||
tableDisplayFields(val) { |
|||
this.doLayout() |
|||
}, |
|||
isProject: function(newValue, oldValue) { |
|||
}, |
|||
fixedStatusBar: function(newValue, oldValue) { |
|||
}, |
|||
projectSelection: function(newValue, oldValue) { |
|||
} |
|||
}, |
|||
created() { |
|||
// 初始化带select的输入框的 - 搜索 |
|||
this.inputSelect = this.queryOption[0].value |
|||
}, |
|||
mounted() { |
|||
}, |
|||
methods: { |
|||
doExport(fileName = '未知文件') { |
|||
this.crud.downloadLoading = true |
|||
if (this.selectedCategory.pid !== '0') { |
|||
this.parentsId = this.categoryId |
|||
} else { |
|||
this.parentsId = null |
|||
} |
|||
const params = { |
|||
'categoryId': this.selectedCategory.id, |
|||
'parentsId': this.parentsId |
|||
} |
|||
exportFile('api/archives/exportArchives?' + qs.stringify(params)) |
|||
this.crud.downloadLoading = false |
|||
}, |
|||
// 搜索-select |
|||
querySelect(val) { |
|||
this.inputSelect = val |
|||
}, |
|||
// 档案列表获取显示列 |
|||
getTableDisplayFields() { |
|||
this.getTableDisplayFieldsLoading = true |
|||
this.selections = [] |
|||
if (this.selectedCategory.isType === 2) { |
|||
if (this.selectedCategory.children.length !== 0) { |
|||
this.categoryId = this.selectedCategory.children[0].id |
|||
} |
|||
} else { |
|||
this.categoryId = this.selectedCategory.id |
|||
} |
|||
FetchTableDisplayFields({ categoryId: this.categoryId }).then(data => { |
|||
if (data) { |
|||
this.tableDisplayFields = data |
|||
this.getTableDisplayFieldsLoading = false |
|||
this.tableDisplayFields.map(item => { |
|||
if (item.queue) { |
|||
this.arrySort.push(item.fieldName + ', ' + (item.displayOrder === 1 ? 'asc' : 'desc')) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
// list |
|||
getTableList(page) { |
|||
this.page.page = isNaN(page - 1) ? 0 : page - 1 |
|||
this.formVisible = false |
|||
this.getTableDisplayFieldsLoading = true |
|||
if (this.selectedCategory.isType === 3 || this.selectedCategory.isType === 5) { |
|||
this.parentsId = null |
|||
} else { |
|||
this.parentsId = this.projectSelection.id |
|||
} |
|||
const params = { |
|||
'categoryId': this.categoryId, |
|||
'parentsId': this.parentsId, |
|||
'isdel': false, |
|||
'page': this.page.page, |
|||
'size': this.page.size, |
|||
'sort': this.arrySort |
|||
} |
|||
FetchInitArchivesView(params).then(data => { |
|||
this.getTableDisplayFieldsLoading = false |
|||
if (data) { |
|||
this.anjuanData = data.list.content |
|||
this.yearGroup = data.yearGroup |
|||
this.page.total = data.list.totalElements |
|||
} |
|||
}) |
|||
}, |
|||
// 著录界面-form/详情-api |
|||
handleForm(type) { |
|||
if (type === 'add') { |
|||
this.formTitle = '新增档案' |
|||
this.arcId = null |
|||
this.parentsId = this.projectSelection.id |
|||
} else if (type === 'edit') { |
|||
this.arcId = this.selections[0].id |
|||
this.formTitle = '编辑档案' |
|||
} |
|||
this.formVisible = true |
|||
this.form.dictionaryConfigId = {} |
|||
this.formPreviewData = [] |
|||
// 档案预编辑获取字段 |
|||
const params = { |
|||
categoryId: this.categoryId, |
|||
archivesId: this.arcId |
|||
} |
|||
this.getFormInfo(params, type) |
|||
}, |
|||
getFormInfo(params, type) { |
|||
FetchFormDisplayFields(params).then(data => { |
|||
// this.formPreviewData = data.showFiled.filter((fields) => { return fields.isInput }) |
|||
this.formPreviewData = data.showFiled |
|||
this.$nextTick(() => { |
|||
if (type === 'edit') { |
|||
this.$refs.previewForm.addOrUpdateForm = data.echo |
|||
} |
|||
}) |
|||
}) |
|||
}, |
|||
// form - submit |
|||
handlerArchivesSubmit() { |
|||
this.$refs.previewForm.submitForm('addOrUpdateForm', this.categoryId) |
|||
this.selections = [] |
|||
}, |
|||
// table - 双击查看详情 |
|||
tableDoubleClick(row) { |
|||
this.$refs.archivesInfo.archivesInfoVisible = true |
|||
this.$refs.archivesInfo.archivesTabIndex = 0 |
|||
const params = { |
|||
categoryId: this.categoryId, |
|||
archivesId: row.id |
|||
} |
|||
FetchArchivesDetails(params).then(data => { |
|||
this.archivesDetailsData = data |
|||
}) |
|||
|
|||
FetchArchivesMetadata(params).then(data => { |
|||
this.archivesDetailsMetadata = data |
|||
}) |
|||
}, |
|||
// table - 当前选中得row |
|||
clickRowHandler(row) { |
|||
// this.$refs.table.toggleRowSelection(row) |
|||
this.$emit('getSelections', row) |
|||
}, |
|||
// 触发单选 |
|||
handleCurrentChange(selection, row) { |
|||
this.selections = selection |
|||
// 判断案卷内的卷内-新增btn-状态 |
|||
this.isAnjuan = selection.length !== 1 |
|||
this.$emit('getJnInAjBtnState', this.isAnjuan) |
|||
}, |
|||
// 选择删除 |
|||
toDelete(data) { |
|||
this.deleteData = data |
|||
this.deleteVisible = true |
|||
|
|||
this.totalSumAll = 0 |
|||
this.deleteData.map((item) => { if (!isNaN(item.children_num)) this.totalSumAll += item.children_num }) |
|||
if (isNaN(this.totalSumAll)) { |
|||
return 0 |
|||
} |
|||
}, |
|||
getTotalSumAll() { |
|||
this.dataInfo.map((item) => { if (!isNaN(item.totalSum)) this.totalSumAll += item.totalSum }) |
|||
if (isNaN(this.totalSumAll)) { |
|||
return 0 |
|||
} |
|||
return this.totalSumAll |
|||
}, |
|||
// 确认删除 |
|||
handleDeltConfirm() { |
|||
this.deleteVisible = false |
|||
this.crud.delAllLoading = true |
|||
// this.crud.doDelete(this.deleteData) |
|||
const ids = [] |
|||
this.deleteData.forEach(val => { |
|||
ids.push(val.id) |
|||
}) |
|||
const params = { |
|||
'ids': ids, |
|||
'categoryId': this.categoryId |
|||
} |
|||
// 删除fetch |
|||
del(params).then(res => { |
|||
this.crud.delAllLoading = false |
|||
this.$notify({ |
|||
title: '删除成功', |
|||
type: 'success', |
|||
duration: 2500 |
|||
}) |
|||
this.selections = [] |
|||
this.getTableList() |
|||
}) |
|||
}, |
|||
// 删除 - 关闭 |
|||
handleClose(done) { |
|||
this.formVisible = false |
|||
this.deleteData = {} |
|||
done() |
|||
}, |
|||
/* 重新渲染table组件 防止table-fixed 错位 配合watch-table数据 */ |
|||
doLayout() { |
|||
this.$nextTick(() => { |
|||
this.$refs.table.doLayout() |
|||
}) |
|||
}, |
|||
// 上传附件 |
|||
uploadFile() { |
|||
this.uploadFileVisible = true |
|||
}, |
|||
uploadFileSave() { |
|||
this.uploadFileVisible = false |
|||
}, |
|||
// 绑定 |
|||
handleBinding(data) { |
|||
this.$refs.bind.bindingVisible = true |
|||
if (data.tid == null) { |
|||
this.isBinding = false |
|||
this.$refs.bind.bindingTitle = '绑定标签' |
|||
} else { |
|||
this.isBinding = true |
|||
this.$refs.bind.bindingTitle = '重新绑定' |
|||
} |
|||
}, |
|||
// 装盒 |
|||
handlePacking(data) { |
|||
this.$refs.packing.packingVisible = true |
|||
}, |
|||
// 分卷装盒 |
|||
handlePartPacking(data) { |
|||
this.$refs.partPacking.partPackingVisible = true |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
@import "~@/assets/styles/archives-manage.scss"; |
|||
::v-deep .el-table th.el-table__cell > .cell { |
|||
white-space: pre; |
|||
// white-space: pre-wrap; // 也行。 |
|||
} |
|||
</style> |
|||
@ -0,0 +1,453 @@ |
|||
<template> |
|||
<div class="archives-warp"> |
|||
<!--工具栏--> |
|||
<div class="head-container head-archives clearfix"> |
|||
<div class="archives-crud"> |
|||
<!-- 新增 --> |
|||
<el-button v-if="selectedCategory.isType !== 4" size="mini" :disabled="isAnjuan" icon="el-icon-plus" @click="handleForm('add')">新增</el-button> |
|||
<!-- 修改 --> |
|||
<el-button size="mini" icon="el-icon-edit" :disabled="selections.length !== 1" @click="handleForm('edit')">修改</el-button> |
|||
<!-- 删除btn 多选 --> |
|||
<el-button v-permission="permission.del" icon="el-icon-delete" size="mini" :loading="crud.delAllLoading" :disabled="selections.length === 0" @click="toDelete(selections)">删除</el-button> |
|||
<!-- 导出btn :disabled="!crud.data.length" --> |
|||
<el-button v-permission="permission.download" :loading="crud.downloadLoading" size="mini" icon="el-icon-download" @click="doExport">导出</el-button> |
|||
<!-- 上传附件btn 针对卷内/文件 单选 --> |
|||
<el-button :disabled="selections.length !== 1" size="mini" icon="el-icon-download" @click="uploadFile">上传附件</el-button> |
|||
</div> |
|||
<div class="head-search"> |
|||
<!-- @keyup.enter.native="crud.toQuery" --> |
|||
<el-input v-model="query[inputSelect]" clearable size="small" placeholder="请输入关键词" style="width: 200px;" class="input-prepend filter-item"> |
|||
<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> |
|||
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
<!--新增 / 编辑 表单组件--> |
|||
<el-dialog class="preview-dialog" :modal-append-to-body="false" :close-on-click-modal="false" :before-close="handleClose" :visible="formVisible" :title="formTitle"> |
|||
<span class="dialog-right-top" /> |
|||
<span class="dialog-left-bottom" /> |
|||
<div class="setting-dialog"> |
|||
<!-- form --> |
|||
<PreviewForm v-if="formPreviewData.length && archivesTabIndex == 0" ref="previewForm" :is-disabled="false" :form-preview-data.sync="formPreviewData" :selected-category="selectedCategory" :parents-id="parentsId" :arc-id="arcId" @emitTableList="getTableList" /> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<!-- :loading="crud.status.cu === 2" --> |
|||
<el-button type="primary" @click="handlerArchivesSubmit">保存</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
<!-- 删除档案 --> |
|||
<el-dialog title="删除档案" :visible.sync="deleteVisible" :close-on-click-modal="false" :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> |
|||
<p>数据来源：卷内 {{ selections.length }} 条数据 附件 {{ totalSumAll }} 条数据 </p> |
|||
<p class="delt-tip"><span>提示：如果删除当前档案，此档案内所附带的文件会一并删除</span></p> |
|||
</div> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click.native="handleDeltConfirm">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
<!-- table表格渲染 --> |
|||
<!-- height="calc(100vh - 350px)" --> |
|||
<el-card class="box-card" shadow="never"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
<el-table |
|||
ref="table" |
|||
v-loading="crud.loading || getTableDisplayFieldsLoading" |
|||
class="archives-table" |
|||
:data="junneiData" |
|||
highlight-current-row |
|||
style="width: 100%; " |
|||
@selection-change="crud.selectionChangeHandler" |
|||
@row-click="clickRowHandler" |
|||
@cell-dblclick="tableDoubleClick" |
|||
@select="handleCurrentChange" |
|||
> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column type="index" label="序号" width="55" align="center" /> |
|||
<el-table-column label="文件" prop="children_num" 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> |
|||
<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-column label="装盒" width="100" align="center" :fixed="fixedStatusBar?false:'right'"> |
|||
<!-- state-active 已装/已入/已借/已绑 --> |
|||
<template slot-scope="scope"> |
|||
<!-- 未装 / 已装 --> |
|||
<span class="row-state row-packing state-active">{{ scope.row.case_no ? '已装': '未装' }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="入库" width="100" align="center" :fixed="fixedStatusBar?false:'right'"> |
|||
<template slot-scope=""> |
|||
<!-- 未入 / 已入 --> |
|||
<span class="row-state row-warehousing">未入</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<!--分页组件--> |
|||
<el-pagination |
|||
:current-page="page.page+1" |
|||
:total="page.total" |
|||
:page-size="page.size" |
|||
:pager-count="5" |
|||
layout="total, prev, pager, next, sizes" |
|||
@size-change="crud.sizeChangeHandler($event)" |
|||
@current-change="getTableList" |
|||
/> |
|||
</el-card> |
|||
|
|||
<!-- 档案详情 --> |
|||
<ArchivesInfo ref="archivesInfo" :archives-details-data="archivesDetailsData" :archives-details-metadata.sync="archivesDetailsMetadata" /> |
|||
|
|||
<!-- 上传附件 --> |
|||
<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 ref="uploadFile" /> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button :loading="crud.status.cu === 2" type="primary" @click="uploadFileSave">保存</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import qs from 'qs' |
|||
import { del, FetchTableDisplayFields, FetchInitArchivesView, FetchFormDisplayFields, FetchArchivesDetails, FetchArchivesMetadata } from '@/api/archivesManage/archivesList' |
|||
import { header, form } from '@crud/crud' |
|||
import { exportFile } from '@/utils/index' |
|||
// import { initData } from '@/api/data' |
|||
// import crudOperation from '@crud/CRUD.operation' |
|||
// import rrOperation from '@crud/RR.operation' |
|||
// import pagination from '@crud/Pagination' |
|||
import PreviewForm from '@/views/components/category/PreviewForm' |
|||
import ArchivesInfo from '../archivesInfo/index' |
|||
import UploadFile from '../uploadFile/index' |
|||
|
|||
export default { |
|||
name: 'ArchivesJuannei', |
|||
components: { PreviewForm, ArchivesInfo, UploadFile }, |
|||
mixins: [ |
|||
header(), |
|||
form({}) |
|||
], |
|||
props: { |
|||
selectedCategory: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
}, |
|||
isAnjuan: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
fixedStatusBar: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
anjuanSelection: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
page: { |
|||
page: 0, |
|||
size: 10, |
|||
total: 0 |
|||
}, |
|||
junneiData: [], |
|||
formVisible: false, |
|||
formTitle: '新建档案', |
|||
isAddOrEditBtn: null, |
|||
tableDisplayFields: [], // table-list-title字段 |
|||
getTableDisplayFieldsLoading: false, // table-loading |
|||
formPreviewData: [], // 预览界面data |
|||
stateOptions: [ // 搜索 - 状态选择 |
|||
{ key: '1', label: '全部' }, |
|||
{ key: '2', label: '未装' }, |
|||
{ key: '3', label: '未入' }, |
|||
{ key: '4', label: '在库' }, |
|||
{ key: '5', label: '待借' }, |
|||
{ key: '6', label: '已借' } |
|||
], |
|||
queryOption: [ |
|||
{ value: 'maintitle', label: '题名' }, |
|||
{ value: 'archive_no', label: '档号' }, |
|||
{ value: 'archive_year', label: '年度' } |
|||
], |
|||
inputSelect: '', |
|||
permission: { |
|||
add: ['admin', 'archivesList:add'], |
|||
edit: ['admin', 'archivesList:edit'], |
|||
del: ['admin', 'archivesList:del'], |
|||
download: ['admin', 'archivesList:download'] |
|||
}, |
|||
deleteVisible: false, // 删除dialog |
|||
deleteData: {}, // 删除选中data |
|||
selections: [], // table已选择的 |
|||
archivesTabIndex: 0, // 新增 |
|||
arcId: null, // 档案ID |
|||
arrySort: [], // 多项sort-query |
|||
uploadFileVisible: false, // 上传附件 |
|||
archivesInfoVisible: false, // 档案详情 |
|||
lengingVisible: false, // 借阅 |
|||
isBinding: false, // 判断是否已绑定标签 |
|||
parentsId: null, |
|||
categoryId: null, |
|||
totalSumAll: 0, |
|||
yearGroup: [], |
|||
archivesDetailsData: [], |
|||
archivesDetailsMetadata: '' |
|||
} |
|||
}, |
|||
watch: { |
|||
selectedCategory: function(newValue, oldValue) { |
|||
this.setCategory = newValue |
|||
}, |
|||
tableDisplayFields(val) { |
|||
this.doLayout() |
|||
}, |
|||
isAnjuan: function(newValue, oldValue) { |
|||
}, |
|||
fixedStatusBar: function(newValue, oldValue) { |
|||
}, |
|||
anjuanSelection: function(newValue, oldValue) { |
|||
} |
|||
}, |
|||
created() { |
|||
// 初始化带select的输入框的 - 搜索 |
|||
this.inputSelect = this.queryOption[0].value |
|||
this.selections = [] |
|||
}, |
|||
mounted() { |
|||
// this.getTableDisplayFields() |
|||
}, |
|||
methods: { |
|||
doExport(fileName = '未知文件') { |
|||
this.crud.downloadLoading = true |
|||
if (this.selectedCategory.pid !== '0') { |
|||
this.parentsId = this.selectedCategory.pid |
|||
} else { |
|||
this.parentsId = null |
|||
} |
|||
const params = { |
|||
'categoryId': this.selectedCategory.id, |
|||
'parentsId': this.parentsId |
|||
} |
|||
exportFile('api/archives/exportArchives?' + qs.stringify(params)) |
|||
this.crud.downloadLoading = false |
|||
}, |
|||
// 搜索-select |
|||
querySelect(val) { |
|||
this.inputSelect = val |
|||
}, |
|||
// 档案列表获取显示列 |
|||
getTableDisplayFields() { |
|||
this.selections = [] |
|||
if (this.selectedCategory.isType === 2) { |
|||
if (this.selectedCategory.children.length !== 0) { |
|||
this.categoryId = this.selectedCategory.children[0].children[0].id |
|||
} |
|||
} else if (this.selectedCategory.isType === 3) { |
|||
if (this.selectedCategory.children.length !== 0) { |
|||
this.categoryId = this.selectedCategory.children[0].id |
|||
} |
|||
} else { |
|||
this.categoryId = this.selectedCategory.id |
|||
} |
|||
FetchTableDisplayFields({ categoryId: this.categoryId }).then(data => { |
|||
if (data) { |
|||
this.tableDisplayFields = data |
|||
this.getTableDisplayFieldsLoading = false |
|||
this.tableDisplayFields.map(item => { |
|||
if (item.queue) { |
|||
this.arrySort.push(item.fieldName + ', ' + (item.displayOrder === 1 ? 'asc' : 'desc')) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
// list |
|||
getTableList(page) { |
|||
this.page.page = isNaN(page - 1) ? 0 : page - 1 |
|||
this.formVisible = false |
|||
this.getTableDisplayFieldsLoading = true |
|||
if (this.selectedCategory.isType !== 4) { |
|||
this.parentsId = this.anjuanSelection.id |
|||
} else { |
|||
this.parentsId = null |
|||
} |
|||
const params = { |
|||
'categoryId': this.categoryId, |
|||
'parentsId': this.parentsId, |
|||
'isdel': false, |
|||
'page': this.page.page, |
|||
'size': this.page.size, |
|||
'sort': this.arrySort |
|||
} |
|||
FetchInitArchivesView(params).then(data => { |
|||
this.getTableDisplayFieldsLoading = false |
|||
if (data) { |
|||
this.junneiData = data.list.content |
|||
this.yearGroup = data.yearGroup |
|||
this.page.total = data.list.totalElements |
|||
} |
|||
}) |
|||
}, |
|||
// 著录界面-form/详情-api |
|||
handleForm(type) { |
|||
if (type === 'add') { |
|||
this.formTitle = '新增档案' |
|||
this.arcId = null |
|||
this.parentsId = this.anjuanSelection.id |
|||
} else if (type === 'edit') { |
|||
this.arcId = this.selections[0].id |
|||
this.formTitle = '编辑档案' |
|||
} |
|||
this.formVisible = true |
|||
this.form.dictionaryConfigId = {} |
|||
this.formPreviewData = [] |
|||
// 档案预编辑获取字段 |
|||
const params = { |
|||
categoryId: this.categoryId, |
|||
archivesId: this.arcId |
|||
} |
|||
this.getFormInfo(params, type) |
|||
}, |
|||
getFormInfo(params, type) { |
|||
FetchFormDisplayFields(params).then(data => { |
|||
// this.formPreviewData = data.showFiled.filter((fields) => { return fields.isInput }) |
|||
this.formPreviewData = data.showFiled |
|||
this.$nextTick(() => { |
|||
if (type === 'edit') { |
|||
this.$refs.previewForm.addOrUpdateForm = data.echo |
|||
} |
|||
}) |
|||
}) |
|||
}, |
|||
// form - submit |
|||
handlerArchivesSubmit() { |
|||
this.$refs.previewForm.submitForm('addOrUpdateForm', this.categoryId) |
|||
this.selections = [] |
|||
}, |
|||
// table - 双击查看详情 |
|||
tableDoubleClick(row) { |
|||
this.$refs.archivesInfo.archivesInfoVisible = true |
|||
this.$refs.archivesInfo.archivesTabIndex = 0 |
|||
const params = { |
|||
categoryId: this.categoryId, |
|||
archivesId: row.id |
|||
} |
|||
FetchArchivesDetails(params).then(data => { |
|||
this.archivesDetailsData = data |
|||
}) |
|||
|
|||
FetchArchivesMetadata(params).then(data => { |
|||
this.archivesDetailsMetadata = data |
|||
}) |
|||
}, |
|||
// table - 当前选中得row |
|||
clickRowHandler(row) { |
|||
}, |
|||
// 触发单选 |
|||
handleCurrentChange(selection, row) { |
|||
this.selections = selection |
|||
}, |
|||
// 选择删除 |
|||
toDelete(data) { |
|||
this.deleteData = data |
|||
this.deleteVisible = true |
|||
|
|||
this.totalSumAll = 0 |
|||
this.deleteData.map((item) => { if (!isNaN(item.children_num)) this.totalSumAll += item.children_num }) |
|||
if (isNaN(this.totalSumAll)) { |
|||
return 0 |
|||
} |
|||
}, |
|||
// 确认删除 |
|||
handleDeltConfirm() { |
|||
this.deleteVisible = false |
|||
this.crud.delAllLoading = true |
|||
// this.crud.doDelete(this.deleteData) |
|||
const ids = [] |
|||
this.deleteData.forEach(val => { |
|||
ids.push(val.id) |
|||
}) |
|||
const params = { |
|||
'ids': ids, |
|||
'categoryId': this.categoryId |
|||
} |
|||
// 删除fetch |
|||
del(params).then(res => { |
|||
this.crud.delAllLoading = false |
|||
this.$notify({ |
|||
title: '删除成功', |
|||
type: 'success', |
|||
duration: 2500 |
|||
}) |
|||
this.selections = [] |
|||
this.getTableList() |
|||
}) |
|||
}, |
|||
// 删除 - 关闭 |
|||
handleClose(done) { |
|||
this.formVisible = false |
|||
this.deleteData = {} |
|||
done() |
|||
}, |
|||
/* 重新渲染table组件 防止table-fixed 错位 配合watch-table数据 */ |
|||
doLayout() { |
|||
this.$nextTick(() => { |
|||
this.$refs.table.doLayout() |
|||
}) |
|||
}, |
|||
// 上传附件 |
|||
uploadFile() { |
|||
this.uploadFileVisible = true |
|||
}, |
|||
uploadFileSave() { |
|||
this.uploadFileVisible = false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
@import "~@/assets/styles/archives-manage.scss"; |
|||
::v-deep .el-table th.el-table__cell > .cell { |
|||
white-space: pre; |
|||
// white-space: pre-wrap; // 也行。 |
|||
} |
|||
</style> |
|||
@ -0,0 +1,369 @@ |
|||
<template> |
|||
<div class="archives-warp"> |
|||
<!--工具栏--> |
|||
<div class="head-container head-archives clearfix"> |
|||
<div class="archives-crud"> |
|||
<!-- 新增 --> |
|||
<el-button size="mini" icon="el-icon-plus" @click="handleForm('add')">新增</el-button> |
|||
<!-- 修改 --> |
|||
<el-button size="mini" icon="el-icon-edit" :disabled="selections .length !== 1" @click="handleForm('edit')">修改</el-button> |
|||
<!-- 删除btn 多选 --> |
|||
<el-button v-permission="permission.del" icon="el-icon-delete" size="mini" :loading="crud.delAllLoading" :disabled="selections .length === 0" @click="toDelete(selections )">删除</el-button> |
|||
</div> |
|||
<div class="head-search"> |
|||
<!-- @keyup.enter.native="crud.toQuery" --> |
|||
<el-input v-model="query[inputSelect]" clearable size="small" placeholder="请输入关键词" style="width: 200px;" class="input-prepend filter-item"> |
|||
<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> |
|||
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
<!--新增 / 编辑 表单组件--> |
|||
<el-dialog class="preview-dialog" :modal-append-to-body="false" :close-on-click-modal="false" :before-close="handleClose" :visible="formVisible" :title="formTitle"> |
|||
<span class="dialog-right-top" /> |
|||
<span class="dialog-left-bottom" /> |
|||
<div class="setting-dialog"> |
|||
<!-- form --> |
|||
<PreviewForm v-if="formPreviewData.length && archivesTabIndex == 0" ref="previewForm" :is-disabled="false" :form-preview-data.sync="formPreviewData" :selected-category="selectedCategory" :parents-id="parentsId" :arc-id="arcId" @emitTableList="getTableList" /> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<!-- :loading="crud.status.cu === 2" --> |
|||
<el-button type="primary" @click="handlerArchivesSubmit">保存</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
<!-- 删除档案 --> |
|||
<el-dialog title="删除档案" :visible.sync="deleteVisible" :close-on-click-modal="false" :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> |
|||
<p>数据来源：项目 {{ selections.length }} 条数据 案卷 {{ totalSumAll }} 条数据</p> |
|||
<p class="delt-tip"><span>提示：如果删除当前档案，此档案内所附带的文件会一并删除</span></p> |
|||
</div> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click.native="handleDeltConfirm">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
<!-- table表格渲染 --> |
|||
<!-- height="calc(100vh - 350px)" --> |
|||
<el-card class="box-card" shadow="never"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
<el-table |
|||
ref="table" |
|||
v-loading="crud.loading || getTableDisplayFieldsLoading" |
|||
class="archives-table" |
|||
:data="projectData" |
|||
highlight-current-row |
|||
style="width: 100%; " |
|||
@selection-change="crud.selectionChangeHandler" |
|||
@row-click="clickRowHandler" |
|||
@cell-dblclick="tableDoubleClick" |
|||
@select="handleCurrentChange" |
|||
> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column type="index" label="序号" width="55" align="center" /> |
|||
<el-table-column label="案卷" prop="children_num" 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> |
|||
<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> |
|||
<!--分页组件--> |
|||
<el-pagination |
|||
:current-page="page.page+1" |
|||
:total="page.total" |
|||
:page-size="page.size" |
|||
:pager-count="5" |
|||
layout="total, prev, pager, next, sizes" |
|||
@size-change="crud.sizeChangeHandler($event)" |
|||
@current-change="getTableList" |
|||
/> |
|||
</el-card> |
|||
|
|||
<!-- 档案详情 --> |
|||
<ArchivesInfo ref="archivesInfo" :archives-details-data="archivesDetailsData" :archives-details-metadata.sync="archivesDetailsMetadata" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { del, FetchTableDisplayFields, FetchInitArchivesView, FetchFormDisplayFields, FetchArchivesDetails, FetchArchivesMetadata } from '@/api/archivesManage/archivesList' |
|||
import { header, form } from '@crud/crud' |
|||
// import { initData } from '@/api/data' |
|||
// import crudOperation from '@crud/CRUD.operation' |
|||
// import rrOperation from '@crud/RR.operation' |
|||
// import pagination from '@crud/Pagination' |
|||
import PreviewForm from '@/views/components/category/PreviewForm' |
|||
import ArchivesInfo from '../archivesInfo/index' |
|||
|
|||
export default { |
|||
name: 'ArchivesProject', |
|||
components: { PreviewForm, ArchivesInfo }, |
|||
mixins: [ |
|||
header(), |
|||
form({}) |
|||
], |
|||
props: { |
|||
selectedCategory: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
page: { |
|||
page: 0, |
|||
size: 10, |
|||
total: 0 |
|||
}, |
|||
projectData: [], |
|||
formVisible: false, |
|||
formTitle: '新建项目', |
|||
isAddOrEditBtn: null, |
|||
tableDisplayFields: [], // table-list-title字段 |
|||
getTableDisplayFieldsLoading: false, // table-loading |
|||
formPreviewData: [], // 预览界面data |
|||
stateOptions: [ // 搜索 - 状态选择 |
|||
{ key: '1', label: '全部' }, |
|||
{ key: '2', label: '未装' }, |
|||
{ key: '3', label: '未入' }, |
|||
{ key: '4', label: '在库' }, |
|||
{ key: '5', label: '待借' }, |
|||
{ key: '6', label: '已借' } |
|||
], |
|||
queryOption: [ |
|||
{ value: 'maintitle', label: '题名' }, |
|||
{ value: 'archive_no', label: '档号' }, |
|||
{ value: 'archive_year', label: '年度' } |
|||
], |
|||
inputSelect: '', |
|||
permission: { |
|||
add: ['admin', 'archivesList:add'], |
|||
edit: ['admin', 'archivesList:edit'], |
|||
del: ['admin', 'archivesList:del'], |
|||
download: ['admin', 'archivesList:download'] |
|||
}, |
|||
fixedStatusBar: false, // table-右侧fixed |
|||
deleteVisible: false, // 删除dialog |
|||
deleteData: {}, // 删除选中data |
|||
selections: [], // table已选择的 |
|||
archivesTabIndex: 0, // 新增 |
|||
arcId: null, // 档案ID |
|||
arrySort: [], // 多项sort-query |
|||
uploadFileVisible: false, // 上传附件 |
|||
archivesInfoVisible: false, // 档案详情 |
|||
lengingVisible: false, // 借阅 |
|||
isBinding: false, // 判断是否已绑定标签 |
|||
parentsId: null, |
|||
isProject: true, |
|||
anjuanSelection: {}, |
|||
totalSumAll: 0, |
|||
yearGroup: [], |
|||
archivesDetailsData: [], |
|||
archivesDetailsMetadata: '' |
|||
} |
|||
}, |
|||
watch: { |
|||
selectedCategory: function(newValue, oldValue) { |
|||
}, |
|||
tableDisplayFields(val) { |
|||
this.doLayout() |
|||
} |
|||
}, |
|||
created() { |
|||
// 初始化带select的输入框的 - 搜索 |
|||
this.inputSelect = this.queryOption[0].value |
|||
this.selections = [] |
|||
}, |
|||
mounted() { |
|||
this.getTableDisplayFields() |
|||
}, |
|||
methods: { |
|||
// 搜索-select |
|||
querySelect(val) { |
|||
this.inputSelect = val |
|||
}, |
|||
// 档案列表获取显示列 |
|||
getTableDisplayFields() { |
|||
this.selections = [] |
|||
FetchTableDisplayFields({ categoryId: this.selectedCategory.id }).then(data => { |
|||
if (data) { |
|||
this.tableDisplayFields = data |
|||
this.getTableDisplayFieldsLoading = false |
|||
this.tableDisplayFields.map(item => { |
|||
if (item.queue) { |
|||
this.arrySort.push(item.fieldName + ', ' + (item.displayOrder === 1 ? 'asc' : 'desc')) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
// list |
|||
getTableList(page) { |
|||
this.page.page = isNaN(page - 1) ? 0 : page - 1 |
|||
this.formVisible = false |
|||
this.getTableDisplayFieldsLoading = true |
|||
this.parentsId = null |
|||
const params = { |
|||
'categoryId': this.selectedCategory.id, |
|||
'parentsId': this.parentsId, |
|||
'isdel': false, |
|||
'page': this.page.page, |
|||
'size': this.page.size, |
|||
'sort': this.arrySort |
|||
} |
|||
FetchInitArchivesView(params).then(data => { |
|||
this.getTableDisplayFieldsLoading = false |
|||
if (data) { |
|||
this.projectData = data.list.content |
|||
this.yearGroup = data.yearGroup |
|||
this.page.total = data.list.totalElements |
|||
} |
|||
}) |
|||
}, |
|||
// 著录界面-form/详情-api |
|||
handleForm(type) { |
|||
if (type === 'add') { |
|||
this.arcId = null |
|||
this.formTitle = '新建项目' |
|||
} else if (type === 'edit') { |
|||
this.arcId = this.selections[0].id |
|||
this.formTitle = '编辑项目' |
|||
} |
|||
this.formVisible = true |
|||
this.form.dictionaryConfigId = {} |
|||
this.formPreviewData = [] |
|||
// 档案预编辑获取字段 |
|||
const params = { |
|||
categoryId: this.selectedCategory.id, |
|||
archivesId: this.arcId |
|||
} |
|||
this.getFormInfo(params, type) |
|||
}, |
|||
getFormInfo(params, type) { |
|||
FetchFormDisplayFields(params).then(data => { |
|||
// this.formPreviewData = data.showFiled.filter((fields) => { return fields.isInput }) |
|||
this.formPreviewData = data.showFiled |
|||
this.$nextTick(() => { |
|||
if (type === 'edit') { |
|||
this.$refs.previewForm.addOrUpdateForm = data.echo |
|||
} |
|||
}) |
|||
}) |
|||
}, |
|||
// form - submit |
|||
handlerArchivesSubmit() { |
|||
this.$refs.previewForm.submitForm('addOrUpdateForm', this.selectedCategory.id) |
|||
this.selections = [] |
|||
}, |
|||
// table - 双击查看详情 |
|||
tableDoubleClick(row) { |
|||
this.$refs.archivesInfo.archivesInfoVisible = true |
|||
this.$refs.archivesInfo.archivesTabIndex = 0 |
|||
const params = { |
|||
categoryId: this.categoryId, |
|||
archivesId: row.id |
|||
} |
|||
FetchArchivesDetails(params).then(data => { |
|||
this.archivesDetailsData = data |
|||
}) |
|||
|
|||
FetchArchivesMetadata(params).then(data => { |
|||
this.archivesDetailsMetadata = data |
|||
}) |
|||
}, |
|||
// table - 当前选中得row |
|||
clickRowHandler(row) { |
|||
this.$emit('getProjectSelections', row) |
|||
}, |
|||
// 触发单选 |
|||
handleCurrentChange(selection, row) { |
|||
// this.$refs.table.toggleRowSelection(row) |
|||
this.selections = selection |
|||
// 判断项目内案卷-新增btn-状态 |
|||
this.isProject = selection.length !== 1 |
|||
this.$emit('getAjInProjectBtnState', this.isProject) |
|||
}, |
|||
// 选择删除 |
|||
toDelete(data) { |
|||
this.deleteData = data |
|||
this.deleteVisible = true |
|||
this.totalSumAll = 0 |
|||
this.deleteData.map((item) => { if (!isNaN(item.children_num)) this.totalSumAll += item.children_num }) |
|||
if (isNaN(this.totalSumAll)) { |
|||
return 0 |
|||
} |
|||
}, |
|||
// 确认删除 |
|||
handleDeltConfirm() { |
|||
this.deleteVisible = false |
|||
this.crud.delAllLoading = true |
|||
// this.crud.doDelete(this.deleteData) |
|||
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.selections = [] |
|||
this.getTableList() |
|||
}) |
|||
}, |
|||
// 删除 - 关闭 |
|||
handleClose(done) { |
|||
this.formVisible = false |
|||
this.deleteData = {} |
|||
done() |
|||
}, |
|||
/* 重新渲染table组件 防止table-fixed 错位 配合watch-table数据 */ |
|||
doLayout() { |
|||
this.$nextTick(() => { |
|||
this.$refs.table.doLayout() |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
@import "~@/assets/styles/archives-manage.scss"; |
|||
::v-deep .el-table th.el-table__cell > .cell { |
|||
white-space: pre; |
|||
// white-space: pre-wrap; // 也行。 |
|||
} |
|||
</style> |
|||
@ -0,0 +1,230 @@ |
|||
<template> |
|||
<div> |
|||
<!-- table表格渲染 --> |
|||
<el-card class="box-card" shadow="never"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
<el-table |
|||
ref="table" |
|||
v-loading="crud.loading || getTableDisplayFieldsLoading" |
|||
class="archives-table" |
|||
:data="anjuanData" |
|||
highlight-current-row |
|||
style="width: 100%; " |
|||
height="calc(100vh - 350px)" |
|||
@selection-change="crud.selectionChangeHandler" |
|||
@row-click="clickRowHandler" |
|||
@cell-dblclick="tableDoubleClick" |
|||
> |
|||
<el-table-column type="selection" 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> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row[field.fieldName] }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="装盒" width="100" align="center" :fixed="fixedStatusBar?false:'right'"> |
|||
<!-- state-active 已装/已入/已借/已绑 --> |
|||
<template slot-scope="scope"> |
|||
<!-- 未装 / 已装 --> |
|||
<span class="row-state row-packing state-active">{{ scope.row.case_no ? '已装': '未装' }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="入库" width="100" align="center" :fixed="fixedStatusBar?false:'right'"> |
|||
<template slot-scope=""> |
|||
<!-- 未入 / 已入 --> |
|||
<span class="row-state row-warehousing">未入</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="借阅" width="100" align="center" :fixed="fixedStatusBar?false:'right'"> |
|||
<template slot-scope=""> |
|||
<!-- 待借 / 不可借-用“—” 表示 / 已借 --> |
|||
<span class="row-state row-lending">—</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="标签" width="100" align="center" :fixed="fixedStatusBar?false:'right'"> |
|||
<template slot-scope="scope"> |
|||
<!-- 未绑 / 已绑 --> |
|||
<span class="row-state row-binding">{{ scope.row.tid ? '已绑': '未绑' }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<!--分页组件--> |
|||
<pagination /> |
|||
</el-card> |
|||
|
|||
<!-- 档案详情 --> |
|||
<ArchivesInfo ref="archivesInfo" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { FetchInitArchivesView, FetchTableDisplayFields } from '@/api/archivesManage/archivesList' |
|||
import { header, form } from '@crud/crud' |
|||
// import { initData } from '@/api/data' |
|||
// import crudOperation from '@crud/CRUD.operation' |
|||
// import rrOperation from '@crud/RR.operation' |
|||
import pagination from '@crud/Pagination' |
|||
import ArchivesInfo from '../archivesInfo/index' |
|||
|
|||
export default { |
|||
name: 'TableAnjuan', |
|||
components: { pagination, ArchivesInfo }, |
|||
mixins: [ |
|||
header(), |
|||
form({}) |
|||
], |
|||
props: { |
|||
selectedCategory: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
anjuanData: [], |
|||
formVisible: false, |
|||
formTitle: '新建档案', |
|||
isAddOrEditBtn: null, |
|||
tableDisplayFields: [], // table-list-title字段 |
|||
getTableDisplayFieldsLoading: false, // table-loading |
|||
formPreviewData: [], // 预览界面data |
|||
stateOptions: [ // 搜索 - 状态选择 |
|||
{ key: '1', label: '全部' }, |
|||
{ key: '2', label: '未装' }, |
|||
{ key: '3', label: '未入' }, |
|||
{ key: '4', label: '在库' }, |
|||
{ key: '5', label: '待借' }, |
|||
{ key: '6', label: '已借' } |
|||
], |
|||
queryOption: [ |
|||
{ value: 'maintitle', label: '题名' }, |
|||
{ value: 'archive_no', label: '档号' }, |
|||
{ value: 'archive_year', label: '年度' } |
|||
], |
|||
inputSelect: '', |
|||
permission: { |
|||
add: ['admin', 'archivesList:add'], |
|||
edit: ['admin', 'archivesList:edit'], |
|||
del: ['admin', 'archivesList:del'], |
|||
download: ['admin', 'archivesList:download'] |
|||
}, |
|||
fixedStatusBar: false, // table-右侧fixed |
|||
deleteVisible: false, // 删除dialog |
|||
deleteData: {}, // 删除选中data |
|||
selections: [], // table已选择的 |
|||
archivesTabIndex: 0, // 新增 |
|||
arcId: null, // 档案ID |
|||
arrySort: [], // 多项sort-query |
|||
uploadFileVisible: false, // 上传附件 |
|||
archivesInfoVisible: false, // 档案详情 |
|||
lengingVisible: false, // 借阅 |
|||
isBinding: false, // 判断是否已绑定标签 |
|||
parentsId: null |
|||
} |
|||
}, |
|||
watch: { |
|||
selectedCategory: function(newValue, oldValue) { |
|||
// 案卷 卷内 文件 |
|||
if (newValue.isType === 3 || newValue.isType === 4 || newValue.isType === 5) { |
|||
// this.crud.query.categoryId = newValue.id |
|||
} |
|||
}, |
|||
tableDisplayFields(val) { |
|||
this.doLayout() |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.getTableDisplayFields() |
|||
}, |
|||
methods: { |
|||
// 档案列表获取显示列 |
|||
getTableDisplayFields() { |
|||
FetchTableDisplayFields({ categoryId: this.selectedCategory.id }).then(data => { |
|||
this.tableDisplayFields = data |
|||
this.getTableDisplayFieldsLoading = false |
|||
this.tableDisplayFields.map(item => { |
|||
if (item.queue) { |
|||
this.arrySort.push(item.fieldName + ', ' + (item.displayOrder === 1 ? 'asc' : 'desc')) |
|||
} |
|||
}) |
|||
this.getTableList() |
|||
}) |
|||
}, |
|||
// list |
|||
getTableList() { |
|||
if (this.selectedCategory.pid !== '0') { |
|||
this.parentsId = this.selectedCategory.pid |
|||
} else { |
|||
this.parentsId = null |
|||
} |
|||
const params = { |
|||
'categoryId': this.selectedCategory.id, |
|||
'parentsId': this.parentsId, |
|||
'isdel': false, |
|||
'page': 0, |
|||
'size': 10, |
|||
'sort': this.arrySort |
|||
} |
|||
FetchInitArchivesView(params).then(data => { |
|||
if (data) { |
|||
this.anjuanData = data.content |
|||
} |
|||
}) |
|||
}, |
|||
// table - 双击查看详情 |
|||
tableDoubleClick(row) { |
|||
this.$refs.archivesInfo.archivesInfoVisible = true |
|||
const params = { |
|||
categoryId: this.selectedCategory.id, |
|||
archivesId: row.id |
|||
} |
|||
this.getFormInfo(params) |
|||
}, |
|||
// table - 当前选中得row |
|||
clickRowHandler(row) { |
|||
this.$refs.table.toggleRowSelection(row) |
|||
this.selections = this.crud.selections |
|||
console.log(this.crud.selections.id) |
|||
}, |
|||
// 选择删除 |
|||
toDelete(data) { |
|||
this.deleteData = data |
|||
this.deleteVisible = true |
|||
}, |
|||
/* 重新渲染table组件 防止table-fixed 错位 配合watch-table数据 */ |
|||
doLayout() { |
|||
this.$nextTick(() => { |
|||
this.$refs.table.doLayout() |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
@import "~@/assets/styles/archives-manage.scss"; |
|||
.preview-dialog { |
|||
::v-deep .el-dialog { |
|||
.el-dialog__body{ |
|||
padding: 0; |
|||
} |
|||
.preview-content { |
|||
width: auto !important; |
|||
margin-right: 6px; |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
.el-textarea__inner { |
|||
border: 1px solid #339cff; |
|||
background-color: transparent; |
|||
} |
|||
} |
|||
.dialog-footer{ |
|||
margin: 0 auto; |
|||
padding: 15px 0 20px 0; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue