qushaowei
2023-10-28 345ca30ff9f623dc64e1af03fde456f63d18423a
src/views/system/RoleUserList.vue
@@ -1,15 +1,32 @@
<template>
  <a-row :gutter="10">
    <a-col :md="leftColMd" :sm="24" style="margin-bottom: 20px">
    <a-col
      :md="leftColMd"
      :sm="24"
      style="margin-bottom: 20px"
    >
      <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <!-- 搜索区域 -->
          <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-form
            layout="inline"
            @keyup.enter.native="searchQuery"
          >
            <a-row :gutter="24">
              <a-col :md="12" :sm="8">
                <a-form-item label="角色名称" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
                  <a-input placeholder="" v-model="queryParam.roleName"></a-input>
              <a-col
                :md="12"
                :sm="8"
              >
                <a-form-item
                  label="角色名称"
                  :labelCol="{span: 5}"
                  :wrapperCol="{span: 18, offset: 1}"
                >
                  <a-input
                    placeholder=""
                    v-model="queryParam.roleName"
                  ></a-input>
                </a-form-item>
              </a-col>
              <!--
@@ -21,29 +38,72 @@
                </a-form-item>
              </a-col>
              -->
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="12" :sm="24">
               <a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 21px">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <span
                style="float: left;overflow: hidden;"
                class="table-page-search-submitButtons"
              >
                <a-col
                  :md="12"
                  :sm="24"
                >
                  <a-button
                    type="primary"
                    @click="searchQuery"
                    icon="search"
                    style="margin-left: 21px"
                  >查询</a-button>
                  <a-button
                    type="primary"
                    @click="searchReset"
                    icon="reload"
                    style="margin-left: 8px"
                  >重置</a-button>
            </a-col>
          </span>
            </a-row>
          </a-form>
        </div>
        <!-- 操作按钮区域 -->
        <div class="table-operator" style="margin: 5px 0 10px 2px">
          <a-button @click="handleAdd" type="primary" icon="plus">新建角色</a-button>
        <div
          class="table-operator"
          style="margin: 5px 0 10px 2px"
        >
          <a-button
            @click="handleAdd"
            type="primary"
            icon="plus"
          >新建角色</a-button>
          <!--<a-button @click="handleEdit(model1)" type="primary" icon="plus">角色编辑</a-button>-->
          <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
            <a-button type="primary" icon="import">导入</a-button>
          <a-upload
            name="file"
            :showUploadList="false"
            :multiple="false"
            :headers="tokenHeader"
            :action="importExcelUrl"
            @change="handleImportExcel"
          >
            <a-button
              type="primary"
              icon="import"
            >导入</a-button>
          </a-upload>
          <a-button type="primary" icon="download" @click="handleExportXls('角色管理')">导出</a-button>
          <a-button
            type="primary"
            icon="download"
            @click="handleExportXls('角色管理')"
          >导出</a-button>
        </div>
        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <div
          class="ant-alert ant-alert-info"
          style="margin-bottom: 16px;"
        >
          <i class="anticon anticon-info-circle ant-alert-icon">
          </i> 已选择 <a><b>{{ selectedRowKeys1.length }}</b></a>项
          <a style="margin-left: 24px" @click="onClearSelected1">清空</a>
          <a
            style="margin-left: 24px"
            @click="onClearSelected1"
          >清空</a>
        </div>
        <div style="margin-top: 15px">
@@ -58,8 +118,12 @@
            :pagination="ipagination"
            :loading="loading"
            :rowSelection="{selectedRowKeys: selectedRowKeys1, onChange: onSelectChange1, type:'radio'}"
            @change="handleTableChange">
          <span slot="action" slot-scope="text, record">
            @change="handleTableChange"
          >
            <span
              slot="action"
              slot-scope="text, record"
            >
            <a @click="handleOpen(record)">用户</a>
            <a-divider type="vertical"/>
@@ -75,7 +139,10 @@
                  <a @click="handleEdit(record)">编辑</a>
                </a-menu-item>
                <a-menu-item>
                  <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete1(record.id)">
                    <a-popconfirm
                      title="确定删除吗?"
                      @confirm="() => handleDelete1(record.id)"
                    >
                    <a>删除</a>
                  </a-popconfirm>
                </a-menu-item>
