用户模块编写

web/src/views/backend/userCenter/user/detailDialog.vue

@@ -0,0 +1,505 @@
+<template>
+    <el-dialog
+        v-model="visible"
+        class="ba-operate-dialog user-detail-dialog"
+        width="1200px"
+        :close-on-click-modal="false"
+        :destroy-on-close="true"
+        @close="handleClose"
+    >
+        <template #header>
+            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
+                详情
+            </div>
+        </template>
+
+        <el-scrollbar class="ba-table-form-scrollbar">
+            <div class="detail-wrapper">
+                <!-- 用户信息部分 -->
+                <div class="detail-section">
+                    <div class="section-title">用户信息</div>
+                    <el-descriptions :column="2" border size="small" class="user-info-descriptions">
+                        <el-descriptions-item label="用户名称">
+                            {{ userInfo.name || '-' }}
+                        </el-descriptions-item>
+                        <el-descriptions-item label="邮箱">
+                            {{ userInfo.email || '-' }}
+                        </el-descriptions-item>
+                        <el-descriptions-item label="企业">
+                            {{ userInfo.company || '-' }}
+                        </el-descriptions-item>
+                        <el-descriptions-item label="状态">
+                            <el-tag :type="userInfo.status === '正常' ? 'success' : 'danger'" size="small">
+                                {{ userInfo.status || '-' }}
+                            </el-tag>
+                        </el-descriptions-item>
+                        <el-descriptions-item label="获得总佣金金额">
+                            {{ userInfo.totalCommission || '-' }}
+                        </el-descriptions-item>
+                        <el-descriptions-item label="当前佣金金额">
+                            {{ userInfo.currentCommission || '-' }}
+                        </el-descriptions-item>
+                        <el-descriptions-item label="推广链接" :span="2">
+                            {{ userInfo.promotionLink || '-' }}
+                        </el-descriptions-item>
+                    </el-descriptions>
+                </div>
+
+                <!-- 购买产品部分 -->
+                <div class="detail-section">
+                    <div class="section-title">购买产品</div>
+                    <el-table
+                        :data="purchasedProducts"
+                        border
+                        size="small"
+                        style="width: 100%"
+                        v-loading="productsLoading"
+                    >
+                        <el-table-column
+                            prop="productName"
+                            label="产品名称"
+                            align="center"
+                            min-width="120"
+                        />
+                        <el-table-column
+                            prop="packageType"
+                            label="套餐类型"
+                            align="center"
+                            min-width="140"
+                        />
+                        <el-table-column
+                            prop="remainingPoints"
+                            label="剩余积分"
+                            align="center"
+                            min-width="100"
+                        >
+                            <template #default="{ row }">
+                                {{ row.remainingPoints || '--' }}
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                            prop="remainingTimes"
+                            label="剩余次数"
+                            align="center"
+                            min-width="100"
+                        >
+                            <template #default="{ row }">
+                                {{ row.remainingTimes || '--' }}
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                            prop="expirationDate"
+                            label="到期时间"
+                            align="center"
+                            min-width="120"
+                        >
+                            <template #default="{ row }">
+                                {{ row.expirationDate || '--' }}
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                            prop="purchaseDate"
+                            label="购买时间"
+                            align="center"
+                            min-width="120"
+                        />
+                        <el-table-column
+                            prop="status"
+                            label="状态"
+                            align="center"
+                            min-width="100"
+                        >
+                            <template #default="{ row }">
+                                <el-tag
+                                    :type="row.status === '正常' ? 'success' : 'danger'"
+                                    size="small"
+                                >
+                                    {{ row.status }}
+                                </el-tag>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                    <!-- 购买产品分页 -->
+                    <div class="pagination-wrapper">
+                        <el-pagination
+                            v-model:current-page="productsPage"
+                            :page-size="productsPageSize"
+                            :total="productsTotal"
+                            layout="prev, pager, next, ->, jumper"
+                            small
+                            @current-change="handleProductsPageChange"
+                        >
+                            <template #jumper>
+                                <span class="pagination-jumper">
+                                    前往
+                                    <el-input-number
+                                        v-model="productsPage"
+                                        :min="1"
+                                        :max="Math.ceil(productsTotal / productsPageSize)"
+                                        size="small"
+                                        controls-position="right"
+                                        style="width: 60px; margin: 0 4px"
+                                        @change="(val: number | undefined) => val && handleProductsPageChange(val)"
+                                    />
+                                    页
+                                </span>
+                            </template>
+                        </el-pagination>
+                    </div>
+                </div>
+
+                <!-- 下级人员部分 -->
+                <div class="detail-section">
+                    <div class="section-title">下级人员</div>
+                    <div class="search-wrapper">
+                        <el-input
+                            v-model="subordinateSearchName"
+                            placeholder="人员名称"
+                            clearable
+                            size="small"
+                            style="width: 200px"
+                            @input="handleSubordinateSearch"
+                        />
+                    </div>
+                    <el-table
+                        :data="subordinatePersonnel"
+                        border
+                        size="small"
+                        style="width: 100%; margin-top: 12px"
+                        v-loading="subordinatesLoading"
+                    >
+                        <el-table-column
+                            prop="personnelName"
+                            label="人员名称"
+                            align="center"
+                            min-width="120"
+                        />
+                        <el-table-column
+                            prop="commissionAmount"
+                            label="产生分佣金额"
+                            align="center"
+                            min-width="140"
+                        />
+                        <el-table-column
+                            prop="status"
+                            label="状态"
+                            align="center"
+                            min-width="100"
+                        >
+                            <template #default="{ row }">
+                                <el-tag
+                                    :type="row.status === '正常' ? 'success' : 'danger'"
+                                    size="small"
+                                >
+                                    {{ row.status }}
+                                </el-tag>
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                            prop="bindingTime"
+                            label="绑定时间"
+                            align="center"
+                            min-width="120"
+                        />
+                        <el-table-column
+                            label="操作"
+                            align="center"
+                            min-width="100"
+                        >
+                            <template #default="{ row }">
+                                <el-button
+                                    type="danger"
+                                    link
+                                    size="small"
+                                    @click="handleUnbind(row)"
+                                >
+                                    解除
+                                </el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                    <!-- 下级人员分页 -->
+                    <div class="pagination-wrapper">
+                        <el-pagination
+                            v-model:current-page="subordinatesPage"
+                            :page-size="subordinatesPageSize"
+                            :total="subordinatesTotal"
+                            layout="prev, pager, next, ->, jumper"
+                            small
+                            @current-change="handleSubordinatesPageChange"
+                        >
+                            <template #jumper>
+                                <span class="pagination-jumper">
+                                    前往
+                                    <el-input-number
+                                        v-model="subordinatesPage"
+                                        :min="1"
+                                        :max="Math.ceil(subordinatesTotal / subordinatesPageSize)"
+                                        size="small"
+                                        controls-position="right"
+                                        style="width: 60px; margin: 0 4px"
+                                        @change="(val: number | undefined) => val && handleSubordinatesPageChange(val)"
+                                    />
+                                    页
+                                </span>
+                            </template>
+                        </el-pagination>
+                    </div>
+                </div>
+            </div>
+        </el-scrollbar>
+
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button size="large" @click="handleClose">
+                    关闭
+                </el-button>
+            </div>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+interface UserInfo {
+    name: string
+    email: string
+    company: string
+    status: string
+    totalCommission: number | string
+    currentCommission: number | string
+    promotionLink: string
+}
+
+interface PurchasedProduct {
+    productName: string
+    packageType: string
+    remainingPoints?: string
+    remainingTimes?: string | number
+    expirationDate?: string
+    purchaseDate: string
+    status: string
+}
+
+interface SubordinatePersonnel {
+    personnelName: string
+    commissionAmount: number
+    status: string
+    bindingTime: string
+}
+
+const visible = ref(false)
+const userInfo = reactive<UserInfo>({
+    name: '',
+    email: '',
+    company: '',
+    status: '',
+    totalCommission: '',
+    currentCommission: '',
+    promotionLink: '',
+})
+
+// 购买产品相关
+const purchasedProducts = ref<PurchasedProduct[]>([])
+const productsLoading = ref(false)
+const productsPage = ref(1)
+const productsPageSize = ref(10)
+const productsTotal = ref(0)
+
+// 下级人员相关
+const subordinatePersonnel = ref<SubordinatePersonnel[]>([])
+const subordinatesLoading = ref(false)
+const subordinateSearchName = ref('')
+const subordinatesPage = ref(1)
+const subordinatesPageSize = ref(10)
+const subordinatesTotal = ref(0)
+
+// 打开弹框
+const open = (row: any) => {
+    // 设置用户信息
+    userInfo.name = row.name || '张三'
+    userInfo.email = row.email || '9854112544@qq.com'
+    userInfo.company = row.company || '腾达'
+    userInfo.status = '正常'
+    userInfo.totalCommission = 500
+    userInfo.currentCommission = 100
+    userInfo.promotionLink = 'XXXX.com?from=用户ID'
+
+    // 加载购买产品数据
+    loadPurchasedProducts()
+
+    // 加载下级人员数据
+    loadSubordinatePersonnel()
+
+    visible.value = true
+}
+
+// 加载购买产品数据
+const loadPurchasedProducts = () => {
+    productsLoading.value = true
+    // 模拟异步请求
+    setTimeout(() => {
+        const mockData: PurchasedProduct[] = [
+            {
+                productName: '聚德神笔',
+                packageType: '日卡',
+                remainingPoints: '--',
+                remainingTimes: '--',
+                expirationDate: '2025-10-11',
+                purchaseDate: '2025-10-11',
+                status: '已过期',
+            },
+            {
+                productName: '棱镜',
+                packageType: '棱镜10次卡',
+                remainingPoints: '--',
+                remainingTimes: 10,
+                expirationDate: '--',
+                purchaseDate: '2025-10-11',
+                status: '正常',
+            },
+        ]
+        purchasedProducts.value = mockData
+        productsTotal.value = mockData.length
+        productsLoading.value = false
+    }, 300)
+}
+
+// 加载下级人员数据
+const loadSubordinatePersonnel = () => {
+    subordinatesLoading.value = true
+    // 模拟异步请求
+    setTimeout(() => {
+        let mockData: SubordinatePersonnel[] = [
+            {
+                personnelName: '王五',
+                commissionAmount: 0,
+                status: '正常',
+                bindingTime: '2025-10-11',
+            },
+            {
+                personnelName: '李四',
+                commissionAmount: 10,
+                status: '正常',
+                bindingTime: '2025-10-11',
+            },
+        ]
+
+        // 根据搜索条件过滤
+        if (subordinateSearchName.value) {
+            mockData = mockData.filter(item =>
+                item.personnelName.includes(subordinateSearchName.value)
+            )
+        }
+
+        subordinatePersonnel.value = mockData
+        subordinatesTotal.value = mockData.length
+        subordinatesLoading.value = false
+    }, 300)
+}
+
+// 购买产品分页变化
+const handleProductsPageChange = (page: number) => {
+    productsPage.value = page
+    loadPurchasedProducts()
+}
+
+// 下级人员分页变化
+const handleSubordinatesPageChange = (page: number) => {
+    subordinatesPage.value = page
+    loadSubordinatePersonnel()
+}
+
+// 下级人员搜索
+const handleSubordinateSearch = () => {
+    subordinatesPage.value = 1
+    loadSubordinatePersonnel()
+}
+
+// 解除绑定
+const handleUnbind = (row: SubordinatePersonnel) => {
+    ElMessageBox.confirm(
+        `确定要解除与"${row.personnelName}"的绑定关系吗？`,
+        '提示',
+        {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+        }
+    )
+        .then(() => {
+            ElMessage.success('解除绑定成功')
+            loadSubordinatePersonnel()
+        })
+        .catch(() => {
+            // 取消操作
+        })
+}
+
+// 关闭弹框
+const handleClose = () => {
+    visible.value = false
+    // 重置数据
+    subordinateSearchName.value = ''
+    productsPage.value = 1
+    subordinatesPage.value = 1
+}
+
+defineExpose({ open })
+</script>
+
+<style scoped lang="scss">
+.user-detail-dialog {
+    .detail-wrapper {
+        padding: 12px 16px 24px;
+    }
+
+    .detail-section {
+        margin-bottom: 24px;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    .section-title {
+        margin-bottom: 12px;
+        font-weight: 600;
+        font-size: 14px;
+        color: #333;
+    }
+
+    .user-info-descriptions {
+        :deep(.el-descriptions__label) {
+            font-weight: 500;
+        }
+    }
+
+    .search-wrapper {
+        margin-bottom: 12px;
+    }
+
+    .pagination-wrapper {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 12px;
+        padding-top: 12px;
+
+        .pagination-jumper {
+            display: inline-flex;
+            align-items: center;
+            font-size: 13px;
+            color: #606266;
+        }
+    }
+
+    .dialog-footer {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+    }
+}
+</style>
+

web/src/views/backend/userCenter/user/index.vue

@@ -0,0 +1,254 @@
+<template>
+    <div class="default-main ba-table-box">
+        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info"
+            show-icon />
+
+        <!-- 表格顶部菜单 -->
+        <TableHeader :buttons="['refresh', 'columnDisplay']">
+            <el-input class="form-input" v-model="baTable.table.filter!.name" @input="onSearchInput"
+                placeholder="用户名称'" clearable />
+            <el-select class="form-input" v-model="baTable.table.filter!.status" @change="onSearchInput"
+                placeholder="状态" clearable>
+                <el-option label="启用" value="1" />
+                <el-option label="禁用" value="0" />
+            </el-select>
+            <template #quickSearchPrepend>
+                <el-button type="primary" @click="onAdd">添加</el-button>
+            </template>
+        </TableHeader>
+
+        <!-- 表格 -->
+        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
+        <Table>
+            <template #operate>
+                <el-table-column prop="operate" align="center" label="操作" min-width="150">
+                    <template #default="scope">
+                        <el-button type="primary" size="small" @click="onEdit(scope.row)">编辑</el-button>
+                        <el-button type="danger" size="small" @click="del(scope.row)">删除</el-button>
+                        <el-button type="primary" plain size="small" @click="detail(scope.row)">详情</el-button>
+                    </template>
+                </el-table-column>
+            </template>
+        </Table>
+
+        <!-- 表单 -->
+        <PopupForm />
+
+        <!-- 详情弹框 -->
+        <DetailDialog ref="detailDialogRef" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, provide, useTemplateRef } from 'vue'
+import { cloneDeep } from 'lodash-es'
+import baTableClass from '/@/utils/baTable'
+import Table from '/@/components/table/index.vue'
+import TableHeader from '/@/components/table/header/index.vue'
+import PopupForm from './popupForm.vue'
+import DetailDialog from './detailDialog.vue'
+import { baTableApi } from '/@/api/common'
+import { useI18n } from 'vue-i18n'
+
+defineOptions({
+    name: 'userCenter/user',
+})
+
+const { t } = useI18n()
+
+const baTable = new baTableClass(
+    new baTableApi('/admin/userCenter.user/'),
+    {
+        column: [
+            { label: '编号', prop: 'id', align: 'center', width: 70 },
+            {
+                label: '用户名',
+                prop: 'name',
+                align: 'center',
+                minWidth: 120
+            },
+            {
+                label: '邮箱',
+                prop: 'email',
+                align: 'center',
+                minWidth: 150
+            },
+            {
+                label: '企业',
+                prop: 'company',
+                align: 'center',
+                minWidth: 160
+            },
+            {
+                label: '状态',
+                prop: 'status',
+                align: 'center',
+                render: 'tag',
+                custom: { '1': 'success', '0': 'danger' },
+                replaceValue: { '1': '启用', '0': '禁用' },
+                minWidth: 150
+            },
+            {
+                label: '邀请人',
+                prop: 'inviter',
+                align: 'center',
+                minWidth: 120
+            },
+            {
+                label: '创建时间',
+                prop: 'create_time',
+                align: 'center',
+                minWidth: 160
+            },
+            {
+                label: '最后登录时间',
+                prop: 'last_login_time',
+                align: 'center',
+                minWidth: 160
+            },
+            {
+                label: '操作',
+                align: 'center',
+                render: 'slot',
+                slotName: 'operate',
+                operator: false,
+            },
+        ],
+        dblClickNotEditColumn: [undefined,],
+    },
+    {
+        defaultItems: {
+            status: '1',
+        },
+    }
+)
+
+// 设置假数据
+baTable.getData = () => {
+    baTable.table.loading = true
+    // 模拟异步请求
+    return new Promise<void>((resolve) => {
+        setTimeout(() => {
+            // 根据筛选条件过滤数据
+            let filteredData = [
+                {
+                    id: 1,
+                    name: '张三',
+                    email: 'zhangsan@example.com',
+                    company: '聚德科技',
+                    status: '1',
+                    inviter: '李四',
+                    create_time: '2025-01-10 10:00:00',
+                    last_login_time: '2025-01-15 14:30:00',
+                },
+                {
+                    id: 2,
+                    name: '王五',
+                    email: 'wangwu@example.com',
+                    company: '棱镜科技',
+                    status: '1',
+                    inviter: '赵六',
+                    create_time: '2025-01-11 09:00:00',
+                    last_login_time: '2025-01-14 16:20:00',
+                },
+                {
+                    id: 3,
+                    name: '刘七',
+                    email: 'liuqi@example.com',
+                    company: '测试公司',
+                    status: '0',
+                    inviter: '张三',
+                    create_time: '2025-01-12 11:00:00',
+                    last_login_time: '2025-01-13 10:15:00',
+                },
+                {
+                    id: 4,
+                    name: '陈八',
+                    email: 'chenba@example.com',
+                    company: '示例企业',
+                    status: '1',
+                    inviter: '王五',
+                    create_time: '2025-01-13 14:00:00',
+                    last_login_time: '2025-01-15 09:45:00',
+                },
+                {
+                    id: 5,
+                    name: '周九',
+                    email: 'zhoujiu@example.com',
+                    company: '聚德科技',
+                    status: '1',
+                    inviter: '李四',
+                    create_time: '2025-01-14 08:30:00',
+                    last_login_time: '2025-01-15 11:20:00',
+                },
+            ]
+
+            // 根据筛选条件过滤
+            const nameFilter = baTable.table.filter?.name
+            const statusFilter = baTable.table.filter?.status
+
+            if (nameFilter) {
+                filteredData = filteredData.filter(item => 
+                    item.name.includes(nameFilter.trim())
+                )
+            }
+
+            if (statusFilter) {
+                filteredData = filteredData.filter(item => 
+                    item.status === statusFilter
+                )
+            }
+
+            baTable.table.data = filteredData
+            baTable.table.total = filteredData.length
+            baTable.table.loading = false
+            resolve()
+        }, 300)
+    })
+}
+
+provide('baTable', baTable)
+
+// 搜索
+const onSearchInput = () => {
+    baTable.table.filter!.page = 1
+    baTable.getData()
+}
+
+// 删除
+const del = (row: TableRow) => {
+    baTable.onTableAction('delete', { row })
+}
+
+const openForm = (type: 'Add' | 'Edit', row?: TableRow) => {
+    if (type === 'Edit' && !row) return
+    baTable.form.items = row ? cloneDeep(row) : cloneDeep(baTable.form.defaultItems)
+    baTable.form.operate = type
+    baTable.form.operateIds = row && baTable.table.pk ? [row[baTable.table.pk]] : []
+}
+
+const onAdd = () => openForm('Add')
+const onEdit = (row: TableRow) => openForm('Edit', row)
+
+// 详情弹框引用
+const detailDialogRef = useTemplateRef('detailDialogRef')
+
+// 详情
+const detail = (row: TableRow) => {
+    if (detailDialogRef.value) {
+        detailDialogRef.value.open(row)
+    }
+}
+
+onMounted(() => {
+    baTable.mount()
+    baTable.getData()
+})
+</script>
+
+<style scoped lang="scss">
+.form-input {
+    width: 160px;
+    margin:0 5px;
+}
+</style>

