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/report' import { getWindowHeight } from '@utils/style' import ImagePicker from '../../components/imagePicker' import './templatedetail.scss' @connect(state => state.home, { ...actions, }) class ReportDetail 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: [], aeList: [], name: "", newvb: false, } componentDidMount() { // this.getData() this.getQuery() } // 详情接口 getData() { this.setState({ loading: true }) let payload = { id: this.$router.params.id, } this.props.reportDetail(payload).then((data) => { this.setState({ loading: false, data: data.data, }) }).catch(() => { this.setState({ loading: false }) }) } getQuery() { let payload = { name: "", size: 99, } this.props.query(payload).then((data) => { this.setState({ aeList: data.data, }) }).catch(() => { }) } // 添加新项 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 }) } onAeChange = e => { console.log("-----", e.detail.value) } onCancel = () => { this.setState({ inputName: undefined, inputText: undefined, dateSel: undefined, dataStart: undefined, dataEnd: undefined, indx: undefined, type: "", visible: "", }) } onAeCancel = () => { this.setState({ name: "", newvb: false, }) } onAeOk = () => { if (!this.state.name) { Taro.showToast({ title: "请输入新企业名称", icon: 'none' }) return } const payload = { name: this.state.name, } this.props.company(payload).then((data) => { this.setState({ name: data.data.name, newvb: false, }) }).catch(() => { }) } 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, aeList } = this.state return ( 关联企业 {data.companyName || "请选择关联企业"} 报告类型 项目名称 项目负责人 企业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} } } { this.state.newvb && 新增企业名称 { this.setState({ name: e.detail.value }) }} /> } ) } } export default ReportDetail