From 6ce4e857abf8f28b04d9663c4e2541448d20ab16 Mon Sep 17 00:00:00 2001
From: yy <3078169442@qq.com>
Date: Thu, 24 Apr 2025 18:37:17 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E7=B2=BE=E9=80=89=E6=8F=8F=E8=BF=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Application/Preproducts/edit.tsx  | 268 ++++++------
 src/pages/Application/Preproducts/index.tsx | 454 ++++++++++----------
 src/types/application/preproducts.d.ts      |  51 +--
 3 files changed, 399 insertions(+), 374 deletions(-)

diff --git a/src/pages/Application/Preproducts/edit.tsx b/src/pages/Application/Preproducts/edit.tsx
index 21b29ee..b668dca 100644
--- a/src/pages/Application/Preproducts/edit.tsx
+++ b/src/pages/Application/Preproducts/edit.tsx
@@ -1,128 +1,140 @@
-import { useEffect, useState } from 'react';
-import {
-  ModalForm,
-  ProForm,
-  ProFormDigit,
-  ProFormRadio,
-  ProFormSelect,
-  ProFormText,
-} from '@ant-design/pro-components';
-import { Form } from 'antd';
-import { DictValueEnumObj } from '@/components/DictTag';
-
-export type ListFormProps = {
-  onCancel: (flag?: boolean, formVals?: unknown) => void;
-  onSubmit: (values: API.ApplicationProducts.Product) => Promise<void>;
-  open: boolean;
-  values?: Partial<API.ApplicationProducts.Product>;
-  // jobGroupOptions: DictOptionType[];
-  companyLabelEnum?: DictValueEnumObj;
-  companyNatureEnum?: DictValueEnumObj;
-  enableStatusEnum?: DictValueEnumObj;
-};
-
-const waitTime = (time: number = 100) => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(true);
-    }, time);
-  });
-};
-
-const listEdit: React.FC<ListFormProps> = (props) => {
-  const [form] = Form.useForm();
-  const [colorHex, setColorHex] = useState('#3b82f6');
-  const { companyNatureEnum, companyLabelEnum, enableStatusEnum } = props;
-
-  useEffect(() => {
-    form.resetFields();
-    if (props.values) {
-      form.setFieldsValue({
-        ...props.values,
-        status: String(props.values.status),
-      });
-      setColorHex(props.values.backgroudColor);
-    }
-  }, [form, props]);
-
-  const handleCancel = () => {
-    props.onCancel();
-    form.resetFields();
-  };
-
-  const handleFinish = async (values: Record<string, any>) => {
-    // console.log(colorHex, values.backgroudColor);
-    if (typeof colorHex === 'string') {
-      values.backgroudColor = colorHex;
-    } else {
-      values.backgroudColor = values.backgroudColor.toHexString();
-    }
-    props.onSubmit(values as API.ApplicationProducts.Product);
-  };
-  return (
-    <ModalForm<{
-      name: string;
-      company: string;
-    }>
-      title={`${props.values ? '编辑' : '新增'}企业`}
-      form={form}
-      autoFocusFirstInput
-      open={props.open}
-      modalProps={{
-        destroyOnClose: true,
-        onCancel: () => handleCancel(),
-      }}
-      submitTimeout={2000}
-      onFinish={handleFinish}
-      initialValues={{
-        cardOrder: 0,
-        status: '0',
-      }}
-    >
-      <ProFormDigit label="InputNumber" name="companyCardId" disabled hidden={true} />
-      <ProForm.Group>
-        <ProFormText width="md" name="name" label="卡片名称" placeholder="请输入卡片名称" />
-        <ProFormSelect
-          width="md"
-          name="backgroudColor"
-          label="卡片背景色"
-          valueType="color"
-          disabledAlpha
-          placeholder="请选择单位规模"
-          fieldProps={{
-            value: colorHex,
-            onChange: (e) => setColorHex(e),
-          }}
-        />
-        {/*<span>HEX: {colorHex.}</span>*/}
-      </ProForm.Group>
-      <ProForm.Group>
-        <ProFormSelect
-          width="md"
-          name="companyNature"
-          label="企业性质"
-          valueEnum={companyNatureEnum}
-          placeholder="请选择企业性质"
-        />
-        <ProFormSelect
-          width="md"
-          name="targ"
-          label="企业标签"
-          valueEnum={companyLabelEnum}
-          placeholder="请选择企业标签"
-        />
-      </ProForm.Group>
-      <ProForm.Group>
-        <ProFormDigit width="md" label="排序" name="cardOrder" min={0} />
-        <ProFormRadio.Group
-          valueEnum={enableStatusEnum}
-          name="status"
-          label="启用状态"
-          width="md"
-        />
-      </ProForm.Group>
-    </ModalForm>
-  );
-};
-
-export default listEdit;
+import { useEffect, useState } from 'react';
+import {
+  ModalForm,
+  ProForm,
+  ProFormDigit,
+  ProFormRadio,
+  ProFormSelect,
+  ProFormText,
+} from '@ant-design/pro-components';
+import { Form,Input } from 'antd';
+import { DictValueEnumObj } from '@/components/DictTag';
+
+export type ListFormProps = {
+  onCancel: (flag?: boolean, formVals?: unknown) => void;
+  onSubmit: (values: API.ApplicationProducts.Product) => Promise<void>;
+  open: boolean;
+  values?: Partial<API.ApplicationProducts.Product>;
+  // jobGroupOptions: DictOptionType[];
+  companyLabelEnum?: DictValueEnumObj;
+  companyNatureEnum?: DictValueEnumObj;
+  enableStatusEnum?: DictValueEnumObj;
+};
+
+const waitTime = (time: number = 100) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, time);
+  });
+};
+
+const listEdit: React.FC<ListFormProps> = (props) => {
+  const [form] = Form.useForm();
+  const [colorHex, setColorHex] = useState('#3b82f6');
+  const { companyNatureEnum, companyLabelEnum, enableStatusEnum } = props;
+
+  useEffect(() => {
+    form.resetFields();
+    if (props.values) {
+      form.setFieldsValue({
+        ...props.values,
+        status: String(props.values.status),
+      });
+      setColorHex(props.values.backgroudColor);
+    }
+  }, [form, props]);
+
+  const handleCancel = () => {
+    props.onCancel();
+    form.resetFields();
+  };
+
+  const handleFinish = async (values: Record<string, any>) => {
+    // console.log(colorHex, values.backgroudColor);
+    if (typeof colorHex === 'string') {
+      values.backgroudColor = colorHex;
+    } else {
+      values.backgroudColor = values.backgroudColor.toHexString();
+    }
+    props.onSubmit(values as API.ApplicationProducts.Product);
+  };
+  return (
+    <ModalForm<{
+      name: string;
+      company: string;
+    }>
+      title={`${props.values ? '编辑' : '新增'}企业`}
+      form={form}
+      autoFocusFirstInput
+      open={props.open}
+      modalProps={{
+        destroyOnClose: true,
+        onCancel: () => handleCancel(),
+      }}
+      submitTimeout={2000}
+      onFinish={handleFinish}
+      initialValues={{
+        cardOrder: 0,
+        status: '0',
+      }}
+    >
+      <ProFormDigit label="InputNumber" name="companyCardId" disabled hidden={true} />
+      <ProForm.Group>
+        <ProFormText width="md" name="name" label="卡片名称" placeholder="请输入卡片名称" />
+        <ProFormSelect
+          width="md"
+          name="backgroudColor"
+          label="卡片背景色"
+          valueType="color"
+          disabledAlpha
+          placeholder="请选择单位规模"
+          fieldProps={{
+            value: colorHex,
+            onChange: (e) => setColorHex(e),
+          }}
+        />
+        {/*<span>HEX: {colorHex.}</span>*/}
+      </ProForm.Group>
+      <ProForm.Group>
+        <ProFormSelect
+          width="md"
+          name="companyNature"
+          label="企业性质"
+          valueEnum={companyNatureEnum}
+          placeholder="请选择企业性质"
+        />
+        <ProFormSelect
+          width="md"
+          name="targ"
+          label="企业标签"
+          valueEnum={companyLabelEnum}
+          placeholder="请选择企业标签"
+        />
+      </ProForm.Group>
+      <ProForm.Group>
+        <ProFormDigit width="md" label="排序" name="cardOrder" min={0} />
+        <ProFormRadio.Group
+          valueEnum={enableStatusEnum}
+          name="status"
+          label="启用状态"
+          width="md"
+        />
+      </ProForm.Group>
+      <ProForm.Item
+        name="description"
+        label="精选描述"
+      >
+        <Input.TextArea 
+          placeholder="请输入卡片精选描述（最多200字）"
+          maxLength={200}
+          showCount
+          rows={4}
+          style={{ resize: 'none' }}
+        />
+      </ProForm.Item>
+    </ModalForm>
+  );
+};
+
+export default listEdit;
diff --git a/src/pages/Application/Preproducts/index.tsx b/src/pages/Application/Preproducts/index.tsx
index 84233a2..756b849 100644
--- a/src/pages/Application/Preproducts/index.tsx
+++ b/src/pages/Application/Preproducts/index.tsx
@@ -1,221 +1,233 @@
-import React, { Fragment, useEffect, useRef, useState } from 'react';
-import { useAccess } from '@umijs/max';
-import { Button, FormInstance, message, Modal, Switch } from 'antd';
-import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
-import { DeleteOutlined, FormOutlined, PieChartFilled, PlusOutlined } from '@ant-design/icons';
-import EditCompanyListRow from './edit';
-import { delCmsCompanyList } from '@/services/company/list';
-import { getDictValueEnum } from '@/services/system/dict';
-import {
-  addCmsCardList,
-  delCmsCardList,
-  getCmsCardList,
-  putCmsCardList,
-} from '@/services/application/preproducts';
-
-const handleRemoveOne = async (companyCardId: string) => {
-  const hide = message.loading('正在删除');
-  if (!companyCardId) return true;
-  try {
-    const resp = await delCmsCompanyList(companyCardId);
-    hide();
-    if (resp.code === 200) {
-      message.success('删除成功，即将刷新');
-    } else {
-      message.error(resp.msg);
-    }
-    return true;
-  } catch (error) {
-    hide();
-    message.error('删除失败，请重试');
-    return false;
-  }
-};
-
-function ManagementList() {
-  const access = useAccess();
-
-  const formTableRef = useRef<FormInstance>();
-  const actionRef = useRef<ActionType>();
-
-  const [currentRow, setCurrentRow] = useState<API.ApplicationProducts.Product>();
-  const [modalVisible, setModalVisible] = useState<boolean>(false);
-  const [companyNatureEnum, setCompanyNatureEnum] = useState<any>([]);
-  const [companyLabelEnum, setCompanyLabelEnum] = useState<any>([]);
-  const [enableStatusEnum, setEnableStatusEnum] = useState<any>([]);
-
-  useEffect(() => {
-    getDictValueEnum('company_nature', true, true).then((data) => {
-      setCompanyNatureEnum(data);
-    });
-    getDictValueEnum('company_label', true, true).then((data) => {
-      setCompanyLabelEnum(data);
-    });
-    getDictValueEnum('enable_status', true).then((data) => {
-      setEnableStatusEnum(data);
-    });
-  }, []);
-
-  const changeStatus = async (record: API.ApplicationProducts.Product) => {
-    let resData = await putCmsCardList({
-      companyCardId: record.companyCardId,
-      status: record.status === 1 ? 0 : 1,
-    });
-    if (resData.code === 200) {
-      message.success('修改成功');
-      if (actionRef.current) {
-        actionRef.current.reload();
-      }
-    }
-  };
-
-  const columns: ProColumns<API.ApplicationProducts.Product>[] = [
-    {
-      title: '卡片名称',
-      dataIndex: 'name',
-      valueType: 'text',
-      align: 'center',
-    },
-    {
-      title: '卡片颜色',
-      dataIndex: 'backgroudColor',
-      valueType: 'text',
-      align: 'center',
-      render: (text, _) => <PieChartFilled style={{ color: text }} />,
-    },
-    {
-      title: '排序',
-      dataIndex: 'cardOrder',
-      valueType: 'text',
-      align: 'center',
-    },
-    {
-      title: '启用状态',
-      dataIndex: 'status',
-      valueType: 'select',
-      align: 'center',
-      valueEnum: enableStatusEnum,
-      render: (text, record) => (
-        <Switch checked={record.status === 1} onChange={changeStatus.bind(null, record)} />
-      ),
-    },
-    {
-      title: '操作',
-      hideInSearch: true,
-      align: 'center',
-      dataIndex: 'companyCardId',
-      width: 300,
-      render: (companyCardId, record) => [
-        <Button
-          type="link"
-          size="small"
-          key="edit"
-          icon={<FormOutlined />}
-          hidden={!access.hasPerms('area:business:List.update')}
-          onClick={() => {
-            setModalVisible(true);
-            setCurrentRow(record);
-          }}
-        >
-          编辑
-        </Button>,
-        <Button
-          type="link"
-          size="small"
-          danger
-          key="batchRemove"
-          icon={<DeleteOutlined />}
-          hidden={!access.hasPerms('area:subway:List')}
-          onClick={async () => {
-            Modal.confirm({
-              title: '删除',
-              content: '确定删除该项吗？',
-              okText: '确认',
-              cancelText: '取消',
-              onOk: async () => {
-                const success = await delCmsCardList(companyCardId as string);
-                if (success) {
-                  if (actionRef.current) {
-                    actionRef.current.reload();
-                  }
-                }
-              },
-            });
-          }}
-        >
-          删除
-        </Button>,
-      ],
-    },
-  ];
-  return (
-    <Fragment>
-      <div style={{ width: '100%', float: 'right' }}>
-        <ProTable<API.ApplicationProducts.Product>
-          // params 是需要自带的参数
-          // 这个参数优先级更高，会覆盖查询表单的参数
-          actionRef={actionRef}
-          formRef={formTableRef}
-          rowKey="companyCardId"
-          key="index"
-          columns={columns}
-          request={(params) =>
-            getCmsCardList({ ...params } as API.ApplicationProducts.Params).then((res) => {
-              return {
-                data: res.rows,
-                total: res.total,
-                success: true,
-              };
-            })
-          }
-          toolBarRender={() => [
-            <Button
-              type="primary"
-              key="add"
-              hidden={!access.hasPerms('manage:List:add')}
-              onClick={async () => {
-                setCurrentRow(undefined);
-                setModalVisible(true);
-              }}
-            >
-              <PlusOutlined /> 新建
-            </Button>,
-          ]}
-        />
-      </div>
-      <EditCompanyListRow
-        open={modalVisible}
-        onSubmit={async (values) => {
-          let resData;
-          if (values.companyCardId) {
-            resData = await putCmsCardList(values);
-          } else {
-            resData = await addCmsCardList(values);
-          }
-          if (resData.code === 200) {
-            setModalVisible(false);
-            setCurrentRow(undefined);
-            if (values.companyCardId) {
-              message.success('修改成功');
-            } else {
-              message.success('新增成功');
-            }
-            if (actionRef.current) {
-              actionRef.current.reload();
-            }
-          }
-        }}
-        onCancel={() => {
-          setModalVisible(false);
-          setCurrentRow(undefined);
-        }}
-        values={currentRow}
-        companyLabelEnum={companyLabelEnum}
-        companyNatureEnum={companyNatureEnum}
-        enableStatusEnum={enableStatusEnum}
-      ></EditCompanyListRow>
-    </Fragment>
-  );
-}
-
-export default ManagementList;
+import React, { Fragment, useEffect, useRef, useState } from 'react';
+import { useAccess } from '@umijs/max';
+import { Button, FormInstance, message, Modal, Switch, Tooltip } from 'antd';
+import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
+import { DeleteOutlined, FormOutlined, PieChartFilled, PlusOutlined } from '@ant-design/icons';
+import EditCompanyListRow from './edit';
+import { delCmsCompanyList } from '@/services/company/list';
+import { getDictValueEnum } from '@/services/system/dict';
+import {
+  addCmsCardList,
+  delCmsCardList,
+  getCmsCardList,
+  putCmsCardList,
+} from '@/services/application/preproducts';
+
+const handleRemoveOne = async (companyCardId: string) => {
+  const hide = message.loading('正在删除');
+  if (!companyCardId) return true;
+  try {
+    const resp = await delCmsCompanyList(companyCardId);
+    hide();
+    if (resp.code === 200) {
+      message.success('删除成功，即将刷新');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('删除失败，请重试');
+    return false;
+  }
+};
+
+function ManagementList() {
+  const access = useAccess();
+
+  const formTableRef = useRef<FormInstance>();
+  const actionRef = useRef<ActionType>();
+
+  const [currentRow, setCurrentRow] = useState<API.ApplicationProducts.Product>();
+  const [modalVisible, setModalVisible] = useState<boolean>(false);
+  const [companyNatureEnum, setCompanyNatureEnum] = useState<any>([]);
+  const [companyLabelEnum, setCompanyLabelEnum] = useState<any>([]);
+  const [enableStatusEnum, setEnableStatusEnum] = useState<any>([]);
+
+  useEffect(() => {
+    getDictValueEnum('company_nature', true, true).then((data) => {
+      setCompanyNatureEnum(data);
+    });
+    getDictValueEnum('company_label', true, true).then((data) => {
+      setCompanyLabelEnum(data);
+    });
+    getDictValueEnum('enable_status', true).then((data) => {
+      setEnableStatusEnum(data);
+    });
+  }, []);
+
+  const changeStatus = async (record: API.ApplicationProducts.Product) => {
+    let resData = await putCmsCardList({
+      companyCardId: record.companyCardId,
+      status: record.status === 1 ? 0 : 1,
+    });
+    if (resData.code === 200) {
+      message.success('修改成功');
+      if (actionRef.current) {
+        actionRef.current.reload();
+      }
+    }
+  };
+
+  const columns: ProColumns<API.ApplicationProducts.Product>[] = [
+    {
+      title: '卡片名称',
+      dataIndex: 'name',
+      valueType: 'text',
+      align: 'center',
+    },
+    {
+      title: '卡片颜色',
+      dataIndex: 'backgroudColor',
+      valueType: 'text',
+      align: 'center',
+      render: (text, _) => <PieChartFilled style={{ color: text }} />,
+    },
+    {
+      title: '排序',
+      dataIndex: 'cardOrder',
+      valueType: 'text',
+      align: 'center',
+    },
+    {
+      title: '启用状态',
+      dataIndex: 'status',
+      valueType: 'select',
+      align: 'center',
+      valueEnum: enableStatusEnum,
+      render: (text, record) => (
+        <Switch checked={record.status === 1} onChange={changeStatus.bind(null, record)} />
+      ),
+    },
+    {
+      title: '精选描述',
+      dataIndex: 'description',
+      ellipsis: true,
+      render: (text) => (
+        <Tooltip title={text} placement="topLeft">
+          <span>{text || '-'}</span>
+        </Tooltip>
+      ),
+      hideInSearch: true, 
+    },
+    {
+      title: '操作',
+      hideInSearch: true,
+      align: 'center',
+      dataIndex: 'companyCardId',
+      width: 300,
+      render: (companyCardId, record) => [
+        <Button
+          type="link"
+          size="small"
+          key="edit"
+          icon={<FormOutlined />}
+          hidden={!access.hasPerms('area:business:List.update')}
+          onClick={() => {
+            setModalVisible(true);
+            setCurrentRow(record);
+          }}
+        >
+          编辑
+        </Button>,
+        <Button
+          type="link"
+          size="small"
+          danger
+          key="batchRemove"
+          icon={<DeleteOutlined />}
+          hidden={!access.hasPerms('area:subway:List')}
+          onClick={async () => {
+            Modal.confirm({
+              title: '删除',
+              content: '确定删除该项吗？',
+              okText: '确认',
+              cancelText: '取消',
+              onOk: async () => {
+                const success = await delCmsCardList(companyCardId as string);
+                if (success) {
+                  if (actionRef.current) {
+                    actionRef.current.reload();
+                  }
+                }
+              },
+            });
+          }}
+        >
+          删除
+        </Button>,
+      ],
+    },
+
+  ];
+  return (
+    <Fragment>
+      <div style={{ width: '100%', float: 'right' }}>
+        <ProTable<API.ApplicationProducts.Product>
+          // params 是需要自带的参数
+          // 这个参数优先级更高，会覆盖查询表单的参数
+          actionRef={actionRef}
+          formRef={formTableRef}
+          rowKey="companyCardId"
+          key="index"
+          columns={columns}
+          request={(params) =>
+            getCmsCardList({ ...params } as API.ApplicationProducts.Params).then((res) => {
+              return {
+                data: res.rows,
+                total: res.total,
+                success: true,
+              };
+            })
+          }
+          toolBarRender={() => [
+            <Button
+              type="primary"
+              key="add"
+              hidden={!access.hasPerms('manage:List:add')}
+              onClick={async () => {
+                setCurrentRow(undefined);
+                setModalVisible(true);
+              }}
+            >
+              <PlusOutlined /> 新建
+            </Button>,
+          ]}
+        />
+      </div>
+      <EditCompanyListRow
+        open={modalVisible}
+        onSubmit={async (values) => {
+          let resData;
+          if (values.companyCardId) {
+            resData = await putCmsCardList(values);
+          } else {
+            resData = await addCmsCardList(values);
+          }
+          if (resData.code === 200) {
+            setModalVisible(false);
+            setCurrentRow(undefined);
+            if (values.companyCardId) {
+              message.success('修改成功');
+            } else {
+              message.success('新增成功');
+            }
+            if (actionRef.current) {
+              actionRef.current.reload();
+            }
+          }
+        }}
+        onCancel={() => {
+          setModalVisible(false);
+          setCurrentRow(undefined);
+        }}
+        values={currentRow}
+        companyLabelEnum={companyLabelEnum}
+        companyNatureEnum={companyNatureEnum}
+        enableStatusEnum={enableStatusEnum}
+      ></EditCompanyListRow>
+    </Fragment>
+  );
+}
+
+export default ManagementList;
diff --git a/src/types/application/preproducts.d.ts b/src/types/application/preproducts.d.ts
index f645387..fc7b95e 100644
--- a/src/types/application/preproducts.d.ts
+++ b/src/types/application/preproducts.d.ts
@@ -1,25 +1,26 @@
-declare namespace API.ApplicationProducts {
-  export interface result {
-    total: number;
-    rows: Product[];
-    code: number;
-    msg: string;
-  }
-
-  export interface Product {
-    createTime: string;
-    companyCardId: number;
-    name: string;
-    companyNature: string;
-    backgroudColor: string;
-    status: number;
-  }
-
-  export interface Params {
-    companyCardId?: number;
-    name?: string;
-    companyNature?: string;
-    backgroudColor?: string;
-    status?: number;
-  }
-}
+declare namespace API.ApplicationProducts {
+  export interface result {
+    total: number;
+    rows: Product[];
+    code: number;
+    msg: string;
+  }
+
+  export interface Product {
+    createTime: string;
+    companyCardId?: number;
+    name: string;
+    description?:string;
+    companyNature: string;
+    backgroudColor: string;
+    status: number;
+  }
+
+  export interface Params {
+    companyCardId?: number;
+    name?: string;
+    companyNature?: string;
+    backgroudColor?: string;
+    status?: number;
+  }
+}