4 changed files with 41 additions and 181 deletions
-
9src/assets/styles/mixin.scss
-
31src/assets/styles/yxk-admin.scss
-
180src/views/system/dict/dictDetail.vue
-
2src/views/system/dict/index.vue
@ -1,180 +0,0 @@ |
|||||
<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> |
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue