@appthen/cli 1.2.11 → 1.2.12

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

@@ -0,0 +1,402 @@
+/**
+ * 工单管理系统 - 管理所有工单信息
+ * @type Page
+ * @route /ticket-management
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {
+  title?: string;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  tickets?: string[];
+  loading?: boolean;
+  searchKeyword?: string;
+  statusFilter?: string;
+  selectedTicket?: any;
+  showCreateModal?: boolean;
+  showDetailModal?: boolean;
+  formData?: any;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    tickets: [],
+    loading: false,
+    searchKeyword: '',
+    statusFilter: '',
+    selectedTicket: null,
+    showCreateModal: false,
+    showDetailModal: false,
+    formData: {},
+  };
+
+  componentDidMount() {
+    this.loadTickets();
+  }
+
+  loadTickets() {
+    this.setState({
+      loading: true,
+    });
+    setTimeout(() => {
+      this.setState({
+        tickets: [
+          {
+            id: 1,
+            title: '系统登录失败',
+            description: '无法登录系统，提示密码错误',
+            priority: '高',
+            status: '待处理',
+            assignee: '张三',
+            createTime: '2024-01-15 10:30:00',
+          },
+          {
+            id: 2,
+            title: '数据导出异常',
+            description: '导出Excel文件时出现乱码',
+            priority: '中',
+            status: '处理中',
+            assignee: '李四',
+            createTime: '2024-01-15 14:20:00',
+          },
+          {
+            id: 3,
+            title: '页面加载缓慢',
+            description: '首页加载时间超过10秒',
+            priority: '低',
+            status: '已解决',
+            assignee: '王五',
+            createTime: '2024-01-14 09:15:00',
+          },
+          {
+            id: 4,
+            title: '报表数据不准确',
+            description: '月度报表数据与实际不符',
+            priority: '高',
+            status: '待处理',
+            assignee: '张三',
+            createTime: '2024-01-16 11:45:00',
+          },
+          {
+            id: 5,
+            title: '权限配置问题',
+            description: '部分用户无法访问特定模块',
+            priority: '中',
+            status: '处理中',
+            assignee: '李四',
+            createTime: '2024-01-16 16:30:00',
+          },
+        ],
+        loading: false,
+      });
+    }, 500);
+  }
+
+  handleSearch(keyword) {
+    this.setState({
+      searchKeyword: keyword.trim(),
+    });
+  }
+
+  handleStatusFilter(status) {
+    this.setState({
+      statusFilter: status,
+    });
+  }
+
+  handleViewDetail(ticket) {
+    this.setState({
+      selectedTicket: ticket,
+      showDetailModal: true,
+    });
+  }
+
+  handleCreateTicket() {
+    this.setState({
+      showCreateModal: true,
+      formData: {},
+    });
+  }
+
+  handleCloseCreateModal() {
+    this.setState({
+      showCreateModal: false,
+    });
+  }
+
+  handleCloseDetailModal() {
+    this.setState({
+      showDetailModal: false,
+    });
+  }
+
+  handleFormChange(field, value) {
+    this.setState({
+      formData: {
+        ...this.state.formData,
+        [field]: value,
+      },
+    });
+  }
+
+  handleSubmitTicket() {
+    const newTicket = {
+      id: this.state.tickets?.length + 1,
+      title: this.state.formData?.title || '',
+      description: this.state.formData?.description || '',
+      priority: this.state.formData?.priority || '中',
+      status: '待处理',
+      assignee: this.state.formData?.assignee || '',
+      createTime: new Date().toLocaleString('zh-CN'),
+    };
+    this.setState({
+      tickets: [newTicket, ...(this.state.tickets || [])],
+      showCreateModal: false,
+      formData: {},
+    });
+  }
+
+  getFilteredTickets() {
+    let tickets = this.state.tickets || [];
+    if (this.state.searchKeyword) {
+      tickets = tickets.filter(
+        ticket =>
+          ticket?.title?.includes(this.state.searchKeyword) ||
+          ticket?.description?.includes(this.state.searchKeyword)
+      );
+    }
+    if (this.state.statusFilter) {
+      tickets = tickets.filter(
+        ticket => ticket?.status === this.state.statusFilter
+      );
+    }
+    return tickets;
+  }
+
+  getPriorityColor(priority) {
+    const colors = {
+      高: '#ff4d4f',
+      中: '#faad14',
+      低: '#52c41a',
+    };
+    return colors[priority] || '#d9d9d9';
+  }
+
+  getStatusColor(status) {
+    const colors = {
+      待处理: '#ff4d4f',
+      处理中: '#1890ff',
+      已解决: '#52c41a',
+      已关闭: '#d9d9d9',
+    };
+    return colors[status] || '#d9d9d9';
+  }
+
+  render() {
+    return (
+      <Page className="p-[24px]">
+        <View className="flex justify-between items-center mb-[24px]">
+          <Text className="text-2xl font-bold">
+            {this.props.title || '工单管理系统'}
+          </Text>
+          <Button type="primary" onClick={() => this.handleCreateTicket()}>
+            新增工单
+          </Button>
+        </View>
+        <View className="gap-4 mb-[16px] flex">
+          <Input
+            placeholder="请输入工单标题或描述搜索"
+            value={this.state.searchKeyword}
+            onChange={e => this.handleSearch(e.target.value)}
+            className="flex-1"
+          />
+          <Select
+            placeholder="选择工单状态"
+            value={this.state.statusFilter}
+            onChange={value => this.handleStatusFilter(value)}
+            allowClear={true}
+            className="w-[192px]"
+          >
+            <Select.Option value="待处理">待处理</Select.Option>
+            <Select.Option value="处理中">处理中</Select.Option>
+            <Select.Option value="已解决">已解决</Select.Option>
+            <Select.Option value="已关闭">已关闭</Select.Option>
+          </Select>
+        </View>
+        <Table
+          columns={[
+            { title: '工单ID', dataIndex: 'id', key: 'id', width: 80 },
+            { title: '工单标题', dataIndex: 'title', key: 'title' },
+            {
+              title: '优先级',
+              dataIndex: 'priority',
+              key: 'priority',
+              render: priority => (
+                <Text
+                  style={{
+                    color: this.getPriorityColor(priority),
+                    fontWeight: 'bold',
+                  }}
+                >
+                  {priority}
+                </Text>
+              ),
+            },
+            {
+              title: '状态',
+              dataIndex: 'status',
+              key: 'status',
+              render: status => (
+                <Text
+                  style={{
+                    color: this.getStatusColor(status),
+                    fontWeight: 'bold',
+                  }}
+                >
+                  {status}
+                </Text>
+              ),
+            },
+            { title: '处理人', dataIndex: 'assignee', key: 'assignee' },
+            { title: '创建时间', dataIndex: 'createTime', key: 'createTime' },
+            {
+              title: '操作',
+              key: 'action',
+              render: (text, record) => (
+                <Button
+                  type="link"
+                  onClick={() => this.handleViewDetail(record)}
+                >
+                  查看详情
+                </Button>
+              ),
+            },
+          ]}
+          dataSource={this.getFilteredTickets()}
+          loading={this.state.loading}
+          rowKey="id"
+        />
+        <Modal
+          title="新增工单"
+          open={this.state.showCreateModal}
+          onOk={() => this.handleSubmitTicket()}
+          onCancel={() => this.handleCloseCreateModal()}
+          width={600}
+        >
+          <Form layout="vertical">
+            <Form.Item label="工单标题" required={true}>
+              <Input
+                placeholder="请输入工单标题"
+                value={this.state.formData?.title || ''}
+                onChange={e => this.handleFormChange('title', e.target.value)}
+              />
+            </Form.Item>
+            <Form.Item label="工单描述" required={true}>
+              <Input.TextArea
+                placeholder="请输入工单描述"
+                rows={4}
+                value={this.state.formData?.description || ''}
+                onChange={e =>
+                  this.handleFormChange('description', e.target.value)
+                }
+              />
+            </Form.Item>
+            <Form.Item label="优先级" required={true}>
+              <Select
+                placeholder="请选择优先级"
+                value={this.state.formData?.priority}
+                onChange={value => this.handleFormChange('priority', value)}
+              >
+                <Select.Option value="高">高</Select.Option>
+                <Select.Option value="中">中</Select.Option>
+                <Select.Option value="低">低</Select.Option>
+              </Select>
+            </Form.Item>
+            <Form.Item label="处理人">
+              <Input
+                placeholder="请输入处理人"
+                value={this.state.formData?.assignee || ''}
+                onChange={e =>
+                  this.handleFormChange('assignee', e.target.value)
+                }
+              />
+            </Form.Item>
+          </Form>
+        </Modal>
+        <Modal
+          title="工单详情"
+          open={this.state.showDetailModal}
+          onCancel={() => this.handleCloseDetailModal()}
+          footer={[
+            <Button key="close" onClick={() => this.handleCloseDetailModal()}>
+              关闭
+            </Button>,
+          ]}
+          width={700}
+        >
+          {!!this.state.selectedTicket && (
+            <View>
+              <View className="mb-[16px]">
+                <Text className="font-bold">工单ID：</Text>
+                <Text>{this.state.selectedTicket?.id}</Text>
+              </View>
+              <View className="mb-[16px]">
+                <Text className="font-bold">工单标题：</Text>
+                <Text>{this.state.selectedTicket?.title}</Text>
+              </View>
+              <View className="mb-[16px]">
+                <Text className="font-bold">工单描述：</Text>
+                <Text>{this.state.selectedTicket?.description}</Text>
+              </View>
+              <View className="mb-[16px]">
+                <Text className="font-bold">优先级：</Text>
+                <Text
+                  style={{
+                    color: this.getPriorityColor(
+                      this.state.selectedTicket?.priority
+                    ),
+                    fontWeight: 'bold',
+                  }}
+                >
+                  {this.state.selectedTicket?.priority}
+                </Text>
+              </View>
+              <View className="mb-[16px]">
+                <Text className="font-bold">状态：</Text>
+                <Text
+                  style={{
+                    color: this.getStatusColor(
+                      this.state.selectedTicket?.status
+                    ),
+                    fontWeight: 'bold',
+                  }}
+                >
+                  {this.state.selectedTicket?.status}
+                </Text>
+              </View>
+              <View className="mb-[16px]">
+                <Text className="font-bold">处理人：</Text>
+                <Text>{this.state.selectedTicket?.assignee}</Text>
+              </View>
+              <View className="mb-[16px]">
+                <Text className="font-bold">创建时间：</Text>
+                <Text>{this.state.selectedTicket?.createTime}</Text>
+              </View>
+            </View>
+          )}
+        </Modal>
+      </Page>
+    );
+  }
+}
+
+export default Document;