|
@@ -0,0 +1,429 @@
|
|
|
+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 <Loading />
|
|
|
+ // }
|
|
|
+
|
|
|
+ const { data, visible, metadata, type, chapterType, chapterData, aeList } = this.state
|
|
|
+ return (
|
|
|
+ <View className='home'>
|
|
|
+ <View className='home-item'>
|
|
|
+ <View className='home-item-tit'>关联企业</View>
|
|
|
+ <View className='home-item-vals'>
|
|
|
+ <Picker mode='selector' range={aeList} rangeKey="name"
|
|
|
+ onChange={this.onAeChange}
|
|
|
+ >
|
|
|
+ <View className='home-item-vals-txt'>{data.companyName || "请选择关联企业"}</View>
|
|
|
+ </Picker>
|
|
|
+ <View className='home-item-vals-bt'>
|
|
|
+ <Button size='mini' type='primary' onClick={() => { this.setState({ newvb: true }) }}>+新增企业</Button>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ <View className='home-item'>
|
|
|
+ <View className='home-item-tit'>报告类型</View>
|
|
|
+ <Input
|
|
|
+ value={data.name}
|
|
|
+ className='home-item-val'
|
|
|
+ placeholder='请输入报告类型'
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ <View className='home-item'>
|
|
|
+ <View className='home-item-tit'>项目名称</View>
|
|
|
+ <Input
|
|
|
+ value={data.reportName}
|
|
|
+ className='home-item-val'
|
|
|
+ placeholder='请输入项目名称'
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ <View className='home-item'>
|
|
|
+ <View className='home-item-tit'>项目负责人</View>
|
|
|
+ <Input
|
|
|
+ value={data.supervisor}
|
|
|
+ className='home-item-val'
|
|
|
+ placeholder='请输入项目负责人'
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ <View className='home-item'>
|
|
|
+ <View className='home-item-tit'>企业LOGO</View>
|
|
|
+ <ImagePicker id={data.id} />
|
|
|
+ </View>
|
|
|
+ <View className='home-item'>
|
|
|
+ <View className='home-item-tit'>关键词</View>
|
|
|
+ <Input
|
|
|
+ value={data.keywords}
|
|
|
+ className='home-item-val'
|
|
|
+ placeholder='请输入关键词'
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ {
|
|
|
+ metadata.map((item, index) =>
|
|
|
+ <View className='home-item' key={index}
|
|
|
+ onClick={() => {
|
|
|
+ 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,
|
|
|
+ })
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <View className='home-item-tit'>{item.name}</View>
|
|
|
+ {item.type == "text" && <View className='home-item-val'>{item.value}</View>}
|
|
|
+ {item.type == "date" && <View className='home-item-val'>{item.value}</View>}
|
|
|
+ {item.type == "dateRange" && <View className='home-item-val'>{item.value.replace(" ", " → ")}</View>}
|
|
|
+ </View>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ <View className='home-item'>
|
|
|
+ <Picker mode='selector' range={this.state.selector} rangeKey="name"
|
|
|
+ onChange={this.onChange}
|
|
|
+ >
|
|
|
+ <Button>+添加新项</Button>
|
|
|
+ </Picker>
|
|
|
+ </View>
|
|
|
+
|
|
|
+ <View className='home-line' />
|
|
|
+
|
|
|
+ {
|
|
|
+ chapterData.map((item, index) =>
|
|
|
+ <View className='home-item' key={index}>
|
|
|
+ <Input
|
|
|
+ value={item.title}
|
|
|
+ className='home-item-tit'
|
|
|
+ />
|
|
|
+ <View className='home-item-text'>
|
|
|
+ <View>章节关键词:</View>
|
|
|
+ <Input
|
|
|
+ value={item.keywords.toString()}
|
|
|
+ className='home-item-text-val'
|
|
|
+ placeholder='输入逗号分割'
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ <View className='home-item-editor' contenteditable="true">请填写内容...</View>
|
|
|
+ <View className='home-item-bottom'>
|
|
|
+ <Button size='mini' type='primary'>Al生成</Button>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ )
|
|
|
+ }
|
|
|
+
|
|
|
+ <View className='home-item'>
|
|
|
+ <Picker mode='selector' range={chapterType} rangeKey="title"
|
|
|
+ onChange={this.onChapterChange}
|
|
|
+ >
|
|
|
+ <Button>+添加章节</Button>
|
|
|
+ </Picker>
|
|
|
+ </View>
|
|
|
+
|
|
|
+
|
|
|
+ <View className='home-item' style={{ marginTop: 60 }}>
|
|
|
+ <Button type='primary'>保存</Button>
|
|
|
+ </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 }) }}
|
|
|
+ />
|
|
|
+ {type == "text" &&
|
|
|
+ <Input
|
|
|
+ value={this.state.inputText}
|
|
|
+ style={{ marginTop: 15 }}
|
|
|
+ className='count_top_input'
|
|
|
+ placeholder='请输入字段值'
|
|
|
+ onChange={e => { this.setState({ inputText: e.detail.value }) }}
|
|
|
+ />}
|
|
|
+ {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>
|
|
|
+ }
|
|
|
+ {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>
|
|
|
+ }
|
|
|
+ {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>}
|
|
|
+
|
|
|
+ {
|
|
|
+ this.state.newvb &&
|
|
|
+ <View className='mask'>
|
|
|
+ <View className='count'>
|
|
|
+ <View className='title'>新增企业名称</View>
|
|
|
+ <View className='count_top'>
|
|
|
+ <Input
|
|
|
+ value={this.state.name}
|
|
|
+ className='count_top_input'
|
|
|
+ placeholder='请输入新企业名称'
|
|
|
+ onChange={e => { this.setState({ name: e.detail.value }) }}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ <View className='count_foot'>
|
|
|
+ <Button onClick={this.onAeCancel}>取消</Button>
|
|
|
+ <Button style={{ marginTop: 0 }}
|
|
|
+ onClick={this.onAeOk}
|
|
|
+ >确认</Button>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+
|
|
|
+ </View>
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export default ReportDetail
|