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

<template>

  <div>

    <div style="background-color: #ececec; padding: 2px">
      <a-row :gutter="16">
        <a-col :span="6">
          <a-spin :spinning="spinning">
            <a-card  :bordered="false">
              <div slot="title">
                <a-page-header
                  size="small"
                  style="background-color: #FFFFFF;"
                  title="资料管理 / 资料上传"
                  sub-title=""
                  @back="goBack"
                ></a-page-header>
              </div>
              <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-badge class="badge-width-100" :count=fileTypeBadge[fileType.businessContract].len
                         :show-zero=fileTypeBadge[fileType.businessContract].showZero
                         :number-style=fileTypeBadge[fileType.businessContract].numberStyle
                >
                  <a-radio-button style="display: flex" :value=fileType.businessContract>业务合同</a-radio-button>
                </a-badge>


                <a-badge class="badge-width-100" :count=fileTypeBadge[fileType.smsNumberCertificate].len
                         :show-zero=fileTypeBadge[fileType.smsNumberCertificate].showZero
                         :number-style=fileTypeBadge[fileType.smsNumberCertificate].numberStyle>
                  <a-radio-button style="display: flex" :value=fileType.smsNumberCertificate>
                    号码证书
                  </a-radio-button>
                </a-badge>

                <a-badge class="badge-width-100" :count=fileTypeBadge[fileType.recordNotice].len
                         :show-zero=fileTypeBadge[fileType.recordNotice].showZero
                         :number-style=fileTypeBadge[fileType.recordNotice].numberStyle>
                  <a-radio-button style="display: flex" :value=fileType.recordNotice>
                    备案通知
                  </a-radio-button>
                </a-badge>

                <a-badge class="badge-width-100" :count=fileTypeBadge[fileType.groupPriceApproval].len
                         :show-zero=fileTypeBadge[fileType.groupPriceApproval].showZero
                         :number-style=fileTypeBadge[fileType.groupPriceApproval].numberStyle>
                  <a-radio-button style="display: flex" :value=fileType.groupPriceApproval>
                    集团政企价格审批单
                  </a-radio-button>
                </a-badge>


                <a-badge class="badge-width-100" :count=fileTypeBadge[fileType.businessLicence].len
                         :show-zero=fileTypeBadge[fileType.businessLicence].showZero
                         :number-style=fileTypeBadge[fileType.businessLicence].numberStyle>
                  <a-radio-button style="display: flex" :value=fileType.businessLicence>
                    营业执照
                  </a-radio-button>
                </a-badge>

                <a-badge class="badge-width-100" :count=fileTypeBadge[fileType.customerIntroductionLetter].len
                         :show-zero=fileTypeBadge[fileType.customerIntroductionLetter].showZero
                         :number-style=fileTypeBadge[fileType.customerIntroductionLetter].numberStyle>
                  <a-radio-button style="display: flex" :value=fileType.customerIntroductionLetter>
                    集团政企价格审批单
                  </a-radio-button>
                </a-badge>

                <a-badge class="badge-width-100" :count=fileTypeBadge[fileType.handlerIdNumberCopy].len
                         :show-zero=fileTypeBadge[fileType.handlerIdNumberCopy].showZero
                         :number-style=fileTypeBadge[fileType.handlerIdNumberCopy].numberStyle>
                  <a-radio-button style="display: flex" :value=fileType.handlerIdNumberCopy>
                    经办人身份复印件
                  </a-radio-button>
                </a-badge>

                <a-badge class="badge-width-100" :count=fileTypeBadge[fileType.crmScreenshot].len
                         :show-zero=fileTypeBadge[fileType.crmScreenshot].showZero
                         :number-style=fileTypeBadge[fileType.crmScreenshot].numberStyle>
                  <a-radio-button style="display: flex" :value=fileType.crmScreenshot>
                    CRM 行短业务截图
                  </a-radio-button>
                </a-badge>

                <a-badge class="badge-width-100" :count=fileTypeBadge[fileType.valueAddedLicence].len
                         :show-zero=fileTypeBadge[fileType.valueAddedLicence].showZero
                         :number-style=fileTypeBadge[fileType.valueAddedLicence].numberStyle>
                  <a-radio-button style="display: flex" :value=fileType.valueAddedLicence>
                    增值业务许可证
                  </a-radio-button>
                </a-badge>

                <a-badge class="badge-width-100" :count=fileTypeBadge[fileType.otherData].len
                         :show-zero=fileTypeBadge[fileType.otherData].showZero
                         :number-style=fileTypeBadge[fileType.otherData].numberStyle>
                  <a-radio-button style="display: flex" :value=fileType.otherData>
                    其他资料
                  </a-radio-button>
                </a-badge>

              </a-radio-group>


            </a-card>
          </a-spin>

        </a-col>
        <a-col :span="18">
          <a-card  :bordered="false">
            <a-list item-layout="vertical" :data-source="delList">
              <a-list-item slot="renderItem" slot-scope="item, index">

                <iframe
                  frameborder="1"
                  :src=item.href
                  ref="ifr"
                  width="100%"
                  height="560px"
                  scrolling="auto">
                </iframe>
                <a-button type="danger" slot="actions" @click="removeFile(item)">移除</a-button>

              </a-list-item>
            </a-list>
          </a-card>
        </a-col>
      </a-row>
    </div>

  </div>