web/src/views/backend/userCenter/user/popupForm.vue

@@ -0,0 +1,138 @@
+<template>
+    <!-- 对话框表单 -->
+    <el-dialog
+        class="ba-operate-dialog"
+        :close-on-click-modal="false"
+        :model-value="['Add', 'Edit'].includes(baTable.form.operate!)"
+        @close="baTable.toggleForm"
+        :destroy-on-close="true"
+    >
+        <template #header>
+            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
+                {{baTable.form.operate ? t(baTable.form.operate) : ''}}
+            </div>
+        </template>
+        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
+            <div
+                class="ba-operate-form"
+                :class="'ba-' + baTable.form.operate + '-form'"
+                :style="config.layout.shrink ? '' : 'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'"
+            >
+                <el-form
+                    ref="formRef"
+                    @keyup.enter="baTable.onSubmit(formRef)"
+                    :model="baTable.form.items"
+                    :label-position="config.layout.shrink ? 'top' : 'right'"
+                    :label-width="baTable.form.labelWidth + 'px'"
+                    :rules="rules"
+                    v-if="!baTable.form.loading"
+                >
+                    <el-form-item label="姓名" prop="name">
+                        <el-input
+                            v-model="baTable.form.items!.name"
+                            placeholder="请输入姓名"
+                        />
+                    </el-form-item>
+                    <el-form-item label="邮箱" prop="email">
+                        <el-input
+                            v-model="baTable.form.items!.email"
+                            type="email"
+                            placeholder="请输入邮箱"
+                        />
+                    </el-form-item>
+                    <el-form-item label="密码" prop="password" v-if="baTable.form.operate === 'Add'">
+                        <el-input
+                            v-model="baTable.form.items!.password"
+                            type="password"
+                            placeholder="请输入密码"
+                            show-password
+                        />
+                    </el-form-item>
+                    <el-form-item label="企业" prop="company">
+                        <el-select
+                            v-model="baTable.form.items!.company"
+                            placeholder="请选择企业"
+                            style="width: 100%"
+                        >
+                            <el-option
+                                v-for="item in companyOptions"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            />
+                        </el-select>
+                    </el-form-item>
+                    <FormItem
+                        label="状态"
+                        prop="status"
+                        type="radio"
+                        v-model="baTable.form.items!.status"
+                        :input-attr="{ border: true, content: statusOptions }"
+                    />
+                </el-form>
+            </div>
+        </el-scrollbar>
+        <template #footer>
+            <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
+                <el-button @click="baTable.toggleForm('')">取消</el-button>
+                <el-button v-blur :loading="baTable.form.submitLoading" @click="baTable.onSubmit(formRef)" type="primary">
+                    确认
+                </el-button>
+            </div>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { reactive, inject,  useTemplateRef } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type baTableClass from '/@/utils/baTable'
+import FormItem from '/@/components/formItem/index.vue'
+import type { FormItemRule } from 'element-plus'
+import { useConfig } from '/@/stores/config'
+import { buildValidatorData } from '/@/utils/validate'
+
+const config = useConfig()
+const formRef = useTemplateRef('formRef')
+const baTable = inject('baTable') as baTableClass
+
+const { t } = useI18n()
+
+const rules: Partial<Record<string, FormItemRule[]>> = reactive({
+    name: [buildValidatorData({ name: 'required', title: '姓名' })],
+    email: [buildValidatorData({ name: 'email', title: '邮箱' })],
+    password: [
+        {
+            validator: (rule: any, val: string, callback: Function) => {
+                if (baTable.form.operate === 'Add') {
+                    if (!val) {
+                        return callback(new Error(t('Please input field', { field: '密码' })))
+                    }
+                }
+                return callback()
+            },
+            trigger: 'blur',
+        },
+    ],
+    company: [buildValidatorData({ name: 'required', title: '企业', trigger: 'change' })],
+    status: [buildValidatorData({ name: 'required', title: '状态' })],
+})
+
+const companyOptions = [
+    { label: '腾达', value: '腾达' },
+    { label: '聚德科技', value: '聚德科技' },
+    { label: '棱镜科技', value: '棱镜科技' },
+    { label: '测试公司', value: '测试公司' },
+    { label: '示例企业', value: '示例企业' },
+]
+
+const statusOptions = {
+    '0': '禁用',
+    '1': '启用',
+}
+
+</script>
+
+<style scoped lang="scss">
+
+</style>