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
// }
const { data, visible, metadata, type, chapterType, chapterData, aeList } = this.state
return (
关联企业
{data.companyName || "请选择关联企业"}
报告类型
项目名称
项目负责人
企业LOGO
关键词
{
metadata.map((item, index) =>
{
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,
})
}}
>
{item.name}
{item.type == "text" && {item.value}}
{item.type == "date" && {item.value}}
{item.type == "dateRange" && {item.value.replace(" ", " → ")}}
)
}
{
chapterData.map((item, index) =>
章节关键词:
请填写内容...
)
}
{/* 新增项 */}
{visible != "" &&
{ this.setState({ inputName: e.detail.value }) }}
/>
{type == "text" &&
{ this.setState({ inputText: e.detail.value }) }}
/>}
{type == "date" &&
{
this.setState({
dateSel: e.detail.value,
})
}}>
{!this.state.dateSel ? "请选择日期" : this.state.dateSel}
}
{type == "dateRange" &&
{
this.setState({
dataStart: e.detail.value,
})
}}>
{!this.state.dataStart ? "开始日期" : this.state.dataStart}
}
{type == "dateRange" &&
{
this.setState({
dataEnd: e.detail.value,
})
}}>
{!this.state.dataEnd ? "结束日期" : this.state.dataEnd}
}
}
{
this.state.newvb &&
新增企业名称
{ this.setState({ name: e.detail.value }) }}
/>
}
)
}
}
export default ReportDetail