web
2025-06-20 9bb6d0b9d8078a0311d16a1faefef9c2330f4d29
src/views/system/user/index.vue
@@ -1,22 +1,9 @@
    <!--
    * @Author: Liuyi candymxq888@outlook.com
    * @Date: 2024-08-06 16:17:39
 * @LastEditors: Liuyi candymxq888@outlook.com
 * @LastEditTime: 2024-10-23 15:51:47
    * @FilePath: \water-qinghe-web\src\views\system\user\index.vue
    * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
    -->
    <template>
        <div class="app-container">
          <el-form :model="queryParams" ref="queryRef" :inline="true">
              <el-form-item label="用户名称" prop="name">
                <el-input
                    v-model="queryParams.name"
                    placeholder="请输入用户名称"
                    clearable
                    style="width: 200px"
                    @keyup.enter="handleQuery"
                />
            <el-input v-model="queryParams.name" placeholder="请输入用户名称" clearable style="width: 200px"
              @keyup.enter="handleQuery" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -25,44 +12,30 @@
          </el-form>
          <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="Plus"
                    @click="handleAdd"
                >新增</el-button>
            <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
              </el-col>
          </el-row>
          <!--表格及分页-->
          <el-table v-loading="loading" :data="tableData">
              <el-table-column
                v-for="(item, key, index) of tableHeader"
                :prop="key.toString()"
                :label="item"
                :key="index"
                align="center"
              >
          <el-table-column v-for="(item, key, index) of tableHeader" :prop="key.toString()" :label="item" :key="index"
            align="center">
                <template #default="scope">
                    <div v-if="key === 'userType'">
                        {{userTypeList?.filter(fil => fil.dictValue == scope.row.userType.toString())[0].dictLabel}}
                {{userTypeList?.filter(fil => fil.dictValue == scope.row.userType.toString())?.[0]?.dictLabel}}
                    </div>
                </template>
            </el-table-column>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
                    <el-button v-if="scope.row.userType == 3" link type="primary" icon="Edit" @click="handleRole(scope.row)">绑定角色</el-button>
              <el-button v-if="scope.row.userType == 3" link type="primary" icon="Edit"
                @click="handleRole(scope.row)">绑定角色</el-button>
                    <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              :total="pageParam.total"
              v-model:page="pageParam.page"
              v-model:limit="pageParam.limit"
              :page-sizes="[10,20,30]"
              @pagination="getList"
            />
        <pagination :total="pageParam.total" v-model:page="pageParam.page" v-model:limit="pageParam.limit"
          :page-sizes="[10, 20, 30]" @pagination="getList" />
          <!-- 添加或修改对话框 -->
          <el-dialog :title="title" v-model="open" append-to-body center>
              <el-form class="form-box"  ref="userRef" :model="form" :rules="rules">
@@ -77,12 +50,8 @@
                      </el-form-item>
                      <el-form-item label="用户类型"  prop="userType">
                            <el-select v-model="form.userType" placeholder="请选择用户类型">
                                <el-option
                                v-for="(item,index) in userTypeList"
                                :label="item.dictLabel"
                                :value="item.dictValue"
                                :key="index"
                                ></el-option>
                <el-option v-for="(item, index) in userTypeList" :label="item.dictLabel" :value="item.dictValue"
                  :key="index"></el-option>
                            </el-select>
                      </el-form-item>
                        <el-form-item label="联系邮箱" prop="email">
@@ -108,16 +77,11 @@
          </el-dialog>
          
            <!-- 角色设置弹窗 -->
            <el-dialog
                v-model="open1"
                title="角色绑定"
                align-center
                center
                width="300"
                >
        <el-dialog v-model="open1" title="角色绑定" align-center center width="300">
                <div class="bandCheck">
                    <el-checkbox-group v-model="roleCheckedList">
                        <el-checkbox v-for="(item,index) in roleSelectList" :key="index" :label="item.name" :value="item.id" size ="large" />
              <el-checkbox v-for="(item, index) in roleSelectList" :key="index" :label="item.name" :value="item.id"
                size="large" />
                    </el-checkbox-group>
                </div>
                <div class="handleBtn">
@@ -345,8 +309,10 @@
        max-width: 100px;
        height: 50px;
    }
    .el-dialog{
        width:50vw;
        .user-form{
            display: flex;
            flex-wrap: wrap;
@@ -354,11 +320,13 @@
            align-items: center;
            margin: 20px auto;
            width: 90%;
            .el-form-item{
                width: 45%;
            }
        }
    }
    .bandCheck{
      width:100%;
      /* background-color: beige; */
@@ -367,15 +335,16 @@
      align-items: center;
      margin-bottom:100px;
    }
    .handleBtn{
      width:100%;
      /* background-color: beige; */
      display: flex;
      justify-content: center;
      align-items: center;
      .el-button{
        width:100px;
      }
    }
    </style>