tnc-fe/src/views/dataupload/modules/TaskImport.vue

<template>

  <div>
    <a-card :bordered="false">
      <h1>
        <span style="font-size: 14px;">资料管理 / 资料上传</span>
      </h1>
      <div>
        <a-button type="primary" @click="showList">返回</a-button>
      </div>
    </a-card>

    <div style="background-color: #ececec; padding: 20px">
      <a-row :gutter="16">
        <a-col :span="6">
          <a-spin :spinning="spinning">
            <a-card title="资料类型选择" :bordered="false">
              <div class="table-operator">
                <a-upload
                  name="file"
                  :multiple="false"
                  :action="importMinioUploadAction"
                  :headers="tokenHeader"
                  :showUploadList="false"
                  :beforeUpload="importBeforeUpload"
                  @change="importHandleChange">
                  <a-button>
                    <a-icon type="upload"/>
                    客户资料上传
                  </a-button>
                </a-upload>
              </div>
              <a-radio-group v-model:value="value1" button-style="solid" style="width: 250px" @change="fileTypeClick">
                <a-radio-button style="display: flex" value="businessContract">业务合同</a-radio-button>
                <a-radio-button style="display: flex" value="smsNumberCertificate">号码证书</a-radio-button>
                <a-radio-button style="display: flex" value="recordNotice">备案通知</a-radio-button>
                <a-radio-button style="display: flex" value="groupPriceApproval">集团政企价格审批单</a-radio-button>
                <a-radio-button style="display: flex" value="businessLicence">营业执照</a-radio-button>
                <a-radio-button style="display: flex" value="customerIntroductionLetter">集团政企价格审批单</a-radio-button>
                <a-radio-button style="display: flex" value="handlerIdNumberCopy">经办人身份复印件</a-radio-button>
                <a-radio-button style="display: flex" value="crmScreenshot">CRM 行短业务截图</a-radio-button>
                <a-radio-button style="display: flex" value="valueAddedLicence">增值业务许可证</a-radio-button>
              </a-radio-group>
            </a-card>
          </a-spin>

        </a-col>
        <a-col :span="18">
          <a-card title="资料详情" :bordered="false">
            <a-list item-layout="vertical" :data-source="delList">
              <a-list-item slot="renderItem" slot-scope="item, index">
<!--                <pdf
                  ref="pdf"
                  :src="item.url">
                </pdf>-->




                <a-list-item-meta
                  :description=item.information
                >
                  <a slot="title" :href=item.href>{{ item.title }}</a>

                  <a-avatar
                    slot="avatar"
                    :src=item.url
                    icon="file"
                  />
                </a-list-item-meta>
                <iframe
                  frameborder="1"
                  :src=item.href
                  ref="ifr"
                  width="100%"
                  height="560px"
                  scrolling="auto">
                </iframe>
              </a-list-item>
            </a-list>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <a-card :bordered="true" style="margin-top: 12px;">


      <!-- 操作按钮区域 start -->
      <!--      <div class="table-operator">
              <a-upload name="file"
                        :showUploadList="false"
                        :multiple="false"
                        :headers="tokenHeader"
                        :action="url.importExcel"
                        @change="uploadChange">
                <a-button type="primary" icon="upload">客户资料导入</a-button>
              </a-upload>
              <a-button type="primary" icon="import"
                        @click="importInfo">确定导入</a-button>
            </div>-->
      <!-- 操作按钮区域 end -->

      <!-- table区域 begin -->
      <!--      <div>
              <a-table
                ref="table"
                size="middle"
                :scroll="{x:true}"
                bordered

                :columns="columns"
                :dataSource="dataSource"
                :pagination="false"
                :loading="loading"
                class="j-table-force-nowrap"
                @change="handleTableChange">

              </a-table>
            </div>-->
      <!-- table区域 end -->

    </a-card>

  </div>

</template>

<script>

import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import {httpAction} from '@api/manage'
import pdf from 'vue-pdf';
let Base64 = require('js-base64').Base64


