kts-component-invoice-operate 3.2.246 → 3.2.248

package/src/Invoice/ui/default/MeiTanModal/index.tsx

@@ -0,0 +1,155 @@
+import React from 'react';
+import { Modal, Form, Radio, Space } from 'kts-components-antd-x4';
+import { Button, message } from 'kts-xui'
+import Invoice from '../../..';
+import './index.less';
+import LineAttributeType from '@/Invoice/InvoiceController/InvoiceControllerState/GoodsListState/LineAttributeType';
+
+export default () => {
+
+  const controller = Invoice.useInvoiceController();
+
+  const [form] = Form.useForm();
+
+  const [mainOption, setMainOption] = React.useState(null);
+  // 监听煤炭种类变化
+  const mtzlDm = Form.useWatch('mtzlDm', form);
+
+  const visible = controller.useMemo((s) => s.goodsListState.meiTanGoodIndex && s.goodsListState.meiTanGoodIndex.length > 0, []);
+
+  const onClose = React.useCallback(() => {
+    controller.pipeline(async (s) => {
+      s.goodsListState.meiTanGoodIndex = [];
+      form.setFieldsValue({ mtzlDm: undefined });
+      setMainOption(null);
+    })();
+  }, [controller]);
+
+  // 提交表单
+  const onSubmit = () => {
+    form.submit();
+  };
+
+  // 表单
+  const onFinish = (values: any) => {
+    console.log('煤炭种类:', values);
+
+    controller.pipeline(async (s) => {
+      const mtzl = values.mtzlDm;
+      const goods = s.goodsListState.meiTanGoodIndex?.map(e => s.goodsListState.goodsMap.get(e)) || [];
+      const editGood = s.goodsListState.editGood;
+      const editGoodIndex = editGood?.$index;
+      goods.forEach((g) => {
+        if (!g) return;
+        if (g.lineAttribute === LineAttributeType.被折扣行 || g.lineAttribute === LineAttributeType.正常) {
+          g.mtzlDm = mtzl;
+          if (editGood && editGoodIndex === g.$index) { // 编辑行
+            editGood.mtzlDm = mtzl;
+          }
+        }
+      });
+      s.goodsListState.goodsList = s.goodsListState.goodsList.slice();
+      onClose();
+    })();
+
+  };
+
+  // 自定义校验规则
+  const validateOption = (_:any, value: any, callback: any) => {
+    console.log('自定义校验规则:', value);
+    if (!value) {
+      return Promise.reject(new Error('请选择选项'));
+      // callback('请选择选项');
+    }
+
+    if (value === '0200') {
+      return Promise.reject(new Error('请选择长协煤的子选项'));
+    }
+
+    return Promise.resolve();
+  };
+
+  const handleMainOptionChange = (e: any) => {
+    const value = e.target.value;
+    setMainOption(value);
+    if (value === 'A' || value === 'C') {
+      form.setFieldsValue({ mtzlDm: value });
+    } else if (value === 'B') {
+      form.setFieldsValue({ mtzlDm: undefined }); // 清空option，等待选择子选项
+    }
+  };
+
+  return (
+    <Modal
+      title="温馨提示"
+      destroyOnClose={true}
+      width={700}
+      onCancel={onClose}
+      visible={visible}
+      footer={
+        <Space align='end' style={{ paddingRight: 20 }}>
+          <Button
+            onClick={onClose}
+            className='kts-invoice-operate-meitan-button'
+          >
+            取消
+          </Button>
+          <Button type="primary" onClick={onSubmit} className='kts-invoice-operate-meitan-button'>
+
+            确定
+          </Button>
+        </Space>
+      }
+    >
+      <div className='kts-invoice-operate-meitan-modal'>
+        <div className='kts-invoice-operate-meitan-title'>
+          <div>尊敬的纳税人:</div>
+          <div className='kts-invoice-operate-meitan-title2'>您选择了“煤炭”类商品编码，请根据真实业务情况选择
+            “煤炭种类”：</div>
+        </div>
+        <div className='kts-invoice-operate-meitan-content'>
+          <Form
+            form={form}
+            layout="vertical"
+            initialValues={{ mtzlDm: null }}
+            onFinish={onFinish}
+          >
+            <Form.Item
+              name="mtzlDm"
+              label=""
+              rules={[
+                // { required: true , message: '请选择煤炭种类' },
+                { validator: validateOption }
+              ]}
+            >
+              <Radio.Group value={mainOption} onChange={handleMainOptionChange}>
+                <Space direction="vertical">
+                  <Radio value="0100">政府保供煤</Radio>
+                  <div>
+                    <Radio value="0200">长协煤</Radio>
+                    {mainOption === '0200' && (
+                      <div className='content-item'>
+                        <div style={{ marginBottom: 8, color: '#666', fontSize: 14 }}>
+                          <span style={{ color: 'red' }}>*</span>请选择协议期限：
+                        </div>
+                        <Radio.Group value={mtzlDm} onChange={(e) => form.setFieldsValue({ mtzlDm: e.target.value })}>
+                          <Space direction="vertical">
+                            <Radio value="0201">协议期不足半年</Radio>
+                            <Radio value="0202">协议期在半年至一年之间</Radio>
+                            <Radio value="0203">协议期在一年至两年之间</Radio>
+                            <Radio value="0204">协议期在两年以上</Radio>
+                          </Space>
+                        </Radio.Group>
+                      </div>
+                    )}
+                  </div>
+                  <Radio value="0300">市场煤</Radio>
+                </Space>
+              </Radio.Group>
+            </Form.Item>
+          </Form>
+        </div>
+      </div>
+    </Modal>
+  );
+};