You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
167 lines
4.4 KiB
167 lines
4.4 KiB
<template>
|
|
<div class="crud-opts">
|
|
<span class="crud-opts-left">
|
|
<!--左侧插槽-->
|
|
<slot name="left" />
|
|
<el-button
|
|
v-if="crud.optionShow.add"
|
|
v-permission="permission.add"
|
|
class="filter-item"
|
|
type="primary"
|
|
icon="el-icon-plus"
|
|
@click="crud.toAdd"
|
|
>
|
|
新增
|
|
</el-button>
|
|
<el-button
|
|
v-if="crud.optionShow.edit"
|
|
v-permission="permission.edit"
|
|
class="filter-item"
|
|
type="success"
|
|
icon="el-icon-edit"
|
|
:disabled="crud.selections.length !== 1"
|
|
@click="crud.toEdit(crud.selections[0])"
|
|
>
|
|
修改
|
|
</el-button>
|
|
<el-button
|
|
v-if="crud.optionShow.del"
|
|
slot="reference"
|
|
v-permission="permission.del"
|
|
class="filter-item"
|
|
type="danger"
|
|
icon="el-icon-delete"
|
|
:disabled="crud.selections.length === 0"
|
|
@click="toDelete(crud.selections)"
|
|
>
|
|
删除
|
|
</el-button>
|
|
<!--右侧-->
|
|
<slot name="right" />
|
|
</span>
|
|
<el-button-group class="crud-opts-right">
|
|
<el-button
|
|
plain
|
|
type="info"
|
|
icon="el-icon-search"
|
|
@click="toggleSearch()"
|
|
/>
|
|
<el-button
|
|
icon="el-icon-refresh"
|
|
@click="crud.refresh()"
|
|
/>
|
|
<el-popover
|
|
placement="bottom-end"
|
|
width="150"
|
|
trigger="click"
|
|
>
|
|
<el-button
|
|
slot="reference"
|
|
icon="el-icon-s-grid"
|
|
>
|
|
<i
|
|
class="fa fa-caret-down"
|
|
aria-hidden="true"
|
|
/>
|
|
</el-button>
|
|
<el-checkbox
|
|
v-model="allColumnsSelected"
|
|
:indeterminate="allColumnsSelectedIndeterminate"
|
|
@change="handleCheckAllChange"
|
|
>
|
|
全选
|
|
</el-checkbox>
|
|
<el-checkbox
|
|
v-for="item in crud.props.tableColumns"
|
|
:key="item.label"
|
|
v-model="item.visible"
|
|
@change="handleCheckedTableColumnsChange(item)"
|
|
>
|
|
{{ item.label }}
|
|
</el-checkbox>
|
|
</el-popover>
|
|
</el-button-group>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import CRUD, { crud } from '@/components/Crud/crud'
|
|
export default {
|
|
mixins: [crud()],
|
|
props: {
|
|
permission: {
|
|
type: Object,
|
|
default: null
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
allColumnsSelected: true,
|
|
allColumnsSelectedIndeterminate: false
|
|
}
|
|
},
|
|
created() {
|
|
this.crud.updateProp('searchToggle', true)
|
|
},
|
|
methods: {
|
|
toDelete(datas) {
|
|
this.$confirm(`确认删除选中的 ${datas.length} 条数据?`, '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.crud.doDelete(datas)
|
|
})
|
|
},
|
|
handleCheckAllChange(val) {
|
|
if (val === false) {
|
|
this.allColumnsSelected = true
|
|
return
|
|
}
|
|
for (const key in this.crud.props.tableColumns) {
|
|
if (Object.prototype.hasOwnProperty.call(this.crud.props.tableColumns, key)) {
|
|
this.crud.props.tableColumns[key].visible = val
|
|
}
|
|
}
|
|
this.allColumnsSelected = val
|
|
this.allColumnsSelectedIndeterminate = false
|
|
},
|
|
handleCheckedTableColumnsChange(item) {
|
|
let totalCount = 0
|
|
let selectedCount = 0
|
|
for (const key in this.crud.props.tableColumns) {
|
|
++totalCount
|
|
if (Object.prototype.hasOwnProperty.call(this.crud.props.tableColumns, key)) {
|
|
selectedCount += this.crud.props.tableColumns[key].visible ? 1 : 0
|
|
}
|
|
}
|
|
if (selectedCount === 0) {
|
|
this.crud.notify('请至少选择一列', CRUD.NOTIFICATION_TYPE.WARNING)
|
|
this.$nextTick(function() {
|
|
item.visible = true
|
|
})
|
|
return
|
|
}
|
|
this.allColumnsSelected = selectedCount === totalCount
|
|
this.allColumnsSelectedIndeterminate = selectedCount !== totalCount && selectedCount !== 0
|
|
},
|
|
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-left{
|
|
display: flex;
|
|
}
|
|
.crud-opts .crud-opts-right {
|
|
margin-left: auto;
|
|
}
|
|
</style>
|
|
|