4 changed files with 345 additions and 10 deletions
-
BINsrc/assets/images/collect/dot.png
-
BINsrc/assets/images/collect/dot2.png
-
335src/views/collectReorganizi/batchPaper/index.vue
-
20src/views/collectReorganizi/collectionLibrary/module/collectHeader.vue
|
After Width: 368 | Height: 48 | Size: 3.5 KiB |
|
After Width: 368 | Height: 48 | Size: 3.5 KiB |
@ -0,0 +1,335 @@ |
|||
<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 dot-active" /> |
|||
<div class="paper-step-item paper-step2 paper-step2-active"> |
|||
<i /> |
|||
<p>确认组卷条目</p> |
|||
</div> |
|||
<div class="paper-step-dot" /> |
|||
<div class="paper-step-item paper-step3"> |
|||
<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;"> |
|||
<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;"> |
|||
<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;" @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" |
|||
@select="selectCategoryTree" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="档案分类" prop="archivesClassId"> |
|||
<treeselect |
|||
v-model="form.archivesClassId" |
|||
:options="classifyOptions" |
|||
:normalizer="classifyNormalizer" |
|||
placeholder="请选择" |
|||
no-options-text="暂无数据" |
|||
/> |
|||
</el-form-item> |
|||
<el-button class="next-btn" type="primary">下一步</el-button> |
|||
</el-form> |
|||
</div> |
|||
<div class="collect-paper-list"> |
|||
<div class="collect-no-data">选择组卷条件后自动获取数据</div> |
|||
</div> |
|||
</div> |
|||
</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' |
|||
export default { |
|||
name: 'BatchPaper', |
|||
components: { 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: [], |
|||
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: { |
|||
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 && !node.children.length) { |
|||
delete node.children |
|||
} |
|||
return { |
|||
id: node.id, |
|||
label: node.cnName, |
|||
children: node.children, |
|||
isDisabled: node.isType !== 2 |
|||
} |
|||
}, |
|||
classifyNormalizer(node) { |
|||
if (node.childArchivesClass && !node.childArchivesClass.length) { |
|||
delete node.childArchivesClass |
|||
} |
|||
return { |
|||
id: node.id, |
|||
label: node.name, |
|||
children: node.childArchivesClass |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.collect-paper-header{ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
height: 174px; |
|||
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 - 333px); |
|||
background-color: #fff; |
|||
.collect-paper-form{ |
|||
width: 420px; |
|||
padding-top: 50px; |
|||
margin: 0 auto; |
|||
::v-deep .el-form{ |
|||
.el-form-item__label{ |
|||
color: #0C0E1E; |
|||
} |
|||
} |
|||
} |
|||
.next-btn{ |
|||
margin-left: 220px; |
|||
color: #fff; |
|||
background-color: #0348f3; |
|||
border-color: #0348f3; |
|||
} |
|||
.collect-paper-list{ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
height: calc(100% - 334px); |
|||
margin: 20px; |
|||
background-color: #EDEFF3; |
|||
.collect-no-data{ |
|||
font-size: 20px; |
|||
color: #A6ADB6; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue