330 lines
		
	
	
		
			9.9 KiB
		
	
	
	
		
			Plaintext
		
	
	
			
		
		
	
	
			330 lines
		
	
	
		
			9.9 KiB
		
	
	
	
		
			Plaintext
		
	
	
<template>
 | 
						|
  <el-form
 | 
						|
    ref="emailForm"
 | 
						|
    v-loading="loading"
 | 
						|
    :model="form"
 | 
						|
    label-width="150px"
 | 
						|
    size="small"
 | 
						|
    :rules="rules"
 | 
						|
    class="email_wrapper"
 | 
						|
  >
 | 
						|
    <div class="base-dialog-body">
 | 
						|
      <el-form-item label="Code" prop="Code">
 | 
						|
        <el-input v-model="form.Code" />
 | 
						|
      </el-form-item>
 | 
						|
      <el-form-item label="业务场景" prop="BusinessScenarioEnum">
 | 
						|
        <el-select
 | 
						|
          v-model="form.BusinessScenarioEnum"
 | 
						|
          style="width:100%;"
 | 
						|
          size="small"
 | 
						|
        >
 | 
						|
          <el-option
 | 
						|
            v-for="item of $d.Common_File_BusinessScenario"
 | 
						|
            :key="item.id"
 | 
						|
            :label="item.label"
 | 
						|
            :value="item.value"
 | 
						|
          />
 | 
						|
        </el-select>
 | 
						|
      </el-form-item>
 | 
						|
 | 
						|
      <el-form-item label="发件人" prop="FromName">
 | 
						|
        <el-input v-model="form.FromName" />
 | 
						|
      </el-form-item>
 | 
						|
      <el-form-item label="发件箱" prop="FromEmail">
 | 
						|
        <el-input v-model="form.FromEmail" />
 | 
						|
      </el-form-item>
 | 
						|
      <el-form-item label="SMTP服务器地址" prop="SMTPServerAddress">
 | 
						|
        <el-input v-model="form.SMTPServerAddress" placeholder="smtp.163.com" />
 | 
						|
      </el-form-item>
 | 
						|
      <el-form-item label="SMTP服务器端口" prop="SMTPServerPort">
 | 
						|
        <el-input-number v-model="form.SMTPServerPort" controls-position="right" />
 | 
						|
      </el-form-item>
 | 
						|
      <el-form-item label="密码" prop="AuthorizationCode">
 | 
						|
        <el-input v-model="form.AuthorizationCode" />
 | 
						|
      </el-form-item>
 | 
						|
      <el-form-item label="收件人" prop="ToUserTypeList">
 | 
						|
        <el-select
 | 
						|
          v-model="form.ToUserTypeList"
 | 
						|
          style="width:100%;"
 | 
						|
          size="small"
 | 
						|
          multiple
 | 
						|
        >
 | 
						|
          <el-option
 | 
						|
            v-for="item of toUsers"
 | 
						|
            :key="item.Id"
 | 
						|
            :label="item.UserTypeShortName"
 | 
						|
            :value="item.UserTypeEnum"
 | 
						|
          />
 | 
						|
        </el-select>
 | 
						|
      </el-form-item>
 | 
						|
      <el-form-item label="抄送人" prop="CopyUserTypeList">
 | 
						|
        <el-select
 | 
						|
          v-model="form.CopyUserTypeList"
 | 
						|
          style="width:100%;"
 | 
						|
          size="small"
 | 
						|
          multiple
 | 
						|
        >
 | 
						|
          <el-option
 | 
						|
            v-for="item of copyUsers"
 | 
						|
            :key="item.Id"
 | 
						|
            :label="item.UserTypeShortName"
 | 
						|
            :value="item.UserTypeEnum"
 | 
						|
          />
 | 
						|
        </el-select>
 | 
						|
      </el-form-item>
 | 
						|
      <el-form-item v-if="criterionType === 0" label="附件">
 | 
						|
        <div class="upload-container">
 | 
						|
          <el-upload
 | 
						|
            class="upload-demo"
 | 
						|
            action
 | 
						|
            accept=".xls,.xlsx,.doc,.docx"
 | 
						|
            :before-upload="beforeUpload"
 | 
						|
            :http-request="handleUploadFile"
 | 
						|
            :on-preview="handlePreview"
 | 
						|
            :on-remove="handleRemoveFile"
 | 
						|
            :show-file-list="true"
 | 
						|
            :file-list="fileList"
 | 
						|
            :limit="1"
 | 
						|
            :on-exceed="handleExceed"
 | 
						|
          >
 | 
						|
            <el-button size="small" type="primary">选择</el-button>
 | 
						|
            <span
 | 
						|
              slot="tip"
 | 
						|
              style="margin-left:10px;"
 | 
						|
              class="el-upload__tip"
 | 
						|
            >
 | 
						|
              (must be in xlsx/xls/doc/docx format)
 | 
						|
            </span>
 | 
						|
          </el-upload>
 | 
						|
        </div>
 | 
						|
      </el-form-item>
 | 
						|
      <el-form-item label="是否需要回执" prop="IsReturnRequired">
 | 
						|
        <el-radio-group v-model="form.IsReturnRequired">
 | 
						|
          <el-radio :label="true">是</el-radio>
 | 
						|
          <el-radio :label="false">否</el-radio>
 | 
						|
        </el-radio-group>
 | 
						|
      </el-form-item>
 | 
						|
      <el-form-item label="是否加急" prop="IsUrgent">
 | 
						|
        <el-radio-group v-model="form.IsUrgent">
 | 
						|
          <el-radio :label="true">是</el-radio>
 | 
						|
          <el-radio :label="false">否</el-radio>
 | 
						|
        </el-radio-group>
 | 
						|
      </el-form-item>
 | 
						|
      <el-form-item label="是否自动发送" prop="IsAutoSend">
 | 
						|
        <el-radio-group v-model="form.IsAutoSend">
 | 
						|
          <el-radio :label="true">是</el-radio>
 | 
						|
          <el-radio :label="false">否</el-radio>
 | 
						|
        </el-radio-group>
 | 
						|
      </el-form-item>
 | 
						|
      <!-- <el-form-item label="是否区分标准" prop="IsDistinguishCriteria">
 | 
						|
        <el-radio-group v-model="form.IsDistinguishCriteria">
 | 
						|
          <el-radio :label="true">是</el-radio>
 | 
						|
          <el-radio :label="false">否</el-radio>
 | 
						|
        </el-radio-group>
 | 
						|
      </el-form-item> -->
 | 
						|
 | 
						|
      <!-- <el-form-item v-if="!!form.Id" label="是否启用" prop="IsEnable">
 | 
						|
        <el-radio-group v-model="form.IsEnable">
 | 
						|
          <el-radio :label="true">是</el-radio>
 | 
						|
          <el-radio :label="false">否</el-radio>
 | 
						|
        </el-radio-group>
 | 
						|
      </el-form-item> -->
 | 
						|
    </div>
 | 
						|
    <div class="base-dialog-footer" style="text-align:right;margin-top:10px;">
 | 
						|
      <el-form-item style="text-align:right;">
 | 
						|
        <el-button size="small" type="primary" @click="close">取消</el-button>
 | 
						|
        <el-button size="small" type="primary" @click="handleSave">保存</el-button>
 | 
						|
      </el-form-item>
 | 
						|
    </div>
 | 
						|
  </el-form>
 | 
						|
