feat(role): 用户管理_新增编辑用户设置多个角色

src/views/system/role/selectUser.vue

 <template>
   <!-- 授权用户 -->
-   <el-dialog title="选择用户" v-model="visible"  top="5vh" append-to-body>
-      <el-form :model="queryParams" ref="queryRef" :inline="true">
-         <el-form-item label="用户名称" prop="userName">
-            <el-input
-               v-model="queryParams.userName"
+  <el-dialog title="选择用户"
+    v-model="visible"
+    top="5vh"
+    append-to-body>
+    <el-form :model="queryParams"
+      ref="queryRef"
+      :inline="true">
+      <el-form-item label="用户名称"
+        prop="userName">
+        <el-input v-model="queryParams.userName"
           placeholder="请输入用户名称"
           clearable
           style="width: 180px"
-               @input="handleQuery"
-            />
+          @input="handleQuery" />
       </el-form-item>
-         <el-form-item label="手机号码" prop="phonenumber">
-            <el-input
-               v-model="queryParams.phonenumber"
+      <el-form-item label="手机号码"
+        prop="phonenumber">
+        <el-input v-model="queryParams.phonenumber"
           placeholder="请输入手机号码"
           clearable
           style="width: 180px"
-               @input="handleQuery"
-            />
+          @input="handleQuery" />
       </el-form-item>
       <el-form-item>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+        <el-button icon="Refresh"
+          @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
     <el-row>
-         <el-table @row-click="clickRow" ref="refTable" :data="userList" @selection-change="handleSelectionChange" height="260px">
-            <el-table-column type="selection" width="55"></el-table-column>
-            <el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />
-            <el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" />
-            <el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />
-            <el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" />
-            <el-table-column label="状态" align="center" prop="status">
+      <el-table @row-click="clickRow"
+        ref="refTable"
+        :data="userList"
+        @selection-change="handleSelectionChange">
+        <el-table-column type="selection"
+          width="55"></el-table-column>
+        <el-table-column label="用户名称"
+          prop="userName"
+          :show-overflow-tooltip="true" />
+        <el-table-column label="用户昵称"
+          prop="nickName"
+          :show-overflow-tooltip="true" />
+        <el-table-column label="邮箱"
+          prop="email"
+          :show-overflow-tooltip="true" />
+        <el-table-column label="手机"
+          prop="phonenumber"
+          :show-overflow-tooltip="true" />
+        <el-table-column label="状态"
+          align="center"
+          prop="status">
           <template #default="scope">
-                  <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+            <dict-tag :options="sys_normal_disable"
+              :value="scope.row.status" />
           </template>
         </el-table-column>
-            <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <el-table-column label="创建时间"
+          align="center"
+          prop="createTime"
+          width="180">
           <template #default="scope">
             <span>{{ parseTime(scope.row.createTime) }}</span>
           </template>
         </el-table-column>
       </el-table>
-         <pagination
-            v-show="total > 0"
+      <div class="pagination-wrap">
+        <pagination v-show="total > 0"
           :total="total"
           v-model:page="queryParams.pageNum"
           v-model:limit="queryParams.pageSize"
-            @pagination="getList"
-         />
+          @pagination="getList" />
+      </div>
+
     </el-row>
     <template #footer>
       <div class="dialog-footer">
-            <el-button type="primary" @click="handleSelectUser">确 定</el-button>
+        <el-button type="primary"
+          @click="handleSelectUser">确 定</el-button>
         <el-button @click="visible = false">取 消</el-button>
       </div>
     </template>
   </el-dialog>
 </template>
 
-<script setup name="SelectUser">
-import { authUserSelectAll, unallocatedUserList } from "@/api";
+<script setup
+  name="SelectUser">
+  import { authUserSelectAll, unallocatedUserList } from "@/api";
 
-const props = defineProps({
+  const props = defineProps({
     roleId: {
       type: [Number, String]
     }
-});
+  });
 
-const { proxy } = getCurrentInstance();
-const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
+  const { proxy } = getCurrentInstance();
+  const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
 
