eta_mobile_front/src/views/reportEn/components/EditStrategyReport.vue

<script setup>
import moment from "moment"
import { reactive,ref } from "vue"
import apiReportEn from '@/api/reportEn'
import {reportFrequencyOpts} from '@/views/report/utils/config'
import { showToast } from "vant"


const props=defineProps({
    defaultData:null
})

const emits=defineEmits(['close','confirm'])

const baseInfo=reactive({
    author:props.defaultData?[props.defaultData.Author]:['Horizon Insights FICC Team'],
    frequency: props.defaultData?[props.defaultData.Frequency]:['日度'],
    createtime:props.defaultData?moment(props.defaultData.CreateTime).format('YYYY-MM-DD'):moment().format('YYYY-MM-DD'),
    title:props.defaultData?props.defaultData.Title:'',
    abstract:props.defaultData?props.defaultData.Abstract:''
})

// 研报作者
const showAuthorPop=ref(false)
const authorOpts=ref([])
const temAuthorVal=ref([])
function handleShowSelectAuthor(){
    temAuthorVal.value=baseInfo.author
    showAuthorPop.value=true
}
function handleConfirmAuthor(){
    baseInfo.author=temAuthorVal.value
    showAuthorPop.value=false
}
function getAuthorOpts(){
    apiReportEn.reportAuthorList({}).then(res=>{
        if(res.Ret===200){
            authorOpts.value=res.Data?.List??[]
        }
    })
}
getAuthorOpts()

// 报告频度
const showFrequencyPop=ref(false)
const temFrequencyVal=ref(['日度'])
function handleShowFrequency(){
    temFrequencyVal.value=baseInfo.frequency
    showFrequencyPop.value=true
}
function handleConfirmFrequency(){
    baseInfo.frequency=temFrequencyVal.value
    showFrequencyPop.value=false
}

// 创建日期
const minDate=new Date(2015, 0, 1)
const defaultDate=ref(new Date())
const showCreateTimePop=ref(false)
function handleShowCreatetime(){
    defaultDate.value=new Date(baseInfo.createtime.replace(/-/g,'/'))
    showCreateTimePop.value=true
}
function handleConfirmCreatime(e){
    baseInfo.createtime=moment(e).format('YYYY-MM-DD')
    showCreateTimePop.value=false
}

// 报告标题
const showReportTitlePop=ref(false)
const temReportTitleVal=ref('')
function handleShowReportTitle(){
    temReportTitleVal.value=baseInfo.title
    showReportTitlePop.value=true
}
function handleConfirmReportTitle(){
    baseInfo.title=temReportTitleVal.value
    showReportTitlePop.value=false
}

// 摘要
const showReportAbsPop=ref(false)
const temReportAbsVal=ref('')
function handleShowReportAbs(){
    temReportAbsVal.value=baseInfo.abstract
    showReportAbsPop.value=true
}
function handleConfirmReportAbs(){
    baseInfo.abstract=temReportAbsVal.value
    showReportAbsPop.value=false
}



function close(){
    emits('close')
}

async function handleSave(){
    const res=await apiReportEn.strategyReportEdit({
        ReportId:props.defaultData.Id,
        Title:baseInfo.title,
        Abstract:baseInfo.abstract,
        Author:baseInfo.author.join(','),
        Frequency:baseInfo.frequency[0],
        CreateTime:baseInfo.createtime
    })
    if(res.Ret===200){
        showToast('编辑成功')
        emits('confirm')
    }
}
</script>

