smsb-web-develop/src/views/unified/self/index.vue

<template>
  <wrapper
    fill
    margin
    padding
    background
  >
    <schema-table
      ref="table"
      :schema="schema"
    />
    <confirm-dialog
      ref="editDialog"
      :title="isEdit ? '编辑' : '新增'"
      @confirm="onSave"
    >
      <div class="c-grid-form u-align-self--center">
        <span class="c-grid-form__label u-required">
          名称
        </span>
        <el-input
          v-model.trim="selfFrom.name"
          placeholder="最多30个字符"
          maxlength="30"
          clearable
        />
        <span class="c-grid-form__label">
          备注
        </span>
        <el-input
          v-model.trim="selfFrom.remark"
          type="textarea"
          maxlength="100"
          :rows="4"
          resize="none"
          show-word-limit
        />
      </div>
    </confirm-dialog>
    <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"
        accept=".xlsx"
        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 {
  getSelfByAdvertisingQuery,
  addSelf,
  updateSelf,
  deleteSelf,
  uploadSelf
} from '@/api/unified.js'

export default {
  data () {
    return {
      upload: {},
      showProgress: false,
      progress: 0,
      selfFrom: {},
      isEdit: false
    }
  },
  computed: {
    schema () {
      return {
        props: {
          size: 'small'
        },
        list: getSelfByAdvertisingQuery,
        buttons: [
          { type: 'add', on: this.onAdd },
          { type: 'add', label: '上传', on: this.uploadStreamingMedia }
        ],
        filters: [
          { key: 'name', type: 'search', placeholder: '广告名称' },
          { type: 'refresh' }
        ],
        cols: [
          { prop: 'name', label: '广告名称' },
          {
            prop: 'status',
            label: '状态',
            render: (data, h) => h('el-switch', {
              props: {
                value: data.status,
                size: 'mini',
                'active-value': 1,
                'active-color': '#13ce66',
                'inactive-value': 0,
                'inactive-color': '#ff4949'
              },
              // nativeOn: {
              //   click: e => e.stopPropagation()
              // },
              nativeOn: {
                click: val => {
                  this.onStatus(data, val)
                }
              }
            }),
            width: 72,
            align: 'center'
          },
          { prop: 'remark', label: '备注' },
          {
            type: 'invoke',
            render: [
              { label: '编辑', on: this.onView },
              { label: '删除', on: this.onDel }
            ],
            width: 100
          }
        ]
      }
    }
  },
  methods: {
    onStatus (asset) {
      updateSelf({
        id: asset.id,
        name: asset.name,
        remark: asset.remark,
        status: asset.status === 1 ? 0 : 1
      })
        .then(() => {
          asset.status = asset.status === 1 ? 0 : 1
        })
        .catch(() => {})
    },
    onAdd () {
      this.isEdit = false
      this.selfFrom = {
        name: '',
        remark: ''
      }
      this.$refs.editDialog.show()
    },
    onView (asset) {
      this.isEdit = true
      this.selfFrom = {
        id: asset.id,
        name: asset.name,
        remark: asset.remark
      }
      this.$refs.editDialog.show()
    },
    onSave (done) {
      const { name } = this.selfFrom
      if (!name) {
        this.$message({
          type: 'warning',
          message: '请填写广告名称'
        })
        return
      }
      (this.isEdit ? updateSelf : addSelf)(this.selfFrom).then(() => {
        done()
        this.$refs.table.pageTo(1)
      })
    },
    onDel (asset) {
      deleteSelf(asset).then(() => {
        this.$refs.table.decrease(1)
      })
    },
    uploadStreamingMedia () {
      this.upload = {
        file: null
      }
      this.$refs.uploadDialog.show()
    },
    onUpload (done) {
      if (!this.upload.file) {
        this.$message({
          type: 'warning',
          message: '请选择上传文件'
        })
        return
      }
      const formData = new FormData()
      const { file } = this.upload
      console.log(file)
      formData.append('upload-file', file)
      this.progress = 0
      this.showProgress = true
      uploadSelf(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>