|
|
|
@ -86,11 +86,12 @@ |
|
|
|
> |
|
|
|
<!-- :class="{'miod-depts-input null-input': miodDeptsTags.length === 0 && deptsValid, 'miod-depts-input': !deptsValid || miodDeptsTags.length !== 0}" 暂时先不必填 --> |
|
|
|
<div class="miod-depts-input" @click="showDeptsDialog"> |
|
|
|
<!-- :class="tag.readType === 0 ? 'no-depts' : tag.readType === 1 ? 'lending-depts' : ''" --> |
|
|
|
<el-tag |
|
|
|
v-for="tag in miodDeptsTags" |
|
|
|
:key="tag.id" |
|
|
|
v-model="addOrUpdateForm.miodDepts" |
|
|
|
:class="{'no-depts':(tag.borrowType === 2)}" |
|
|
|
:class="(!tag.readType && tag.readType!==0) ? 'no-depts' : tag.readType === 0 ? 'no-depts' : tag.readType === 1 ? 'lending-depts' : ''" |
|
|
|
closable |
|
|
|
:disable-transitions="false" |
|
|
|
@close="handleCloseDeptsTag(tag, $event)" |
|
|
|
@ -178,44 +179,20 @@ |
|
|
|
<span class="dialog-right-top" /> |
|
|
|
<span class="dialog-left-bottom" /> |
|
|
|
<div class="setting-dialog"> |
|
|
|
<el-table ref="deptsMiodTable" :data="deptsMiodTable" highlight-current-row row-key="id" height="400" style="width: 100%;" @row-click="clickRowHandlerDepts" @selection-change="selectionChangeHandlerDepts"> |
|
|
|
<el-table-column type="selection" width="55" /> |
|
|
|
<el-table-column prop="borrowName" label="借阅者名称" /> |
|
|
|
<el-table-column prop="borrowType" label="借阅者类型"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<ul class="checkbox-list-depts"> |
|
|
|
<li v-for="(item, index) in deptsMiodTable" :key="index" :class="item.readType === null ? '' : item.readType === 0 ? '' : item.readType === 1 ? 'lending-depts' : item.readType === 2 ? 'blue-depts' : ''"> |
|
|
|
<el-checkbox v-model="item.checked" @change="handleCheckChange(item)"> |
|
|
|
<div> |
|
|
|
<span v-if="scope.row.borrowType === 1">部门</span> |
|
|
|
<span v-if="scope.row.borrowType === 2">个人</span> |
|
|
|
<el-tooltip class="item" effect="dark" :content="item.borrowName" placement="top-start"> |
|
|
|
<p> {{ item.borrowName }}</p> |
|
|
|
</el-tooltip> |
|
|
|
<p> {{ item.borrowNo }}</p> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="borrowNo" label="借阅证绑定"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div> |
|
|
|
<span v-if="scope.row.borrowNo && (scope.row.borrowNo !== null || scope.row.borrowNo !== '')" class="row-state end-state">已绑定</span> |
|
|
|
<span v-else class="row-state cancel-state">未绑定</span> |
|
|
|
</el-checkbox> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="create_time" label="创建日期" width="200px"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div>{{ scope.row.create_time | parseTime }}</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
<!--分页组件--> |
|
|
|
<el-pagination |
|
|
|
v-if="deptsMiodTable.length !== 0" |
|
|
|
:current-page="pageDepts.page" |
|
|
|
:total="pageDepts.total" |
|
|
|
:page-size="pageDepts.size" |
|
|
|
:pager-count="5" |
|
|
|
layout="total, prev, pager, next, sizes" |
|
|
|
@size-change="handleSizeChange" |
|
|
|
@current-change="handleCurrentPage" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<div slot="footer" class="dialog-footer" style="margin-top: 0;"> |
|
|
|
<el-button type="text" @click="handleClose">取消</el-button> |
|
|
|
<!-- :loading="btnLoading" --> |
|
|
|
<el-button type="primary" @click.native="handleComfireDepts">确定</el-button> |
|
|
|
@ -232,7 +209,7 @@ import { collectAdd, collectEdit, FetchIsRepeatByArchivesNo, FetchIsRepeatAllByA |
|
|
|
import { prearchEdit, FetchMergeToFile, FetchReDoeditIsRepeat } from '@/api/prearchiveLibrary/prearchiveLibrary' |
|
|
|
import { miodEditDocument, FetchRegNoByDocumentIdAndDocDepartment } from '@/api/system/documentArchives' |
|
|
|
import { getNoFormatField } from '@/api/system/category/fileNoFormat' |
|
|
|
import { FetchInitBorrowerList } from '@/api/system/borrower' |
|
|
|
import { FetchInitBorrowerListOrderNo } from '@/api/system/borrower' |
|
|
|
import draggable from 'vuedraggable' |
|
|
|
import Treeselect from '@riophae/vue-treeselect' |
|
|
|
import '@riophae/vue-treeselect/dist/vue-treeselect.css' |
|
|
|
@ -356,7 +333,8 @@ export default { |
|
|
|
miodDeptsTags: [], |
|
|
|
deptsValid: false, |
|
|
|
// 待选中的ID列表 |
|
|
|
pendingSelectionIds: [] |
|
|
|
pendingSelectionIds: [], |
|
|
|
allTagStates: {} |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
@ -411,7 +389,14 @@ export default { |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
onDialogOpen() { |
|
|
|
this.pendingSelectionIds = this.miodDeptsTags.map(tag => tag.id) |
|
|
|
// this.pendingSelectionIds = this.miodDeptsTags.map(tag => tag.id) |
|
|
|
// 初始化时保存所有标签的状态到allTagStates |
|
|
|
this.miodDeptsTags.forEach(tag => { |
|
|
|
this.allTagStates[tag.id] = { |
|
|
|
readType: tag.readType |
|
|
|
} |
|
|
|
}) |
|
|
|
this.pendingSelectionIds = this.miodDeptsTags |
|
|
|
}, |
|
|
|
showDeptsDialog() { |
|
|
|
this.deptsVisible = true |
|
|
|
@ -420,11 +405,13 @@ export default { |
|
|
|
// 获取部门/人员列表 |
|
|
|
fetchDeptsList() { |
|
|
|
// this.btnLoading = true |
|
|
|
|
|
|
|
FetchInitBorrowerList(this.filterParams) |
|
|
|
FetchInitBorrowerListOrderNo() |
|
|
|
.then(res => { |
|
|
|
this.deptsMiodTable = res.content || [] |
|
|
|
this.pageDepts.total = res.totalElements || 0 |
|
|
|
this.deptsMiodTable = res || [] |
|
|
|
// this.pageDepts.total = res.totalElements || 0 |
|
|
|
|
|
|
|
// 在恢复选中状态之前，先恢复所有项的readType |
|
|
|
this.restoreAllReadTypes() |
|
|
|
|
|
|
|
// 数据加载完成后恢复选中状态 |
|
|
|
this.restoreSelectionState() |
|
|
|
@ -437,28 +424,68 @@ export default { |
|
|
|
// this.btnLoading = false |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 恢复选中状态 |
|
|
|
handleCheckChange(item) { |
|
|
|
if (item.checked) { |
|
|
|
this.miodDeptsSelections.push(item) |
|
|
|
} else { |
|
|
|
// 取消选中时从已选数组移除 |
|
|
|
this.miodDeptsSelections = this.miodDeptsSelections.filter( |
|
|
|
dept => dept.id !== item.id |
|
|
|
) |
|
|
|
} |
|
|
|
}, |
|
|
|
restoreAllReadTypes() { |
|
|
|
if (this.deptsMiodTable.length > 0) { |
|
|
|
this.deptsMiodTable.forEach(item => { |
|
|
|
// 优先从allTagStates中获取状态 |
|
|
|
const tagState = this.allTagStates[item.id] |
|
|
|
if (tagState && tagState.readType !== undefined) { |
|
|
|
this.$set(item, 'readType', tagState.readType) |
|
|
|
} else { |
|
|
|
// 没有历史状态，设置默认值 |
|
|
|
this.$set(item, 'readType', null) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
restoreSelectionState() { |
|
|
|
this.$nextTick(() => { |
|
|
|
console.log('this.pendingSelectionIds', this.pendingSelectionIds) |
|
|
|
|
|
|
|
if (this.deptsMiodTable.length > 0 && this.pendingSelectionIds.length > 0) { |
|
|
|
// 清空当前选中状态 |
|
|
|
this.$refs.deptsMiodTable.clearSelection() |
|
|
|
// 初始化表格项的状态 |
|
|
|
this.deptsMiodTable.forEach(item => { |
|
|
|
this.$set(item, 'checked', false) |
|
|
|
}) |
|
|
|
|
|
|
|
// 恢复之前的选中状态 |
|
|
|
this.deptsMiodTable.forEach(row => { |
|
|
|
if (this.pendingSelectionIds.includes(row.id)) { |
|
|
|
this.$refs.deptsMiodTable.toggleRowSelection(row, true) |
|
|
|
// 恢复选中状态 |
|
|
|
this.miodDeptsSelections = [] |
|
|
|
this.pendingSelectionIds.forEach(selection => { |
|
|
|
const tableItem = this.deptsMiodTable.find(item => String(item.id) === String(selection.id)) |
|
|
|
if (tableItem) { |
|
|
|
this.$set(tableItem, 'checked', true) |
|
|
|
this.miodDeptsSelections.push(tableItem) |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
// 清空待选中ID列表 |
|
|
|
console.log('this.deptsMiodTable', this.deptsMiodTable) |
|
|
|
this.pendingSelectionIds = [] |
|
|
|
} else { |
|
|
|
this.deptsMiodTable.forEach(item => { |
|
|
|
this.$set(item, 'checked', false) |
|
|
|
}) |
|
|
|
this.miodDeptsSelections = [] |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
handleCloseDeptsTag(tag, event) { |
|
|
|
event.stopPropagation() // 阻止事件冒泡到父元素 |
|
|
|
event.stopPropagation() |
|
|
|
// 在删除标签前，保存其状态 |
|
|
|
this.allTagStates[tag.id] = { |
|
|
|
readType: tag.readType |
|
|
|
// 可以保存其他需要的状态 |
|
|
|
} |
|
|
|
|
|
|
|
this.miodDeptsTags.splice(this.miodDeptsTags.indexOf(tag), 1) |
|
|
|
if (this.miodDeptsTags.length === 0) { |
|
|
|
this.$set(this.addOrUpdateForm, 'miodDepts', null) |
|
|
|
@ -470,23 +497,9 @@ export default { |
|
|
|
return |
|
|
|
} |
|
|
|
this.miodDeptsTags = [...this.miodDeptsSelections] |
|
|
|
console.log('this.miodDeptsTags', this.miodDeptsTags) |
|
|
|
this.deptsVisible = false |
|
|
|
}, |
|
|
|
clickRowHandlerDepts(row) { |
|
|
|
this.$refs.deptsMiodTable.toggleRowSelection(row) |
|
|
|
}, |
|
|
|
selectionChangeHandlerDepts(val) { |
|
|
|
this.miodDeptsSelections = val |
|
|
|
}, |
|
|
|
handleSizeChange(size) { |
|
|
|
this.pageDepts.size = size |
|
|
|
this.pageDepts.page = 0 |
|
|
|
this.fetchDeptsList() |
|
|
|
}, |
|
|
|
handleCurrentPage(pageVal) { |
|
|
|
this.pageDepts.page = pageVal - 1 |
|
|
|
this.fetchDeptsList() |
|
|
|
}, |
|
|
|
refreshTreeList() { |
|
|
|
this.$emit('refreshTree') |
|
|
|
}, |
|
|
|
@ -1526,6 +1539,7 @@ export default { |
|
|
|
this.popoverTableDataClassify = [] |
|
|
|
this.popoverTableDataFonds = [] |
|
|
|
this.deptsVisible = false |
|
|
|
this.allTagStates = {} |
|
|
|
// done() |
|
|
|
}, |
|
|
|
// 选择附件 |
|
|
|
@ -1848,6 +1862,14 @@ export default { |
|
|
|
.el-tag{ |
|
|
|
margin-right: 10px; |
|
|
|
&.no-depts{ |
|
|
|
border-color: #e6e8ed; |
|
|
|
color: #a6adb6; |
|
|
|
background-color: #f3f5f9; |
|
|
|
::v-deep .el-icon-close{ |
|
|
|
color: #a6adb6 !important; |
|
|
|
} |
|
|
|
} |
|
|
|
&.lending-depts{ |
|
|
|
border-color: #07A35A; |
|
|
|
color: #07A35A; |
|
|
|
background-color: #e0fcef; |
|
|
|
@ -1855,6 +1877,14 @@ export default { |
|
|
|
color: #07A35A !important; |
|
|
|
} |
|
|
|
} |
|
|
|
&.new-depts{ |
|
|
|
border-color: #FEBD98; |
|
|
|
color: #FF8329; |
|
|
|
background-color: #FFF3E5; |
|
|
|
::v-deep .el-icon-close{ |
|
|
|
color: #FF8329 !important; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.mulit-input{ |
|
|
|
@ -1888,4 +1918,59 @@ export default { |
|
|
|
::v-deep .vue-treeselect__value-remove{ |
|
|
|
display: none; |
|
|
|
} |
|
|
|
|
|
|
|
.checkbox-list-depts{ |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
flex-wrap: wrap; |
|
|
|
max-height: 480px; |
|
|
|
overflow: hidden; |
|
|
|
overflow-y: scroll; |
|
|
|
li{ |
|
|
|
width: calc(100% / 5 - 10px); |
|
|
|
height: 40px; |
|
|
|
margin-right: 10px; |
|
|
|
margin-bottom: 10px; |
|
|
|
overflow: hidden; |
|
|
|
&:hover{ |
|
|
|
background-color: #EAF3FB; |
|
|
|
} |
|
|
|
&.no-depts{ |
|
|
|
// border-color: #e6e8ed; |
|
|
|
color: #a6adb6; |
|
|
|
background-color: #f3f5f9; |
|
|
|
} |
|
|
|
&.lending-depts{ |
|
|
|
// border-color: #07A35A; |
|
|
|
color: #07A35A; |
|
|
|
background-color: #e0fcef; |
|
|
|
} |
|
|
|
&.blue-depts{ |
|
|
|
// border-color: #e6e8ed; |
|
|
|
color: #0348f3; |
|
|
|
background-color: #eef5fe; |
|
|
|
} |
|
|
|
::v-deep .el-checkbox { |
|
|
|
.el-checkbox__input{ |
|
|
|
vertical-align: top; |
|
|
|
} |
|
|
|
.el-checkbox__label{ |
|
|
|
& div{ |
|
|
|
margin-top: -2px; |
|
|
|
|
|
|
|
& p:first-child{ |
|
|
|
color: #0c0e1e; |
|
|
|
max-width: 120px; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
& p:last-child{ |
|
|
|
color: #a5a5a5; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
