irc_web/.svn/pristine/26/2670737b5a516d6191957b7dba96f58482d8100f.svn-base

<template>
  <div v-loading="loading" class="email-wrapper">
    <el-collapse v-model="activeCollapse" class="setting-config">
      <!-- 发件箱配置 -->
      <el-collapse-item :title="$t('trials:emailManageCfg:title:sendEmailCfg')" name="1">
        <!-- 配置信息表单 -->
        <el-form
          ref="emailRulesForm"
          v-loading="loading"
          :model="form"
          style="width:800px;"
          :rules="rules"
          label-width="230px"
          size="small"
        >
          <!-- 发件箱账号 -->
          <el-form-item
            :label="$t('trials:emailManageCfg:title:sendEmailAccount')"
            prop="EmailFromEmail"
          >
            <el-input v-model="form.EmailFromEmail" :disabled="!isEdit" />
          </el-form-item>
          <!-- 发件人 -->
          <el-form-item
            :label="$t('trials:emailManageCfg:title:fromName')"
            prop="EmailFromName"
          >
            <el-input v-model="form.EmailFromName" :disabled="!isEdit" />
          </el-form-item>
          <!-- 密码/授权码 -->
          <el-form-item
            :label="$t('trials:emailManageCfg:title:password')"
            prop="EmailAuthorizationCode"
          >
            <el-input v-model="form.EmailAuthorizationCode" :disabled="!isEdit" />
          </el-form-item>
          <!-- SMTP服务器 -->
          <el-form-item
            :label="$t('trials:emailManageCfg:title:SMTPServerAddress')"
            prop="EmailSMTPServerAddress"
          >
            <el-input v-model="form.EmailSMTPServerAddress" :disabled="!isEdit" />
          </el-form-item>
          <!-- SMTP端口 -->
          <el-form-item
            :label="$t('trials:emailManageCfg:title:SMTPServerPort')"
            prop="EmailSMTPServerPort"
          >
            <el-radio-group
              v-model="form.EmailSMTPServerPort"
              :disabled="!isEdit"
            >
              <el-radio
                :label="465"
              >
                465
              </el-radio>
              <el-radio
                :label="25"
              >
                25
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button v-if="isEdit" size="small" type="primary" @click="setTrialEmail">
              {{ $t('common:button:confirm') }}
            </el-button>
            <el-button v-else size="small" type="primary" @click="isEdit = true">
              {{ $t('trials:trialCfg:button:update') }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <!-- 自动邮件模版 -->
      <el-collapse-item :title="$t('trials:emailManageCfg:title:emailTpl')" name="2">
        <el-tabs v-model="activeTab" type="border-card">
          <!-- 通用 -->
          <el-tab-pane
            :label="$t('trials:emailManageCfg:title:commom')"
            name="0"
          >
            <EmailList
              ref="emailList"
              v-if="activeTab === '0'"
              :is-distinguish-criteria="false"
              :is-edit="isEdit"
            />
          </el-tab-pane>
          <!-- 标准相关 -->
          <el-tab-pane
            :label="$t('trials:emailManageCfg:title:criterions')"
            name="1"
          >
            <EmailList
              ref="emailList"
              v-if="activeTab === '1'"
              :is-distinguish-criteria="true"
              :is-edit="isEdit"
            />
          </el-tab-pane>
        </el-tabs>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
import EmailList from './components/EmailList'
import { getTrialCriterionList } from '@/api/trials/reading'
import { setTrialEmail, getTrialEmail } from '@/api/trials'
export default {
  name: 'EmailManage',
  components: {
    EmailList
  },
  data() {
    return {
      activeCollapse: ['1', '2'],
      trialId: '',
      activeTab: '0',
      trialCriterionList: [],
      loading: false,
      isEdit: true,
      form: {
        EmailFromEmail: 'test@extimaging.com',
        EmailFromName: 'Test_IRC',
        EmailAuthorizationCode: 'SHzyyl2021',
        EmailSMTPServerAddress: 'smtp.qiye.aliyun.com',
        EmailSMTPServerPort: 465,
        IsConfigureEmail: true
      },
      rules: {
        EmailFromEmail: [{ required: true, message: this.$t('common:ruleMessage:specify') }],
        EmailFromName: [{ required: true, message: this.$t('common:ruleMessage:specify') }],
        EmailAuthorizationCode: [{ required: true, message: this.$t('common:ruleMessage:specify') }],
        EmailSMTPServerAddress: [{ required: true, message: this.$t('common:ruleMessage:specify') }],
        EmailSMTPServerPort: [{ required: true, message: this.$t('common:ruleMessage:select') }]
      }
    }
  },
  watch: {
    activeTab(v) {
      console.log(v)
    }
  },
  mounted() {
    this.trialId = this.$route.query.trialId
    this.getTrialEmail()
    this.getTrialCriterionList()
  },
  methods: {
    setTrialEmail() {
      this.$refs['emailRulesForm'].validate((valid) => {
        if (!valid) {
          // resolve(false)
        } else {
          this.form.TrialId = this.trialId
          setTrialEmail(this.form).then(res => {
            this.$message.success(this.$t('common:message:savedSuccessfully'))
            this.isEdit = false
            this.$refs['emailList'].getList()
          })
        }
      })
    },
    getTrialEmail() {
      getTrialEmail({
        TrialId: this.trialId
      }).then(res => {
        if (res.Result.IsConfigureEmail) {
          this.form = Object.assign(this.form, res.Result)
          this.isEdit = false
        }
      })
    },
    getTrialCriterionList() {
      this.loading = true
      getTrialCriterionList(this.trialId, false).then(res => {
        this.trialCriterionList = res.Result
        // this.activeTab = this.trialCriterionList[0].TrialReadingCriterionId
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss">
.email-wrapper{
  height: 100%;
  background-color: #fff;
  .el-tabs{
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .el-tabs__header {
    height: 40px;
    margin-bottom:5px;
  }
  .el-tabs__content{
    flex: 1;
    .el-tab-pane{
      height: 100%;
    }
  }
}
</style>
<style lang="scss" scoped>
.email-wrapper{
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  .content{
    flex: 1;
    overflow-y: auto;
  }
  >>>.el-collapse-item__header{
    background:#e5ecef;
    padding-left:10px;
  }
  >>>.el-collapse-item__content{
    padding: 10px;
  }
  .bottom{
    height: 50px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align: center;
    border-top: 1px solid #e1e1e1;
  }
}

</style>