construction_management_console/src/views/manager/permission/tableData.tsx

import { BasicColumn } from '/@/components/Table/src/types/table'
import { Popconfirm } from 'ant-design-vue'
import { Icon } from '/@/components/Icon/index'
import { deletePermGroup } from '/@/api/sys/manager'
import { computed } from 'vue'
import { FormSchema } from '/@/components/Form'

enum PermMap {
  showProject = '项目',
  showStaff = '用户列表',
  showPermission = '权限组'
}
export function getTableColumns(fn1: () => Promise<void>, fn2: (item) => void): BasicColumn[] {
  async function delConfirm(id: string) {
    await deletePermGroup(id)
    await fn1()
  }
  return [
    {
      dataIndex: 'Id',
      title: 'ID',
      width: '5%'
    },
    {
      dataIndex: 'name',
      title: '组名称',
      width: '15%'
    },
    {
      dataIndex: 'permission',
      title: '拥有权限',
      customRender: ({ record }) => {
        const text = record.permission.reduce((prev, curr) => {
          if (prev && PermMap[curr]) {
            prev += '、'
          }
          if (PermMap[curr]) {
            prev += PermMap[curr]
          }
          return prev
        }, '')
        return <span>{text}</span>
      }
    },
    {
      dataIndex: 'createTime',
      title: '创建时间'
    },
    {
      dataIndex: 'remark',
      title: '备注'
    },
    {
      dataIndex: 'opreate',
      title: '操作',
      customRender: ({ record }) => (
        <div class="text-primary divide-x">
          <span class="cursor-pointer mr-2" onClick={() => fn2(record)}>
            <Icon icon="ant-design:edit-filled"></Icon>
          </span>
          <span class="pl-2">
            <Popconfirm title="确定删除吗?" okText="确认" cancelText="取消" onConfirm={() => delConfirm(record.id)}>
              <span class="text-red-500 hover:text-red-600 cursor-pointer">
                <Icon icon="fluent:delete-20-filled"></Icon>
              </span>
            </Popconfirm>
          </span>
        </div>
      )
    }
  ]
}

export function getPermSchemas() {
  const schemas = computed<FormSchema[]>(() => [
    {
      field: 'id',
      required: false,
      component: 'Input',
      label: 'ID',
      show: false
    },
    {
      field: 'name',
      component: 'Input',
      required: true,
      componentProps: {
        placeholder: '输入用户组名称'
      },
      label: '用户组名称'
    },
    {
      field: 'permission',
      component: 'CheckboxGroup',
      required: true,
      label: '权限设置',
      componentProps: {
        options: [
          { label: '项目', value: 'showProject' },
          { label: '用户列表', value: 'showStaff' },
          { label: '权限组', value: 'showPermission' }
        ]
      }
    },
    {
      field: 'remark',
      component: 'InputTextArea',
      label: '备注'
    }
  ])
  return schemas
}