<template>
    <div class="edit-strategy-report-wrap">
        <van-cell-group>
            <van-cell value-class="cell-con" required title="分类" :value="defaultData.ClassifyNameFirst+'/'+defaultData.ClassifyNameSecond" />
            <van-cell value-class="cell-con" title="作者" :value="baseInfo.author.join(',')" is-link @click="handleShowSelectAuthor"/>
            <van-cell value-class="cell-con" title="频度" :value="baseInfo.frequency.join('')" is-link @click="handleShowFrequency"/>
            <van-cell value-class="cell-con" title="创建时间" :value="baseInfo.createtime" is-link @click="handleShowCreatetime"/>
        </van-cell-group>

        <van-cell-group style="margin:10px 0">
            <van-cell required title="标题" :label="baseInfo.title" is-link @click="handleShowReportTitle"/>
        </van-cell-group>

        <van-cell-group>
            <van-cell required title="摘要" :label="baseInfo.abstract" is-link @click="handleShowReportAbs"/>
        </van-cell-group>

        <div class="bot-btns">
            <van-button class="bot-btn" type="default" @click="close">取消</van-button>
            <van-button class="bot-btn" type="primary" @click="handleSave">保存</van-button>
        </div>
    </div>

    <!-- 作者 -->
    <van-popup
        v-model:show="showAuthorPop"
        position="bottom"
        :style="{ height: '100%' }"
    >
        <div class="select-author-pop">
            <van-checkbox-group v-model="temAuthorVal">
                <van-checkbox
                    v-for="item in authorOpts"
                    :key="item.Id"
                    :name="item.ReportAuthor"
                >{{item.ReportAuthor}}</van-checkbox>
            </van-checkbox-group>
            <div class="bot-btns">
                <van-button class="bot-btn" type="default" @click="showAuthorPop=false">取消</van-button>
                <van-button class="bot-btn" type="primary" @click="handleConfirmAuthor">确定</van-button>
            </div>
        </div>
    </van-popup>

    <!-- 报告频度 -->
    <van-popup
        v-model:show="showFrequencyPop"
        position="bottom"
        round
    >
        <van-picker 
            v-model="temFrequencyVal" 
            title="选择频度" 
            :columns="reportFrequencyOpts"
            @confirm="handleConfirmFrequency"
            @cancel="showFrequencyPop=false"
        />
    </van-popup>

    <!-- 创建日期 -->
    <van-calendar
        :min-date="minDate"
        :default-date="defaultDate"
        v-model:show="showCreateTimePop"
        title="选择创建日期"
        @confirm="handleConfirmCreatime" 
    />

    <!-- 标题 -->
    <van-popup
        v-model:show="showReportTitlePop"
        position="bottom"
        :style="{ height: '100%' }"
    >
        <div class="input-report-title-pop">
             <van-field v-model="temReportTitleVal" placeholder="请输入报告标题" />
            <div class="bot-btns">
                <van-button class="bot-btn" type="default" @click="showReportTitlePop=false">取消</van-button>
                <van-button class="bot-btn" type="primary" :disabled="!temReportTitleVal" @click="handleConfirmReportTitle">确定</van-button>
            </div>
        </div>
    </van-popup>

    <!-- 摘要 -->
    <van-popup
        v-model:show="showReportAbsPop"
        position="bottom"
        :style="{ height: '100%' }"
    >
        <div class="input-report-title-pop">
             <van-field type="textarea" autosize v-model="temReportAbsVal" placeholder="请输入报告摘要" />
            <div class="bot-btns">
                <van-button class="bot-btn" type="default" @click="showReportAbsPop=false">取消</van-button>
                <van-button class="bot-btn" type="primary" :disabled="!temReportAbsVal" @click="handleConfirmReportAbs">确定</van-button>
            </div>
        </div>
    </van-popup>
</template>

<style lang="scss" scoped>
.edit-strategy-report-wrap{
    height: 100%;
    position: relative;
    background: $page-bg-grey;
    :deep(.cell-con){
        flex: 2;
    }
    .bot-btns{
        position: absolute;
        bottom: 48px;
        left: 0;
        width: 100%;
        text-align: center;
    }
}
.bot-btn{
    width: 315px;
    margin: 0 10px;
}

.select-author-pop{
    height: 100%;
    display: flex;
    flex-direction: column;
    .van-checkbox-group{
        padding: $page-padding;
        flex: 1;
        overflow-y: auto;
        .van-checkbox{
            :deep(.van-checkbox__label){
                padding: 32px 0;
                flex: 1;
                border-bottom: 1px solid $border-color;
            }
        }
    }
    .bot-btns{
        flex-shrink: 0;
        padding: 20px 0;
        text-align: center;
    }
}
.input-report-title-pop{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: $page-bg-grey;
    
    .bot-btns{
        flex-shrink: 0;
        padding: 20px 0;
        text-align: center;
    }
}
</style>