Skip to content

F
front-backend
Commit b60dcbf0 by Elune
Options

代码优化

parent 9f4689dc
Showing with 234 additions and 167 deletions
src/components/crud/CRUD.operation.vue → src/components/Crud/CRUD.operation.vue
......@@ -24,7 +24,7 @@
</el-button>
<el-button
slot="reference"
v-permission="permission.delete"
v-permission="permission.del"
class="filter-item"
type="danger"
icon="el-icon-delete"
......
src/components/crud/Pagination.vue → src/components/Crud/Pagination.vue
<!--分页-->
<template>
<el-pagination
:page-size.sync="page.size"
......
src/components/crud/RR.operation.vue → src/components/Crud/RR.operation.vue
<!--搜索与重置-->
<template>
<span>
<el-button
class="filter-item"
size="mini"
type="success"
icon="el-icon-search"
@click="crud.toQuery"
>
搜索
</el-button>
<el-button
class="filter-item"
size="mini"
type="warning"
icon="el-icon-refresh-left"
@click="crud.resetQuery()"
>
重置
</el-button>
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button>
<el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="crud.resetQuery()">重置</el-button>
</span>
</template>
<script>
......
src/components/crud/UD.operation.vue → src/components/Crud/UD.operation.vue
<template>
<div>
<el-button
v-permission="permission.edit"
size="mini"
type="primary"
icon="el-icon-edit"
@click="crud.toEdit(data)"
/>
<el-popover
v-model="pop"
v-permission="permission.delete"
placement="top"
width="180"
trigger="manual"
>
<el-button v-permission="permission.edit" size="mini" type="primary" icon="el-icon-edit" @click="crud.toEdit(data)" />
<el-popover v-model="pop" v-permission="permission.del" placement="top" width="180" trigger="manual">
<p>确定删除本条数据吗？</p>
<div
v-loading="crud.dataStatus[data.id].delete === 2"
style="text-align: right; margin: 0"
>
<el-button
size="mini"
type="text"
@click="doCancel"
>
取消
</el-button>
<el-button
type="primary"
size="mini"
@click="crud.doDelete(data)"
>
确定
</el-button>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="doCancel">取消</el-button>
<el-button :loading="crud.dataStatus[data.id].delete === 2" type="primary" size="mini" @click="crud.doDelete(data)">确定</el-button>
</div>
<el-button
slot="reference"
type="danger"
icon="el-icon-delete"
size="mini"
@click="toDelete"
/>
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" @click="toDelete" />
</el-popover>
</div>
</template>
<script>
import CRUD, { crud } from '@crud/crud'
export default {
mixins: [crud()],
......
src/components/crud/crud.js → src/components/Crud/crud.js
......@@ -121,6 +121,8 @@ function CRUD(options) {
}
crud.resetForm()
crud.status.add = CRUD.STATUS.PREPARED
callVmHook(crud, CRUD.HOOK.afterToAdd, crud.form)
callVmHook(crud, CRUD.HOOK.afterToCU, crud.form)
},
/**
* 启动编辑
......@@ -133,6 +135,8 @@ function CRUD(options) {
crud.resetForm(JSON.parse(JSON.stringify(data)))
crud.status.edit = CRUD.STATUS.PREPARED
crud.getDataStatus(data.id).edit = CRUD.STATUS.PREPARED
callVmHook(crud, CRUD.HOOK.afterToEdit, crud.form)
callVmHook(crud, CRUD.HOOK.afterToCU, crud.form)
},
/**
* 启动删除
......@@ -334,12 +338,18 @@ function CRUD(options) {
*/
resetDataStatus() {
const dataStatus = {}
crud.data.forEach(e => {
dataStatus[e.id] = {
delete: 0,
edit: 0
}
})
function resetStatus(datas) {
datas.forEach(e => {
dataStatus[e.id] = {
delete: 0,
edit: 0
}
if (e.children) {
resetStatus(e.children)
}
})
}
resetStatus(crud.data)
crud.dataStatus = dataStatus
},
/**
......@@ -350,7 +360,7 @@ function CRUD(options) {
return crud.dataStatus[id]
},
findVM(type) {
return crud.vms.find(vm => vm.type === type).vm
return crud.vms.find(vm => vm && vm.type === type).vm
},
notify(title, type = CRUD.NOTIFICATION_TYPE.INFO) {
crud.vms[0].vm.$notify({
......@@ -396,7 +406,7 @@ function CRUD(options) {
* @param {*} vm 组件实例
*/
unregisterVM(vm) {
this.vms.splice(this.vms.findIndex(e => e.vm === vm), 1)
this.vms.splice(this.vms.findIndex(e => e && e.vm === vm), 1)
}
})
// 冻结处理，需要扩展数据的话，使用crud.updateProp(name, value)，以crud.props.name形式访问，这个是响应式的，可以做数据绑定
......@@ -414,10 +424,11 @@ function callVmHook(crud, hook) {
for (let i = 2; i < arguments.length; ++i) {
nargs.push(arguments[i])
}
crud.vms.forEach(({
vm
}) => {
if (vm && vm[hook]) {
// 有些组件扮演了多个角色，调用钩子时，需要去重
const vmSet = new Set()
crud.vms.forEach(vm => vm && vmSet.add(vm.vm))
vmSet.forEach(vm => {
if (vm[hook]) {
ret = vm[hook].apply(vm, nargs) !== false && ret
}
})
......@@ -602,10 +613,16 @@ CRUD.HOOK = {
afterDeleteCancel: 'afterCrudDeleteCancel',
/** 新建 - 之前 */
beforeToAdd: 'beforeCrudToAdd',
/** 新建 - 之后 */
afterToAdd: 'afterCrudToAdd',
/** 编辑 - 之前 */
beforeToEdit: 'beforeCrudToEdit',
/** 编辑 - 之后 */
afterToEdit: 'afterCrudToEdit',
/** 开始 "新建/编辑" - 之前 */
beforeToCU: 'beforeCrudToCU',
/** 开始 "新建/编辑" - 之后 */
afterToCU: 'afterCrudToCU',
/** "新建/编辑" 验证 - 之前 */
beforeValidateCU: 'beforeCrudValidateCU',
/** "新建/编辑" 验证 - 之后 */
......
src/components/Operation/index.vue 0 → 100644
<!--增删改查-->
<template>
<div class="crud-opts">
<span class="crud-opts-left">
<el-button
v-permission="parent.permission.add"
class="filter-item"
size="mini"
type="primary"
icon="el-icon-plus"
@click="crud.toAdd"
>
新增
</el-button>
<el-button
v-permission="parent.permission.edit"
class="filter-item"
size="mini"
type="success"
icon="el-icon-edit"
:disabled="crud.selections.length !== 1"
@click="crud.toEdit(crud.selections[0])"
>
修改
</el-button>
<el-button
slot="reference"
v-permission="parent.permission.del"
class="filter-item"
type="danger"
icon="el-icon-delete"
size="mini"
:disabled="parent.selections.length === 0"
@click="toDelete(crud.selections)"
>
删除
</el-button>
<el-button
:loading="parent.downloadLoading"
class="filter-item"
size="mini"
type="warning"
icon="el-icon-download"
@click="parent.doExport"
>导出</el-button>
</span>
<el-button-group class="crud-opts-right">
<el-button
size="mini"
plain
type="info"
icon="el-icon-search"
@click="toggleSearch()"
/>
<el-button
size="mini"
icon="el-icon-refresh"
@click="crud.refresh()"
/>
<el-popover
placement="bottom-end"
width="150"
trigger="click"
>
<el-button
slot="reference"
size="mini"
icon="el-icon-s-grid"
>
<i
class="fa fa-caret-down"
aria-hidden="true"
/>
</el-button>
<el-checkbox
v-for="item in parent.tableColumns"
:key="item.label"
v-model="item.visible"
>
{{ item.label }}
</el-checkbox>
</el-popover>
</el-button-group>
</div>
</template>
<script>
export default {
props: {
parent: {
type: Object,
required: true
}
},
data() {
return {
}
},
created() {
this.parent.updateProp('searchToggle', true)
},
methods: {
toDelete(datas) {
this.$confirm(`确认删除选中的${datas.length}条数据?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (datas.length === 1) {
this.crud.doDelete(datas[0])
} else {
this.crud.doDeletes(datas)
}
}).catch(() => {
})
},
toggleSearch() {
this.crud.props.searchToggle = !this.crud.props.searchToggle
}
}
}
</script>
<style>
.crud-opts {
padding: 6px 0;
display: -webkit-flex;
display: flex;
align-items: center;
}
.crud-opts .crud-opts-right {
margin-left: auto;
}
</style>
src/components/Permission/permission.js
......@@ -4,7 +4,6 @@ export default {
inserted(el, binding, vnode) {
const { value } = binding
const roles = store.getters && store.getters.roles
if (value && value instanceof Array && value.length > 0) {
const permissionRoles = value
......@@ -16,7 +15,7 @@ export default {
el.parentNode && el.parentNode.removeChild(el)
}
} else {
throw new Error(`need roles! Like v-permission="['admin','editor']"`)
throw new Error(`使用方式： v-permission="['admin','editor']"`)
}
}
}
src/main.js
......@@ -34,7 +34,7 @@ Vue.use(mavonEditor)
Vue.use(permission)
Vue.use(dict)
Vue.use(Element, {
size: Cookies.get('size') || 'mini' // set element-ui default size
size: Cookies.get('size') || 'small' // set element-ui default size
})
Vue.config.productionTip = false
......
src/views/system/dept/index.vue
......@@ -2,43 +2,29 @@
<div class="app-container">
<!--工具栏-->
<div class="head-container">
<!-- 搜索 -->
<el-input v-model="query.name" clearable size="small" placeholder="输入部门名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
<el-date-picker
v-model="query.createTime"
:default-time="['00:00:00','23:59:59']"
type="daterange"
range-separator=":"
size="small"
class="date-item"
value-format="yyyy-MM-dd HH:mm:ss"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
<el-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 90px" @change="toQuery">
<el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
</el-select>
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
<!-- 新增 -->
<el-button
class="filter-item"
size="mini"
type="primary"
icon="el-icon-plus"
@click="showAddFormDialog"
>新增</el-button>
<!-- 导出 -->
<el-button
:loading="downloadLoading"
size="mini"
class="filter-item"
type="warning"
icon="el-icon-download"
@click="downloadMethod"
>导出</el-button>
<div v-if="crud.props.searchToggle">
<!-- 搜索 -->
<el-input v-model="query.name" clearable size="small" placeholder="输入部门名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<el-date-picker
v-model="query.createTime"
:default-time="['00:00:00','23:59:59']"
type="daterange"
range-separator=":"
size="small"
class="date-item"
value-format="yyyy-MM-dd HH:mm:ss"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
<el-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 90px" @change="crud.toQuery">
<el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
</el-select>
<rrOperation :crud="crud" />
</div>
<crudOperation :permission="permission" />
</div>
<!--表单组件-->
<el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="getFormTitle()" width="500px">
<el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" style="width: 370px;" />
......@@ -46,19 +32,19 @@
<el-form-item v-if="form.pid !== 0" label="状态" prop="enabled">
<el-radio v-for="item in dict.dept_status" :key="item.id" v-model="form.enabled" :label="item.value">{{ item.label }}</el-radio>
</el-form-item>
<el-form-item v-if="form.pid !== 0" style="margin-bottom: 0px;" label="上级部门" prop="pid">
<el-form-item v-if="form.pid !== 0" style="margin-bottom: 0;" label="上级部门" prop="pid">
<treeselect v-model="form.pid" :options="depts" style="width: 370px;" placeholder="选择上级类目" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="cancel">取消</el-button>
<el-button :loading="loading" type="primary" @click="submitMethod">确认</el-button>
<el-button type="text" @click="crud.cancelCU">取消</el-button>
<el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
</div>
</el-dialog>
<!--表格渲染-->
<el-table v-loading="loading" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" default-expand-all :data="data" row-key="id" size="small">
<el-table-column label="名称" prop="name" />
<el-table-column label="状态" align="center">
<el-table ref="table" v-loading="crud.loading" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" default-expand-all :data="crud.data" row-key="id" @selection-change="crud.selectionChangeHandler">
<el-table-column v-if="columns.visible('name')" label="名称" prop="name" />
<el-table-column v-if="columns.visible('enabled')" label="状态" align="center" prop="enabled">
<template slot-scope="scope">
<el-switch
v-model="scope.row.enabled"
......@@ -69,27 +55,17 @@
/>
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建日期">
<el-table-column v-if="columns.visible('createTime')" prop="createTime" label="创建日期">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column v-if="checkPermission(['admin','dept:edit','dept:del'])" label="操作" width="130px" align="center" fixed="right">
<el-table-column v-permission="['admin','dept:edit','dept:del']" label="操作" width="130px" align="center" fixed="right">
<template slot-scope="scope">
<el-button v-permission="['admin','dept:edit']" size="mini" type="primary" icon="el-icon-edit" @click="showEditFormDialog(scope.row)" />
<el-popover
:ref="scope.row.id"
v-permission="['admin','dept:del']"
placement="top"
width="180"
>
<p>确定删除本条数据吗？</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
<el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定</el-button>
</div>
<el-button slot="reference" :disabled="scope.row.id === 1" type="danger" icon="el-icon-delete" size="mini" />
</el-popover>
<udOperation
:data="scope.row"
:permission="permission"
/>
</template>
</el-table-column>
</el-table>
......@@ -97,55 +73,52 @@
</template>
<script>
import crud from '@/mixins/crud'
import crudDept from '@/api/system/dept'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
// crud交由presenter持有
const defaultCrud = CRUD({ title: '部门', url: 'api/dept', crudMethod: { ...crudDept }})
const defaultForm = { id: null, name: null, pid: 1, enabled: 'true' }
export default {
name: 'Dept',
components: { Treeselect },
mixins: [crud],
components: { Treeselect, crudOperation, rrOperation, udOperation },
mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
// 设置数据字典
dicts: ['dept_status'],
data() {
return {
title: '部门',
crudMethod: { ...crudDept },
depts: [],
form: { id: null, name: null, pid: 1, enabled: 'true' },
rules: {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' }
]
},
permission: {
add: ['admin', 'dept:add'],
edit: ['admin', 'dept:edit'],
del: ['admin', 'dept:del']
},
enabledTypeOptions: [
{ key: 'true', display_name: '正常' },
{ key: 'false', display_name: '禁用' }
]
}
},
created() {
this.$nextTick(() => {
this.init()
})
},
methods: {
// 获取数据前设置好接口地址
beforeInit() {
this.url = 'api/dept'
return true
},
// 打开新增弹窗前做的操作
beforeShowAddForm() {
this.getDepts()
},
// 打开编辑弹窗前做的操作
beforeShowEditForm(data) {
this.getDepts()
this.form.enabled = data.enabled.toString()
// 打开新增与编辑弹窗前做的操作
[CRUD.HOOK.afterToCU](crud, form) {
form.enabled = `${form.enabled}`
// 获取所有部门
crudDept.getDepts({ enabled: true }).then(res => {
this.depts = res.content
})
},
// 提交前先做下验证
beforeSubmitMethod() {
// 提交前的验证
[CRUD.HOOK.afterValidateCU]() {
if (!this.form.pid) {
this.$message({
message: '上级部门不能为空',
......@@ -171,17 +144,10 @@ export default {
}).catch(() => {
data.enabled = !data.enabled
})
},
// 获取所有部门
getDepts() {
this.crudMethod.getDepts({ enabled: true }).then(res => {
this.depts = res.content
})
}
}
}
</script>
<style scoped>
</style>
src/views/system/job/index.vue
......@@ -36,7 +36,7 @@
</el-table-column>
<!-- 编辑与删除 -->
<el-table-column
v-permission="['ADMIN','USERJOB_ALL','USERJOB_EDIT','USERJOB_DELETE']"
v-permission="['admin','job:edit','job:del']"
label="操作"
width="130px"
align="center"
......@@ -85,7 +85,7 @@ export default {
permission: {
add: ['admin', 'job:add'],
edit: ['admin', 'job:edit'],
delete: ['admin', 'job:delete']
del: ['admin', 'job:del']
}
}
},
......
vue.config.js
......@@ -47,7 +47,7 @@ module.exports = {
resolve: {
alias: {
'@': resolve('src'),
'@crud': resolve('src/components/crud')
'@crud': resolve('src/components/Crud')
}
}
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment