irc_web/src/views/research/components/HistoricalParticipant.vue

<template>
  <div class="particiapant-wrapper">
    <div class="header-wrapper" />
    <el-table v-loading="loading" :data="list" border style="width: 100%">
      <el-table-column prop="date" :label="$t('trials:staffResearch:form:name')">
        <template slot-scope="scope">
          <el-tooltip v-if="scope.row.ErrorMessage" class="item" effect="dark" :content="scope.row.ErrorMessage"
            placement="bottom">
            <i class="el-icon-warning" style="color:red" />
          </el-tooltip>

          {{ `${scope.row.LastName} / ${scope.row.FirstName}` }}
        </template>
      </el-table-column>
      <!-- 角色 -->
      <!-- <el-table-column
        prop="TrialRoleCode"
        :label="$t('trials:staffResearch:form:role')"
      >
        <template slot-scope="scope">
          {{ $fd('SiteSurvey_UserRoles',scope.row.TrialRoleCode) }}
        </template>
      </el-table-column> -->
      <!-- 电话号码 -->
      <el-table-column prop="Phone" :label="$t('trials:staffResearch:form:phone')" />
      <!-- 邮箱 -->
      <el-table-column prop="Email" :label="$t('trials:staffResearch:form:email')" />
      <!-- 单位 -->
      <el-table-column prop="OrganizationName" :label="$t('trials:staffResearch:form:organization')" />
      <!-- 是否生成账号 -->
      <!-- <el-table-column
        prop="IsGenerateAccount"
        :label="$t('trials:staffResearch:form:isGenerate')"
      >
        <template slot-scope="scope">
          {{ $fd('YesOrNo', scope.row.IsGenerateAccount) }}
        </template>
      </el-table-column> -->
      <!-- 用户类型 -->
      <el-table-column prop="UserType" :label="$t('trials:staffResearch:form:userType')" />
      <!-- 原状态 -->
      <el-table-column prop="IsHistoryUserOriginDeleted" :label="$t('trials:staffResearch:form:originalState')">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.IsHistoryUserOriginDeleted" type="info">{{ $fd('IsUserExitTrial',
            scope.row.IsHistoryUserOriginDeleted) }}</el-tag>
          <el-tag v-else type="danger">{{ $fd('IsUserExitTrial', scope.row.IsHistoryUserOriginDeleted) }}</el-tag>
        </template>
      </el-table-column>
      <!-- 更新状态 -->
      <el-table-column prop="IsHistoryUserDeleted" :label="$t('trials:staffResearch:form:updateState')">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.IsHistoryUserDeleted" type="info">{{ $fd('IsUserExitTrial',
            scope.row.IsHistoryUserDeleted) }}</el-tag>
          <el-tag v-else type="danger">{{ $fd('IsUserExitTrial', scope.row.IsHistoryUserDeleted) }}</el-tag>
        </template>
      </el-table-column>
      <!-- 状态 -->
      <!-- <el-table-column
        v-if="hasPermi(['role:pm','role:apm'])"
        prop="State"
        :label="$t('trials:staffResearch:form:status')"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.IsJoin" type="info">{{ $fd('IsJoin', scope.row.IsJoin) }}</el-tag>
          <el-tag v-else type="danger">{{ $fd('IsJoin', scope.row.IsJoin) }}</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column v-if="(state === 0 && (userTypeEnumInt === 0) && !isHistory) || isPM" fixed="right"
        :label="$t('common:action:action')" width="100">
        <template slot-scope="scope">
          <el-button v-if="userTypeEnumInt === 0 || isPM" type="text" size="small" @click="handleEdit(scope.row)">
            {{ $t('common:button:edit') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/编辑人员信息 -->
    <el-dialog v-if="editVisible" :visible.sync="editVisible" :close-on-click-modal="false" :title="title" width="900px"
      custom-class="base-dialog-wrapper" :append-to-body="userTypeEnumInt !== 0">
      <HistoricalParticipantForm :state="state" :isPM="isPM" :data="rowData" @getList="getList" @close="closeDialog" />
    </el-dialog>

  </div>
</template>
<script>
import { getTrialSiteUserSurveyList } from '@/api/research'
import HistoricalParticipantForm from './HistoricalParticipantForm'
import { getQueryString } from '@/utils/history.js'
export default {
  name: 'HistoricalParticipantList',
  components: { HistoricalParticipantForm },
  props: {
    isHistory: {
      type: Boolean,
      default: false
    },
    isPM: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      list: [],
      editVisible: false,
      title: '',
      loading: false,
      rowData: {},
      userTypeEnumInt: 0,
      btnLoading: false,
      state: null,
      trialSiteSurveyId: '',
      trialId: '',
      warningList: []
    }
  },
  mounted() {
    if (zzSessionStorage.getItem('userTypeEnumInt')) {
      this.userTypeEnumInt = zzSessionStorage.getItem('userTypeEnumInt') * 1
    }
    this.trialSiteSurveyId = getQueryString('trialSiteSurveyId')
    this.trialId = getQueryString('trialId')
  },
  methods: {
    // 获取参与者列表数据
    getList() {
      this.loading = true
      var params = {
        trialSiteSurveyId: this.trialSiteSurveyId,
        isHistoryUser: true
      }
      getTrialSiteUserSurveyList(params).then(res => {
        this.loading = false
        res.Result.map(item => {
          var obj = this.warningList.find(i => i.id === item.Id)
          if (obj) {
            item.ErrorMessage = obj.errorMessage
          }
        })
        this.list = res.Result
      }).catch(() => { this.loading = false })
    },
    // 打开编辑窗口
    handleEdit(row) {
      this.rowData = { ...row }
      this.title = this.$t('trials:staffResearch:dialogTitle:edit')
      this.editVisible = true
    },

    // 初始化列表
    initList(trialSiteUserSurveyList, trialSiteSurvey) {
      this.list = trialSiteUserSurveyList
      this.state = trialSiteSurvey.State
      this.$forceUpdate()
    },
    // 关闭窗口
    async closeDialog(obj) {
      this.editVisible = false
      var idx = this.warningList.findIndex(i => i.id === obj.id)
      if (idx > -1) {
        this.warningList[idx].errorMessage = obj.errorMessage
      } else {
        this.warningList.push({ id: obj.id, errorMessage: obj.errorMessage })
      }
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
.particiapant-wrapper {
  .header-wrapper {
    text-align: right;
    margin-bottom: 10px;
  }
}
</style>