templatedetail.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  1. import Taro, { Component } from '@tarojs/taro'
  2. import { View, Input, Picker, ScrollView, Button } from '@tarojs/components'
  3. import { Loading } from '@components'
  4. import { connect } from '@tarojs/redux'
  5. import * as actions from '@actions/template'
  6. import { getWindowHeight } from '@utils/style'
  7. import ImagePicker from '../../components/imagePicker'
  8. import './templatedetail.scss'
  9. @connect(state => state.home, { ...actions, })
  10. class TemplateDetail extends Component {
  11. config = {
  12. navigationBarTitleText: '报告模板编辑'
  13. }
  14. state = {
  15. selector: [
  16. { name: "文本项", type: "text" },
  17. { name: "日期项", type: "date" },
  18. { name: "起止时间", type: "dateRange" },
  19. ],
  20. visible: "",
  21. data: {},
  22. metadata: [],
  23. }
  24. componentDidMount() {
  25. // this.getData()
  26. }
  27. getData() {
  28. this.setState({ loading: true })
  29. let payload = {
  30. id: this.$router.params.id,
  31. }
  32. this.props.reportTemplate(payload).then((data) => {
  33. this.setState({
  34. loading: false,
  35. data: data.data,
  36. })
  37. }).catch(() => {
  38. this.setState({ loading: false })
  39. })
  40. }
  41. // 添加新项
  42. onChange = e => {
  43. this.setState({
  44. selectorChecked: this.state.selector[e.detail.value],
  45. inputName: e.detail.value == 2 ? "起止时间" : "",
  46. visible: "add"
  47. })
  48. }
  49. onCancel = () => {
  50. this.setState({
  51. inputName: "",
  52. inputText: "",
  53. dateSel: "",
  54. dateStart: "",
  55. dateEnd: "",
  56. visible: "",
  57. })
  58. }
  59. onOk = () => {
  60. const { visible, metadata, inputName, inputText, selectorChecked, dateSel, dataStart, dataEnd } = this.state
  61. if (visible == "add") {
  62. let list = []
  63. if (!inputName) {
  64. Taro.showToast({
  65. title: "请输入字段名称",
  66. icon: 'none'
  67. })
  68. return
  69. }
  70. if (selectorChecked.type == "text") {
  71. if (!inputText) {
  72. Taro.showToast({
  73. title: "请输入字段值",
  74. icon: 'none'
  75. })
  76. return
  77. }
  78. list.push({ name: inputName, value: inputText, type: selectorChecked.type })
  79. } else if (selectorChecked.type == "date") {
  80. if (!dateSel) {
  81. Taro.showToast({
  82. title: "请选择日期",
  83. icon: 'none'
  84. })
  85. return
  86. }
  87. list.push({ name: inputName, value: dateSel, type: selectorChecked.type })
  88. } else if (selectorChecked.type == "dateRange") {
  89. if (!dataStart) {
  90. Taro.showToast({
  91. title: "请选择开始日期",
  92. icon: 'none'
  93. })
  94. return
  95. }
  96. if (!dataEnd) {
  97. Taro.showToast({
  98. title: "请选择结束日期",
  99. icon: 'none'
  100. })
  101. return
  102. }
  103. list.push({ name: inputName, value: dataStart + " " + dataEnd, type: selectorChecked.type })
  104. }
  105. this.setState({
  106. metadata: [...metadata, ...list],
  107. visible: "",
  108. })
  109. }
  110. }
  111. render() {
  112. // if (!this.state.loaded) {
  113. // return <Loading />
  114. // }
  115. const { data, visible, metadata, selectorChecked } = this.state
  116. return (
  117. <View className='home'>
  118. <View className='home-item'>
  119. <View className='home-item-tit'>报告模板名称:</View>
  120. <Input
  121. value={data.name}
  122. className='home-item-val'
  123. />
  124. </View>
  125. <View className='home-item'>
  126. <View className='home-item-tit'>报告模板标签:</View>
  127. </View>
  128. <View className='home-item'>
  129. <View className='home-item-tit'>关联企业:</View>
  130. </View>
  131. <View className='home-item'>
  132. <View className='home-item-tit'>企业LOGO:</View>
  133. <ImagePicker id={397} />
  134. </View>
  135. <View className='home-item'>
  136. <View className='home-item-tit'>项目名称:</View>
  137. <Input
  138. value={data.reportName}
  139. className='home-item-val'
  140. />
  141. </View>
  142. {
  143. metadata.map((item, index) =>
  144. <View className='home-item'>
  145. <View className='home-item-tit'>项目名称:</View>
  146. <Input
  147. value={data.reportName}
  148. className='home-item-val'
  149. />
  150. </View>
  151. )
  152. }
  153. <View className='home-item'>
  154. <Picker mode='selector' range={this.state.selector} rangeKey="name"
  155. onChange={this.onChange}
  156. >
  157. <Button type='primary'>+添加新项</Button>
  158. </Picker>
  159. </View>
  160. {visible != "" &&
  161. <View className='mask'>
  162. <View className='count'>
  163. <View className='count_top'>
  164. <Input
  165. value={this.state.inputName}
  166. className='count_top_input'
  167. placeholder='字段名称'
  168. onChange={e => { this.setState({ inputName: e.detail.value }) }}
  169. />
  170. {selectorChecked.type == "text" &&
  171. <Input
  172. value={this.state.inputText}
  173. style={{ marginTop: 15 }}
  174. className='count_top_input'
  175. placeholder='请输入字段值'
  176. onChange={e => { this.setState({ inputText: e.detail.value }) }}
  177. />}
  178. {selectorChecked.type == "date" &&
  179. <Picker mode='date' value={this.state.dateSel}
  180. onChange={e => {
  181. this.setState({
  182. dateSel: e.detail.value,
  183. })
  184. }}>
  185. <View className={!this.state.dateSel ? 'count_top_dates' : 'count_top_date'}>
  186. {!this.state.dateSel ? "请选择日期" : this.state.dateSel}
  187. </View>
  188. </Picker>
  189. }
  190. {selectorChecked.type == "dateRange" &&
  191. <Picker mode='date' value={this.state.dataStart}
  192. onChange={e => {
  193. this.setState({
  194. dataStart: e.detail.value,
  195. })
  196. }}>
  197. <View className={!this.state.dataStart ? 'count_top_dates' : 'count_top_date'}>
  198. {!this.state.dataStart ? "开始日期" : this.state.dataStart}
  199. </View>
  200. </Picker>
  201. }
  202. {selectorChecked.type == "dateRange" &&
  203. <Picker mode='date' value={this.state.dataEnd}
  204. onChange={e => {
  205. this.setState({
  206. dataEnd: e.detail.value,
  207. })
  208. }}>
  209. <View className={!this.state.dataEnd ? 'count_top_dates' : 'count_top_date'}>
  210. {!this.state.dataEnd ? "结束日期" : this.state.dataEnd}
  211. </View>
  212. </Picker>
  213. }
  214. </View>
  215. <View className='count_foot'>
  216. <Button onClick={this.onCancel}>取消</Button>
  217. <Button style={{ marginTop: 0 }}
  218. onClick={this.onOk}
  219. >确认</Button>
  220. </View>
  221. </View>
  222. </View>}
  223. </View>
  224. )
  225. }
  226. }
  227. export default TemplateDetail