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