wms / wms4_globaltaiguogeli · Files

<template>
  <a-modal
    :width="1000"
    :title="title"
    :visible="innerVisible"
    @cancel="handleCancel"
    :cancelText="$t('button.close')"
    :okButtonProps="{style:{display:'none'}}"
  >
    <a-alert type="info" showIcon style="margin-bottom: 16px;">
      <template slot="message">
        <span>{{ $t('button.selected') }}</span>
        <a style="font-weight: 600;padding: 0 4px;">{{ selectedRowKeys.length }}</a>
        <span>{{ $t('button.item') }}</span>
        <template v-if="selectedRowKeys.length>0">
          <a-divider type="vertical"/>
          <a @click="handleClearSelection">{{ $t('button.clearAll') }}</a>
          <a-divider type="vertical"/>
          <a @click="handleRevertBatch">{{ $t('system.bulkRestore') }}</a>
          <a-divider type="vertical"/>
          <a @click="handleDeleteBatch">{{ $t('system.bulkDelete') }}</a>
        </template>
      </template>
    </a-alert>

    <a-table
      ref="table"
      rowKey="id"
      size="middle"
      bordered
      :columns="columns"
      :loading="loading"
      :dataSource="dataSource"
      :pagination="false"
      :rowSelection="{selectedRowKeys, onChange: handleTableSelectChange}"
    >

      <!-- 显示头像 -->
      <template slot="avatarslot" slot-scope="text, record">
        <div class="anty-img-wrap">
          <a-avatar shape="square" :src="url.getAvatar(record.avatar)" icon="user"/>
        </div>
      </template>

      <span slot="action" slot-scope="text, record">
        <a @click="handleRevert([record.id])"><a-icon type="redo"/>{{ $t('system.restoreUser') }}</a>
        <a-divider type="vertical"/>
        <a @click="handleDelete([record.id])"><a-icon type="delete"/>{{ $t('system.permanentlyDelete') }}</a>
      </span>
    </a-table>

  </a-modal>
</template>

<script>
import {putAction, deleteAction, getFileAccessHttpUrl} from "@/api/manage"
import { translateResultMessage } from '@/api/api'

// 高度封装的请求，请务必使用 superRequest.call(this,{}) 的方式调用
function superRequest(options) {
  this.loading = !!options.loading
  options.promise.then(res => {
    if (res.success && typeof options.success === 'function') {
      options.success(res)
    } else {
      throw new Error(res.message)
    }
  }).catch(e => {
    console.error(this.$t('system.failedToRetrieveDeletedUsers'), e)
    this.$message.warning(this.$t('system.failedToRetrieveDeletedUsers') + (e.message || e))
  }).finally(() => {
    this.loading = false
  })
}

export default {
  name: 'UserRecycleBinModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      title: this.$t('system.userRecycleBin'),
      loading: false,
      innerVisible: false,
      selectedRowKeys: [],
      dataSource: [],
      columns: [
        {title: '#', align: 'center', key: 'rowIndex', width: 80, customRender: (t, r, i) => i + 1},
        {title: this.$t('system.userAccount'), align: 'center', dataIndex: 'username'},
        {title: this.$t('system.userName'), align: 'center', dataIndex: 'realname',},
        {title: this.$t('system.avatar'), align: 'center', dataIndex: 'avatar', scopedSlots: {customRender: 'avatarslot'}},
        // {title: '部门', align: 'center', dataIndex: 'orgCode'},
        {title: this.$t('system.options'), align: 'center', dataIndex: 'action', width: 300, scopedSlots: {customRender: 'action'}}
      ],
      url: {
        getAvatar: (path) => getFileAccessHttpUrl(`${path}`),
        // 回收站操作，get = 获取列表；put = 取回；delete = 彻底删除
        recycleBin: '/sys/user/recycleBin',
        putRecycleBin: '/sys/user/putRecycleBin',
        deleteRecycleBin: '/sys/user/deleteRecycleBin',
      },
    }
  },
  watch: {
    visible: {
      immediate: true,
      handler(val) {
        if (val) {
          this.loadData()
        }
        this.innerVisible = val
      }
    },
    innerVisible(val) {
      this.$emit('update:visible', val)
    },
  },
  methods: {
    loadData() {
      superRequest.call(this, {
        loading: true,
        promise: this.$http.get(this.url.recycleBin),
        success: res => this.dataSource = res.result
      })
    },
    handleOk() {
      this.loadData()
      this.$emit('ok')
    },
    handleCancel() {
      this.innerVisible = false
    },
    // 还原用户
    handleRevert(userIds) {
      this.$confirm({
        title: this.$t('system.restoreUser'),
        content: this.$t('system.areYouSureYouWantToRestoreThese') + ` ${userIds.length} ` + this.$t('system.users'),
        centered: true,
        onOk: () => {
          putAction(this.url.putRecycleBin, {userIds: userIds.join(',')}).then((res) => {
            if (res.success) {
              this.handleOk()
              this.handleClearSelection()
              this.$message.success(this.$t('system.successfullyRestored') + ` ${userIds.length} ` + this.$t('system.users2'))
            }
          })
        }
      })
    },
    // 彻底删除用户
    handleDelete(userIds) {
      this.$confirm({
        title: this.$t('system.permanentlyDelete'),
        content: (<div>
          <p>{this.$t('system.areYouSureYouWantToPermanentlyDeleteThese')}  {userIds.length}  {this.$t('system.users')}</p>
          <p style="color:red;">{this.$t('system.attention')}</p>
        </div>),
        centered: true,
        onOk: () => {
          var that = this;
          deleteAction(that.url.deleteRecycleBin, {userIds: userIds.join(',')}).then((res) => {
            if (res.success) {
              this.loadData()
              this.handleClearSelection()
              this.$message.success(this.$t('system.successfullyPermanentlyDeleted') + ` ${userIds.length} ` + this.$t('system.users2'))
            } else {
              that.$message.warning(translateResultMessage(res, res.message))
            }
          });
        },
      })
    },
    handleRevertBatch() {
      this.handleRevert(this.selectedRowKeys)
    },
    handleDeleteBatch() {
      this.handleDelete(this.selectedRowKeys)
    },
    handleClearSelection() {
      this.handleTableSelectChange([], [])
    },
    handleTableSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectionRows
    },
  }
}
</script>

<style lang="less" scoped></style>