供应商退出详情问题修改

2025-07-17 11:10:57 +08:00
parent fefc069139
commit eb8f360c2c
4 changed files with 73 additions and 55 deletions
--- a/src/components/SupplierDetailModalContext/SupplierDetailModalContext.tsx
+++ b/src/components/SupplierDetailModalContext/SupplierDetailModalContext.tsx
@ -1,14 +1,14 @@
 import React, { useState } from 'react';
 import { Modal, message } from 'antd';
 import SupplierDetail from './SupplierDetail';
-
+import { useIntl } from 'umi';
 const SupplierDetailModalContext = React.createContext<((id: string) => void) | null>(null);
 export const useSupplierDetailModal = () => React.useContext(SupplierDetailModalContext);

 export const SupplierDetailModalProvider = ({ children }: { children: React.ReactNode }) => {
  const [visible, setVisible] = useState(false);
  const [supplierId, setSupplierId] = useState<string | null>(null);
-
+  const intl = useIntl();
  const showSupplierDetail = (id: string) => {
    if (!id) return message.error('此供应商信息缺失，请联系管理员');
    setSupplierId(id);
@ -18,7 +18,11 @@ export const SupplierDetailModalProvider = ({ children }: { children: React.Reac
  return (
    <SupplierDetailModalContext.Provider value={showSupplierDetail}>
      {children}
-      <Modal visible={visible} onCancel={() => setVisible(false)} footer={null}  width="90%">
+      <Modal visible={visible} onCancel={() => setVisible(false)} footer={null}  width="90%"  title={
+        <div style={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }}>
+          <span>{intl.formatMessage({ id: 'component.globalModal.title' })}</span>
+        </div>
+      }>
        <SupplierDetail supplierId={supplierId} />
      </Modal>
    </SupplierDetailModalContext.Provider>
--- a/src/pages/supplier/supplierExit/supplierExitManage/components/CreateBlacklistModal.tsx
+++ b/src/pages/supplier/supplierExit/supplierExitManage/components/CreateBlacklistModal.tsx
@ -1,9 +1,12 @@
 import React, { useEffect , useState } from "react";
-import { Modal, Button, Select, Input, Table, message, Form } from "antd";
-import SupplierSelectModal from "./SupplierSelectModal";
-import { add } from "../services";
+import { Modal, Button, Input, Table, message, Form } from "antd";
 import type { ColumnsType } from 'antd/es/table';
-const { Option } = Select;
+//组件
+import SupplierSelectModal from "./SupplierSelectModal";
+import AccessDepartmentSelect from "@/components/AccessDepartmentSelect"
+//接口
+import { add } from "../services";
+
 interface Supplier {
  id: number; // 作为 rowKey 用于唯一标识
  supplierName: string; // 供应商名称
@ -22,29 +25,31 @@ interface CreateBlacklistModalProps {
  onCancel: () => void;
 }

-const DEPT_OPTIONS = [
-  { value: "DEPT001", label: "部门A" },
-  { value: "DEPT002", label: "部门B" },
-];
-
 const CreateBlacklistModal: React.FC<CreateBlacklistModalProps> = ({
  visible,
  onOk,
  onCancel,
 }) => {
+
+  const [form] = Form.useForm();
+  // 供应商开启与选中
  const [selectVisible, setSelectVisible] = useState(false);
  const [suppliers, setSuppliers] = useState<Supplier[]>([]);
-  const [form] = Form.useForm();
-
+  // 获取缓存 用户单位ID
+  const [userDeptId, setUserDeptId] = useState('');
+  const currentUserStr = sessionStorage.getItem('currentUser');
+  const currentUser = currentUserStr ? JSON.parse(currentUserStr) : null;
+  
+  //移除已选供应商
  const removeSupplier = (id: number) => {
    setSuppliers(suppliers.filter((s) => s.id !== id));
  };
-
+  // 供应商回调
  const handleSelectOk = (selected: Supplier[]) => {
    setSuppliers(selected);
    setSelectVisible(false);
  };
-
+  //提交
  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
@ -75,15 +80,19 @@ const CreateBlacklistModal: React.FC<CreateBlacklistModalProps> = ({
        message.error("提交失败");
      }
    } catch (err) {
-      // 校验失败
    }
  };
  useEffect(() => {
    if (visible) {
      setSuppliers([]);
      form.resetFields();
+      setUserDeptId(currentUser?.user?.orgId || '');
+      // 设置表单的初始单位
+      form.setFieldsValue({ deptId: currentUser?.user?.orgId || '' });
+
    }
  }, [visible]);
+  //列表头
  const columns: ColumnsType<Supplier> = [
    { title: "供应商名称", dataIndex: "supplierName", align: "center" },
    { title: "准入部门", dataIndex: "deptId", align: "center" },
@ -127,8 +136,8 @@ const CreateBlacklistModal: React.FC<CreateBlacklistModalProps> = ({
        <div style={{ marginTop: 24 }}>
          <Form
            form={form}
-            labelCol={{ flex: '100px' }}  // label 固定宽度（也可写 'none'）
-            wrapperCol={{ flex: 1 }}      // 输入框区域自适应剩余空间
+            labelCol={{ flex: '100px' }} 
+            wrapperCol={{ flex: 1 }} 
            layout="horizontal"
          >
            <Form.Item
@ -140,15 +149,11 @@ const CreateBlacklistModal: React.FC<CreateBlacklistModalProps> = ({
            </Form.Item>

            <Form.Item
-              label="发起部门"
+              label="发起单位"
              name="deptId"
-              rules={[{ required: true, message: '请选择发起部门' }]}
+              rules={[{ required: true, message: '请选择发起单位' }]}
            >
-              <Select placeholder="请选择发起部门">
-                {DEPT_OPTIONS.map((opt) => (
-                  <Option key={opt.value} value={opt.value}>{opt.label}</Option>
-                ))}
-              </Select>
+                <AccessDepartmentSelect value={userDeptId} placeholder={'请选择发起单位'} />
            </Form.Item>

            <Form.Item
--- a/src/pages/supplier/supplierExit/supplierExitManage/components/ViewBlacklistModal.tsx
+++ b/src/pages/supplier/supplierExit/supplierExitManage/components/ViewBlacklistModal.tsx
@ -1,19 +1,22 @@
 import React, { useEffect, useState } from "react";
-import { Modal, Button, Table, Descriptions, Spin, message } from "antd";
-import {coscoSupplierexit } from "../services"; // 假设的接口
+import { Modal, Button, Table, Descriptions, Spin, message, Tooltip } from "antd";
 import type { ColumnsType } from 'antd/es/table';
-
+//umi 相关
+import { connect } from 'umi';
+//接口
+import { coscoSupplierexit } from "../services"; // 假设的接口
+import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';
 interface Supplier {
-    id: number; // 作为 rowKey 用于唯一标识
-    supplierName: string; // 供应商名称
-    unit: string;         // 准入部门
-    accessTime: string;   // 准入时间
-    categoryName: string; // 准入品类
-    lastEval: string;     // 最近一次评价
-    lastEvalDate: string; // 评价时间
-    supplierId: string;
-    categoryId: string;
-  }
+  id: string; // 作为 rowKey 用于唯一标识
+  supplierName: string; // 供应商名称
+  unit: string;         // 准入部门
+  accessTime: string;   // 准入时间
+  categoryName: string; // 准入品类
+  lastEval: string;     // 最近一次评价
+  lastEvalDate: string; // 评价时间
+  supplierId: string;
+  categoryId: string;
+}
 interface DetailData {
  exitTheme: string;
  deptName: string;
@ -35,11 +38,11 @@ const ViewBlacklistModal: React.FC<ViewBlacklistModalProps> = ({
  const [loading, setLoading] = useState(false);
  const [detail, setDetail] = useState<DetailData | null>(null);
  const [suppliers, setSuppliers] = useState<Supplier[]>([]);
-
+  const supplierDetailModal = useSupplierDetailModal();
  const fetchData = async () => {
    setLoading(true);
    try {
-      const {  code, data } = await coscoSupplierexit(recordId)
+      const { code, data } = await coscoSupplierexit(recordId)
      if (code == 200) {
        setDetail(data.coscoSupplierexit);
      } else {
@ -64,13 +67,21 @@ const ViewBlacklistModal: React.FC<ViewBlacklistModalProps> = ({
    }
  }, [visible, recordId]);

-  const columns:ColumnsType<Supplier> = [
-    { title: "供应商名称", dataIndex: "supplierName", align: "center" },
-    { title: "准入部门", dataIndex: "deptId", align: "center" },
-    // { title: "准入时间", dataIndex: "accessTime", align: "center" },
-    { title: "退出品类", dataIndex: "categoryName", align: "center" },
-    // { title: "最近一次评价", dataIndex: "lastEval", align: "center" },
-    // { title: "评价时间", dataIndex: "lastEvalDate", align: "center" },
+  const columns: ColumnsType<Supplier> = [
+    {
+      title: "供应商名称", dataIndex: "supplierName", align: "left",
+      width: 360,
+      ellipsis: true,
+      render: (dom, record) => {
+        return (
+          <Tooltip>
+            <a onClick={() => supplierDetailModal?.(record.supplierId)}>{record.supplierName || ''}</a>
+          </Tooltip>
+        )
+      }
+    },
+    { title: "准入部门", dataIndex: "deptId", align: "center", width: 160 },
+    { title: "退出品类", dataIndex: "categoryName", align: "center", width: 160 },
  ];

  return (
@ -78,7 +89,7 @@ const ViewBlacklistModal: React.FC<ViewBlacklistModalProps> = ({
      title="供应商退出详情"
      visible={visible}
      onCancel={onCancel}
-      width={900}
+      width='80%'
      footer={<Button onClick={onCancel}>关闭</Button>}
      destroyOnClose
      bodyStyle={{ padding: "36px 36px 16px" }}
@ -103,7 +114,7 @@ const ViewBlacklistModal: React.FC<ViewBlacklistModalProps> = ({
          rowKey="id"
          bordered
          pagination={false}
-          style={{ flex: 1, minHeight: 0 }}
+          style={{ flex: 1, minHeight: 'calc(100vh - 650px)' }}
          scroll={{ y: 'calc(100vh - 650px)' }}
        />
      </Spin>
@ -111,4 +122,4 @@ const ViewBlacklistModal: React.FC<ViewBlacklistModalProps> = ({
  );
 };

-export default ViewBlacklistModal;
+export default connect()(ViewBlacklistModal);
--- a/src/pages/supplier/supplierExit/supplierExitManage/index.tsx
+++ b/src/pages/supplier/supplierExit/supplierExitManage/index.tsx
@ -5,6 +5,7 @@ import type { ColumnsType } from 'antd/es/table';
 //组件
 import CreateBlacklistModal from './components/CreateBlacklistModal'
 import ViewBlacklistModal from './components/ViewBlacklistModal';
+import AccessDepartmentSelect from "@/components/AccessDepartmentSelect"
 //接口
 import { getDictList } from '@/servers/api/dicts'
 import { getPage } from './services'
@ -122,6 +123,7 @@ const supplierExitManage: React.FC = () => {
              <Input placeholder="请输入供应商名称关键字" style={{ width: 150 }} allowClear maxLength={50} />
            </Form.Item>
            <Form.Item name="deptId" label="发起单位">
+              <AccessDepartmentSelect placeholder={'请选择发起单位'} />
            </Form.Item>
            <Form.Item name="approveStatus" label="审批记录状态">
              <Select style={{ width: 150 }} placeholder="请选择审批记录状态" allowClear>
@ -130,12 +132,9 @@ const supplierExitManage: React.FC = () => {
                ))}
              </Select>
            </Form.Item>
-
            <Form.Item name="time" label="发起时间">
              <DatePicker.RangePicker style={{ width: 220 }} allowClear />
            </Form.Item>
-
-
            <Form.Item>
              <Button className="buttonSubmit" type="primary" htmlType="submit" icon={<SearchOutlined />} onClick={handleSearch} >
                搜索
@ -144,7 +143,6 @@ const supplierExitManage: React.FC = () => {
            <Form.Item>
              <Button className="buttonReset" icon={<DeleteOutlined />} onClick={handleReset} >重置</Button>
            </Form.Item>
-
            <Form.Item style={{ marginLeft: 'auto' }}>
              <Button className="buttonFunctionBlock" type="primary" onClick={handleApply} >
                发起申请