修改大小写

src/pages/contract/manage/add/components/ContractText.tsx

+
+import React, { useState, useEffect, forwardRef } from 'react';
+import { Button, Select, Form, Checkbox, message, Upload } from 'antd'
+import { PublicApi } from '@/services/api';
+import styles from '../index.less'
+import {
+  FileWordFilled,
+} from '@ant-design/icons'
+import { UPLOAD_TYPE } from '@/constants'
+
+const ContractText = (props: any) => {
+  const { currentRef, memberId } = props;
+  const [TemplatePage, setTemplatePage] = useState<any>([]);
+  const [Templatel, setTemplatel] = useState<any>({});
+  const [checkNick, setCheckNick] = useState(true);
+  const [contractFlag, setcontractFlag] = useState<boolean>(false);
+  /* 第四个tab */
+  const onCheckboxChange = (e: { target: { checked: boolean } }) => {
+    setCheckNick(e.target.checked);
+  };
+  const getTemplate = (e) => {
+    PublicApi.getContractContractTemplateGet({ id: e }).then(res => {
+      setTemplatel(res.data)
+    })
+  }
+  /* 获取合同详情数据 */
+  const contractTemplate = () => {
+    let data: any = {
+      current: 1,
+      pageSize: 99
+    }
+    PublicApi.getContractContractTemplatePage(data).then(res => {
+      console.log(res);
+      let list = [];
+      res.data.data.find((item: any) => {
+        item.version != null ? item.version : '';
+        console.log(item.version)
+        if (item.state == 1) {
+          console.log(item,)
+          list.push({
+            label: item.name + item.version,
+            value: item.id,
+            id: item.id,
+          })
+        }
+      })
+      setTemplatePage(list)
+    }).catch(err => {
+      console.log(err)
+    })
+
+  }
+  useEffect(() => {
+    currentRef.current = {
+      get: () => new Promise((resolve: any) => {
+        let contractText = {
+          id: 0,
+          templateId: Templatel.id,
+          isUseElectronicContract: checkNick ? 1 : 0,
+          contractName: Templatel.name,
+          contractUrl: Templatel.fileUrl ? Templatel.fileUrl : Templatel.fileExampleUrl,
+          contractFlag: contractFlag,
+        }
+        resolve(contractText)
+      })
+    }
+  })
+  useEffect(() => {
+    contractTemplate();
+  }, [])
+  /* 生成电子合同 */
+  const generate = () => {
+    if (!Templatel.id) {
+      message.info('请先选择合同模版')
+    } else {
+      const param = {
+        contractTemplateId: Templatel.id,
+        memberId,
+      }
+      PublicApi.postContractSignatureContractCreate(param).then(res => {
+        console.log(res);
+        if (res.code == 1000) {
+          Templatel.name = res.data.contractName
+          Templatel.fileUrl = res.data.contractUrl
+          setTemplatel(Templatel)
+          setcontractFlag(true)
+        }
+      })
+    }
+  }
+  /**下载 */
+  const onDownload = () => {
+    window.location.href = `/api/contract/contractTemplate/downloadContract?contractName=${Templatel.fileName}&contractUrl=${Templatel.fileUrl}`
+
+  }
+  /**判断文件类型和大小 */
+  const beforeDocUpload = (file: any) => {
+    const isLt20M = file.size / 1024 / 1024 < 20;
+    if (!isLt20M) {
+      message.error('上传文件大小不超过 20M!');
+    }
+    return isLt20M;
+  }
+  // 上传回调
+  const handleChange = ({ fileList }) => {
+    if (fileList[0].response) {
+      if (fileList[0].response.code === 1000) {
+        Templatel.name = fileList[0].name
+        Templatel.fileName = fileList[0].name
+        Templatel.fileUrl = fileList[0].response.data
+        console.log(Templatel, '上传成功执行的')
+        setTemplatel({ ...Templatel })
+      }
+    }
+  }
+  return (
+    <div
+      style={{
+        width: '100%',
+      }}
+    >
+      <Form.Item label="合同模板" labelAlign="left" labelCol={{ span: 2 }}>
+        <Select
+          style={{ width: 600 }}
+          options={TemplatePage}
+          placeholder="请选择合同模板"
+          onChange={(e) => getTemplate(e)}
+        >
+        </Select>
+        {
+          checkNick && <Button type='link' onClick={() => generate()}>生成合同</Button>
+        }
+      </Form.Item>
+      {
+        Object.keys(Templatel).length != 0 &&
+        <Form.Item label="合同文本" labelAlign="left" labelCol={{ span: 2 }}>
+          <div className={styles.upload_item} style={{ width: 680 }}>
+            <div className={styles.upload_left} style={{ width: 600 }} onClick={() => onDownload()}>
+              <FileWordFilled />
+              <span>{Templatel.name}</span>
+            </div>
+
+            <Upload
+              action="/api/file/file/upload"
+              data={{ fileType: UPLOAD_TYPE }}
+              showUploadList={false}
+              beforeUpload={beforeDocUpload}
+              onChange={handleChange}
+              accept='.doc,.docx'
+            >
+              <div className={styles.uploadIconBtn}>
+                <Button type='link' >上传合同</Button>
+              </div>
+            </Upload>
+          </div>
+        </Form.Item>
+      }
+      <Form.Item label="电子合同" labelAlign="left" labelCol={{ span: 2 }}>
+        <Checkbox checked={checkNick} onChange={onCheckboxChange}>
+          使用电子合同
+        </Checkbox>
+      </Form.Item>
+    </div>
+
+  )
+}
+
+export default forwardRef(ContractText)

