crm-mobile/pages_crm/components/detailSection/baseInfo.vue

<template>
  <view v-if="showBaseInfo" class="detail-base-info">
    <view class="section">
      <view class="section-title">
        <text class="icon" />
        <text class="text">
          基本信息
        </text>
      </view>
      <view class="section-body">
        <template v-for="item in baseInfo">
          <base-info-item
            :key="item.fieldId"
            :field="item"
            :detail-data="detailData" />
        </template>
      </view>
    </view>

    <template v-if="insertFields">
      <view
        v-for="(child, index) in insertFields"
        :key="index"
        class="section">
        <view class="section-title">
          <text class="icon" />
          <text class="text">
            {{ child.name }}
          </text>
        </view>
        <view class="section-body">
          <base-info-item
            v-for="item in child.list"
            :key="item.fieldId"
            :field="item"
            :detail-data="detailData" />
        </view>
      </view>
    </template>

    <view class="section">
      <view class="section-title">
        <text class="icon" />
        <text class="text">
          系统信息
        </text>
      </view>
      <view class="section-body">
        <base-info-item
          v-for="item in sysInfo"
          :key="item.fieldId"
          :field="item"
          :detail-data="detailData" />
      </view>
    </view>
  </view>
</template>

<script>
  import { InformationById as LeadsInformation } from 'API/crm/leads'
  import { InformationById as CustomerInformation } from 'API/crm/customer'
  import { InformationById as ContactsInformation } from 'API/crm/concat'
  import { InformationById as BusinessInformation } from 'API/crm/business'
  import { InformationById as ContractInformation } from 'API/crm/contract'
  import { InformationById as ReceivablesInformation } from 'API/crm/received'
  import { InformationById as ProductInformation } from 'API/crm/product'
  import { InformationById as InvoiceInformation } from 'API/crm/invoice'

  import BaseInfoItem from './baseInfoItem'

  export default {
    name: 'DetailBaseInfo',
    components: {
      BaseInfoItem
    },
    props: {
      detailId: {
        type: [String, Number],
        required: true
      },
      detailData: {
        type: Object,
        default: () => {}
      },
      type: {
        type: String,
        required: true
      },
      poolId: {
        type: [String, Number],
        default: null
      },
      insertFields: {
        type: Array,
        default: null
      }
    },
    data() {
      return {
        baseInfo: [],
        sysInfo: [],

        dialogMsg: '',
        webUrl: '',

        reqMap: {
          crm_leads: LeadsInformation,
          crm_customer: CustomerInformation,
          crm_pool: CustomerInformation,
          crm_contacts: ContactsInformation,
          crm_business: BusinessInformation,
          crm_contract: ContractInformation,
          crm_receivables: ReceivablesInformation,
          crm_product: ProductInformation,
          crm_invoice: InvoiceInformation
        },

        showBaseInfo: true
      }
    },
    wkActivated() {
      this.showBaseInfo = false
      this.$nextTick(function() {
        this.showBaseInfo = true
      })
    },
    mounted() {
      this.getFieldList()
    },
    methods: {
      /**
       * 获取自定义字段信息
       */
      getFieldList() {
        const request = this.reqMap[this.type]
        if (!request) {
          this.baseInfo = []
          this.sysInfo = []
        }
        const params = { id: this.detailId }
        if (this.type === 'crm_pool') {
          params.poolId = this.poolId
          params.types = 2
        }
        request(params).then(res => {
          const list = []
          const _arr = []
          res = res.filter(o => o.formType !== 'product')

          if (this.type === 'crm_invoice') {
            const findRes = res.find(o => o.fieldName === 'invoiceType')
            if (findRes) {
              findRes.setting = [
                { name: '增值税专用发票', value: 1 },
                { name: '增值税普通发票', value: 2 },
                { name: '国税通用机打发票', value: 3 },
                { name: '地税通用机打发票', value: 4 },
                { name: '收据', value: 5 }
              ]
            }
          }

          res.filter(o => o.sysInformation !== 1).forEach(o => {
            if (o.formType === 'detail_table') {
              // 把明细表格字段放到最后
              _arr.push(o)
            } else {
              list.push(o)
            }
          })
          this.baseInfo = list.concat(_arr)
          this.sysInfo = res.filter(o => o.sysInformation === 1)
        }).catch(() => {
          this.baseInfo = []
          this.sysInfo = []
        })
      }
    }
  }
</script>

<style scoped lang="scss">
.detail-base-info {
  .section {
    width: 100%;
    background-color: white;
    padding: 32rpx 0 20rpx;
    margin-bottom: 15rpx;
    &:first-child {
      border-radius: 18rpx 18rpx 0 0;
    }
    .section-title {
      padding: 0 25rpx;
      .icon {
        width: 15rpx;
        height: 15rpx;
        vertical-align: middle;
        background-color: #333333;
        border-radius: 50%;
        display: inline-block;
        margin-right: 15rpx;
      }
      .text {
        color: #212121;
        font-size: 28rpx;
      }
    }
    .section-body {

    }
  }
}
</style>