picc / admin-no-ui · Files

<template>
  <a-modal
    :title="title"
    :width="800"
    :centered="true"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    cancelText="关闭"
    style="top:20px;"
    :maskClosable="false"  
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <!-- <a-form-item label="业务渠道编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
          
          <a-select
            
            placeholder="请选择业务渠道编号"
            @change="handleChange"
            v-decorator="[ 'businessChannelNo', validatorRules.businessChannelNo]"
          >
            <a-select-option
              v-for="(item, index) in productList"
              :key="index"
              :value="item.productNo"
            >{{item.productName}}</a-select-option>
          </a-select>
        </a-form-item> -->
      <template v-if="type=='add'">
        <a-form-item label="业务渠道名称" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
           <a-select
            
            placeholder="请选择业务渠道名称"
            :labelInValue="true"
            @change="value => handleChange(value)"
            v-decorator="[ 'businessChannelName', validatorRules.businessChannelNo]"
          >
            <a-select-option
              v-for="(item, index) in productList"
              :key="index"
              
              :value="item.businessChannelNo"
            >{{item.businessChannelName}}</a-select-option>
          </a-select>
        </a-form-item>

        
        <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-textarea rows="4" placeholder="最多输入300字" v-decorator="['remark']" />
        </a-form-item>
      </template>
      <template v-else>
         <a-form-item 
          label="上传白名单文件"
         
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
        <div class="pos">
          <input id="file" type="file" accept=".xls,.xlsx" ref="uploadFile" @change="handleFile" name="file" />
          <span style="position:absolute;left:120px;">{{uploadUrl}}</span>
          <span class="abso">上传白名单文件</span>
        </div>
          <!-- <a-upload
          accept=".xls,.xlsx" 
          name="file"
          :action="url.upload"
          @change="upLoadChange"
          >
            <a-button>
              <a-icon type="upload" />上传文件
            </a-button>
          </a-upload> -->
          <a @click="downList('白名单模板')">白名单模板下载</a><br>
          <a v-show="failShow" @click="downListFail('校验失败的白名单记录')" style="color:red;">校验失败的白名单记录下载</a>
        </a-form-item>
      </template>
       
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { postAction, downFile,saveWhiteListConfiguration,updateWhiteListConfiguration } from '@/api/configApi'
import { getUploadFileList,getFilePaths } from '@/utils/commonUploadFile.js'
import { axios } from '@/utils/requestLocal'
import Vue from 'vue'
import { ACCESS_TOKEN } from "@/store/mutation-types"

