12-23-上传master

src/pages/Finance/Invoice/index.tsx

@@ -0,0 +1,140 @@
+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} 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 genList = (current: number, pageSize: number) => {
+    const tableDataSource: any[] | undefined = [];
+    for (let i = 0; i < pageSize; i += 1) {
+      const index = (current - 1) * 10 + i;
+      tableDataSource.push({
+        key: index,
+        proName: '2020年长春市分公司集采项目',
+        invType: Math.floor(Math.random() * 2),
+        status: Math.floor(Math.random() * 2),
+        companyName: '联通系统集成有限公司吉林省分公司',
+        shibieNo: '1234567890111111',
+        companyAdd: `吉林省长春市解放大路3535号${index}`,
+        companyPhone: '0431-84564561',
+        bank: '中国银行',
+        bankNo: '6212264200003894945',
+        area: `吉林省长春市宽城区${index}`,
+        allAdd: '吉林省长春市解放大路3535号',
+        man: '邢书源邢书源邢书源',
+        manPh: '18643124142',
+      });
+    }
+    //撤销方法
+    tableDataSource.reverse();
+    return tableDataSource;
+  };
+  let tableDataSource = genList(1, 100);
+
+  const columns: ProColumns<TableListItem>[] = [
+    { title: '序号', dataIndex: 'index', valueType: 'index', width: 10, },
+    { title: '项目名称', dataIndex: 'proName', width: 300, copyable: true },
+    {
+      title: '发票类型', dataIndex: 'invType', width: 150,
+      valueEnum: {
+        0: { text: '普通' },
+        1: { text: '专用' },
+      },
+    },
+    {
+      title: '状态', dataIndex: 'status', sorter: true, width: 100,
+      valueEnum: {
+        0: { text: '未开', status: 'Processing' },
+        1: { text: '已开', status: 'Success' },
+      },
+    },
+    {
+      title: '操作', dataIndex: 'option', width: 180,
+      valueType: 'option',
+      render: (_, record) => {
+        return (
+          <>
+            <Button size='small' disabled={record.status == 1} 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) => queryEntrust({ ...params, sorter, filter })}//数据
+        dataSource={tableDataSource}
+        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;