完成静态页面

config/routes/tranactionRoute.ts

@@ -3,7 +3,7 @@
  * @Date: 2020-07-31 19:56:22
  * @LastEditors: XieZhiXiong
  * @Copyright: 1549414730@qq.com
- * @LastEditTime: 2020-09-22 10:35:20
+ * @LastEditTime: 2020-09-22 20:53:52
  */
 
 const TranactionRoute = {
@@ -320,6 +320,12 @@ const TranactionRoute = {
           component: '@/pages/transaction/supplierEvaluation/unevaluated', 
         }, 
         {
+          path: '/memberCenter/tranactionAbility/supplierEvaluation/unevaluated/evaluate',
+          name: 'evaluate', 
+          component: '@/pages/transaction/supplierEvaluation/unevaluated/evaluate', 
+          hideInMenu: true, 
+        }, 
+        {
           path: '/memberCenter/tranactionAbility/supplierEvaluation/analysis',
           name: 'analysis', 
           component: '@/pages/transaction/supplierEvaluation/analysis', 

src/components/AvatarWrap/index.less

+.head {
+  display: flex;
+  align-items: center;
+  font-size: 20px;
+  font-weight: 500;
+
+  &-prefix {
+    width: 48px;
+    height: 48px;
+    line-height: 48px;
+    border-radius: 4px;
+    border: 1px solid #DFE1E6;
+    color: #fff;
+    text-align: center;
+    background-color: #8777D9;
+  }
+
+  &-name {
+    color: #172B4D;
+    margin: 0 8px 0 12px;
+  }
+}

src/components/AvatarWrap/index.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2020-09-22 11:48:53
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2020-09-22 11:53:03
+ * @Description: 详情页头像与名字结合组件
+ */
+import React from 'react';
+import styles from './index.less';
+
+export interface AvatarWrapProps {
+  info: {
+    aloneTxt?: string,        // 单独显示在头像中间的文件，不传的话从 name 从截取第一个字符
+    name: string, 
+    level?: number, 
+  };
+  extra?: React.ReactNode;
+};
+
+const AvatarWrap: React.FC<AvatarWrapProps> = ({ info = {}, extra }) => (
+  <div className={styles.head}>
+    <div className={styles['head-prefix']}>
+      {
+        info.aloneTxt ? 
+          info.aloneTxt : 
+          info.name && info.name.length ? 
+            info.name[0] : 
+            ''
+      }
+    </div>
+    <div className={styles['head-name']}>
+      {info.name || ''}
+    </div>
+    {extra}
+  </div>
+);
+
+export default AvatarWrap;
\ No newline at end of file

src/components/MellowCard/index.tsx

@@ -2,7 +2,7 @@
  * @Author: XieZhiXiong
  * @Date: 2020-08-26 17:32:45
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2020-08-26 17:33:28
+ * @LastEditTime: 2020-09-22 19:30:18
  * @Description: 基于 antd Card 封装的适合项目 UI 的 Card，使用方式跟 antd Card 一样，这里只是修改了样式
  */
 import React from 'react';
@@ -15,7 +15,7 @@ const MellowCard: React.FC<CardProps> = props => {
 
   return (
     <div className={styles.mellow}>
-      <Card {...rest}>
+      <Card bordered={false} {...rest}>
         {children}
       </Card>
     </div>

src/components/Mood/index.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2020-09-22 17:41:45
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2020-09-22 18:04:44
+ * @Description: 评价笑脸组件
+ */
+import React from 'react';
+import {
+  SmileFilled,
+  MehFilled,
+  FrownFilled,
+} from '@ant-design/icons';
+
+interface MoodProps {
+  type: 'smile' | 'notBad' | 'sad';
+};
+
+const Mood: React.FC<MoodProps> = ({ type = 'smile' }) => {
+  let node = null;
+
+  switch (type) {
+    case 'smile':
+      node = <><SmileFilled style={{ color: '#41CC9E', marginRight: 4 }} /></>;
+      break;
+      
+    case 'notBad':
+      node = <><MehFilled style={{ color: '#FFC400', marginRight: 4 }} /></>;
+      break;
+
+    case 'sad':
+      node = <><FrownFilled style={{ color: '#EF6260', marginRight: 4 }} /></>;
+      break;
+
+    default:
+      break;
+  }
+
+  return node;
+};
+
+export default Mood;
\ No newline at end of file

src/components/NiceForm/components/Search.tsx

 import React, { useState } from 'react';
-import { Input, Space, Button } from 'antd';
+import { Input, Space, Button, Tooltip } from 'antd';
 import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons';
 import { useFieldState, FormPath, FormEffectHooks } from '@formily/antd';
 import { FORM_FILTER_PATH } from '@/formSchema/const';
@@ -15,7 +15,12 @@ const Search = props => {
   const [state, setState] = useFieldState({
     filterSearch: false,
   });
-  const { align, advanced = true, ...rest } = props.props['x-component-props'];
+  const { 
+    align, 
+    advanced = true,      // 是否展示高级筛选
+    tip,                  // 搜索框悬浮提示
+    ...rest
+  } = props.props['x-component-props'];
   const justifyAlign = align || 'flex-end';
 
   const changeFilterVisible = () => {
@@ -31,15 +36,17 @@ const Search = props => {
   };
   return (
     <Space size={20} style={{ justifyContent: justifyAlign, width: '100%' }}>
-      <Input.Search
-        value={props.value || ''}
-        onChange={e => props.mutators.change(e.target.value)}
-        onSearch={(_, e) => {
-          e.preventDefault();
-          props.form.submit();
-        }}
-        {...rest}
-      />
+      <Tooltip title={tip}>
+        <Input.Search
+          value={props.value || ''}
+          onChange={e => props.mutators.change(e.target.value)}
+          onSearch={(_, e) => {
+            e.preventDefault();
+            props.form.submit();
+          }}
+          {...rest}
+        />
+      </Tooltip>
       {advanced && (
         <Button onClick={changeFilterVisible}>
           高级筛选

src/components/NiceForm/components/SmilingFace.tsx

+import React from 'react';
+import Mood from '@/components/Mood';
+
+interface SmilingFaceProps {
+  value: number;
+};
+
+const SmilingFace: React.FC<SmilingFaceProps> = ({
+  value, 
+}) => {
+  let node = null;
+
+  switch (value) {
+    case 1: 
+    case 2: {
+      node = (
+        <>
+          <Mood type="sad" />
+          <span>差评</span>
+        </>
+      );
+      break;
+    }
+
+    case 3: {
+      node = (
+        <>
+          <Mood type="notBad" />
+          <span>中评</span>
+        </>
+      );
+      break;
+    }
+
+    case 4: 
+    case 5: {
+      node = (
+        <>
+          <Mood type="smile" />
+          <span>好评</span>
+        </>
+      );
+      break;
+    }
+  
+    default:
+      break;
+  }
+  return node;
+};
+
+export default SmilingFace;
\ No newline at end of file

src/components/NiceForm/index.tsx

@@ -24,7 +24,8 @@ import TableTagList from './components/TableTagList';
 import './index.less'
 import { Checkbox, Radio } from '@formily/antd-components';
 import DateSelect from './components/DateSelect';
-import VirtualChildren from './components/VirtualChildren'
+import VirtualChildren from './components/VirtualChildren';
+import SmilingFace from './components/SmilingFace';
 import { useLinkComponentProps } from './linkages/linkComponentProps';
 import Loading from '../Loading';
 
@@ -95,7 +96,8 @@ export const componentExport = {
   DateRangePicker: DatePicker.RangePicker,
   TableTagList,
   DateSelect,
-  VirtualChildren,
+  VirtualChildren, 
+  SmilingFace, 
   RadioGroup: Radio.Group
 }
 const NiceForm: React.FC<NiceFormProps> = props => {

src/components/StatusTag/index.less

+.tag {
+  line-height: 22px;
+  padding: 0 8px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #00B37A;
+  background: #EBF7F2;
+  border-radius: 4px;
+
+  &__success {
+    color: #00B37A;
+    background: #EBF7F2;
+  }
+  
+  &__warnning {
+    color: #FF991F;
+    background: #FFFAE6;
+  }
+  
+  &__default {
+    color: #42526E;
+    background: #F4F5F7;
+  }
+
+  &__danger {
+    color: #E63F3B;
+    background: #FFEBE6;
+  }
+  
+  &__primary {
+    color: #3F7ED2;
+    background: #F0F8FF;
+  }
+}
\ No newline at end of file

src/components/StatusTag/index.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2020-08-31 17:52:14
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2020-08-31 18:59:18
+ * @Description: 状态 tag
+ */
+import React from 'react';
+import classNames from 'classnames';
+import styles from './index.less';
+
+interface StatusTagProps {
+  type: 'success' | 'warnning' | 'default' | 'danger' | 'primary';
+  title: string;
+};
+
+const StatusTag: React.FC<StatusTagProps> = ({ type, title }) => {
+  const cls = classNames(styles.tag, styles[`tag__${type}`]);
+  return (
+    <span className={cls}>{title}</span>
+  );
+};
+
+export default StatusTag;
\ No newline at end of file

src/locales/zh-CN/menu.ts

@@ -2,7 +2,7 @@
  * @Author: LeeJiancong
  * @Date: 2020-07-13 14:08:50
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2020-09-22 10:30:48
+ * @LastEditTime: 2020-09-22 11:37:58
  */
 
 export default {
@@ -172,6 +172,7 @@ export default {
   // 供应商评价
   'menu.tranactionAbility.supplierEvaluation': '供应会员评价管理',
   'menu.tranactionAbility.supplierEvaluation.unevaluated': '待评价订单',
+  'menu.tranactionAbility.supplierEvaluation.evaluate': '评价',
   'menu.tranactionAbility.supplierEvaluation.analysis': '评价统计',
   'menu.tranactionAbility.supplierEvaluation.received': '收到的评价',
   'menu.tranactionAbility.supplierEvaluation.sent': '发出的评价',

src/pages/member/components/SincerityInfo/index.tsx

@@ -10,14 +10,12 @@ import {
 } from 'antd';
 import {
   QuestionCircleOutlined,
-  SmileFilled,
-  MehFilled,
-  FrownFilled,
 } from '@ant-design/icons';
 import PolymericTable from '@/components/PolymericTable';
 import { EditableColumns } from '@/components/PolymericTable/interface';
 import { Pie } from '@/components/Charts';
 import MellowCard from '@/components/MellowCard';
+import Mood from '@/components/Mood';
 import equity5 from '@/assets/imgs/equity-5.png';
 import styles from './index.less';
 
@@ -54,33 +52,6 @@ const ContentBox: React.FC<ContentBoxProps> = ({
     </div>
   );
 
-interface MoodProps {
-  type: 'smile' | 'notBad' | 'sad';
-};
-
-const Mood: React.FC<MoodProps> = ({ type = 'smile' }) => {
-  let node = null;
-
-  switch (type) {
-    case 'smile':
-      node = <><SmileFilled style={{ color: '#41CC9E', marginRight: 4 }} /> 好评</>;
-      break;
-      
-    case 'notBad':
-      node = <><MehFilled style={{ color: '#FFC400', marginRight: 4 }} /> 中评</>;
-      break;
-
-    case 'sad':
-      node = <><FrownFilled style={{ color: '#EF6260', marginRight: 4 }} /> 差评</>;
-      break;
-
-    default:
-      break;
-  }
-
-  return node;
-};
-
 const PAGE_SIZE = 5;
 
 export interface BasicInfo {

src/pages/transaction/supplierEvaluation/analysis/index.less

+.tabs {
+  :global {
+    .ant-tabs-nav {
+      margin: 0 0 24px 0;
+      
+      &::before {
+        border-bottom: none;
+      }
+    }
+  }
+}
\ No newline at end of file

src/pages/transaction/supplierEvaluation/analysis/index.tsx

 import React from 'react';
+import { Tabs, Row, Col, Button } from 'antd';
+import { createFormActions } from '@formily/antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import MellowCard from '@/components/MellowCard';
+import PolymericTable from '@/components/PolymericTable';
+import { EditableColumns } from '@/components/PolymericTable/interface';
+import { Pie } from '@/components/Charts';
+import Mood from '@/components/Mood';
+import NiceForm from '@/components/NiceForm';
+import { searchSchema } from './schema';
+import Shelves from '../components/Shelves';
+import RecordList from '../components/RecordList';
 import styles from './index.less';
 
+const { TabPane } = Tabs;
+
+const receivedFormActions = createFormActions();
+const sentFormActions = createFormActions();
+
 const Analysis: React.FC = () => {
+  const evaluateColumns: EditableColumns[] = [
+    {
+      title: ' ',
+      dataIndex: 'title',
+      align: 'center',
+    },
+    {
+      title: '最近7天',
+      dataIndex: 'last7days',
+      align: 'center',
+    },
+    {
+      title: '最近30天',
+      dataIndex: 'last30days',
+      align: 'center',
+    },
+    {
+      title: '最近180天',
+      dataIndex: 'last180days',
+      align: 'center',
+    },
+    {
+      title: '180天前',
+      dataIndex: 'before180days',
+      align: 'center',
+    },
+  ];
+
+  const evaluatePie = [
+    {
+      x: `好评  30%`, 
+      y: 100, 
+    },
+    {
+      x: `中评  20%`, 
+      y: 50, 
+    },
+    {
+      x: `差评  10%`, 
+      y: 10, 
+    },
+  ];
+
+  const evaluate = [
+    {
+      id: 1,
+      title: (<Mood type="smile" />),
+      last7days: 10, 
+      last30days: 20, 
+      last180days: 30, 
+      before180days: 30, 
+    },
+    {
+      id: 2, 
+      title: (<Mood type="notBad" />), 
+      last7days: 10, 
+      last30days: 20, 
+      last180days: 30, 
+      before180days: 30,
+    },
+    {
+      id: 3,
+      title: (<Mood type="sad" />),
+      last7days: 10, 
+      last30days: 20, 
+      last180days: 30, 
+      before180days: 30,
+    },
+  ];
+
   return (
-    <div>Analysis</div>
+    <PageHeaderWrapper>
+      <MellowCard
+        bodyStyle={{
+          padding: '0 24px 24px', 
+        }}
+      >
+        <Tabs className={styles.tabs}>
+          <TabPane tab="概览" key="1">
+            <Shelves title="评价统计">
+              <Row gutter={24}>
+                <Col span={8}>
+                  <Pie
+                    hasLegend
+                    subTitle="累计评价"
+                    total={() => evaluatePie.reduce((pre, now) => now.y + pre, 0)}
+                    data={evaluatePie}
+                    height={200}
+                    colProps={{
+                      span: 8,
+                    }}
+                    colors={['#41CC9E', '#FFC400', '#EF6260']}
+                  />
+                </Col>
+
+                <Col span={16}>
+                  <PolymericTable
+                    dataSource={evaluate}
+                    columns={evaluateColumns}
+                    loading={false}
+                    pagination={null}
+                    rowClassName={() => styles['record-row']}
+                  />
+                </Col>
+              </Row>
+            </Shelves>
+
+            <Shelves title="评价记录">
+              <RecordList list={[]} />
+
+              <div 
+                style={{
+                  padding: '24px 0', 
+                  textAlign: 'center', 
+                }}
+              >
+                <Button>查看更多评论</Button>
+              </div>
+            </Shelves>
+          </TabPane>
+          <TabPane tab="收到的评价" key="2">
+            <NiceForm
+              actions={receivedFormActions}
+              onSubmit={values => {}}
+              effects={($, actions) => {
+
+              }}
+              schema={searchSchema}
+            />
+
+            <RecordList list={[]} />
+          </TabPane>
+          <TabPane tab="发出的评价" key="3">
+            <NiceForm
+                actions={sentFormActions}
+                onSubmit={values => {}}
+                effects={($, actions) => {
+
+                }}
+                schema={searchSchema}
+              />
+
+            <RecordList list={[]} />
+          </TabPane>
+        </Tabs>
+      </MellowCard>
+    </PageHeaderWrapper>
   );
 };
 

src/pages/transaction/supplierEvaluation/analysis/schema/index.ts

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2020-09-22 20:34:49
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2020-09-22 20:52:53
+ * @Description: 
+ */
+import { ISchema } from '@formily/antd';
+
+export const searchSchema: ISchema = {
+  type: 'object',
+  properties: {
+    megaLayout: {
+      type: 'object',
+      'x-component': 'Mega-Layout',
+      'x-component-props': {
+        inline: true, 
+      },
+      properties: {
+        star: {
+          type: 'string',
+          enum: [], 
+          'x-component-props': {
+            placeholder: '评论星级',
+            allowClear: true, 
+            style: {
+              width: 206, 
+            },
+          },
+        },
+        '[startDate, endDate]': {
+          type: 'string',
+          default: '',
+          'x-component': 'dateSelect', 
+          'x-component-props': {
+            placeholder: '交易时间', 
+            allowClear: true, 
+            style: {
+              width: 206, 
+            },
+          },
+        },
+        name: {
+          type: 'string',
+          'x-component': 'Search',
+          'x-component-props': {
+            placeholder: '搜索',
+            align: 'flex-left', 
+            advanced: false,
+          },
+        },
+      }, 
+    },
+  },
+};
\ No newline at end of file

src/pages/transaction/supplierEvaluation/components/EvaluationList/index.tsx

+import React from 'react';
+import { 
+  Row, 
+  Col, 
+  Button, 
+} from 'antd';
+import styled from 'styled-components';
+import {
+  SchemaForm,
+  SchemaField,
+  SchemaMarkupField as Field
+} from '@formily/antd';
+import { ArrayList } from '@formily/react-shared-components';
+import { toArr, isFn, FormPath } from '@formily/shared';
+import SmilingFace from '@/components/NiceForm/components/SmilingFace';
+
+const ArrayComponents = {
+  CircleButton: props => <Button {...props} />,
+  TextButton: props => <Button text {...props} />,
+  AdditionIcon: () => <div>+Add</div>,
+  RemoveIcon: () => <div>Remove</div>,
+  MoveDownIcon: () => <div>Down</div>,
+  MoveUpIcon: () => <div>Up</div>
+};
+
+const RowStyleLayout = styled(props => <div {...props} />)`
+  padding: 24px 64px 24px 24px;
+  background: #ffffff;
+
+  .ant-btn {
+    margin-right: 16px;
+  }
+
+  .ant-form-item {
+    display: flex;
+    margin-right: 16px;
+    margin-bottom: 16px;
+  }
+
+  > .ant-form-item {
+    margin-bottom: 0;
+    margin-right: 0;
+  }
+
+  .goodInfo {
+    display: flex;
+    align-items: align;
+
+    &-left {
+      flex-shrink: 0;
+      margin-right: 16px;
+      width: 100px;
+      height: 100px;
+
+      > img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
+    &-right {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    &-title {
+      line-height: 14px;
+      margin-bottom: 18px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #303133;
+    }
+    
+    &-desc {
+      line-height: 12px;
+      margin-bottom: 16px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #909399;
+    }
+    
+    &-price {
+      line-height: 14px;
+      font-size: 14px;
+      font-weight: 500;
+      color: #303133;
+    }
+  }
+
+  .main {
+    position: relative;
+    padding-left: 24px;
+
+    > .ant-form-item {
+      margin-bottom: 0;
+      margin-right: 0;
+    }
+
+    ::after {
+      content: ' '; 
+      display: block;
+      position: absolute;
+      top: 6%;
+      left: 0;
+      bottom: 6%;
+      border-left: 1px dashed #EEF0F3;
+    }
+  }
+`;
+
+const EvaluationList = props => {
+  const { value, schema, className, editable, path, mutators } = props;
+  const {
+    renderAddition,
+    renderRemove,
+    renderMoveDown,
+    renderMoveUp,
+    renderEmpty,
+    renderExtraOperations,
+    ...componentProps
+  } = schema.getExtendsComponentProps() || {};
+
+  return (
+    <ArrayList
+      value={value}
+      minItems={schema.minItems}
+      maxItems={schema.maxItems}
+      editable={editable}
+      components={ArrayComponents}
+    >
+      {toArr(value).map((item, index) => {
+        return (
+          <RowStyleLayout {...componentProps} key={index}>
+            <Row align="middle">
+              <Col span={10}>
+                <div className="goodInfo">
+                  <div className="goodInfo-left">
+                    <img src={item.good ? item.good.pic : ''} />
+                  </div>
+                  <div className="goodInfo-right">
+                    <div className="goodInfo-title">进口头层黄牛皮荔枝纹/红色/XL</div>
+                    <div className="goodInfo-desc">20 平方英尺</div>
+                    <div className="goodInfo-price">¥ 400.00</div>
+                  </div>
+                </div>
+              </Col>
+              <Col span={10}>
+                <div className="main">
+                  <SchemaField path={FormPath.parse(path).concat(index)} />
+                </div>
+              </Col>
+              <Col span={4}>
+                <div style={{ textAlign: 'right' }}>
+                  <SmilingFace value={2} />
+                </div>
+              </Col>
+            </Row>
+          </RowStyleLayout>
+        )
+      })}
+    </ArrayList>
+  )
+}
+
+EvaluationList.isFieldComponent = true;
+
+export default EvaluationList;
\ No newline at end of file

src/pages/transaction/supplierEvaluation/components/RecordList/index.less

+@import '../../../../../global/styles/utils.less';
+
+.record {
+  padding: 0;
+  margin: 0;
+  
+  &-item {
+    padding: 14px 16px;
+    line-height: 14px;
+    display: flex;
+    background: #FAFBFC;
+    color: #303133;
+
+    &-good {
+      width: 25%;
+
+      &-name {
+        line-height: 14px;
+        margin-bottom: 13px;
+        font-size: 14px;
+        font-weight: 400;
+      }
+
+      &-price {
+        margin-right: 16px;
+        font-weight: 500;
+      }
+
+      &-desc {
+        line-height: 12px;
+        font-weight: 400;
+        color: #909399;
+      }
+    }
+
+    &-extra {
+      width: 20%;
+
+      &-item {
+        display: flex;
+        align-items: center;
+
+        &-label {
+          flex: 0 0 60px;
+          line-height: 12px;
+          font-size: 12px;
+          font-weight: 400;
+          color: #909399;
+        }
+
+        &-control {
+          flex: 1;
+        }
+
+        &:not(:last-child) {
+          margin-bottom: 13px;
+        }
+      }
+    }
+
+    &-comment {
+      width: 40%;
+
+      &-main {
+        margin-top: 6px;
+        line-height: 14px;
+        font-weight: 400;
+        color: #303133;
+        .textOverflow();
+      }
+    }
+
+    &-actions {
+      flex: 1;
+      text-align: center;
+    }
+
+    &:not(:last-child) {
+      margin-bottom: 16px;
+    }
+  }
+}
\ No newline at end of file

src/pages/transaction/supplierEvaluation/components/RecordList/index.tsx

+import React from 'react';
+import { Button, Rate } from 'antd';
+import styles from './index.less';
+
+interface RecordListProps {
+  list: [];
+};
+
+const RecordList: React.FC<RecordListProps> = () => {
+
+  return (
+    <ul className={styles.record}>
+      <li className={styles['record-item']}>
+        <div className={styles['record-item-good']}>
+          <div className={styles['record-item-good-name']}>
+            进口头层黄牛皮荔枝纹/红色/XL
+          </div>
+          <div>
+            <span className={styles['record-item-good-price']}>¥400.00</span>
+            <span className={styles['record-item-good-desc']}>20 平方英尺</span>
+          </div>
+        </div>
+        
+        <div className={styles['record-item-extra']}>
+          <div className={styles['record-item-extra-item']}>
+            <div className={styles['record-item-extra-item-label']}>
+              交易时间：
+            </div>  
+            <div className={styles['record-item-extra-item-control']}>
+              2020-05-20 17:09
+            </div>  
+          </div>
+          <div className={styles['record-item-extra-item']}>
+            <div className={styles['record-item-extra-item-label']}>
+              评价方：
+            </div>  
+            <div className={styles['record-item-extra-item-control']}>
+              温州龙昌手袋有限公司
+            </div>  
+          </div>
+        </div>
+        
+        <div className={styles['record-item-comment']}>
+          <Rate value={2} disabled />
+          <div className={styles['record-item-comment-main']}>
+            付款准时，合作愉快。付款准时，合作愉快。付款准时，合作愉快。付款准时，合作愉快。付款准时…
+          </div>
+        </div>
+        
+        <div className={styles['record-item-actions']}>
+          <Button type="link">查看</Button>
+        </div>
+      </li>
+    </ul>
+  );
+};
+
+export default RecordList;
\ No newline at end of file

src/pages/transaction/supplierEvaluation/components/Shelves/index.less

+@import '../../../../../global/styles/index.less';
+
+.shelves {
+  &-title {
+    line-height: 14px;
+    padding: 12px;
+    position: relative;
+    font-size: 14px;
+    font-weight: 400;
+    color: #606266;
+    border-bottom: 1px solid #EEF0F3;
+
+    &::after {
+      content: ' ';
+      display: block;
+      width: 2px;
+      position: absolute;
+      top: 30%;
+      left: 0;
+      bottom: 30%;
+      background: @primary-color;
+    }
+  }
+
+  &-content {
+    padding: 30px 0;
+  }
+}
\ No newline at end of file

src/pages/transaction/supplierEvaluation/components/Shelves/index.tsx

+import React from 'react';
+import styles from './index.less';
+
+interface ShelvesProps {
+  title?: string;
+  children?: React.ReactNode;
+};
+
+const Shelves: React.FC<ShelvesProps> = ({
+  title = '标题', 
+  children, 
+}) => {
+  return (
+    <div className={styles.shelves}>
+      <div className={styles['shelves-title']}>{title}</div>
+      <div className={styles['shelves-content']}>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default Shelves;
\ No newline at end of file

src/pages/transaction/supplierEvaluation/unevaluated/evaluate.tsx

+import React from 'react';
+import { 
+  PageHeader, 
+  Descriptions, 
+  Card, 
+  Spin, 
+  Button, 
+} from 'antd';
+import { FormOutlined } from '@ant-design/icons';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { history } from 'umi';
+import { createFormActions } from '@formily/antd';
+import { Rating } from '@formily/antd-components';
+import AvatarWrap from '@/components/AvatarWrap';
+import NiceForm from '@/components/NiceForm';
+import { evaluateSchema } from './schema';
+import EvaluationList from '../components/EvaluationList';
+import styles from './evaluate.less';
+
+const formActions = createFormActions();
+
+const EvaluateOrder: React.FC = () => {
+
+  const handleSubmit = values => {
+    console.log('values', values);
+  };
+
+  return (
+    <PageHeaderWrapper
+      title={
+        <>
+          <PageHeader
+            style={{ padding: '0' }}
+            onBack={() => history.goBack()}
+            title={
+              <AvatarWrap 
+                info={{
+                  aloneTxt: '单', 
+                  name: '订单号：DPTY12'
+                }}
+              />
+            } 
+            extra={(
+              <>
+                <Button
+                  type="primary"
+                  icon={<FormOutlined />}
+                  onClick={() => {}}
+                >
+                  发布
+                </Button>
+              </>
+            )}
+          >
+            <Descriptions 
+              size="small" 
+              column={3} 
+              style={{ 
+                padding: '0 32px', 
+              }}
+            >
+              <Descriptions.Item label="采购会员">BPTY12</Descriptions.Item>
+              <Descriptions.Item label="下单时间" span={2}>2020-08-25 08:49</Descriptions.Item>
+            </Descriptions>
+          </PageHeader>
+        </>
+      }
+    >
+      <NiceForm
+        actions={formActions}
+        onSubmit={handleSubmit}
+        components={{
+          EvaluationList, 
+          Rating, 
+        }}
+        effects={($, actions) => {
+          
+        }}
+        schema={evaluateSchema}
+      />
+    </PageHeaderWrapper>
+  );
+};
+
+export default EvaluateOrder;
\ No newline at end of file

src/pages/transaction/supplierEvaluation/unevaluated/index.tsx

-import React from 'react';
+import React, { useState, useRef } from 'react';
+import { Card, Badge, Button } from 'antd';
+import { StandardTable } from 'god';
+import { ColumnType } from 'antd/lib/table/interface';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { createFormActions } from '@formily/antd';
+import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
+import { FORM_FILTER_PATH } from '@/formSchema/const';
+import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
+import { Link } from 'umi';
+import EyePreview from '@/components/EyePreview';
+import NiceForm from '@/components/NiceForm';
+import StatusTag from '@/components/StatusTag';
+import { listSearchSchema } from './schema';
 import styles from './index.less';
 
+const formActions = createFormActions();
+
+const mock = [
+  {
+    orderNo: 'DPTY12', 
+    abstract: '进口头层黄牛皮荔枝纹', 
+    member: '广州白马皮具交易有限公司', 
+    created: '2020-09-22 11:16:00', 
+    amount: '¥ 50,000.00', 
+    orderType: '现货采购', 
+    outerStatusName: '已完成', 
+    innerStatusName: '已完成', 
+  },
+  {
+    orderNo: 'DPTY13', 
+    abstract: '进口头层黄牛皮荔枝纹', 
+    member: '广州白马皮具交易有限公司', 
+    created: '2020-09-22 11:16:00', 
+    amount: '¥ 50,000.00', 
+    orderType: '现货采购', 
+    outerStatusName: '已完成', 
+    innerStatusName: '已完成', 
+  },
+];
+
 const Unevaluated: React.FC = () => {
+
+  const ref = useRef<any>({});
+
+  const defaultColumns: ColumnType<any>[] = [
+    {
+      title: '订单号',
+      dataIndex: 'orderNo',
+      align: 'center',
+      render: (text, record) => (
+        <EyePreview
+          url={``}
+        >
+          {text}
+        </EyePreview>
+      ),
+    },
+    {
+      title: '订单摘要',
+      dataIndex: 'abstract',
+      align: 'center',
+    },
+    {
+      title: '采购会员',
+      dataIndex: 'member',
+      align: 'center',
+      render: (text, record) => <>{text}</>,
+    },
+    {
+      title: '下单时间',
+      dataIndex: 'created',
+      align: 'center',
+      render: (text, record) => <>{text}</>,
+    },
+    {
+      title: '订单总额',
+      dataIndex: 'amount',
+      align: 'center',
+    },
+    {
+      title: '订单类型',
+      dataIndex: 'orderType',
+      align: 'center',
+    },
+    {
+      title: '外部状态',
+      dataIndex: 'outerStatusName',
+      align: 'center',
+      filters: [],
+      onFilter: (value, record) => record.outerStatus === value,
+      render: (text, record) => (
+        <StatusTag type="warnning" title="已完成" />
+      ),
+    },
+    {
+      title: '内部状态',
+      dataIndex: 'innerStatusName',
+      align: 'center',
+      filters: [],
+      onFilter: (value, record) => record.innerStatus === value,
+      render: (text, record) => <Badge color="#42526E" text="已完成" />,
+    },
+    {
+      title: '操作',
+      dataIndex: 'option',
+      align: 'center',
+      render: (text, record) => (
+        <>
+          <Link to={`/memberCenter/tranactionAbility/supplierEvaluation/unevaluated/evaluate`}>
+            <Button 
+              type="link"
+            >
+              评价
+            </Button>
+          </Link>
+        </>
+      ),
+    },
+  ];
+
+  const [columns, setColumns] = useState<any[]>(defaultColumns);
+
+  const fetchListData = (params: any) => {
+    return Promise.resolve({
+      total: 2, 
+      data: mock, 
+    });
+  };
+
+  // 初始化高级筛选选项
+  const fetchSelectOptions = async () => {
+    return {};
+  };
+
   return (
-    <div>Unevaluated</div>
+    <PageHeaderWrapper>
+      <Card>
+        <StandardTable
+          tableProps={{
+            rowKey: 'orderNo',
+          }}
+          columns={columns}
+          currentRef={ref}
+          fetchTableData={(params: any) => fetchListData(params)}
+          controlRender={
+            <NiceForm
+              actions={formActions}
+              onSubmit={values => ref.current.reload(values)}
+              effects={($, actions) => {
+                useStateFilterSearchLinkageEffect(
+                  $,
+                  actions,
+                  'name',
+                  FORM_FILTER_PATH,
+                );
+                useAsyncInitSelect(
+                  ['innerStatus', 'outerStatus'],
+                  fetchSelectOptions,
+                );
+              }}
+              schema={listSearchSchema}
+            />
+          }
+        />
+      </Card>
+    </PageHeaderWrapper>
   );
 };
 

src/pages/transaction/supplierEvaluation/unevaluated/schema/index.tsx

+import { ISchema } from '@formily/antd';
+import { FORM_FILTER_PATH } from '@/formSchema/const';
+
+export const listSearchSchema: ISchema = {
+  type: 'object',
+  properties: {
+    megaLayout: {
+      type: 'object',
+      'x-component': 'mega-layout',
+      properties: {
+        name: {
+          type: 'string',
+          'x-component': 'Search',
+          'x-component-props': {
+            placeholder: '搜索',
+            align: 'flex-left', 
+            tip: '输入 订单号、订单摘要 进行搜索', 
+          },
+        },
+        [FORM_FILTER_PATH]: {
+          type: 'object',
+          'x-component': 'mega-layout',
+          'x-component-props': {
+            grid: true,
+            full: true,
+            autoRow: true,
+            columns: 6,
+          },
+          properties: {
+            memberTypeId: {
+              type: 'string',
+              default: undefined,
+              'x-component-props': {
+                placeholder: '采购会员',
+                allowClear: true, 
+              },
+            },
+            '[startDate, endDate]': {
+              type: 'string',
+              default: '',
+              'x-component': 'dateSelect', 
+              'x-component-props': {
+                placeholder: '下单时间', 
+                allowClear: true, 
+              },
+            },
+            orderType: {
+              type: 'string',
+              default: undefined,
+              enum: [],
+              'x-component-props': {
+                placeholder: '订单类型', 
+                allowClear: true, 
+              },
+            },
+            outerStatus: {
+              type: 'string',
+              default: undefined,
+              enum: [],
+              'x-component-props': {
+                placeholder: '外部状态(全部)',
+                allowClear: true, 
+              },
+            },
+            innerStatus: {
+              type: 'string',
+              default: undefined,
+              enum: [],
+              'x-component-props': {
+                placeholder: '内部状态(全部)',
+                allowClear: true, 
+              },
+            },
+            submit: {
+              'x-component': 'Submit',
+              'x-mega-props': {
+                span: 1,
+              },
+              'x-component-props': {
+                children: '查询',
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+
+export const evaluateSchema: ISchema = {
+  type: 'object', 
+  properties: {
+    comments: {
+      type: 'array', 
+      'x-component': 'EvaluationList', 
+      default: [
+        {
+          name: '杰尼', 
+          age: 24, 
+          small: 1,
+        }, 
+      ], 
+      items: {
+        type: 'object', 
+        properties: {
+          MEGA_LADYOUT: {
+            type: 'object', 
+            'x-component': 'Mega-Layout', 
+            'x-component-props': {
+              labelCol: 6, 
+              labelAlign: 'left', 
+            },
+            properties: {
+              star: {
+                title: '满意程度',
+                required: true, 
+                'x-component': 'Rating', 
+                'x-component-props': {
+                  allowHalf: false, 
+                },
+              }, 
+              comment: {
+                type: 'string', 
+                title: '评价', 
+                required: true, 
+                'x-component': 'TextArea', 
+                'x-component-props': {
+                  rows: 4, 
+                },
+              }, 
+              picture: {
+                type: 'string', 
+                title: '图片', 
+                required: true, 
+                'x-component': 'CustomUpload', 
+                'x-component-props': {
+                  
+                },
+              }, 
+            },
+          },
+        },
+      },
+    },
+  },
+};
\ No newline at end of file