123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429 |
- 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
|