smsb-web-develop/src/views/marketing/merchant/index.vue

<template>
  <wrapper
    fill
    margin
    padding
    background
  >
    <schema-table
      ref="table"
      :schema="schema"
    />
    <merchant-dialog
      ref="addDialog"
      @done="onAdded"
    />
    <confirm-dialog
      ref="uploadDialog"
      title="新增导入文件"
      @confirm="onUpload"
    >
      <el-upload
        ref="upload"
        class="o-upload l-flex__auto"
        action="none"
        :auto-upload="false"
        :show-file-list="false"
        :on-change="onChange"
        drag
      >
        <div class="l-flex--row">
          <i class="o-upload__icon el-icon-upload" />
          <template v-if="upload.file">
            <div class="u-color--blue">
              {{ upload.file.name }}
            </div>
          </template>
          <template v-else>
            <span class="c-sibling-item">
              拖拽文件到此或
            </span>
            <span class="c-sibling-item near u-color--blue">
              点击选择文件
            </span>
          </template>
        </div>
      </el-upload>
    </confirm-dialog>
    <el-dialog
      :visible.sync="showProgress"
      custom-class="c-dialog--transparent"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-progress
        class="u-align-self--stretch"
        :percentage="progress"
        :stroke-width="24"
        text-inside
        status="success"
      />
    </el-dialog>
  </wrapper>
</template>

<script>
import {
  getMerchantsByQuery,
  deleteMerchant,
  uploadMerchant
} from '@/api/merchant.js'
import MerchantDialog from './components/MerchantDialog.vue'

export default {
  components: {
    MerchantDialog
  },
  data () {
    return {
      upload: {},
      showProgress: false,
      progress: 0
    }
  },
  computed: {
    schema () {
      return {
        props: {
          size: 'small'
        },
        list: getMerchantsByQuery,
        buttons: [
          { type: 'add', on: this.addStreamingMedia },
          { type: 'add', label: '上传', on: this.uploadStreamingMedia }
        ],
        filters: [
          { key: 'name', type: 'search', placeholder: '门店名称' },
          { key: 'personName', type: 'search', placeholder: '门店负责人' },
          { type: 'refresh' }
        ],
        cols: [
          { prop: 'name', label: '门店名称' },
          { prop: 'personName', label: '门店负责人', width: 100, align: 'center' },
          { prop: 'personPhone', label: '负责人手机号', width: 100, align: 'center' },
          { prop: 'cityName', label: '城市名称' },
          { prop: 'countyName', label: '区县名称' },
          { prop: 'address', label: '详细地址' },
          { prop: 'region', label: '省区' },
          { prop: 'serviceName', label: '服务商' },
          { prop: 'servicePerson', label: '服务商联系人', width: 100, align: 'center' },
          { prop: 'servicePhone', label: '服务商电话', width: 100, align: 'center' },
          { label: '门店认证状态', type: 'tag', render: ({ authStatus }) => authStatus
            ? {
              type: 'danger',
              label: '未认证'
            }
            : {
              type: 'success',
              label: '已认证'
            }, size: 'sm', width: 92 },
          { label: '中通有投门店', type: 'tag', render: ({ status }) => status
            ? {
              type: 'danger',
              label: '否'
            }
            : {
              type: 'success',
              label: '是'
            }, size: 'sm', width: 92 },
          { type: 'invoke', render: [
            { label: '编辑', on: this.onView },
            { label: '删除', on: this.onDel }
          ], width: 100 }
        ]
      }
    }
  },
  methods: {
    onView (asset) {
      this.$refs.addDialog.show(asset)
    },
    onDel (asset) {
      deleteMerchant(asset).then(() => {
        this.$refs.table.decrease(1)
      })
    },
    addStreamingMedia () {
      this.$refs.addDialog.show()
    },
    uploadStreamingMedia () {
      this.upload = {
        file: null
      }
      this.$refs.uploadDialog.show()
    },
    onUpload (done) {
      if (!this.upload.file) {
        this.$message({
          type: 'warning',
          message: '请选择升级APK'
        })
        return
      }
      const formData = new FormData()
      const { file } = this.upload
      console.log(file)
      formData.append('upload-file', file)
      this.progress = 0
      this.showProgress = true
      uploadMerchant(formData, ({ loaded, total }) => {
        this.progress = Math.min(99, loaded * 100 / total | 0)
      }).finally(() => {
        this.progress = 100
        this.showProgress = false
      }).then(() => {
        done()
        this.$refs.table.resetCondition()
      })
    },
    onChange ({ raw }) {
      this.$refs.upload.clearFiles()
      this.upload.file = raw
    },
    onAdded (streamingMedia) {
      this.$refs.table.resetCondition(streamingMedia)
    }
  }
}
</script>