更新版本库

src/pages/Invoice/Supplier/index.tsx

@@ -0,0 +1,125 @@
+import React, { useState, useRef, } from 'react';
+import { message, Button } from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
+import { TableListItem, FormValueType } from './data.d'
+import UpdateForm from './components/updateForm';
+import { updateInv, getList } from './service';
+
+
+
+/**
+ * 更新节点
+ * @param fields
+ */
+const handleUpdate = async (fields: FormValueType) => {
+  const hide = message.loading('正在配置');
+  try {
+    await updateInv({
+      companyName: fields.companyName,
+      shibieNo: fields.shibieNo,
+      companyAdd: fields.companyAdd,
+      companyPhone: fields.companyPhone,
+      bank: fields.bank,
+      bankNo: fields.bankNo,
+      area: fields.area,
+      allAdd: fields.allAdd,
+      man: fields.man,
+      manPh: fields.manPh,
+      status: fields.status,
+    });
+    hide();
+
+    message.success('配置成功');
+    return true;
+  } catch (error) {
+    hide();
+    message.error('配置失败请重试！');
+    return false;
+  }
+};
+const invoice: React.FC<{}> = () => {
+  const actionRef = useRef<ActionType>();
+  //修改页面显隐
+  const [updateModalVis, handleUpdateModalVis] = useState<boolean>(false);
+  //存值
+  const [formValues, setFormValues] = useState({});
+
+  const columns: ProColumns<TableListItem>[] = [
+    { title: '序号', dataIndex: 'index', valueType: 'index', width: 10, },
+    { title: '项目名称', dataIndex: 'proName', width: 300, copyable: true },
+    {
+      title: '发票类型', dataIndex: 'type', width: 150,
+      valueEnum: {
+        0: { text: '普通' },
+        1: { text: '专用' },
+      },
+    },
+    {
+      title: '状态', dataIndex: 'status', width: 100,
+      valueEnum: {
+        0: { text: '未开', status: 'Processing' },
+        1: { text: '已开', status: 'Success' },
+      },
+    },
+    {
+      title: '操作', dataIndex: 'option', width: 180,
+      valueType: 'option',
+      render: (_, record) => {
+        return (
+          <>
+            {record.status == 0 ?
+              <Button size='small' onClick={() => { setFormValues(record); handleUpdateModalVis(true); }}>修改</Button>
+              : <Button size='small' onClick={() => { setFormValues(record); handleUpdateModalVis(true); }}>查看</Button>
+            }
+          </>
+        )
+      }
+    },
+  ];
+  return (
+    <PageHeaderWrapper>
+      <ProTable<any>
+        actionRef={actionRef}//action触发后更新表格
+        columns={columns}//表格
+        search={{ labelWidth: 70, span: 6 }}
+        pagination={{ defaultPageSize: 10 }}//默认显示条数
+        request={(params, sorter, filter) => getList({ ...params, sorter, filter }).then((res) => {
+          console.log(res);
+          const result = {
+            data: res.data.payVoList,
+            total: res.data.total,
+            success: res.data.success,
+            pageSize: res.data.pageSize,
+            current: res.data.current
+          };
+          return result;
+        })}
+        bordered
+      />
+      {formValues && Object.keys(formValues).length ? (
+        //分派界面
+        <UpdateForm
+          onCancel={() => {
+            handleUpdateModalVis(false);
+            setFormValues({});
+          }}
+          onSubmit={async (value) => {
+            const success = await handleUpdate(value);
+            if (success) {
+              handleUpdateModalVis(false);
+              setFormValues({});
+              if (actionRef.current) {
+                actionRef.current.reload();
+              }
+            }
+          }}
+          updateModalVis={updateModalVis}
+          values={formValues}
+        />
+      ) : null}
+    </PageHeaderWrapper>
+
+  )
+};
+export default invoice;