irc_web/.svn/pristine/04/0498d0e96eb406a3fc959381ae09fb8b2610dc94.svn-base

<template>
  <div class="particiapant-wrapper">
    <div class="header-wrapper">
      <!-- 新增 -->
      <el-button
        v-if="state === 0 && userTypeEnumInt === 0"
        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">
          {{ `${scope.row.LastName} / ${scope.row.FirstName}` }}
        </template>
      </el-table-column>
      <!-- 姓名 -->
      <el-table-column
        prop="TrialRoleName"
        :label="$t('trials:staffResearch:form:role')"
      />
      <!-- 电话号码 -->
      <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
        v-if="hasPermi(['role:pm','role:apm'])"
        prop="IsGenerateAccount"
        :label="$t('trials:staffResearch:form:isGenerate')"
      >
        <template slot-scope="scope">
          {{ $fd('YesOrNo', scope.row.IsGenerateAccount) }}
        </template>
      </el-table-column>
      <!-- 用户类型 -->
      <el-table-column
        v-if="hasPermi(['role:pm','role:apm'])"
        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>
      <el-table-column
        v-if="state !== 3 && (userTypeEnumInt===0 || hasPermi(['role:pm','role:apm']))"
        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" type="text" size="small" :disabled="state!==0 || scope.row.IsGenerateSuccess" @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="700px"
      custom-class="base-dialog-wrapper"
      :append-to-body="userTypeEnumInt !== 0"
    >
      <ParticipantForm :state="state" :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 },

  data() {
    return {
      list: [],
      editVisible: false,
      title: '',
      loading: false,
      rowData: {},
      userTypeEnumInt: 0,
      btnLoading: false,
      state: null,
      trialSiteSurveyId: '',
      trialId: ''
    }
  },
  mounted() {
    if (zzSessionStorage.getItem('userTypeEnumInt')) {
      this.userTypeEnumInt = zzSessionStorage.getItem('userTypeEnumInt') * 1
    }
    this.trialSiteSurveyId = getQueryString('trialSiteSurveyId')
    this.trialId = getQueryString('trialId')
  },
  methods: {
    // 获取参与者列表数据
    getList() {
      this.loading = true

      getTrialSiteUserSurveyList(this.trialSiteSurveyId).then(res => {
        this.loading = false
        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()
    },
    // 关闭窗口
    closeDialog() {
      this.editVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.particiapant-wrapper{
  .header-wrapper{
    text-align: right;
    margin-bottom: 10px;
  }
}
</style>