企业列表编写

web/src/api/backend/company/index.ts

@@ -0,0 +1,29 @@
+import createAxios from '/@/utils/axios'
+
+
+// 添加、编辑
+export function edit(data: anyObj) {
+    return createAxios({
+        url: '/admin/company.index/edit',
+        method: 'post',
+        data: data,
+    })
+}
+
+// 删除
+export function del(data:anyObj) {
+    return createAxios({
+        url: '/admin/company.index/delete',
+        method: 'post',
+        data: data,
+    })
+}
+
+// 禁用/启用企业 传id
+export function toggleStatus(data:anyObj) {
+    return createAxios({
+        url: '/admin/company.index/toggleStatus',
+        method: 'post',
+        data: data,
+    })
+}

web/src/api/backend/userCenter/user.ts

@@ -0,0 +1,40 @@
+import createAxios from '/@/utils/axios'
+
+
+// 添加、编辑
+export function edit(data: anyObj) {
+    return createAxios({
+        url: '/admin/userCenter.user/edit',
+        method: 'post',
+        data: data,
+    })
+}
+
+// 删除
+export function del(data:anyObj) {
+    return createAxios({
+        url: '/admin/userCenter.user/delete',
+        method: 'post',
+        data: data,
+    })
+}
+
+// 解除上下级关系
+export function removeSubordinate(data:anyObj) {
+    return createAxios({
+        url: '/userCenter.user/removeSubordinate',
+        method: 'get',
+        params: data,
+    })
+}
+
+// 详情
+export function detail(id: number) {
+    return createAxios({
+        url: '/admin/userCenter.user/detail',
+        method: 'get',
+        params: {
+            id: id,
+        },
+    })
+}

web/src/views/backend/company/index.vue

@@ -0,0 +1,214 @@
+<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 #status>
+                <el-table-column prop="status" align="center" label="状态" min-width="150">
+                    <template #default="scope">
+                        <el-switch v-model="scope.row.status" active-value="1" inactive-value="0" />
+                    </template>
+                </el-table-column>
+            </template>
+            <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>
+                    </template>
+                </el-table-column>
+            </template>
+        </Table>
+
+        <!-- 表单 -->
+        <PopupForm />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, provide, } 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 { baTableApi } from '/@/api/common'
+import { useI18n } from 'vue-i18n'
+
+defineOptions({
+    name: 'company/index',
+})
+
+const { t } = useI18n()
+
+const baTable = new baTableClass(
+    new baTableApi('/admin/company.index/'),
+    {
+        column: [
+            { label: '编号', prop: 'id', align: 'center', width: 70 },
+            {
+                label: '企业名称',
+                prop: 'name',
+                align: 'center',
+                minWidth: 120
+            },
+            {
+                label: '创建人',
+                prop: 'creator',
+                align: 'center',
+                minWidth: 150
+            },
+            {
+                label: '状态',
+                prop: 'status',
+                align: 'center',
+                render: 'slot',
+                slotName: 'status',
+                minWidth: 150
+            },
+            {
+                label: '创建时间',
+                prop: 'create_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: '聚德科技',
+                    creator: '张三',
+                    status: '1',
+                    create_time: '2025-01-10 10:00:00',
+                },
+                {
+                    id: 2,
+                    name: '棱镜科技',
+                    creator: '李四',
+                    status: '1',
+                    create_time: '2025-01-11 09:00:00',
+                },
+                {
+                    id: 3,
+                    name: '测试公司',
+                    creator: '王五',
+                    status: '0',
+                    create_time: '2025-01-12 11:00:00',
+                },
+                {
+                    id: 4,
+                    name: '示例企业',
+                    creator: '赵六',
+                    status: '1',
+                    create_time: '2025-01-13 14:00:00',
+                },
+                {
+                    id: 5,
+                    name: '腾达科技',
+                    creator: '刘七',
+                    status: '0',
+                    create_time: '2025-01-14 08:30: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)
+
+
+onMounted(() => {
+    baTable.mount()
+    baTable.getData()
+})
+</script>
+
+<style scoped lang="scss">
+.form-input {
+    width: 180px;
+    margin:0 5px;
+}
+</style>

web/src/views/backend/company/popupForm.vue

@@ -0,0 +1,122 @@
+<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"
+        width="600px"
+        style="height: 300px;"
+    >
+        <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="btnSubmit"
+                    :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="creator">
+                        <el-select
+                            v-model="baTable.form.items!.creator"
+                            placeholder="请选择所属人"
+                            style="width: 100%"
+                        >
+                            <el-option
+                                v-for="item in userOptions"
+                                :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="btnSubmit" 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 type { FormItemRule } from 'element-plus'
+import { useConfig } from '/@/stores/config'
+import FormItem from '/@/components/formItem/index.vue'
+import { buildValidatorData } from '/@/utils/validate'
+import { edit } from '/@/api/backend/company/index'
+
+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: '姓名' })],
+    
+})
+
+const userOptions = [
+    { label: '张三', value: '张三' },
+    { label: '李四', value: '李四' },
+    { label: '王五', value: '王五' },
+    { label: '赵六', value: '赵六' },
+    { label: '刘七', value: '刘七' },
+]
+
+const statusOptions = {
+    '0': '禁用',
+    '1': '正常',
+}
+
+// 提交
+const btnSubmit = () => {
+	formRef.value?.validate((valid: boolean) => {
+		if (valid) {
+            baTable.table.loading = true
+			
+		}
+	})
+}
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -20,7 +20,7 @@
             >
                 <el-form
                     ref="formRef"
