123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419 |
- import Taro, { Component } from '@tarojs/taro'
- import { View, Switch, Input, Textarea, Picker } from '@tarojs/components'
- import { strTrim, arrToObj } from '@utils'
- import './index.scss'
- import MultiSelect from './MultiSelect'
- import RadioSelect from './RadioSelect'
- import LCanton from './LCanton'
- import TimeTwo from './TimeTwo'
- const HLKEY = '654mca0l38b489d9'
- const CJ = require('crypto-js')
- export default class FormGroup extends Component {
- constructor (props) {
- super(props)
- const { val, typeStr, labelShow } = this.props
- const { valTrue = '1', valFalse = '2' } = this.props
- this.state = {
- switchValTrue: valTrue,
- switchValFalse: valFalse,
- curRegionName: '',
- curLabelShow: labelShow === 'no' ? false : true,
- curTypeStr: typeStr || 'input',
- curVal: val || '',
- curCheckedArr: [],
- curRadioObj: {},
- isMSShow: false,
- isRSShow: false,
- curImgUrl: val,
- isCShow: false,
- cantonNameObj: {},
- }
- }
- componentDidUpdate (prevProps, prevState) {
- const { val, typeStr } = this.props
- if (prevProps.val !== val) {
- this.setState({
- curVal: val || ''
- })
- if (typeStr === 'img') {
- this.setState({
- curImgUrl: val || ''
- })
- }
- }
- }
- // 后期有空来拆分,暂时放一块
- changeInput (e) {
- const { valStr, bc } = this.props
- bc(valStr, strTrim(e.target.value))
- }
- selectChange (curArr, e) {
- const { valStr, bc } = this.props
- bc(valStr, curArr[Number(e.detail.value)].val, curArr)
- }
- dateChange (e) {
- const { valStr, bc } = this.props
- bc(valStr, strTrim(e.target.value))
- }
- regionChange (e) {
- const { valStr, bc } = this.props
- bc(valStr, e.target.value, e.target.code)
- }
- openMSPopup (e) {
- this.setState({
- isMSShow: true
- })
- }
- dealMSPopup (curVal, curCheckedArr) {
- this.closeMSPopup()
- const { valStr, bc } = this.props
- if (curVal && curCheckedArr) {
- this.setState({
- curVal,
- curCheckedArr,
- })
- bc(valStr, curVal, curCheckedArr)
- } else {
- bc(valStr, '')
- }
- }
- closeMSPopup () {
- this.setState({
- isMSShow: false,
- })
- }
- openRSPopup (e) {
- this.setState({
- isRSShow: true
- })
- }
- dealRSPopup (curVal, curRadioObj) {
- this.closeRSPopup()
- const { valStr, bc } = this.props
- if (curVal && curRadioObj) {
- this.setState({
- curVal,
- curRadioObj,
- })
- bc(valStr, curVal, curRadioObj)
- } else {
- bc(valStr, '')
- }
- }
- closeRSPopup () {
- this.setState({
- isRSShow: false
- })
- }
- openCPopup (e) {
- this.setState({
- isCShow: true
- })
- }
- dealCPopup (curVal, cantonNameObj) {
- this.closeCPopup()
- const { valStr, bc } = this.props
- if (curVal && cantonNameObj) {
- this.setState({
- curVal,
- cantonNameObj,
- })
- bc(valStr, curVal, cantonNameObj)
- } else {
- bc(valStr, '')
- }
- }
- closeCPopup () {
- this.setState({
- isCShow: false
- })
- }
-
- renderTimeTwo () {
- const { curVal } = this.state
- const {
- disabled,
- label1,
- label2,
- } = this.props
- return (
- <TimeTwo curArr={curVal} disabled={disabled} label1={label1} label2={label2} bc={this.timeTwoChange.bind(this)} />
- )
- }
- timeTwoChange (arr) {
- const { valStr, bc } = this.props
- bc(valStr, arr)
- }
- switchClickHandle () {
- const { valStr, bc } = this.props
- const { switchValTrue, switchValFalse } = this.state
- const { curVal } = this.state
- bc(valStr, curVal === switchValTrue ? switchValFalse : switchValTrue)
- }
- uploadImgHandle () {
- const { valStr, bc } = this.props
- const that = this
- Taro.chooseImage({
- count: 1, // 默认9
- sizeType: ['original', 'compressed'],
- sourceType: ['album', 'camera'],
- success: function (res) {
- const tempFilePaths = res.tempFilePaths
- Taro.uploadFile({
- url: `${BASE_URL}/fileupload/uploadfile`,
- filePath: tempFilePaths[0],
- name: 'file',
- formData: {
- 'filename': 'xcxOperate'
- },
- success (res){
- const msg = res.data || ''
- const key = CJ.enc.Utf8.parse(HLKEY)
- const bytes = CJ.AES.decrypt(msg, key, {
- mode: CJ.mode.ECB,
- padding: CJ.pad.Pkcs7
- })
- const originalText = bytes.toString(CJ.enc.Utf8)
- const cData = JSON.parse(originalText)
- that.setState({
- curImgUrl: cData.data || ''
- }, () => {
- bc(valStr, cData.data || '')
- })
- }
- })
- }
- })
- }
- render () {
- const {
- curTypeStr,
- curLabelShow,
- curVal,
- isMSShow,
- isRSShow,
- curCheckedArr,
- curRadioObj,
- curImgUrl,
- isCShow,
- cantonNameObj,
- inputDiyType,
- } = this.state
- const {
- keyStr,
- keyStr2,
- moreOptions,
- labelWidth,
- labelAlign = 'left',
- disabled,
- pbShow,
- placeholderSingle = false,
- moreRows = false,
- cantonLevel = 3,
- cantonLabelObj,
- cantonVerify,
- dateFields
- } = this.props
- const { hasFooterNav = false } = this.props
- const curArr = moreOptions && moreOptions.arr ? moreOptions.arr : []
- const curObj = arrToObj(curArr)
- const curCheckedLabelArr = curCheckedArr.map(item => {
- return item.label
- })
- const curCheckedLabel = curCheckedLabelArr.join(',')
- const curRadioLabel = curRadioObj.label ? curRadioObj.label : curObj[curVal]
- const { hasText, textTrue, textFalse, rightAlign='right' } = this.props
- const { switchValTrue } = this.state
- const switchHasText = hasText || false
- const switchTextTrue = textTrue || '开启'
- const switchTextFalse = textFalse || '关闭'
- const switchChecked = curVal === switchValTrue
- let boxClassName = 'l-form-group'
- if (pbShow === 'no') boxClassName += ' nopb'
- if (moreRows) boxClassName += ' rows2'
- const {
- defineBoxClassName
- } = this.props
- if (defineBoxClassName) {
- if (defineBoxClassName === 'noborder') {
- boxClassName += ' noborder'
- } else {
- boxClassName += ' ' + defineBoxClassName
- }
- }
- let { inputType = 'text' } = this.state
- if (inputDiyType) inputType = inputDiyType
-
- const bg = require('@img/icon_upload_img.png')
- const signRight = require('@img/icon_sign_right.png')
- const imageSrc = curImgUrl || bg
- const {
- initUpdate,
- } = this.props
- const { inputFont } = this.props
- const { startDate } = this.props
- const { defineContentClassName } = this.props
- let formContentStr = 'l-form-content'
- if (defineContentClassName) {
- formContentStr = 'l-form-content ' + defineContentClassName
- }
- return (
- <View className={boxClassName}>
- {
- curLabelShow
- &&
- <View className={labelAlign === 'left' ? 'l-form-label' : 'l-form-label t2'} style={`width: ${labelWidth || '26%'}`}>{keyStr}</View>
- }
- {
- curTypeStr === 'input'
- &&
- <View className={formContentStr}>
- <Input type={inputType} value={curVal} disabled={disabled} onInput={this.changeInput.bind(this)} className={disabled ? 'l-form-input disabled' : 'l-form-input'} placeholder={`${placeholderSingle ? '' : keyStr2 ? keyStr2 : '请输入' + keyStr}`}/>
- </View>
- }
- {
- curTypeStr === 'inputFont'
- &&
- <View className={formContentStr}>
- <Input type={inputType} value={curVal} disabled={disabled} onInput={this.changeInput.bind(this)} className={disabled ? 'l-form-input disabled' : 'l-form-input'} placeholder={`${placeholderSingle ? '' : keyStr2 ? keyStr2 : '请输入' + keyStr}`}/>
- <View className="l-form-input-font">{inputFont}</View>
- </View>
- }
- {
- curTypeStr === 'textarea'
- &&
- <View className={formContentStr + ' auto-height'}>
- <Textarea value={curVal} disabled={disabled} onInput={this.changeInput.bind(this)} className={disabled ? 'l-form-textarea disabled' : 'l-form-textarea'} placeholder={`${placeholderSingle ? '' : keyStr2 ? keyStr2 : '请输入' + keyStr}`}/>
- </View>
- }
- {
- curTypeStr === 'select'
- &&
- <View className={formContentStr + ' t2'}>
- <Picker mode='selector' className="l-form-picker" range={curArr} rangeKey="key" value="val" disabled={disabled} onChange={this.selectChange.bind(this, curArr)}>
- <Input type="text" value={curObj[curVal]} disabled className={disabled ? 'l-form-input disabled' : 'l-form-input'} placeholder={`${placeholderSingle ? '' : keyStr2 ? keyStr2 : '请选择' + keyStr}`}/>
- </Picker>
- <Image src={signRight} className="down" />
- </View>
- }
- {
- curTypeStr === 'radio'
- &&
- <View className={formContentStr + ' t2'} onClick={this.openRSPopup.bind(this)}>
- {
- curVal
- ? <View className="val" >{curRadioLabel}</View>
- : <View className="val un">{`${placeholderSingle ? '' : keyStr2 ? keyStr2 : '请选择' + keyStr}`}</View>
- }
- <Image src={signRight} className="down" />
- </View>
- }
- {
- curTypeStr === 'radio'
- &&
- <RadioSelect keyStr={keyStr} initUpdate={initUpdate} hasFooterNav={hasFooterNav} val={curVal} moreOptions={moreOptions} isShow={isRSShow} bc={this.dealRSPopup.bind(this)} close={this.closeRSPopup.bind(this)}/>
- }
- {
- curTypeStr === 'multiSelect'
- &&
- <View className={formContentStr + ' t2'} onClick={this.openMSPopup.bind(this)}>
- {
- curVal && curVal.length > 0
- ? <View className="val" >{curCheckedLabel}</View>
- : <View className="val un">{`${placeholderSingle ? '' : keyStr2 ? keyStr2 : '请选择' + keyStr}`}</View>
- }
- <Image src={signRight} className="down" />
- </View>
- }
- {
- curTypeStr === 'multiSelect'
- &&
- <MultiSelect keyStr={keyStr} hasFooterNav={hasFooterNav} val={curVal} moreOptions={moreOptions} isShow={isMSShow} bc={this.dealMSPopup.bind(this)} close={this.closeMSPopup.bind(this)}/>
- }
- {
- curTypeStr === 'date'
- &&
- <View className={formContentStr + ' t2'}>
- <Picker mode='date' value={curVal} className="l-form-picker" disabled={disabled} onChange={this.dateChange.bind(this)} start={startDate} fields={dateFields ? dateFields : 'day'} >
- <Input type={inputType} value={curVal} disabled className={disabled ? 'l-form-input disabled' : 'l-form-input'} placeholder={`${placeholderSingle ? '' : keyStr2 ? keyStr2 : '请选择' + keyStr}`}/>
- </Picker>
- <Image src={signRight} className="down" />
- </View>
- }
- {
- curTypeStr === 'time'
- &&
- <View className={formContentStr + ' t2'}>
- <Picker mode='time' value={curVal} className="l-form-picker" disabled={disabled} onChange={this.dateChange.bind(this)}>
- <Input type={inputType} value={curVal} disabled className={disabled ? 'l-form-input disabled' : 'l-form-input'} placeholder={`${placeholderSingle ? '' : keyStr2 ? keyStr2 : '请选择' + keyStr}`}/>
- </Picker>
- <Image src={signRight} className="down" />
- </View>
- }
- {
- curTypeStr === 'timeTwo'
- &&
- this.renderTimeTwo()
- }
- {
- curTypeStr === 'canton'
- &&
- <View className={formContentStr + ' t2'} onClick={this.openCPopup.bind(this)}>
- {
- cantonNameObj && cantonNameObj.canton1
- ? <View className="val" >{`${cantonNameObj.canton1 ? cantonNameObj.canton1 : ''}${cantonNameObj.canton2 ? '-' + cantonNameObj.canton2 : ''}${cantonNameObj.canton3 ? '-' + cantonNameObj.canton3 : ''}`}</View>
- : <View className="val un">{`${placeholderSingle ? '' : keyStr2 ? keyStr2 : '请选择' + keyStr}`}</View>
- }
- <Image src={signRight} className="down" />
- </View>
- }
- {
- curTypeStr === 'canton'
- &&
- <LCanton keyStr={keyStr} val={curVal} cantonLabelObj={cantonLabelObj} cantonVerify={cantonVerify} cantonLevel={cantonLevel} isShow={isCShow} bc={this.dealCPopup.bind(this)} close={this.closeCPopup.bind(this)}/>
- }
- {
- curTypeStr === 'region'
- &&
- <View className={formContentStr + ' t2'}>
- <Picker mode='region' className="l-form-picker" disabled={disabled} value={curVal} onChange={this.regionChange.bind(this)}>
- {
- curVal && curVal.length > 0
- ?
- <View className="val">{curVal[0]}-{curVal[1]}-{curVal[2]}</View>
- :
- <View className="val un">请选择{keyStr}</View>
- }
- </Picker>
- <Image src={signRight} className="down" />
- </View>
- }
- {
- curTypeStr === 'switch'
- &&
- <View style={rightAlign === 'right' ? 'flex: 1;text-align: right;' : 'flex: 1;text-align: left;'}>
- <Switch color="#3C82F7" disabled="true" checked={switchChecked} onClick={this.switchClickHandle.bind(this)} >{switchHasText ? switchChecked ? switchTextTrue : switchTextFalse : ''}</Switch>
- </View>
- }
- {
- curTypeStr === 'img'
- &&
- <View className="l-form-img" onClick={this.uploadImgHandle.bind(this)} style={rightAlign === 'right' ? 'flex: 1;text-align: right;' : 'flex: 1;text-align: left;'}>
- <Image className="img" src={imageSrc} />
- </View>
- }
- </View>
- )
- }
- }
|