oa/src/pages/system/roleManage/index.vue

<template>
  <div class="workSpace">
    <searchForm :keys="['roleName']" ref="searchForm" @on-search="onSearch">
      <addRoleBtn class="addRoleBtn" @after-op="getList()"></addRoleBtn>
    </searchForm>
    <VaCard tag="b" class="table">
      <div class="va-table-responsive">
        <VaDataTable :items="users" :columns="columns" :loading="loading">
          <template #cell(setting)="{ rowData }">
            <permissionSetting :params="rowData"></permissionSetting>
            <previewManByRoleBtn :params="rowData"></previewManByRoleBtn>
            <editRoleBtn :params="rowData" @after-op="getList"></editRoleBtn>
            <deleteRoleBtn :params="rowData" @after-op="getList"></deleteRoleBtn>
          </template>
        </VaDataTable>
      </div>
      <div class="pagination">
        <VaPagination
          @click="update"
          v-model="pageInfo.pageNum"
          :total="pageInfo.total"
          :page-size="pageInfo.pageSize"
          :visible-pages="4"
          class="justify-center sm:justify-start"
        />
      </div>
    </VaCard>
  </div>
</template>

<script>
  import searchForm from '../module/searchForm.vue'
  import addRoleBtn from './module/addRoleBtn.vue'
  import permissionSetting from './module/permissionSetting.vue'
  import previewManByRoleBtn from './module/previewManByRoleBtn.vue'
  import deleteRoleBtn from './module/deleteRoleBtn.vue'
  import editRoleBtn from './module/editRoleBtn.vue'
  import dict from '../../../common/dict'
  export default {
    name: 'index',
    components: {
      searchForm,
      addRoleBtn,
      permissionSetting,
      previewManByRoleBtn,
      deleteRoleBtn,
      editRoleBtn,
    },
    methods: {
      onSearch(v) {
        this.pageInfo.pageNum = 1
        this.getList()
      },
      update(v) {
        this.getList()
      },
      getList() {
        let params = {
          pageNum: Math.ceil(this.pageInfo.pageNum / this.pageInfo.pageSize),
          pageSize: this.pageInfo.pageSize,
          roleName: this.$refs.searchForm.form.roleName,
        }
        this.$api.getRoleList(params).then((res) => {
          this.users = res.result.records
          this.pageInfo.total = res.result.total
        })
      },
    },
    mounted() {
      this.getList()
    },
    data() {
      return {
        page: 3,
        pageInfo: {
          ...dict.pageInfo,
        },
        columns: [
          { key: 'roleName', label: '角色名称' },
          { key: 'setting', label: '设置' },
        ],
        loading: false,
        users: [],
      }
    },
  }
</script>

<style scoped lang="less">
  .workSpace {
    width: 100%;
    flex: 1;
  }
  .table {
    margin-top: 20px;
    width: 100%;
  }
  .va-table-responsive {
    width: 100%;
  }
  .va-table {
    width: 100%;
  }

  .addRoleBtn {
    margin-left: 12px;
  }
</style>