123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241 |
- 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 <Loading />
- // }
- const { data, visible, metadata, selectorChecked } = this.state
- return (
- <View className='home'>
- <View className='home-item'>
- <View className='home-item-tit'>报告模板名称:</View>
- <Input
- value={data.name}
- className='home-item-val'
- />
- </View>
- <View className='home-item'>
- <View className='home-item-tit'>报告模板标签:</View>
- </View>
- <View className='home-item'>
- <View className='home-item-tit'>关联企业:</View>
- </View>
- <View className='home-item'>
- <View className='home-item-tit'>企业LOGO:</View>
- <ImagePicker id={397} />
- </View>
- <View className='home-item'>
- <View className='home-item-tit'>项目名称:</View>
- <Input
- value={data.reportName}
- className='home-item-val'
- />
- </View>
- {
- metadata.map((item, index) =>
- <View className='home-item'>
- <View className='home-item-tit'>项目名称:</View>
- <Input
- value={data.reportName}
- className='home-item-val'
- />
- </View>
- )
- }
- <View className='home-item'>
- <Picker mode='selector' range={this.state.selector} rangeKey="name"
- onChange={this.onChange}
- >
- <Button type='primary'>+添加新项</Button>
- </Picker>
- </View>
- {visible != "" &&
- <View className='mask'>
- <View className='count'>
- <View className='count_top'>
- <Input
- value={this.state.inputName}
- className='count_top_input'
- placeholder='字段名称'
- onChange={e => { this.setState({ inputName: e.detail.value }) }}
- />
- {selectorChecked.type == "text" &&
- <Input
- value={this.state.inputText}
- style={{ marginTop: 15 }}
- className='count_top_input'
- placeholder='请输入字段值'
- onChange={e => { this.setState({ inputText: e.detail.value }) }}
- />}
- {selectorChecked.type == "date" &&
- <Picker mode='date' value={this.state.dateSel}
- onChange={e => {
- this.setState({
- dateSel: e.detail.value,
- })
- }}>
- <View className={!this.state.dateSel ? 'count_top_dates' : 'count_top_date'}>
- {!this.state.dateSel ? "请选择日期" : this.state.dateSel}
- </View>
- </Picker>
- }
- {selectorChecked.type == "dateRange" &&
- <Picker mode='date' value={this.state.dataStart}
- onChange={e => {
- this.setState({
- dataStart: e.detail.value,
- })
- }}>
- <View className={!this.state.dataStart ? 'count_top_dates' : 'count_top_date'}>
- {!this.state.dataStart ? "开始日期" : this.state.dataStart}
- </View>
- </Picker>
- }
- {selectorChecked.type == "dateRange" &&
- <Picker mode='date' value={this.state.dataEnd}
- onChange={e => {
- this.setState({
- dataEnd: e.detail.value,
- })
- }}>
- <View className={!this.state.dataEnd ? 'count_top_dates' : 'count_top_date'}>
- {!this.state.dataEnd ? "结束日期" : this.state.dataEnd}
- </View>
- </Picker>
- }
- </View>
- <View className='count_foot'>
- <Button onClick={this.onCancel}>取消</Button>
- <Button style={{ marginTop: 0 }}
- onClick={this.onOk}
- >确认</Button>
- </View>
- </View>
- </View>}
- </View>
- )
- }
- }
- export default TemplateDetail
|