8 changed files with 830 additions and 316 deletions
-
54src/api/system/archivesScope.js
-
2src/assets/styles/yxk-admin.scss
-
283src/views/system/archiveScopeManage/index.vue
-
531src/views/system/archiveScopeManage/module/tableList.vue
-
43src/views/system/archivesClassify/module/tableList.vue
-
164src/views/system/fieldCorresManage/index.vue
-
7src/views/system/fieldCorresManage/module/detail.vue
-
62src/views/system/fieldCorresManage/module/form.vue
@ -0,0 +1,54 @@ |
|||
import request from '@/utils/request' |
|||
|
|||
// 获取归档范围列表
|
|||
export function FetchInitArchivesScope(params) { |
|||
return request({ |
|||
url: 'api/archivesScope/initArchivesScope', |
|||
method: 'get', |
|||
params |
|||
}) |
|||
} |
|||
|
|||
// 获取子集
|
|||
export function FetchSonArchivesScope(params) { |
|||
return request({ |
|||
url: 'api/archivesScope/getSonArchivesScope', |
|||
method: 'get', |
|||
params |
|||
}) |
|||
} |
|||
|
|||
// 获取树
|
|||
export function FetchArchivesScopeTree(params) { |
|||
return request({ |
|||
url: 'api/archivesScope/getArchivesScopeTree', |
|||
method: 'get', |
|||
params |
|||
}) |
|||
} |
|||
|
|||
export function add(data) { |
|||
return request({ |
|||
url: 'api/archivesScope/editArchivesScope', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
export function edit(data) { |
|||
return request({ |
|||
url: 'api/archivesScope/editArchivesScope', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
export function del(data) { |
|||
return request({ |
|||
url: 'api/archivesScope/delArchivesClass', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
export default { add, edit, del, FetchInitArchivesScope, FetchSonArchivesScope, FetchArchivesScopeTree } |
|||
@ -0,0 +1,531 @@ |
|||
<template> |
|||
<!--用户数据--> |
|||
<div class="elect-cont-right"> |
|||
<!--工具栏--> |
|||
<div class="head-container"> |
|||
<crudOperation :permission="permission"> |
|||
<template v-slot:left> |
|||
<el-button v-permission="permission.add" size="mini" @click="crud.toAdd"> |
|||
<i class="iconfont icon-xinzeng" /> |
|||
新增 |
|||
</el-button> |
|||
<el-button v-permission="permission.edit" size="mini" :disabled="selections.length !== 1" @click="crud.toEdit(selections[0])"> |
|||
<i class="iconfont icon-bianji" /> |
|||
编辑 |
|||
</el-button> |
|||
<el-button slot="reference" v-permission="permission.del" size="mini" :loading="crud.delAllLoading" :disabled="selections.length === 0" @click="toDelete(selections)"> |
|||
<i class="iconfont icon-shanchu" /> |
|||
删除 |
|||
</el-button> |
|||
</template> |
|||
<template v-slot:right> |
|||
<el-button :loading="crud.downloadLoading" size="mini" :disabled="selections.length === 0" @click="doExport(selections)"> |
|||
<i class="iconfont icon-daochu" /> |
|||
导出 |
|||
</el-button> |
|||
<span class="tip">注意：门类节点下才可新增归档范围定义</span> |
|||
</template> |
|||
</crudOperation> |
|||
</div> |
|||
<!--表单渲染--> |
|||
<el-dialog :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title"> |
|||
<div class="setting-dialog"> |
|||
<el-form ref="form" :inline="true" :model="form" :rules="rules" label-width="90px"> |
|||
<el-form-item v-if="crud.status.add === 1" label="所属门类" prop="categoryId"> |
|||
<treeselect |
|||
v-model="form.categoryId" |
|||
:options="categoryDatas" |
|||
placeholder="选择所属门类" |
|||
flat |
|||
:multiple="false" |
|||
:normalizer="normalizer" |
|||
@select="selectCategoryTree" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item v-if="crud.status.edit === 1" label="所属门类" prop="categoryId"> |
|||
<el-input v-model="form.category.cnName" disabled /> |
|||
</el-form-item> |
|||
<el-form-item label="档案分类" prop="archivesClassId"> |
|||
<!-- :load-options="loadClassifyTree" --> |
|||
<treeselect |
|||
v-model="form.archivesClassId" |
|||
:options="classifyOptions" |
|||
:normalizer="classifyNormalizer" |
|||
placeholder="选择门类之后再选择档案分类" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="名称" prop="scopeName"> |
|||
<el-input v-model="form.scopeName" /> |
|||
</el-form-item> |
|||
<el-form-item label="编码" prop="scopeCode"> |
|||
<el-input v-model="form.scopeCode" /> |
|||
</el-form-item> |
|||
<el-form-item label="顶级范围" prop="isTop"> |
|||
<el-radio-group v-model="form.isTop" @input="changeIsTop"> |
|||
<el-radio label="1">是</el-radio> |
|||
<el-radio label="0">否</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item label="保管期限" prop="retention"> |
|||
<el-select v-model="form.retention" placeholder="请选择" style="width:225px;"> |
|||
<el-option v-for="item in periodOptions" :key="item.value" :label="item.label" :value="item.value" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item |
|||
v-if="form.isTop === '0'" |
|||
label="上级分类" |
|||
prop="pid" |
|||
> |
|||
<!-- :load-options="loadScopeTree" --> |
|||
<treeselect |
|||
v-model="form.pid" |
|||
:options="scopes" |
|||
placeholder="选择门类之后再选择上级范围" |
|||
:normalizer="scopeNormalizer" |
|||
style="width: 584px;" |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="text" @click="crud.cancelCU">取消</el-button> |
|||
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
<!--表格渲染--> |
|||
<el-table |
|||
ref="table" |
|||
v-loading="crud.loading" |
|||
lazy |
|||
:data="tableData" |
|||
:row-key="getRowKey" |
|||
:load="getSonClass" |
|||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}" |
|||
highlight-current-row |
|||
@select-all="selectAll" |
|||
@select="selectTr" |
|||
@selection-change="selectionChangeHandler" |
|||
@row-click="clickRowHandler" |
|||
> |
|||
<el-table-column type="selection" align="center" width="55" /> |
|||
<el-table-column :show-overflow-tooltip="true" prop="scopeCode" label="编码" /> |
|||
<el-table-column :show-overflow-tooltip="true" prop="scopeName" label="名称" /> |
|||
<el-table-column :show-overflow-tooltip="true" prop="retention" label="保管期限"> |
|||
<template slot-scope="scope"> |
|||
<div>{{ scope.row.retention === 0 ? '永久' : scope.row.retention === 1 ? '定期30年' : '定期10年' }}</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column :show-overflow-tooltip="true" prop="category" label="所属门类"> |
|||
<template slot-scope="scope"> |
|||
<div v-if="scope.row.category">{{ scope.row.category.cnName }}</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column :show-overflow-tooltip="true" prop="archivesClass" label="所属分类"> |
|||
<template slot-scope="scope"> |
|||
<div v-if="scope.row.archivesClass">{{ scope.row.archivesClass.name }}</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<!--分页组件--> |
|||
<pagination v-if="tableData.length !== 0" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { FetchCategoryMenu } from '@/api/system/category/category' |
|||
import { FetchArchivesClassTree } from '@/api/system/archivesClass' |
|||
import crudScope from '@/api/system/archivesScope' |
|||
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
|||
import crudOperation from '@crud/CRUD.operation' |
|||
import pagination from '@crud/Pagination' |
|||
import Treeselect from '@riophae/vue-treeselect' |
|||
import '@riophae/vue-treeselect/dist/vue-treeselect.css' |
|||
// import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect' |
|||
import { exportFile } from '@/utils/index' |
|||
import qs from 'qs' |
|||
import { mapGetters } from 'vuex' |
|||
|
|||
const defaultForm = { |
|||
id: null, |
|||
categoryId: null, |
|||
archivesClassId: null, |
|||
scopeName: null, |
|||
scopeCode: null, |
|||
isTop: '1', |
|||
pid: null, |
|||
retention: 0 |
|||
} |
|||
|
|||
export default { |
|||
name: 'Classify', |
|||
components: { crudOperation, pagination, Treeselect }, |
|||
cruds() { |
|||
return CRUD({ title: '范围', url: 'api/archivesScope/initArchivesScope', crudMethod: { ...crudScope }, optShow: { |
|||
add: false, |
|||
edit: false, |
|||
del: false, |
|||
reset: false, |
|||
download: false, |
|||
group: false |
|||
}}) |
|||
}, |
|||
mixins: [presenter(), header(), form(defaultForm), crud()], |
|||
props: { |
|||
selectedCategory: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
tableData: [], |
|||
classifyOptions: [], |
|||
categoryDatas: [], |
|||
scopes: [], |
|||
selections: [], |
|||
isAllSelect: false, |
|||
rules: { |
|||
categoryId: [{ required: true, message: '请选择所属门类', trigger: 'change' }], |
|||
archivesClassId: [{ required: true, message: '请选择档案分类', trigger: 'change' }], |
|||
scopeCode: [{ required: true, message: '编码不可为空', trigger: 'blur' }], |
|||
scopeName: [{ required: true, message: '名称不可为空', trigger: 'blur' }], |
|||
isTop: [{ required: true, message: '请选择是否为顶级分类', trigger: 'change' }], |
|||
pid: [{ required: true, message: '请选择上级分类', trigger: 'change' }], |
|||
retention: [{ required: true, message: '请选择保管期限', trigger: 'change' }] |
|||
}, |
|||
permission: { |
|||
add: ['admin', 'scope:add'], |
|||
edit: ['admin', 'scope:edit'], |
|||
del: ['admin', 'scope:del'] |
|||
}, |
|||
defaultProps: { |
|||
children: 'children', |
|||
label: 'cnName' |
|||
}, |
|||
periodOptions: [ |
|||
{ |
|||
value: 0, |
|||
label: '永久' |
|||
}, |
|||
{ |
|||
value: 1, |
|||
label: '定期30年' |
|||
}, |
|||
{ |
|||
value: 2, |
|||
label: '定期10年' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapGetters([ |
|||
'baseApi' |
|||
]) |
|||
}, |
|||
watch: { |
|||
selectedCategory: function(newValue, oldValue) { |
|||
this.crud.refresh() |
|||
} |
|||
}, |
|||
created() { |
|||
}, |
|||
methods: { |
|||
getRowKey(row) { |
|||
return row.id |
|||
}, |
|||
// 获取数据前设置默认参数 |
|||
[CRUD.HOOK.beforeRefresh]() { |
|||
this.tableData = [] |
|||
this.crud.query.categoryId = this.selectedCategory.id |
|||
}, |
|||
[CRUD.HOOK.afterRefresh](crud) { |
|||
crud.data.forEach(function(item, index) { |
|||
if (item.sonNum !== 0) { |
|||
item.hasChildren = true |
|||
item.children = null |
|||
} else { |
|||
item.hasChildren = false |
|||
} |
|||
}) |
|||
this.tableData = this.crud.data |
|||
}, |
|||
// 提交前做的操作 |
|||
[CRUD.HOOK.afterValidateCU](crud) { |
|||
console.log(crud.form) |
|||
delete crud.form.isTop |
|||
return true |
|||
}, |
|||
changeIsTop(val) { |
|||
if (this.crud.status.edit) { |
|||
if (val === '1') { |
|||
this.form.pid = null |
|||
} |
|||
} |
|||
}, |
|||
// 新增与编辑前做的操作 |
|||
[CRUD.HOOK.afterToCU](crud, form) { |
|||
this.getCategoryDataTree() |
|||
if (this.crud.status.edit) { |
|||
this.form.categoryId = this.form.category.id |
|||
this.form.archivesClassId = this.form.archivesClass.id |
|||
this.getScopeTree(this.form.category.id) |
|||
this.getClassifyTree(this.form.category.id) |
|||
} else { |
|||
this.form.categoryId = null |
|||
this.scopes = [] |
|||
} |
|||
if (form.id != null) { |
|||
if (form.pid === null) { |
|||
form.isTop = '1' |
|||
} else { |
|||
form.isTop = '0' |
|||
} |
|||
} |
|||
}, |
|||
selectCategoryTree(val) { |
|||
console.log(val) |
|||
// this.form.categoryId = val.id |
|||
this.getScopeTree(val.id) |
|||
this.getClassifyTree(val.id) |
|||
}, |
|||
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) |
|||
}) |
|||
}, |
|||
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 |
|||
}) |
|||
}) |
|||
}, |
|||
// loadClassifyTree({ action, parentNode, callback }) { |
|||
// if (action === LOAD_CHILDREN_OPTIONS) { |
|||
// FetchArchivesClassTree().then(res => { |
|||
// parentNode.children = res.map(function(obj) { |
|||
// if (obj.childArchivesClass !== 0) { |
|||
// obj.hasChildren = true |
|||
// } else { |
|||
// obj.hasChildren = false |
|||
// } |
|||
// if (obj.hasChildren) { |
|||
// obj.children = null |
|||
// } |
|||
// return obj |
|||
// }) |
|||
// setTimeout(() => { |
|||
// callback() |
|||
// }, 100) |
|||
// }) |
|||
// } |
|||
// }, |
|||
getSonClass(tree, treeNode, resolve) { |
|||
setTimeout(() => { |
|||
crudScope.FetchSonArchivesScope({ pid: tree.id }).then(res => { |
|||
const data = res.map(function(obj) { |
|||
if (obj.sonNum !== 0 && obj.sonNum) { |
|||
obj.hasChildren = true |
|||
obj.children = null |
|||
} else { |
|||
obj.hasChildren = false |
|||
} |
|||
return obj |
|||
}) |
|||
resolve(data) |
|||
}) |
|||
}, 100) |
|||
}, |
|||
getScopeTree(categoryId) { |
|||
crudScope.FetchArchivesScopeTree({ 'categoryId': categoryId }).then(res => { |
|||
this.scopes = res.map(function(obj) { |
|||
if (obj.childArchivesClass !== null) { |
|||
obj.hasChildren = true |
|||
} else { |
|||
obj.hasChildren = false |
|||
} |
|||
if (obj.hasChildren) { |
|||
obj.children = null |
|||
} |
|||
return obj |
|||
}) |
|||
}) |
|||
}, |
|||
// 获取弹窗内门类数据 |
|||
// loadScopeTree({ action, parentNode, callback }) { |
|||
// if (action === LOAD_CHILDREN_OPTIONS) { |
|||
// crudScope.FetchArchivesScopeTree().then(res => { |
|||
// parentNode.children = res.map(function(obj) { |
|||
// if (obj.childArchivesClass !== 0) { |
|||
// obj.hasChildren = true |
|||
// } else { |
|||
// obj.hasChildren = false |
|||
// } |
|||
// if (obj.hasChildren) { |
|||
// obj.children = null |
|||
// } |
|||
// return obj |
|||
// }) |
|||
// setTimeout(() => { |
|||
// callback() |
|||
// }, 100) |
|||
// }) |
|||
// } |
|||
// }, |
|||
selectAll() { |
|||
this.isAllSelect = !this.isAllSelect |
|||
const data = this.tableData |
|||
this.toggleSelect(data, this.isAllSelect, 'all') |
|||
}, |
|||
// 选择某行 |
|||
selectTr(selection, row) { |
|||
this.$set(row, 'isChecked', !row.isChecked) |
|||
this.$nextTick(() => { |
|||
this.isAllSelect = row.isChecked |
|||
this.toggleSelect(row, row.isChecked, 'tr') |
|||
}) |
|||
}, |
|||
// 递归子级 |
|||
toggleSelect(data, flag, type) { |
|||
if (type === 'all') { |
|||
if (data.length > 0) { |
|||
data.forEach((item) => { |
|||
this.toggleSelection(item, flag) |
|||
if (item.children && item.children.length > 0) { |
|||
this.toggleSelect(item.children, flag, type) |
|||
} |
|||
}) |
|||
} |
|||
} else { |
|||
if (data.children && data.children.length > 0) { |
|||
data.children.forEach((item) => { |
|||
item.isChecked = flag |
|||
this.$refs.table.toggleRowSelection(item, flag) |
|||
this.toggleSelect(item, flag, type) |
|||
}) |
|||
} |
|||
} |
|||
}, |
|||
// 改变选中 |
|||
toggleSelection(row, flag) { |
|||
this.$set(row, 'isChecked', flag) |
|||
this.$nextTick(() => { |
|||
if (flag) { |
|||
this.$refs.table.toggleRowSelection(row, flag) |
|||
} else { |
|||
this.$refs.table.clearSelection() |
|||
} |
|||
}) |
|||
}, |
|||
// table - 当前选中得row |
|||
clickRowHandler(row) { |
|||
this.$refs.table.clearSelection() |
|||
this.$refs.table.toggleRowSelection(row) |
|||
}, |
|||
selectionChangeHandler(val) { |
|||
this.selections = val |
|||
}, |
|||
doExport(data) { |
|||
crud.downloadLoading = true |
|||
this.$confirm('此操作将导出所选数据' + '<span>你是否还要继续？</span>', '提示', { |
|||
confirmButtonText: '继续', |
|||
cancelButtonText: '取消', |
|||
type: 'warning', |
|||
dangerouslyUseHTMLString: true |
|||
}).then(() => { |
|||
const ids = [] |
|||
data.forEach(val => { |
|||
ids.push(val.id) |
|||
}) |
|||
const params = { |
|||
'classIds': ids |
|||
} |
|||
exportFile(this.baseApi + '/api/archivesScope/download?' + qs.stringify(params, { indices: false })) |
|||
}).catch(() => { |
|||
}) |
|||
}, |
|||
toDelete(datas) { |
|||
this.$confirm('此操作将删除当前所选' + this.crud.title + '<span>你是否还要继续？</span>', '提示', { |
|||
confirmButtonText: '继续', |
|||
cancelButtonText: '取消', |
|||
type: 'warning', |
|||
dangerouslyUseHTMLString: true |
|||
}).then(() => { |
|||
this.crud.delAllLoading = true |
|||
const ids = [] |
|||
datas.forEach(val => { |
|||
ids.push(val.id) |
|||
}) |
|||
// const params = { |
|||
// 'scopeIds': ids |
|||
// } |
|||
crudScope.del(ids).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(() => { |
|||
}) |
|||
}, |
|||
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 |
|||
} |
|||
}, |
|||
scopeNormalizer(node) { |
|||
if (node.archivesScopeDTOs && !node.archivesScopeDTOs.length) { |
|||
delete node.archivesScopeDTOs |
|||
} |
|||
return { |
|||
id: node.id, |
|||
label: node.scopeName, |
|||
children: node.archivesScopeDTOs |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.tip{ |
|||
line-height: 28px; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue