templatedetail.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325
  1. import Taro, { Component } from '@tarojs/taro'
  2. import { View, Input, Picker, Label, 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. chapterType: [
  24. { title: "立项背景与意义", key: "BACKGROUND", keywords: ['必要性'] },
  25. { title: "国内外研究现状与发展趋势", key: "RESEARCH_STATUS", keywords: ['研究现状', '发展趋势'] },
  26. { title: "项目主要研究内容", key: "RESEARCH", keywords: ['技术特点', '技术研究', '实际应用'] },
  27. { title: "关键技术与创新点", key: "INNOVATION", keywords: ['关键技术', '创新点'] },
  28. { title: "拟解决的关键问题", key: "SOLVE_PROBLEM", keywords: ['解决的问题', '解决的关键问题'] },
  29. { title: "实施方案及进度安排", key: "SOLUTION", keywords: ['实施方案'] },
  30. { title: "经费预算", key: "BUDGET", keywords: [] },
  31. { title: "经济及社会效益分析", key: "BENEFIT_ANALYSIS", keywords: ['经济效益', '社会效益', '经济效益分析', '社会效益分析'] },
  32. { title: "项目风险分析和对策", key: "RISK", keywords: ['风险分析', '风险对策'] },
  33. { title: "自定义章节", key: "USER_DEFINED", keywords: [] },
  34. ],
  35. chapterData: [],
  36. }
  37. componentDidMount() {
  38. // this.getData()
  39. }
  40. getData() {
  41. this.setState({ loading: true })
  42. let payload = {
  43. id: this.$router.params.id,
  44. }
  45. this.props.reportTemplate(payload).then((data) => {
  46. this.setState({
  47. loading: false,
  48. data: data.data,
  49. })
  50. }).catch(() => {
  51. this.setState({ loading: false })
  52. })
  53. }
  54. // 添加新项
  55. onChange = e => {
  56. this.setState({
  57. type: this.state.selector[e.detail.value].type,
  58. inputName: e.detail.value == 2 ? "起止时间" : undefined,
  59. visible: "add"
  60. })
  61. }
  62. onChapterChange = e => {
  63. let list = this.state.chapterData
  64. list.push(this.state.chapterType[e.detail.value])
  65. this.setState({
  66. chapterData: list
  67. })
  68. }
  69. onCancel = () => {
  70. this.setState({
  71. inputName: undefined,
  72. inputText: undefined,
  73. dateSel: undefined,
  74. dataStart: undefined,
  75. dataEnd: undefined,
  76. indx: undefined,
  77. type: "",
  78. visible: "",
  79. })
  80. }
  81. onOk = () => {
  82. const { visible, metadata, inputName, inputText, type, indx, dateSel, dataStart, dataEnd } = this.state
  83. // if (visible == "add") {
  84. let list = []
  85. if (!inputName) {
  86. Taro.showToast({
  87. title: "请输入字段名称",
  88. icon: 'none'
  89. })
  90. return
  91. }
  92. if (type == "text") {
  93. if (!inputText) {
  94. Taro.showToast({
  95. title: "请输入字段值",
  96. icon: 'none'
  97. })
  98. return
  99. }
  100. list.push({ name: inputName, value: inputText, type: type })
  101. } else if (type == "date") {
  102. if (!dateSel) {
  103. Taro.showToast({
  104. title: "请选择日期",
  105. icon: 'none'
  106. })
  107. return
  108. }
  109. list.push({ name: inputName, value: dateSel, type: type })
  110. } else if (type == "dateRange") {
  111. if (!dataStart) {
  112. Taro.showToast({
  113. title: "请选择开始日期",
  114. icon: 'none'
  115. })
  116. return
  117. }
  118. if (!dataEnd) {
  119. Taro.showToast({
  120. title: "请选择结束日期",
  121. icon: 'none'
  122. })
  123. return
  124. }
  125. list.push({ name: inputName, value: dataStart + " " + dataEnd, type: type })
  126. }
  127. if (visible == "edit") {
  128. let nlist = metadata
  129. nlist[indx] = list[0]
  130. this.setState({
  131. metadata: nlist,
  132. visible: "",
  133. })
  134. } else {
  135. this.setState({
  136. metadata: [...metadata, ...list],
  137. visible: "",
  138. })
  139. }
  140. }
  141. render() {
  142. // if (!this.state.loaded) {
  143. // return <Loading />
  144. // }
  145. const { data, visible, metadata, type, chapterType, chapterData } = this.state
  146. return (
  147. <View className='home'>
  148. <View className='home-item'>
  149. <View className='home-item-tit'>报告模板名称</View>
  150. <Input
  151. value={data.name}
  152. className='home-item-val'
  153. />
  154. </View>
  155. <View className='home-item'>
  156. <View className='home-item-tit'>报告模板标签</View>
  157. </View>
  158. <View className='home-item'>
  159. <View className='home-item-tit'>关联企业</View>
  160. </View>
  161. <View className='home-item'>
  162. <View className='home-item-tit'>企业LOGO</View>
  163. <ImagePicker id={397} />
  164. </View>
  165. <View className='home-item'>
  166. <View className='home-item-tit'>项目名称</View>
  167. <Input
  168. value={data.reportName}
  169. className='home-item-val'
  170. />
  171. </View>
  172. {
  173. metadata.map((item, index) =>
  174. <View className='home-item' key={index}
  175. onClick={() => {
  176. this.setState({
  177. indx: index,
  178. type: item.type,
  179. inputName: item.name,
  180. visible: "edit",
  181. inputText: item.type == "text" ? item.value : undefined,
  182. dateSel: item.type == "date" ? item.value : undefined,
  183. dataStart: item.type == "dateRange" ? item.value.split(" ")[0] : undefined,
  184. dataEnd: item.type == "dateRange" ? item.value.split(" ")[1] : undefined,
  185. })
  186. }}
  187. >
  188. <View className='home-item-tit'>{item.name}</View>
  189. {item.type == "text" && <View className='home-item-val'>{item.value}</View>}
  190. {item.type == "date" && <View className='home-item-val'>{item.value}</View>}
  191. {item.type == "dateRange" && <View className='home-item-val'>{item.value.replace(" ", " → ")}</View>}
  192. </View>
  193. )
  194. }
  195. <View className='home-item'>
  196. <Picker mode='selector' range={this.state.selector} rangeKey="name"
  197. onChange={this.onChange}
  198. >
  199. <Button>+添加新项</Button>
  200. </Picker>
  201. </View>
  202. {
  203. chapterData.map((item, index) =>
  204. <View className='home-item' key={index}>
  205. <Input
  206. value={item.title}
  207. className='home-item-tit'
  208. />
  209. <View className='home-item-text'>
  210. <View>章节关键词:</View>
  211. <Input
  212. value={item.keywords.toString()}
  213. className='home-item-text-val'
  214. placeholder='输入逗号分割'
  215. />
  216. </View>
  217. </View>
  218. )
  219. }
  220. <View className='home-item'>
  221. <Picker mode='chapterType' range={chapterType} rangeKey="title"
  222. onChange={this.onChapterChange}
  223. >
  224. <Button>+添加章节</Button>
  225. </Picker>
  226. </View>
  227. <View className='home-item'>
  228. <View className='home-item-editor' contenteditable="true">请填写内容...</View>
  229. </View>
  230. <View className='home-item'>
  231. <Button type='primary'>保存</Button>
  232. </View>
  233. {visible != "" &&
  234. <View className='mask'>
  235. <View className='count'>
  236. <View className='count_top'>
  237. <Input
  238. value={this.state.inputName}
  239. className='count_top_input'
  240. placeholder='字段名称'
  241. onChange={e => { this.setState({ inputName: e.detail.value }) }}
  242. />
  243. {type == "text" &&
  244. <Input
  245. value={this.state.inputText}
  246. style={{ marginTop: 15 }}
  247. className='count_top_input'
  248. placeholder='请输入字段值'
  249. onChange={e => { this.setState({ inputText: e.detail.value }) }}
  250. />}
  251. {type == "date" &&
  252. <Picker mode='date' value={this.state.dateSel}
  253. onChange={e => {
  254. this.setState({
  255. dateSel: e.detail.value,
  256. })
  257. }}>
  258. <View className={!this.state.dateSel ? 'count_top_dates' : 'count_top_date'}>
  259. {!this.state.dateSel ? "请选择日期" : this.state.dateSel}
  260. </View>
  261. </Picker>
  262. }
  263. {type == "dateRange" &&
  264. <Picker mode='date' value={this.state.dataStart}
  265. onChange={e => {
  266. this.setState({
  267. dataStart: e.detail.value,
  268. })
  269. }}>
  270. <View className={!this.state.dataStart ? 'count_top_dates' : 'count_top_date'}>
  271. {!this.state.dataStart ? "开始日期" : this.state.dataStart}
  272. </View>
  273. </Picker>
  274. }
  275. {type == "dateRange" &&
  276. <Picker mode='date' value={this.state.dataEnd}
  277. onChange={e => {
  278. this.setState({
  279. dataEnd: e.detail.value,
  280. })
  281. }}>
  282. <View className={!this.state.dataEnd ? 'count_top_dates' : 'count_top_date'}>
  283. {!this.state.dataEnd ? "结束日期" : this.state.dataEnd}
  284. </View>
  285. </Picker>
  286. }
  287. </View>
  288. <View className='count_foot'>
  289. <Button onClick={this.onCancel}>取消</Button>
  290. <Button style={{ marginTop: 0 }}
  291. onClick={this.onOk}
  292. >确认</Button>
  293. </View>
  294. </View>
  295. </View>}
  296. </View>
  297. )
  298. }
  299. }
  300. export default TemplateDetail