-const userList = ref([]);
-const visible = ref(false);
-const total = ref(0);
-const userIds = ref([]);
+  const userList = ref([]);
+  const visible = ref(false);
+  const total = ref(0);
+  const userIds = ref([]);
 
-const queryParams = reactive({
+  const queryParams = reactive({
     pageNum: 1,
     pageSize: 10,
     roleId: undefined,
     userName: undefined,
     phonenumber: undefined
-});
+  });
 
-// 显示弹框
-function show() {
+  // 显示弹框
+  function show() {
     queryParams.roleId = props.roleId;
     getList();
     visible.value = true;
-}
+  }
 
-/**选择行 */
-function clickRow(row) {
+  /**选择行 */
+  function clickRow(row) {
     proxy.$refs["refTable"].toggleRowSelection(row);
-}
+  }
 
-// 多选框选中数据
-function handleSelectionChange(selection) {
+  // 多选框选中数据
+  function handleSelectionChange(selection) {
     userIds.value = selection.map(item => item.userId);
-}
+  }
 
-// 查询表数据
-function getList() {
+  // 查询表数据
+  function getList() {
     unallocatedUserList(queryParams).then(res => {
       userList.value = res.data.rows;
       total.value = res.data.total;
     });
-}
+  }
 
-/** 搜索按钮操作 */
-function handleQuery() {
+  /** 搜索按钮操作 */
+  function handleQuery() {
     queryParams.pageNum = 1;
     getList();
-}
+  }
 
-/** 重置按钮操作 */
-function resetQuery() {
+  /** 重置按钮操作 */
+  function resetQuery() {
     proxy.resetForm("queryRef");
     handleQuery();
-}
+  }
 
-const emit = defineEmits(["ok"]);
-/** 选择授权用户操作 */
-function handleSelectUser() {
+  const emit = defineEmits(["ok"]);
+  /** 选择授权用户操作 */
+  function handleSelectUser() {
     const roleId = queryParams.roleId;
     const uIds = userIds.value.join(",");
     if (uIds == "") {
@@ -135,9 +160,17 @@ function handleSelectUser() {
       visible.value = false;
       emit("ok");
     });
-}
+  }
 
-defineExpose({
+  defineExpose({
     show,
-});
+  });
 </script>
+<style scoped
+  style="scss">
+  .pagination-wrap {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+  }
+</style>
\ No newline at end of file

src/views/system/user/index.vue

@@ -309,13 +309,13 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="角色"
-              prop="roleId">
-              <!--   multiple
+              prop="roleIds">
+              <el-select v-model="form.roleIds"
+                placeholder="请选择"
+                multiple
                 clearable
                 collapse-tags
-                collapse-tags-tooltip -->
-              <el-select v-model="form.roleId"
-                placeholder="请选择">
+                collapse-tags-tooltip>
                 <el-option v-for="item in roleOptions"
                   :key="item.roleId"
                   :label="item.roleName"
@@ -500,7 +500,7 @@
       email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
       phonenumber: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
       postId: [{ required: true, message: "请选择岗位", trigger: "change" }],
-      roleId: [{ required: true, message: "请选择角色", trigger: "change" }],
+      roleIds: [{ required: true, message: "请选择角色", trigger: "change" }],
       privilegeId: [{ required: true, message: "请选择促销角色", trigger: "change" }]
     }
   });
@@ -693,7 +693,7 @@
       status: "0",
       remark: undefined,
       postId: null,
-      roleId: [],
+      roleIds: [],
       proStatus: false, // 促销权限
       privilegeId: undefined,
       workCityList: [] // 工作城市
@@ -741,7 +741,7 @@
       // 促销权限 0 开 1 关
       response.data.proStatus = response.data.proStatus == 1 || response.data.proStatus == undefined ? false : true;
       // 后台空角色不知道为啥返回 0 不是 null
-      response.data.roleId = response.data.roleId == 0 ? [] : response.data.roleId;
+      // response.data.roleIds = response.data.roleId == 0 ? [] : response.data.roleId;
       form.value = response.data;
       postOptions.value = response.posts;
       roleOptions.value = response.roles;