export default {
  name: 'TaskImport',
  mixins: [JeecgListMixin],
  props: {
    infoId: {
      //type: string,
      require: true
    }
  },
  setup() {

  },
  components:{
    pdf
  },
  data() {
    return {
      spinning: false,
      value1: "businessContract",
      expandedKeys: ['0-0', '0-1'],
      selectedKeys: ['0-0'],
      description: '导入页面',
      autoSearch: false,
      dataSource: [],
      errorCount: 0,
      url: {
        importExcel: window._CONFIG['domainURL'] + "/smsCheck/task/importCustomerExcel",
        importData: "/smsCheck/task/importCustomerData",
        minioUpload: "/smsCheck/customerData/uploadMinio",
        editUrl: "/smsCheck/customerData/edit/info/id",
        list: "/smsCheck/customerData/list"
      },
      delList: [],
    }
  },

  created() {
    this.customerDataList();
  },

  methods: {

    customerDataList() {
      let model = {
        "infoId": this.infoId
      }
      httpAction(this.url.list, model, "post")
        .then((res) => {
          if (res.success) {
            let records = res.result.records;
            if (records.length > 0) {
              this.delList = [];
              let record = records[0];
              let recordElement = record[this.value1];
              if (recordElement != null || recordElement != undefined) {
                let splitList = recordElement.split(",");
                for (var i in splitList) {
                  let splitListElement = splitList[i];
                  let split = splitListElement.split("/");
                  let splitElement = split[split.length - 1];
                  let del = {
                    title: splitElement,
                    href: window._CONFIG['onlinePreviewDomainURL'] + '?url=' + encodeURIComponent(Base64.encode((splitListElement))),
                    information: "上传用户：" + record.createBy,
                    url: splitListElement
                  }
                  this.delList.push(del)
                }
              } else {
                this.delList = [];
              }
            } else {
              this.delList = [];
            }

          } else {

          }
        }).finally(() => {

      })
    },

    importBeforeUpload(file) {
      var fileType = file.type;
      if (fileType === 'image') {
        if (fileType.indexOf('image') < 0) {
          this.$message.warning('请上传图片');
          return false;
        }
      } else if (fileType === 'file') {
        if (fileType.indexOf('image') >= 0) {
          this.$message.warning('请上传文件');
          return false;
        }
      }


      return true
    },
    importHandleChange(info) {
      this.spinning = true;
      info.file
      if (info.file.status === 'done') {
        if (info.file.response.success) {
          //this.loadData()
          this.spinning = false;
          this.$message.success(`${info.file.name} 上传成功!`);
          let fileUrl = info.file.response.message;
          let value1 = this.value1;
          let model = {
            "infoId": this.infoId,
            //value1:fileUrl
          }
          model[value1] = fileUrl
          httpAction(this.url.editUrl, model, "post")
            .then((res) => {
              if (res.success) {
                this.customerDataList();
              } else {
              }
            }).finally(() => {

          })

        } else {
          this.spinning = false;
          this.$message.error(`${info.file.response.message}`);
        }
      } else if (info.file.status === 'error') {
        this.spinning = false;
        this.$message.error(`${info.file.response.message}`);
      }
    },


    fileTypeClick(a, event) {
      //console.log(a)
      //console.log(event)
      this.customerDataList();
    },
    radioStyle() {
      return {
        display: 'flex',
        height: '30px',
        lineHeight: '30px'
      }
    },
    renderContent(h, {node, data, store}) {
      return (
        <span class="custom-tree-node">
            <span>{node.label}</span>
            <span>
              <el-button size="mini" type="text" on-click={() => this.append(data)}>Append</el-button>
              <el-button size="mini" type="text" on-click={() => this.remove(node, data)}>Delete</el-button>
            </span>
          </span>);
    }
    ,


    // 显示列表页面
    showList() {
      this.$emit('goList', true);
    },
    /**
     * 上传事件回调
     *
     * @param result 回调值
     */
    importUploadChange(result) {
      let file = result.file;
      let event = result.event;
      if (event === undefined && file.status === 'uploading') {
        this.$message.info('开始上传');
      }
      if (event && file.status === 'uploading') {
        this.$message.info('上传中，请稍等……');
      }
      if (file.response) {
        let success = file.response.success;
        let message = file.response.message;
        if (!success) {
          this.$message.error(message);
        }
        if (file.status === 'done') {
          this.dataSource = file.response.result.data;
          this.errorCount = file.response.result.errorCount;
          if (this.errorCount > 0) {
            this.$message.error('导入含有错误项，请检查内容')
          } else {
            this.$message.info('上传完成');
          }
        }
      }

    },

  },
  computed: {
    importMinioUploadAction() {
      return window._CONFIG['domianURL'] + this.url.minioUpload;
    },
  }
}
</script>

<style scoped>

</style>