crm-mobile/components/wk-form/wk-field-file.vue

<template>
  <view
    :class="{actived: fileList.length > 0}"
    class="wk-field-file">
    <view class="wk-field" @click.stop="handleChoose">
      <view v-if="_label" class="wk-field__label">
        <view v-if="field.isNull === 1" class="line" />
        <image :src="$static('images/icon/clip.png')" class="label-icon-file" />
        <text class="label-text">
          {{ _label }}
        </text>
        <view class="add-icon">
          <text class="wk wk-plus" />
        </view>
      </view>
    </view>

    <wk-file-content
      :list="fileList"
      show-delete
      @delete="handleDelete" />
  </view>
</template>

<script>
  import { FileDeleteById } from 'API/file'

  import mixins from './mixins'
  import WkFile from '@/utils/file.js'
  import { isArray } from '@/utils/types.js'

  export default {
    name: 'WkFieldFile',
    mixins: [mixins],
    data() {
      return {
        valueStr: '',
        fileList: [],

        batchId: ''
      }
    },
    watch: {
      field: {
        handler() {
          if (this.$isEmpty(this.field.value)) {
            this.fileList = []
          } else {
            this.fileList = isArray(this.field.value) ? this.field.value : []
          }

          if (this.fileList.length > 0) {
            this.batchId = this.fileList[0].batchId
          } else {
            this.batchId = ''
          }
        },
        deep: true,
        immediate: true
      }
    },
    methods: {
      handleChoose() {
        // if (this.config && this.config.batchId) {
        // 	this.batchId = this.config.batchId
        // }

        const params = { type: 'file' }
        if (this.batchId) {
          params.batchId = this.batchId
        }
        let fileObj = new WkFile(params)
        fileObj.choose().then(response => {
          this.batchId = response[0].batchId
          this.fileList = this.fileList.concat(response)
          fileObj = null
          this.emitEvt()
        })
      },

      handleDelete(index, item) {
        FileDeleteById({
          id: item.fileId
        }).then(() => {
          this.fileList.splice(index, 1)
          if (this.fileList.length === 0) {
            this.batchId = ''
            this.emitEvt()
          }
        }).catch()
      },

      emitEvt() {
        this.$emit('input', this.fileList)
        this.$emit('change', {
          index: this.index,
          field: this.field,
          value: this.fileList
        })
      }
    }
  }
</script>

<style scoped lang="scss">
@import './wkField.scss';

.wk-field-file {

  .wk-field {
    border-bottom: 0 none;

    .wk-field__label {
      @include left;
      .label-icon-file {
        width: 32rpx;
        height: 32rpx;
        margin-right: 10rpx;
      }
      .label-text {
        flex: 1;
      }
      .add-icon {
        width: 38rpx;
        height: 38rpx;
        background-color: #E1E1E1;
        border-radius: 50%;
        @include center;
        .wk {
          font-size: $wk-font-mini;
          line-height: normal;
          color: white;
        }
      }
    }

  }

  .add-btn {
    font-size: 26rpx;
    color: $theme-color;
    padding-bottom: 20rpx;
    @include right;
    .plus-icon {
      width: 22rpx;
      height: 22rpx;
      margin-right: 20rpx;
    }
  }
}

.actived {
  .wk-field {
    padding-bottom: 10rpx;
  }
}
</style>