tnc-fe/src/views/smscheck/modules/TaskCheckDetail.vue

<template>

  <div>
    <a-page-header
      style="background-color: #FFFFFF;"
      title="客户详情"
      sub-title=""
      @back="showCheckList"
    >
      <a-descriptions :title="info.customerName" :column="3" :bordered="false">
        <a-descriptions-item label="客户编号">{{info.customerNo}}</a-descriptions-item>
        <a-descriptions-item label="服务号码">{{info.smsNumber}}</a-descriptions-item>
        <a-descriptions-item label="用户编号">{{info.userNo}}</a-descriptions-item>
        <a-descriptions-item label="入网时间">{{info.networkAccessTime}}</a-descriptions-item>
        <a-descriptions-item label="用户状态" :span="2">{{info.userState}}</a-descriptions-item>
        <a-descriptions-item label="员工姓名">{{info.staffName}}</a-descriptions-item>
        <a-descriptions-item label="员工工号">{{info.staffNo}}</a-descriptions-item>
      </a-descriptions>
    </a-page-header>

    <a-card :bordered="false" style="margin-top: 10px;">
      <a-form-model
        ref="ruleForm"
        :label-col="{ span: 1 }"
        :wrapper-col="{ span: 23 }"
      >
        <a-card title="业务基本情况内容" :bordered="true">
          <a-descriptions :bordered="false">
            <a-descriptions-item label="用户开通状态">{{info.userOpenState}}</a-descriptions-item>
            <a-descriptions-item label="码号" :span="2">{{info.smsNumberPrefix}}</a-descriptions-item>
            <a-descriptions-item label="详细用途" :span="3">{{info.smsNumberUsage}}</a-descriptions-item>
            <a-descriptions-item label="使用单位联系人">{{info.customerContacts}}</a-descriptions-item>
            <a-descriptions-item label="手机号" :span="2">{{info.customerContactsPhone}}</a-descriptions-item>
            <a-descriptions-item label="客户经理">{{info.accountManager}}</a-descriptions-item>
            <a-descriptions-item label="手机号" :span="2">{{info.accountManagerPhone}}</a-descriptions-item>
          </a-descriptions>

        </a-card>

        <a-card title="业务规范性内容" :bordered="true">
          <a-descriptions :bordered="false">
            <a-descriptions-item label="合同到期时间">{{info.contractExpireTime}}</a-descriptions-item>
            <a-descriptions-item label="码号证书到期时间">{{info.smsNumberCertificateExpireTime}}</a-descriptions-item>
            <a-descriptions-item label="备案通知到期时间">{{info.recordNoticeExpireTime}}</a-descriptions-item>
            <a-descriptions-item label="增值业务许可证到期时间">{{info.valueAddedLicenceExpireTime}}</a-descriptions-item>
            <a-descriptions-item label="营业执照到期时间" :span="2">{{info.businessLicenceExpireTime}}</a-descriptions-item>
            <a-descriptions-item label="合同签署主体与实际开通客户是否一致">{{info.contractOpenCustomerSame}}</a-descriptions-item>
            <a-descriptions-item label="是否有集团价格审批" :span="2">{{info.groupPriceApproval}}</a-descriptions-item>
            <a-descriptions-item label="资料是否完整">{{info.dataComplete}}</a-descriptions-item>
            <a-descriptions-item label="是否完成整改" :span="2">{{info.rectifyReformOver}}</a-descriptions-item>

          </a-descriptions>

        </a-card>

        <a-card title="附件资料" :bordered="true">


          <div style="background-color: rgba(236,236,236,0); padding: 0px">
            <a-row :gutter="16">
              <a-col :span="6">

                  <a-card title="资料类型选择">
                    <a-radio-group @change="fileTypeClick" v-model:value="radioValue" button-style="solid" style="width: 250px">

                      <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-radio-group>
                  </a-card>
              </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>-->

<!--                      :description=item.information-->

                      <iframe
                        frameborder="1"
                        :src=item.href
                        ref="ifr"
                        width="100%"
                        height="560px"
                        scrolling="auto">
                      </iframe>
                      <a-list-item-meta>
                        <a slot="title" :href=item.href>{{ item.title }}</a>

                        <a-avatar
                          slot="avatar"
                          :src=item.url
                          icon="file"
                        />
                      </a-list-item-meta>
                    </a-list-item>
                  </a-list>
                </a-card>
              </a-col>
            </a-row>
          </div>

        </a-card>

        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }" style="margin-top: 10px;">
          <a-space>
            <a-button @click="showCheckList">
              返回
            </a-button>
          </a-space>
        </a-form-model-item>

      </a-form-model>

    </a-card>

  </div>

</template>

<script>

import { httpAction, getAction } from '@api/manage'
import '@/assets/less/TableExpand.less'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
let Base64 = require('js-base64').Base64

export default {
  name: 'TaskCheckDetail',
  mixins:[JeecgListMixin],
  inject:['closeCurrent'],
  data () {
    return {
      delList:[],
      radioValue: "businessContract",
      fileType: {
        businessContract: "businessContract",
        smsNumberCertificate: "smsNumberCertificate",
        recordNotice: "recordNotice",
        groupPriceApproval: "groupPriceApproval",
        businessLicence: "businessLicence",
        customerIntroductionLetter: "customerIntroductionLetter",
        handlerIdNumberCopy: "handlerIdNumberCopy",
        crmScreenshot: "crmScreenshot",
        valueAddedLicence: "valueAddedLicence"
      },
      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'
          }
        },
      },
      description: '稽核详情页面',
      info: {},
      url: {
        queryInfo: "/smsCheck/customerInfo/queryById",
        list: "/smsCheck/customerInfo/list",
        listData: "/smsCheck/customerData/list"
      },
      autoSearch: false,
    }
  },
  created() {
    this.info.id = this.$route.query.id;
    this.queryInfoById(this.info.id);

    this.customerDataList();
    this.badgeCount()
  },
  methods: {
    fileTypeClick(a, event) {
      this.customerDataList();
    },

    customerDataList() {
      let model = {
        "infoId": this.info.id
      }
      httpAction(this.url.listData, 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.radioValue];
              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.info.id
      }
      httpAction(this.url.listData, model, "post")
        .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;
                }
                console.log(this.fileTypeBadge)

              }

            }

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

               }
               this.fileTypeBadge[fileTypeElement] = badge;
             }*/
          }
        })
    },
    // 显示列表页面
    showCheckList() {
      this.$router.go(-1);
      this.closeCurrent();
    },
    handlePreview(path) {
      let url = path;
      if (path) {
        url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + encodeURIComponent(Base64.encode((path)))
      }
      return url;
    },
    queryInfoById (id) {
      let url = this.url.queryInfo;
      let params = {
        id: id
      }
      let that = this;
      getAction(url, params).then(res => {
        if (res.success) {
          that.info = res.result;
        }
      }).finally(() => {

      })
    },
  }
}
</script>

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

</style>