</template>

<script>

import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import {httpAction, postAction} from '@api/manage'
import pdf from 'vue-pdf';

let Base64 = require('js-base64').Base64


export default {
  name: 'TaskUpload',
  mixins: [JeecgListMixin],
  inject:['closeCurrent'],
  components: {
    pdf
  },
  data() {
    return {

      fileType: {
        businessContract: "businessContract",
        smsNumberCertificate: "smsNumberCertificate",
        recordNotice: "recordNotice",
        groupPriceApproval: "groupPriceApproval",
        businessLicence: "businessLicence",
        customerIntroductionLetter: "customerIntroductionLetter",
        handlerIdNumberCopy: "handlerIdNumberCopy",
        crmScreenshot: "crmScreenshot",
        valueAddedLicence: "valueAddedLicence",
        otherData: "otherData",
      },

      fileTypeBadge: {
        "businessContract": {
          len: 0,
          showZero: true,
          numberStyle: {
            backgroundColor: '#fa073f'
          }
        },
        "smsNumberCertificate": {
          len: 0,
          showZero: true,
          numberStyle: {
            backgroundColor: '#fa073f'
          }
        },
        "recordNotice": {
          len: 0,
          showZero: true,
          numberStyle: {
            backgroundColor: '#fa073f'
          }
        },
        "groupPriceApproval": {
          len: 0,
          showZero: true,
          numberStyle: {
            backgroundColor: '#fa073f'
          }
        },
        "businessLicence": {
          len: 0,
          showZero: true,
          numberStyle: {
            backgroundColor: '#fa073f'
          }
        },
        "customerIntroductionLetter": {
          len: 0,
          showZero: true,
          numberStyle: {
            backgroundColor: '#fa073f'
          }
        },
        "handlerIdNumberCopy": {
          len: 0,
          showZero: true,
          numberStyle: {
            backgroundColor: '#fa073f'
          }
        },
        "crmScreenshot": {
          len: 0,
          showZero: true,
          numberStyle: {
            backgroundColor: '#fa073f'
          }
        },
        "valueAddedLicence": {
          len: 0,
          showZero: true,
          numberStyle: {
            backgroundColor: '#fa073f'
          }
        },
        "otherData": {
          len: 0,
          showZero: true,
          numberStyle: {
            backgroundColor: '#fa073f'
          }
        },
      },

      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: [],
      model: {},
    }
  },
  created() {
    //this.badgeCount()
    this.model.id = this.$route.query.id;

    this.customerDataList();
    this.badgeCount()
  },
  computed: {
    importMinioUploadAction() {
      return window._CONFIG['domianURL'] + this.url.minioUpload;
    },
  },
  methods: {
    // 返回上一级
    goBack() {
      this.$router.go(-1);
      this.closeCurrent();
    },
    // 返回上一级
    removeFile(item) {
      console.log(item)
    },

    customerDataList() {
      let model = {
        "infoId": this.model.id
      }
      postAction(this.url.list, model)
        .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 = [];
              }
              console.log(this.delList)
            } else {
              this.delList = [];
            }

          } else {
            this.$message.error('查询资料信息失败')
          }
        }).finally(() => {

      })
    },
    badgeCount() {
      //this.fileTypeBadge = []
      let model = {
        "infoId": this.model.id
      }
      let res = null;
      postAction(this.url.list, model)
        .then((res) => {
          if (res.success) {
            res = res.result.records
            if (res.length > 0 && res != null) {
              let data = res[0];
              for (var i in this.fileType) {
                let fileTypeElement = this.fileType[i];
                let datum = data[fileTypeElement];
                let badge = {};
                if (datum == null) {

                } else {
                  let length = datum.split(",").length;
                  let showZero = length > 0 ? false : true;
                  badge = {
                    len: parseInt(length),
                    showZero: showZero,
                    numberStyle: {
                      backgroundColor: "#52c41a"
                    }
                  }
                  this.fileTypeBadge[fileTypeElement] = badge;
                }

              }

            }

          } else {
            /* for (var i in this.fileType) {
               let fileTypeElement = this.fileType[i];
               let badge = {
                 len: 0,
                 showZero: true,
                 style: {}

               }
               this.fileTypeBadge[fileTypeElement] = badge;
             }*/
          }
        })
    },


    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.model.id,
            //value1:fileUrl
          }
          model[value1] = fileUrl
          postAction(this.url.editUrl, model)
            .then((res) => {
              if (res.success) {
                this.customerDataList();
                this.badgeCount();
              } 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) {
      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>);
    },

    /**
     * 上传事件回调
     *
     * @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('上传完成');
          }
        }
      }

    },

  },

}
</script>

<style scoped>
.badge-width-100 {
  width: 100%;
}

</style>