perf: 整合原来 CustomerProfile 界面；调整批量操作按钮

src/components/OrderProfile.jsx

@@ -10,17 +10,27 @@ import {
   DeleteOutlined, ClockCircleOutlined,
   FormOutlined
 } from '@ant-design/icons'
+
+import { useCallback, useEffect, useState } from 'react'
 import {
-  Flex,
+  Flex,Select,Tooltip,
   Button, Space, Divider, Typography,
-  Input
+  Input, Radio,Drawer,Checkbox,
 } from 'antd'
 import { InboxIcon, MailCheckIcon, MailUnreadIcon, SendPlaneFillIcon } from '@/components/Icons'
-
+import { useOrderStore, OrderLabelDefaultOptions, OrderStatusDefaultOptions, remindStatusOptions, fetchSetRemindStateAction, remindStatusOptionsMapped } from "@/stores/OrderStore";
+import { copy, isEmpty } from "@/utils/commons";
 const OrderProfile = (props) => {
+
+    const orderLabelOptions = copy(OrderLabelDefaultOptions);
+    orderLabelOptions.unshift({ value: 0, label: "未设置", disabled: true });
+
+	const orderStatusOptions = copy(OrderStatusDefaultOptions);
+
+    const [openOrder, setOpenOrder] = useState(false)
   return (
     <>
-      <Flex gap={6} vertical={true} justify='space-between'>
+      <Flex gap='small' vertical={true} justify='space-between'>
         <Typography.Text>
           <FieldNumberOutlined className='pr-1' />
           LSS250501006
@@ -63,10 +73,46 @@ const OrderProfile = (props) => {
           <span>外联备注：</span>
           泰国马来水灯节
         </Typography.Text>
+        <Divider orientation="left">
+            <Typography.Text strong>订单状态</Typography.Text>
+          </Divider>
+      <Select className={`[&_.ant-select-selection-item]:text-gray-950`}
+								key={"orderlabel"}
+								size="small"
+								style={{
+									width: "100%",
+								}}
+								variant="underlined"
+								onSelect={value => {
+								}}
+								value={0}
+								options={orderLabelOptions}
+							/>
+
+              <Select className={`[&_.ant-select-selection-item]:text-gray-950`}
+								key={"orderstatus"}
+								size="small"
+								style={{
+									width: "100%",
+								}}
+								variant="underlined"
+								onSelect={value => {
+								}}
+								value={1}
+								options={orderStatusOptions}
+							/>
+
       </Flex>
+              <Divider orientation="left">
+            <Typography.Text strong>催信</Typography.Text>
+          </Divider>
+          <Checkbox.Group key='substatus' className="px-2"  options={remindStatusOptions}  />
+
       <Divider orientation='left'>
         <Typography.Text strong>表单信息</Typography.Text>
+        <Tooltip title='添加'>
         <FileAddOutlined className='pl-1' />
+        </Tooltip>
       </Divider>
       <p
         className='p-2 overflow-auto m-0 break-words whitespace-pre-wrap'
@@ -74,20 +120,16 @@ const OrderProfile = (props) => {
           __html:
             'orderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detail',
         }}></p>
-      <Space.Compact block>
-        <Input addonBefore='附加信息' />
-        <Button icon={<SaveOutlined />} />
-      </Space.Compact>
-      <Flex gap='small'>
-        <Button
-          color='cyan'
-          variant='outlined'
-          onClick={() => {
-            // setOpenOrder(true)
-          }}>
-          订单状态
-        </Button>
-      </Flex>
+
+      <Divider orientation='left'>
+        <Typography.Text strong>附加信息</Typography.Text>
+        <Tooltip title='修改'>
+        <FileAddOutlined className='pl-1' />
+        </Tooltip>
+      </Divider>
+      <Typography.Text>
+          泰国马来水灯节
+        </Typography.Text>
     </>
   )
 }

src/views/orders/Follow.jsx

