import Taro, { Component } from '@tarojs/taro' import { View, Input, Picker, Label, Button } from '@tarojs/components' import { Loading } from '@components' import { connect } from '@tarojs/redux' import * as actions from '@actions/template' import { getWindowHeight } from '@utils/style' import ImagePicker from '../../components/imagePicker' import './templatedetail.scss' @connect(state => state.home, { ...actions, }) class TemplateDetail extends Component { config = { navigationBarTitleText: '报告模板编辑' } state = { selector: [ { name: "文本项", type: "text" }, { name: "日期项", type: "date" }, { name: "起止时间", type: "dateRange" }, ], visible: "", data: {}, metadata: [], chapterType: [ { title: "立项背景与意义", key: "BACKGROUND", keywords: ['必要性'] }, { title: "国内外研究现状与发展趋势", key: "RESEARCH_STATUS", keywords: ['研究现状', '发展趋势'] }, { title: "项目主要研究内容", key: "RESEARCH", keywords: ['技术特点', '技术研究', '实际应用'] }, { title: "关键技术与创新点", key: "INNOVATION", keywords: ['关键技术', '创新点'] }, { title: "拟解决的关键问题", key: "SOLVE_PROBLEM", keywords: ['解决的问题', '解决的关键问题'] }, { title: "实施方案及进度安排", key: "SOLUTION", keywords: ['实施方案'] }, { title: "经费预算", key: "BUDGET", keywords: [] }, { title: "经济及社会效益分析", key: "BENEFIT_ANALYSIS", keywords: ['经济效益', '社会效益', '经济效益分析', '社会效益分析'] }, { title: "项目风险分析和对策", key: "RISK", keywords: ['风险分析', '风险对策'] }, { title: "自定义章节", key: "USER_DEFINED", keywords: [] }, ], chapterData: [], } componentDidMount() { // this.getData() } getData() { this.setState({ loading: true }) let payload = { id: this.$router.params.id, } this.props.reportTemplate(payload).then((data) => { this.setState({ loading: false, data: data.data, }) }).catch(() => { this.setState({ loading: false }) }) } // 添加新项 onChange = e => { this.setState({ type: this.state.selector[e.detail.value].type, inputName: e.detail.value == 2 ? "起止时间" : undefined, visible: "add" }) } onChapterChange = e => { let list = this.state.chapterData list.push(this.state.chapterType[e.detail.value]) this.setState({ chapterData: list }) } onCancel = () => { this.setState({ inputName: undefined, inputText: undefined, dateSel: undefined, dataStart: undefined, dataEnd: undefined, indx: undefined, type: "", visible: "", }) } onOk = () => { const { visible, metadata, inputName, inputText, type, indx, dateSel, dataStart, dataEnd } = this.state // if (visible == "add") { let list = [] if (!inputName) { Taro.showToast({ title: "请输入字段名称", icon: 'none' }) return } if (type == "text") { if (!inputText) { Taro.showToast({ title: "请输入字段值", icon: 'none' }) return } list.push({ name: inputName, value: inputText, type: type }) } else if (type == "date") { if (!dateSel) { Taro.showToast({ title: "请选择日期", icon: 'none' }) return } list.push({ name: inputName, value: dateSel, type: type }) } else if (type == "dateRange") { if (!dataStart) { Taro.showToast({ title: "请选择开始日期", icon: 'none' }) return } if (!dataEnd) { Taro.showToast({ title: "请选择结束日期", icon: 'none' }) return } list.push({ name: inputName, value: dataStart + " " + dataEnd, type: type }) } if (visible == "edit") { let nlist = metadata nlist[indx] = list[0] this.setState({ metadata: nlist, visible: "", }) } else { this.setState({ metadata: [...metadata, ...list], visible: "", }) } } render() { // if (!this.state.loaded) { // return // } const { data, visible, metadata, type, chapterType, chapterData } = this.state return ( 报告模板名称 报告模板标签 关联企业 企业LOGO 项目名称 { metadata.map((item, index) => { this.setState({ indx: index, type: item.type, inputName: item.name, visible: "edit", inputText: item.type == "text" ? item.value : undefined, dateSel: item.type == "date" ? item.value : undefined, dataStart: item.type == "dateRange" ? item.value.split(" ")[0] : undefined, dataEnd: item.type == "dateRange" ? item.value.split(" ")[1] : undefined, }) }} > {item.name} {item.type == "text" && {item.value}} {item.type == "date" && {item.value}} {item.type == "dateRange" && {item.value.replace(" ", " → ")}} ) } { chapterData.map((item, index) => 章节关键词: ) } 请填写内容... {visible != "" && { this.setState({ inputName: e.detail.value }) }} /> {type == "text" && { this.setState({ inputText: e.detail.value }) }} />} {type == "date" && { this.setState({ dateSel: e.detail.value, }) }}> {!this.state.dateSel ? "请选择日期" : this.state.dateSel} } {type == "dateRange" && { this.setState({ dataStart: e.detail.value, }) }}> {!this.state.dataStart ? "开始日期" : this.state.dataStart} } {type == "dateRange" && { this.setState({ dataEnd: e.detail.value, }) }}> {!this.state.dataEnd ? "结束日期" : this.state.dataEnd} } } ) } } export default TemplateDetail