feat: 送货计划协同详情补充，工具类细分

config/routes/orderRoute/deliveryPlanCollaboration.ts

@@ -34,6 +34,7 @@ const DeliveryPlanCollaboration = [
         name: '待确认送货计划详情',
         component: '@/pages/order/deliveryPlanCollaboration/deliveryPlanAwait/details',
         hideInMenu: true,
+        noMargin: true,
       },
     ],
   }

src/pages/order/components/customizedModal/index.tsx

+/**
+ *  业务定制弹窗
+ * @author: Gavin
+ * @description: 单选状态反馈选择结果, 示例应用场景: 详情页面点击提交, 弹窗选择审核状态, 是否需要填写原因。 ～～～！！！！单选模式，暂为不可异步， 待优化。
+ */
+import { Form, Input, Modal, Radio } from 'antd';
+import React, { useEffect, useState } from 'react'
+import { ModalCancelText, ModalOkText, ReasonPlaceholder, ReasonRulesMessage, SelectRadioRulesMessage } from '../translate';
+
+export interface IRadioGroup {
+  /**
+   * Radio Label
+   */
+  label: string,
+  /**
+   * Radio Value (Must be unique)
+   */
+  value: string | number,
+  /**
+   * Need to fill in the reason
+   */
+  isReason?: boolean
+}
+
+export interface SubmitFeedback {
+  /**
+   * Radio box checked value
+   */
+  selectedRadio: string | number,
+  /**
+   * Input content
+   */
+  reason?: string,
+}
+
+interface CustomizedModalProps {
+  /**
+   * (必填) 标题
+   */
+  title: string,
+  /**
+   * (必填) 是否显示
+   */
+  visible: boolean,
+  /**
+   * (必填) Radio.Group渲染数组
+   */ 
+  radioGroup: IRadioGroup[],
+  /**
+   * (必填) 内部校验通过返回
+   */
+   onSubmit: (values: SubmitFeedback) => void
+  /**
+   *  (必填)  关闭操作反馈 visible 布尔值
+   */
+  onCancel: (visible: boolean) => void
+  /**
+   * (非必填) 默认选中 Radio
+   */
+   defaultRadioValue?: string | number,
+  /**
+   *  (非必填) 确认按钮文字自定义
+   */
+  okText?: string,
+  /**
+   * (非必填)  取消按钮文字自定义
+   */
+  cancelText?: string,
+}
+
+const CustomizedModal: React.FC<CustomizedModalProps> = (props) => {
+  const [form] = Form.useForm()
+  const [visibleReason, setVisibleReason] = useState<boolean>(false)
+
+  const onOk = () => {
+    form.validateFields().then(values => {
+      props.onSubmit(values)
+    })
+  }
+
+  const onCancel = () => {
+    props.onCancel(false)
+  }
+
+  const onRadioGroupChange = (val: any) => {
+    setVisibleReason(props.radioGroup.find(_f => _f.value == val)?.isReason)
+  }
+
+  useEffect(() => {
+    if (!props.visible) {
+      form.resetFields()
+    } else {
+      if (props?.defaultRadioValue) {
+        const _visibleReason =  props.radioGroup.find(_f => _f.value === props?.defaultRadioValue)?.isReason
+        setVisibleReason(_visibleReason)
+      }
+    }
+  },[props.visible])
+
+  return (
+    <Modal
+      title={props.title}
+      visible={props.visible}
+      okText={props?.okText || ModalOkText}
+      cancelText={props?.okText || ModalCancelText}
+      onOk={onOk}
+      onCancel={onCancel}
+    >
+      <Form form={form}>
+        <Form.Item
+          name='selectedRadio'
+          initialValue={props.defaultRadioValue}
+          rules={[{ required: true, message: SelectRadioRulesMessage }]}
+        >
+          <Radio.Group onChange={(e) => onRadioGroupChange(e.target.value)}>
+            {
+              props.radioGroup?.map((item: IRadioGroup, index: number) => (
+                <Radio value={item.value} key={index}>{item.label}</Radio>
+              ))
+            }
+          </Radio.Group>
+        </Form.Item>
+        {
+          visibleReason
+            ? <Form.Item
+              name='reason'
+              rules={[{ required: true, message: ReasonRulesMessage }]}
+            >
+              <Input.TextArea allowClear rows={3} maxLength={60} placeholder={ReasonPlaceholder} />
+            </Form.Item>
+            : null
+        }
+      </Form>
+    </Modal>
+  )
+}
+CustomizedModal.defaultProps = {
+  visible: false,
+  radioGroup: [],
+  onSubmit: (values) => {},
+  onCancel: (visible) => {},
+}
+export default CustomizedModal;
\ No newline at end of file

