商品新增查看配方弹窗20240912

src/pages/database/goods/newgoods/index.jsx

@@ -1,5 +1,5 @@
 import { PlusOutlined, UploadOutlined, QuestionCircleOutlined, DownloadOutlined } from '@ant-design/icons';
-import { Button, message, Input, Drawer, Popconfirm, Upload, Spin, Tooltip, Modal, Select, Form } from 'antd';
+import { Button, message, Drawer, Popconfirm, Upload, Spin, Tooltip, Modal, Form } from 'antd';
 import React, { useState, useRef, useEffect } from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
 import ProTable from '@ant-design/pro-table';
@@ -8,7 +8,7 @@ import { history } from 'umi';
 import CreateForm from './components/CreateForm';
 import ChooseForm from './components/ChooseForm';
 import { getDataBaseUrl } from '@/global_data';
-import { gettree, goods, removeGoods, addGoods, updateGoods, GetDeviceTechnology, GetgoodsWithIds, Getgoodslist, GoodsExport } from './service';
+import { gettree, goods, removeGoods, addGoods, updateGoods, GetDeviceTechnology, GoodsExport, GetGoodsRecipeList } from './service';
 import axios from 'axios';
 
 const aliyunHostUrl = 'https://bpa.oss-cn-chengdu.aliyuncs.com/hkerp/test/goods/';
@@ -35,6 +35,8 @@ const GoodsManage = () => {
   const [importFile, setImportFile] = useState();
   const [showChooseForm, setShowChooseForm] = useState(false);
   const [chooseFormData, setChooseFormData] = useState([]);
+  const [showRecipeForm, setShowRecipeForm] = useState(false);
+  const [recipeGoodsId, setRecipeGoodsId] = useState([]);
   /** 国际化配置 */
   useEffect(() => {
     gettree().then((r) => {
@@ -213,7 +215,7 @@ const GoodsManage = () => {
       dataIndex: 'option',
       valueType: 'option',
       fixed: 'right',
-      width: 350,
+      width: 400,
       render: (_, record) => [
         <a
           key="primary"
@@ -294,8 +296,17 @@ const GoodsManage = () => {
           }}
         >
           下载商品
-        </a>
-        ,
+        </a>,
+        <a
+          key="primary"
+          type="primary"
+          onClick={() => {
+            setRecipeGoodsId(record.id);
+            setShowRecipeForm(true);
+          }}
+        >
+          查看配方
+        </a>,
         <Popconfirm
           type="primary"
           key="primary"
@@ -319,7 +330,37 @@ const GoodsManage = () => {
       ],
     },
   ];
-
+  const recipeColumns = [
+    {
+      title: '序号',
+      dataIndex: 'sort',
+      hideInSearch: true
+    },
+    {
+      title: '商品名称',
+      dataIndex: 'name',
+      hideInSearch: true,
+      render: (text) => text === "-" ? '' : text
+    },
+    {
+      title: '工序名称',
+      dataIndex: 'technologyName',
+      hideInSearch: true,
+      render: (text) => text === "-" ? '' : text
+    },
+    {
+      title: '主/物料名称',
+      dataIndex: 'batchingName',
+      hideInSearch: true,
+      render: (text) => text === "-" ? '' : text
+    },
+    {
+      title: '重量',
+      dataIndex: 'weight',
+      hideInSearch: true,
+      render: (text) => text === "-" ? '' : text
+    },
+  ];
   const importMessage = (json) =>{
     const hide = message.loading('正在导入');
     const formDataAll = new FormData();
@@ -553,6 +594,35 @@ const GoodsManage = () => {
           values={currentRow || {}}
           form={form}
         />
+        <Modal
+          title="配方详情"
+          open={showRecipeForm}
+          onCancel={() => {
+            setShowRecipeForm(false);
+          }}
+          width={1040}
+          destroyOnClose={true}
+          bodyStyle={{ padding: '32px 40px 1px 48px' }}
+          footer={null}
+          maskClosable={false}
+        >
+          <ProTable
+            pagination={false}
+            search={false}
+            rowKey="sort"
+            request={async () => {
+              var recipeData = [];
+              await GetGoodsRecipeList(recipeGoodsId).then((r) => {
+                recipeData = r.data;
+              });
+              return {
+                data: recipeData,
+                success: true,
+              };
+            }}
+            columns={recipeColumns}
+          />
+        </Modal>
         <ChooseForm 
           onFinish={async (data) => {
             const transformedData = Object.entries(data).map(([key, value]) => ({

src/pages/database/goods/newgoods/service.js

@@ -185,4 +185,10 @@ export async function GoodsImport(data) {
     method: 'post',
     data: data
   });
+}
+
+export async function GetGoodsRecipeList(data) {
+  return request(getDataBaseUrl()+`/api/goods/GetGoodsRecipeList?goodsId=${data}`, {
+    method: 'Get',
+  });
 }