irc_web/src/views/research-mobile/detail.vue

<template>
  <div v-loading="loading" class="research_detal_wrapper">
    <div class="d_title">{{ $t('trials:researchForm:title:question') }}</div>
    <div class="d_content">

      <!-- 项目基本信息 -->
      <BasicInfo ref="basicInfo" />
      <!-- 历史人员 -->
      <HistoricalParticipants ref="historicalParticipant" class="mt5" />
      <!-- 新增人员 -->
      <Participants ref="participants" class="mt5" />
      <!-- 设备调研 -->
      <Equipments ref="equipments" class="mt5" />
      <!-- 备注 -->
      <Notes ref="notes" class="mt5" />
    </div>
    <div class="d_footer">
      <!-- 保存 -->
      <el-button
        v-if="state === 0 && userTypeEnumInt === 0 "
        type="primary"
        size="small"
        @click="handleSave"
      >
        {{ $t('common:button:save') }}
      </el-button>
      <!-- 提交 -->
      <el-button
        v-if="(state === 0 && userTypeEnumInt === 0)"
        type="primary"
        size="small"
        @click="handleSubmit('submit')"
      >
        {{ $t('trials:researchForm:button:submit') }}
      </el-button>
    </div>
  </div>
</template>
<script>
import { getSiteSurveyInfo, trialSurveySubmit } from '@/api/research'
import { getQueryString } from '@/utils/history.js'
import BasicInfo from './components/BasicInfo'
import HistoricalParticipants from './components/HistoricalParticipants'
import Participants from './components/Participants'
import Equipments from './components/Equipments'
import Notes from './components/Notes'
export default {
  name: 'ResearchMobileDetail',
  components: {
    BasicInfo,
    HistoricalParticipants,
    Participants, Equipments, Notes
  },
  data() {
    return {
      trialId: this.$route.query.trialId,
      trialSiteSurveyId: '',
      loading: false,
      state: null,
      userTypeEnumInt: 0,
      rejectVisible: false,
      rejectForm: { reason: '' },
      siteSurveyNoteInfo: null
    }
  },
  mounted() {
    this.trialSiteSurveyId = getQueryString('trialSiteSurveyId')
    this.initPage()
    if (zzSessionStorage.getItem('userTypeEnumInt')) {
      this.userTypeEnumInt = zzSessionStorage.getItem('userTypeEnumInt') * 1
    }
  },
  methods: {
    // 初始化页面
    async initPage() {
      try {
        this.loading = true
        const res = await getSiteSurveyInfo(this.trialId, this.trialSiteSurveyId)
        if (res.Result) {
          if (res.Result.SiteSurveyFiledConfig && res.Result.SiteSurveyFiledConfig.ModifyFiledList.length > 0) {
            this.siteSurveyNoteInfo = res.Result.SiteSurveyFiledConfig.ModifyFiledList.find(i => i.NeedModifyFiled === 'SiteSurveyNote')
          }
          this.state = res.Result.TrialSiteSurvey.State
          this.$refs['basicInfo'].initForm(res.Result.TrialInfo, res.Result.TrialSiteSurvey, res.Result.SiteSurveyFiledConfig ? res.Result.SiteSurveyFiledConfig.NotShowFieldList : null)
          var historicalArr = []
          var newArr = []
          res.Result.TrialSiteUserSurveyList.map(i => {
            if (i.IsHistoryUser) {
              historicalArr.push(i)
            } else {
              newArr.push(i)
            }
          })

          this.$refs['historicalParticipant'].initList(historicalArr, res.Result.TrialSiteSurvey)
          this.$refs['participants'].initList(newArr, res.Result.TrialSiteSurvey)
          this.$refs['equipments'].initList(res.Result.TrialSiteEquipmentSurveyList, res.Result.TrialSiteSurvey, !(res.Result.SiteSurveyFiledConfig && res.Result.SiteSurveyFiledConfig.ModifyFiledList.length > 0))
          this.$refs['notes'].initPage(this.siteSurveyNoteInfo)
        }
        this.loading = false
      } catch (e) {
        this.loading = false
        console.log(e)
      }
    },
    // 保存
    handleSave() {
      this.$refs['basicInfo'].handleSave(false)
    },
    // 提交
    async handleSubmit(type) {
      if (this.userTypeEnumInt === 0) {
        try {
          this.loading = true
          const res = await this.$refs['basicInfo'].handleSave(true)
          this.loading = false
          if (res) {
            this.submit(type)
          }
        } catch (e) {
          this.loading = false
          console.log(e)
        }
      } else {
        this.submit(type)
      }
    },
    submit(type) {
      // 是否确认提交
      this.$confirm(this.userTypeEnumInt === 0 ? this.$t('trials:researchForm:message:submitWarning') : this.$t('trials:researchForm:message:submitWarning2'), {
        type: 'warning',
        distinguishCancelAndClose: true
      }).then(() => {
        this.loading = true
        var param = {
          TrialId: this.trialId,
          TrialSiteSurveyId: this.trialSiteSurveyId
        }
        trialSurveySubmit(param).then((res) => {
          this.loading = false
          if (res.IsSuccess) {
            this.initPage()
            if (this.userTypeEnumInt !== 0) {
              this.$emit('refreshPage')
            }
            if (type === 'approve') {
              this.$message.success(this.$t('common:message:approvedSuccessfully'))
            } else {
              this.$message.success(this.$t('trials:researchForm:message:savedSuccessfully'))
            }
          }
        }).catch(() => { this.loading = false })
      }).catch(() => {})
    },
    // 退出
    handleBack() {
      this.$router.push({ path: `/researchLogin_m?trialId=${this.trialId}&lang=${this.$i18n.locale}` })
    }
  }
}
</script>
<style lang="scss" scoped>
.research_detal_wrapper{
  background-color:#f5f7fa;
  .d_title{
    margin-bottom: 5px;
    line-height: 80px;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  // .d_content{

  // }
  .d_footer{
    position: sticky;
    bottom: 0;
    z-index: 10;
    background-color: #f8f8f8;
    line-height: 50px;
    text-align: center;
    padding: 20px;
  }
  .mt5{
    margin-top: 5px
  }
}

</style>