uas手机版

通用表单，日期区间格式基础支持

uas-office-web/uas-mobile/src/components/common/currencyDetail/CurrencyDetail.jsx

@@ -181,10 +181,6 @@ class CurrencyDetail extends Component {
                 if (billModel.renderer == 'detailAttach') {
                   itemViewType = 2
                 }
-                //测试
-                if (billModel.sourcetype == 'MF') {
-                  itemViewType = 2
-                }
                 switch (itemViewType) {
                   case 1:
                     formItems.push(
@@ -406,7 +402,7 @@ class CurrencyDetail extends Component {
         const selectObj = item.obj
         for (let key in selectObj) {
           if (key in selectMap) {
-            selectMap[key] = selectMap[key] + '#' + selectObj[key]
+            selectMap[key] += ('#' + selectObj[key])
           } else {
             selectMap[key] = selectObj[key]
           }

uas-office-web/uas-mobile/src/components/common/formNew/FormInput.jsx

@@ -11,14 +11,30 @@ import {
   DatePicker,
   List,
   Modal,
+  Checkbox,
+  Button,
+  DatePickerView,
 } from 'antd-mobile'
-import { isObjEmpty, isObjNull } from '../../../utils/common/common.util'
-import moment from 'moment'
+import {
+  isEmptyObject,
+  isObjEmpty,
+  isObjNull,
+} from '../../../utils/common/common.util'
+import moment, { now } from 'moment'
 import BillModel, {
-  billGetValue, billIsDate, billIsHtml, billIsMultiLine, billIsNum,
-  billIsSelect, billReadOnly,
+  billGetDateRange,
+  billGetValue, billIsDateRange,
+  billIsDateSingle,
+  billIsHtml,
+  billIsMultiDbfind,
+  billIsMultiLine,
+  billIsNum,
+  billIsSelect,
+  billReadOnly,
 } from '../../../model/common/BillModel'
 
+const CheckboxItem = Checkbox.CheckboxItem
+
 export default class FormInput extends Component {
 
   constructor () {
@@ -28,6 +44,9 @@ export default class FormInput extends Component {
       billModel: new BillModel(),
       modalOpen: false,
       modalList: [],
+      dateModalOpen: false,
+      dateFrom: '',
+      dateTo: '',
     }
   }
 
@@ -55,9 +74,12 @@ export default class FormInput extends Component {
     if (billIsNum(billModel)) {
       valueItem =
         this.getNumCom(billModel)
-    } else if (billIsDate(billModel)) {
+    } else if (billIsDateSingle(billModel)) {
       valueItem =
         this.getDateCom(type, billModel)
+    } else if (billIsDateRange(billModel)) {
+      valueItem =
+        this.getDateRangeCom(type, billModel)
     } else if (billIsHtml(billModel)) {
       valueItem =
         this.getHtmlcom(billModel)
@@ -66,7 +88,7 @@ export default class FormInput extends Component {
         this.getTextCom(billModel)
     }
     return (
-      billIsDate(billModel) ? <div>
+      billIsDateSingle(billModel) ? <div>
           {valueItem}
         </div> :
         billIsMultiLine(billModel) ? (this.renderTwoLines(
@@ -108,14 +130,38 @@ export default class FormInput extends Component {
         <List className='form-common-modal-root'>
           {modalList && (
             modalList.map((modalObj, index) => (
-              <List.Item
-                key={index}
-                onClick={this.onModalSelect.bind(this,
-                  index)}>{modalObj.value + ''}
-              </List.Item>
+              billIsMultiDbfind(billModel) ?
+                <CheckboxItem
+                  checked={modalObj.isSelected}
+                  onChange={e => {
+                    let checked = e.target.checked
+                    modalObj.isSelected = checked
+                    modalList[modalObj.index].isSelected = checked
+                    this.setState({
+                      modalList,
+                    })
+                  }}
+                >
+                  {modalObj.value + ''}
+                </CheckboxItem> :
+                <List.Item
+                  key={index}
+                  onClick={this.onModalSelect.bind(this,
+                    index)}>
+                  {modalObj.value + ''}
+                </List.Item>
             ))
           )}
         </List>
+        {billIsMultiDbfind(billModel) && <Button
+          type={'primary'}
+          style={{
+            margin: '14px 24px',
+            height: '36px',
+            lineHeight: '36px',
+            fontSize: '16px',
+          }}
+          onClick={this.onDbfindSubmit.bind(this, billModel)}>确定</Button>}
       </Modal>}
     </div>
   }
@@ -226,11 +272,111 @@ export default class FormInput extends Component {
    * @returns {*}
    */
   getDateRangeCom (type, billModel) {
-    return (
-      <div className='form-input-value'>
+    const { dateModalOpen, dateFrom, dateTo } = this.state
+    return <div className='form-input-value'>
+      <TextareaItem
+        className='form-input-value'
+        autoHeight
+        placeholder={billReadOnly(billModel)
+          ? '' : '选择日期'}
+        clear={false}
+        editable={false}
+        disabled={false}
+        onChange={this.onTextChange}
+        onClick={this.onInputClick}
+        value={billGetDateRange(billModel)}
+      />
+      <Modal
+        visible={dateModalOpen}
+        animationType={'slide-up'}
+        onClose={() => {
+          this.setState({
+            dateModalOpen: false,
+          })
+        }}
+        title={billModel.caption}
+        popup>
+        <div
+          style={{
+            padding: 6,
+            background: 'lightgray',
+            color: '#333333',
+          }}>开始日期
+        </div>
+        <DatePickerView
+          value={dateFrom ? new Date(dateFrom.replace(/\-/g, '/')) : new Date()}
+          mode={billModel.type === 'YM' ? 'month' : 'date'}
+          onChange={this.onFromDateChange}
+          minDate={new Date('2000-01-01')}
+          maxDate={new Date('2050-01-01')}
+        />
+        <div
+          style={{
+            padding: 6,
+            background: 'lightgray',
+            color: '#333333',
+          }}>结束日期
+        </div>
+        <DatePickerView
+          value={dateTo ? new Date(dateTo.replace(/\-/g, '/')) : new Date()}
+          mode={billModel.type === 'YM' ? 'month' : 'date'}
+          onChange={this.onToDateChange}
+          minDate={new Date('2000-01-01')}
+          maxDate={new Date('2050-01-01')}
+        />
+        <div className='form-common-modal-func'>
+          <Button
+            className='form-common-modal-func-button'
+            type="primary"
+            onClick={() => {
+              const { dateFrom, dateTo } = this.state
+              const value = {
+                from: dateFrom,
+                to: dateTo,
+              }
+              this.props.onTextChange &&
+              this.props.onTextChange(this.props.groupIndex,
+                this.props.childIndex,
+                value)
+              this.setState({
+                dateModalOpen: false,
+              })
+            }}
+            inline>确认</Button>
+          <Button
+            className='form-common-modal-func-button'
+            type="ghost"
+            onClick={() => {
+              this.setState({
+                dateModalOpen: false,
+              })
+            }}
+            inline>取消</Button>
+        </div>
+      </Modal>
+    </div>
+  }
 
-      </div>
-    )
+  onFromDateChange = (date) => {
+    const { billModel } = this.state
+    let dateFrom = moment(date)
+      .format(billModel.type === 'YM'
+        ? 'YYYY-MM'
+        : 'YYYY-MM-DD')
+    this.setState({
+      dateFrom,
+    })
+  }
+
+  onToDateChange = (date) => {
+    const { billModel } = this.state
+    let dateTo = moment(date)
+      .format(billModel.type === 'YM'
+        ? 'YYYY-MM'
+        : 'YYYY-MM-DD')
+    this.setState({
+      dateTo,
+    })
   }
 
   /**
@@ -273,8 +419,39 @@ export default class FormInput extends Component {
 
   onInputClick = e => {
     const { billModel } = this.state
+    console.log(billModel)
     if (billIsSelect(billModel) && !billModel.readOnly) {
-      if (!isObjEmpty(billModel.localDatas)) {
+      if (billIsDateRange(billModel)) {
+        this.setState({
+          dateFrom: (!isObjEmpty(billModel.value) &&
+            !isObjEmpty(billModel.value.from))
+            ? billModel.value.from
+            : moment(now())
+              .format(billModel.type === 'YM'
+                ? 'YYYY-MM'
+                : 'YYYY-MM-DD'),
+          dateTo: (!isObjEmpty(billModel.value) &&
+            !isObjEmpty(billModel.value.to))
+            ? billModel.value.to
+            : moment(now())
+              .format(billModel.type === 'YM'
+                ? 'YYYY-MM'
+                : 'YYYY-MM-DD'),
+          dateModalOpen: true,
+        })
+      } else if (!isObjEmpty(billModel.localDatas)) {
+        billModel.localDatas.forEach((item, index) => {
+          item.isSelected = false
+          item.index = index
+
+          if (billIsMultiDbfind(billModel) && !isObjEmpty(billModel.value)) {
+            const billValue = billModel.value
+            let valueArray = billValue.split('#')
+            if (valueArray.indexOf(item.value) > -1) {
+              item.isSelected = true
+            }
+          }
+        })
         this.setState({
           modalList: billModel.localDatas,
           modalOpen: true,
@@ -287,6 +464,32 @@ export default class FormInput extends Component {
     }
   }
 
+  /**
+   * 多选本地数据确认
+   */
+  onDbfindSubmit = (selectModel) => {
+    const { modalList } = this.state
+    let selectValue = '', selectDisplay = ''
+    modalList.forEach((item, index) => {
+      if (item.isSelected) {
+        if (isObjEmpty(selectValue)) {
+          selectValue = item.value
+          selectDisplay = item.display
+        } else {
+          selectValue += ('#' + item.value)
+          selectDisplay += ('#' + item.display)
+        }
+      }
+    })
+    this.props.onTextChange &&
+    this.props.onTextChange(this.props.groupIndex, this.props.childIndex,
+      selectValue, selectDisplay)
+    this.setState({
+      modalList: [],
+      modalOpen: false,
+    })
+  }
+
   onModalSelect = index => {
     const { modalList } = this.state
     console.log(modalList)

uas-office-web/uas-mobile/src/components/common/formNew/formCommon.less

@@ -181,3 +181,21 @@
   padding: 4px;
   color: gray;
 }
+
+.form-common-modal-func {
+  display: flex;
+  flex-direction: row;
+  background: whitesmoke;
+  align-items: center;
+  justify-content: center;
+
+  .form-common-modal-func-button {
+    flex: 1;
+    margin: 16px;
+    border: 1px solid #108ee9 !important;
+
+    &:before {
+      border: none !important;
+    }
+  }
+}

uas-office-web/uas-mobile/src/model/common/BillModel.js

@@ -86,6 +86,16 @@ export function billGetDisplay (billModel) {
   return billModel.display || billGetValue(billModel)
 }
 
+/**
+ * 返回日期区间值
+ * @param billModel
+ * @returns {*|string}
+ */
+export function billGetDateRange (billModel) {
+  const value = billModel.value
+  return value ? value.from + '~' + value.to : ''
+}
+
 export function billReadOnly (billModel) {
   return (billModel.readOnly || billModel.editable === 'F')
 }
@@ -183,7 +193,7 @@ export function billIsMultiDbfind (billModel) {
  * @param billModel
  * @returns {boolean}
  */
-export function billIsDate (billModel) {
+export function billIsDateSingle (billModel) {
   let dfType = billModel.type
   if (isObjEmpty(dfType)) {
     return false
@@ -197,6 +207,24 @@ export function billIsDate (billModel) {
   return false
 }
 
+/**
+ * 字段是否是日期区间类型
+ * @param billModel
+ * @returns {boolean}
+ */
+export function billIsDateRange (billModel) {
+  let dfType = billModel.type
+  if (isObjEmpty(dfType)) {
+    return false
+  }
+  switch (dfType) {
+    case 'YM':
+    case 'YMD':
+      return true
+  }
+  return false
+}
+
 /**
  * 字段是否是数字类型
  * @param billModel
@@ -272,6 +300,7 @@ export function getItemViewType (dfType) {
     case 'SS':
       return 1
     case 'FF':
+    case 'PF':
       return 2
     default:
       return 1

uas-office-web/uas-mobile/src/pages/private/homePage/MineRoot.jsx

@@ -7,9 +7,6 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import ProfileCard from '../../../components/private/profile/ProfileCard'
 import ProfileList from '../../../components/private/profile/ProfileList'
-import { List, Calendar } from 'antd-mobile'
-
-const now = new Date()
 
 class MineRoot extends Component {
 
@@ -35,22 +32,6 @@ class MineRoot extends Component {
       <div style={{ padding: '0px 5px', width: '100%' }}>
         <ProfileCard/>
         <ProfileList accountName={accountName}/>
-        {/*<List.Item*/}
-        {/*  arrow="horizontal"*/}
-        {/*  onClick={() => {*/}
-        {/*    this.setState({*/}
-        {/*      show: true,*/}
-        {/*    })*/}
-        {/*  }}>日期</List.Item>*/}
-        <Calendar
-          visible={this.state.show}
-          // onCancel={this.onCancel}
-          // onConfirm={this.onConfirm}
-          getDateExtra={this.getDateExtra}
-          defaultDate={now}
-          minDate={new Date(+now - 5184000000)}
-          maxDate={new Date(+now + 31536000000)}
-        />
       </div>
     )
   }

uas-office-web/uas-mobile/src/utils/common/form.request.js

@@ -82,7 +82,7 @@ export function getBillGroup (groupItem, groupIndex, isDetail) {
       billModel.allowBlank = (fieldItem.allowBlank || isDetail)
       billModel.caption = fieldItem.caption
 
-      billModel.type = fieldItem.type//前端类型
+      billModel.type = 'YM' || fieldItem.type//前端类型
       billModel.sourcetype = fieldItem.sourcetype//字段原类型
       if (billModel.type === 'MF' && !billGroup.isForm) {
         //移动端不支持从表的放大镜多选类型