src/pages/order/components/translate/customizedModal.ts

+export const ModalOkText = '确定'
+
+export const ModalCancelText = '取消'
+
+export const SelectRadioRulesMessage = '此选项为必选项'
+
+export const ReasonRulesMessage = '请输入您的内容'
+
+export const ReasonPlaceholder = '在此输入您的内容, 最多60字'

src/pages/order/components/translate/index.ts

+export * from './customizedModal'
\ No newline at end of file

src/pages/order/constants/anchors.ts

@@ -89,6 +89,13 @@ const DeliveryPlanAwaitDetails: AnchorsItem[] = [
   ExternalRoamRecord,
 ]
 
+const DeliveryPlanCollaborationAnchors: AnchorsItem[] = [
+  Circulation,
+  BaseInfo,
+  PlanMaterial,
+  ExternalRoamRecord,
+]
+
 export {
   BaseInfo,
   BillsInfo,
@@ -106,4 +113,5 @@ export {
   DeliveryGood,
   DeliveryPlanAwaitDetails,
   Remarks,
+  DeliveryPlanCollaborationAnchors,
 }
\ No newline at end of file

src/pages/order/deliveryNotice/manageSRM/index.tsx

@@ -18,7 +18,7 @@ import { FORM_FILTER_PATH } from '@/formSchema/const'
 import { deliveryNoticeManageSRMSchema } from './schema'
 import NoteFactoryService from '../../assets/handles/DeliveryNoteService'
 import dayjs from 'dayjs'
-import { TagStatus, TagStatusFactory } from '../../constants/status'
+import { TagStatus, TagStatusFactory } from '../../utils'
 
 const DeliveryNoticeManageSRM: React.FC = () => {
   const ref = useRef<any>({})

src/pages/order/deliveryPlanCollaboration/deliveryPlanAwait/details.tsx

@@ -3,23 +3,88 @@
  * @author: Gavin
  * @description: 
  */
- import React, { useState } from 'react'
- import { PageHeaderWrapper } from '@ant-design/pro-layout'
- import { history } from 'umi'
- import ReutrnEle from '@/components/ReturnEle'
+import React, { useState } from 'react'
+import AnchorPage, { AnchorsItem } from '@/components/AnchorPage'
+import { history } from 'umi'
+import { Button, Space, Steps, Table, Tag } from 'antd'
+import { CheckCircleOutlined } from '@ant-design/icons'
+import { DeliveryPlanCollaborationAnchors, Circulation, BaseInfo as base_Info, Purchaser, SubmitDeliveryPlan, Supplier, ConfirmDeliveryPlan, PlanNumber, SupplyMember, PlanSummary, PlanningCycle, ExternalState, PlanMaterial, ExternalRoamRecord, } from '../../constants'
+import BaseInfo from '@/components/BaseInfo/BaseInfo'
+import { ExternalRoamRecordTableColumn } from '../../constants/page-table-column'
+import CustomizedModal, { SubmitFeedback } from '../../components/customizedModal'
 
- const DeliveryPlanCollaborationAwaitDetails: React.FC = () => {
+const DeliveryPlanCollaborationAwaitDetails: React.FC = () => {
+  const [iAnchors, setiAnchors] = useState<AnchorsItem[]>(DeliveryPlanCollaborationAnchors)
   const [details, setDetails] = useState<any>({})
-  
-  return (
-    <PageHeaderWrapper
-      title={details?.name}
+  const [modalVisible, setModalVisible] = useState<boolean>(false)
+
+  const modalSubmint = (values: SubmitFeedback) => {
+    console.log('modalSubmint -> values :>> ', values)
+  }
+
+  return (<>
+    <AnchorPage
+      title={details?.name || '没有title'}
       onBack={() => history.goBack()}
-      backIcon={<ReutrnEle />}
+      anchors={iAnchors}
+      extra={
+        <Space>
+          {/* 条件渲染 */}
+          <Button type='primary' icon={<CheckCircleOutlined />} onClick={() => { setModalVisible(true) }}>提交</Button>
+        </Space>
+      }
     >
-      <div>送货计划协同 - 待确认送货计划详情</div>
-    </PageHeaderWrapper>
-  )
+      <BaseInfo className='mt-0' title={Circulation.name} id={Circulation.key} cols={1}>
+        <Steps progressDot current={0}>
+          <Steps.Step title={Purchaser} description={SubmitDeliveryPlan} />
+          <Steps.Step title={Supplier} description={ConfirmDeliveryPlan} />
+        </Steps>
+      </BaseInfo>
+      <BaseInfo className='mt-16' title={base_Info.name} id={base_Info.key}>
+        <BaseInfo.BaseInfoItem label={PlanNumber}>
+          DL2014070100001
+        </BaseInfo.BaseInfoItem>
+        <BaseInfo.BaseInfoItem label={SupplyMember}>
+          温州龙昌手袋有限公司
+        </BaseInfo.BaseInfoItem>
+        <BaseInfo.BaseInfoItem label={PlanSummary}>
+          2014-07-01~2014-07-31 广州白马皮具交易中心送货计划
+        </BaseInfo.BaseInfoItem>
+        <BaseInfo.BaseInfoItem label={PlanningCycle}>
+          2020-08-25 至 2020-10-25
+        </BaseInfo.BaseInfoItem>
+        <BaseInfo.BaseInfoItem label={ExternalState}>
+          <Tag color='green'>已提交</Tag>
+        </BaseInfo.BaseInfoItem>
+      </BaseInfo>
+      <BaseInfo className='mt-16' title={PlanMaterial.name} id={PlanMaterial.key} cols={1}>
+        计划送货物料
+      </BaseInfo>
+      <BaseInfo className='mt-16' title={ExternalRoamRecord.name} id={ExternalRoamRecord.key} cols={1}>
+        <Table
+          rowKey={'id'}
+          dataSource={[{
+            id: '1',
+            'name1': '1',
+            'name2': '操作角色',
+            'name3': '状态',
+            'name4': '操作',
+            'name5': '操作时间',
+            'name6': '备注',
+          },]}
+          columns={ExternalRoamRecordTableColumn}
+        />
+      </BaseInfo>
+    </AnchorPage>
+    <CustomizedModal
+      title='确认送货计划'
+      visible={modalVisible}
+      defaultRadioValue={1}
+      radioGroup={[{ label: '确认', value: 1, isReason: false }, { label: '不确认', value: 2, isReason: true }]}
+      onSubmit={(values) => modalSubmint(values)}
+      onCancel={(visible: boolean) => setModalVisible(visible)}
+    />
+  </>)
 }
 
 export default DeliveryPlanCollaborationAwaitDetails
\ No newline at end of file

src/pages/order/deliveryPlanCollaboration/deliveryPlanQuery/details.tsx

@@ -6,17 +6,14 @@
 import React, { useState } from 'react'
 import AnchorPage, { AnchorsItem } from '@/components/AnchorPage'
 import { history } from 'umi'
-import { Input, Steps, Table, Tag } from 'antd'
-import { BaseInfo as base_Info, Circulation, ConfirmDeliveryPlan, DeliveryPlanAwaitDetails, ExternalRoamRecord, ExternalState, PlanMaterial, PlanningCycle, PlanNumber, PlanSummary, Purchaser, Remarks, SubmitDeliveryPlan, Supplier, SupplyMember, SupplyMembersLabel } from '../../constants'
+import { Button, Space, Steps, Table, Tag } from 'antd'
+import { DeliveryPlanCollaborationAnchors, BaseInfo as base_Info, Circulation, ConfirmDeliveryPlan, ExternalRoamRecord, ExternalState, PlanMaterial, PlanningCycle, PlanNumber, PlanSummary, Purchaser, Remarks, SubmitDeliveryPlan, Supplier, SupplyMember, SupplyMembersLabel } from '../../constants'
+import { CheckCircleOutlined } from '@ant-design/icons'
 import BaseInfo from '@/components/BaseInfo/BaseInfo'
 import { ExternalRoamRecordTableColumn } from '../../constants/page-table-column'
 
-const formItemLayout = {
-  labelCol: { span: 3 },
-  wrapperCol: { span: 18 }
-}
 const DeliveryPlanCollaborationDetails: React.FC = () => {
-  const [iAnchors, setiAnchors] = useState<AnchorsItem[]>(DeliveryPlanAwaitDetails)
+  const [iAnchors, setiAnchors] = useState<AnchorsItem[]>(DeliveryPlanCollaborationAnchors)
   const [details, setDetails] = useState<any>({})
 
   return (
@@ -24,6 +21,13 @@ const DeliveryPlanCollaborationDetails: React.FC = () => {
       title={details?.name || '没有title'}
       onBack={() => history.goBack()}
       anchors={iAnchors}
+      extra={
+        <Space>
+          {/* 条件渲染 */}
+          <Button type='primary' icon={<CheckCircleOutlined />}>生成通知单</Button>
+          <Button type='primary' icon={<CheckCircleOutlined />}>生成送货单</Button>
+        </Space>
+      }
     >
       <BaseInfo className='mt-0' title={Circulation.name} id={Circulation.key} cols={1}>
         <Steps progressDot current={0}>
@@ -51,7 +55,6 @@ const DeliveryPlanCollaborationDetails: React.FC = () => {
       <BaseInfo className='mt-16' title={PlanMaterial.name} id={PlanMaterial.key} cols={1}>
         计划送货物料
       </BaseInfo>
-
       <BaseInfo className='mt-16' title={ExternalRoamRecord.name} id={ExternalRoamRecord.key} cols={1}>
         <Table
           rowKey={'id'}

src/pages/order/deliveryPlanManagement/deliveryPlanQuery/index.tsx

@@ -14,7 +14,7 @@ import { createFormActions } from '@formily/antd'
 import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch'
 import { FORM_FILTER_PATH } from '@/formSchema/const'
 import { deliveryPlanManagementQuerySchema } from './schema'
-import { TagStatus } from '../../constants/status'
+import { TagStatus } from '../../utils'
 
 const tagStatus = new TagStatus()
 

src/pages/order/utils/index.ts

+export * from './status'
\ No newline at end of file

src/pages/order/utils/status.ts

+interface StatusStyle {
+  bgColor: string,
+  fontColor: string
+}
+interface StatusStyleItem {
+  [key: string]: StatusStyle
+}
+
+/**
+ *  状态描述
+ * - default: 默认
+ * - toSbumit: 待提交
+ * - toBeConfirmed: 待确认
+ * - toBeModified: 待修改
+ * - confirmed: 已确认
+ * - generated: 已确认
+ * - voided: 已确认
+ */
+enum StatusEnum {
+  Default = 1,
+  ToSbumit = 2,
+  ToBeConfirmed = 3,
+  ToBeModified = 4,
+  Confirmed = 5,
+  Generated = 6,
+  Voided = 7,
+}
+
+class TagStatus {
+
+  /**
+   * 默认的Sytle集合 具体情况，看StatusEnum
+   */
+  #tagStatusColor: StatusStyleItem = {
+    [StatusEnum.Default]: this.defaultStatusStyle(),
+    [StatusEnum.ToSbumit]: this.toSbumitStatusStyle(),
+    [StatusEnum.ToBeConfirmed]: this.toBeConfirmedStyle(),
+    [StatusEnum.ToBeModified]: this.toBeConfirmedStyle(),
+    [StatusEnum.Confirmed]: this.confirmedStyle(),
+    [StatusEnum.Generated]: this.generatedStyle(),
+    [StatusEnum.Voided]: this.voidedStyle(),
+  }
+
+  defaultStatusStyle() {
+    return { bgColor: '#f2f4f5', fontColor: '#000' }
+  }
+
+  toSbumitStatusStyle() {
+    return { bgColor: '#f4f5f7', fontColor: '#5c626a' };
+  }
+
+  toBeConfirmedStyle() {
+    return { bgColor: '#ecf2fe', fontColor: '#4787f0' };
+  }
+
+  toBeModifiedStyle() {
+    return { bgColor: '#eae6ff', fontColor: '#9963d8' }
+  }
+
+  confirmedStyle() {
+    return { bgColor: '#ebf9f6', fontColor: '#00a98f' }
+  }
+
+  generatedStyle() {
+    return { bgColor: '#f0f5ff', fontColor: '#f0f5ff' }
+  }
+
+  voidedStyle() {
+    return { bgColor: '#fff2f0', fontColor: '#ff4d4f' }
+  }
+
+  /**
+   * 设置Style的属性，相同的key会覆盖
+   * @param status 
+   * @param value 
+   */
+  setStyleToCollection(status: string | number, value: StatusStyle) {
+    this.#tagStatusColor = {
+      ...this.#tagStatusColor,
+      [status]: value
+    }
+  }
+
+  /**
+   * 获取Tag Style属性
+   * @param status 后台的状态值
+   * @param value 
+   */
+  getTagStyle(status: string | number) {
+    return this.#tagStatusColor[status] ? this.#tagStatusColor[status] : this.defaultStatusStyle();
+  }
+
+}
+
+class TagStatusFactory {
+  static getInstance(){
+    return new TagStatus();
+  }
+}
+
+export {
+  TagStatus,
+  TagStatusFactory
+}
\ No newline at end of file