11 changed files with 496 additions and 59 deletions
-
6src/assets/styles/index.scss
-
34src/assets/styles/mixin.scss
-
12src/assets/styles/yxk-admin.scss
-
21src/views/components/field/index.vue
-
36src/views/components/field/module/form.vue
-
2src/views/system/dept/index.vue
-
180src/views/system/dict/dictDetail.vue
-
246src/views/system/dict/index.vue
-
6src/views/system/field/index.vue
-
8src/views/system/menu/index.vue
-
0src/views/system/metadata/index.vue
@ -0,0 +1,180 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<!--工具栏--> |
||||
|
<div class="head-container" style="padding:0 0 20px 0"> |
||||
|
<crudOperation :permission="permission"> |
||||
|
<template v-slot:left> |
||||
|
<el-button v-permission="permission.add" size="mini" type="primary" icon="el-icon-plus" :disabled="!activeAddBtn" @click="crud.toAdd">新增</el-button> |
||||
|
</template> |
||||
|
<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> |
||||
|
</template> |
||||
|
</crudOperation> |
||||
|
</div> |
||||
|
<!--表单组件--> |
||||
|
<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-input v-model="form.dicCode" style="width: 370px;" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="内容说明" prop="dicExplain"> |
||||
|
<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"> |
||||
|
<div class="dialog-delt"> |
||||
|
<p><span>确定删除当前字典内容吗？</span></p> |
||||
|
</div> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" @click.native="handleConfirm">确定</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
<div class="container-right" style="min-height: calc(100vh - 242px);"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<!--表格渲染--> |
||||
|
<el-table ref="table" v-loading="crud.loading" :data="crud.data" highlight-current-row style="width: 100%;" @selection-change="selectionChangeHandler" @row-click="clickRowHandler"> |
||||
|
<el-table-column type="selection" width="55" /> |
||||
|
<el-table-column prop="dicName" label="字典名称" /> |
||||
|
<el-table-column prop="dicCode" label="字典代码" /> |
||||
|
<el-table-column prop="dicExplain" label="内容说明" /> |
||||
|
</el-table> |
||||
|
<!--分页组件--> |
||||
|
<pagination /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import crudDictDetail from '@/api/archivesConfig/dictDetail' |
||||
|
import CRUD, { presenter, header, form } from '@crud/crud' |
||||
|
import crudOperation from '@crud/CRUD.operation' |
||||
|
import pagination from '@crud/Pagination' |
||||
|
|
||||
|
const defaultForm = { id: null, dicName: null, dicCode: null, dicExplain: null, dicType: false } |
||||
|
|
||||
|
export default { |
||||
|
components: { crudOperation, pagination }, |
||||
|
cruds() { |
||||
|
return [ |
||||
|
CRUD({ |
||||
|
title: '字典内容', url: 'api/dictrionary/findSubsetById', query: { id: '' }, |
||||
|
crudMethod: { ...crudDictDetail }, |
||||
|
optShow: { |
||||
|
add: false, |
||||
|
edit: true, |
||||
|
del: false, |
||||
|
reset: false, |
||||
|
download: false, |
||||
|
group: false |
||||
|
}, |
||||
|
queryOnPresenterCreated: false, |
||||
|
sort: ['dicSequence,asc'] |
||||
|
}) |
||||
|
] |
||||
|
}, |
||||
|
mixins: [ |
||||
|
presenter(), |
||||
|
header(), |
||||
|
form(function() { |
||||
|
return Object.assign({ dicPid: this.dicPid }, defaultForm) |
||||
|
}) |
||||
|
], |
||||
|
props: { |
||||
|
activeAddBtn: { |
||||
|
type: Boolean |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
dicPid: null, |
||||
|
needRefreshTree: false, |
||||
|
rules: { |
||||
|
dicName: [ |
||||
|
{ required: true, message: '请输入字典名称', trigger: 'blur' } |
||||
|
], |
||||
|
dicCode: [ |
||||
|
{ required: true, message: '请输入字典代码', trigger: 'blur' } |
||||
|
] |
||||
|
}, |
||||
|
permission: { |
||||
|
add: ['admin', 'dict:add'], |
||||
|
edit: ['admin', 'dict:edit'], |
||||
|
del: ['admin', 'dict:del'] |
||||
|
}, |
||||
|
deleteVisible: false, |
||||
|
deleteData: {} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
[CRUD.HOOK.afterSubmit]() { |
||||
|
this.needRefreshTree = true |
||||
|
}, |
||||
|
[CRUD.HOOK.afterDelete]() { |
||||
|
this.needRefreshTree = true |
||||
|
}, |
||||
|
// 获取数据前设置默认参数 |
||||
|
[CRUD.HOOK.beforeRefresh]() { |
||||
|
this.crud.query.id = this.dicPid |
||||
|
}, |
||||
|
[CRUD.HOOK.afterRefresh](crud) { |
||||
|
if (this.needRefreshTree) { |
||||
|
this.needRefreshTree = false |
||||
|
this.$emit('treeRefresh', crud.data) |
||||
|
} |
||||
|
}, |
||||
|
clickRowHandler(row) { |
||||
|
this.$refs.table.clearSelection() |
||||
|
this.$refs.table.toggleRowSelection(row) |
||||
|
}, |
||||
|
selectionChangeHandler(val) { |
||||
|
if (val.length > 1) { |
||||
|
// 取出最后val的最后一个返回出来 |
||||
|
const finalVal = val.pop() |
||||
|
// 清除所有选中 |
||||
|
this.$refs.table.clearSelection() |
||||
|
// 给最后一个加上选中 |
||||
|
this.$refs.table.toggleRowSelection(finalVal) |
||||
|
this.crud.selectionChangeHandler([finalVal]) |
||||
|
} else { |
||||
|
this.crud.selectionChangeHandler(val) |
||||
|
} |
||||
|
}, |
||||
|
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> |
||||
|
::v-deep thead .el-table-column--selection .cell { |
||||
|
display: none; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,246 @@ |
|||||
|
<template> |
||||
|
<div class="app-container row-container"> |
||||
|
<!--工具栏--> |
||||
|
<div class="head-container"> |
||||
|
<crudOperation :permission="permission"> |
||||
|
<!-- <template v-slot:left> |
||||
|
<el-button v-permission="permission.add" size="mini" type="primary" icon="el-icon-plus" :disabled="!activeAddBtn" @click="crud.toAdd">新增</el-button> |
||||
|
</template> |
||||
|
<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> |
||||
|
</template> --> |
||||
|
</crudOperation> |
||||
|
</div> |
||||
|
<!--表单组件--> |
||||
|
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title"> |
||||
|
<div class="setting-dialog"> |
||||
|
<el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="90px"> |
||||
|
<el-form-item label="字典名称" prop="dicName"> |
||||
|
<el-input v-model="form.dicName" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="字典代码" prop="dicCode"> |
||||
|
<el-input v-model="form.dicCode" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="顶级节点" prop="isTop"> |
||||
|
<el-radio-group v-model="form.isTop"> |
||||
|
<el-radio label="1">是</el-radio> |
||||
|
<el-radio label="0">否</el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="排序" prop="sequence"> |
||||
|
<el-input-number |
||||
|
v-model.number="form.sequence" |
||||
|
:min="0" |
||||
|
:max="999" |
||||
|
controls-position="right" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item v-if="form.isTop === '0'" label="上级节点" prop="dicPid"> |
||||
|
<treeselect |
||||
|
v-model="form.dicPid" |
||||
|
:load-options="loadDicts" |
||||
|
:options="dicts" |
||||
|
placeholder="选择上级节点" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="内容说明" prop="dicExplain"> |
||||
|
<el-input v-model="form.dicExplain" type="textarea" :rows="4" 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-dialog title="删除字典内容" :visible.sync="deleteVisible" :before-close="handleClose"> |
||||
|
<span class="dialog-right-top" /> |
||||
|
<span class="dialog-left-bottom" /> |
||||
|
<div class="setting-dialog"> |
||||
|
<div class="dialog-delt"> |
||||
|
<p><span>确定删除当前字典内容吗？</span></p> |
||||
|
</div> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" @click.native="handleConfirm">确定</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
<div class="container-wrap"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<!--表格渲染--> |
||||
|
<!-- @selection-change="selectionChangeHandler" |
||||
|
@row-click="clickRowHandler" --> |
||||
|
<el-table |
||||
|
ref="table" |
||||
|
v-loading="crud.loading" |
||||
|
lazy |
||||
|
:load="getDicts" |
||||
|
:data="crud.data" |
||||
|
:tree-props="{children: 'childMenus', hasChildren: 'hasChildren'}" |
||||
|
highlight-current-row |
||||
|
row-key="id" |
||||
|
style="width: 100%;" |
||||
|
height="calc(100vh - 232px)" |
||||
|
@select="crud.selectChange" |
||||
|
@select-all="crud.selectAllChange" |
||||
|
@selection-change="crud.selectionChangeHandler" |
||||
|
> |
||||
|
<el-table-column type="selection" width="55" /> |
||||
|
<el-table-column prop="dicName" label="字典名称" /> |
||||
|
<el-table-column prop="dicCode" label="字典代码" /> |
||||
|
<el-table-column prop="dicExplain" label="内容说明" /> |
||||
|
<el-table-column prop="dicSequence" label="排序" /> |
||||
|
<el-table-column prop="createTime" label="创建日期" width="200px"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.createTime | parseTime }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<!--分页组件--> |
||||
|
<!-- <pagination /> --> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import crudDict from '@/api/archivesConfig/dict' |
||||
|
// import crudDictDetail from '@/api/archivesConfig/dictDetail' |
||||
|
import CRUD, { presenter, header, form } 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' |
||||
|
|
||||
|
const defaultForm = { id: null, dicName: null, isTop: '1', dicCode: null, sequence: 999, dicExplain: null, dicType: false, dicPid: null } |
||||
|
|
||||
|
export default { |
||||
|
name: 'Dict', |
||||
|
components: { crudOperation, Treeselect }, |
||||
|
cruds() { |
||||
|
return [ |
||||
|
CRUD({ |
||||
|
title: '字典', url: 'api/dictrionary/menu', |
||||
|
crudMethod: { ...crudDict }, |
||||
|
sort: ['dicSequence,asc'] |
||||
|
}) |
||||
|
] |
||||
|
}, |
||||
|
mixins: [ |
||||
|
presenter(), |
||||
|
header(), |
||||
|
form(function() { |
||||
|
return Object.assign({ dicPid: this.dicPid }, defaultForm) |
||||
|
}) |
||||
|
], |
||||
|
props: { |
||||
|
activeAddBtn: { |
||||
|
type: Boolean |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
dicts: [], |
||||
|
dicPid: null, |
||||
|
needRefreshTree: false, |
||||
|
rules: { |
||||
|
dicName: [ |
||||
|
{ required: true, message: '请输入字典名称', trigger: 'blur' } |
||||
|
], |
||||
|
dicCode: [ |
||||
|
{ required: true, message: '请输入字典代码', trigger: 'blur' } |
||||
|
], |
||||
|
isTop: [ |
||||
|
{ required: true, message: '请选择是否为顶级节点', trigger: 'change' } |
||||
|
], |
||||
|
sequence: [ |
||||
|
{ required: true, message: '请输入序号', trigger: 'blur', type: 'number' } |
||||
|
] |
||||
|
}, |
||||
|
permission: { |
||||
|
add: ['admin', 'dict:add'], |
||||
|
edit: ['admin', 'dict:edit'], |
||||
|
del: ['admin', 'dict:del'] |
||||
|
}, |
||||
|
deleteVisible: false, |
||||
|
deleteData: {} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
[CRUD.HOOK.afterSubmit]() { |
||||
|
this.needRefreshTree = true |
||||
|
}, |
||||
|
[CRUD.HOOK.afterDelete]() { |
||||
|
this.needRefreshTree = true |
||||
|
}, |
||||
|
// 获取数据前设置默认参数 |
||||
|
[CRUD.HOOK.beforeRefresh]() { |
||||
|
this.crud.query.id = this.dicPid |
||||
|
}, |
||||
|
[CRUD.HOOK.afterRefresh](crud) { |
||||
|
if (this.needRefreshTree) { |
||||
|
this.needRefreshTree = false |
||||
|
this.$emit('treeRefresh', crud.data) |
||||
|
} |
||||
|
}, |
||||
|
getDicts(tree, treeNode, resolve) { |
||||
|
const params = { pid: tree.id } |
||||
|
setTimeout(() => { |
||||
|
crudDict.getDicts(params).then(res => { |
||||
|
resolve(res.content) |
||||
|
}) |
||||
|
}, 100) |
||||
|
}, |
||||
|
// 获取弹窗内部门数据 |
||||
|
loadDicts({ action, parentNode, callback }) { |
||||
|
if (action === LOAD_CHILDREN_OPTIONS) { |
||||
|
crudDict.getDicts({ enabled: true, pid: parentNode.id }).then(res => { |
||||
|
parentNode.childMenus = res.content.map(function(obj) { |
||||
|
if (obj.hasChildren) { |
||||
|
obj.children = null |
||||
|
} |
||||
|
return obj |
||||
|
}) |
||||
|
setTimeout(() => { |
||||
|
callback() |
||||
|
}, 100) |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
clickRowHandler(row) { |
||||
|
this.$refs.table.clearSelection() |
||||
|
this.$refs.table.toggleRowSelection(row) |
||||
|
}, |
||||
|
selectionChangeHandler(val) { |
||||
|
if (val.length > 1) { |
||||
|
// 取出最后val的最后一个返回出来 |
||||
|
const finalVal = val.pop() |
||||
|
// 清除所有选中 |
||||
|
this.$refs.table.clearSelection() |
||||
|
// 给最后一个加上选中 |
||||
|
this.$refs.table.toggleRowSelection(finalVal) |
||||
|
this.crud.selectionChangeHandler([finalVal]) |
||||
|
} else { |
||||
|
this.crud.selectionChangeHandler(val) |
||||
|
} |
||||
|
}, |
||||
|
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 lang="scss" scoped> |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue