1 changed files with 227 additions and 0 deletions
@ -0,0 +1,227 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<!--表单组件--> |
||||
|
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title"> |
||||
|
<span class="dialog-right-top" /> |
||||
|
<span class="dialog-left-bottom" /> |
||||
|
<div class="setting-dialog"> |
||||
|
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px"> |
||||
|
<el-form-item label="门类名称" prop="dicName"> |
||||
|
<el-input v-model="form.dicName" style="width: 370px;" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="门类类型" prop="dicCode"> |
||||
|
<el-select v-model="form.dicCode" style="width: 370px;"> |
||||
|
<el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="选择模板" prop="dicExplain"> |
||||
|
<!-- <el-select v-model="form.dicCode" placeholder="请选择" style="width: 370px;"> |
||||
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> |
||||
|
</el-select>--> |
||||
|
<treeselect v-model="form.dicExplain" :options="treeOptions" placeholder="" style="width: 370px;" :disabled="form.dicCode !== '6'" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="内容说明"> |
||||
|
<el-input v-model="form.dicExplain" style="width: 370px;" type="textarea" :rows="4" /> |
||||
|
</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-dialog title="确认删除" :visible.sync="deleteVisible" :before-close="handleClose"> |
||||
|
<span class="dialog-right-top" /> |
||||
|
<span class="dialog-left-bottom" /> |
||||
|
<div class="setting-dialog"> |
||||
|
<p><span style="color:#fff;">确认删除当前门类？</span></p> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" @click.native="handleConfirm">确定</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
<el-dialog title="确认删除" :visible.sync="reconfirmDeleteVisible" :before-close="handleClose"> |
||||
|
<span class="dialog-right-top" /> |
||||
|
<span class="dialog-left-bottom" /> |
||||
|
<div class="setting-dialog"> |
||||
|
<p><span style="color:#fff;">删除后，会永久清除此门类的相关设置及报表，请谨慎操作！</span></p> |
||||
|
<p><span style="color:red;">提示：为确保档案安全，必须先手工删除此门类的所有档案数据。</span></p> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" @click.native="handleConfirm">确定</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
<!-- 字典列表 --> |
||||
|
<el-row class="container-main" :gutter="20"> |
||||
|
<el-col class="container-left" :xs="10" :sm="8" :md="5" :lg="6" :xl="6"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<crudOperation :permission="permission"> |
||||
|
<template v-slot:right> |
||||
|
<el-button v-permission="permission.del" icon="el-icon-delete" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)">删除</el-button> |
||||
|
<el-button v-permission="permission.sort" icon="el-icon-delete" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)">排序</el-button> |
||||
|
</template> |
||||
|
</crudOperation> |
||||
|
<!--门类树状结构--> |
||||
|
<el-tree ref="tree" v-loading="crud.loading" :data="crud.data" :props="defaultProps" node-key="id" :expand-on-click-node="false" highlight-current @node-click="handleNodeClick" /> |
||||
|
</el-col> |
||||
|
<!-- 门类管理tab --> |
||||
|
<el-col class="container-right" :xs="14" :sm="16" :md="19" :lg="18" :xl="18"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import crudDict from '@/api/archivesConfig/dict' |
||||
|
import CRUD, { presenter, header, form } from '@crud/crud' |
||||
|
import crudOperation from '@crud/CRUD.operation' |
||||
|
import Treeselect from '@riophae/vue-treeselect' |
||||
|
import '@riophae/vue-treeselect/dist/vue-treeselect.css' |
||||
|
|
||||
|
const defaultForm = { id: null, dicName: null, dicCode: '1', dicExplain: null, dicType: true } |
||||
|
export default { |
||||
|
name: 'Category', |
||||
|
components: { crudOperation, Treeselect }, |
||||
|
cruds() { |
||||
|
return [ |
||||
|
CRUD({ |
||||
|
title: '门类', url: 'api/dictrionary/menu', |
||||
|
crudMethod: { ...crudDict }, |
||||
|
optShow: { |
||||
|
add: true, |
||||
|
edit: true, |
||||
|
del: false, |
||||
|
download: false, |
||||
|
group: false |
||||
|
}, |
||||
|
confirmDeleteMsg: '确定要删除当前字典吗', |
||||
|
sort: ['dicSequence,asc'] |
||||
|
}) |
||||
|
] |
||||
|
}, |
||||
|
mixins: [presenter(), header(), form(defaultForm)], |
||||
|
data() { |
||||
|
return { |
||||
|
rules: { |
||||
|
dicName: [ |
||||
|
{ required: true, message: '请输入字典名称', trigger: 'blur' } |
||||
|
] |
||||
|
}, |
||||
|
permission: { |
||||
|
add: ['admin', 'category:add'], |
||||
|
edit: ['admin', 'category:edit'], |
||||
|
del: ['admin', 'category:del'], |
||||
|
sort: ['admin', 'category:sort'] |
||||
|
}, |
||||
|
defaultProps: { |
||||
|
children: 'childMenus', |
||||
|
label: 'dicName' |
||||
|
}, |
||||
|
selectOptions: [ |
||||
|
{ |
||||
|
value: '1', |
||||
|
label: '文件夹' |
||||
|
}, |
||||
|
{ |
||||
|
value: '2', |
||||
|
label: '项目' |
||||
|
}, |
||||
|
{ |
||||
|
value: '3', |
||||
|
label: '案卷' |
||||
|
}, |
||||
|
{ |
||||
|
value: '4', |
||||
|
label: '卷内' |
||||
|
}, |
||||
|
{ |
||||
|
value: '5', |
||||
|
label: '文件' |
||||
|
}, |
||||
|
{ |
||||
|
value: '6', |
||||
|
label: '选择模板' |
||||
|
} |
||||
|
], |
||||
|
treeOptions: [ |
||||
|
{ |
||||
|
id: 'a', |
||||
|
label: 'a', |
||||
|
children: [ |
||||
|
{ |
||||
|
id: 'aa', |
||||
|
label: 'aa' |
||||
|
}, |
||||
|
{ |
||||
|
id: 'ab', |
||||
|
label: 'ab' |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
id: 'b', |
||||
|
label: 'b' |
||||
|
}, |
||||
|
{ |
||||
|
id: 'c', |
||||
|
label: 'c' |
||||
|
} |
||||
|
], |
||||
|
// activeAddBtn: false, |
||||
|
deleteVisible: false, |
||||
|
reconfirmDeleteVisible: false, |
||||
|
deleteData: {} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取数据前设置好接口地址 |
||||
|
[CRUD.HOOK.beforeRefresh]() { |
||||
|
if (this.$refs.dictDetail) { |
||||
|
this.$refs.dictDetail.query.id = '' |
||||
|
} |
||||
|
return true |
||||
|
}, |
||||
|
// 选中字典后，设置字典详情数据 |
||||
|
handleNodeClick(val) { |
||||
|
if (val) { |
||||
|
this.crud.selectionChangeHandler([val]) |
||||
|
this.$refs.dictDetail.query.id = val.id |
||||
|
this.$refs.dictDetail.dicPid = val.id |
||||
|
this.$refs.dictDetail.crud.toQuery() |
||||
|
// this.activeAddBtn = true |
||||
|
} |
||||
|
}, |
||||
|
updateKeyChildren(data) { |
||||
|
const oldDatas = this.$refs.tree.getCurrentNode().childMenus |
||||
|
if (oldDatas) { |
||||
|
for (let i = 0; i < data.length; i++) { |
||||
|
const oldData = oldDatas.find((d) => { return d.id === data[i].id }) |
||||
|
if (oldData) { |
||||
|
data[i].childMenus = oldData.childMenus |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
this.$refs.tree.updateKeyChildren(this.$refs.tree.getCurrentKey(), data) |
||||
|
}, |
||||
|
toDelete(data) { |
||||
|
this.deleteData = data |
||||
|
this.deleteVisible = true |
||||
|
}, |
||||
|
handleConfirm() { |
||||
|
this.deleteVisible = false |
||||
|
this.crud.delAllLoading = true |
||||
|
this.crud.doDelete(this.deleteData) |
||||
|
}, |
||||
|
handleClose(done) { |
||||
|
this.deleteData = {} |
||||
|
done() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style rel="stylesheet/scss" lang="scss" scoped> |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue