<template>
<el-divider>
<el-button @click="handelSwitchButtonState" type="danger">切换按钮显示状态</el-button>
</el-divider>
<el-table :data="tableData" style="width: 100%">
<el-table-column fixed prop="date" label="Date" width="150" />
<el-table-column prop="name" label="Name" width="120" />
<el-table-column prop="address" label="Address" width="600" />
<el-table-column fixed="right" label="Operations">
<template #default="scope">
<OperateButton :row="scope.row" :buttons="buttons" :hide="handleHide" :is-button="isButton" />
</template>
</el-table-column>
</el-table>
<el-dialog v-model="dialogVisible" :title="dialogTip" width="500">
<p>{{ operateRow }}</p>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="dialogVisible = false">
Confirm
</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import type { TOperateButtonButton, TStringCall } from '@qingbing/ts-v3-operate-button';
import type { TObject, TRecord } from "@qingbing/ts-v3-utils";
import type { Ref } from "vue";
import { OperateButton } from '@qingbing/ts-v3-operate-button' // 如果注册成了全局组件,这句将不再需要
import { ref } from "vue";
// 测试 dialog 信息控制
const dialogVisible = ref(false)
const dialogTip = ref("")
const operateRow: Ref<TRecord> = ref({})
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
is_hide: 1
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
is_hide: 0
}
]
let _isSuccess = true
const buttons: TOperateButtonButton[] = [
{
type: 'view',
handle: (row: TRecord) => {
dialogTip.value = "详情面板"
dialogVisible.value = true
operateRow.value = row
}
}, {
type: 'edit',
handle: (row: TRecord) => {
dialogTip.value = "编辑面板"
dialogVisible.value = true
operateRow.value = row
}
},
{
type: 'delete',
handle: (row: TRecord, successCall: TStringCall, failureCall: TStringCall) => {
// ...
// done, 成功还是失败
_isSuccess ? successCall() : failureCall()
_isSuccess = !_isSuccess
}
}, {
label: "查看子项目",
linkType: "success",
params: {
hide: true
},
handle: (row: TRecord) => {
dialogTip.value = "子项目面板"
dialogVisible.value = true
operateRow.value = row
}
}
]
// 计算操作按钮是否显示
const handleHide = (row: TRecord, params: TObject) => {
return params.hide && !!row.is_hide
}
const isButton = ref(false)
const handelSwitchButtonState = () => {
isButton.value = !isButton.value
}
</script>