HtDeleteButton.vue 5.04 KB
<template>
  <el-popconfirm
    title="确定删除吗?"
    @onConfirm="handleDelete"
    @confirm="handleDelete"
    confirm-button-text="确认"
    cancel-button-text="取消"
    trigger="hover"
    class="ht-delete-button"
  >
    <el-button
      slot="reference"
      v-if="!row"
      :type="type"
      :disabled="disabled"
      icon="icon-application-delete"
      v-loading.fullscreen.lock="fullscreenLoading"
    >
      <slot></slot>
    </el-button>
    <el-dropdown-item
      icon="el-icon-delete"
      :command="{row: row, command: 'delete'}"
      slot="reference"
      v-if="row"
      :type="type"
      v-loading.fullscreen.lock="fullscreenLoading"
    >
      <slot></slot>
    </el-dropdown-item>
  </el-popconfirm>
</template>

<script>
import req from '@/request.js'
import {mapState} from 'vuex'

export default {
  name: 'ht-delete-button',
  props: {
    type: {
      type: String,
      default: '',
    },
    requestMethod: {
      type: String,
      default: 'DELETE',
    },
    url: {
      type: String,
      required: true,
    },
    pk: {
      type: String,
      default: 'id',
    },
    parameter: {
      type: String,
      default: 'ids',
    },
    pureData: {
      type: Boolean,
      default: false,
    },
    htTable: {
      type: Object,
    },
    row: {
      type: Object,
    },
    ignoreTenant: {
      type: Boolean,
      default: false,
    },
    alertMessage: {
      type: Boolean,
      default: true,
    },
    deleteList: {
      type: Array,
      default: () => [],
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    isLayout: {
      type: Boolean,
      default: false,
    },
    successMessage: {
      type: String,
    },
    checkRight: {
      type: Boolean,
      default: false,
    }, 
    name: {
      type: String,
      default: 'name',
    },
  },
  data() {
    return {
      fullscreenLoading: false,
      elTable: null,
    }
  },
  computed: {
    ...mapState('tenant', ['tenantId']),
    ...mapState('login', ['currentUser']),
  },
  mounted() {},
  methods: {
    handleDelete() {
      let ids = []
      let notRightNames = []
      if (this.row) {
        ids.push(this.row[this.pk])
      } else if (this.deleteList.length || this.htTable) {
        let data = this.deleteList
        if (!data || !data.length) {
          this.elTable = this.htTable
          if (this.htTable.$refs && this.htTable.$refs.htTable) {
            this.elTable = this.htTable.$refs.htTable
          }
          data =  this.elTable.selection
        }
        for (let item of data) {
          if (
            !this.ignoreTenant &&
            !this.tenantId &&
            item.tenantId &&
            this.currentUser.userAttrs &&
            this.currentUser.userAttrs.tenantId !== item.tenantId
          ) {
            this.$message.error('不能删除平台的公共数据')
            return
          }
          if (this.checkRight) {
             if (this.$checkRight(item,'4')) {
               ids.push(item[this.pk])
             }else{
              notRightNames.push(item[this.name])
             }
          }else{
             ids.push(item[this.pk])
          }
        }
         if (notRightNames.length > 0) {
          this.$message.error('以下数据无权限删除,已跳过:['+notRightNames.join(',')+']')
          if (notRightNames.length == data.length) {
            return
          }
        }
      } 
      
      if (ids.length === 0) {
        this.$message.error('请至少选择一条数据')
        return
      }

      if (!this.isLayout) {
        this.deleteSelectData(ids)
        return
      }

      const hasPublish = this.elTable.selection.filter(
        (item) => item.pubMenuCount
      )

      if (hasPublish && hasPublish.length > 0) {
        this.$confirm(
          '该栏目已发布为菜单,删除后将无法使用菜单,是否删除该布局?',
          '提示',
          {
            type: 'warning',
          }
        )
          .then(() => {
            this.deleteSelectData(ids)
          })
          .catch(() => {})
      } else {
        this.deleteSelectData(ids)
      }
    },
    async deleteSelectData(ids) {
      let params = {},
        data = null
      params[this.parameter] = ids.join(',')
      // 如果是纯文本作为参数,则直接传递文本作为参数
      if (this.pureData) {
        params = null
        data = ids.join(',')
      }

      this.fullscreenLoading = true
      let response = await req
        .request({
          params: params,
          data: data,
          url: this.url,
          method: this.requestMethod,
        })
        .finally(() => {
          this.fullscreenLoading = false
          this.htTable.load()
        })

      if (response.data && response.data.state) {
        this.$emit('after-delete', response.data.message)
        if (this.alertMessage) {
          this.$message({
            message: this.successMessage || response.data.message || '操作成功',
            showClose: true,
            type: 'success',
          })
        }
      }
    },
  },
}
</script>