irc_web/src/views/trials/trials-panel/attachments/site-research/components/ImageManual.vue

<template>
    <div class="ImageManual">
        <div class="config">
            <div style="margin-bottom: 20px;font-weight: bold;">
                {{ $t("trials:researchRecord:ImageManual:BasicQuestion") }}
            </div>
            <el-form size="small" :model="form" style="width:80%">
                <el-form-item>
                    <el-checkbox v-model="form.AverageEngravingCycle">
                        {{ $t('trials:researchForm:form:engravingCycle') }}
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="form.IsConfirmImagingTechnologist"
                        @change="(val) => handleChange(val, 'IsConfirmImagingTechnologist')">
                        {{ $t('trials:researchForm:form:isQualified') }}
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="form.EfficacyEvaluatorType">
                        {{ $t('trials:researchForm:form:staffType') }}
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="form.IsFollowStudyParameters"
                        @change="(val) => handleChange(val, 'IsFollowStudyParameters')">
                        {{ $t('trials:researchForm:form:isFollowStudyParam') }}
                    </el-checkbox>
                </el-form-item>
            </el-form>
            <div style="margin-bottom: 20px;font-weight: bold;">
                {{ $t("trials:researchRecord:ImageManual:Precautions") }}
            </div>
            <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 99 }" placeholder=""
                v-model="form.ReplaceContent" @input="handleInput" style="width: 70%;" />
            <div style="text-align: right;margin: 20px;">
                <el-button type="primary" :loading="loading" size="small" @click="handleSave">
                    {{ $t('common:button:save') }}
                </el-button>
            </div>
        </div>
        <div class="preview">
            <researchForm ref="ResearchForm" :trialSiteSurveyId="trialSiteSurveyId" />
        </div>
    </div>
</template>
<script>
import researchForm from '@/views/research/components/ResearchForm'
import { updateTrialExtralConfig, getTrialExtralConfig, getTrialDocumentList } from "@/api/trials"
export default {
    name: "ImageManual",
    components: { researchForm },
    props: {
        trialSiteSurveyId: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            form: {
                AverageEngravingCycle: false,
                IsConfirmImagingTechnologist: false,
                NotConfirmReson: false,
                EfficacyEvaluatorType: false,
                IsFollowStudyParameters: false,
                NotFollowReson: false,
                ReplaceContent: '',
                ReplaceContentCN: '',
                IsOpenLostVistRead: false,
                IsSupportQCDownloadImage: false
            },
            obj: {
                AverageEngravingCycle: false,
                IsConfirmImagingTechnologist: false,
                NotConfirmReson: false,
                EfficacyEvaluatorType: false,
                IsFollowStudyParameters: false,
                NotFollowReson: false,
            },
            loading: false
        }
    },
    mounted() {
        this.getInfo()
    },
    methods: {
        handleChange(val, key) {
            if (key === 'IsConfirmImagingTechnologist') this.form.NotConfirmReson = val
            if (key === 'IsFollowStudyParameters') this.form.NotFollowReson = val
        },
        handleInput(val) {
            this.form.ReplaceContentCN = val
        },
        async getInfo() {
            try {
                let param = {
                    TrialId: this.$route.query.trialId
                }
                let res = await getTrialExtralConfig(param)
                if (res.IsSuccess) {
                    Object.keys(this.form).forEach(key => {
                        this.form[key] = true
                        if (key === 'ReplaceContent' || key === 'ReplaceContentCN') this.form[key] = ''
                    })
                    this.form.IsOpenLostVistRead = res.Result.IsOpenLostVistRead
                    this.form.IsSupportQCDownloadImage = res.Result.IsSupportQCDownloadImage
                    if (Array.isArray(res.Result.NotShowFieldList) && res.Result.NotShowFieldList.length > 0) {
                        res.Result.NotShowFieldList.forEach(key => {
                            this.form[key] = false
                        })
                    }
                    if (Array.isArray(res.Result.ModifyFiledList) && res.Result.ModifyFiledList.length > 0) {
                        this.form.ReplaceContent = res.Result.ModifyFiledList[0].ReplaceContent.split('<p>').join('').split('</p>').filter(item => isNaN(item)).join("\n")
                        this.form.ReplaceContentCN = res.Result.ModifyFiledList[0].ReplaceContentCN.split('<p>').join('').split('</p>').filter(item => isNaN(item)).join("\n")
                    } else {
                        let arr = [this.$t('trials:equiptResearch:form:item1'), this.$t('trials:equiptResearch:form:item2'), this.$t('trials:equiptResearch:form:item3'), this.$t('trials:equiptResearch:form:item4')]
                        this.form.ReplaceContent = arr.join("\n")
                        this.form.ReplaceContentCN = arr.join("\n")
                    }
                }
            } catch (err) {
                console.log(err)
            }
        },

        async getTrialDocumentList() {
            try {
                let data = {
                    PageIndex: 1,
                    PageSize: 20,
                    TrialId: this.$route.query.trialId,
                    IsPublish: true,
                    FileTypeCode: 4,
                    IsDeleted: false
                }
                let res = await getTrialDocumentList(data)
                if (res.IsSuccess) {
                    const { CurrentPageData } = res.Result
                    if (CurrentPageData.length <= 0) this.$message.warning(this.$t("trials:researchRecord:ImageManual:message:noImageManual"))
                }
            } catch (err) {
                console.log(err)
            }
        },
        async handleSave() {
            try {
                let param = {
                    TrialId: this.$route.query.trialId
                }
                let data = {
                    IsOpenLostVistRead: this.form.IsOpenLostVistRead,
                    IsSupportQCDownloadImage: this.form.IsSupportQCDownloadImage,
                    ModifyFiledList: [],
                    NotShowFieldList: []
                }
                Object.keys(this.obj).forEach(key => {
                    if (!this.form[key]) data.NotShowFieldList.push(key)
                })
                let ReplaceContent = ''
                this.form.ReplaceContent.split("\n").forEach(item => {
                    ReplaceContent += `<p>${item}</p>`
                })
                let ReplaceContentCN = ''
                this.form.ReplaceContentCN.split("\n").forEach(item => {
                    ReplaceContentCN += `<p>${item}</p>`
                })
                let obj = {
                    NeedModifyFiled: 'SiteSurveyNote',
                    ReplaceContent: ReplaceContent,
                    ReplaceContentCN: ReplaceContentCN,
                }
                data.ModifyFiledList.push(obj)
                this.loading = true
                let res = await updateTrialExtralConfig(param, data)
                this.loading = false
                if (res.IsSuccess) {
                    this.$refs.ResearchForm.initPage()
                    if (!data.NotShowFieldList.includes('IsFollowStudyParameters')) this.getTrialDocumentList()
                }
            } catch (err) {
                this.loading = false
                console.log(err)
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.ImageManual {
    width: 100%;
    height: 100%;
    display: flex;

    .config,
    .preview {
        width: 50%;
        height: 100%;
        overflow-y: auto;
    }

    .config {
        border-right: 1px solid #EBEEF5;
    }
}
</style>