新增commobilePadList路由；

zhangzzzz
1 parent a5f05473
Showing 6 changed files with 1031 additions and 2 deletions
src/mobile/common/CommobileListEvent.js
src/mobile/common/CommobilePadBill/index.less
src/mobile/common/CommobilePadList/index.js
src/mobile/common/CommobilePadList/index.less
src/routes/mobile/IndexMobile.js
src/routes/mobile/common/commobilePadList.js
@@ -387,8 +387,39 @@ export default (ChildComponent) =&gt; {
       } else if (name === 'BtnBatchCancelExamine') {
         /* 批量销审 */
         this.handleBatchCancelExamine();
+      } else if (name === 'BtnAdd') {
+        this.handleAdd();
       }
     };
+
+     /**  点击新增按钮   */
+    handleAdd = () => {
+      const {
+        slaveConfig, dispatch, slaveFilterCondition, slavePagination, slaveOrderBy, formRoute,
+      } = this.props;
+      const picArr = slaveConfig.gdsconfigformslave.filter(item => (item.sName === 'picArr'));
+      const getData = this.handleGetData;
+      if (picArr.length > 0) {
+        let sActiveId = '';
+        if (picArr[0].sName === 'picArr' && picArr[0].sDropDownType === 'picArr') {
+          [{ sActiveId }] = picArr;
+        }
+        const sNameUrl = `${commonConfig.server_host}gdsmodule/getGdsmoduleById/${sActiveId}?sModelsId=${sActiveId}&sName=${formRoute}`;
+        let copyTo = {};
+
+        dispatch({
+          type: 'content/onRouterMobile',
+          payload: {
+            urlKey: sNameUrl,
+            sModelsId: sActiveId,
+            copyToData: undefined,
+            copyTo,
+            refresh: getData.bind(this, slaveConfig, slaveFilterCondition, commonUtils.isEmpty(slavePagination) ? 0 : slavePagination.current, slaveOrderBy), /*   刷新方法   */
+          },
+        });
+      }
+    };
+
     handleForceComplete = () => {
       const { slaveSelectedRowKeys, app } = this.props;
       if (commonUtils.isEmptyObject(slaveSelectedRowKeys)) {
@@ -127,7 +127,7 @@
     .ant-form-item-control {
       flex-basis: 100px;
-      max-width: 100%;
+      max-width: calc(100% - 160px);
       flex-grow: 1;
       padding: 0 !important;
     }
+/* eslint-disable */
+/* eslint-disable prefer-destructuring */
+/* eslint no-dupe-keys: 0, no-mixed-operators: 0 */
+import React from 'react';
+import { ListView, Checkbox, Modal, Toast, Flex } from 'antd-mobile-v2';
+import { createForm } from 'rc-form';
+import 'antd-mobile-v2/dist/antd-mobile.css';
+import commonConfig from '../../../utils/config';
+import * as commonUtils from '../../../utils/utils';
+import CommobileBase from '../../../mobile/common/CommobileBase';
+import CommobileListEvent from '../CommobileListEvent';
+import CommobileSearchComponent from '../CommobileSearchComponent';
+import CommobileToolBar from '../CommobileToolBar';
+import CommonbileStep from '../CommobileStep';
+import StaticEditTable from "@/components/Common/CommonTable"; /* 可编辑表格 */
+import SearchComponent from "@/components/Common/SearchComponent";
+import * as commonBusiness from "@/components/Common/commonBusiness"; /* 单据业务功能 */
+import * as commonFunc from "@/components/Common/commonFunc";
+import styles from '../../mobile.less';
+import stylesNew from './index.less';
+import preView from '../../components/preView';
+import { useEffect } from 'react';
+
+const CheckboxItem = Checkbox.CheckboxItem;
+const AgreeItem = Checkbox.AgreeItem;
+
+const dataSource = new ListView.DataSource({
+  rowHasChanged: (row1, row2) => row2,
+});
+
+class CommobileList extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoading: false,
+      partNameStatusVisible: false, /* 查看进度 */
+      sSlaveId: '',
+    };
+  }
+
+  onEndReached = async () => {
+    if ((this.props.slavePagination.current + 1) <= Math.ceil(this.props.slavePagination.total / commonConfig.pageSize)) {
+      const { slaveFilterCondition } = this.props;
+      const addState = await this.props.onGetData(this.props.slaveConfig, slaveFilterCondition, this.props.slavePagination.current + 1, true);
+      addState.slaveData = this.props.slaveData.concat(addState.slaveData);
+      this.props.onSaveState({ ...addState });
+    }
+  }
+  onClose = key => () => {
+    this.setState({
+      [key]: false,
+    });
+  }
+  onModalShow = key => () => {
+    this.setState({
+      [key]: true,
+    });
+  }
+  handlePartNameStatusLook = (sSlaveId) => {
+    if (commonUtils.isNotEmptyObject(sSlaveId)) {
+      this.setState({
+        partNameStatusVisible: true,
+        sSlaveId,
+      });
+    } else {
+      Toast.fail('请选择要查看的工单', 1);
+    }
+  }
+  /* 列表弹出详情 */
+  handleDoubleClick = (rowData) => {
+    this.props.onDoubleClick(rowData);
+  }
+
+  padTitles = (titles) => {
+    return titles.padEnd(4, ' ') + '：';
+  }
+  // topHeight = (value) => {
+  //   let subHeight = 0;
+  //   if ( value % 2 === 0 ) {
+  //     subHeight = ( value / 2 ) * 22;
+  //   } else {
+  //     subHeight = (Math.floor(value / 2) + 1) * 22;
+  //   }
+  //   return subHeight;
+  // }
+
+  render() {
+    return (
+      <>
+        <div style={{ display: 'none' }}><CommobileSearchComponent {...this.props} showScan="true" /></div>
+        <CommobilePadListComponent {...this.props} />
+      </>
+    );
+
+    const {
+      slaveConfig, slaveData: slaveDataOld, slaveTotal, slaveSelectedRowKeys: slaveSelectedRowKeysOld, onReturnForm,
+    } = this.props;
+    const slaveDataOld2 = slaveDataOld === undefined ? [] : slaveDataOld;
+    const slaveData = dataSource.cloneWithRows(slaveDataOld2);
+    const slaveSelectedRowKeys = slaveSelectedRowKeysOld === undefined ? [] : slaveSelectedRowKeysOld;
+    const f1 = commonUtils.isEmptyObject(slaveConfig) ? {} : slaveConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '')[0];
+    const f2 = commonUtils.isEmptyObject(slaveConfig) ? {} : slaveConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '')[1];
+    const f3 = commonUtils.isEmptyObject(slaveConfig) ? {} : slaveConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '')[2];
+    const f4 = commonUtils.isEmptyObject(slaveConfig) ? {} : slaveConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '')[3];
+    const f5 = commonUtils.isEmptyObject(slaveConfig) ? {} : slaveConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '')[4];
+    const f6 = commonUtils.isEmptyObject(slaveConfig) ? {} : slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'printPdf')[0];
+    const f7 = commonUtils.isEmptyObject(slaveConfig) ? {} : slaveConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName === 'sPartNameStatus')[0]; /* 查看进度 */
+    const separator = (sectionID, rowID) => (
+      <div
+        key={`${sectionID}-${rowID}`}
+        style={{
+          backgroundColor: '#F5F5F9',
+          height: 6,
+          borderTop: '1px solid #ECECED',
+          borderBottom: '1px solid #ECECED',
+        }}
+      />
+    );
+    const row = (rowData, sectionID, rowID) => {
+      const obj = JSON.parse(JSON.stringify(rowData)); // 深拷贝
+      if (commonUtils.isNotEmptyObject(f7)) {
+        // eslint-disable-next-line jsx-a11y/anchor-is-valid
+        obj[f7.sName] = (<span style={{ fontWeight: 'bold', fontSize: 14, color: '#888' }}><a onClick={this.handlePartNameStatusLook.bind(this, rowData.sSlaveId)}>查看工单状态</a></span>);
+      }
+      const f1View = f1 ?
+        (
+          <div
+            key={rowData.sSlaveId}
+            style={{
+              padding: '0 15px',
+              marginRight: 0,
+              lineHeight: '30px',
+              color: '#888',
+              fontSize: 16,
+              fontWeight: 'bold',
+              borderBottom: '1px solid #F6F6F6',
+            }}
+          >
+            {f1.showName}:<span style={{ fontSize: 16, color: '#000', paddingLeft: '6px' }}>{obj[f1.sName]}</span>
+            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+            <span style={{ float: 'right', fontSize: 14, color: '#888' }}>{obj[f2.sName]}</span>
+          </div>
+        ) : '';
+
+      return (
+        <div className={styles.CheckboxItem}>
+
+          {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+           onClick={() => this.props.onCopyToClick(rowData)} */}
+          {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
+          <li key={rowID} style={{ listStyle: 'none' }} onDoubleClick={() => this.handleDoubleClick(rowData)} >
+            {
+              true ?
+                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <CheckboxItem
+                    key={rowData.sSlaveId}
+                    checked={slaveSelectedRowKeys.findIndex(item => item === rowData.sSlaveId) > -1}
+                    onChange={e => this.props.onCheckboxChange(e, rowData.sSlaveId)}
+                    style={{
+                      width: f6 ? '76%' : '100%',
+                      marginRight: 0,
+                      lineHeight: '30px',
+                      color: '#888',
+                      fontSize: 16,
+                      fontWeight: 'bold',
+                      borderBottom: '1px solid #F6F6F6',
+                    }}
+                  >
+
+                    {f1 ? `${f1.showName}:` : ''}<span style={{ fontSize: 16, color: '#000', paddingLeft: '6px' }}>{obj[f1.sName]}</span>
+                    {f6 ? '' : f2 ? <span style={{ float: 'right', fontSize: 14, color: '#888' }}>{obj[f2.sName]}</span> : ''}
+                  </CheckboxItem>
+                  {
+                    // eslint-disable-next-line jsx-a11y/anchor-is-valid
+                    f6 ?
+                      <div
+                        style={{
+                          borderBottom: '1px solid #F6F6F6',
+                          fontSize: 14,
+                          lineHeight: '40px',
+                          fontWeight: 'bold',
+                          paddingRight: '15px',
+                        }}
+                      >
+                        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                        <a onClick={e => this.props.onPrintView(e, rowData, f6)}>{obj[f6.sName]}</a>
+                      </div> : ''
+                  }
+                </div> : f1View
+            }
+            {f3 ?
+              <div key={rowID} style={{ padding: '0 15px', fontSize: 17, color: '#000' }}>
+                <div style={{ display: 'flex', padding: '10px 0' }}>
+                  <div style={{ lineHeight: 1, width: '100%', fontSize: 16 }}>
+                    {/* { f6 ? f2 ? */}
+                    {/*  '' : '' : ''} */}
+                    {/* <div style={{ marginBottom: '12px' }} className={styles.wordsFlow}>{f3.showName}:<span style={{ color: '#000', paddingLeft: '6px' }}>{obj[f3.sName]}</span></div> */}
+                    {/* <div */}
+                    {/*  style={{ */}
+                    {/*  marginBottom: '12px', */}
+                    {/*  display: 'flex', */}
+                    {/*  alignItem: 'center', */}
+                    {/*  justifyContent: 'center', */}
+                    {/* }} */}
+                    {/*  className={styles.wordsFlow} */}
+                    {/* > */}
+                    {/*  {f4 ? */}
+                    {/*    <div style={{ width: '70%', display: 'flex' }} className={styles.wordsFlow}> */}
+                    {/*      <div>{f4.showName}:</div> */}
+                    {/*      <div style={{ whiteSpace: 'normal', paddingLeft: '6px' }}><span style={{ color: '#000' }}>{obj[f4.sName]}</span></div> */}
+                    {/*    </div> : '' */}
+                    {/*  } */}
+                    {/*  {f5 ? */}
+                    {/*    <div style={{ width: '30%', textAlign: 'right' }} className={styles.wordsFlow}> */}
+                    {/*      { */}
+                    {/*        f6 ? */}
+                    {/*          <span style={{ fontSize: '14px', color: '#108ee9' }} >{obj[f5.sName]}</span> : */}
+                    {/*          <span style={{ fontSize: '14px', color: '#000' }} >{obj[f5.sName]}</span> */}
+                    {/*      } */}
+                    {/*    </div> : '' */}
+                    {/*  } */}
+                    {/* </div> */}
+                    {slaveConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '').map((item, iIndex) => {
+                      if (iIndex > 1) {
+                        /**
+                         * 修改日期：2021-04-06
+                         * 修改人：吕杰
+                         * 区域：以下 - 行
+                         * BUG：1144
+                         * 说明：现实缩略图，点击展示预览弹窗
+                         * 原代码：
+                         */
+                        const bNotViewTitle = item.bNotViewTitle; /* 不显示标题 */
+                        const sMemo = item.sName.toLowerCase().endsWith('memo');
+                        const iRowNum = item.iColValue === 1 ? 24 : 1; /* 每个字段占的网格个数 ，网格总个数是24 */
+                        const iColValue = sMemo ? 24 : item.iColValue * iRowNum; /* 跨度 */
+                        const iRowValue = commonUtils.isEmptyNumber(item.iRowValue) || item.iRowValue === 0 ? 1 : item.iRowValue; /* 行高 */
+                        const height = iRowValue * 18; /* 行高 */
+                        const { token } = this.props.app;
+                        const dataUrl = []; /* 缩略图 */
+                        if ((item.showName === '缩略图' || item.sName === 'spicture') && obj[item.sName]) {
+                          obj[item.sName].split(',').forEach(url => dataUrl.push(`${commonConfig.file_host}file/download?savePathStr=${url}&sModelsId=100&token=${token}`));
+                        }
+                        if (dataUrl.length) {
+                          // eslint-disable-next-line
+                          return (<span>{item.showName}：<img onClick={(e) => preView(dataUrl, e)} src={dataUrl[0]} alt="img" style={{ width: '30px', height: '20px' }} /></span>);
+                        }
+                        const targetConfig = slaveConfig.gdsconfigformslave.filter(item2 => item2.sName === item.sName)[0];
+                        const customColor = targetConfig.sColorTerms ? targetConfig.sColorTerms : '#000';
+                        return (
+                          <div className={iColValue === 24 ? 'singleItem' : (iColValue === 12 ? 'doubleItem' : 'treeItem')} style={{ marginBottom: '12px', color: customColor }}>
+                            <Flex style={{ padding: 0, fontSize: '16px', alignItems: 'center' }} wrap={'wrap'} align='start'>
+                              {
+                                bNotViewTitle ?
+                                  <><Flex.Item style={{ fontWeight: 'bold', paddingLeft: '0.5px' }}> {obj[item.sName]}</Flex.Item></>
+                                  :
+                                  <><div className='flexTitle'>{item.showName}</div> <div style={{ fontWeight: 'bold' }}>：</div> <Flex.Item style={{ paddingLeft: '0.5px' }}> {obj[item.sName]}</Flex.Item></>
+                              }
+                            </Flex>
+                          </div>
+                        );
+                      } else {
+                        return ('');
+                      }
+                    })}
+                  </div>
+                </div>
+              </div> : ''
+            }
+          </li>
+        </div>
+      );
+    };
+    const BtnStyle = {
+      type: 'default',
+      color: 'red',
+      border: 'none',
+      backgroundColor: '#fff',
+      fontSize: '15px',
+    };
+    const divStyle = {
+      display: 'flex',
+      justifyContent: 'flex-end',
+      background: '#fff',
+    };
+    const stepProps = {
+      ...this.props,
+      sSlaveId: this.state.sSlaveId,
+    };
+    return (
+      <div
+        style={{
+          position: 'absolute',
+          top: '0',
+          bottom: '0',
+          overflow: 'hiddle',
+          width: '100%',
+        }}
+      >
+        <div
+          style={{
+            position: 'relative',
+            top: '0',
+          }}
+        >
+          <div
+            style={{
+              display: 'flex',
+              // justifyContent: 'center',
+              alignItems: 'flex-start',
+              flexWrap: 'wrap',
+            }}
+          >
+            {commonUtils.isEmptyArr(slaveTotal) ? '' : Object.keys(slaveTotal[0]).map((key) => {
+              const iIndex = slaveConfig.gdsconfigformslave.findIndex(item => item.sName === key);
+              if (iIndex > -1) {
+                return (
+                  <div style={{
+                    width: '50%',
+                    textAlign: 'center',
+                    textOverflow: 'ellipsis',
+                    overflow: 'hidden',
+                    whiteSpace: 'nowrap',
+                    padding: '0 15px',
+                    fontSize: '14px',
+                  }}
+                  >
+                    {`${slaveConfig.gdsconfigformslave[iIndex].showName}:${commonUtils.convertFixNum(commonUtils.convertStrToNumber(slaveTotal[0][key]), this.props.getFloatNum(key))}`}
+                  </div>
+                );
+              } else {
+                return ('');
+              }
+            })}
+          </div>
+          <div>
+            <CommobileSearchComponent {...this.props} showScan="true" />
+          </div>
+        </div>
+        <div className={styles.listViewStyle}>
+          <ListView
+            dataSource={slaveData}
+            renderFooter={() => (
+              <div style={{ padding: 30, textAlign: 'center' }}>
+                {this.state.isLoading ? '加载中...' : '加载完毕'}
+              </div>)}
+            renderRow={row}
+            renderSeparator={separator}
+            style={{
+              position: 'absolute',
+              width: '100%',
+              bottom: commonUtils.isEmptyObject(slaveConfig) ? 88 : 135,
+              top: 0,
+              overflow: 'auto',
+            }}
+            pageSize={commonConfig.pageSize}
+            onScroll={() => { }}
+            scrollRenderAheadDistance={500}
+            onEndReached={this.onEndReached}
+            onEndReachedThreshold={10}
+          />
+        </div>
+
+        {
+          commonUtils.isEmptyObject(slaveConfig) ? '' :
+            true ?
+              <div style={{
+                position: 'fixed',
+                bottom: '0',
+                width: '100%',
+                display: 'flex',
+                justifyContent: 'flex-start',
+                alignItem: 'center',
+                background: '#fff',
+                zIndex: '9999',
+              }}
+              >
+                {/*<AgreeItem*/}
+                {/*  data-seed="logId"*/}
+                {/*  disabled // 暂时全选禁止*/}
+                {/*  onChange={e => this.props.onSelectAllClick(e)}*/}
+                {/*  style={{*/}
+                {/*    background: '#fff',*/}
+                {/*    zIndex: '99999',*/}
+                {/*    width: '25%',*/}
+                {/*    display: 'flex',*/}
+                {/*    justifyContent: 'flex-start',*/}
+                {/*    alignItems: 'cneter',*/}
+                {/*  }}*/}
+                {/*>*/}
+                {/*  全选*/}
+                {/*</AgreeItem>*/}
+                <div className={styles.commobilelistToolBarBtn}>
+                  <CommobileToolBar {...this.props} btnStyle={BtnStyle} divStyle={divStyle} onButtonClick={this.props.onButtonClick} />
+                </div>
+              </div> : ''
+        }{f7 && commonUtils.isNotEmptyObject(this.state.sSlaveId) ?
+          <Modal
+            className="statusView"
+            popup
+            visible={this.state.partNameStatusVisible}
+            // closable
+            onClose={this.onClose('partNameStatusVisible')}
+            animationType="fade"
+            afterClose={() => { }}
+          >
+            <div className={styles.statusView_title}>
+              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+              <a style={{ float: 'left', fontSize: '1.5em' }} onClick={this.onClose('partNameStatusVisible')} >&lt;</a>
+              工单状态
+            </div>
+            <CommonbileStep {...stepProps} />
+          </Modal> : ''
+        }
+      </div>
+    );
+  }
+}
+
+const CommobilePadListComponent = (props) => {
+  const { form, onReturnForm, formData = [], slaveConfig = {} } = props;
+  if (!formData.length) return null;
+
+  useEffect(() => {
+    const slaveColumn = commonFunc.getHeaderConfig(slaveConfig);
+    props.onSaveState({ slaveColumn });
+  }, [])
+
+  onReturnForm(form);
+
+  const BtnStyle = {
+    type: 'default',
+    color: 'red',
+    border: 'none',
+    backgroundColor: '#fff',
+    fontSize: '15px',
+  };
+  const divStyle = {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    background: '#fff',
+  };
+
+  return (
+    <div>
+      <div className={stylesNew.search}>
+        <SearchComponent {...props} />
+      </div>
+      <div className={stylesNew.table}>
+        <TableComponent {...props} tableName="slave" />
+      </div>
+      <div className={styles.commobilelistToolBarBtn}>
+        <CommobileToolBar {...props} btnStyle={BtnStyle} divStyle={divStyle} onButtonClick={props.onButtonClick} />
+      </div>
+    </div>
+  )
+}
+
+// 表格
+const TableComponent = props => {
+  const { tableName } = props;
+  const baseProps = commonBusiness.getTableTypes(tableName, {
+    ...props,
+    noStorageColumn: true
+  });
+  const tableProps = {
+    ...baseProps,
+    // setOpterationColumn: "Y",
+    tableProps: {
+      // onChange: props.onTitleChange.bind(this, tableName),
+    },
+    fixedHeight: "calc(100vh - 230px)",
+    showTableName: false,
+    onSelectRowChange: (name, selectedRowKeys) => {
+      props.onSaveState({ [`${name}SelectedRowKeys`]: selectedRowKeys });
+    }
+  };
+  return <StaticEditTable {...tableProps} />;
+};
+
+const CommobileListComponent = createForm()(CommobileList);
+
+export default CommobileBase(CommobileListEvent(CommobileListComponent));
+.flex(@align-item: initial, @justify-content: initial) {
+  display: flex;
+  align-items: @align-item;
+  justify-content: @justify-content;
+}
+
+.size(@width: 100%, @height: 100%) {
+  width: @width;
+  height: @height;
+}
+
+.verifyScrapBill {
+  .size();
+}
+
+.toolBar {
+  position: relative;
+  .size(100%, 40px);
+  background: rgb(197, 197, 197);
+}
+
+.content {
+  .size();
+  .flex(center, center);
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.bakTools {
+  .size(auto, 100%);
+  .flex(center);
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  :global {
+    .ant-btn {
+      font-weight: bold;
+      font-size: 18px;
+    }
+  }
+}
+
+.tools {
+  .size(auto, 100%);
+  .flex(center);
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  :global {
+    .ant-btn {
+      font-weight: bold;
+      font-size: 18px;
+    }
+  }
+}
+
+.billForm {
+  .size(100%, auto);
+  .flex();
+
+  >div:nth-child(1) {
+    .size(calc(100% - 230px), 100%);
+    padding-top: 5px;
+  }
+
+  >div:nth-child(2) {
+    .size(230px, auto);
+    padding-top: 10px;
+    // max-height: 140px;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(4, 1fr);
+
+    >div {
+      .size();
+      .flex(center, center);
+
+      :global {
+        .ant-btn-lg {
+          min-width: 50px;
+          width: 100px;
+          height: 38px;
+          border-radius: 5px;
+          font-size: 18px;
+        }
+      }
+    }
+  }
+
+  :global {
+    .ant-col {
+      height: 45px;
+    }
+
+    .ant-col.ant-col-24.ant-col-order-5 {
+      height: auto;
+
+      .viewStyle:last-child {
+        overflow: hidden !important;
+        padding-bottom: 5px;
+      }
+    }
+
+    .ant-col.ant-form-item-label:not(.skipFlexBasis) {
+      flex-basis: 160px !important;
+      max-width: 160px !important;
+      height: 40px;
+      line-height: 27px;
+      border-right: 1px solid #aaa;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      border: none !important;
+      background-color: transparent !important;
+
+      label {
+        font-size: 18px !important;
+      }
+
+    }
+
+    .ant-form-item {
+      border: none !important;
+    }
+
+    .ant-form-item-control {
+      flex-basis: 100px;
+      max-width: 100%;
+      flex-grow: 1;
+      padding: 0 !important;
+    }
+
+    .ant-form-item-control-input-content {
+      .flex();
+
+      >* {
+        flex-grow: 1;
+      }
+    }
+
+    .ant-input,
+    .ant-input[disabled],
+    .viewStyle .ant-picker.ant-picker-disabled,
+    .viewStyle .ant-select-disabled .ant-select-selector {
+      flex-grow: 1;
+      text-indent: 8px;
+      font-size: 18px;
+      background: #f0f0f0 !important;
+      border-radius: 5px !important;
+    }
+
+    .ant-input-number {
+      padding: 0 !important;
+
+      input {
+        background: #f0f0f0 !important;
+        border-radius: 5px !important;
+        height: 40px !important;
+        padding-left: 0;
+        padding-right: 0;
+        text-indent: 8px;
+      }
+    }
+
+    .ant-picker,
+    .ant-select {
+      background: #f0f0f0 !important;
+      border-radius: 5px !important;
+      height: 40px !important;
+
+      .ant-select-selector,
+      .ant-select-selection-search {
+        height: 100%;
+        background-color: transparent;
+
+        input {
+          height: 100% !important;
+        }
+      }
+
+      input {
+        background-color: transparent !important;
+      }
+    }
+
+    .ant-input-search-button {
+      height: 38px;
+    }
+
+    .ant-select-selector {
+      //   border: none !important;
+      //   background: #f0f0f0 !important;
+      //   border-radius: 5px !important;
+      //   height: 32px !important;
+
+      .ant-select-selection-item,
+      .ant-select-selection-placeholder {
+        font-size: 18px;
+        line-height: 36px !important;
+      }
+    }
+
+    // .ant-input-affix-wrapper {
+    //   height: 28px;
+    //   line-height: 23px;
+    //   border: none !important;
+    //   background: #f0f0f0 !important;
+    //   border-radius: 5px !important;
+    //   height: 32px !important;
+    //   box-shadow: none !important;
+    //   padding-left: 0 !important;
+    // }
+
+
+    // .ant-picker.ant-picker-range {
+    //   input {
+    //     font-size: 14px !important;
+    //   }
+    // }
+  }
+}
+
+.search {
+  .size(100%, 50px);
+  .flex(center);
+
+  >div {
+    .size();
+    .flex(center);
+  }
+
+  div[class*="solutionList"] {
+    width: 160px !important;
+    margin-top: 5px;
+  }
+
+  div[class*="fastFilter"] {
+    padding: 0;
+    padding: 0 0 0 10px;
+
+    div[class*="advRow"] {
+      height: 40px;
+      margin-top: 5px;
+    }
+
+    div[class*="toggleBtn"],
+    div[class*="advCol"] {
+      padding-top: 2px;
+    }
+
+    div[class*="filterList"] {
+      background: #FFF;
+      padding-top: 0;
+      border-radius: 5px;
+    }
+  }
+
+  span[class*="removeBtn"] {
+    top: 14px;
+    right: 8px;
+    font-size: 18px;
+  }
+
+  :global {
+    .ant-btn-icon-only.ant-btn {
+      border-radius: 5px;
+      height: 36px;
+      min-width: 35px;
+    }
+
+    .ant-btn:not(.ant-btn-icon-only) {
+      border-radius: 5px;
+      // min-width: 90px;
+      height: 36px;
+      font-size: 18px;
+
+      span {
+        top: 0 !important;
+      }
+    }
+
+    div[class*="filterList"] {
+      .ant-btn-lg {
+        min-width: 50px;
+      }
+    }
+
+    .ant-input {
+      background-color: transparent;
+    }
+
+    .ant-select-selector {
+      border: none !important;
+      background: #f0f0f0 !important;
+      border-radius: 5px !important;
+      height: 32px !important;
+
+      .ant-select-selection-item,
+      .ant-select-selection-placeholder {
+        line-height: 32px !important;
+      }
+    }
+
+    .ant-input-affix-wrapper {
+      height: 28px;
+      line-height: 23px;
+      border: none !important;
+      background: #f0f0f0 !important;
+      border-radius: 5px !important;
+      height: 32px !important;
+      box-shadow: none !important;
+      padding-left: 0 !important;
+    }
+
+    .ant-picker {
+      background: #f0f0f0 !important;
+      border-radius: 5px !important;
+      height: 32px !important;
+      // margin-top: 6px;
+    }
+
+    .ant-picker.ant-picker-range {
+      input {
+        font-size: 14px !important;
+      }
+    }
+  }
+}
+
+.table {
+  .size(100%, auto);
+  flex-grow: 1;
+
+  :global {
+
+    .ant-tabs:not(.noXlyTabs) {
+      .ant-tabs-nav-wrap {
+        background: #fff;
+
+        .ant-tabs-nav-list {
+          background: #fff;
+
+          .ant-tabs-tab {
+            border: 1px solid #d9d9d9;
+            border-right: 0;
+            padding: 0 18px;
+            height: 40px;
+            line-height: 40px;
+            margin-left: 0;
+            background: #fafafa;
+
+            &:nth-last-of-type(2) {
+              border-right: 1px solid #d9d9d9;
+            }
+          }
+
+          .ant-tabs-tab-active {
+            border-bottom: 1px solid transparent;
+            background: #fff;
+          }
+
+          .ant-tabs-ink-bar {
+            top: 0;
+            bottom: unset;
+          }
+
+          .ant-tabs-tab-btn {
+            font-size: 20px;
+          }
+        }
+      }
+    }
+
+    table {
+      border-top: 1px solid #aaa !important;
+    }
+
+    table tr td.ant-table-selection-column .ant-radio-wrapper {
+      margin-top: 7px;
+    }
+
+    .ant-table-thead>tr>th {
+      border-right: 1px solid #aaa !important;
+      font-size: 18px;
+      color: rgba(0, 0, 0, .85);
+      font-weight: 500;
+      text-align: left;
+      background: #e6e6e6;
+      // border-bottom: 1px solid #aaa;
+      font-weight: 600;
+      white-space: nowrap;
+      background: #ddd;
+      border-radius: 0 !important;
+      padding: 4px;
+    }
+
+    .ant-table-cell {
+      span {
+        box-shadow: none !important;
+      }
+
+      >div {
+        .size(100%, 34px);
+      }
+
+      .noInput {
+        .size();
+        .flex(center, flex-start);
+      }
+
+      .changeClassName {
+        height: 100%;
+
+        * {
+          height: 100%;
+        }
+      }
+    }
+
+    .ant-btn[class*="mesAdd"],
+    .ant-btn[class*="mesDel"],
+    .ant-btn[class*="mesSave"] {
+      .size(30px, 30px);
+    }
+
+    .ant-btn[class*="mesSave"] {
+      margin-right: 5px;
+    }
+
+    .ant-table-cell-fix-right {
+      .operate-bar {
+        .size();
+        .flex(center, center);
+
+        >span {
+          display: none !important;
+        }
+      }
+    }
+
+    .noInput span {
+      font-size: 18px;
+    }
+  }
+}
+
+.tdDiv {
+  .flex();
+  .size();
+  flex-direction: column;
+
+  :global {
+    .ant-btn-lg {
+      padding: 0 0 0 2px;
+      min-width: 0;
+      height: 32px;
+    }
+  }
+}
+
+.tdDetail {
+  flex-grow: 1;
+  .size(100%, auto);
+  min-height: 50px;
+  background-color: #f0f0f0;
+  border-top: 1px solid #AAA;
+  font-size: 12px;
+  padding-left: 4px;
+}
 \ No newline at end of file
@@ -16,6 +16,7 @@ import MyselfMobile from &quot;./common/MyselfMobile&quot;;
 import ContactsInfoMobile from "./common/ContactsInfoMobile";
 import RevisePasswordMobile from "./common/RevisePasswordMobile";
 import CommobileBill from "./common/commobileBill";
+import CommobilePadList from "./common/commobilePadList";
 import CommobilePadBill from "./common/commobilePadBill";
 import CommobilePrintPdf from "./common/commobilePrintPdf";
 import ExamineMobile from "./common/ExamineMobile";
@@ -195,7 +196,13 @@ class IndexMobile extends React.Component {
             <CommobilePadBill {...this.props} />
           </div>
         );
-      }  else {
+      } else if (location.pathname === "/indexMobile/commobilePadList") {
+        return (
+          <div className={styles.demoContainer}>
+            <CommobilePadList {...this.props} />
+          </div>
+        );
+      } else {
         return (
           <div className={styles.demoContainer}>
             <SceneMobile {...this.props} sModelType={pageText} sModelsId="101251240115015916850901130" />
+/**
+ * @Date:   2019-05-20T16:45:00+08:00
+ * @Last modified time: 2019-06-26T18:40:44+08:00
+ */
+
+import React from 'react';
+import { connect } from 'umi';
+import CommobilePadListComponent from '../../../mobile/common/CommobilePadList';
+import * as commonUtils from '../../../utils/utils';
+
+function commobileBill({
+  dispatch, app, content, location,
+}) {
+  if (location.state === null) {
+    return (<div />);
+  }
+  // const param = commonUtils.convertStrToObj(location.state.sParam);
+  let param = {};
+  if (location.state.sParam) {
+    param = commonUtils.convertStrToObj(location.state.sParam);
+  } else {
+    param = commonUtils.convertStrToObj(location.state);
+  }
+  
+  const commonListProps = {
+    app,
+    content,
+    ...param,
+    dispatch,
+  };
+  return (
+    <CommobilePadListComponent {...commonListProps} style={{ height: '100%' }} />
+  );
+}
+
+export default connect(({ routing, app, content }) =>
+  ({ routing, app, content }))(commobileBill);