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

<template>
  <div class="particiapant-wrapper">
    <div class="header-wrapper">
      <!-- 新增 -->
      <el-button v-if="(state === 0 && userTypeEnumInt === 0 && !isHistory) || isPM" size="small" type="primary"
        @click="handleAdd">
        {{ $t('common:button:add') }}
      </el-button>
    </div>
    <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>
      &lt;!&ndash; 用户类型 &ndash;&gt;
      <el-table-column
        prop="UserType"
        :label="$t('trials:staffResearch:form:userType')"
      />-->
      <!-- 状态 -->
      <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>
      <!-- v-if="state !== 3 && (userTypeEnumInt===0 || hasPermi(['role:pm','role:apm']))" -->
      <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 type="text" size="small" :disabled="scope.row.IsGenerateSuccess || (state !== 0 && userTypeEnumInt===0) || (state !== 2 &&hasPermi(['role:pm']))" @click="handleEdit(scope.row)">
            {{ $t('common:button:edit') }}
          </el-button> -->
          <el-button v-if="userTypeEnumInt === 0 || isPM" type="text" size="small"
            :disabled="(state !== 0 || scope.row.IsGenerateSuccess) && !isPM" @click="handleEdit(scope.row)">
            {{ $t('common:button:edit') }}
          </el-button>
          <!-- 删除 -->
          <el-button v-if="userTypeEnumInt === 0 || isPM" type="text" size="small"
            :disabled="(state !== 0 || scope.row.IsGenerateSuccess) && !isPM" @click="handleDelete(scope.row)">
            {{ $t('common:button:delete') }}
          </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">
      <ParticipantForm :state="state" :isPM="isPM" :data="rowData" @getList="getList" @close="closeDialog" />
    </el-dialog>

  </div>
</template>
<script>
import { getTrialSiteUserSurveyList, deleteTrialSiteUserSurvey } from '@/api/research'
import ParticipantForm from './ParticipantForm'
import { getQueryString } from '@/utils/history.js'
export default {
  name: 'ResearchParticipantList',
  components: { ParticipantForm },
  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: false
      }
      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 })
    },
    // 打开新窗口
    handleAdd() {
      this.rowData = {}
      this.title = this.$t('trials:staffResearch:dialogTitle:add')
      this.editVisible = true
    },
    // 打开编辑窗口
    handleEdit(row) {
      this.rowData = { ...row }
      this.title = this.$t('trials:staffResearch:dialogTitle:edit')
      this.editVisible = true
    },
    // 删除
    handleDelete(row) {
      this.$confirm(this.$t('trials:staffResearch:message:confirmDel'), {
        type: 'warning',
        distinguishCancelAndClose: true

      }).then(() => {
        this.loading = true
        deleteTrialSiteUserSurvey(row.Id, this.trialId).then((res) => {
          this.loading = false
          if (res.IsSuccess) {
            this.list.splice(this.list.findIndex((item) => item.Id === row.Id), 1)
            this.$message.success(this.$t('trials:staffResearch:message:delSuccessfully'))
          }
        }).catch(() => { this.loading = false })
      }).catch(() => { })
    },
    isExistIncorrect() {
      return this.list.some(item => item.IsCorrect === false)
    },

    // 初始化列表
    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>