Jeecg-Boot 2.1.4 版本发布 | 重构较大,较多新功能

ant-design-vue-jeecg/src/views/system/modules/UserRecycleBinModal.vue

@@ -0,0 +1,191 @@
+<template>
+  <a-modal
+    :width="1000"
+    :title="title"
+    :visible="innerVisible"
+    @cancel="handleCancel"
+    cancelText="关闭"
+    :okButtonProps="{style:{display:'none'}}"
+  >
+    <a-alert type="info" showIcon style="margin-bottom: 16px;">
+      <template slot="message">
+        <span>已选择</span>
+        <a style="font-weight: 600;padding: 0 4px;">{{ selectedRowKeys.length }}</a>
+        <span>项</span>
+        <template v-if="selectedRowKeys.length>0">
+          <a-divider type="vertical"/>
+          <a @click="handleClearSelection">清空选择</a>
+          <a-divider type="vertical"/>
+          <a @click="handleRevertBatch">批量还原</a>
+          <a-divider type="vertical"/>
+          <a @click="handleDeleteBatch">批量删除</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, index">
+        <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"/> 还原用户</a>
+        <a-divider type="vertical"/>
+        <a @click="handleDelete([record.id])"><a-icon type="delete"/> 彻底删除</a>
+      </span>
+    </a-table>
+
+  </a-modal>
+</template>
+
+<script>
+
+  // 高度封装的请求，请务必使用 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('查询已删除的用户失败：', e)
+      this.$message.warning('查询已删除的用户失败：' + (e.message || e))
+    }).finally(() => {
+      this.loading = false
+    })
+  }
+
+  export default {
+    name: 'UserRecycleBinModal',
+    props: {
+      visible: {
+        type: Boolean,
+        default: false
+      },
+    },
+    data() {
+      return {
+        title: '用户回收站',
+        loading: false,
+        innerVisible: false,
+        selectedRowKeys: [],
+        dataSource: [],
+        columns: [
+          { title: '#', align: 'center', key: 'rowIndex', width: 80, customRender: (t, r, i) => i + 1 },
+          { title: '账号', align: 'center', dataIndex: 'username' },
+          { title: '姓名', align: 'center', dataIndex: 'realname', },
+          { title: '头像', align: 'center', dataIndex: 'avatar', scopedSlots: { customRender: 'avatarslot' } },
+          { title: '部门', align: 'center', dataIndex: 'orgCode' },
+          { title: '操作', align: 'center', dataIndex: 'action', width: 200, scopedSlots: { customRender: 'action' } }
+        ],
+        url: {
+          getAvatar: (path) => `window._CONFIG['staticDomainURL']/${path}`,
+          // 回收站操作，get = 获取列表；put = 取回；delete = 彻底删除
+          recycleBin: '/sys/user/recycleBin',
+        },
+      }
+    },
+    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: '恢复用户',
+          content: `您确定要恢复这 ${userIds.length} 个用户吗？`,
+          centered: true,
+          onOk: () => {
+            superRequest.call(this, {
+              loading: true,
+              promise: this.$http.put(this.url.recycleBin, userIds),
+              success: () => {
+                this.handleOk()
+                this.handleClearSelection()
+                this.$message.success(`还原 ${userIds.length} 个用户成功！`)
+              }
+            })
+          }
+        })
+      },
+      // 彻底删除用户
+      handleDelete(userIds) {
+        this.$confirm({
+          title: '彻底删除用户',
+          content: (<div>
+            <p>您确定要彻底删除这 {userIds.length} 个用户吗？</p>
+            <p style="color:red;">注意：彻底删除后将无法恢复，请谨慎操作！</p>
+          </div>),
+          centered: true,
+          onOk: () => {
+            superRequest.call(this, {
+              loading: true,
+              promise: this.$http.delete(this.url.recycleBin + `?userIds=${userIds.join(',')}`),
+              success: () => {
+                this.loadData()
+                this.handleClearSelection()
+                this.$message.success(`彻底删除 ${userIds.length} 个用户成功！`)
+              }
+            })
+          },
+        })
+      },
+      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="scss" scoped></style>