reportdetail.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429
  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/report'
  6. import { getWindowHeight } from '@utils/style'
  7. import ImagePicker from '../../components/imagePicker'
  8. import './templatedetail.scss'
  9. @connect(state => state.home, { ...actions, })
  10. class ReportDetail 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. aeList: [],
  37. name: "",
  38. newvb: false,
  39. }
  40. componentDidMount() {
  41. // this.getData()
  42. this.getQuery()
  43. }
  44. // 详情接口
  45. getData() {
  46. this.setState({ loading: true })
  47. let payload = {
  48. id: this.$router.params.id,
  49. }
  50. this.props.reportDetail(payload).then((data) => {
  51. this.setState({
  52. loading: false,
  53. data: data.data,
  54. })
  55. }).catch(() => {
  56. this.setState({ loading: false })
  57. })
  58. }
  59. getQuery() {
  60. let payload = {
  61. name: "",
  62. size: 99,
  63. }
  64. this.props.query(payload).then((data) => {
  65. this.setState({
  66. aeList: data.data,
  67. })
  68. }).catch(() => {
  69. })
  70. }
  71. // 添加新项
  72. onChange = e => {
  73. this.setState({
  74. type: this.state.selector[e.detail.value].type,
  75. inputName: e.detail.value == 2 ? "起止时间" : undefined,
  76. visible: "add"
  77. })
  78. }
  79. onChapterChange = e => {
  80. let list = this.state.chapterData
  81. list.push(this.state.chapterType[e.detail.value])
  82. this.setState({
  83. chapterData: list
  84. })
  85. }
  86. onAeChange = e => {
  87. console.log("-----", e.detail.value)
  88. }
  89. onCancel = () => {
  90. this.setState({
  91. inputName: undefined,
  92. inputText: undefined,
  93. dateSel: undefined,
  94. dataStart: undefined,
  95. dataEnd: undefined,
  96. indx: undefined,
  97. type: "",
  98. visible: "",
  99. })
  100. }
  101. onAeCancel = () => {
  102. this.setState({
  103. name: "",
  104. newvb: false,
  105. })
  106. }
  107. onAeOk = () => {
  108. if (!this.state.name) {
  109. Taro.showToast({
  110. title: "请输入新企业名称",
  111. icon: 'none'
  112. })
  113. return
  114. }
  115. const payload = {
  116. name: this.state.name,
  117. }
  118. this.props.company(payload).then((data) => {
  119. this.setState({
  120. name: data.data.name,
  121. newvb: false,
  122. })
  123. }).catch(() => {
  124. })
  125. }
  126. onOk = () => {
  127. const { visible, metadata, inputName, inputText, type, indx, dateSel, dataStart, dataEnd } = this.state
  128. // if (visible == "add") {
  129. let list = []
  130. if (!inputName) {
  131. Taro.showToast({
  132. title: "请输入字段名称",
  133. icon: 'none'
  134. })
  135. return
  136. }
  137. if (type == "text") {
  138. if (!inputText) {
  139. Taro.showToast({
  140. title: "请输入字段值",
  141. icon: 'none'
  142. })
  143. return
  144. }
  145. list.push({ name: inputName, value: inputText, type: type })
  146. } else if (type == "date") {
  147. if (!dateSel) {
  148. Taro.showToast({
  149. title: "请选择日期",
  150. icon: 'none'
  151. })
  152. return
  153. }
  154. list.push({ name: inputName, value: dateSel, type: type })
  155. } else if (type == "dateRange") {
  156. if (!dataStart) {
  157. Taro.showToast({
  158. title: "请选择开始日期",
  159. icon: 'none'
  160. })
  161. return
  162. }
  163. if (!dataEnd) {
  164. Taro.showToast({
  165. title: "请选择结束日期",
  166. icon: 'none'
  167. })
  168. return
  169. }
  170. list.push({ name: inputName, value: dataStart + " " + dataEnd, type: type })
  171. }
  172. if (visible == "edit") {
  173. let nlist = metadata
  174. nlist[indx] = list[0]
  175. this.setState({
  176. metadata: nlist,
  177. visible: "",
  178. })
  179. } else {
  180. this.setState({
  181. metadata: [...metadata, ...list],
  182. visible: "",
  183. })
  184. }
  185. }
  186. render() {
  187. // if (!this.state.loaded) {
  188. // return <Loading />
  189. // }
  190. const { data, visible, metadata, type, chapterType, chapterData, aeList } = this.state
  191. return (
  192. <View className='home'>
  193. <View className='home-item'>
  194. <View className='home-item-tit'>关联企业</View>
  195. <View className='home-item-vals'>
  196. <Picker mode='selector' range={aeList} rangeKey="name"
  197. onChange={this.onAeChange}
  198. >
  199. <View className='home-item-vals-txt'>{data.companyName || "请选择关联企业"}</View>
  200. </Picker>
  201. <View className='home-item-vals-bt'>
  202. <Button size='mini' type='primary' onClick={() => { this.setState({ newvb: true }) }}>+新增企业</Button>
  203. </View>
  204. </View>
  205. </View>
  206. <View className='home-item'>
  207. <View className='home-item-tit'>报告类型</View>
  208. <Input
  209. value={data.name}
  210. className='home-item-val'
  211. placeholder='请输入报告类型'
  212. />
  213. </View>
  214. <View className='home-item'>
  215. <View className='home-item-tit'>项目名称</View>
  216. <Input
  217. value={data.reportName}
  218. className='home-item-val'
  219. placeholder='请输入项目名称'
  220. />
  221. </View>
  222. <View className='home-item'>
  223. <View className='home-item-tit'>项目负责人</View>
  224. <Input
  225. value={data.supervisor}
  226. className='home-item-val'
  227. placeholder='请输入项目负责人'
  228. />
  229. </View>
  230. <View className='home-item'>
  231. <View className='home-item-tit'>企业LOGO</View>
  232. <ImagePicker id={data.id} />
  233. </View>
  234. <View className='home-item'>
  235. <View className='home-item-tit'>关键词</View>
  236. <Input
  237. value={data.keywords}
  238. className='home-item-val'
  239. placeholder='请输入关键词'
  240. />
  241. </View>
  242. {
  243. metadata.map((item, index) =>
  244. <View className='home-item' key={index}
  245. onClick={() => {
  246. this.setState({
  247. indx: index,
  248. type: item.type,
  249. inputName: item.name,
  250. visible: "edit",
  251. inputText: item.type == "text" ? item.value : undefined,
  252. dateSel: item.type == "date" ? item.value : undefined,
  253. dataStart: item.type == "dateRange" ? item.value.split(" ")[0] : undefined,
  254. dataEnd: item.type == "dateRange" ? item.value.split(" ")[1] : undefined,
  255. })
  256. }}
  257. >
  258. <View className='home-item-tit'>{item.name}</View>
  259. {item.type == "text" && <View className='home-item-val'>{item.value}</View>}
  260. {item.type == "date" && <View className='home-item-val'>{item.value}</View>}
  261. {item.type == "dateRange" && <View className='home-item-val'>{item.value.replace(" ", " → ")}</View>}
  262. </View>
  263. )
  264. }
  265. <View className='home-item'>
  266. <Picker mode='selector' range={this.state.selector} rangeKey="name"
  267. onChange={this.onChange}
  268. >
  269. <Button>+添加新项</Button>
  270. </Picker>
  271. </View>
  272. <View className='home-line' />
  273. {
  274. chapterData.map((item, index) =>
  275. <View className='home-item' key={index}>
  276. <Input
  277. value={item.title}
  278. className='home-item-tit'
  279. />
  280. <View className='home-item-text'>
  281. <View>章节关键词:</View>
  282. <Input
  283. value={item.keywords.toString()}
  284. className='home-item-text-val'
  285. placeholder='输入逗号分割'
  286. />
  287. </View>
  288. <View className='home-item-editor' contenteditable="true">请填写内容...</View>
  289. <View className='home-item-bottom'>
  290. <Button size='mini' type='primary'>Al生成</Button>
  291. </View>
  292. </View>
  293. )
  294. }
  295. <View className='home-item'>
  296. <Picker mode='selector' range={chapterType} rangeKey="title"
  297. onChange={this.onChapterChange}
  298. >
  299. <Button>+添加章节</Button>
  300. </Picker>
  301. </View>
  302. <View className='home-item' style={{ marginTop: 60 }}>
  303. <Button type='primary'>保存</Button>
  304. </View>
  305. {/* 新增项 */}
  306. {visible != "" &&
  307. <View className='mask'>
  308. <View className='count'>
  309. <View className='count_top'>
  310. <Input
  311. value={this.state.inputName}
  312. className='count_top_input'
  313. placeholder='字段名称'
  314. onChange={e => { this.setState({ inputName: e.detail.value }) }}
  315. />
  316. {type == "text" &&
  317. <Input
  318. value={this.state.inputText}
  319. style={{ marginTop: 15 }}
  320. className='count_top_input'
  321. placeholder='请输入字段值'
  322. onChange={e => { this.setState({ inputText: e.detail.value }) }}
  323. />}
  324. {type == "date" &&
  325. <Picker mode='date' value={this.state.dateSel}
  326. onChange={e => {
  327. this.setState({
  328. dateSel: e.detail.value,
  329. })
  330. }}>
  331. <View className={!this.state.dateSel ? 'count_top_dates' : 'count_top_date'}>
  332. {!this.state.dateSel ? "请选择日期" : this.state.dateSel}
  333. </View>
  334. </Picker>
  335. }
  336. {type == "dateRange" &&
  337. <Picker mode='date' value={this.state.dataStart}
  338. onChange={e => {
  339. this.setState({
  340. dataStart: e.detail.value,
  341. })
  342. }}>
  343. <View className={!this.state.dataStart ? 'count_top_dates' : 'count_top_date'}>
  344. {!this.state.dataStart ? "开始日期" : this.state.dataStart}
  345. </View>
  346. </Picker>
  347. }
  348. {type == "dateRange" &&
  349. <Picker mode='date' value={this.state.dataEnd}
  350. onChange={e => {
  351. this.setState({
  352. dataEnd: e.detail.value,
  353. })
  354. }}>
  355. <View className={!this.state.dataEnd ? 'count_top_dates' : 'count_top_date'}>
  356. {!this.state.dataEnd ? "结束日期" : this.state.dataEnd}
  357. </View>
  358. </Picker>
  359. }
  360. </View>
  361. <View className='count_foot'>
  362. <Button onClick={this.onCancel}>取消</Button>
  363. <Button style={{ marginTop: 0 }}
  364. onClick={this.onOk}
  365. >确认</Button>
  366. </View>
  367. </View>
  368. </View>}
  369. {
  370. this.state.newvb &&
  371. <View className='mask'>
  372. <View className='count'>
  373. <View className='title'>新增企业名称</View>
  374. <View className='count_top'>
  375. <Input
  376. value={this.state.name}
  377. className='count_top_input'
  378. placeholder='请输入新企业名称'
  379. onChange={e => { this.setState({ name: e.detail.value }) }}
  380. />
  381. </View>
  382. <View className='count_foot'>
  383. <Button onClick={this.onAeCancel}>取消</Button>
  384. <Button style={{ marginTop: 0 }}
  385. onClick={this.onAeOk}
  386. >确认</Button>
  387. </View>
  388. </View>
  389. </View>
  390. }
  391. </View>
  392. )
  393. }
  394. }
  395. export default ReportDetail