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

<script setup>
import moment from "moment"
import { computed, reactive,ref } from "vue"
import ListClassify from './ListClassify.vue'
import apiReportEn from '@/api/reportEn'
import {reportFrequencyOpts} from '@/views/report/utils/config'
import { showToast } from "vant"
import { useRoute } from "vue-router"
import { useWindowSize } from '@vueuse/core'

const { width, height } = useWindowSize()

const route=useRoute()

const props=defineProps({
    defaultData:null
})

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

// 基本数据
const reportBaseInfo=reactive({
    addType:props.defaultData?props.defaultData.addType:1,
    classifyName:props.defaultData?props.defaultData.classifyName:[],
    author:props.defaultData?props.defaultData.author:['Horizon Insights FICC Team'],
    frequency: props.defaultData?props.defaultData.frequency:['日度'],
    createtime:props.defaultData?props.defaultData.createtime:moment().format('YYYY-MM-DD'),
    title:props.defaultData?props.defaultData.title:'',
    abstract:props.defaultData?props.defaultData.abstract:''
})

// 报告新增类型
const showAddTypePop=ref(false)
const addTypeOpts=[
    {
        value:1,
        name:'新增报告'
    },
    {
        value:2,
        name:'继承报告'
    }
]
function handleShowAddType(){
    // 编辑时不可操作
    if(route.path=='/reportEn/edit') return
    showAddTypePop.value=true
}
function getAddTypeName(value){
    return addTypeOpts.filter(item=>item.value===value)[0].name
}
function selectAddType(e){
    reportBaseInfo.addType=e.value
}

// 报告所属分类
const showClassifyPop=ref(false)
const setClassifyVal=computed(()=>{
    if(reportBaseInfo.classifyName.length===3){
        return `${reportBaseInfo.classifyName[0].text} / ${reportBaseInfo.classifyName[1].text} / ${reportBaseInfo.classifyName[2].text}`
    }
    return '请选择分类'
})
function handleShowClassify(){
    showClassifyPop.value=true
}
function handleConfirmClassify({rootClassify,firstClassify,secondClassify}){
    if(!rootClassify||!firstClassify.id||!secondClassify.id){
        showToast('请选择分类')
        return
    }
    reportBaseInfo.classifyName=[rootClassify,firstClassify,secondClassify]
    reportBaseInfo.title=secondClassify.text
    showClassifyPop.value=false
}

// 研报作者
const showAuthorPop=ref(false)
const authorOpts=ref([])
const temAuthorVal=ref([])
function handleShowSelectAuthor(){
    temAuthorVal.value=reportBaseInfo.author
    showAuthorPop.value=true
}
function handleConfirmAuthor(){
    reportBaseInfo.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=reportBaseInfo.frequency
    showFrequencyPop.value=true
}
function handleConfirmFrequency(){
    reportBaseInfo.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(reportBaseInfo.createtime.replace(/-/g,'/'))
    showCreateTimePop.value=true
}
function handleConfirmCreatime(e){
    reportBaseInfo.createtime=moment(e).format('YYYY-MM-DD')
    showCreateTimePop.value=false
}

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

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



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

function handleSave(){
    emits('confirm',reportBaseInfo)
}
</script>

<template>
    <div class="report-baseinfo-wrap">
        <van-cell-group>
            <van-cell value-class="cell-con" required title="新增方式" :value="getAddTypeName(reportBaseInfo.addType)" :is-link="route.path!='/reportEn/edit'" @click="handleShowAddType"/>
            <van-cell value-class="cell-con" required title="分类" :value="setClassifyVal" is-link @click="handleShowClassify"/>
            <van-cell value-class="cell-con" title="作者" :value="reportBaseInfo.author.join(',')" is-link @click="handleShowSelectAuthor"/>
            <van-cell value-class="cell-con" title="频度" :value="reportBaseInfo.frequency.join('')" is-link @click="handleShowFrequency"/>
            <van-cell value-class="cell-con" title="创建时间" :value="reportBaseInfo.createtime" is-link @click="handleShowCreatetime"/>
        </van-cell-group>

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

        <van-cell-group>
            <van-cell required title="摘要" :label="reportBaseInfo.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-action-sheet 
        v-model:show="showAddTypePop"
        cancel-text="取消"
        close-on-click-action
        :actions="addTypeOpts" 
        @select="selectAddType" 
    />

    <!-- 分类 -->
    <van-popup
        v-model:show="showClassifyPop"
        position="bottom"
        round
    >
        <ListClassify
            v-if="showClassifyPop"
            :defaultVal="reportBaseInfo.classifyName"
            :noReset="true"
            :firstClassifyDisabled="true" 
            @close="showClassifyPop=false" 
            @confirm="handleConfirmClassify"
        />
    </van-popup>

    <!-- 作者 -->
    <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-popup 
        v-model:show="showCreateTimePop"
        :position="width>650?'center':'bottom'"
        :style="width>650?{ width: '400px'}:''"
        round
    >
        <van-calendar
            :poppable="false"
            :min-date="minDate"
            :default-date="defaultDate"
            title="选择创建日期"
            @confirm="handleConfirmCreatime"
            :style="{ height: '500px' }"
        />
    </van-popup>

    <!-- 标题 -->
    <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>
.report-baseinfo-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;
    }
}

@media screen and (min-width:$media-width){
    .report-baseinfo-wrap{
        .bot-btns{
            bottom: 24px;
        }
    }
    .select-author-pop{
        .van-checkbox-group{
            padding: $page-padding;
            .van-checkbox{
                :deep(.van-checkbox__label){
                    padding: 16px 0;
                }
            }
        }
    }
}
</style>