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 RuiEditor from '../../components/editor' import './reportdetail.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: [] }, ], chapters: [], aeList: [], name: "", newvb: false, popup: false, template: false, name: '', tags: [], } componentDidMount() { this.getData() this.getQuery() } componentWillUnmount() { } // 详情接口 getData() { this.setState({ loading: true }) let payload = { id: this.$router.params.id, } this.props.reportDetail(payload).then((data) => { this.setState({ loading: false, data: data, metadata: data.metadata, chapters: data.chapters, }) }).catch(() => { this.setState({ loading: false }) }) } // 获取企业列表 getQuery() { let payload = { name: "", size: 99, } this.props.query(payload).then((data) => { this.setState({ aeList: data, }) }).catch(() => { }) } // Al生成 getGenerate(title, i) { const { data } = this.state let payload = { chapterTitle: title, keywords: data.keywords, projectName: data.reportName, } Taro.showLoading({ title: 'AI正在撰写章节内容,请稍等…', mask: true, }) this.props.generate(payload).then((res) => { Taro.hideLoading() const chaplist = this.state.data.chapters chaplist.forEach(function (item, index) { if (index == i) { item.content = res } }) this.setState({ chapters: chaplist }) }).catch(() => { Taro.hideLoading() }) } // 添加新项 onChange = e => { this.setState({ type: this.state.selector[e.detail.value].type, inputName: e.detail.value == 2 ? "起止时间" : undefined, visible: "add" }) } // 阿拉伯数字转中文 numberToChinese(num) { var arr1 = new Array('零', '一', '二', '三', '四', '五', '六', '七', '八', '九'); var arr2 = new Array('', '十', '百', '千', '万', '十', '百', '千', '亿', '十', '百', '千', '万', '十', '百', '千', '亿');//可继续追加更高位转换值 if (!num || isNaN(num)) { return "零"; } var english = num.toString().split(""); var result = ""; for (var i = 0; i < english.length; i++) { var des_i = english.length - 1 - i;//倒序排列设值 result = arr2[i] + result; var arr1_index = english[des_i]; result = arr1[arr1_index] + result; } //将【零千、零百】换成【零】 【十零】换成【十】 result = result.replace(/零(千|百|十)/g, '零').replace(/十零/g, '十'); //合并中间多个零为一个零 result = result.replace(/零+/g, '零'); //将【零亿】换成【亿】【零万】换成【万】 result = result.replace(/零亿/g, '亿').replace(/零万/g, '万'); //将【亿万】换成【亿】 result = result.replace(/亿万/g, '亿'); //移除末尾的零 result = result.replace(/零+$/, ''); //将【零一十】换成【零十】 //result = result.replace(/零一十/g, '零十');//貌似正规读法是零一十 //将【一十】换成【十】 result = result.replace(/^一十/g, '十'); return result; } // 字符串拼接 getTitleWithChineseNum(index, title) { return this.numberToChinese(index + 1) + '、' + title } // 章节添加 onChapterChange = e => { let list = this.state.chapters let obj = this.state.chapterType[e.detail.value] let data = { chapterType: obj.key, content: "", fullTitle: this.getTitleWithChineseNum(list.length, obj.title), keywords: obj.keywords, title: obj.title, } list.push(data) this.setState({ chapters: list }) } // 选中关联企业 onAeChange = e => { const { aeList } = this.state let obj = aeList[e.detail.value] let list = this.state.data list.companyName = obj.name list.companyId = obj.id this.setState({ data: list, }) } // 企业添加 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) => { let obj = this.state.data obj.companyName = data.name obj.companyId = data.id this.setState({ data: obj, newvb: false, }) }).catch(() => { }) } // 添加新项弹窗 onCancel = () => { this.setState({ inputName: undefined, inputText: undefined, dateSel: undefined, dataStart: undefined, dataEnd: undefined, indx: undefined, type: "", visible: "", }) } // 添加新项弹窗 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: "", }) } } // 修改章节名 onChapTitle = (i, e) => { const data = this.state.chapters data.forEach(function (item, index) { if (index == i) { item.title = e.detail.value } }) this.setState({ chapters: data }) } // 修改章节关键词 onChapKeywords = (i, e) => { const data = this.state.chapters data.forEach(function (item, index) { if (index == i) { let val = e.detail.value.replace(/[\uff0c]/g, ",") item.keywords = !val ? [] : val.split(",") } }) this.setState({ chapters: data }) } // 修改章节内容 onChaoContent = (i, e) => { const data = this.state.chapters data.forEach(function (item, index) { if (index == i) { item.content = e.detail.html } }) this.setState({ chapters: data }) } // 二级确认 toggleVisible = () => { this.setState({ popup: !this.state.popup, }) } // 删除章节 delChap = () => { const list = this.state.chapters list.splice(this.state.delIndex, 1) for (var i = 0; i < list.length; i++) { list[i].fullTitle = this.getTitleWithChineseNum(i, list[i].title) } this.setState({ chapters: list }) this.toggleVisible() } // 保存 onSubmit = () => { const { data, metadata, chapters } = this.state if (!data.companyId) { Taro.showToast({ title: "请填写关联企业!", icon: 'none' }) return } if (!data.name) { Taro.showToast({ title: "请填写报告类型!", icon: 'none' }) return } if (!data.reportName) { Taro.showToast({ title: "请填写项目名称!", icon: 'none' }) return } if (!data.supervisor) { Taro.showToast({ title: "请填写负责人!", icon: 'none' }) return } if (!data.keywords) { Taro.showToast({ title: "请填写关键词!", icon: 'none' }) return } data.metadata = metadata data.chapters = chapters let payload = data this.props.report(payload).then((data) => { Taro.showToast({ title: "保存成功", icon: 'none' }) }).catch(() => { }) } // 另存为模板 onReportTemplate = () => { const { data, metadata, chapters, name, tags } = this.state if (!this.state.name) { Taro.showToast({ title: "请填写模板名称!", icon: 'none' }) return } let payload = { chapters, companyId: data.companyId || 0, id: 0, logoPath: data.logoPath || '', metadata, name, reportName: data.reportName || '', tags, } this.props.onReportTemplate(payload).then((data) => { this.onTemCancel() Taro.showToast({ title: "模板保存成功", icon: 'none' }) }).catch(() => { }) } // 取消 onTemCancel = () => { this.setState({ name: '', tags: [], template: false, }) } render() { // if (!this.state.loaded) { // return // } const { data, visible, metadata, type, chapterType, chapters, aeList } = this.state return ( 关联企业 {data.companyName || "请选择关联企业"} 报告类型 { let obj = data obj.name = e.detail.value this.setState({ data: obj, }) }} /> 项目名称 { let obj = data obj.reportName = e.detail.value this.setState({ data: obj, }) }} /> 项目负责人 { let obj = data obj.supervisor = e.detail.value this.setState({ data: obj, }) }} /> 企业LOGO { let obj = data obj.logoPath = path this.setState({ data: obj, }) }} /> 关键词 { let obj = data obj.keywords = e.detail.value this.setState({ data: obj, }) }} /> { 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(" ", " → ")}} ) } { chapters.map((item, index) => { this.onChapTitle(index, e) }} /> 章节关键词: { this.onChapKeywords(index, e) }} /> { this.onChaoContent(index, e) }} /> {/* {item.content || "请填写内容..."} */} ) } {/* 新增项 */} {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 }) }} /> } {/* 二级确认 */} {this.state.popup && 确认删除吗? } {/* 另存为模板 */} {this.state.template && 另存为模板 { this.setState({ name: e.detail.value }) }} /> { let val = e.detail.value.replace(/[\uff0c]/g, ",") this.setState({ tags: !val ? [] : val.split(",") }) }} /> } ) } } export default ReportDetail