</template>
 | 
						|
<script>
 | 
						|
import { addOrUpdateTrialEmailNoticeConfig, getUserTypeList } from '@/api/trials'
 | 
						|
import { uploadCommonDoc } from '@/api/dictionary'
 | 
						|
export default {
 | 
						|
  props: {
 | 
						|
    data: {
 | 
						|
      type: Object,
 | 
						|
      default() { return {} }
 | 
						|
    },
 | 
						|
    criterionType: {
 | 
						|
      type: Number,
 | 
						|
      required: true
 | 
						|
    }
 | 
						|
  },
 | 
						|
 | 
						|
  data() {
 | 
						|
    return {
 | 
						|
      form: {
 | 
						|
        Id: '',
 | 
						|
        Code: '',
 | 
						|
        AuthorizationCode: '',
 | 
						|
        SMTPServerAddress: 'smtp.giye.aliyun.com',
 | 
						|
        SMTPServerPort: 465,
 | 
						|
        BusinessScenarioEnum: null,
 | 
						|
        CriterionTypeEnum: null,
 | 
						|
        // FromEmail: '',
 | 
						|
        // ReceiveEmail: '',
 | 
						|
        // CopyEmail: '',
 | 
						|
        FromName: '',
 | 
						|
        FromEmail: '',
 | 
						|
        ToUserTypeList: [],
 | 
						|
        CopyUserTypeList: [],
 | 
						|
        IsReturnRequired: true,
 | 
						|
        IsUrgent: true,
 | 
						|
        IsEnable: true,
 | 
						|
        IsAutoSend: true,
 | 
						|
        FilePath: '',
 | 
						|
        FileName: ''
 | 
						|
      },
 | 
						|
      rules: {
 | 
						|
        Code: [{ required: true, message: this.$t('common:ruleMessage:specify'), trigger: ['blur'] }],
 | 
						|
        AuthorizationCode: [{ required: true, message: this.$t('common:ruleMessage:specify'), trigger: ['blur'] }],
 | 
						|
        SMTPServerAddress: [{ required: true, message: this.$t('common:ruleMessage:specify'), trigger: ['blur'] }],
 | 
						|
        SMTPServerPort: [{ required: true, message: this.$t('common:ruleMessage:specify'), trigger: ['blur'] }],
 | 
						|
        FromName: [{ required: true, message: this.$t('common:ruleMessage:specify'), trigger: ['blur'] }],
 | 
						|
        FromEmail: [
 | 
						|
          {
 | 
						|
            required: true,
 | 
						|
            message: this.$t('common:ruleMessage:specify'),
 | 
						|
            trigger: 'blur'
 | 
						|
          },
 | 
						|
          {
 | 
						|
            type: 'email',
 | 
						|
            message: this.$t('passwordReset:formRule:passwordinvalid'),
 | 
						|
            trigger: ['blur']
 | 
						|
          }
 | 
						|
        ],
 | 
						|
        ToUserTypeList: [{ required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur'] }],
 | 
						|
        BusinessScenarioEnum: [{ required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur'] }]
 | 
						|
      },
 | 
						|
      scenarioOption: [],
 | 
						|
      fileList: [],
 | 
						|
      toUsers: [],
 | 
						|
      copyUsers: [],
 | 
						|
      loading: false
 | 
						|
    }
 | 
						|
  },
 | 
						|
  mounted() {
 | 
						|
    this.initForm()
 | 
						|
  },
 | 
						|
  methods: {
 | 
						|
    async initForm() {
 | 
						|
      this.loading = true
 | 
						|
      await this.getToUserTypeSelectList()
 | 
						|
      await this.getToCopyTypeSelectList()
 | 
						|
      for (const k in this.form) {
 | 
						|
        if (this.data.hasOwnProperty(k)) {
 | 
						|
          this.form[k] = this.data[k]
 | 
						|
        }
 | 
						|
      }
 | 
						|
      this.loading = false
 | 
						|
    },
 | 
						|
    getToUserTypeSelectList() {
 | 
						|
      getUserTypeList(4).then(res => {
 | 
						|
        this.toUsers = res.Result
 | 
						|
      }).catch(() => { this.loading = false })
 | 
						|
    },
 | 
						|
    getToCopyTypeSelectList() {
 | 
						|
      getUserTypeList(5).then(res => {
 | 
						|
        this.copyUsers = res.Result
 | 
						|
      }).catch(() => { this.loading = false })
 | 
						|
    },
 | 
						|
    // 保存
 | 
						|
    handleSave() {
 | 
						|
      this.$refs.emailForm.validate(valid => {
 | 
						|
        if (!valid) return
 | 
						|
        this.loading = true
 | 
						|
        this.form.TrialId = this.$route.query.trialId
 | 
						|
        addOrUpdateTrialEmailNoticeConfig(this.form).then(res => {
 | 
						|
          this.loading = false
 | 
						|
          this.$emit('closeDialog')
 | 
						|
          this.$emit('getList')
 | 
						|
          this.$message.success('保存成功!')
 | 
						|
        }).catch(() => {
 | 
						|
          this.loading = false
 | 
						|
        })
 | 
						|
      })
 | 
						|
    },
 | 
						|
    beforeUpload(file) {
 | 
						|
      // 检测文件类型是否符合要求
 | 
						|
      if (this.checkFileSuffix(file.name)) {
 | 
						|
        this.fileList = []
 | 
						|
        return true
 | 
						|
      } else {
 | 
						|
        this.$message.error('必须是word/excel格式')
 | 
						|
 | 
						|
        return false
 | 
						|
      }
 | 
						|
    },
 | 
						|
    handleUploadFile(param) {
 | 
						|
      this.loading = true
 | 
						|
      uploadCommonDoc(param.file).then(res => {
 | 
						|
        this.loading = false
 | 
						|
        if (res.IsSuccess) {
 | 
						|
          this.form.FilePath = res.Result.FilePath
 | 
						|
          this.form.FileName = param.file.name
 | 
						|
          const file = { name: this.form.FileName, path: this.form.FilePath }
 | 
						|
          this.fileList.push(file)
 | 
						|
        }
 | 
						|
      }).catch(() => {
 | 
						|
        this.loading = false
 | 
						|
      })
 | 
						|
    },
 | 
						|
    handleRemoveFile() {
 | 
						|
      this.fileList = []
 | 
						|
      this.form.FilePath = ''
 | 
						|
      this.form.FileName = ''
 | 
						|
    },
 | 
						|
    handlePreview(file) {
 | 
						|
      if (file.fullPath) {
 | 
						|
        window.open(file.fullPath, '_blank')
 | 
						|
      }
 | 
						|
    },
 | 
						|
    handleExceed(files, fileList) {
 | 
						|
      this.$message.warning(`最多只允许上传一个文件`)
 | 
						|
    },
 | 
						|
    checkFileSuffix(fileName) {
 | 
						|
      var typeArr = ['xls', 'xlsx', 'doc', 'docx']
 | 
						|
      var extendName = fileName.substring(fileName.lastIndexOf('.') + 1).toLocaleLowerCase()
 | 
						|
      if (typeArr.indexOf(extendName) !== -1) {
 | 
						|
        return true
 | 
						|
      } else {
 | 
						|
        return false
 | 
						|
      }
 | 
						|
    },
 | 
						|
    close() {
 | 
						|
      this.$emit('closeDialog')
 | 
						|
    }
 | 
						|
  }
 | 
						|
}
 | 
						|
</script>
 | 
						|
<style lang="scss" scoped>
 | 
						|
.email_wrapper{
 | 
						|
  .upload-container{
 | 
						|
    >>>.el-upload {
 | 
						|
    width: 100%;
 | 
						|
      text-align: left;
 | 
						|
    }
 | 
						|
    >>>.el-upload--text {
 | 
						|
      border: none;
 | 
						|
      width: 80px;
 | 
						|
      height: 40px;
 | 
						|
    }
 | 
						|
    .el-input--small {
 | 
						|
      margin-bottom: 5px;
 | 
						|
    }
 | 
						|
    .el-icon-circle-check {
 | 
						|
      color: #00d1b2;
 | 
						|
      font-size: 13px;
 | 
						|
    }
 | 
						|
    .account_item_clear{
 | 
						|
      .el-tag__close{
 | 
						|
        display: none !important;
 | 
						|
      }
 | 
						|
    }
 | 
						|
  }
 | 
						|
 | 
						|
}
 | 
						|
</style>
 |