crm-mobile/pages_crm/components/tabAbout/aboutFile.vue

<template>
  <view class="section about-file">
    <view class="section-title">
      <image :src="$static('images/crm_about/folder.png')" class="icon" />
      <text class="title">
        附件
      </text>
      <view
        v-if="!isSeas"
        class="add-btn"
        @click="handleUploadFile">
        <text class="wk wk-plus icon-add" />
        <text>新建</text>
      </view>
    </view>

    <view class="section-body">
      <template v-if="listData.length > 0">
        <wk-file-content :list="listData" show-delete @delete="handleDelete" />
      </template>
      <template v-else>
        <view class="no-data">
          暂无数据
        </view>
      </template>
    </view>

    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog
        content="您确定要删除该文件吗？"
        type="warning"
        @confirm="handleDialogConfirm" />
    </uni-popup>
  </view>
</template>

<script>
/**
 * 文件列表
 */
  import {QueryFileList as LeadsQueryFileList} from 'API/crm/leads'
  import {QueryFileList as CustomerQueryFileList} from 'API/crm/customer'
  import {QueryFileList as ContactsQueryFileList} from 'API/crm/concat'
  import {QueryFileList as BusinessQueryFileList} from 'API/crm/business'
  import {QueryFileList as ContractQueryFileList} from 'API/crm/contract'
  import {QueryFileList as ProductQueryFileList} from 'API/crm/product'
  import {QueryFileList as InvoiceQueryFileList} from 'API/crm/invoice'
  import {FileDeleteById} from 'API/file'
  import UploadFile from '@/utils/file.js'

  export default {
    name: 'AboutFile',
    props: {
      type: {
        type: String,
        default: null
      },
      batchId: {
        type: [String, Number],
        default: null
      },
      detailId: {
        type: [String, Number],
        default: null
      },
      isSeas: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        listData: [],

        deleteItem: null
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        const request = {
          crm_leads: LeadsQueryFileList,
          crm_customer: CustomerQueryFileList,
          crm_contacts: ContactsQueryFileList,
          crm_business: BusinessQueryFileList,
          crm_contract: ContractQueryFileList,
          crm_product: ProductQueryFileList,
          crm_invoice: InvoiceQueryFileList,
        }[this.type]
        if (!request) return
        request({
          id: this.detailId
        }).then(res => {
          this.listData = res
        }).catch()
      },

      handleDelete(index, item) {
        this.deleteItem = {
          index: index,
          data: item
        }
        this.$refs.popup.open()
      },

      handleDialogConfirm() {
        this.$refs.popup.close()
        FileDeleteById({
          id: this.deleteItem.data.fileId
        }).then(() => {
          this.$toast('删除成功')
          this.listData.splice(this.deleteItem.index, 1)
        }).catch()
      },

      /**
       * 上传附件
       */
      handleUploadFile() {
        let fileObj = new UploadFile({
          type: 'file',
          batchId: this.batchId
        })
        fileObj.choose().then(response => {
          this.listData = this.listData.concat(response)
          fileObj = null
        })
      },
    }
  }
</script>

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

.section-body {
  padding: 15rpx 20rpx;
}

.no-data {
  padding-top: 20rpx;
  padding-bottom: 4rpx;
}
</style>