formGroup.jsx 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419
  1. import Taro, { Component } from '@tarojs/taro'
  2. import { View, Switch, Input, Textarea, Picker } from '@tarojs/components'
  3. import { strTrim, arrToObj } from '@utils'
  4. import './index.scss'
  5. import MultiSelect from './MultiSelect'
  6. import RadioSelect from './RadioSelect'
  7. import LCanton from './LCanton'
  8. import TimeTwo from './TimeTwo'
  9. const HLKEY = '654mca0l38b489d9'
  10. const CJ = require('crypto-js')
  11. export default class FormGroup extends Component {
  12. constructor (props) {
  13. super(props)
  14. const { val, typeStr, labelShow } = this.props
  15. const { valTrue = '1', valFalse = '2' } = this.props
  16. this.state = {
  17. switchValTrue: valTrue,
  18. switchValFalse: valFalse,
  19. curRegionName: '',
  20. curLabelShow: labelShow === 'no' ? false : true,
  21. curTypeStr: typeStr || 'input',
  22. curVal: val || '',
  23. curCheckedArr: [],
  24. curRadioObj: {},
  25. isMSShow: false,
  26. isRSShow: false,
  27. curImgUrl: val,
  28. isCShow: false,
  29. cantonNameObj: {},
  30. }
  31. }
  32. componentDidUpdate (prevProps, prevState) {
  33. const { val, typeStr } = this.props
  34. if (prevProps.val !== val) {
  35. this.setState({
  36. curVal: val || ''
  37. })
  38. if (typeStr === 'img') {
  39. this.setState({
  40. curImgUrl: val || ''
  41. })
  42. }
  43. }
  44. }
  45. // 后期有空来拆分,暂时放一块
  46. changeInput (e) {
  47. const { valStr, bc } = this.props
  48. bc(valStr, strTrim(e.target.value))
  49. }
  50. selectChange (curArr, e) {
  51. const { valStr, bc } = this.props
  52. bc(valStr, curArr[Number(e.detail.value)].val, curArr)
  53. }
  54. dateChange (e) {
  55. const { valStr, bc } = this.props
  56. bc(valStr, strTrim(e.target.value))
  57. }
  58. regionChange (e) {
  59. const { valStr, bc } = this.props
  60. bc(valStr, e.target.value, e.target.code)
  61. }
  62. openMSPopup (e) {
  63. this.setState({
  64. isMSShow: true
  65. })
  66. }
  67. dealMSPopup (curVal, curCheckedArr) {
  68. this.closeMSPopup()
  69. const { valStr, bc } = this.props
  70. if (curVal && curCheckedArr) {
  71. this.setState({
  72. curVal,
  73. curCheckedArr,
  74. })
  75. bc(valStr, curVal, curCheckedArr)
  76. } else {
  77. bc(valStr, '')
  78. }
  79. }
  80. closeMSPopup () {
  81. this.setState({
  82. isMSShow: false,
  83. })
  84. }
  85. openRSPopup (e) {
  86. this.setState({
  87. isRSShow: true
  88. })
  89. }
  90. dealRSPopup (curVal, curRadioObj) {
  91. this.closeRSPopup()
  92. const { valStr, bc } = this.props
  93. if (curVal && curRadioObj) {
  94. this.setState({
  95. curVal,
  96. curRadioObj,
  97. })
  98. bc(valStr, curVal, curRadioObj)
  99. } else {
  100. bc(valStr, '')
  101. }
  102. }
  103. closeRSPopup () {
  104. this.setState({
  105. isRSShow: false
  106. })
  107. }
  108. openCPopup (e) {
  109. this.setState({
  110. isCShow: true
  111. })
  112. }
  113. dealCPopup (curVal, cantonNameObj) {
  114. this.closeCPopup()
  115. const { valStr, bc } = this.props
  116. if (curVal && cantonNameObj) {
  117. this.setState({
  118. curVal,
  119. cantonNameObj,
  120. })
  121. bc(valStr, curVal, cantonNameObj)
  122. } else {
  123. bc(valStr, '')
  124. }
  125. }
  126. closeCPopup () {
  127. this.setState({
  128. isCShow: false
  129. })
  130. }
  131. renderTimeTwo () {
  132. const { curVal } = this.state
  133. const {
  134. disabled,
  135. label1,
  136. label2,
  137. } = this.props
  138. return (
  139. <TimeTwo curArr={curVal} disabled={disabled} label1={label1} label2={label2} bc={this.timeTwoChange.bind(this)} />
  140. )
  141. }
  142. timeTwoChange (arr) {
  143. const { valStr, bc } = this.props
  144. bc(valStr, arr)
  145. }
  146. switchClickHandle () {
  147. const { valStr, bc } = this.props
  148. const { switchValTrue, switchValFalse } = this.state
  149. const { curVal } = this.state
  150. bc(valStr, curVal === switchValTrue ? switchValFalse : switchValTrue)
  151. }
  152. uploadImgHandle () {
  153. const { valStr, bc } = this.props
  154. const that = this
  155. Taro.chooseImage({
  156. count: 1, // 默认9
  157. sizeType: ['original', 'compressed'],
  158. sourceType: ['album', 'camera'],
  159. success: function (res) {
  160. const tempFilePaths = res.tempFilePaths
  161. Taro.uploadFile({
  162. url: `${BASE_URL}/fileupload/uploadfile`,
  163. filePath: tempFilePaths[0],
  164. name: 'file',
  165. formData: {
  166. 'filename': 'xcxOperate'
  167. },
  168. success (res){
  169. const msg = res.data || ''
  170. const key = CJ.enc.Utf8.parse(HLKEY)
  171. const bytes = CJ.AES.decrypt(msg, key, {
  172. mode: CJ.mode.ECB,
  173. padding: CJ.pad.Pkcs7
  174. })
  175. const originalText = bytes.toString(CJ.enc.Utf8)
  176. const cData = JSON.parse(originalText)
  177. that.setState({
  178. curImgUrl: cData.data || ''
  179. }, () => {
  180. bc(valStr, cData.data || '')
  181. })
  182. }
  183. })
  184. }
  185. })
  186. }
  187. render () {
  188. const {
  189. curTypeStr,
  190. curLabelShow,
  191. curVal,
  192. isMSShow,
  193. isRSShow,
  194. curCheckedArr,
  195. curRadioObj,
  196. curImgUrl,
  197. isCShow,
  198. cantonNameObj,
  199. inputDiyType,
  200. } = this.state
  201. const {
  202. keyStr,
  203. keyStr2,
  204. moreOptions,
  205. labelWidth,
  206. labelAlign = 'left',
  207. disabled,
  208. pbShow,
  209. placeholderSingle = false,
  210. moreRows = false,
  211. cantonLevel = 3,
  212. cantonLabelObj,
  213. cantonVerify,
  214. dateFields
  215. } = this.props
  216. const { hasFooterNav = false } = this.props
  217. const curArr = moreOptions && moreOptions.arr ? moreOptions.arr : []
  218. const curObj = arrToObj(curArr)
  219. const curCheckedLabelArr = curCheckedArr.map(item => {
  220. return item.label
  221. })
  222. const curCheckedLabel = curCheckedLabelArr.join(',')
  223. const curRadioLabel = curRadioObj.label ? curRadioObj.label : curObj[curVal]
  224. const { hasText, textTrue, textFalse, rightAlign='right' } = this.props
  225. const { switchValTrue } = this.state
  226. const switchHasText = hasText || false
  227. const switchTextTrue = textTrue || '开启'
  228. const switchTextFalse = textFalse || '关闭'
  229. const switchChecked = curVal === switchValTrue
  230. let boxClassName = 'l-form-group'
  231. if (pbShow === 'no') boxClassName += ' nopb'
  232. if (moreRows) boxClassName += ' rows2'
  233. const {
  234. defineBoxClassName
  235. } = this.props
  236. if (defineBoxClassName) {
  237. if (defineBoxClassName === 'noborder') {
  238. boxClassName += ' noborder'
  239. } else {
  240. boxClassName += ' ' + defineBoxClassName
  241. }
  242. }
  243. let { inputType = 'text' } = this.state
  244. if (inputDiyType) inputType = inputDiyType
  245. const bg = require('@img/icon_upload_img.png')
  246. const signRight = require('@img/icon_sign_right.png')
  247. const imageSrc = curImgUrl || bg
  248. const {
  249. initUpdate,
  250. } = this.props
  251. const { inputFont } = this.props
  252. const { startDate } = this.props
  253. const { defineContentClassName } = this.props
  254. let formContentStr = 'l-form-content'
  255. if (defineContentClassName) {
  256. formContentStr = 'l-form-content ' + defineContentClassName
  257. }
  258. return (
  259. <View className={boxClassName}>
  260. {
  261. curLabelShow
  262. &&
  263. <View className={labelAlign === 'left' ? 'l-form-label' : 'l-form-label t2'} style={`width: ${labelWidth || '26%'}`}>{keyStr}</View>
  264. }
  265. {
  266. curTypeStr === 'input'
  267. &&
  268. <View className={formContentStr}>
  269. <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}`}/>
  270. </View>
  271. }
  272. {
  273. curTypeStr === 'inputFont'
  274. &&
  275. <View className={formContentStr}>
  276. <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}`}/>
  277. <View className="l-form-input-font">{inputFont}</View>
  278. </View>
  279. }
  280. {
  281. curTypeStr === 'textarea'
  282. &&
  283. <View className={formContentStr + ' auto-height'}>
  284. <Textarea value={curVal} disabled={disabled} onInput={this.changeInput.bind(this)} className={disabled ? 'l-form-textarea disabled' : 'l-form-textarea'} placeholder={`${placeholderSingle ? '' : keyStr2 ? keyStr2 : '请输入' + keyStr}`}/>
  285. </View>
  286. }
  287. {
  288. curTypeStr === 'select'
  289. &&
  290. <View className={formContentStr + ' t2'}>
  291. <Picker mode='selector' className="l-form-picker" range={curArr} rangeKey="key" value="val" disabled={disabled} onChange={this.selectChange.bind(this, curArr)}>
  292. <Input type="text" value={curObj[curVal]} disabled className={disabled ? 'l-form-input disabled' : 'l-form-input'} placeholder={`${placeholderSingle ? '' : keyStr2 ? keyStr2 : '请选择' + keyStr}`}/>
  293. </Picker>
  294. <Image src={signRight} className="down" />
  295. </View>
  296. }
  297. {
  298. curTypeStr === 'radio'
  299. &&
  300. <View className={formContentStr + ' t2'} onClick={this.openRSPopup.bind(this)}>
  301. {
  302. curVal
  303. ? <View className="val" >{curRadioLabel}</View>
  304. : <View className="val un">{`${placeholderSingle ? '' : keyStr2 ? keyStr2 : '请选择' + keyStr}`}</View>
  305. }
  306. <Image src={signRight} className="down" />
  307. </View>
  308. }
  309. {
  310. curTypeStr === 'radio'
  311. &&
  312. <RadioSelect keyStr={keyStr} initUpdate={initUpdate} hasFooterNav={hasFooterNav} val={curVal} moreOptions={moreOptions} isShow={isRSShow} bc={this.dealRSPopup.bind(this)} close={this.closeRSPopup.bind(this)}/>
  313. }
  314. {
  315. curTypeStr === 'multiSelect'
  316. &&
  317. <View className={formContentStr + ' t2'} onClick={this.openMSPopup.bind(this)}>
  318. {
  319. curVal && curVal.length > 0
  320. ? <View className="val" >{curCheckedLabel}</View>
  321. : <View className="val un">{`${placeholderSingle ? '' : keyStr2 ? keyStr2 : '请选择' + keyStr}`}</View>
  322. }
  323. <Image src={signRight} className="down" />
  324. </View>
  325. }
  326. {
  327. curTypeStr === 'multiSelect'
  328. &&
  329. <MultiSelect keyStr={keyStr} hasFooterNav={hasFooterNav} val={curVal} moreOptions={moreOptions} isShow={isMSShow} bc={this.dealMSPopup.bind(this)} close={this.closeMSPopup.bind(this)}/>
  330. }
  331. {
  332. curTypeStr === 'date'
  333. &&
  334. <View className={formContentStr + ' t2'}>
  335. <Picker mode='date' value={curVal} className="l-form-picker" disabled={disabled} onChange={this.dateChange.bind(this)} start={startDate} fields={dateFields ? dateFields : 'day'} >
  336. <Input type={inputType} value={curVal} disabled className={disabled ? 'l-form-input disabled' : 'l-form-input'} placeholder={`${placeholderSingle ? '' : keyStr2 ? keyStr2 : '请选择' + keyStr}`}/>
  337. </Picker>
  338. <Image src={signRight} className="down" />
  339. </View>
  340. }
  341. {
  342. curTypeStr === 'time'
  343. &&
  344. <View className={formContentStr + ' t2'}>
  345. <Picker mode='time' value={curVal} className="l-form-picker" disabled={disabled} onChange={this.dateChange.bind(this)}>
  346. <Input type={inputType} value={curVal} disabled className={disabled ? 'l-form-input disabled' : 'l-form-input'} placeholder={`${placeholderSingle ? '' : keyStr2 ? keyStr2 : '请选择' + keyStr}`}/>
  347. </Picker>
  348. <Image src={signRight} className="down" />
  349. </View>
  350. }
  351. {
  352. curTypeStr === 'timeTwo'
  353. &&
  354. this.renderTimeTwo()
  355. }
  356. {
  357. curTypeStr === 'canton'
  358. &&
  359. <View className={formContentStr + ' t2'} onClick={this.openCPopup.bind(this)}>
  360. {
  361. cantonNameObj && cantonNameObj.canton1
  362. ? <View className="val" >{`${cantonNameObj.canton1 ? cantonNameObj.canton1 : ''}${cantonNameObj.canton2 ? '-' + cantonNameObj.canton2 : ''}${cantonNameObj.canton3 ? '-' + cantonNameObj.canton3 : ''}`}</View>
  363. : <View className="val un">{`${placeholderSingle ? '' : keyStr2 ? keyStr2 : '请选择' + keyStr}`}</View>
  364. }
  365. <Image src={signRight} className="down" />
  366. </View>
  367. }
  368. {
  369. curTypeStr === 'canton'
  370. &&
  371. <LCanton keyStr={keyStr} val={curVal} cantonLabelObj={cantonLabelObj} cantonVerify={cantonVerify} cantonLevel={cantonLevel} isShow={isCShow} bc={this.dealCPopup.bind(this)} close={this.closeCPopup.bind(this)}/>
  372. }
  373. {
  374. curTypeStr === 'region'
  375. &&
  376. <View className={formContentStr + ' t2'}>
  377. <Picker mode='region' className="l-form-picker" disabled={disabled} value={curVal} onChange={this.regionChange.bind(this)}>
  378. {
  379. curVal && curVal.length > 0
  380. ?
  381. <View className="val">{curVal[0]}-{curVal[1]}-{curVal[2]}</View>
  382. :
  383. <View className="val un">请选择{keyStr}</View>
  384. }
  385. </Picker>
  386. <Image src={signRight} className="down" />
  387. </View>
  388. }
  389. {
  390. curTypeStr === 'switch'
  391. &&
  392. <View style={rightAlign === 'right' ? 'flex: 1;text-align: right;' : 'flex: 1;text-align: left;'}>
  393. <Switch color="#3C82F7" disabled="true" checked={switchChecked} onClick={this.switchClickHandle.bind(this)} >{switchHasText ? switchChecked ? switchTextTrue : switchTextFalse : ''}</Switch>
  394. </View>
  395. }
  396. {
  397. curTypeStr === 'img'
  398. &&
  399. <View className="l-form-img" onClick={this.uploadImgHandle.bind(this)} style={rightAlign === 'right' ? 'flex: 1;text-align: right;' : 'flex: 1;text-align: left;'}>
  400. <Image className="img" src={imageSrc} />
  401. </View>
  402. }
  403. </View>
  404. )
  405. }
  406. }