src/pages/contract/manage/add/components/Fromtable.tsx

+
+import React, { useState, useEffect, forwardRef } from 'react';
+import { Button, Table, Input, Select, DatePicker, InputNumber } from 'antd'
+import {
+  PlusOutlined
+} from '@ant-design/icons'
+import styles from '../index.less'
+const { TextArea } = Input
+const { Option } = Select;
+import moment from 'moment';
+
+const FormList = (props: any) => {
+  const { fromData, currentRef, fetchdata, Price } = props;
+  const [keys, setkeys] = useState<any>(); // 记录上次删除的
+  const [options, setoptions] = useState<any>([
+    {
+      value: 1,
+      disabled: true
+    }
+  ])
+
+  const [PlanList, setPlanList] = useState<any>([
+    {
+      payNum: '1',
+      payStage: '',
+      expectPayTime: '',
+      payRatio: '',
+      payAmount: '',
+      payWay: '1',
+      payParam: '',
+      id: 0,
+      rowId: 1,
+      disabled: true
+    },
+  ]);
+
+  /* 显示模态框 */
+  const tabcolumns: any = [
+    {
+      title: '付款次数', dataIndex: 'payNum', align: 'left',
+      render: (_, item, index) => {
+        return (
+          <Select
+            style={{ width: 200 }}
+            defaultValue={item.payNum}
+            options={options}
+            key='1'
+
+            onChange={(e) => onSelectChange(e, 'payNum', index)}
+          >
+          </Select>
+        )
+      }
+
+    },
+    {
+      title: '付款阶段', dataIndex: 'payStage', align: 'left',
+      render: (_, item, index) => <TextArea maxLength={150} rows={1} onChange={(e) => onSelectChange(e, 'payStage', index)} />
+    },
+    {
+      title: '预计付款时间', dataIndex: 'expectPayTime', align: 'left',
+      render: (_, item, index) => <DatePicker
+        style={{ width: '100%' }}
+        format="YYYY-MM-DD"
+        onChange={(e) => onSelectChange(e, 'expectPayTime', index)}
+      />
+    },
+    {
+      title: '付款比例', dataIndex: 'payRatio', align: 'left',
+      render: (_, item, index) =>
+        <div className={styles.flex}>
+          <Input
+            style={{
+              width: 150,
+            }}
+            value={item.payRatio}
+            placeholder=""
+            onChange={(e) => onSelectChange(e, 'payRatio', index)}
+          />
+          <span>%</span>
+        </div>
+
+    },
+    {
+      title: '付款金额', dataIndex: 'payAmount', align: 'left',
+      render: (_, item, index) =>
+        <div className={styles.flex}>
+          <span>￥</span>
+          <Input
+            style={{
+              width: 130,
+            }}
+            placeholder=""
+            value={item.payAmount}
+            onChange={(e) => onSelectChange(e, 'payAmount', index)}
+          />
+        </div>
+    },
+    {
+      title: '付款方式', dataIndex: 'payWay', align: 'left',
+      render: (_, item, index) =>
+        <div
+          className={styles.select}
+        >
+          <Select
+            style={{ width: 208 }}
+            onChange={(e) => onSelectChange(e, 'payWay', index)}
+            defaultValue={item.payWay}
+          >
+            <Option value="3" key={3}>现结</Option>
+            <Option value="1" key={1}>账期：</Option>
+            <Option value="2" key={2}>月结：</Option>
+          </Select>
+          {
+            item.payWay != 3 &&
+            <div className={styles.setBox}>
+              {/* payParam */}
+              <InputNumber placeholder='' onChange={(e) => onSelectChange(e, 'payParam', index)} width={60} max={31} />
+              <span>{item.payWay == 2 ? '号' : item.payWay == 1 ? '天' : ''}</span>
+            </div>
+          }
+        </div>
+    },
+    {
+      title: '操作',
+      dataIndex: '',
+      align: 'left',
+      key: 'x',
+      render: (_, item, index) => <a onClick={() => Delete(item, index)}>删除</a>,
+    },
+  ];
+
+  /* 添加 */
+  const addtable = () => {
+    const data = [...PlanList];
+
+    if (keys) {
+      data.push(keys);
+      setkeys('');
+    } else {
+      data.push(
+        {
+          payNum: data.length + 1,
+          payStage: '',
+          expectPayTime: '',
+          payRatio: '',
+          payAmount: '',
+          payWay: '1',
+          payParam: '',
+          id: 0,
+          rowId: data.length + 1,
+          disabled: false,
+        },
+      )
+    }
+    let optionsData = data.map((item, index) => {
+      return {
+        value: item.payNum ? item.payNum : index + 1,
+        disabled: item.payNum ? true : false,
+        rowId: item.rowId,
+      }
+    })
+
+    console.log('optionsDataadd', data, optionsData, 'optionsList')
+    setPlanList(data)
+    setoptions(optionsData)
+
+  };
+  /* 删除 */
+  const Delete = (elm, idx) => {
+    const dataSource = [...PlanList];
+    let List = dataSource.filter((item, index) => index !== idx);
+    let optionsData = options.map((keys => {
+      if (elm.payNum == keys.value) {
+        keys.disabled = false;
+      }
+      return {
+        ...keys
+      }
+    }))
+    setkeys(elm);
+    setPlanList(List)
+    setoptions(optionsData)
+  };
+
+  /* 选中设置值 */
+  const onSelectChange = (e, name, idx) => {
+    let item = [...PlanList];
+    switch (name) {
+      case 'payWay':
+        item[idx].payWay = e;
+        break;
+      case 'payNum':
+        item[idx].payNum = e;
+        break;
+      case 'expectPayTime':
+        item[idx].expectPayTime = moment(e).format('YYYY-MM-DD HH:mm:ss');
+        break;
+      case 'payStage':
+        item[idx].payStage = e.target.value;
+        break;
+      case 'payRatio':
+        item[idx].payRatio = e.target.value;
+        if (Price != 0) {
+          item[idx].payAmount = e.target.value / 100 * Price;
+        }
+        break;
+      case 'payAmount':
+        if (Price != 0) {
+          item[idx].payRatio = e.target.value / Price * 100;
+        }
+        item[idx].payAmount = e.target.value;
+        break;
+      case 'payParam':
+        item[idx].payParam = e;
+        break;
+    }
+    console.log(item[idx])
+    setPlanList(item)
+  }
+  useEffect(() => {
+    currentRef.current = {
+      get: () => new Promise((resolve: any) => {
+        PlanList.map(item => {
+          item.payNum = Number(item.payNum)
+          item.payRatio = Number(item.payRatio)
+          item.payAmount = Number(item.payAmount)
+          item.payWay = Number(item.payWay)
+          item.payParam = Number(item.payParam)
+          // 付款方式: 1 - 账期，2 - 月结，3 - 现结
+          item.payWayName = item.payWay == 1 ? '账期' : item.payWay == 2 ? '月结' : '现结'
+        })
+        resolve(PlanList)
+      })
+    }
+  })
+
+  return (
+    <div className="table">
+      <Table
+        columns={tabcolumns}
+        dataSource={PlanList}
+        rowKey="rowId"
+        style={{
+          width: "100%"
+        }}
+        pagination={false}
+      />
+      <div style={{ background: '#F4F5F7' }} onClick={() => addtable()} >
+        <Button block type='dashed'><PlusOutlined />添加付款计划</Button>
+      </div>
+    </div>
+  )
+}
+
+export default forwardRef(FormList)