|
@@ -0,0 +1,241 @@
|
|
|
+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
|