fix: '台账配置预览功能添加'

src/pages/bsmanager/base/standingBook/BookConfigNew.jsx

@@ -17,7 +17,7 @@ import {
   Col,
   Switch,
 } from 'antd';
-import { PlusOutlined, InfoCircleOutlined } from '@ant-design/icons';
+import { PlusOutlined, InfoCircleOutlined, EyeOutlined } from '@ant-design/icons';
 import { LoadEventFields } from '@/services/tablemanager/tablemanager';
 import {
   GetCM_Ledger_LoadLedgerTable,
@@ -26,7 +26,7 @@ import {
   Ledger_QueryLedger,
   Ledger_SaveLedger,
 } from '@/services/standingBook/api';
-// import { getFieldInfo } from 'panda-xform';
+import { Account } from 'panda-xform';
 import ChangeAdd from './changeAdd';
 import EditTable from './EditTable';
 import styles from './BookConfigNew.less';
@@ -57,8 +57,13 @@ const BookConfigNew = props => {
   const [tableShow, setTableShow] = useState(false); // 当前表所有的字段
   const [allData, setAllData] = useState([]); // 当前表所有的字段
   const [formJosn, setFormJosn] = useState([]); // 形态解析
+  const [accountVisile, setAccountVisile] = useState(false); // 表单预览弹窗
+  const [submitObj, setSubmitObj] = useState({}); // 表单预览弹窗
+  const [modalLoading, setModalLoading] = useState(false); // 提交数据
+  const [viewModalLoading, setViewModalLoading] = useState(false); // 表单预览弹窗
   const [form] = Form.useForm();
-  const tableRef = useRef();
+  const tableRef = useRef(null);
+  const accountRef = useRef(null);
   const desabledArr = [
     'FileUpload',
     'Coordinate',
@@ -95,6 +100,7 @@ const BookConfigNew = props => {
   const { Item } = Form;
   // 提交
   const onSubmit = () => {
+    setModalLoading(true);
     form.validateFields().then(validate => {
       // return;
       if (validate) {
@@ -117,16 +123,19 @@ const BookConfigNew = props => {
           let obj =
             type === 'add' ? { ...datas, Order: maxLength } : { ...datas, Order, ID: formObj.ID };
           obj.LedgerFieids = tableRef.current.onFinish();
+          setSubmitObj(obj);
           Ledger_SaveLedger(obj)
             .then(res => {
+              setModalLoading(false);
               if (res.code === 0) {
-                form.resetFields();
-                callBackSubmit();
+                // form.resetFields();
+                // callBackSubmit();
                 notification.success({
                   message: '提示',
                   duration: 3,
                   description: type === 'add' ? '新增成功' : '编辑成功',
                 });
+                setAccountVisile(true);
               } else {
                 notification.error({
                   message: '提示',
@@ -146,6 +155,46 @@ const BookConfigNew = props => {
       }
     });
   };
+  // 预览提交
+  const viewSubmit = () => {
+    setViewModalLoading(true);
+    let arr = accountRef.current.getTableColumns();
+    let viewArr = tableRef.current.onFinish();
+    arr.map(item => {
+      viewArr.map(ele => {
+        if (item.dataIndex === ele.FieldName) {
+          ele.ColumnWidth = item.width;
+        }
+      });
+    });
+    Ledger_SaveLedger({ ...submitObj, LedgerFieids: viewArr })
+      .then(res => {
+        setViewModalLoading(false);
+        if (res.code === 0) {
+          setAccountVisile(false);
+          form.resetFields();
+          callBackSubmit();
+          notification.success({
+            message: '提示',
+            duration: 3,
+            description: type === 'add' ? '新增成功' : '编辑成功',
+          });
+        } else {
+          notification.error({
+            message: '提示',
+            duration: 3,
+            description: res.msg,
+          });
+        }
+      })
+      .catch(() => {
+        notification.error({
+          message: '提示',
+          duration: 3,
+          description: '网络异常请稍后再试',
+        });
+      });
+  };
   useEffect(() => {
     console.log(pickItem1);
     console.log(data[0]);
@@ -482,7 +531,22 @@ const BookConfigNew = props => {
 
   return (
     <Modal
-      title={`${type === 'add' ? '台账配置' : '台账编辑'}`}
+      title={
+        <div className={styles.modalTitle}>
+          <div>{type === 'add' ? '台账配置' : '台账编辑'}</div>
+          {/* <div>
+            <Button
+              type="primary"
+              ghost
+              icon={<EyeOutlined />}
+              onClick={() => setAccountVisile(true)}
+              style={{ marginLeft: '10px' }}
+            >
+              预览
+            </Button>
+          </div> */}
+        </div>
+      }
       visible={visible}
       destroyOnClose
       onOk={onSubmit}
@@ -502,6 +566,7 @@ const BookConfigNew = props => {
       //   overflowY: 'auto',
       // }}
       // width="100vw"
+      confirmLoading={modalLoading}
     >
       <div className={styles.top}>
         <Form form={form} {...layout}>
@@ -711,6 +776,22 @@ const BookConfigNew = props => {
       <div className={styles.bottom}>
         <EditTable visible={tableShow} ref={tableRef} tbData={tbData} formObj={formObj} />
       </div>
+      <Modal
+        title="台账预览"
+        visible={accountVisile}
+        destroyOnClose
+        onOk={viewSubmit}
+        onCancel={() => {
+          setAccountVisile(false);
+        }}
+        centered
+        bodyStyle={{ width: '100%', height: '800px', overflowY: 'scorll' }}
+        width="1600px"
+        confirmLoading={viewModalLoading}
+        // okText=
+      >
+        <Account ref={accountRef} accountName={form.getFieldValue('Name')} readOnly />
+      </Modal>
     </Modal>
   );
 };

src/pages/bsmanager/base/standingBook/BookConfigNew.less

@@ -26,4 +26,14 @@
   .panda-pro-pages-bsmanager-base-standing-book-standing-book-userManageContainer .ant-modal-body {
     padding: 15px;
   }
+}
+
+.modalTitle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  >div:last-child {
+    margin-right: 40px;
+  }
 }
\ No newline at end of file

src/pages/bsmanager/base/standingBook/changeAdd.jsx

@@ -237,7 +237,7 @@ const AddModal = props => {
               orientation="left"
               style={{ margin: '0 0 10px 0', backgroundColor: '#dfe8f6' }}
             >
-              已选字段列表
+              已选字段列表（可拖动调列表顺序）
             </Divider>
             <div className={styles.cardContent}>
               <div className={styles.doctorTable}>