@appthen/cli 1.2.10 → 1.2.12

package/tests/test-app/src/pages/DepartmentManagement.tsx

@@ -0,0 +1,503 @@
+/**
+ * 部门管理
+ * 管理组织架构和部门信息
+ *
+ * @type Page
+ * @route /departments
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {
+  organizationId?: number;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  departments?: {
+    /* @example 1 */id?: number,
+    /* @example 技术部 */name?: string,
+    parentId?: any,
+    /* @example 张三 */manager?: string,
+    /* @example 负责技术研发 */description?: string,
+    /* @example 15 */userCount?: number,
+    /* @example 1 */level?: number,
+  }[];
+  users?: {
+    /* @example 1 */id?: number,
+    /* @example 张三 */name?: string,
+    /* @example 1 */departmentId?: number,
+  }[];
+  loading?: boolean;
+  searchKeyword?: string;
+  selectedDepartment?: any;
+  showAddModal?: boolean;
+  showEditModal?: boolean;
+  formData?: {
+    name?: string,
+    parentId?: number,
+    manager?: string,
+    description?: string,
+  };
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    departments: [
+      {
+        id: 1,
+        name: '技术部',
+        parentId: null,
+        manager: '张三',
+        description: '负责技术研发',
+        userCount: 15,
+        level: 1,
+      },
+      {
+        id: 2,
+        name: '产品部',
+        parentId: null,
+        manager: '李四',
+        description: '负责产品规划',
+        userCount: 8,
+        level: 1,
+      },
+      {
+        id: 3,
+        name: '前端组',
+        parentId: 1,
+        manager: '王五',
+        description: '前端开发团队',
+        userCount: 5,
+        level: 2,
+      },
+      {
+        id: 4,
+        name: '后端组',
+        parentId: 1,
+        manager: '赵六',
+        description: '后端开发团队',
+        userCount: 8,
+        level: 2,
+      },
+      {
+        id: 5,
+        name: '设计组',
+        parentId: 2,
+        manager: '钱七',
+        description: '产品设计团队',
+        userCount: 4,
+        level: 2,
+      },
+    ],
+    users: [
+      { id: 1, name: '张三', departmentId: 1 },
+      { id: 2, name: '李四', departmentId: 2 },
+      { id: 3, name: '王五', departmentId: 3 },
+      { id: 4, name: '赵六', departmentId: 4 },
+      { id: 5, name: '钱七', departmentId: 5 },
+    ],
+    loading: false,
+    searchKeyword: '',
+    selectedDepartment: null,
+    showAddModal: false,
+    showEditModal: false,
+    formData: { name: '', parentId: null, manager: '', description: '' },
+  };
+
+  handleSearch(keyword) {
+    this.setState({
+      searchKeyword: keyword,
+    });
+  }
+
+  getDepartmentById(id) {
+    return this.state.departments.find(dept => dept.id === id);
+  }
+
+  getDepartmentUsers(departmentId) {
+    return this.state.users.filter(user => user.departmentId === departmentId);
+  }
+
+  handleAddDepartment() {
+    this.setState({
+      showAddModal: true,
+      formData: {
+        name: '',
+        parentId: null,
+        manager: '',
+        description: '',
+      },
+    });
+  }
+
+  buildTreeData(departments) {
+    const map = {};
+    const roots = [];
+    departments.forEach(dept => {
+      map[dept.id] = {
+        ...dept,
+        children: [],
+      };
+    });
+    departments.forEach(dept => {
+      if (dept.parentId && map[dept.parentId]) {
+        map[dept.parentId].children.push(map[dept.id]);
+      } else {
+        roots.push(map[dept.id]);
+      }
+    });
+    return roots;
+  }
+
+  async handleSubmit(type) {
+    await new Promise(resolve => setTimeout(resolve, 500));
+    if (type === 'add') {
+      console.log('添加部门:', this.state.formData);
+    } else {
+      console.log('编辑部门:', this.state.formData);
+    }
+    this.setState({
+      showAddModal: false,
+      showEditModal: false,
+    });
+  }
+
+  handleEditDepartment(department) {
+    this.setState({
+      selectedDepartment: department,
+      formData: {
+        ...department,
+      },
+      showEditModal: true,
+    });
+  }
+
+  handleDeleteDepartment(id, record) {
+    console.log('删除部门:', id, record);
+  }
+
+  render() {
+    return (
+      <Page className="p-[24px] bg-[var(--gray-50)] min-h-screen">
+        <View className="mb-[24px]">
+          <Text className="text-2xl font-bold text-[#1f2937]">部门管理</Text>
+          <Text className="text-[#6b7280] text-sm mt-[4px]">
+            管理组织架构和部门信息
+          </Text>
+        </View>
+        <View className="mb-[24px] flex items-center justify-between">
+          <View className="gap-4 flex items-center">
+            <Input
+              placeholder="搜索部门名称/描述"
+              value={this.state.searchKeyword}
+              onChange={e => this.handleSearch(e.target.value)}
+              prefix="🔍"
+              className=""
+            />
+          </View>
+          <Button type="primary" onClick={() => this.handleAddDepartment()}>
+            + 新增部门
+          </Button>
+        </View>
+        <View className="gap-6 flex">
+          <View className="w-[33.33333333333333%]">
+            <View className="bg-[#ffffff] rounded-lg p-[16px] shadow-[0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)]">
+              <Text className="block font-bold mb-[16px]">组织架构</Text>
+              <Tree
+                treeData={this.buildTreeData(this.state.departments)}
+                defaultExpandAll={true}
+                onSelect={(keys, info) => console.log('选中:', keys, info)}
+              />
+            </View>
+          </View>
+          <View className="w-[66.66666666666666%]">
+            <Table
+              loading={this.state.loading}
+              columns={[
+                { title: 'ID', dataIndex: 'id', key: 'id', width: 60 },
+                { title: '部门名称', dataIndex: 'name', key: 'name' },
+                {
+                  title: '上级部门',
+                  dataIndex: 'parentId',
+                  key: 'parentId',
+                  render: parentId =>
+                    (() => {
+                      if (!parentId) return <Text>-</Text>;
+                      const parent = this.state.departments.find(
+                        d => d.id === parentId
+                      );
+                      return <Text>{parent?.name}</Text>;
+                    })(),
+                },
+                { title: '负责人', dataIndex: 'manager', key: 'manager' },
+                {
+                  title: '人数',
+                  dataIndex: 'userCount',
+                  key: 'userCount',
+                  render: count => <Text>{count}人</Text>,
+                },
+                {
+                  title: '层级',
+                  dataIndex: 'level',
+                  key: 'level',
+                  render: level => (
+                    <Tag color="blue">
+                      L<Text>{level}</Text>
+                    </Tag>
+                  ),
+                },
+                { title: '描述', dataIndex: 'description', key: 'description' },
+                {
+                  title: '操作',
+                  key: 'action',
+                  render: (text, record) => (
+                    <Space>
+                      <Button
+                        type="link"
+                        onClick={() => this.handleEditDepartment(record)}
+                      >
+                        编辑
+                      </Button>
+                      <Popconfirm
+                        title="确定要删除这个部门吗？"
+                        description="删除后无法恢复"
+                        onConfirm={() =>
+                          this.handleDeleteDepartment(record.id, record)
+                        }
+                        okText="确定"
+                        cancelText="取消"
+                      >
+                        <Button type="link" danger={true}>
+                          删除
+                        </Button>
+                      </Popconfirm>
+                    </Space>
+                  ),
+                },
+              ]}
+              dataSource={this.state.departments?.filter(function (dept) {
+                return (
+                  dept?.name?.includes(this.state.searchKeyword) ||
+                  dept?.description?.includes(this.state.searchKeyword)
+                );
+              })}
+              rowKey="id"
+              pagination={{
+                pageSize: 10,
+                showTotal: function (total) {
+                  return `共 ${total} 条`;
+                },
+              }}
+            />
+          </View>
+        </View>
+        <Modal
+          animate="pop"
+          visible={this.state.showAddModal}
+          renderView={() => (
+            <View className="bg-[#ffffff] w-[600px] h-[500px] p-[24px]">
+              <Text className="text-xl font-bold mb-[16px]">新增部门</Text>
+              <View className="space-y-4">
+                <View>
+                  <Text className="block mb-[8px]">部门名称</Text>
+                  <Input
+                    value={this.state.formData.name}
+                    onChange={e =>
+                      this.setState({
+                        formData: {
+                          ...this.state.formData,
+                          name: e.target.value,
+                        },
+                      })
+                    }
+                    placeholder="请输入部门名称"
+                  />
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">上级部门</Text>
+                  <Select
+                    value={this.state.formData.parentId}
+                    onChange={value =>
+                      this.setState({
+                        formData: {
+                          ...this.state.formData,
+                          parentId: value,
+                        },
+                      })
+                    }
+                    placeholder="请选择上级部门（留空为顶级部门）"
+                    className="w-full"
+                  >
+                    <Select.Option value={null}>无（顶级部门）</Select.Option>
+                    {this.state.departments.map((dept, index) => (
+                      <Select.Option key={dept.id} value={dept.id}>
+                        <Text>{dept.name}</Text>
+                      </Select.Option>
+                    ))}
+                  </Select>
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">负责人</Text>
+                  <Input
+                    value={this.state.formData.manager}
+                    onChange={e =>
+                      this.setState({
+                        formData: {
+                          ...this.state.formData,
+                          manager: e.target.value,
+                        },
+                      })
+                    }
+                    placeholder="请输入负责人姓名"
+                  />
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">描述</Text>
+                  <Input.TextArea
+                    value={this.state.formData.description}
+                    onChange={e =>
+                      this.setState({
+                        formData: {
+                          ...this.state.formData,
+                          description: e.target.value,
+                        },
+                      })
+                    }
+                    placeholder="请输入部门描述"
+                    rows={4}
+                  />
+                </View>
+                <View className="gap-2 flex justify-end mt-[24px]">
+                  <Button
+                    onClick={() =>
+                      this.setState({
+                        showAddModal: false,
+                      })
+                    }
+                  >
+                    取消
+                  </Button>
+                  <Button
+                    type="primary"
+                    onClick={() => this.handleSubmit('add')}
+                  >
+                    确认
+                  </Button>
+                </View>
+              </View>
+            </View>
+          )}
+          maskClosable={true}
+        />
+        <Modal
+          animate="pop"
+          visible={this.state.showEditModal}
+          renderView={() => (
+            <View className="bg-[#ffffff] w-[600px] h-[500px] p-[24px]">
+              <Text className="text-xl font-bold mb-[16px]">
+                编辑部门:{this.state.selectedDepartment?.name}
+              </Text>
+              <View className="space-y-4">
+                <View>
+                  <Text className="block mb-[8px]">部门名称</Text>
+                  <Input
+                    value={this.state.formData.name}
+                    onChange={e =>
+                      this.setState({
+                        formData: {
+                          ...this.state.formData,
+                          name: e.target.value,
+                        },
+                      })
+                    }
+                    placeholder="请输入部门名称"
+                  />
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">上级部门</Text>
+                  <Select
+                    value={this.state.formData.parentId}
+                    onChange={value =>
+                      this.setState({
+                        formData: {
+                          ...this.state.formData,
+                          parentId: value,
+                        },
+                      })
+                    }
+                    placeholder="请选择上级部门（留空为顶级部门）"
+                    className="w-full"
+                  >
+                    <Select.Option value={null}>无（顶级部门）</Select.Option>
+                    {this.state.departments.map((dept, index) => (
+                      <Select.Option key={dept.id} value={dept.id}>
+                        <Text>{dept.name}</Text>
+                      </Select.Option>
+                    ))}
+                  </Select>
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">负责人</Text>
+                  <Input
+                    value={this.state.formData.manager}
+                    onChange={e =>
+                      this.setState({
+                        formData: {
+                          ...this.state.formData,
+                          manager: e.target.value,
+                        },
+                      })
+                    }
+                    placeholder="请输入负责人姓名"
+                  />
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">描述</Text>
+                  <Input.TextArea
+                    value={this.state.formData.description}
+                    onChange={e =>
+                      this.setState({
+                        formData: {
+                          ...this.state.formData,
+                          description: e.target.value,
+                        },
+                      })
+                    }
+                    placeholder="请输入部门描述"
+                    rows={4}
+                  />
+                </View>
+                <View className="gap-2 flex justify-end mt-[24px]">
+                  <Button
+                    onClick={() =>
+                      this.setState({
+                        showEditModal: false,
+                      })
+                    }
+                  >
+                    取消
+                  </Button>
+                  <Button
+                    type="primary"
+                    onClick={() => this.handleSubmit('edit')}
+                  >
+                    确认
+                  </Button>
+                </View>
+              </View>
+            </View>
+          )}
+          maskClosable={true}
+        />
+      </Page>
+    );
+  }
+}
+
+export default Document;