1. 简化CRUD，少量代码即可实现单表维护，只需提供基本的CRUD方法、默认表单数据、和自定义的查询 (#57)
2. 增加搜索条件重置、操作栏（新增、修改、删除、导出、控制搜索栏可见性、刷新、过滤表格列显示） 3. 表单和头部（搜索栏）组件从主页面分类出来，方便代码组织维护
This commit is contained in:
Moxun
elunez
134
src/components/crud/CRUD.operation.vue
Normal file
134
src/components/crud/CRUD.operation.vue
Normal file
@@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<div class="crud-opts">
|
||||
<span class="crud-opts-left">
|
||||
<el-button
|
||||
v-permission="permission.add"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="crud.toAdd"
|
||||
>
|
||||
新增
|
||||
</el-button>
|
||||
<el-button
|
||||
v-permission="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="permission.delete"
|
||||
class="filter-item"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="crud.selections.length === 0"
|
||||
@click="toDelete(crud.selections)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
<el-button
|
||||
:loading="crud.downloadLoading"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
@click="crud.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 crud.props.tableColumns"
|
||||
:key="item.label"
|
||||
v-model="item.visible"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-checkbox>
|
||||
</el-popover>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { crud } from '@crud/crud'
|
||||
export default {
|
||||
mixins: [crud()],
|
||||
props: {
|
||||
permission: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.crud.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>
|
||||
17
src/components/crud/Pagination.vue
Normal file
17
src/components/crud/Pagination.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<el-pagination
|
||||
:page-size.sync="page.size"
|
||||
:total="page.total"
|
||||
:current-page.sync="page.page"
|
||||
style="margin-top: 8px;"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@size-change="crud.sizeChangeHandler($event)"
|
||||
@current-change="crud.pageChangeHandler"
|
||||
/>
|
||||
</template>
|
||||
<script>
|
||||
import { pagination } from '@crud/crud'
|
||||
export default {
|
||||
mixins: [pagination()]
|
||||
}
|
||||
</script>
|
||||
37
src/components/crud/RR.operation.vue
Normal file
37
src/components/crud/RR.operation.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<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>
|
||||
</span>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
crud: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
itemClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
82
src/components/crud/UD.operation.vue
Normal file
82
src/components/crud/UD.operation.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<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()],
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
permission: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pop: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doCancel() {
|
||||
this.pop = false
|
||||
this.crud.cancelDelete(this.data)
|
||||
},
|
||||
toDelete() {
|
||||
this.pop = true
|
||||
},
|
||||
[CRUD.HOOK.afterDelete](crud, data) {
|
||||
if (data === this.data) {
|
||||
this.pop = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
650
src/components/crud/crud.js
Normal file
650
src/components/crud/crud.js
Normal file
@@ -0,0 +1,650 @@
|
||||
import { initData, download } from '@/api/data'
|
||||
import { parseTime, downloadFile } from '@/utils/index'
|
||||
import Vue from 'vue'
|
||||
|
||||
/**
|
||||
* CRUD配置
|
||||
* @author moxun
|
||||
* @param {*} options <br>
|
||||
* @return crud instance.
|
||||
* @example
|
||||
*/
|
||||
function CRUD(options) {
|
||||
const defaultOptions = {
|
||||
// 标题
|
||||
title: '',
|
||||
// 请求数据的url
|
||||
url: '',
|
||||
// 表格数据
|
||||
data: [],
|
||||
// 选择项
|
||||
selections: [],
|
||||
// 待查询的对象
|
||||
query: {},
|
||||
// 查询数据的参数
|
||||
params: {},
|
||||
// Form 表单
|
||||
form: {},
|
||||
// 重置表单
|
||||
defaultForm: () => {},
|
||||
// 排序规则，默认 id 降序， 支持多字段排序 ['id,desc', 'createTime,asc']
|
||||
sort: ['id,desc'],
|
||||
// 等待时间
|
||||
time: 50,
|
||||
// CRUD Method
|
||||
crudMethod: {
|
||||
add: (form) => {},
|
||||
delete: (id) => {},
|
||||
edit: (form) => {},
|
||||
get: (id) => {}
|
||||
},
|
||||
// 自定义一些扩展属性
|
||||
props: {},
|
||||
// 在主页准备
|
||||
queryOnPresenterCreated: true,
|
||||
// 调试开关
|
||||
debug: false
|
||||
}
|
||||
options = mergeOptions(defaultOptions, options)
|
||||
const data = {
|
||||
...options,
|
||||
// 记录数据状态
|
||||
dataStatus: {},
|
||||
status: {
|
||||
add: CRUD.STATUS.NORMAL,
|
||||
edit: CRUD.STATUS.NORMAL,
|
||||
// 添加或编辑状态
|
||||
get cu() {
|
||||
if (this.add === CRUD.STATUS.NORMAL && this.edit === CRUD.STATUS.NORMAL) {
|
||||
return CRUD.STATUS.NORMAL
|
||||
} else if (this.add === CRUD.STATUS.PREPARED || this.edit === CRUD.STATUS.PREPARED) {
|
||||
return CRUD.STATUS.PREPARED
|
||||
} else if (this.add === CRUD.STATUS.PROCESSING || this.edit === CRUD.STATUS.PROCESSING) {
|
||||
return CRUD.STATUS.PROCESSING
|
||||
}
|
||||
throw new Error('wrong crud\'s cu status')
|
||||
},
|
||||
// 标题
|
||||
get title() {
|
||||
return this.add > CRUD.STATUS.NORMAL ? `新增${crud.title}` : this.edit > CRUD.STATUS.NORMAL ? `编辑${crud.title}` : crud.title
|
||||
}
|
||||
},
|
||||
page: {
|
||||
// 页码
|
||||
page: 0,
|
||||
// 每页数据条数
|
||||
size: 10,
|
||||
// 总数据条数
|
||||
total: 0
|
||||
},
|
||||
// 整体loading
|
||||
loading: true,
|
||||
// 导出的 Loading
|
||||
downloadLoading: false
|
||||
}
|
||||
const methods = {
|
||||
// 搜索
|
||||
toQuery() {
|
||||
crud.page.page = 1
|
||||
crud.refresh()
|
||||
},
|
||||
// 刷新
|
||||
refresh() {
|
||||
if (!callVmHook(crud, CRUD.HOOK.beforeRefresh)) {
|
||||
return
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
crud.loading = true
|
||||
// 请求数据
|
||||
initData(crud.url, crud.getQueryParams()).then(data => {
|
||||
crud.page.total = data.total
|
||||
crud.data = data.content
|
||||
crud.resetDataStatus()
|
||||
// time 毫秒后显示表格
|
||||
setTimeout(() => {
|
||||
crud.loading = false
|
||||
callVmHook(crud, CRUD.HOOK.afterRefresh)
|
||||
}, crud.time)
|
||||
resolve(data)
|
||||
}).catch(err => {
|
||||
crud.loading = false
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 启动添加
|
||||
*/
|
||||
toAdd() {
|
||||
if (!(callVmHook(crud, CRUD.HOOK.beforeToAdd, crud.form) && callVmHook(crud, CRUD.HOOK.beforeToCU, crud.form))) {
|
||||
return
|
||||
}
|
||||
crud.resetForm()
|
||||
crud.status.add = CRUD.STATUS.PREPARED
|
||||
},
|
||||
/**
|
||||
* 启动编辑
|
||||
* @param {*} data 数据项
|
||||
*/
|
||||
toEdit(data) {
|
||||
if (!(callVmHook(crud, CRUD.HOOK.beforeToEdit, crud.form) && callVmHook(crud, CRUD.HOOK.beforeToCU, crud.form))) {
|
||||
return
|
||||
}
|
||||
crud.resetForm(JSON.parse(JSON.stringify(data)))
|
||||
crud.status.edit = CRUD.STATUS.PREPARED
|
||||
crud.getDataStatus(data.id).edit = CRUD.STATUS.PREPARED
|
||||
},
|
||||
/**
|
||||
* 启动删除
|
||||
* @param {*} data 数据项
|
||||
*/
|
||||
toDelete(data) {
|
||||
crud.getDataStatus(data.id).delete = CRUD.STATUS.PREPARED
|
||||
},
|
||||
/**
|
||||
* 取消删除
|
||||
* @param {*} data 数据项
|
||||
*/
|
||||
cancelDelete(data) {
|
||||
if (!callVmHook(crud, CRUD.HOOK.beforeDeleteCancel, data)) {
|
||||
return
|
||||
}
|
||||
crud.getDataStatus(data.id).delete = CRUD.STATUS.NORMAL
|
||||
callVmHook(crud, CRUD.HOOK.afterDeleteCancel, data)
|
||||
},
|
||||
/**
|
||||
* 取消新增/编辑
|
||||
*/
|
||||
cancelCU() {
|
||||
const addStatus = crud.status.add
|
||||
const editStatus = crud.status.edit
|
||||
if (addStatus === CRUD.STATUS.PREPARED) {
|
||||
if (!callVmHook(crud, CRUD.HOOK.beforeAddCancel, crud.form)) {
|
||||
return
|
||||
}
|
||||
crud.status.add = CRUD.STATUS.NORMAL
|
||||
}
|
||||
if (editStatus === CRUD.STATUS.PREPARED) {
|
||||
if (!callVmHook(crud, CRUD.HOOK.beforeEditCancel, crud.form)) {
|
||||
return
|
||||
}
|
||||
crud.status.edit = CRUD.STATUS.NORMAL
|
||||
crud.getDataStatus(crud.form.id).edit = CRUD.STATUS.NORMAL
|
||||
}
|
||||
crud.resetForm()
|
||||
if (addStatus === CRUD.STATUS.PREPARED) {
|
||||
callVmHook(crud, CRUD.HOOK.afterAddCancel, crud.form)
|
||||
}
|
||||
if (editStatus === CRUD.STATUS.PREPARED) {
|
||||
callVmHook(crud, CRUD.HOOK.afterEditCancel, crud.form)
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 提交新增/编辑
|
||||
*/
|
||||
submitCU() {
|
||||
if (!callVmHook(crud, CRUD.HOOK.beforeValidateCU)) {
|
||||
return
|
||||
}
|
||||
crud.findVM('form').$refs['form'].validate(valid => {
|
||||
if (!valid) {
|
||||
return
|
||||
}
|
||||
if (!callVmHook(crud, CRUD.HOOK.afterValidateCU)) {
|
||||
return
|
||||
}
|
||||
if (crud.status.add === CRUD.STATUS.PREPARED) {
|
||||
crud.doAdd()
|
||||
} else if (crud.status.edit === CRUD.STATUS.PREPARED) {
|
||||
crud.doEdit()
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 执行添加
|
||||
*/
|
||||
doAdd() {
|
||||
if (!callVmHook(crud, CRUD.HOOK.beforeSubmit)) {
|
||||
return
|
||||
}
|
||||
crud.crudMethod.add(crud.form).then(() => {
|
||||
crud.status.add = CRUD.STATUS.NORMAL
|
||||
crud.resetForm()
|
||||
crud.notify('新增成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
|
||||
callVmHook(crud, CRUD.HOOK.afterSubmit)
|
||||
crud.toQuery()
|
||||
}).catch(() => {})
|
||||
},
|
||||
/**
|
||||
* 执行编辑
|
||||
*/
|
||||
doEdit() {
|
||||
if (!callVmHook(crud, CRUD.HOOK.beforeSubmit)) {
|
||||
return
|
||||
}
|
||||
crud.crudMethod.edit(crud.form).then(() => {
|
||||
crud.status.edit = CRUD.STATUS.NORMAL
|
||||
crud.getDataStatus(crud.form.id).edit = CRUD.STATUS.NORMAL
|
||||
crud.resetForm()
|
||||
crud.notify('编辑成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
|
||||
callVmHook(crud, CRUD.HOOK.afterSubmit)
|
||||
crud.refresh()
|
||||
}).catch(() => {})
|
||||
},
|
||||
/**
|
||||
* 执行删除
|
||||
* @param {*} data 数据项
|
||||
*/
|
||||
doDelete(data) {
|
||||
const dataStatus = crud.getDataStatus(data.id)
|
||||
if (!callVmHook(crud, CRUD.HOOK.beforeDelete, data)) {
|
||||
return
|
||||
}
|
||||
dataStatus.delete = CRUD.STATUS.PROCESSING
|
||||
return crud.crudMethod.del(data.id).then(() => {
|
||||
dataStatus.delete = CRUD.STATUS.NORMAL
|
||||
crud.dleChangePage(1)
|
||||
crud.notify('删除成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
|
||||
callVmHook(crud, CRUD.HOOK.afterDelete, data)
|
||||
crud.refresh()
|
||||
}).catch(() => {
|
||||
dataStatus.delete = CRUD.STATUS.PREPARED
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 通用导出
|
||||
*/
|
||||
doExport() {
|
||||
crud.downloadLoading = true
|
||||
download(crud.url + '/download', crud.getQueryParams()).then(result => {
|
||||
downloadFile(result, crud.title + '数据', 'xlsx')
|
||||
crud.downloadLoading = false
|
||||
}).catch(() => {
|
||||
crud.downloadLoading = false
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 获取查询参数
|
||||
*/
|
||||
getQueryParams: function() {
|
||||
return {
|
||||
page: crud.page.page - 1,
|
||||
size: crud.page.size,
|
||||
sort: crud.sort,
|
||||
...crud.query,
|
||||
...crud.params
|
||||
}
|
||||
},
|
||||
// 当前页改变
|
||||
pageChangeHandler(e) {
|
||||
crud.page.page = e
|
||||
crud.refresh()
|
||||
},
|
||||
// 每页条数改变
|
||||
sizeChangeHandler(e) {
|
||||
crud.page.size = e
|
||||
crud.page.page = 1
|
||||
crud.refresh()
|
||||
},
|
||||
// 预防删除第二页最后一条数据时，或者多选删除第二页的数据时，页码错误导致请求无数据
|
||||
dleChangePage(size) {
|
||||
if (crud.data.length === size && crud.page.page !== 1) {
|
||||
crud.page.page -= 1
|
||||
}
|
||||
},
|
||||
// 选择改变
|
||||
selectionChangeHandler(val) {
|
||||
crud.selections = val
|
||||
},
|
||||
/**
|
||||
* 重置查询参数
|
||||
* @param {Boolean} toQuery 重置后进行查询操作
|
||||
*/
|
||||
resetQuery(toQuery = true) {
|
||||
const defaultQuery = JSON.parse(JSON.stringify(crud.defaultQuery))
|
||||
const query = crud.query
|
||||
Object.keys(query).forEach(key => {
|
||||
query[key] = defaultQuery[key]
|
||||
})
|
||||
if (toQuery) {
|
||||
crud.toQuery()
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 重置表单
|
||||
* @param {Array} data 数据
|
||||
*/
|
||||
resetForm(data) {
|
||||
const form = data || (typeof crud.defaultForm === 'object' ? JSON.parse(JSON.stringify(crud.defaultForm)) : crud.defaultForm())
|
||||
const crudFrom = crud.form
|
||||
for (const key in form) {
|
||||
if (crudFrom.hasOwnProperty(key)) {
|
||||
crudFrom[key] = form[key]
|
||||
} else {
|
||||
Vue.set(crudFrom, key, form[key])
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 重置数据状态
|
||||
*/
|
||||
resetDataStatus() {
|
||||
const dataStatus = {}
|
||||
crud.data.forEach(e => {
|
||||
dataStatus[e.id] = {
|
||||
delete: 0,
|
||||
edit: 0
|
||||
}
|
||||
})
|
||||
crud.dataStatus = dataStatus
|
||||
},
|
||||
/**
|
||||
* 获取数据状态
|
||||
* @param {Number | String} id 数据项id
|
||||
*/
|
||||
getDataStatus(id) {
|
||||
return crud.dataStatus[id]
|
||||
},
|
||||
findVM(type) {
|
||||
return crud.vms.find(vm => vm.type === type).vm
|
||||
},
|
||||
notify(title, type = CRUD.NOTIFICATION_TYPE.INFO) {
|
||||
crud.vms[0].vm.$notify({
|
||||
title,
|
||||
type,
|
||||
duration: 2500
|
||||
})
|
||||
},
|
||||
updateProp(name, value) {
|
||||
Vue.set(crud.props, name, value)
|
||||
}
|
||||
}
|
||||
const crud = Object.assign({}, data)
|
||||
// 可观测化
|
||||
Vue.observable(crud)
|
||||
// 附加方法
|
||||
Object.assign(crud, methods)
|
||||
// 记录初始默认的查询参数，后续重置查询时使用
|
||||
Object.assign(crud, {
|
||||
defaultQuery: JSON.parse(JSON.stringify(data.query)),
|
||||
// 预留4位存储：组件 主页、头部、分页、表单，调试查看也方便找
|
||||
vms: Array(4),
|
||||
/**
|
||||
* 注册组件实例
|
||||
* @param {String} type 类型
|
||||
* @param {*} vm 组件实例
|
||||
* @param {Number} index 该参数内部使用
|
||||
*/
|
||||
registerVM(type, vm, index = -1) {
|
||||
const vmObj = {
|
||||
type,
|
||||
vm: vm
|
||||
}
|
||||
if (index < 0) {
|
||||
this.vms.push(vmObj)
|
||||
return
|
||||
}
|
||||
this.vms.length = Math.max(this.vms.length, index)
|
||||
this.vms.splice(index, 1, vmObj)
|
||||
},
|
||||
/**
|
||||
* 取消注册组件实例
|
||||
* @param {*} vm 组件实例
|
||||
*/
|
||||
unregisterVM(vm) {
|
||||
this.vms.splice(this.vms.findIndex(e => e.vm === vm), 1)
|
||||
}
|
||||
})
|
||||
// 冻结处理，需要扩展数据的话，使用crud.updateProp(name, value)，以crud.props.name形式访问，这个是响应式的，可以做数据绑定
|
||||
Object.freeze(crud)
|
||||
return crud
|
||||
}
|
||||
|
||||
// hook VM
|
||||
function callVmHook(crud, hook) {
|
||||
if (crud.debug) {
|
||||
console.log('callVmHook: ' + hook)
|
||||
}
|
||||
let ret = true
|
||||
const nargs = [crud]
|
||||
for (let i = 2; i < arguments.length; ++i) {
|
||||
nargs.push(arguments[i])
|
||||
}
|
||||
crud.vms.forEach(({
|
||||
vm
|
||||
}) => {
|
||||
if (vm && vm[hook]) {
|
||||
ret = vm[hook].apply(vm, nargs) !== false && ret
|
||||
}
|
||||
})
|
||||
return ret
|
||||
}
|
||||
|
||||
function mergeOptions(src, opts) {
|
||||
const optsRet = {
|
||||
...src
|
||||
}
|
||||
for (const key in src) {
|
||||
if (opts.hasOwnProperty(key)) {
|
||||
optsRet[key] = opts[key]
|
||||
}
|
||||
}
|
||||
return optsRet
|
||||
}
|
||||
|
||||
/**
|
||||
* crud主页
|
||||
*/
|
||||
function presenter(crud) {
|
||||
function obColumns(columns) {
|
||||
return {
|
||||
visible(col) {
|
||||
return !columns || !columns[col] ? true : columns[col].visible
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
inject: ['crud'],
|
||||
beforeCreate() {
|
||||
// 由于initInjections在initProvide之前执行，如果该组件自己就需要crud，需要在initInjections前准备好crud
|
||||
this._provided = {
|
||||
crud,
|
||||
'crud.query': crud.query,
|
||||
'crud.page': crud.page,
|
||||
'crud.form': crud.form
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchToggle: true,
|
||||
columns: obColumns()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
parseTime
|
||||
},
|
||||
created() {
|
||||
this.crud.registerVM('presenter', this, 0)
|
||||
if (crud.queryOnPresenterCreated) {
|
||||
crud.toQuery()
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.crud.unregisterVM(this)
|
||||
},
|
||||
mounted() {
|
||||
const columns = {}
|
||||
this.$refs.table.columns.forEach(e => {
|
||||
if (!e.property || e.type !== 'default') {
|
||||
return
|
||||
}
|
||||
columns[e.property] = {
|
||||
label: e.label,
|
||||
visible: true
|
||||
}
|
||||
})
|
||||
this.columns = obColumns(columns)
|
||||
this.crud.updateProp('tableColumns', columns)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 头部
|
||||
*/
|
||||
function header() {
|
||||
return {
|
||||
inject: {
|
||||
crud: {
|
||||
from: 'crud'
|
||||
},
|
||||
query: {
|
||||
from: 'crud.query'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.crud.registerVM('header', this, 1)
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.crud.unregisterVM(this)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 分页
|
||||
*/
|
||||
function pagination() {
|
||||
return {
|
||||
inject: {
|
||||
crud: {
|
||||
from: 'crud'
|
||||
},
|
||||
page: {
|
||||
from: 'crud.page'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.crud.registerVM('pagination', this, 2)
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.crud.unregisterVM(this)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 表单
|
||||
*/
|
||||
function form(defaultForm) {
|
||||
return {
|
||||
inject: {
|
||||
crud: {
|
||||
from: 'crud'
|
||||
},
|
||||
form: {
|
||||
from: 'crud.form'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.crud.registerVM('form', this, 3)
|
||||
this.crud.defaultForm = defaultForm
|
||||
this.crud.resetForm()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.crud.unregisterVM(this)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* crud
|
||||
*/
|
||||
function crud(options = {}) {
|
||||
const defaultOptions = {
|
||||
type: undefined
|
||||
}
|
||||
options = mergeOptions(defaultOptions, options)
|
||||
return {
|
||||
inject: {
|
||||
crud: {
|
||||
from: 'crud'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.crud.registerVM(options.type, this)
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.crud.unregisterVM(this)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* CRUD钩子
|
||||
*/
|
||||
CRUD.HOOK = {
|
||||
/** 刷新 - 之前 */
|
||||
beforeRefresh: 'beforeCrudRefresh',
|
||||
/** 刷新 - 之后 */
|
||||
afterRefresh: 'afterCrudRefresh',
|
||||
/** 删除 - 之前 */
|
||||
beforeDelete: 'beforeCrudDelete',
|
||||
/** 删除 - 之后 */
|
||||
afterDelete: 'afterCrudDelete',
|
||||
/** 删除取消 - 之前 */
|
||||
beforeDeleteCancel: 'beforeCrudDeleteCancel',
|
||||
/** 删除取消 - 之后 */
|
||||
afterDeleteCancel: 'afterCrudDeleteCancel',
|
||||
/** 新建 - 之前 */
|
||||
beforeToAdd: 'beforeCrudToAdd',
|
||||
/** 编辑 - 之前 */
|
||||
beforeToEdit: 'beforeCrudToEdit',
|
||||
/** 开始 "新建/编辑" - 之前 */
|
||||
beforeToCU: 'beforeCrudToCU',
|
||||
/** "新建/编辑" 验证 - 之前 */
|
||||
beforeValidateCU: 'beforeCrudValidateCU',
|
||||
/** "新建/编辑" 验证 - 之后 */
|
||||
afterValidateCU: 'afterCrudValidateCU',
|
||||
/** 添加取消 - 之前 */
|
||||
beforeAddCancel: 'beforeCrudAddCancel',
|
||||
/** 添加取消 - 之后 */
|
||||
afterAddCancel: 'afterCrudAddCancel',
|
||||
/** 编辑取消 - 之前 */
|
||||
beforeEditCancel: 'beforeCrudEditCancel',
|
||||
/** 编辑取消 - 之后 */
|
||||
afterEditCancel: 'afterCrudEditCancel',
|
||||
/** 提交 - 之前 */
|
||||
beforeSubmit: 'beforeCrudSubmitCU',
|
||||
/** 提交 - 之后 */
|
||||
afterSubmit: 'afterCrudSubmitCU'
|
||||
}
|
||||
|
||||
/**
|
||||
* CRUD状态
|
||||
*/
|
||||
CRUD.STATUS = {
|
||||
NORMAL: 0,
|
||||
PREPARED: 1,
|
||||
PROCESSING: 2
|
||||
}
|
||||
|
||||
/**
|
||||
* CRUD通知类型
|
||||
*/
|
||||
CRUD.NOTIFICATION_TYPE = {
|
||||
SUCCESS: 'success',
|
||||
WARNING: 'warning',
|
||||
INFO: 'info',
|
||||
ERROR: 'error'
|
||||
}
|
||||
|
||||
export default CRUD
|
||||
|
||||
export {
|
||||
presenter,
|
||||
header,
|
||||
form,
|
||||
pagination,
|
||||
crud
|
||||
}
|
||||
@@ -2,186 +2,94 @@
|
||||
<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
|
||||
v-permission="['admin','job:add']"
|
||||
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>
|
||||
<eHeader :dict="dict" :permission="permission" />
|
||||
<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-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;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number v-model.number="form.sort" :min="0" :max="999" controls-position="right" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.pid !== 0" label="状态" prop="enabled">
|
||||
<el-radio v-for="item in dict.job_status" :key="item.id" v-model="form.enabled" :label="item.value">{{ item.label }}</el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门" prop="dept.id">
|
||||
<treeselect v-model="form.dept.id" :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>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--表格渲染-->
|
||||
<el-table v-loading="loading" :data="data" style="width: 100%;">
|
||||
<el-table-column prop="name" label="名称" />
|
||||
<el-table-column label="所属部门">
|
||||
<el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column v-if="columns.visible('name')" prop="name" label="名称" />
|
||||
<el-table-column v-if="columns.visible('dept')" prop="dept" label="所属部门">
|
||||
<template slot-scope="scope">
|
||||
<div>{{ scope.row.deptSuperiorName ? scope.row.deptSuperiorName + ' / ' : '' }}{{ scope.row.dept.name }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sort" label="排序">
|
||||
<el-table-column v-if="columns.visible('sort')" prop="sort" label="排序">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.sort }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" align="center">
|
||||
<el-table-column v-if="columns.visible('status')" prop="status" label="状态" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.enabled"
|
||||
active-color="#409EFF"
|
||||
inactive-color="#F56C6C"
|
||||
@change="changeEnabled(scope.row, scope.row.enabled,)"
|
||||
@change="changeEnabled(scope.row, scope.row.enabled)"
|
||||
/>
|
||||
</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','job:edit','job:del'])" label="操作" width="130px" align="center" fixed="right">
|
||||
<el-table-column
|
||||
v-permission="['ADMIN','USERJOB_ALL','USERJOB_EDIT','USERJOB_DELETE']"
|
||||
label="操作"
|
||||
width="130px"
|
||||
align="center"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button v-permission="['admin','job:edit']" size="mini" type="primary" icon="el-icon-edit" @click="showEditFormDialog(scope.row)" />
|
||||
<el-popover
|
||||
:ref="scope.row.id"
|
||||
v-permission="['admin','job: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" type="danger" icon="el-icon-delete" size="mini" />
|
||||
</el-popover>
|
||||
<udOperation
|
||||
:data="scope.row"
|
||||
:permission="permission"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<el-pagination
|
||||
:total="total"
|
||||
:current-page="page + 1"
|
||||
style="margin-top: 8px;"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@size-change="sizeChange"
|
||||
@current-change="pageChange"
|
||||
/>
|
||||
<pagination />
|
||||
<!--表单渲染-->
|
||||
<eForm :job-status="dict.job_status" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import crud from '@/mixins/crud'
|
||||
import crudJob from '@/api/system/job'
|
||||
import { getDepts } from '@/api/system/dept'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import eHeader from './module/header'
|
||||
import eForm from './module/form'
|
||||
import CRUD, { presenter } from '@crud/crud'
|
||||
import crudOperation from '@crud/CRUD.operation'
|
||||
import pagination from '@crud/Pagination'
|
||||
import udOperation from '@crud/UD.operation'
|
||||
|
||||
// crud交由presenter持有
|
||||
const crud = CRUD({
|
||||
title: '岗位',
|
||||
url: 'api/job',
|
||||
sort: ['sort,asc', 'id,desc'],
|
||||
crudMethod: { ...crudJob }
|
||||
})
|
||||
|
||||
export default {
|
||||
name: 'Job',
|
||||
components: { Treeselect },
|
||||
mixins: [crud],
|
||||
components: { eHeader, eForm, crudOperation, pagination, udOperation },
|
||||
mixins: [presenter(crud)],
|
||||
// 数据字典
|
||||
dicts: ['job_status'],
|
||||
data() {
|
||||
return {
|
||||
crudMethod: {
|
||||
...crudJob
|
||||
},
|
||||
sort: ['sort,asc', 'id,desc'],
|
||||
title: '岗位',
|
||||
enabledTypeOptions: [
|
||||
{ key: 'true', display_name: '正常' },
|
||||
{ key: 'false', display_name: '禁用' }
|
||||
],
|
||||
form: { id: null, name: null, sort: 999, enabled: 'true', dept: { id: null }},
|
||||
depts: [],
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
|
||||
]
|
||||
permission: {
|
||||
add: ['admin', 'job:add'],
|
||||
edit: ['admin', 'job:edit'],
|
||||
delete: ['admin', 'job:delete']
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 获取数据前设置好接口地址
|
||||
beforeInit() {
|
||||
this.url = 'api/job'
|
||||
return true
|
||||
},
|
||||
// 打开新增弹窗前做的操作
|
||||
beforeShowAddForm() {
|
||||
this.getDepts()
|
||||
},
|
||||
// 打开编辑弹窗前做的操作
|
||||
beforeShowEditForm(data) {
|
||||
this.getDepts()
|
||||
this.form.enabled = data.enabled.toString()
|
||||
},
|
||||
// 提交前的验证
|
||||
beforeSubmitMethod() {
|
||||
if (!this.form.dept.id) {
|
||||
this.notify('所属部门不能为空', 'warning')
|
||||
return false
|
||||
}
|
||||
return true
|
||||
},
|
||||
// 改变状态
|
||||
changeEnabled(data, val) {
|
||||
this.$confirm('此操作将 "' + this.dict.label.job_status[val] + '" ' + data.name + '岗位, 是否继续？', '提示', {
|
||||
@@ -189,21 +97,15 @@ export default {
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.crudMethod.edit(data).then(() => {
|
||||
this.notify(this.dict.label.job_status[val] + '成功', 'success')
|
||||
crud.crudMethod.edit(data).then(() => {
|
||||
crud.notify(this.dict.label.job_status[val] + '成功', 'success')
|
||||
}).catch(err => {
|
||||
data.enabled = !data.enabled
|
||||
console.log(err.response.data.message)
|
||||
console.log(err.data.message)
|
||||
})
|
||||
}).catch(() => {
|
||||
data.enabled = !data.enabled
|
||||
})
|
||||
},
|
||||
// 获取部门数据
|
||||
getDepts() {
|
||||
getDepts({ enabled: true }).then(res => {
|
||||
this.depts = res.content
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
149
src/views/system/job/module/form.vue
Normal file
149
src/views/system/job/module/form.vue
Normal file
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:append-to-body="true"
|
||||
:close-on-click-modal="false"
|
||||
:before-close="crud.cancelCU"
|
||||
:visible="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;"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="排序"
|
||||
prop="sort"
|
||||
>
|
||||
<el-input-number
|
||||
v-model.number="form.sort"
|
||||
:min="0"
|
||||
:max="999"
|
||||
controls-position="right"
|
||||
style="width: 370px;"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="form.pid !== 0"
|
||||
label="状态"
|
||||
prop="enabled"
|
||||
>
|
||||
<el-radio
|
||||
v-for="item in jobStatus"
|
||||
:key="item.id"
|
||||
v-model="form.enabled"
|
||||
:label="item.value === 'true'"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="所属部门"
|
||||
prop="dept.id"
|
||||
:rules="rules.dept"
|
||||
>
|
||||
<treeselect
|
||||
v-model="form.dept.id"
|
||||
:options="depts"
|
||||
style="width: 370px"
|
||||
placeholder="选择部门"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div
|
||||
slot="footer"
|
||||
class="dialog-footer"
|
||||
>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CRUD, { form } from '@crud/crud'
|
||||
import { getDepts } from '@/api/system/dept'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
|
||||
const defaultForm = {
|
||||
id: null,
|
||||
name: '',
|
||||
sort: 999,
|
||||
enabled: true,
|
||||
dept: {
|
||||
id: null
|
||||
}
|
||||
}
|
||||
export default {
|
||||
components: { Treeselect },
|
||||
mixins: [form(defaultForm)],
|
||||
props: {
|
||||
jobStatus: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
depts: [],
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
|
||||
],
|
||||
dept: { required: true, message: '所属部门不能为空', trigger: 'select' }
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
[CRUD.HOOK.beforeToCU]() {
|
||||
getDepts({ enabled: true }).then(res => {
|
||||
this.depts = res.content
|
||||
})
|
||||
},
|
||||
// 提交前的验证
|
||||
[CRUD.HOOK.afterValidateCU]() {
|
||||
if (!this.form.dept.id) {
|
||||
this.$notify({
|
||||
title: '所属部门不能为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
/deep/ .el-input-number .el-input__inner {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
43
src/views/system/job/module/header.vue
Normal file
43
src/views/system/job/module/header.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<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 dict.dict.job_status" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<rrOperation
|
||||
:crud="crud"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { header } from '@crud/crud'
|
||||
import rrOperation from '@crud/RR.operation'
|
||||
export default {
|
||||
components: { rrOperation },
|
||||
mixins: [header()],
|
||||
props: {
|
||||
dict: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
permission: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -46,7 +46,8 @@ module.exports = {
|
||||
name: name,
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve('src')
|
||||
'@': resolve('src'),
|
||||
'@crud': resolve('src/components/crud')
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user