restructure/src/views/system/user/index.vue

<template>
  <div>
    <n-card>
      <headSearch :info="data.info" @search="handleSearch" />
      <data-table
        ref="tableRef"
        :columns="data.columns"
        :row-key="(row) => row.id"
        :request="loadDataTable"
        size="large"
        @update:checked-row-keys="handleCheck"
      >
        <template #tableTitle>
          <n-button type="primary" @click="handleUser"> 新建 </n-button>
          <n-popconfirm
            negative-text="取消"
            positive-text="确认"
            @positive-click="deleteUsers('plural')"
          >
            <template #trigger>
              <n-button type="primary"> 删除 </n-button>
            </template>
            确认要删除选中数据吗？
          </n-popconfirm>
        </template>
      </data-table>
    </n-card>
  </div>
  <!-- 新增、编辑弹窗 -->
  <user-modal
    v-if="data.modalShow"
    v-model:visible="data.modalShow"
    :row="rowData"
    @done="handleSearch"
  />
</template>

<script>
import headSearch from '@/components/Search/index.vue'
import dataTable from '@/components/DataTable/index.vue'
import TableAction from '@/components/DataTable/tools/Action.vue'
import TableImage from '@/components/DataTable/tools/Image.vue'
import TableTags from '@/components/DataTable/tools/Tags.vue'
import { getUserList, deleteUser } from '@/api/system/user/index.js'
import { h, unref, toRefs, ref } from 'vue'
import { reactive } from 'vue'
import UserModal from './components/UserModal.vue'
import info from './info.js'
export default {
  name: 'MenuPage',
  components: { dataTable, UserModal, headSearch },
  setup() {
    const data = reactive({
      columns: [
        {
          type: 'selection'
        },
        {
          title: '用户编号',
          key: 'code',
          align: 'center'
        },
        {
          title: '头像',
          key: 'avatar',
          align: 'center',
          render(row) {
            return h(TableImage, {
              images: {
                width: 36,
                height: 36,
                src: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQiKrYt-fEfJ4SZhF9KfLLaX9f15KV6Ve1ptA&usqp=CAU'
              }
            })
          }
        },
        {
          title: '用户账号',
          key: 'username',
          align: 'center'
        },
        {
          title: '用户姓名',
          key: 'realname',
          align: 'center'
        },
        {
          title: '角色',
          key: 'roleList',
          align: 'center',
          render(row) {
            return h(TableTags, {
              data: row.roleList,
              rowKey: 'name'
            })
          }
        },
        {
          title: '状态',
          key: 'status',
          align: 'center',
          width: 100,
          render(row) {
            return h(TableTags, {
              data: row.status,
              filters: [
                {
                  key: 1,
                  label: '启用'
                },
                {
                  key: 2,
                  label: '禁用'
                }
              ]
            })
          }
        },
        {
          title: '部门',
          key: 'deptName',
          align: 'center'
        },
        {
          title: '创建时间',
          key: 'createTime',
          align: 'center',
          width: 160
        },
        {
          title: '更新时间',
          key: 'updateTime',
          align: 'center',
          width: 160
        },
        {
          title: '操作',
          align: 'center',
          width: 150,
          fixed: 'right',
          render(row) {
            return h(TableAction, {
              actions: [
                {
                  label: '修改',
                  type: 'button',
                  props: {
                    type: 'primary',
                    onClick: play.bind(null, row)
                  },
                  auth: 'basic_list'
                },
                {
                  label: '删除',
                  type: 'popconfirm',
                  auth: 'basic_list',
                  props: {
                    negativeText: '取消',
                    positiveText: '确认',
                    onPositiveClick: deleteSingle.bind(null, row.id)
                  }
                }
              ],
              align: 'center'
            })
          }
        }
      ],
      info: ref(info),
      modalShow: false,
      rowData: {}
    })
    // 打开编辑弹窗
    function play(row) {
      data.rowData = row
      data.modalShow = true
    }

    const params = ref({})

    const tableRef = ref()

    function handleSearch(data) {
      params.value = {
        ...data
      }
      tableRef.value.reFetch({ ...unref(params) })
    }

    const loadDataTable = async(res) => {
      const _params = {
        ...unref(params),
        ...res
      }
      return await getUserList(_params)
    }

    // 新增用户
    function handleUser() {
      data.rowData = {}
      data.modalShow = true
    }

    // 选择表格数据
    const selectedIds = ref([])
    function handleCheck(rowKeys) {
      selectedIds.value = rowKeys
    }
    // 批量删除用户
    function deleteUsers() {
      if (selectedIds.value.length) {
        deleteData(selectedIds.value)
      } else {
        $message.warning('请至少选中一条数据')
      }
    }
    // 单个删除数据
    function deleteSingle(id) {
      deleteData([id])
    }

    // 删除用户接口
    function deleteData(data) {
      deleteUser(data).then((res) => {
        if (res.code === 0) {
          handleSearch()
          $message.success(res.data.msg)
        } else {
          $message.error(res.data.msg)
        }
      }).catch(e => {
        console.log(e)
      })
    }

    return {
      data,
      loadDataTable,
      handleUser,
      ...toRefs(data),
      tableRef,
      handleSearch,
      deleteUsers,
      handleCheck,
      selectedIds,
      deleteData
    }
  },
  methods: {

  }
}
</script>
<style scoped lang='scss'>
.n-button + .n-button {
  margin-left: 10px;
}
</style>