You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
562 lines
19 KiB
562 lines
19 KiB
<template>
|
|
<div class="app-container">
|
|
<div class="collect-paper-header">
|
|
<div class="paper-step-item paper-step1">
|
|
<i />
|
|
<p>选择组卷条件</p>
|
|
</div>
|
|
<div :class="['paper-step-dot', step===2 || step===3 ? 'dot-active':'']" />
|
|
<div :class="['paper-step-item paper-step2', step===2 || step===3 ? 'paper-step2-active':'']">
|
|
<i />
|
|
<p>确认组卷条目</p>
|
|
</div>
|
|
<div :class="['paper-step-dot', step===3 ? 'dot-active':'']" />
|
|
<div :class="['paper-step-item', 'paper-step3', step===3 ? 'paper-step3-active':'']">
|
|
<i />
|
|
<p>补充案卷数据</p>
|
|
</div>
|
|
</div>
|
|
<div class="collect-paper-filter">
|
|
<div class="collect-paper-form">
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="年份" prop="years">
|
|
<el-select v-model="form.years" placeholder="请选择" style="width: 110px;" :disabled="step===2 || step===3">
|
|
<el-option
|
|
v-for="item in yearsOptions"
|
|
:key="item"
|
|
:label="item"
|
|
:value="item"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="月份" prop="month">
|
|
<el-select v-model="form.month" placeholder="请选择" style="width: 110px;" :disabled="step===2 || step===3">
|
|
<el-option
|
|
v-for="item in monthOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-form-item label="全宗" prop="fonds.id">
|
|
<el-select v-model="form.fonds.id" placeholder="请选择" style="width: 320px;" :disabled="step===2 || step===3" @click.native="lastValue = form.fonds.id" @change="changeFondsValue($event)">
|
|
<el-option
|
|
v-for="(item,index) in fondsOptions"
|
|
:key="index"
|
|
:label="item.fondsName"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="档案门类" prop="categoryId">
|
|
<treeselect
|
|
v-model="form.categoryId"
|
|
:options="categoryDatas"
|
|
placeholder="请选择"
|
|
flat
|
|
:multiple="false"
|
|
:normalizer="normalizer"
|
|
:disabled="step===2 || step===3"
|
|
@select="selectCategoryTree"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="档案分类" prop="archivesClassId">
|
|
<treeselect
|
|
v-model="form.archivesClassId"
|
|
:options="classifyOptions"
|
|
:normalizer="classifyNormalizer"
|
|
:disabled="step===2 || step===3"
|
|
placeholder="请选择"
|
|
no-options-text="暂无数据"
|
|
/>
|
|
</el-form-item>
|
|
<el-button v-if="step === 1" class="step-btn next-btn" type="primary" @click="nextFilterStep('form')">下一步</el-button>
|
|
</el-form>
|
|
</div>
|
|
<div :class="['collect-paper-list',{'paper-step2-list': step === 2}]">
|
|
<div v-if="step===1" class="collect-no-data">选择组卷条件后自动获取数据</div>
|
|
<div v-if="step===2 || step===3" class="collect-paper-table">
|
|
<div class="paper-table-header">
|
|
<p>成功获得待组卷文件<span>7</span>条，选中<span>N</span>条进行组卷</p>
|
|
<div class="head-search">
|
|
<el-input v-model="blurry" clearable size="small" placeholder="输入题名或档号搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" />
|
|
<el-button class="filter-item filter-search" size="mini" type="success" icon="el-icon-search">搜索</el-button>
|
|
<el-button class="filter-item filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left">重置</el-button>
|
|
</div>
|
|
<el-button class="filter-item remove-btn" size="mini" type="success" :disabled="selections.length === 0" @click="toMove(selections)"><i class="iconfont icon-shanchu" />移除</el-button>
|
|
</div>
|
|
<el-table
|
|
ref="table"
|
|
v-loading="loading"
|
|
class="archives-table"
|
|
:data="tableData"
|
|
style="width: 100%;"
|
|
height="calc(100vh - 706px)"
|
|
@select-all="selectAll"
|
|
@row-click="clickRowHandler"
|
|
@select="handleCurrentChange"
|
|
>
|
|
<el-table-column type="selection" align="center" width="55" />
|
|
<el-table-column prop="category_type" label="门类级别" align="center" min-width="100">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.category_type === 5" style="width:56px">文件级</span>
|
|
<span v-if="scope.row.category_type === 4" style="width:56px">卷内级</span>
|
|
<span v-if="scope.row.category_type === 3" style="width:56px">案卷级</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="category_name" label="门类名称" align="center" show-overflow-tooltip min-width="170" />
|
|
<el-table-column prop="child" label="子条数目" align="center" width="100" />
|
|
<el-table-column prop="archive_no" label="档号" align="center" show-overflow-tooltip min-width="220" />
|
|
<el-table-column prop="maintitle" label="题名" show-overflow-tooltip align="center" min-width="240" />
|
|
<el-table-column prop="doc_no" label="发文字号" show-overflow-tooltip width="140" align="center" />
|
|
<el-table-column prop="serial_no" label="序号" width="100" align="center" />
|
|
<el-table-column prop="fonds_no" label="全宗号" align="center" min-width="180" />
|
|
<el-table-column prop="archive_year" label="年度" align="center" min-width="100" />
|
|
<el-table-column prop="security_class" label="密级" align="center" min-width="100" />
|
|
<el-table-column prop="retention" label="保管期限" align="center" min-width="100" />
|
|
<el-table-column prop="arrive_class" label="收发类别" width="140" align="center" />
|
|
<el-table-column prop="temp_no" label="临时卷号" show-overflow-tooltip width="140" align="center" />
|
|
<el-table-column prop="created_date" label="成文日期" align="center" min-width="180" />
|
|
<el-table-column prop="case_name" label="盒名称" show-overflow-tooltip align="center" min-width="200" />
|
|
</el-table>
|
|
<div class="paper-table-bottom">
|
|
<el-button class="step-btn" type="primary" @click="step = 1">上一步</el-button>
|
|
<el-button class="step-btn" type="primary" :disabled="selections.length === 0" @click="nextSelectedTable">下一步</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<eForm ref="eform" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { FetchFondsAll } from '@/api/system/fonds'
|
|
import { FetchCategoryMenu } from '@/api/system/category/category'
|
|
import { FetchArchivesClassTree } from '@/api/system/archivesClass'
|
|
import Treeselect from '@riophae/vue-treeselect'
|
|
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
|
import eForm from './form'
|
|
import tableData from './table.json'
|
|
export default {
|
|
name: 'BatchPaper',
|
|
components: { eForm, Treeselect },
|
|
data() {
|
|
return {
|
|
form: {
|
|
years: null,
|
|
month: null,
|
|
fonds: { id: null },
|
|
categoryId: null,
|
|
archivesClassId: null
|
|
},
|
|
yearsOptions: [],
|
|
monthOptions: [
|
|
{ label: '一月', value: 1 },
|
|
{ label: '二月', value: 2 },
|
|
{ label: '三月', value: 3 },
|
|
{ label: '四月', value: 4 },
|
|
{ label: '五月', value: 5 },
|
|
{ label: '六月', value: 6 },
|
|
{ label: '七月', value: 7 },
|
|
{ label: '八月', value: 8 },
|
|
{ label: '九月', value: 9 },
|
|
{ label: '十月', value: 10 },
|
|
{ label: '十一月', value: 11 },
|
|
{ label: '十二月', value: 12 }
|
|
],
|
|
fondsOptions: [],
|
|
lastValue: '',
|
|
categoryDatas: [],
|
|
classifyOptions: [],
|
|
blurry: null,
|
|
tableData: [],
|
|
loading: false,
|
|
selections: [],
|
|
step: 1,
|
|
rules: {
|
|
years: [{ required: true, message: '请选择年份', trigger: 'change' }],
|
|
month: [{ required: true, message: '请选择月份', trigger: 'change' }],
|
|
'fonds.id': [{ required: true, message: '请选择全宗', trigger: 'change' }],
|
|
categoryId: [{ required: true, message: '请选择档案门类', trigger: 'change' }]
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
},
|
|
mounted() {
|
|
this.generateYears()
|
|
this.getFondsDatas()
|
|
this.getCategoryDataTree()
|
|
},
|
|
methods: {
|
|
nextFilterStep(formName) {
|
|
this.$refs[formName].validate((valid) => {
|
|
if (valid) {
|
|
this.step = 2
|
|
this.tableData = tableData.data.content
|
|
} else {
|
|
console.log('error submit!!')
|
|
return false
|
|
}
|
|
})
|
|
},
|
|
generateYears() {
|
|
const currentYear = new Date().getFullYear()
|
|
for (let i = 0; i < 11; i++) {
|
|
this.yearsOptions.push(currentYear - i)
|
|
}
|
|
},
|
|
getFondsDatas() {
|
|
const parent = {}
|
|
parent.id = 0
|
|
parent.fondsName = '全宗选择'
|
|
FetchFondsAll().then(res => {
|
|
// res.forEach(item => {
|
|
// item.children = item.depts
|
|
// })
|
|
// parent.children = res
|
|
// this.fondsDatas.push(parent)
|
|
this.fondsOptions = res
|
|
// this.$nextTick(() => {
|
|
// Vue.set(this.defaultExpandedKeys, 0, this.fondsDatas[0].children[0].children[0].id)
|
|
// this.$refs.tree.setCurrentKey(this.fondsDatas[0].children[0].children[0].id)
|
|
// this.handleNodeClick(this.fondsDatas[0].children[0].children[0])
|
|
// })
|
|
})
|
|
},
|
|
changeFondsValue(value) {
|
|
console.log(this.lastValue)
|
|
if (this.lastValue) {
|
|
if (value !== this.lastValue) {
|
|
this.form.dept.id = null
|
|
}
|
|
}
|
|
},
|
|
filterData(data) {
|
|
return data.filter(node => {
|
|
if (node.children && node.children.length > 0) {
|
|
node.children = this.filterData(node.children) // 递归处理子节点
|
|
}
|
|
return node.isType !== 3 // 过滤掉isType为3的节点
|
|
})
|
|
},
|
|
getCategoryDataTree() {
|
|
FetchCategoryMenu().then(res => {
|
|
this.categoryDatas = this.filterData(res)
|
|
})
|
|
},
|
|
selectCategoryTree(val) {
|
|
this.getClassifyTree(val.id)
|
|
},
|
|
getClassifyTree(categoryId) {
|
|
FetchArchivesClassTree({ 'categoryId': categoryId }).then(res => {
|
|
this.classifyOptions = res.map(function(obj) {
|
|
if (obj.childArchivesClass !== null) {
|
|
obj.hasChildren = true
|
|
} else {
|
|
obj.hasChildren = false
|
|
}
|
|
if (obj.hasChildren) {
|
|
obj.children = null
|
|
}
|
|
return obj
|
|
})
|
|
})
|
|
},
|
|
normalizer(node) {
|
|
if (node.children === null) {
|
|
delete node.children
|
|
}
|
|
return {
|
|
id: node.id,
|
|
label: node.cnName,
|
|
children: node.children,
|
|
isDisabled: node.isType !== 2
|
|
}
|
|
},
|
|
classifyNormalizer(node) {
|
|
if (node.childArchivesClass === null) {
|
|
delete node.childArchivesClass
|
|
}
|
|
return {
|
|
id: node.id,
|
|
label: node.name,
|
|
children: node.childArchivesClass
|
|
}
|
|
},
|
|
nextSelectedTable() {
|
|
this.step = 3
|
|
this.handleForm('add')
|
|
},
|
|
// table - 全选
|
|
selectAll(val) {
|
|
this.selections = val
|
|
},
|
|
// table - 当前选中得row
|
|
clickRowHandler(row) {
|
|
this.$refs.table.clearSelection()
|
|
this.$refs.table.toggleRowSelection(row)
|
|
this.selections = []
|
|
this.selections.push(row)
|
|
},
|
|
// 触发单选
|
|
handleCurrentChange(selection, row) {
|
|
this.selections = selection
|
|
},
|
|
// 著录界面-form/详情-api
|
|
handleForm(type) {
|
|
this.$refs.eform.formVisible = true
|
|
// if (type === 'add') {
|
|
// this.$refs.eform.formTitle = '新增档案'
|
|
// } else if (type === 'edit') {
|
|
// this.$refs.eform.formTitle = '编辑文件'
|
|
// }
|
|
this.$refs.eform.formTitle = '新增档案'
|
|
// 档案预编辑获取字段
|
|
const params = {
|
|
categoryId: this.categoryId,
|
|
archivesId: this.arcId
|
|
}
|
|
this.getFormInfo(params, type)
|
|
},
|
|
getFormInfo(params, type, isAnOrJuan) {
|
|
// FetchFormDisplayFields(params).then(data => {
|
|
// this.formPreviewData = data.showFiled
|
|
// this.$nextTick(() => {
|
|
// if (type === 'edit') {
|
|
// this.$refs.previewForm.addOrUpdateForm = data.echo
|
|
// } else {
|
|
// if (this.recycleMain.selectedCategory.isType !== 5) {
|
|
// // 新增时拿到项目和案卷的相同的字段的值
|
|
// this.formPreviewData.forEach(item => {
|
|
// if (isAnOrJuan === 1) {
|
|
// if (this.recycleMain.selectedCategory.isType !== 3) {
|
|
// if (this.recycleMain.projectSelection[item.fieldName]) {
|
|
// this.$refs.previewForm.addOrUpdateForm = JSON.parse(JSON.stringify(this.recycleMain.projectSelection))
|
|
// }
|
|
// }
|
|
// } else if (isAnOrJuan === 2) {
|
|
// if (this.recycleMain.anjuanSelection[item.fieldName]) {
|
|
// this.$refs.previewForm.addOrUpdateForm = JSON.parse(JSON.stringify(this.recycleMain.anjuanSelection))
|
|
// }
|
|
// }
|
|
// })
|
|
// }
|
|
// }
|
|
// this.isDesFormType = 'arcives'
|
|
// this.$refs.previewForm.FetchNoFormatField(this.categoryId)
|
|
// })
|
|
// })
|
|
},
|
|
// 删除用户
|
|
toMove(datas) {
|
|
this.$confirm('此操作将把所选条目从此次批量组卷中移除' + '<span>你是否还要继续？</span>', '提示', {
|
|
confirmButtonText: '继续',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
dangerouslyUseHTMLString: true
|
|
}).then(() => {
|
|
// this.crud.delAllLoading = true
|
|
const userIds = []
|
|
datas.forEach(val => {
|
|
userIds.push(val.userId)
|
|
})
|
|
// crudUser.del(userIds).then(() => {
|
|
// this.crud.notify('删除成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
|
|
// this.crud.delAllLoading = false
|
|
// this.crud.refresh()
|
|
// }).catch(err => {
|
|
// this.crud.delAllLoading = false
|
|
// console.log(err)
|
|
// })
|
|
}).catch(() => {
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
.collect-paper-header{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 154px;
|
|
background: linear-gradient(180deg, #F3F5F8 29%, #fff 100%);
|
|
border: 2px solid #fff;
|
|
.paper-step-item{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #0C0E1E;
|
|
i{
|
|
display: block;
|
|
height: 60px;
|
|
}
|
|
p{
|
|
margin-top: 15px;
|
|
}
|
|
&.paper-step1{
|
|
i{
|
|
width: 65px;
|
|
background: url('~@/assets/images/collect/one.png') no-repeat center center;
|
|
background-size: 65px 60px;
|
|
}
|
|
}
|
|
&.paper-step2{
|
|
i{
|
|
width: 41px;
|
|
background: url('~@/assets/images/collect/two.png') no-repeat bottom center;
|
|
background-size: 41px 41px;
|
|
}
|
|
&.paper-step2-active{
|
|
i{
|
|
width: 65px;
|
|
background: url('~@/assets/images/collect/two2.png') no-repeat center center;
|
|
background-size: 65px 60px;
|
|
}
|
|
}
|
|
}
|
|
&.paper-step3{
|
|
i{
|
|
width: 41px;
|
|
background: url('~@/assets/images/collect/three.png') no-repeat bottom center;
|
|
background-size: 41px 41px;
|
|
}
|
|
&.paper-step3-active{
|
|
i{
|
|
width: 65px;
|
|
background: url('~@/assets/images/collect/three2.png') no-repeat center center;
|
|
background-size: 65px 60px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.paper-step-dot{
|
|
width: 146px;
|
|
text-align: center;
|
|
height: 5px;
|
|
background: url('~@/assets/images/collect/dot.png') no-repeat center center;
|
|
background-size: contain;
|
|
&.dot-active{
|
|
background: url('~@/assets/images/collect/dot2.png') no-repeat center center;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
}
|
|
.collect-paper-filter{
|
|
margin-top: 20px;
|
|
height: calc(100vh - 313px);
|
|
background-color: #fff;
|
|
.collect-paper-form{
|
|
width: 420px;
|
|
padding-top: 30px;
|
|
margin: 0 auto;
|
|
::v-deep .el-form{
|
|
.el-form-item__label{
|
|
color: #0C0E1E;
|
|
}
|
|
}
|
|
}
|
|
.step-btn{
|
|
color: #fff;
|
|
background-color: #0348f3;
|
|
border-color: #0348f3;
|
|
&.el-button.is-disabled,
|
|
&.el-button.is-disabled:hover,
|
|
&.el-button.is-disabled:focus{
|
|
color: #fff;
|
|
background-color: #0348f3;
|
|
border-color: #0348f3;
|
|
opacity: 0.5 !important;
|
|
}
|
|
}
|
|
.next-btn{
|
|
margin-left: 220px;
|
|
}
|
|
|
|
.collect-paper-list{
|
|
position: relative;
|
|
// display: flex;
|
|
// justify-content: center;
|
|
// align-items: center;
|
|
height: calc(100% - 314px);
|
|
margin: 20px;
|
|
background-color: #EDEFF3;
|
|
&.paper-step2-list{
|
|
height: calc(100% - 262px);
|
|
}
|
|
.collect-no-data{
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%,-50%);
|
|
font-size: 20px;
|
|
color: #A6ADB6;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
.collect-paper-table{
|
|
padding: 20px;
|
|
}
|
|
.paper-table-header{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
p{
|
|
flex: 1;
|
|
padding-left: 52px;
|
|
margin-top: -8px;
|
|
color: #0C0E1E;
|
|
font-size: 15px;
|
|
line-height: 52px;
|
|
background: url('~@/assets/images/collect/jn.png') no-repeat left top;
|
|
background-size: 46px 49px;
|
|
span{
|
|
padding: 0 2px;
|
|
color: #0348F3;
|
|
}
|
|
}
|
|
|
|
::v-deep .el-input__inner,
|
|
.filter-refresh{
|
|
background-color: transparent !important;
|
|
border-color: #D9D9D9;
|
|
}
|
|
.filter-search,
|
|
|
|
.filter-refresh{
|
|
margin-left: 10px;
|
|
}
|
|
.remove-btn{
|
|
height: 32px;
|
|
margin-left: 60px;
|
|
}
|
|
}
|
|
.paper-table-bottom{
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 10px;
|
|
}
|
|
::v-deep .el-table {
|
|
.el-table__body-wrapper {
|
|
tr{
|
|
background-color: #fff !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|