@@ -78,7 +78,6 @@ function Follow() {
   const orderList = useOrderStore((state) => state.orderList)
   const fetchOrderList = useOrderStore((state) => state.fetchOrderList)
 
-  const [openOrder, setOpenOrder] = useState(false)
   const [collapsed, setCollapsed] = useState(false)
 
   const [loginUser, isPermitted] = useAuthStore((state) => [state.loginUser, state.isPermitted])
@@ -263,57 +262,6 @@ function Follow() {
           <OrderProfile />
         </Layout.Sider>
       </Layout>
-
-      <Drawer
-        title={'订单状态'}
-        placement='right'
-        // getContainer={false}
-        size={'large'}
-        mask={false}
-        maskClosable={true}
-        open={openOrder}
-        onClose={() => setOpenOrder(false)}>
-        <Divider orientation='left'>
-          <Typography.Text strong>是否重要</Typography.Text>
-        </Divider>
-        <Radio.Group
-          options={[
-            { label: '重点', value: '1' },
-            { label: '次重点', value: '2' },
-            { label: '一般', value: '3' },
-          ]}
-        />
-
-        <Divider orientation='left'>
-          <Typography.Text strong>状态</Typography.Text>
-        </Divider>
-        <Radio.Group
-          options={[
-            { label: '新订单', value: '4' },
-            { label: '报价中', value: '5' },
-            { label: '以后联系', value: '6' },
-            { label: '等待付订金', value: '7' },
-            { label: '成行', value: '8' },
-            { label: '丢失', value: '9' },
-            { label: '取消', value: '10' },
-            { label: '未报价', value: '11' },
-          ]}
-        />
-
-        <Divider orientation='left'>
-          <Typography.Text strong> 催信</Typography.Text>
-        </Divider>
-        <Checkbox.Group
-          options={[
-            { label: '一催', value: 'Apple', className: 'label-1' },
-            { label: '二催', value: 'Pear', className: 'label-2' },
-            { label: '三催', value: 'Orange', className: 'label-3' },
-            { label: '重点团', value: '2233342', className: 'label-3' },
-            { label: '已发 travel advisor survey', value: '43535', className: 'label-3' },
-          ]}
-          defaultValue={['Apple']}
-        />
-      </Drawer>
     </>
   )
 }

src/views/orders/components/MailBox.jsx

@@ -1,3 +1,5 @@
+
+import { useCallback, useEffect, useState } from 'react'
 import {
   ReloadOutlined,
   ReadOutlined, CheckSquareOutlined
@@ -5,11 +7,12 @@ import {
 import {
   Flex,
   Button, Tooltip,
-  List,
+  List,Radio,Typography,Divider,Drawer,
   Dropdown, Input, Checkbox
 } from 'antd'
 
 const MailBox = (props) => {
+    const [openOrder, setOpenOrder] = useState(false)
   return (
     <>
       <div className='bg-white h-auto px-1 flex gap-1 items-center'>
@@ -56,18 +59,8 @@ const MailBox = (props) => {
           }}>
           新邮件
         </Dropdown.Button>
-        <Input.Search
-          className=''
-          allowClear
-          onChange={(e) => {}}
-          onPressEnter={(e) => {
-            return false
-          }}
-          placeholder={`邮件主题`}
-        />
-        <Button onClick={() => {}}>高级搜索</Button>
-        <Flex wrap gap='small'>
-          <Tooltip title='选择'>
+        <Flex wrap gap='middle' justify={'center'} className='min-w-40'>
+          <Tooltip title='全选'>
             <Checkbox></Checkbox>
           </Tooltip>
           <Tooltip title='标记已读'>
@@ -80,6 +73,16 @@ const MailBox = (props) => {
             <Button shape='circle' type='text' size='small' icon={<ReloadOutlined />} />
           </Tooltip>
         </Flex>
+        <Input.Search
+          className=''
+          allowClear
+          onChange={(e) => {}}
+          onPressEnter={(e) => {
+            return false
+          }}
+          placeholder={`邮件主题`}
+        />
+        <Button onClick={() => {setOpenOrder(true)}}>高级搜索</Button>
       </div>
 
       <div className='bg-white overflow-y-auto' style={{ height: 'calc(100vh - 198px)' }}>
@@ -214,6 +217,57 @@ const MailBox = (props) => {
           )}
         />
       </div>
+
+      <Drawer
+        title={'高级搜索'}
+        placement='right'
+        getContainer={false}
+        size={'large'}
+        mask={true}
+        maskClosable={true}
+        open={openOrder}
+        onClose={() => setOpenOrder(false)}>
+        <Divider orientation='left'>
+          <Typography.Text strong>是否重要</Typography.Text>
+        </Divider>
+        <Radio.Group
+          options={[
+            { label: '重点', value: '1' },
+            { label: '次重点', value: '2' },
+            { label: '一般', value: '3' },
+          ]}
+        />
+
+        <Divider orientation='left'>
+          <Typography.Text strong>状态</Typography.Text>
+        </Divider>
+        <Radio.Group
+          options={[
+            { label: '新订单', value: '4' },
+            { label: '报价中', value: '5' },
+            { label: '以后联系', value: '6' },
+            { label: '等待付订金', value: '7' },
+            { label: '成行', value: '8' },
+            { label: '丢失', value: '9' },
+            { label: '取消', value: '10' },
+            { label: '未报价', value: '11' },
+          ]}
+        />
+
+        <Divider orientation='left'>
+          <Typography.Text strong> 催信</Typography.Text>
+        </Divider>
+        <Checkbox.Group
+          options={[
+            { label: '一催', value: 'Apple', className: 'label-1' },
+            { label: '二催', value: 'Pear', className: 'label-2' },
+            { label: '三催', value: 'Orange', className: 'label-3' },
+            { label: '重点团', value: '2233342', className: 'label-3' },
+            { label: '已发 travel advisor survey', value: '43535', className: 'label-3' },
+          ]}
+          defaultValue={['Apple']}
+        />
+      </Drawer>
     </>
   )
 }