13 changed files with 643 additions and 529 deletions
@ -0,0 +1,148 @@ |
|||
<template> |
|||
<div |
|||
ref="divRef" |
|||
:class="'flex ' + (toolbar.props.align === 'left' ? 'justify-start' : toolbar.props.align === 'center' ? 'justify-center' : 'justify-end')" |
|||
:style="`column-gap:${toolbar.props.xGap}px`" |
|||
> |
|||
<template v-for="(btn, index) in baseButtons" :key="'button_' + index"> |
|||
<!-- 分割符按钮 --> |
|||
<q-separator v-if="typeof btn.data === 'string' && btn.data === 'separator'" vertical class="class-action-item" /> |
|||
|
|||
<!-- 按钮组 --> |
|||
<q-btn-dropdown |
|||
v-else-if="Array.isArray(btn.data) && btn.data.length > 0" |
|||
unelevated |
|||
:dense="toolbar.props.dense" |
|||
outline |
|||
no-wrap |
|||
no-caps |
|||
v-bind="btn.data[0]" |
|||
:label="toolbar.props.dense ? '' : toolbar.getLabel(btn.data[0].label)" |
|||
:icon="toolbar.props.dense ? undefined : toolbar.getIcon(btn.data[0].icon)" |
|||
:split="btn.data[0].click ? true : false" |
|||
:disable="btn.data[0]?.enableIf ? !btn.data[0].enableIf(toolbar.cm.args.value) : false" |
|||
class="class-action-item" |
|||
content-class="w-toolbar-btn-dropdown" |
|||
@click="toolbar.buttonClick(btn.data[0])" |
|||
> |
|||
<template v-if="toolbar.props.dense" #label> |
|||
<div :style="btn.data[0].click ? 'padding: 0px 8px' : 'padding: 0px 5px 0px 8px'"> |
|||
<q-icon v-if="btn.data[0].icon" :name="toolbar.getIcon(btn.data[0].icon)" size="xs"></q-icon> |
|||
<span style="padding-left: 3px">{{ toolbar.getLabel(btn.data[0].label) }}</span> |
|||
</div> |
|||
</template> |
|||
<q-list> |
|||
<template v-for="(childrenBtn, childrenIndex) in btn.data" :key="'button_c_' + childrenIndex"> |
|||
<template v-if="childrenIndex === 0"></template> |
|||
<template v-else> |
|||
<q-separator v-if="typeof childrenBtn === 'string' && childrenBtn === 'separator'" /> |
|||
<ChildrenBtn v-else-if="Array.isArray(childrenBtn) && childrenBtn.length > 0" :button="childrenBtn"></ChildrenBtn> |
|||
<q-item |
|||
v-else |
|||
v-close-popup |
|||
clickable |
|||
:disable="childrenBtn?.enableIf ? !childrenBtn.enableIf(toolbar.cm.args.value) : false" |
|||
@click="toolbar.buttonClick(childrenBtn)" |
|||
> |
|||
<q-item-section> |
|||
<q-item-label |
|||
><q-icon v-if="childrenBtn?.icon" :name="toolbar.getIcon(childrenBtn?.icon)" left size="20px"></q-icon> |
|||
{{ toolbar.getLabel(childrenBtn?.label) }}</q-item-label |
|||
> |
|||
</q-item-section> |
|||
</q-item> |
|||
</template> |
|||
</template> |
|||
</q-list> |
|||
</q-btn-dropdown> |
|||
|
|||
<!-- 单个按钮 --> |
|||
<q-btn |
|||
v-else |
|||
:padding="toolbar.props.dense ? toolbar.padding : undefined" |
|||
:disable="btn?.data?.enableIf ? !btn.data.enableIf(toolbar.cm.args.value) : false" |
|||
no-wrap |
|||
no-caps |
|||
outline |
|||
v-bind="btn.data" |
|||
align="center" |
|||
:icon="toolbar.props.dense ? undefined : toolbar.getIcon(btn.data.icon)" |
|||
:label="toolbar.props.dense ? '' : toolbar.getLabel(btn.data.label)" |
|||
class="class-action-item" |
|||
@click="toolbar.buttonClick(btn.data)" |
|||
> |
|||
<div v-if="toolbar.props.dense"> |
|||
<q-icon v-if="btn.data.icon" :name="toolbar.getIcon(btn.data.icon)" size="xs"></q-icon> |
|||
<span style="padding-left: 3px">{{ toolbar.getLabel(btn.data.label) }}</span> |
|||
</div> |
|||
</q-btn> |
|||
</template> |
|||
|
|||
<!-- moreActions --> |
|||
<q-btn-dropdown |
|||
v-if="moreButtons.length > 0" |
|||
unelevated |
|||
outline |
|||
label="" |
|||
no-wrap |
|||
no-caps |
|||
:icon="undefined" |
|||
:dense="toolbar.props.dense" |
|||
class="class-more-action" |
|||
content-class="w-toolbar-btn-dropdown" |
|||
> |
|||
<template #label> |
|||
<div style="padding: 0px 5px 0px 8px"> |
|||
<span>{{ $t('more') }}</span> |
|||
</div> |
|||
</template> |
|||
<q-list> |
|||
<template v-for="(childrenBtn, childrenIndex) in moreButtons" :key="'moreAction_' + childrenIndex"> |
|||
<q-separator v-if="typeof childrenBtn.data === 'string' && childrenBtn.data === 'separator'" /> |
|||
<ChildrenBtn v-else-if="Array.isArray(childrenBtn.data) && childrenBtn.data.length > 0" :button="childrenBtn.data"></ChildrenBtn> |
|||
<q-item |
|||
v-else |
|||
v-close-popup |
|||
clickable |
|||
:disable="childrenBtn?.data?.enableIf ? !childrenBtn.data.enableIf(toolbar.cm.args.value) : false" |
|||
@click="toolbar.buttonClick(childrenBtn.data)" |
|||
> |
|||
<q-item-section> |
|||
<q-item-label |
|||
><q-icon v-if="childrenBtn.data.icon" :name="toolbar.getIcon(childrenBtn.data.icon)" left size="20px"></q-icon> |
|||
{{ toolbar.getLabel(childrenBtn.data.label) }}</q-item-label |
|||
> |
|||
</q-item-section> |
|||
</q-item> |
|||
</template> |
|||
</q-list> |
|||
</q-btn-dropdown> |
|||
</div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { inject, ref } from 'vue'; |
|||
import { $t } from '@/platform'; |
|||
import { Toolbar } from './Toolbar'; |
|||
import ChildrenBtn from './ChildrenBtn.vue'; |
|||
|
|||
const divRef = ref(); |
|||
const toolbar = <Toolbar>inject('toolbar'); |
|||
const props = defineProps({ |
|||
baseButtons: { |
|||
type: <any>Array, |
|||
default: () => { |
|||
return []; |
|||
}, |
|||
}, |
|||
moreButtons: { |
|||
type: <any>Array, |
|||
default: () => { |
|||
return []; |
|||
}, |
|||
}, |
|||
}); |
|||
|
|||
defineExpose({ |
|||
divRef, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,78 @@ |
|||
import { computed } from 'vue'; |
|||
|
|||
export class ComputedManager { |
|||
props: any; |
|||
|
|||
constructor(props: any) { |
|||
this.props = props; |
|||
} |
|||
|
|||
/** |
|||
* 按钮click与enableIf等函数通用入参 |
|||
*/ |
|||
args = computed(() => { |
|||
return { |
|||
selected: this.firstSelected.value, |
|||
selecteds: this.selected.value, |
|||
ticked: this.firstTicked.value, |
|||
tickeds: this.ticked.value, |
|||
grid: this.props.grid, |
|||
selectedColName: this.selectedColName.value, |
|||
}; |
|||
}); |
|||
|
|||
/** |
|||
* w-grid 表格选中的所有记录 |
|||
*/ |
|||
selected = computed(() => { |
|||
if (this.props.grid) { |
|||
return this.props.grid.getSelectedRows(); |
|||
} |
|||
return []; |
|||
}); |
|||
|
|||
/** |
|||
* w-grid 表格选中的第一条数据 |
|||
*/ |
|||
firstSelected = computed(() => { |
|||
const rows = this.selected.value; |
|||
if (rows.length > 0) { |
|||
return rows[0]; |
|||
} |
|||
return undefined; |
|||
}); |
|||
|
|||
/** |
|||
* w-grid 表格checkbox勾选的所有记录 |
|||
*/ |
|||
ticked = computed(() => { |
|||
if (this.props.grid) { |
|||
return this.props.grid.getTickedRows(); |
|||
} |
|||
return []; |
|||
}); |
|||
|
|||
/** |
|||
* w-grid 表格checkbox勾选的第一条数据 |
|||
*/ |
|||
firstTicked = computed(() => { |
|||
const rows = this.ticked.value; |
|||
if (rows.length > 0) { |
|||
return rows[0]; |
|||
} |
|||
return undefined; |
|||
}); |
|||
|
|||
/** |
|||
* w-grid 表格选中的单元格对应的列名 |
|||
*/ |
|||
selectedColName = computed(() => { |
|||
if (this.props.grid) { |
|||
const cell = this.props.grid.getSelectedCell(); |
|||
if (cell) { |
|||
return cell['colName']; |
|||
} |
|||
} |
|||
return undefined; |
|||
}); |
|||
} |
|||
@ -0,0 +1,223 @@ |
|||
import { Tools } from '@/platform'; |
|||
import { ModelRef, nextTick } from 'vue'; |
|||
import { ComputedManager } from './ComputedManager'; |
|||
|
|||
export class Toolbar { |
|||
/** |
|||
* 按钮内部内容padding |
|||
*/ |
|||
padding = '5px 12px 5px 8px'; |
|||
/** |
|||
* 更多按钮宽度 |
|||
*/ |
|||
moreButtonWidth = 100; |
|||
|
|||
/** |
|||
* 配置属性 |
|||
*/ |
|||
props: any; |
|||
/** |
|||
* 模型值 |
|||
*/ |
|||
modelValue: ModelRef<any>; |
|||
/** |
|||
* 计算属性管理器 |
|||
*/ |
|||
cm: ComputedManager; |
|||
/** |
|||
* 以按钮 name 构建的 json 对象，value 为按钮配置 |
|||
*/ |
|||
buttonsJson: any = {}; |
|||
/** |
|||
* 根据传入的按钮配置处理完成的按钮数组 |
|||
*/ |
|||
buttons: any[] = []; |
|||
|
|||
constructor(props: any, modelValue: ModelRef<any>) { |
|||
// 初始化
|
|||
this.props = props; |
|||
this.modelValue = modelValue; |
|||
this.cm = new ComputedManager(props); |
|||
this.extractButton(modelValue.value); |
|||
|
|||
// 对外方法绑定 this，避免模板中直接配置方法时（非显式调用） this 失效
|
|||
this.buttonClick = this.buttonClick.bind(this); |
|||
this.initButtons = this.initButtons.bind(this); |
|||
this.setButtonWidth = this.setButtonWidth.bind(this); |
|||
this.getIcon = this.getIcon.bind(this); |
|||
this.getLabel = this.getLabel.bind(this); |
|||
} |
|||
|
|||
/** |
|||
* 按钮执行点击函数 |
|||
* @param button |
|||
* @returns |
|||
*/ |
|||
async buttonClick(button) { |
|||
// 准备按钮入参
|
|||
const context = {}; |
|||
const args = { |
|||
...this.cm.args.value, |
|||
context: context, |
|||
}; |
|||
|
|||
// 按钮enableIf校验
|
|||
if (button.enableIf && !button.enableIf(args)) { |
|||
console.warn('[w-toolbar] The function `enableIf` returns false, causing the `click` not to trigger.' + ' button name is `' + button['name'] + '`'); |
|||
return; |
|||
} |
|||
|
|||
// beforeClick 执行
|
|||
let beforeResult = true; |
|||
if (button.beforeClick) { |
|||
beforeResult = await button.beforeClick(args); |
|||
} |
|||
|
|||
// click 执行
|
|||
if (beforeResult && button.click) { |
|||
let callAfterEditorOpen = true; |
|||
const clickProps = { ...args }; |
|||
if (button._click) { |
|||
if (button.overrideClick) { |
|||
callAfterEditorOpen = false; |
|||
} |
|||
clickProps['_click'] = (_args: any) => { |
|||
button._click(_args || args); |
|||
callAfterEditorOpen = true; |
|||
}; |
|||
} |
|||
await button.click(clickProps); |
|||
|
|||
// afterClick 执行
|
|||
nextTick(async () => { |
|||
if (button.afterClick) { |
|||
await button.afterClick(args); |
|||
} |
|||
|
|||
// afterEditorOpen 执行
|
|||
if (button.afterEditorOpen && callAfterEditorOpen) { |
|||
button.afterEditorOpen(args); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 初始化按钮 |
|||
*/ |
|||
initButtons() { |
|||
this.buttons = []; |
|||
for (let i = 0; i < this.modelValue.value.length; i++) { |
|||
const btn: any = this.modelValue.value[i]; |
|||
if (i === 0 && typeof btn === 'string' && btn === 'separator') { |
|||
// 按钮数组第一个元素为分割符时直接跳过
|
|||
continue; |
|||
} |
|||
if (typeof btn === 'string' && btn === 'separator' && this.buttons.length > 0 && this.buttons[this.buttons.length - 1].data === btn) { |
|||
// 连续的分割符直接跳过，避免出现重复的无意义分割符
|
|||
continue; |
|||
} |
|||
if (Array.isArray(btn) && btn.length > 0) { |
|||
this.buttons.push({ data: this.handleChildrenAndSeparator(btn) }); |
|||
} else if (typeof btn === 'string' && btn === 'separator') { |
|||
this.buttons.push({ data: btn }); |
|||
} else { |
|||
this.buttons.push({ data: this.buttonsJson[btn.name] }); |
|||
} |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 设置按钮实际显示需要的宽度 |
|||
* @param buttonsRef |
|||
*/ |
|||
setButtonWidth(buttonsRef: any) { |
|||
const nodes = buttonsRef.getElementsByClassName('class-action-item'); |
|||
this.moreButtonWidth = buttonsRef.getElementsByClassName('class-more-action')[0].clientWidth; |
|||
if (nodes) { |
|||
for (let i = 0; i < nodes.length; i++) { |
|||
if (this.buttons[i]) { |
|||
this.buttons[i].width = nodes[i].clientWidth; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 获取按钮 icon |
|||
* @param icon |
|||
* @returns |
|||
*/ |
|||
getIcon(icon) { |
|||
if (Tools.isUndefinedOrNull(icon)) { |
|||
return undefined; |
|||
} else if (typeof icon === 'function') { |
|||
return icon(this.cm.args); |
|||
} else { |
|||
return icon; |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 获取按钮 label |
|||
* @param label |
|||
* @returns |
|||
*/ |
|||
getLabel(label) { |
|||
if (Tools.isUndefinedOrNull(label)) { |
|||
return ''; |
|||
} else if (typeof label === 'function') { |
|||
return label(this.cm.args); |
|||
} else { |
|||
return label; |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 提取按钮到json中 |
|||
* @param buttonArray |
|||
*/ |
|||
private extractButton(buttonArray: any) { |
|||
for (const btn of buttonArray) { |
|||
if (Array.isArray(btn)) { |
|||
this.extractButton(btn); |
|||
} else if (typeof btn === 'object') { |
|||
this.buttonsJson[btn.name] = { ...btn }; |
|||
if (this.props.noIcon) { |
|||
this.buttonsJson[btn.name].icon = undefined; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 处理子按钮和分割符 |
|||
* @param arr |
|||
* @returns |
|||
*/ |
|||
private handleChildrenAndSeparator(arr) { |
|||
const tempArr = <any>[]; |
|||
for (let i = 0; i < arr.length; i++) { |
|||
const btn = arr[i]; |
|||
if (i === 0 && typeof btn === 'string' && btn === 'separator') { |
|||
// 按钮数组第一个元素为分割符时直接跳过
|
|||
continue; |
|||
} |
|||
if (typeof btn === 'string' && btn === 'separator' && tempArr.length > 0 && tempArr[tempArr.length - 1] === btn) { |
|||
// 连续的分割符直接跳过，避免出现重复的无意义分割符
|
|||
continue; |
|||
} |
|||
if (Array.isArray(btn) && btn.length > 0) { |
|||
const handleResult = this.handleChildrenAndSeparator(btn); |
|||
if (handleResult && handleResult.length > 0) { |
|||
tempArr.push(handleResult); |
|||
} |
|||
} else if (typeof btn === 'string' && btn === 'separator') { |
|||
tempArr.push(btn); |
|||
} else { |
|||
tempArr.push(this.buttonsJson[btn.name]); |
|||
} |
|||
} |
|||
return tempArr; |
|||
} |
|||
} |
|||
Loading…
Reference in new issue