sac/sf-ui/src/views/FDS/whiteListManagement/addConfig.vue

、
<template>
  <div class="app-container">
    <el-container>
      <el-header>
        <div>白名单配置</div>
        <el-divider/>
      </el-header>
      <el-main>
        <div class="form-main">
          <el-form ref="configForm" :model="configForm" :rules="configRules" label-width="120px">
            <el-form-item label="添加方式" prop="configName">
              <el-radio-group v-model="configForm.addMode">
                <el-radio
                    :label="1"
                >手动添加
                </el-radio>
                <el-radio
                    :label="2"
                >批量添加
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="白名单类型" prop="whiteListType">
              <el-select v-model="configForm.whiteListType" clearable placeholder="请选择白名单类型">
                <el-option label="白名单人员" value="0"/>
                <el-option label="白名单设备" value="1"/>
              </el-select>
            </el-form-item>
            <template v-if="configForm.addMode==1">
              <el-form-item v-if="configForm.whiteListType==0" label="白名单电话" prop="phone">
                <el-input v-model="configForm.phone" placeholder="请输入电话号码"/>
              </el-form-item>
              <el-form-item v-if="configForm.whiteListType==0" label="姓名">
                <el-input v-model="configForm.name" placeholder="请输入姓名"/>
              </el-form-item>
              <el-form-item v-if="configForm.whiteListType==1" label="白名单设备">
                <el-input v-model="configForm.equepid" placeholder="请输入设备信息" type="textarea"/>
              </el-form-item>
            </template>
            <el-form-item v-else-if="configForm.addMode==2" label="白名单文件">
              <el-upload
                  ref="whiteListFiles"
                  :auto-upload="true"
                  :before-remove="beforeRemove"
                  :before-upload="beforeAvatarUpload"
                  :file-list="fileList"
                  :headers="{tokenId: tokenId}"
                  :multiple="false"
                  :on-success="handleSuccess"
                  accept=".txt"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  class="upload"
              >
                <el-button slot="trigger" size="small" type="primary">上传文件</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="configForm.remark" placeholder="请输入备注" type="textarea"/>
            </el-form-item>
          </el-form>
        </div>
        <div class="page-footer">
          <el-button type="primary" @click="submitAddForm()">保 存</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-main>
      <!--安装包弹窗-->
    </el-container>
  </div>

</template>
<script>
import { addConfig, updateConfig } from '@/api/system/config'

export default {
  name: 'WhiteAddConfig',
  dicts: ['sys_yes_no'],
  data() {

    return {
      form: {},
      tokenId: '',
      // 文件存放的路径
      fileList: [],
      configForm: {
        addMode: 1,
        whiteListType: '',
        whitelistIds: '',
        remark: '',
        equepid: ''
      },
      configRules: {
        addMode: [
          { required: true, message: '添加方式不能为空', trigger: 'change' }
        ],
        whiteListType: [
          { required: true, message: '白名单类型不能为空', trigger: 'change' }
        ]
      }
    }
  },
  computed: {},
  methods: {
    reset() {
      this.form = {
        whiteListType: undefined,
        whiteListName: undefined,
        remark: undefined
      }
      this.resetForm('form')
    },
    /** 提交按钮 */
    submitAddForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.configId != undefined) {
            updateConfig(this.form).then(response => {
              this.$modal.msgSuccess('修改成功')
            })
          } else {
            addConfig(this.form).then(response => {
              this.$modal.msgSuccess('新增成功')
            })
          }
        }
      })
    },

    /** 在上传之前进行校验 */
    beforeAvatarUpload(file) {
      const formatList = file.name.split('.')
      const isFormat = file.type === 'text/plain' || formatList[formatList.length - 1] === 'txt'
      if (!isFormat) {
        this.$message.error(`上传格式只能是名称后缀为.txt的文本文件!`)
      }
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isLt2M) {
        this.$message.error(`上传文件大小不能超过5M!`)
      }
      return isLt2M && isFormat
    },
    /** 上传文件 */
    handleSuccess(file) {
      this.fileList = []
      const nameList = file.context.path.split('/')
      this.fileList.push({
        name: file.context.name || nameList[nameList.length - 1],
        url: file.context.path
      })
      this.addFormData.path = file.context.path
    },
    beforeRemove(files, filesList) {
      return this.$confirm(`确定要移除${files.name}？`)
    },
    cancel() {
      this.history.back()
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  background: #ffffff;
  margin: 24px;
}

.form-main {
  width: 700px;
  margin: 0 auto;
}

::v-deep .el-input.is-disabled .el-input__inner, .el-textarea.is-disabled .el-textarea__inner {
  border: 1px solid #E4E7ED !important;
}

.tag-group {
  .el-tag {
    cursor: pointer;

  }
}

.el-tag + .el-tag {
  margin-left: 10px
}

.page-footer {
  margin: 0 auto;
  width: 700px;
  justify-content: center;
  display: flex;
}
</style>