npm package: @qingbing/ts-v3-operate-button
Description: 以 vue3 + element-plus 为基础封装的列表操作组件, 主要用作 table 的操作按钮组
Author: qingbing
Latest version: 2.0.6

# OperateButton 插件介绍

- [OperateButton 插件介绍](#operatebutton-插件介绍)
  - [1. 概要说明](#1-概要说明)
    - [1.1 地址](#11-地址)
    - [1.2 插件描述](#12-插件描述)
    - [1.3 重要依赖](#13-重要依赖)
    - [1.4 插件安装](#14-插件安装)
  - [2. 包说明](#2-包说明)
    - [2.1 属性说明](#21-属性说明)
    - [2.2 事件说明](#22-事件说明)
    - [2.3 实例暴露说明](#23-实例暴露说明)
  - [3. 示例](#3-示例)
    - [3.1 全局注册使用](#31-全局注册使用)
    - [3.2 模板组件使用](#32-模板组件使用)

## 1. 概要说明
### 1.1 地址

[https://gitee.com/duqingbing/ts-v3-package/tree/ts-v3-operate-button](https://gitee.com/duqingbing/ts-v3-package/tree/ts-v3-operate-button)

### 1.2 插件描述

以 vue3 + element-plus 为基础封装的列表操作组件, 主要用作 table 的操作按钮组

### 1.3 重要依赖

- @qingbing/ts-v3-utils: ^1.0.1
- @qingbing/ts-v3-element-plus: ^2.1.4
- element-plus: ^2.6.3
- vue: ^3.4.21

### 1.4 插件安装

```bash
# yarn 安装
yarn add @qingbing/ts-v3-operate-button

# npm 安装
npm i @qingbing/ts-v3-operate-button
```
## 2. 包说明

### 2.1 属性说明

| 属性名            | 类型     | 是否必需 | 默认值                                           | 意义                                 |
| :---------------- | :------- | :------- | :----------------------------------------------- | :----------------------------------- |
| row               | Object   | 是       | -                                                | 传递的行数据                         |
| buttons           | Array    | 否       | []                                               | 按钮组                               |
| isButton          | Boolean  | 否       | false                                            | 是否采用按钮形式, 默认使用 link 形式 |
| hide              | Function | 否       | -                                                | 计算按钮是否隐藏函数                 |
| confirmText       | String   | 否       | '数据一旦删除将无法恢复，确认要执行删除操作么？' | 删除时确认提示信息                   |
| confirmTitle      | String   | 否       | '操作提示'                                       | 删除时确认提示标题                   |
| confirmButtonText | String   | 否       | '确定'                                           | 删除时"确认"按钮提示                 |
| cancelButtonText  | String   | 否       | '取消'                                           | 删除时"取消"按钮提示                 |
| successTip        | String   | 否       | '操作成功 ^_^'                                   | 操作成功提示信息                     |
| failureTip        | String   | 否       | '操作失败 \$_\$'                                 | 操作失败提示信息                     |

### 2.2 事件说明

| 事件名 | 类型 | 意义 |
| :----- | :--- | :--- |
| -      | 无   | -    |

### 2.3 实例暴露说明

| 属性名 | 类型 |
| :----- | :--- |
| -      | 无   |

## 3. 示例
### 3.1 全局注册使用

- 一旦注册， `OperateButton` 作为组件全局通用 
- 使用方法参考 [3.2 模板组件使用](#32-模板组件使用), 去掉组件导入的语句即可

```ts
// main.ts
import { OperateButtonPlugin } from '@qingbing/ts-v3-operate-button'
app.use(OperateButtonPlugin, {
  name: 'OperateButton',
  options: {}
})
```

### 3.2 模板组件使用

```vue
<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>
```