-                    @keyup.enter="baTable.onSubmit(formRef)"
+                    @keyup.enter="btnSubmit"
                     :model="baTable.form.items"
                     :label-position="config.layout.shrink ? 'top' : 'right'"
                     :label-width="baTable.form.labelWidth + 'px'"
@@ -75,7 +75,7 @@
         <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 v-blur :loading="baTable.form.submitLoading" @click="btnSubmit" type="primary">
                     确认
                 </el-button>
             </div>
@@ -91,6 +91,7 @@ import FormItem from '/@/components/formItem/index.vue'
 import type { FormItemRule } from 'element-plus'
 import { useConfig } from '/@/stores/config'
 import { buildValidatorData } from '/@/utils/validate'
+import { edit } from '/@/api/backend/userCenter/user'
 
 const config = useConfig()
 const formRef = useTemplateRef('formRef')
@@ -100,9 +101,13 @@ const { t } = useI18n()
 
 const rules: Partial<Record<string, FormItemRule[]>> = reactive({
     name: [buildValidatorData({ name: 'required', title: '姓名' })],
-    email: [buildValidatorData({ name: 'email', title: '邮箱' })],
+    email: [
+        buildValidatorData({ name: 'required', title: '邮箱' }),
+        buildValidatorData({ name: 'email', title: '邮箱' })
+    ],
     password: [
         {
+            required: true,
             validator: (rule: any, val: string, callback: Function) => {
                 if (baTable.form.operate === 'Add') {
                     if (!val) {
@@ -114,8 +119,6 @@ const rules: Partial<Record<string, FormItemRule[]>> = reactive({
             trigger: 'blur',
         },
     ],
-    company: [buildValidatorData({ name: 'required', title: '企业', trigger: 'change' })],
-    status: [buildValidatorData({ name: 'required', title: '状态' })],
 })
 
 const companyOptions = [
@@ -131,6 +134,16 @@ const statusOptions = {
     '1': '启用',
 }
 
+// 提交
+const btnSubmit = () => {
+	formRef.value?.validate((valid: boolean) => {
+		if (valid) {
+            baTable.table.loading = true
+			
+		}
+	})
+}
+
 </script>
 
 <style scoped lang="scss">