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