crm-mobile/pages_examine/components/detailTableItem.vue

<template>
  <view
    v-if="!$isEmpty(field.value)"
    class="detail-table-item">
    <view v-for="(child, index) in field.value" :key="index">
      <view class="container-header">
        <image :src="$static('images/oa/travel.png')" alt class="img" />
        <text>{{ field.name }}{{ index+1 }}</text>
      </view>

      <view class="container-body">
        <template v-for="(item, childIndex) in child">
          <view
            v-if="item.formType !== 'desc_text'"
            :key="childIndex"
            class="fields-info-item">
            <view v-if="item.formType === 'file'" class="item-box">
              <text class="item-box-label">
                {{ item.name }}：
              </text>
              <view class="item-box-value">
                <text
                  v-for="(file, valueIndex) in item.value"
                  :key="valueIndex"
                  class="file"
                  @click="downloadFile(file)">
                  {{ file.name }}
                </text>
              </view>
            </view>

            <view
              v-else-if="isWebSite(item)"
              class="item-box">
              <text class="item-box-label">
                {{ item.name }}：
              </text>
              <view
                style="color: #3C80F7"
                class="item-box-value"
                @click="handlerWebsite(item)">
                {{ getFieldValue(item) || '' }}
              </view>
            </view>

            <view
              v-else-if="isTel(item)"
              class="item-box">
              <text class="item-box-label">
                {{ item.name }}：
              </text>
              <view
                style="color: #3C80F7"
                class="item-box-value"
                @click="handlerCall(item)">
                {{ getFieldValue(item) || '' }}
              </view>
            </view>

            <view
              v-else-if="item.formType === 'handwriting_sign'"
              class="handwriting-sign">
              <view class="handwriting-sign-label">
                {{ item.name }}：
              </view>
              <view class="handwriting-sign-value">
                <wk-signature-view :batch-id="item.value" />
              </view>
            </view>

            <view
              v-else-if="item.fieldName !== 'cause'"
              class="item-box">
              <text class="item-box-label">
                {{ item.name }}：
              </text>
              <view class="item-box-value">
                {{ getFieldValue(item) }}
              </view>
            </view>
          </view>
          <template v-else-if="item.formType === 'desc_text' && item.value">
            <view :key="childIndex" class="desc_text">
              <rich-text :nodes="item.value" />
            </view>
          </template>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
  import fieldValueMixins from '@/mixins/fieldValueMixins.js'

  export default {
    name: 'DetailTableItem',
    mixins: [fieldValueMixins],
    props: {
      field: {
        type: Object,
        required: true
      }
    },
    methods: {

    }
  }
</script>

<style scoped lang="scss">
.detail-table-item {
  background-color: #fbfbfb;
  border-radius: 6rpx;
  margin: 10rpx 32rpx 0 32rpx;

  .container-header {
    background-color: #f5f5f5;
    padding: 0 20rpx;
    font-size: 28rpx;
    height: 72rpx;
    @include left;

    .img {
      width: 34rpx;
      height: 36rpx;
      margin-right: 20rpx;
    }
  }

  .container-body {
    padding: 15rpx 20rpx;

    .fields-info-item {
      width: 100%;
      font-size: 26rpx;
      line-height: 50rpx;
      color: $dark;

      .item-box {
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
        overflow: hidden;
        .item-box-label {
          max-width: 50%;
          color: $light;
        }
        .item-box-value {
          flex: 1;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          .file {
            color: $theme-color;
            text-align: left;
            @include ellipsis;
          }

        }
      }

      .handwriting-sign {
        .handwriting-sign-label {
          color: $light;
        }
        .handwriting-sign-value {
        }
      }
    }

    .desc_text {
      font-size: $wk-font-base;
      margin: 10rpx 0;
    }
  }
}
</style>