export default {
  name: 'PasswordModal',
  data() {
    return {
      visible: false,
      confirmLoading: false,
      confirmDirty: false,
      title: '上传白名单文件',
      type:'add',
      fileList:[],
      productList: [],
      validatorRules: {
        businessChannelNo: {
          rules: [
            {
              required: true,
              message: '选择业务渠道编号'
            }
          ]
        },
        upload: {
          rules: [
            {
              required: true,
              message: '请上传文件'
            },
          ]
        },
       
      },

      model: {
        businessChannelNo:'',
        businessChannelName:''
      },

      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      form: this.$form.createForm(this),
      url: {
          upload:  window._CONFIG['uploadUrl'],
      },
      uploadData:{},
      failShow:false,
      uploadUrl:'',
    }
  },
  created() {
    this.initPrudect() 
  },

  methods: {
    handleChange(value) {
    console.log(value)
    this.model.businessChannelNo = value.key
    this.model.businessChannelName = value.lable
    },
    // 下载白名单模板
    downList(fileName){
      downFile('/config/admin/whiteListExcelTemp').then(data => {
        console.log(data)
        if (!data) {
          this.$message.warning("文件下载失败")
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data]), fileName+'.xlsx')
        }else{
          let url = window.URL.createObjectURL(new Blob([data]))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName+'.xlsx')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link); //下载完成移除元素
          window.URL.revokeObjectURL(url); //释放掉blob对象
        }
      })
    },
    // 下载校验失败的白名单记录
    downListFail(fileName){
      downFile(`/config/admin/exportWhiteListFails?id=${this.uploadData.id}`).then(data => {
        console.log(data)
        if (!data) {
          this.$message.warning("文件下载失败")
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data]), fileName+'.xlsx')
        }else{
          let url = window.URL.createObjectURL(new Blob([data]))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName+'.xlsx')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link); //下载完成移除元素
          window.URL.revokeObjectURL(url); //释放掉blob对象
        }
      })
    },
    initPrudect() {
      let _params = {
        pageNo: 1,
        pageSize: 10000,
        params: {}
      }
      postAction('/config/admin/getBusinessChannelSelect', _params).then(r => {
        this.productList = r.data
      })
    },
    edit(records) {
      this.form.resetFields()
      this.visible = true
      this.title = '上传白名单文件',
      this.type = 'edit'
      this.model=records
      this.$nextTick(() => {
        // this.form.setFieldsValue(records)
      })
    },

    add(records) {
      this.form.resetFields()
      this.visible = true
       this.title = '新增白名单配置',
      this.type = 'add'
      this.model={
        businessChannelNo:'',
        businessChannelName:'',
        remark:''
      },
      this.$nextTick(() => {
        this.form.setFieldsValue()
      })
    },

    onChange() {},

    close() {
      this.uploadUrl = ''
      this.$emit('close')
      this.visible = false
      this.disableSubmit = false
      this.selectedRole = []
    },
    // 上传
    handleFile(e){
      this.confirmLoading = true
      this.fileList = this.$refs.uploadFile.files[0];
      console.log(!this.fileList)
      if(this.$refs.uploadFile.files.length<=0){         //如果取消上传，则改文件的长度为0        
        this.confirmLoading = false
        return;
      }else{  
      //如果有文件上传，这在这里面进行
      const formData = new FormData();
      formData.append('businessChannelNo', this.model.businessChannelNo);
      formData.append('businessChannelName', this.model.businessChannelName);
      formData.append('whiteListFile', this.fileList);
      postAction(`/config/admin/importWhiteListDetails`, formData).then((res) => {
        if(res.status.statusCode == 0){
          console.log(res)
          this.uploadData = res.result
          this.uploadUrl = res.result.fileName
          this.uploadData.failNums>0?this.failShow = true : this.failShow = false;
          this.$message.success(res.status.statusReason)
          this.$emit('ok')
        }else{
          this.$message.warning(res.status.statusReason)
        }
      }).finally(() => {
        this.confirmLoading = false
      })
      }
     
    },
    getObjectURL(file) {
      var url = null;
      if (window.createObjcectURL != undefined) {
          url = window.createOjcectURL(file);
      } else if (window.URL != undefined) {
          url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
          url = window.webkitURL.createObjectURL(file);
      }
      return url;
    },
    handleSubmit() {
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
          let formData = Object.assign(this.model, values)
          
          if(this.type =='add'){
            formData.businessChannelName = this.model.businessChannelName.label
            saveWhiteListConfiguration(formData)
            .then(res => {
              if (res.status.statusCode == 0) {
                this.$message.success(res.status.statusReason)
                this.$emit('ok')
              } else {
                this.$message.warning(res.status.statusReason)
              }
            })
            .finally(() => {
              this.confirmLoading = false
              this.close()
            })
          }else{
            this.confirmLoading = false
            this.close()
            // const formData = new FormData();
            // formData.append('businessChannelNo', this.model.businessChannelNo);
            // formData.append('businessChannelName', this.model.businessChannelName);
            // formData.append('whiteListFile', this.fileList);
            // postAction(`/config/admin/importWhiteListDetails`, formData).then((res) => {
            //   if(res.status.statusCode == 0){
            //     this.uploadData = res.result
            //     this.uploadData.failNums>0?this.failShow = true : this.failShow = false;
            //     this.$message.success(res.status.statusReason)
            //     this.visible=false
            //     this.$emit('ok')
            //   }else{
            //     this.$message.warning(res.status.statusReason)
            //   }
            // }).finally(() => {
            //   this.confirmLoading = false
            //   this.close()
            // })
          }
        }
      })
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>
<style scoped>
  .pos{
    height: 40px;
    position: relative;
    cursor: pointer;
  }
  .pos>input{
    cursor: pointer;
    width:100px;
  }
  #file{
    opacity: 0;
    position: absolute;
    z-index: 2;
  }
  .abso{
    cursor: pointer;
    color:#1890FF;
    font-size: 14px;
    position: absolute;
    left: 0;
    top:0;
    z-index: 1;
  }
</style>