feat(设备管理): 重构设备导出功能，支持导出所有字段

refactor(字段管理): 优化字段选项编辑界面，使用可视化编辑器 refactor(工单字段管理): 重构选项编辑组件，提升用户体验 chore: 移除不再使用的设备字段选项迁移脚本
2026-03-23 14:07:40 +08:00
parent f51c39284b
commit f82b8202fe
6 changed files with 589 additions and 294 deletions
@@ -26,6 +26,8 @@ import {
  CalendarOutlined,
  FileTextOutlined,
  LockOutlined,
+  PlusCircleOutlined,
+  MinusCircleOutlined,
 } from '@ant-design/icons';
 import axios from 'axios';
 import { designTokens } from '../config/theme';
@@ -33,6 +35,161 @@ import CloseButton from '../components/CloseButton';

 const { Option = Select.Option } = Select;

+const OptionsEditor = ({ value = [], onChange }) => {
+  const handleAdd = () => {
+    onChange([...value, { value: '', label: '' }]);
+  };
+
+  const handleRemove = index => {
+    onChange(value.filter((_, i) => i !== index));
+  };
+
+  const handleUpdate = (index, field, fieldValue) => {
+    const newOptions = value.map((opt, i) =>
+      i === index ? { ...opt, [field]: fieldValue } : opt
+    );
+    onChange(newOptions);
+  };
+
+  return (
+    <div style={{
+      border: '1px solid #e8e8e8',
+      borderRadius: '12px',
+      padding: '20px',
+      background: 'linear-gradient(135deg, #fafbfc 0%, #f5f7fa 100%)',
+      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.04)',
+    }}>
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        marginBottom: '16px',
+        gap: '8px',
+      }}>
+        <div style={{
+          width: '4px',
+          height: '16px',
+          background: 'linear-gradient(180deg, #667eea 0%, #764ba2 100%)',
+          borderRadius: '2px',
+        }}/>
+        <span style={{ color: '#333', fontSize: '14px', fontWeight: '600' }}>
+          选项配置
+        </span>
+        <span style={{ color: '#999', fontSize: '12px' }}>
+          （值用于提交，标签用于显示）
+        </span>
+      </div>
+
+      {value.length === 0 ? (
+        <div style={{
+          textAlign: 'center',
+          padding: '24px',
+          background: '#fff',
+          borderRadius: '8px',
+          border: '1px dashed #d9d9d9',
+        }}>
+          <div style={{ color: '#bbb', fontSize: '14px', marginBottom: '12px' }}>
+            暂无选项
+          </div>
+          <Button
+            type="primary"
+            icon={<PlusCircleOutlined />}
+            onClick={handleAdd}
+            style={{
+              background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+              border: 'none',
+              borderRadius: '6px',
+              height: '36px',
+            }}
+          >
+            添加第一个选项
+          </Button>
+        </div>
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginBottom: '16px' }}>
+          <div style={{
+            display: 'flex',
+            gap: '12px',
+            padding: '0 4px',
+            marginBottom: '4px',
+          }}>
+            <span style={{ width: '160px', color: '#666', fontSize: '12px', fontWeight: '500' }}>值（value）</span>
+            <span style={{ width: '160px', color: '#666', fontSize: '12px', fontWeight: '500' }}>标签（label）</span>
+          </div>
+          {value.map((opt, index) => (
+            <div
+              key={index}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '12px',
+                padding: '12px',
+                background: '#fff',
+                borderRadius: '8px',
+                border: '1px solid #e8e8e8',
+                transition: 'all 0.2s ease',
+              }}
+            >
+              <div style={{
+                width: '24px',
+                height: '24px',
+                borderRadius: '50%',
+                background: 'linear-gradient(135deg, #667eea20 0%, #764ba220 100%)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: '#667eea',
+                fontSize: '12px',
+                fontWeight: '600',
+                flexShrink: 0,
+              }}>
+                {index + 1}
+              </div>
+              <Input
+                placeholder="值"
+                value={opt.value}
+                onChange={e => handleUpdate(index, 'value', e.target.value)}
+                style={{ width: '160px', borderRadius: '6px' }}
+              />
+              <Input
+                placeholder="标签"
+                value={opt.label}
+                onChange={e => handleUpdate(index, 'label', e.target.value)}
+                style={{ width: '160px', borderRadius: '6px' }}
+              />
+              <Button
+                type="text"
+                danger
+                icon={<MinusCircleOutlined />}
+                onClick={() => handleRemove(index)}
+                style={{ flexShrink: 0 }}
+              >
+                删除
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {value.length > 0 && (
+        <Button
+          type="dashed"
+          icon={<PlusCircleOutlined />}
+          onClick={handleAdd}
+          style={{
+            width: '100%',
+            height: '40px',
+            borderRadius: '8px',
+            borderColor: '#d9d9d9',
+            color: '#666',
+          }}
+        >
+          添加选项
+        </Button>
+      )}
+    </div>
+  );
+};
+
 const pageContainerStyle = {
  minHeight: '100vh',
  background: designTokens.colors.background.secondary,
@@ -176,6 +333,7 @@ function DeviceFieldManagement() {
  const [loading, setLoading] = useState(true);
  const [modalVisible, setModalVisible] = useState(false);
  const [editingField, setEditingField] = useState(null);
+  const [selectedFieldType, setSelectedFieldType] = useState('string');
  const [form] = Form.useForm();
  const [pagination, setPagination] = useState({
    current: 1,
@@ -208,11 +366,13 @@ function DeviceFieldManagement() {
    if (field) {
      const fieldData = {
        ...field,
-        options: field.options ? JSON.stringify(field.options, null, 2) : '',
+        options: field.options || [],
      };
+      setSelectedFieldType(field.fieldType || 'string');
      form.setFieldsValue(fieldData);
    } else {
      form.resetFields();
+      setSelectedFieldType('string');
    }
    setModalVisible(true);
  };
@@ -220,13 +380,21 @@ function DeviceFieldManagement() {
  const handleCancel = () => {
    setModalVisible(false);
    setEditingField(null);
+    setSelectedFieldType('string');
+  };
+
+  const handleFieldTypeChange = value => {
+    setSelectedFieldType(value);
+    if (value !== 'select') {
+      form.setFieldsValue({ options: [] });
+    }
  };

  const handleSubmit = async values => {
    try {
      const fieldData = {
        ...values,
-        options: values.options ? JSON.parse(values.options) : null,
+        options: values.options && values.options.length > 0 ? values.options : null,
      };

      if (editingField) {
@@ -240,6 +408,7 @@ function DeviceFieldManagement() {
      setModalVisible(false);
      fetchFields();
      setEditingField(null);
+      setSelectedFieldType('string');
    } catch (error) {
      message.error(editingField ? '字段更新失败' : '字段创建失败');
      console.error(editingField ? '字段更新失败:' : '字段创建失败:', error);
@@ -474,7 +643,7 @@ function DeviceFieldManagement() {
            label={<span style={formLabelStyle}>字段类型</span>}
            rules={[{ required: true, message: '请选择字段类型' }]}
          >
-            <Select placeholder="请选择字段类型">
+            <Select placeholder="请选择字段类型" onChange={handleFieldTypeChange}>
              {FIELD_TYPE_OPTIONS.map(opt => (
                <Option key={opt.value} value={opt.value}>
                  {opt.label}
@@ -511,17 +680,28 @@ function DeviceFieldManagement() {
            <InputNumber placeholder="请输入显示顺序" min={0} style={{ width: '100%' }} />
          </Form.Item>

-          <Form.Item
-            name="options"
-            label={<span style={formLabelStyle}>选项配置（JSON格式）</span>}
-            tooltip="格式示例：[{value: 'option1', label: '选项1'}]，仅下拉选择类型需要配置"
-          >
-            <Input.TextArea
-              rows={3}
-              placeholder="请输入JSON格式的选项配置，使用单引号"
-              style={textAreaStyle}
-            />
-          </Form.Item>
+          {selectedFieldType === 'select' ? (
+            <Form.Item
+              name="options"
+              label={<span style={formLabelStyle}>选项配置</span>}
+              tooltip="为下拉选择类型添加选项，值（value）用于提交数据，标签（label）用于显示"
+            >
+              <OptionsEditor />
+            </Form.Item>
+          ) : (
+            <Form.Item
+              name="options"
+              label={<span style={formLabelStyle}>选项配置</span>}
+              tooltip="仅下拉选择类型需要配置选项"
+            >
+              <Input.TextArea
+                rows={2}
+                placeholder="仅下拉选择类型需要配置，此处不可编辑"
+                disabled
+                style={{ background: '#f5f5f5' }}
+              />
+            </Form.Item>
+          )}

          <Form.Item style={formActionsStyle}>
            <Space>
@@ -478,12 +478,7 @@ function DeviceManagement() {
    setExportModalVisible(true);
  };

-  const handleEnhancedExport = async ({ format, scope, fields }) => {
-    const fieldLabels = {};
-    deviceFields.forEach((field) => {
-      fieldLabels[field.fieldName] = field.displayName;
-    });
-
+  const handleEnhancedExport = async ({ format, scope }) => {
    let deviceIds = [];
    if (scope === 'selected') {
      deviceIds = selectedDevices;
@@ -501,8 +496,6 @@ function DeviceManagement() {
    const params = new URLSearchParams();
    deviceIds.forEach((id) => params.append('deviceIds', id));
    params.append('format', format);
-    params.append('fields', JSON.stringify(fields));
-    params.append('fieldLabels', JSON.stringify(fieldLabels));

    const response = await axios.get(`/api/devices/enhanced-export?${params.toString()}`, {
      responseType: 'blob',
@@ -1221,7 +1214,6 @@ function DeviceManagement() {

      <ExportModal
        visible={exportModalVisible}
-        deviceFields={deviceFields}
        selectedDevices={selectedDevices}
        currentPageDevices={currentPageDevices}
        allDevices={allDevices}
@@ -12,17 +12,173 @@ import {
  InputNumber,
  Switch,
 } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
+import { PlusOutlined, EditOutlined, DeleteOutlined, PlusCircleOutlined, MinusCircleOutlined } from '@ant-design/icons';
 import axios from 'axios';
 import CloseButton from '../components/CloseButton';

 const { Option } = Select;

+const OptionsEditor = ({ value = [], onChange }) => {
+  const handleAdd = () => {
+    onChange([...value, { value: '', label: '' }]);
+  };
+
+  const handleRemove = index => {
+    onChange(value.filter((_, i) => i !== index));
+  };
+
+  const handleUpdate = (index, field, fieldValue) => {
+    const newOptions = value.map((opt, i) =>
+      i === index ? { ...opt, [field]: fieldValue } : opt
+    );
+    onChange(newOptions);
+  };
+
+  return (
+    <div style={{
+      border: '1px solid #e8e8e8',
+      borderRadius: '12px',
+      padding: '20px',
+      background: 'linear-gradient(135deg, #fafbfc 0%, #f5f7fa 100%)',
+      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.04)',
+    }}>
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        marginBottom: '16px',
+        gap: '8px',
+      }}>
+        <div style={{
+          width: '4px',
+          height: '16px',
+          background: 'linear-gradient(180deg, #667eea 0%, #764ba2 100%)',
+          borderRadius: '2px',
+        }}/>
+        <span style={{ color: '#333', fontSize: '14px', fontWeight: '600' }}>
+          选项配置
+        </span>
+        <span style={{ color: '#999', fontSize: '12px' }}>
+          （值用于提交，标签用于显示）
+        </span>
+      </div>
+
+      {value.length === 0 ? (
+        <div style={{
+          textAlign: 'center',
+          padding: '24px',
+          background: '#fff',
+          borderRadius: '8px',
+          border: '1px dashed #d9d9d9',
+        }}>
+          <div style={{ color: '#bbb', fontSize: '14px', marginBottom: '12px' }}>
+            暂无选项
+          </div>
+          <Button
+            type="primary"
+            icon={<PlusCircleOutlined />}
+            onClick={handleAdd}
+            style={{
+              background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+              border: 'none',
+              borderRadius: '6px',
+              height: '36px',
+            }}
+          >
+            添加第一个选项
+          </Button>
+        </div>
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginBottom: '16px' }}>
+          <div style={{
+            display: 'flex',
+            gap: '12px',
+            padding: '0 4px',
+            marginBottom: '4px',
+          }}>
+            <span style={{ width: '160px', color: '#666', fontSize: '12px', fontWeight: '500' }}>值（value）</span>
+            <span style={{ width: '160px', color: '#666', fontSize: '12px', fontWeight: '500' }}>标签（label）</span>
+          </div>
+          {value.map((opt, index) => (
+            <div
+              key={index}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '12px',
+                padding: '12px',
+                background: '#fff',
+                borderRadius: '8px',
+                border: '1px solid #e8e8e8',
+                transition: 'all 0.2s ease',
+              }}
+            >
+              <div style={{
+                width: '24px',
+                height: '24px',
+                borderRadius: '50%',
+                background: 'linear-gradient(135deg, #667eea20 0%, #764ba220 100%)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: '#667eea',
+                fontSize: '12px',
+                fontWeight: '600',
+                flexShrink: 0,
+              }}>
+                {index + 1}
+              </div>
+              <Input
+                placeholder="值"
+                value={opt.value}
+                onChange={e => handleUpdate(index, 'value', e.target.value)}
+                style={{ width: '160px', borderRadius: '6px' }}
+              />
+              <Input
+                placeholder="标签"
+                value={opt.label}
+                onChange={e => handleUpdate(index, 'label', e.target.value)}
+                style={{ width: '160px', borderRadius: '6px' }}
+              />
+              <Button
+                type="text"
+                danger
+                icon={<MinusCircleOutlined />}
+                onClick={() => handleRemove(index)}
+                style={{ flexShrink: 0 }}
+              >
+                删除
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {value.length > 0 && (
+        <Button
+          type="dashed"
+          icon={<PlusCircleOutlined />}
+          onClick={handleAdd}
+          style={{
+            width: '100%',
+            height: '40px',
+            borderRadius: '8px',
+            borderColor: '#d9d9d9',
+            color: '#666',
+          }}
+        >
+          添加选项
+        </Button>
+      )}
+    </div>
+  );
+};
+
 function TicketFieldManagement() {
  const [fields, setFields] = useState([]);
  const [loading, setLoading] = useState(true);
  const [modalVisible, setModalVisible] = useState(false);
  const [editingField, setEditingField] = useState(null);
+  const [selectedFieldType, setSelectedFieldType] = useState('string');
  const [form] = Form.useForm();

  const fetchFields = async () => {
@@ -47,11 +203,13 @@ function TicketFieldManagement() {
    if (field) {
      const fieldData = {
        ...field,
-        options: field.options ? JSON.stringify(field.options, null, 2) : '',
+        options: field.options || [],
      };
+      setSelectedFieldType(field.fieldType || 'string');
      form.setFieldsValue(fieldData);
    } else {
      form.resetFields();
+      setSelectedFieldType('string');
    }
    setModalVisible(true);
  };
@@ -59,13 +217,21 @@ function TicketFieldManagement() {
  const handleCancel = () => {
    setModalVisible(false);
    setEditingField(null);
+    setSelectedFieldType('string');
+  };
+
+  const handleFieldTypeChange = value => {
+    setSelectedFieldType(value);
+    if (value !== 'select') {
+      form.setFieldsValue({ options: [] });
+    }
  };

  const handleSubmit = async values => {
    try {
      const fieldData = {
        ...values,
-        options: values.options ? JSON.parse(values.options || '[]') : null,
+        options: values.options && values.options.length > 0 ? values.options : null,
      };

      if (editingField) {
@@ -79,6 +245,7 @@ function TicketFieldManagement() {
      setModalVisible(false);
      fetchFields();
      setEditingField(null);
+      setSelectedFieldType('string');
    } catch (error) {
      message.error(editingField ? '字段更新失败' : '字段创建失败');
      console.error(error);
@@ -226,7 +393,7 @@ function TicketFieldManagement() {
            label="字段类型"
            rules={[{ required: true, message: '请选择字段类型' }]}
          >
-            <Select placeholder="请选择字段类型">
+            <Select placeholder="请选择字段类型" onChange={handleFieldTypeChange}>
              <Option value="string">文本</Option>
              <Option value="number">数字</Option>
              <Option value="boolean">布尔值</Option>
@@ -254,13 +421,28 @@ function TicketFieldManagement() {
            <InputNumber placeholder="请输入显示顺序" min={0} style={{ width: '100%' }} />
          </Form.Item>

-          <Form.Item
-            name="options"
-            label="选项配置（仅下拉选择类型，JSON格式）"
-            tooltip="格式示例：[{value: 'option1', label: '选项1'}]"
-          >
-            <Input.TextArea rows={3} placeholder='[{"value": "option1", "label": "选项1"}]' />
-          </Form.Item>
+          {selectedFieldType === 'select' ? (
+            <Form.Item
+              name="options"
+              label="选项配置"
+              tooltip="为下拉选择类型添加选项，值（value）用于提交数据，标签（label）用于显示"
+            >
+              <OptionsEditor />
+            </Form.Item>
+          ) : (
+            <Form.Item
+              name="options"
+              label="选项配置"
+              tooltip="仅下拉选择类型需要配置选项"
+            >
+              <Input.TextArea
+                rows={2}
+                placeholder="仅下拉选择类型需要配置，此处不可编辑"
+                disabled
+                style={{ background: '#f5f5f5' }}
+              />
+            </Form.Item>
+          )}

          <Form.Item style={{ textAlign: 'right' }}>
            <Space>