审批合同时优先查看附件和表单信息

config/plugin.config.js

@@ -15,30 +15,30 @@ export default config => {
     .loader('file-loader')
     .end();
   // pro 和 开发环境再添加这个插件
-  if (process.env.APP_TYPE === 'site' || process.env.NODE_ENV !== 'production') {
-    // 将所有 less 合并为一个供 themePlugin使用
-    const outFile = path.join(__dirname, '../.temp/ant-design-pro.less');
-    const stylesDir = path.join(__dirname, '../src/');
+  // if (process.env.APP_TYPE === 'site' || process.env.NODE_ENV !== 'production') {
+  //   // 将所有 less 合并为一个供 themePlugin使用
+  //   const outFile = path.join(__dirname, '../.temp/ant-design-pro.less');
+  //   const stylesDir = path.join(__dirname, '../src/');
 
-    config.plugin('merge-less').use(MergeLessPlugin, [
-      {
-        stylesDir,
-        outFile,
-      },
-    ]);
+  //   config.plugin('merge-less').use(MergeLessPlugin, [
+  //     {
+  //       stylesDir,
+  //       outFile,
+  //     },
+  //   ]);
 
-    config.plugin('ant-design-theme').use(AntDesignThemePlugin, [
-      {
-        antDir: path.join(__dirname, '../node_modules/antd'),
-        stylesDir,
-        varFile: path.join(__dirname, '../node_modules/antd/lib/style/themes/default.less'),
-        mainLessFile: outFile, //     themeVariables: ['@primary-color'],
-        indexFileName: 'index.html',
-        generateOne: true,
-        lessUrl: 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js',
-      },
-    ]);
-  }
+  //   config.plugin('ant-design-theme').use(AntDesignThemePlugin, [
+  //     {
+  //       antDir: path.join(__dirname, '../node_modules/antd'),
+  //       stylesDir,
+  //       varFile: path.join(__dirname, '../node_modules/antd/lib/style/themes/default.less'),
+  //       mainLessFile: outFile, //     themeVariables: ['@primary-color'],
+  //       indexFileName: 'index.html',
+  //       generateOne: true,
+  //       lessUrl: 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js',
+  //     },
+  //   ]);
+  // }
 
   if (process.env.APP_TYPE !== 'site' || process.env.NODE_ENV !== 'development') {
     config.merge({

src/components/AttachmentTable/index.js

@@ -76,7 +76,13 @@ function AttachmentTable(props) {
   }, [excelFileList]);
   return (
     <>
-      <Table rowKey="id" loading={loading} columns={columns} dataSource={excelFileData} />
+      <Table
+        title={() => '附件列表'}
+        rowKey="id"
+        loading={loading}
+        columns={columns}
+        dataSource={excelFileData}
+      />
       <FileViewerModal
         data={exportData}
         visible={excelFileVisible}

src/pages/Detail/FormAndFilesNode.js

@@ -12,51 +12,30 @@ const { Panel } = Collapse;
 const FormAndFilesNode = props => {
   const { formData, excelFileList, comment, version, loading } = props;
 
-  const handleSubmitCell = (value, callback) => {
-    if (!value) return;
-    dispatch({
-      type: 'detail/addComment',
-      payload: {
-        ...cellPosition.current,
-        comment: value,
-      },
-      callback,
-    });
-  };
-
   const FormContent = useMemo(() => {
     return renderFrom(formData);
   }, [formData]);
 
   return (
-    <Collapse style={{ marginTop: 20 }}>
-      <Panel header="附件" key="2">
-        <AttachmentTable version={version} canDelete={version.last_version == 0} />
-      </Panel>
-      {FormContent && (
-        <Panel header="表单信息" key="1">
-          {FormContent}
-        </Panel>
-      )}
-
-      <Panel header="评论" key="3">
-        <CommentContent
-          title="单元格沟通记录"
-          comment={comment}
-          onSubmit={handleSubmitCell}
-          loading={loading.effects['detail/queryComment'] || loading.effects['detail/addComment']}
-        />
-      </Panel>
-    </Collapse>
+    <>
+      <Card title="审批信息">
+        <Row gutter={20}>
+          <Col span={12}>{FormContent}</Col>
+          <Col span={12}>
+            <AttachmentTable version={version} canDelete={version.last_version == 0} />
+          </Col>
+        </Row>
+      </Card>
+    </>
   );
 };
 
 const renderFrom = data => {
-  if (!data) return null;
+  if (!data) return <Empty description="没有表单信息" />;
   try {
     const ding_schema = JSON.parse(data)[0];
     const formData = JSON.parse(ding_schema)?.formComponentValues;
-    if (formData.length == 0) return null;
+    if (formData.length == 0) return <Empty description="没有表单信息" />;
     return (
       <>
         {formData.map((item, idx) => {
@@ -85,7 +64,7 @@ const renderFrom = data => {
       </>
     );
   } catch {
-    return null;
+    return <Empty description="没有表单信息" />;
   }
 };
 export default connect(({ detail, loading }) => ({

src/pages/Detail/Index.js

@@ -16,7 +16,7 @@ import TimeNode from './TimeNode';
 import FilesModal from './FilesModal';
 import VersionModal from './VersionModal';
 import CommitAuditModal from './CommitAuditModal';
-// import CommentContent from '@/components/CommentContent';
+import CommentContent from '@/components/CommentContent';
 import MergeModal from './MergeModal';
 import { GetTokenFromUrl, getToken } from '@/utils/utils';
 import {
@@ -50,6 +50,7 @@ function Detail(props) {
     typeOptions,
     classifyList,
     excelFileList,
+    comment,
   } = props;
   const [versionTreeVisible, setVersionTreeVisible] = useState(false);
   const [commentVisible, setCommentVisible] = useState(false);
@@ -80,6 +81,7 @@ function Detail(props) {
     edit: false,
     compare: false,
   });
+  const cellPosition = useRef({});
 
   useEffect(() => {
     if (!version.attachment_id) return;
@@ -181,6 +183,9 @@ function Detail(props) {
         cid: cell.cid,
         sheet_index: String(s.seq || 0),
       };
+      cellPosition.current = {
+        ...payload,
+      };
       dispatch({
         type: 'detail/queryComment',
         payload,
@@ -217,7 +222,7 @@ function Detail(props) {
     });
   };
   // 更新表单，flag为true时不判断是否属于审批，强制更新
-  const onUpdate = (flag) => {
+  const onUpdate = flag => {
     if (!flag && flow.active != 0) return;
     let currentData = sheetRef.current.getSheetJson().data;
     let sheets = JSON.parse(JSON.stringify(currentData));
@@ -387,7 +392,17 @@ function Detail(props) {
       }
     } catch (error) {}
   };
-
+  const handleSubmitCell = (value, callback) => {
+    if (!value) return;
+    dispatch({
+      type: 'detail/addComment',
+      payload: {
+        ...cellPosition.current,
+        comment: value,
+      },
+      callback,
+    });
+  };
   useEffect(() => {
     dispatch({
       type: 'detail/queryProjectRecord',
@@ -521,33 +536,51 @@ function Detail(props) {
         projectId={projectId}
         setAuditVisible={setAuditVisible}
       ></TimeNode>
-
-      {/* 判断是否为比对模式 */}
-      {compareList.length == 2 ? (
-        <>
-          <Alert
-            message={`比对结果：${updateCount.diff}项差异。${updateCount.add}项新增`}
-            type="info"
-          />
-          <div className={styles.sheetBox}>{compareList.map(renderSheetDom)}</div>
-        </>
-      ) : (
-        <div className={styles.sheetBox}>
-          {version.id && (
-            <LuckySheet
-              className={styles.sheet}
-              ref={sheetRef}
-              onClickCell={onClickCell}
-              version={version}
-              templateId={templateId}
-              getUser={getUser}
-              onUpdate={onUpdate}
-              onDelSheet={onDelSheet}
+      <div
+        className={styles.content}
+        style={{
+          // 合同清单先显示附件再显示清单详情
+          flexDirection: version?.TemplateNodeInfo?.flow_id == 9 ? 'column-reverse' : 'column',
+        }}
+      >
+        {/* 判断是否为比对模式 */}
+        {compareList.length == 2 ? (
+          <>
+            <Alert
+              message={`比对结果：${updateCount.diff}项差异。${updateCount.add}项新增`}
+              type="info"
             />
-          )}
-        </div>
-      )}
-
+            <div className={styles.sheetBox}>{compareList.map(renderSheetDom)}</div>
+          </>
+        ) : (
+          <div className={styles.sheetBox}>
+            {version.id && (
+              <LuckySheet
+                className={styles.sheet}
+                ref={sheetRef}
+                onClickCell={onClickCell}
+                version={version}
+                templateId={templateId}
+                getUser={getUser}
+                onUpdate={onUpdate}
+                onDelSheet={onDelSheet}
+              />
+            )}
+          </div>
+        )}
+
+        <FormAndFilesNode
+          formData={version?.ding_schema}
+          excelFileList={excelFileList}
+          version={version}
+        />
+      </div>
+      <CommentContent
+        title="单元格沟通记录"
+        comment={comment}
+        onSubmit={handleSubmitCell}
+        loading={loading.effects['detail/queryComment'] || loading.effects['detail/addComment']}
+      />
       <HistoryDrawer
         versionTree={versionTree}
         version={version}
@@ -556,11 +589,6 @@ function Detail(props) {
         onClose={() => setVersionTreeVisible(false)}
       />
 
-      <FormAndFilesNode
-        formData={version?.ding_schema}
-        excelFileList={excelFileList}
-        version={version}
-      />
       <RightDrawer
         version={version}
         visible={commentVisible}
@@ -631,5 +659,6 @@ export default connect(({ detail, user, xflow, loading }) => ({
   typeOptions: detail.typeOptions,
   classifyList: detail.classifyList,
   excelFileList: detail.excelFileList,
+  comment: detail.comment,
   loading,
 }))(Detail);

src/pages/Detail/Index.less

@@ -57,3 +57,9 @@
 .topF{
   margin: 20px;
 }
+.content {
+  display: flex;
+  flex-direction: column;
+  // justify-content: center;
+  // align-items: center;
+}

src/pages/Flow/FlowDetail.json

@@ -361,7 +361,7 @@
       "y": 6,
       "zIndex": 0,
       "muti_version": 1,
-      "flow_id": 17,
+      "flow_id": 8,
       "node_type": 1,
       "count": 0,
       "role_list": ""