#### 基础样例

包含一个业务单据的增删改查

```vue
<template>
  <sd-oa-table
    form-id="oaRedhead"
    page-id="doc/redhead/oaRedhead"
    :columns="columns"
    :actions="actions"
    show-selection
    :search-fields="['redheadName']"
  >
    <template v-slot:form>
      <sd-form-item name="redheadName"></sd-form-item>
      <sd-form-item name="attachment"></sd-form-item>
      <sd-form-item name="status"></sd-form-item>
    </template>
  </sd-oa-table>
</template>

<script>
import TableActionTypes from '@/common/services/table-action-types'
export default {
  data() {
    return {
      columns: [
        {
          title: '模板名称',
          dataIndex: 'redheadName',
          sdClickable: true,
        },
        {
          title: '状态',
          dataIndex: 'status',
        },
      ],
      actions: [
        {
          label: '新建',
          id: 'new',
          type: TableActionTypes.oa.create, // 新建按钮，不需要回调，自动处理
        },
        {
          label: '删除',
          id: 'delete',
          type: TableActionTypes.oa.delete, // 删除按钮，不需要回调，会自动处理
        },
      ],
    }
  },
}
</script>
```

#### 复杂样例

在基础样例上增加了：行内状态切换、表格上的各种操作按钮、详情单操作按钮事件处理等

```vue
<template>
  <div>
    <sd-oa-table
      ref="dataTable"
      form-id="oaRedhead"
      page-id="doc/redhead/oaRedhead"
      :columns="columns"
      show-selection
      :actions="actions"
      :search-fields="['redheadName']"
      :modal-props="{ width: 1000 }"
      @recordSaved="onRecordSaved"
      @recordsDeleted="onRecordsDeleted"
      @formBtnClick="formBtnClick"
    >
      <template v-slot:form="{ model, fields, pageId }">
        <!-- 可以通过v-if，为不同的pageId显示不同的界面 -->
        当前pageId：{{ pageId }}
        <sd-form-item name="redheadName"></sd-form-item>
        <sd-form-item name="attachment"></sd-form-item>
        <sd-form-item name="status"></sd-form-item>
      </template>
    </sd-oa-table>
    <a-button @click="getRowKeys">获取当前选中的记录(仅包含id)</a-button>
    <a-button @click="getRows">获取当前选中的记录</a-button>
  </div>
</template>

<script>
import TableColumnTypes from '@/common/services/table-column-types'
import TableActionTypes from '@/common/services/table-action-types'
import { Modal } from 'ant-design-vue'

export default {
  methods: {
    getRowKeys() {
      // 获取选中记录后，可以在表格外的按钮里做一些业务逻辑
      alert(JSON.stringify(this.$refs.dataTable.getSelectedRowKeys()))
    },
    getRows() {
      // 获取选中记录后，可以在表格外的按钮里做一些业务逻辑
      alert(JSON.stringify(this.$refs.dataTable.getSelectedRows()))
    },
    onRecordSaved(id) {
      console.log('saved:' + id)
    },
    onRecordsDeleted(ids) {
      console.log('deleted:' + ids.join(','))
    },
    formBtnClick(evt, btn, { form, recordId }) {
      // 可以通过buttonId区分点击了哪个按钮
      switch (btn.buttonId) {
        case 'test':
          // 最简单的情况就是直接增加自己的逻辑：此样例是关闭详情对话框
          form.hide()
          break
        case 'close':
          // 也可以有更复杂的处理
          // 通过waitUntil设置一个promise，按钮会进入等待状态
          evt.waitUntil(
            new Promise((resolve, reject) => {
              Modal.confirm({
                title: '是否要关闭窗口？',
                content: `当前记录ID：${recordId}  当前标题：${form.getFieldValue('redheadName')}`,
                onOk: () => {
                  // 等待结束，会继续走原有的按钮逻辑
                  resolve()
                },
                onCancel: () => {
                  // 等待结束，并禁止了原有的按钮逻辑
                  evt.preventDefault()
                  resolve()
                },
              })
            })
          )
          break

        default:
          break
      }
    },
  },
  data() {
    return {
      columns: [
        {
          dataIndex: 'id',
          defaultSortOrder: 'ascend', // 按此列排序
          sdHidden: true, // 隐藏此列
        },
        {
          title: '模板名称',
          dataIndex: 'redheadName',
          sdClickable: true,
        },
        {
          title: '创建时间',
          dataIndex: 'creationTime',
          sdRender: TableColumnTypes.dateTime,
          sorter: true,
        },
        {
          title: '状态',
          dataIndex: 'status',
          sdRender: TableColumnTypes.oa.switch, // 特殊处理的类型，点击switch会自动处理真假值的切换
        },
        {
          title: '部门',
          dataIndex: 'belongedOrgId',
          sdCandidate: true, // 默认不显示，但用户可以从列表中选择显示此列
          width: '100px',
        },
      ],
      actions: [
        {
          label: '批量操作',
          id: 'batch',
          type: TableActionTypes.batch, // 批处理按钮，选中文档时才能点击
          permission: 'create', // oa-table 的权限，不用写 formID 前缀，会自动添加
          callback: (keys, records) => {
            alert('选中记录\n' + JSON.stringify(keys))
            // 操作完成后，清除已选中的条目
            this.$refs.dataTable.clearSelection()
          },
        },
        {
          label: '刷新',
          permission: null, // 纯前端操作，不需要权限控制
          id: 'refresh', // 没写type，一般按钮
          callback: () => {
            this.$refs.dataTable.refresh(true)
          },
        },
        {
          label: '测试',
          id: 'test',
          type: TableActionTypes.inline, // 数据行内的按钮，回调参数为record, {rowIndex}
          callback: this.rowClick,
        },
        {
          label: '已读',
          id: 'read',
          type: TableActionTypes.inline,
          callback: this.rowClick,
        },
        {
          label: '删除',
          id: 'delete',
          type: TableActionTypes.oa.delete, // 删除按钮，不需要回调，会自动处理（对sd-data-table无效）
        },
        {
          label: '新建',
          id: 'new',
          type: TableActionTypes.oa.create, // 新建按钮，不需要回调，自动处理
        },
      ],
    }
  },
}
</script>
```
