import Taro, { Component } from '@tarojs/taro' import { View, Input, Picker, ScrollView, 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: [], } 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({ selectorChecked: this.state.selector[e.detail.value], inputName: e.detail.value == 2 ? "起止时间" : "", visible: "add" }) } onCancel = () => { this.setState({ inputName: "", inputText: "", dateSel: "", dateStart: "", dateEnd: "", visible: "", }) } onOk = () => { const { visible, metadata, inputName, inputText, selectorChecked, dateSel, dataStart, dataEnd } = this.state if (visible == "add") { let list = [] if (!inputName) { Taro.showToast({ title: "请输入字段名称", icon: 'none' }) return } if (selectorChecked.type == "text") { if (!inputText) { Taro.showToast({ title: "请输入字段值", icon: 'none' }) return } list.push({ name: inputName, value: inputText, type: selectorChecked.type }) } else if (selectorChecked.type == "date") { if (!dateSel) { Taro.showToast({ title: "请选择日期", icon: 'none' }) return } list.push({ name: inputName, value: dateSel, type: selectorChecked.type }) } else if (selectorChecked.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: selectorChecked.type }) } this.setState({ metadata: [...metadata, ...list], visible: "", }) } } render() { // if (!this.state.loaded) { // return // } const { data, visible, metadata, selectorChecked } = this.state return ( 报告模板名称: 报告模板标签: 关联企业: 企业LOGO: 项目名称: { metadata.map((item, index) => 项目名称: ) } {visible != "" && { this.setState({ inputName: e.detail.value }) }} /> {selectorChecked.type == "text" && { this.setState({ inputText: e.detail.value }) }} />} {selectorChecked.type == "date" && { this.setState({ dateSel: e.detail.value, }) }}> {!this.state.dateSel ? "请选择日期" : this.state.dateSel} } {selectorChecked.type == "dateRange" && { this.setState({ dataStart: e.detail.value, }) }}> {!this.state.dataStart ? "开始日期" : this.state.dataStart} } {selectorChecked.type == "dateRange" && { this.setState({ dataEnd: e.detail.value, }) }}> {!this.state.dataEnd ? "结束日期" : this.state.dataEnd} } } ) } } export default TemplateDetail