From fec096d44749e20445ab20ba289b4fdfe08fd6f9 Mon Sep 17 00:00:00 2001
From: vincentlu <t1341870251@gmail.com>
Date: 星期一, 15 十二月 2025 16:37:34 +0800
Subject: [PATCH] #

---
 zy-acs-flow/src/map/areaSettings/AreaBasicTab.jsx |   91 ++++++++++++++++++++++++++++++++++++---------
 zy-acs-flow/src/map/areaSettings/index.jsx        |    3 -
 2 files changed, 73 insertions(+), 21 deletions(-)

diff --git a/zy-acs-flow/src/map/areaSettings/AreaBasicTab.jsx b/zy-acs-flow/src/map/areaSettings/AreaBasicTab.jsx
index d6d6463..2af650d 100644
--- a/zy-acs-flow/src/map/areaSettings/AreaBasicTab.jsx
+++ b/zy-acs-flow/src/map/areaSettings/AreaBasicTab.jsx
@@ -7,6 +7,7 @@
     Box,
     Autocomplete,
     Checkbox,
+    Chip,
 } from '@mui/material';
 import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
@@ -18,7 +19,7 @@
     agvOptions,
     agvList,
     setAgvList,
-    codeListText,
+    codeList,
     onSave,
     disableSave,
 }) => {
@@ -27,17 +28,39 @@
     const checkedIcon = <CheckBoxIcon fontSize="small" />;
 
     const getOptionLabel = (option) => {
-        if (typeof option === 'string') {
-            return option;
+        if (option == null) {
+            return '';
         }
-        return option?.label ?? option?.name ?? option?.agvNo ?? option?.value ?? option?.id ?? '';
+        if (typeof option === 'string' || typeof option === 'number') {
+            return String(option);
+        }
+        const label =
+            option?.label ??
+            option?.uuid ??
+            option?.name ??
+            option?.agvNo ??
+            option?.value ??
+            option?.id ??
+            '';
+        return label != null ? String(label) : '';
     };
 
     const getOptionId = (option) => {
-        if (typeof option === 'string') {
-            return option;
+        if (option == null) {
+            return '';
         }
-        return option?.value ?? option?.id ?? option?.agvNo ?? option?.code ?? option?.name ?? '';
+        if (typeof option === 'string' || typeof option === 'number') {
+            return String(option);
+        }
+        const identifier =
+            option?.value ??
+            option?.id ??
+            option?.uuid ??
+            option?.agvNo ??
+            option?.code ??
+            option?.name ??
+            '';
+        return identifier != null ? String(identifier) : '';
     };
 
     return (
@@ -45,6 +68,7 @@
             <Stack direction="row" spacing={1} alignItems="center">
                 <TextField
                     label={translate('page.map.area.name', { _: '鍚嶇О' })}
+                    size="small"
                     fullWidth
                     value={name}
                     onChange={(e) => setName(e.target.value)}
@@ -65,24 +89,53 @@
                     onChange={(event, newValue) => {
                         setAgvList(newValue);
                     }}
-                    renderOption={(props, option, { selected }) => (
-                        <li {...props}>
-                            <Checkbox
-                                icon={icon}
-                                checkedIcon={checkedIcon}
-                                style={{ marginRight: 8 }}
-                                checked={selected}
+                    renderTags={(value, getTagProps) =>
+                        value.map((option, index) => (
+                            <Chip
+                                {...getTagProps({ index })}
+                                key={getOptionId(option)}
+                                label={getOptionLabel(option)}
+                                size="small"
+                                sx={{ mr: 0.5 }}
                             />
-                            {getOptionLabel(option)}
-                        </li>
-                    )}
+                        ))
+                    }
+                    ListboxProps={{
+                        sx: {
+                            maxHeight: 240,
+                            '& .MuiAutocomplete-option': { py: 0.5, fontSize: 13 },
+                        },
+                    }}
+                    renderOption={(props, option, { selected }) => {
+                        const { key, ...optionProps } = props;
+                        return (
+                            <li
+                                key={key}
+                                {...optionProps}
+                                style={{
+                                    fontSize: 13,
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    ...(optionProps.style || {}),
+                                }}
+                            >
+                                <Checkbox
+                                    icon={icon}
+                                    checkedIcon={checkedIcon}
+                                    sx={{ mr: 1, '& .MuiSvgIcon-root': { fontSize: 18 } }}
+                                    checked={selected}
+                                />
+                                <Typography variant="body2">{getOptionLabel(option)}</Typography>
+                            </li>
+                        );
+                    }}
                     renderInput={(params) => (
                         <TextField
                             {...params}
+                            size="small"
                             placeholder={translate('page.map.area.agv.placeholder', { _: '閫夋嫨AGV' })}
                         />
                     )}
-                    ListboxProps={{ sx: { maxHeight: 280 } }}
                 />
             </Box>
 
@@ -96,7 +149,7 @@
                     multiline
                     minRows={6}
                     maxRows={10}
-                    value={codeListText}
+                    value={(codeList || []).join('\n')}
                     InputProps={{ readOnly: true }}
                 />
             </Box>
diff --git a/zy-acs-flow/src/map/areaSettings/index.jsx b/zy-acs-flow/src/map/areaSettings/index.jsx
index bd0e797..4553f42 100644
--- a/zy-acs-flow/src/map/areaSettings/index.jsx
+++ b/zy-acs-flow/src/map/areaSettings/index.jsx
@@ -132,7 +132,6 @@
         // placeholder for save logic
     };
 
-    const codeListText = (codeList || []).join('\n');
     const basicDirty = name !== initialBasic.name
         || !areAgvSelectionsEqual(
             agvList.map(getAgvOptionId),
@@ -198,7 +197,7 @@
                                                 agvOptions={agvOptions}
                                                 agvList={agvList}
                                                 setAgvList={setAgvList}
-                                                codeListText={codeListText}
+                                                codeList={codeList}
                                                 onSave={handleSaveBasic}
                                                 disableSave={!basicDirty}
                                             />

--
Gitblit v1.9.1