@@ -85,29 +152,62 @@
          </a-table>
        </div>
        <!-- 右侧的角色权限配置 -->
        <user-role-modal ref="modalUserRole"></user-role-modal>
        <role-modal ref="modalForm" @ok="modalFormOk"></role-modal>
        <!-- <user-role-modal ref="modalUserRole"></user-role-modal> -->
        <user-role-modal-new ref="modalUserRole"></user-role-modal-new>
        <role-modal
          ref="modalForm"
          @ok="modalFormOk"
        ></role-modal>
      </a-card>
    </a-col>
    <a-col :md="rightColMd" :sm="24" v-if="this.rightcolval == 1">
    <a-col
      :md="rightColMd"
      :sm="24"
      v-if="this.rightcolval == 1"
    >
      <a-card :bordered="false">
        <div style="text-align: right;">
          <a-icon type="close-circle" @click="hideUserList" />
          <a-icon
            type="close-circle"
            @click="hideUserList"
          />
        </div>
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="24">
              <a-col :md="12" :sm="12">
              <a-col
                :md="12"
                :sm="12"
              >
                <a-form-item label="用户账号">
                  <a-input placeholder="" v-model="queryParam2.username"></a-input>
                  <a-input
                    placeholder=""
                    v-model="queryParam2.username"
                  ></a-input>
                </a-form-item>
              </a-col>
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="9" :sm="24">
             <a-button type="primary" @click="searchQuery2" icon="search" style="margin-left: 21px">查询</a-button>
              <a-button type="primary" @click="searchReset2" icon="reload" style="margin-left: 8px">重置</a-button>
              <span
                style="float: left;overflow: hidden;"
                class="table-page-search-submitButtons"
              >
                <a-col
                  :md="9"
                  :sm="24"
                >
                  <a-button
                    type="primary"
                    @click="searchQuery2"
                    icon="search"
                    style="margin-left: 21px"
                  >查询</a-button>
                  <a-button
                    type="primary"
                    @click="searchReset2"
                    icon="reload"
                    style="margin-left: 8px"
                  >重置</a-button>
            </a-col>
          </span>
@@ -115,14 +215,31 @@
          </a-form>
        </div>
        <!-- 操作按钮区域 -->
        <div class="table-operator" :md="24" :sm="24">
          <a-button @click="handleAdd2" type="primary" icon="plus" style="margin-top: 16px">新增用户</a-button>
        <div
          class="table-operator"
          :md="24"
          :sm="24"
        >
          <a-button
            @click="handleAdd2"
            type="primary"
            icon="plus"
            style="margin-top: 16px"
          >新增用户</a-button>
          <!--<a-button @click="handleEdit2" type="primary" icon="edit" style="margin-top: 16px">用户编辑</a-button>-->
          <a-button @click="handleAddUserRole" type="primary" icon="plus" style="margin-top: 16px">已有用户</a-button>
          <a-button
            @click="handleAddUserRole"
            type="primary"
            icon="plus"
            style="margin-top: 16px"
          >已有用户</a-button>
          <a-dropdown v-if="selectedRowKeys2.length > 0">
            <a-menu slot="overlay">
              <a-menu-item key="1" @click="batchDel2">
              <a-menu-item
                key="1"
                @click="batchDel2"
              >
                <a-icon type="delete"/>
                删除
              </a-menu-item>
@@ -134,10 +251,16 @@
        </div>
        <!-- table区域-begin -->
        <div>
          <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
          <div
            class="ant-alert ant-alert-info"
            style="margin-bottom: 16px;"
          >
            <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
            selectedRowKeys2.length }}</a>项
            <a style="margin-left: 24px" @click="onClearSelected2">清空</a>
            <a
              style="margin-left: 24px"
              @click="onClearSelected2"
            >清空</a>
          </div>
          <a-table
            style="height:500px"
@@ -150,8 +273,12 @@
            :pagination="ipagination2"
            :loading="loading2"
            :rowSelection="{selectedRowKeys: selectedRowKeys2, onChange: onSelectChange2}"
            @change="handleTableChange2">
           <span slot="action" slot-scope="text, record">
            @change="handleTableChange2"
          >
            <span
              slot="action"
              slot-scope="text, record"
            >
           <a @click="handleEdit2(record)">编辑</a>
          <a-divider type="vertical"/>
          <a-dropdown>
@@ -160,7 +287,10 @@
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete2(record.id)">
                    <a-popconfirm
                      title="确定删除吗?"
                      @confirm="() => handleDelete2(record.id)"
                    >
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
@@ -170,9 +300,18 @@
          </a-table>
        </div>
        <!-- 表单区域 -->
        <role-modal ref="modalForm" @ok="modalFormOk"></role-modal>
        <user-modal ref="modalForm2" @ok="modalFormOk2"></user-modal>
        <Select-User-Modal ref="selectUserModal" @selectFinished="selectOK"></Select-User-Modal>
        <role-modal
          ref="modalForm"
          @ok="modalFormOk"
        ></role-modal>
        <user-modal
          ref="modalForm2"
          @ok="modalFormOk2"
        ></user-modal>
        <Select-User-Modal
          ref="selectUserModal"
          @selectFinished="selectOK"
        ></Select-User-Modal>
      </a-card>
    </a-col>
  </a-row>
@@ -186,6 +325,7 @@
  import { filterObj } from '@/utils/util'
  import UserRoleModal from './modules/UserRoleModal'
  import moment from 'moment'
import UserRoleModalNew from './modules/UserRoleModalNew'
  export default {
    name: 'RoleUserList',
@@ -195,7 +335,8 @@
      SelectUserModal,
      RoleModal,
      UserModal,
      moment
    moment,
    UserRoleModalNew
    },
    data() {
      return {
@@ -543,6 +684,6 @@
<style scoped>
  /** Button按钮间距 */
  .ant-btn {
    margin-left: 8px
  margin-left: 8px;
  }
</style>