@appthen/cli 1.2.10 → 1.2.12

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

@@ -0,0 +1,535 @@
+/**
+ * 客户管理
+ * 客户信息管理和跟进
+ *
+ * @type Page
+ * @route /customers
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {
+  customerId?: number;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  customers?: {
+    /* @example 1 */id?: number,
+    /* @example 张三 */name?: string,
+    /* @example ABC公司 */company?: string,
+    /* @example 13800138000 */phone?: string,
+    /* @example zhangsan@abc.com */email?: string,
+    /* @example active */status?: string,
+    /* @example VIP */level?: string,
+    /* @example 25 */totalOrders?: number,
+    /* @example 125000 */totalAmount?: number,
+    /* @example 2024-01-15 */lastContact?: string,
+  }[];
+  loading?: boolean;
+  selectedCustomer?: any;
+  showEditModal?: boolean;
+  searchKeyword?: string;
+  statusFilter?: string;
+  formData?: any;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    customers: [
+      {
+        id: 1,
+        name: '张三',
+        company: 'ABC公司',
+        phone: '13800138000',
+        email: 'zhangsan@abc.com',
+        status: 'active',
+        level: 'VIP',
+        totalOrders: 25,
+        totalAmount: 125000,
+        lastContact: '2024-01-15',
+      },
+      {
+        id: 2,
+        name: '李四',
+        company: 'XYZ公司',
+        phone: '13900139000',
+        email: 'lisi@xyz.com',
+        status: 'active',
+        level: '普通',
+        totalOrders: 10,
+        totalAmount: 32000,
+        lastContact: '2024-01-14',
+      },
+      {
+        id: 3,
+        name: '王五',
+        company: 'DEF公司',
+        phone: '13700137000',
+        email: 'wangwu@def.com',
+        status: 'inactive',
+        level: 'VIP',
+        totalOrders: 50,
+        totalAmount: 250000,
+        lastContact: '2024-01-10',
+      },
+      {
+        id: 4,
+        name: '赵六',
+        company: 'GHI公司',
+        phone: '13600136000',
+        email: 'zhaoliu@ghi.com',
+        status: 'active',
+        level: '普通',
+        totalOrders: 8,
+        totalAmount: 18000,
+        lastContact: '2024-01-13',
+      },
+      {
+        id: 5,
+        name: '钱七',
+        company: 'JKL公司',
+        phone: '13500135000',
+        email: 'qianqi@jkl.com',
+        status: 'active',
+        level: 'VIP',
+        totalOrders: 30,
+        totalAmount: 180000,
+        lastContact: '2024-01-12',
+      },
+    ],
+    loading: false,
+    selectedCustomer: null,
+    showEditModal: false,
+    searchKeyword: '',
+    statusFilter: 'all',
+    formData: {},
+  };
+
+  handleSearch(keyword) {
+    this.setState({
+      searchKeyword: keyword,
+    });
+  }
+
+  handleStatusFilter(status) {
+    this.setState({
+      statusFilter: status,
+    });
+  }
+
+  getCustomerById(id) {
+    return this.state.customers.find(customer => customer.id === id);
+  }
+
+  getActiveCustomers() {
+    return this.state.customers.filter(
+      customer => customer.status === 'active'
+    );
+  }
+
+  getVipCustomers() {
+    return this.state.customers.filter(customer => customer.level === 'VIP');
+  }
+
+  handleEdit(customer) {
+    this.setState({
+      selectedCustomer: customer,
+      formData: {
+        ...customer,
+      },
+      showEditModal: true,
+    });
+  }
+
+  handleSave(id, data) {
+    console.log('保存客户:', id, data);
+    this.setState({
+      customers: this.state.customers.map(c => {
+        if (c.id === id) {
+          return {
+            ...c,
+            ...data,
+          };
+        }
+        return c;
+      }),
+      showEditModal: false,
+    });
+  }
+
+  handleDelete(id) {
+    this.setState({
+      customers: this.state.customers.filter(c => c.id !== id),
+    });
+  }
+
+  handleContact(customer) {
+    console.log('联系客户:', customer);
+  }
+
+  exportCustomers(format) {
+    console.log('导出客户:', format, this.state.customers);
+  }
+
+  calculateCustomerValue(customer) {
+    return customer.totalAmount / Math.max(customer.totalOrders, 1);
+  }
+
+  renderStatus(status) {
+    const config = {
+      active: {
+        color: 'green',
+        label: '活跃',
+      },
+      inactive: {
+        color: 'gray',
+        label: '非活跃',
+      },
+    };
+    return (
+      <Tag color={config[status]?.color || 'default'}>
+        {config[status]?.label || status}
+      </Tag>
+    );
+  }
+
+  renderLevel(level) {
+    const config = {
+      VIP: {
+        color: 'gold',
+        label: 'VIP',
+      },
+      普通: {
+        color: 'blue',
+        label: '普通',
+      },
+    };
+    return (
+      <Tag color={config[level]?.color || 'default'}>
+        {config[level]?.label || level}
+      </Tag>
+    );
+  }
+
+  refreshData() {
+    this.setState({
+      loading: true,
+    });
+    setTimeout(() => {
+      this.setState({
+        loading: false,
+      });
+    }, 1000);
+  }
+
+  render() {
+    const customers = this.state.customers;
+    const loading = this.state.loading;
+    const selectedCustomer = this.state.selectedCustomer;
+    const showEditModal = this.state.showEditModal;
+    const searchKeyword = this.state.searchKeyword;
+    const statusFilter = this.state.statusFilter;
+    const formData = this.state.formData;
+    const filteredCustomers = customers.filter(customer => {
+      const matchSearch =
+        customer.name.includes(searchKeyword) ||
+        customer.company.includes(searchKeyword);
+      const matchStatus =
+        statusFilter === 'all' || customer.status === statusFilter;
+      return matchSearch && matchStatus;
+    });
+    const columns = [
+      {
+        title: '客户姓名',
+        dataIndex: 'name',
+        key: 'name',
+        render: text => <Text className="font-bold">{text}</Text>,
+      },
+      {
+        title: '公司',
+        dataIndex: 'company',
+        key: 'company',
+      },
+      {
+        title: '联系方式',
+        key: 'contact',
+        render: record => (
+          <View>
+            <Text block>{record.phone}</Text>
+            <Text className="text-gray-500 text-sm">{record.email}</Text>
+          </View>
+        ),
+      },
+      {
+        title: '状态',
+        dataIndex: 'status',
+        key: 'status',
+        render: status => this.renderStatus(status),
+      },
+      {
+        title: '等级',
+        dataIndex: 'level',
+        key: 'level',
+        render: level => this.renderLevel(level),
+      },
+      {
+        title: '订单数',
+        dataIndex: 'totalOrders',
+        key: 'totalOrders',
+        render: value => <Text>{value} 单</Text>,
+      },
+      {
+        title: '总金额',
+        dataIndex: 'totalAmount',
+        key: 'totalAmount',
+        render: value => <Text>¥{value.toLocaleString()}</Text>,
+      },
+      {
+        title: '平均客单价',
+        key: 'avgValue',
+        render: record => (
+          <Text>¥{this.calculateCustomerValue(record).toFixed(2)}</Text>
+        ),
+      },
+      {
+        title: '操作',
+        key: 'action',
+        render: (text, record) => (
+          <View>
+            <Button type="link" onClick={() => this.handleEdit(record)}>
+              编辑
+            </Button>
+            <Button type="link" onClick={() => this.handleContact(record)}>
+              联系
+            </Button>
+            <Button
+              type="link"
+              danger
+              onClick={() => this.handleDelete(record.id)}
+            >
+              删除
+            </Button>
+          </View>
+        ),
+      },
+    ];
+    if (loading) {
+      return <View className="p-6">加载中...</View>;
+    }
+    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>
+        <Card className="mb-[24px]">
+          <View className="gap-4 grid grid-cols-4">
+            <View className="text-[var(--center)] p-[16px] bg-[var(--blue-50)] rounded">
+              <Text className="text-3xl font-bold text-[var(--blue-600)]">
+                {customers.length}
+              </Text>
+              <Text className="block text-sm text-[#4b5563] mt-[4px]">
+                总客户数
+              </Text>
+            </View>
+            <View className="text-[var(--center)] p-[16px] bg-[var(--green-50)] rounded">
+              <Text className="text-3xl font-bold text-[var(--green-600)]">
+                {this.getActiveCustomers().length}
+              </Text>
+              <Text className="block text-sm text-[#4b5563] mt-[4px]">
+                活跃客户
+              </Text>
+            </View>
+            <View className="text-[var(--center)] p-[16px] bg-[var(--orange-50)] rounded">
+              <Text className="text-3xl font-bold text-[var(--orange-600)]">
+                {this.getVipCustomers().length}
+              </Text>
+              <Text className="block text-sm text-[#4b5563] mt-[4px]">
+                VIP客户
+              </Text>
+            </View>
+            <View className="text-[var(--center)] p-[16px] bg-[var(--purple-50)] rounded">
+              <Text className="text-3xl font-bold text-[var(--purple-600)]">
+                {customers
+                  .reduce((sum, c) => sum + c.totalAmount, 0)
+                  .toLocaleString()}
+              </Text>
+              <Text className="block text-sm text-[#4b5563] mt-[4px]">
+                总消费金额
+              </Text>
+            </View>
+          </View>
+        </Card>
+        <Card className="mb-[24px]">
+          <View className="flex items-center justify-between">
+            <View className="gap-4 flex items-center">
+              <Input
+                placeholder="搜索客户"
+                value={searchKeyword}
+                onChange={e => this.handleSearch(e.target.value)}
+                className=""
+              />
+              <Select
+                value={statusFilter}
+                onChange={value => this.handleStatusFilter(value)}
+                className=""
+              >
+                <Select.Option value="all">全部状态</Select.Option>
+                <Select.Option value="active">活跃</Select.Option>
+                <Select.Option value="inactive">非活跃</Select.Option>
+              </Select>
+            </View>
+            <View className="gap-2 flex">
+              <Button onClick={() => this.refreshData()}>刷新</Button>
+              <Button type="primary">+ 新增客户</Button>
+            </View>
+          </View>
+        </Card>
+        <Card>
+          <Table
+            columns={columns}
+            dataSource={filteredCustomers}
+            rowKey="id"
+            pagination={{
+              pageSize: 10,
+              showTotal: function (total) {
+                return `共 ${total} 条`;
+              },
+            }}
+          />
+        </Card>
+        <Modal
+          animate="pop"
+          visible={showEditModal}
+          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={formData?.name}
+                    onChange={e =>
+                      this.setState({
+                        formData: {
+                          ...formData,
+                          name: e.target.value,
+                        },
+                      })
+                    }
+                  />
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">公司</Text>
+                  <Input
+                    value={formData?.company}
+                    onChange={e =>
+                      this.setState({
+                        formData: {
+                          ...formData,
+                          company: e.target.value,
+                        },
+                      })
+                    }
+                  />
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">手机号</Text>
+                  <Input
+                    value={formData?.phone}
+                    onChange={e =>
+                      this.setState({
+                        formData: {
+                          ...formData,
+                          phone: e.target.value,
+                        },
+                      })
+                    }
+                  />
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">邮箱</Text>
+                  <Input
+                    value={formData?.email}
+                    onChange={e =>
+                      this.setState({
+                        formData: {
+                          ...formData,
+                          email: e.target.value,
+                        },
+                      })
+                    }
+                  />
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">状态</Text>
+                  <Select
+                    value={formData?.status}
+                    onChange={value =>
+                      this.setState({
+                        formData: {
+                          ...formData,
+                          status: value,
+                        },
+                      })
+                    }
+                    className="w-full"
+                  >
+                    <Select.Option value="active">活跃</Select.Option>
+                    <Select.Option value="inactive">非活跃</Select.Option>
+                  </Select>
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">等级</Text>
+                  <Select
+                    value={formData?.level}
+                    onChange={value =>
+                      this.setState({
+                        formData: {
+                          ...formData,
+                          level: value,
+                        },
+                      })
+                    }
+                    className="w-full"
+                  >
+                    <Select.Option value="VIP">VIP</Select.Option>
+                    <Select.Option value="普通">普通</Select.Option>
+                  </Select>
+                </View>
+                <View className="gap-2 flex justify-end mt-[24px]">
+                  <Button
+                    onClick={() =>
+                      this.setState({
+                        showEditModal: false,
+                      })
+                    }
+                  >
+                    取消
+                  </Button>
+                  <Button
+                    type="primary"
+                    onClick={() => this.handleSave(formData?.id || 0, formData)}
+                  >
+                    保存
+                  </Button>
+                </View>
+              </View>
+            </View>
+          )}
+          maskClosable={true}
+        />
+      </Page>
+    );
+  }
+}
+
+export default Document;