feat: #0000 单个删除、批量删除、分配角色、密码重置联调100%

src/api/system/user.ts

@@ -66,7 +66,7 @@ function userAssignRolesApi(data: any): AxiosPromise {
 	})
 }
 /**
- * 用户管理 - 重置密码
+ * 用户管理 - 绑定角色
  */
 function userRoleIdsApi(data: any): AxiosPromise {
 	return request({

src/views/setting/user/assign-role.vue

@@ -1,68 +1,108 @@
 <template>
-	<el-dialog title="分配角色" v-model="visible" :width="550" destroy-on-close @closed="$emit('closed')">
-		<el-select v-model="roleIds" style="width: 500px;" multiple filterable
-				   placeholder="请选择分配角色">
-			<el-option
-				v-for="item in options"
-				:key="item.id"
-				:label="item.name"
-				:value="item.id"
-			>
+	<el-dialog v-model="visibleDialog" title="密码重置" :width="550" destroy-on-close @closed="handleCancel">
+		<el-select v-model="roleIds" style="width: 500px" multiple filterable placeholder="请选择分配角色">
+			<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
 				<span style="float: left">{{ item.name }}</span>
-				<span style="float: right;color: var(--el-text-color-secondary); font-size: 13px;">{{
-						item.alias
-					}}</span>
+				<span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">{{ item.alias }}</span>
 			</el-option>
 		</el-select>
 		<template #footer>
-			<el-button @click="visible=false">取 消</el-button>
+			<el-button @click="handleCancel">取 消</el-button>
 			<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
 		</template>
 	</el-dialog>
 </template>
 
-<script>
-export default {
-	emits: ['success', 'closed'],
-	data() {
-		return {
-			visible: false,
-			isSaveing: false,
-			options: [],
-			roleIds: [],
-			userIds: []
+<script setup>
+import { defineProps, defineEmits, ref, nextTick, watch, computed } from 'vue'
+import { ElMessage } from 'element-plus'
+import user from '@/api/system/user'
+import role from '@/api/system/role'
+
+const myProps = defineProps({
+	modelValue: {
+		type: Boolean,
+		default: false
+	},
+	userIds: {
+		type: Array,
+		default: () => []
+	}
+})
+
+const isSaveing = ref(false)
+const options = ref([])
+const roleIds = ref([])
+
+// 同步值
+const $myEmit = defineEmits(['update:modelValue', 'successFn'])
+
+// 关闭按钮
+const closeDrawer = () => {
+	$myEmit('successFn')
+	$myEmit('update:modelValue', false)
+}
+
+const handleCancel = () => {
+	closeDrawer()
+}
+
+// 保存
+const submit = async () => {
+	isSaveing.value = true
+	const _param = {
+		userIds: myProps.userIds,
+		roleIds: roleIds.value
+	}
+	try {
+		await user.userAssignRolesApi(_param)
+		ElMessage.success('分配成功')
+		isSaveing.value = false
+		visibleDialog.value = false
+	} catch (e) {
+		ElMessage.error('分配失败')
+		isSaveing.value = false
+		visibleDialog.value = false
+	}
+}
+
+const open = async userIds => {
+	if (userIds.length === 1) {
+		let data = await user.userRoleIdsApi({ id: userIds[0] })
+		roleIds.value = data
+	}
+}
+
+// 加载全部角色
+const loadRoles = async () => {
+	try {
+		let data = await role.roleListAllApi()
+		options.value = data
+	} catch (e) {
+		ElMessage.success('加载全量角色失败')
+	}
+}
+
+nextTick(() => {
+	loadRoles()
+})
+
+watch(
+	() => myProps.modelValue,
+	val => {
+		if (val) {
+			open(myProps.userIds)
 		}
 	},
-	mounted() {
-		this.loadRoles();
+	{ immediate: true }
+)
+
+const visibleDialog = computed({
+	get() {
+		return myProps.modelValue
 	},
-	methods: {
-		async open(userIds) {
-			this.visible = true;
-			this.userIds = userIds;
-			if (userIds.length == 1) {
-				let res = await this.$API.user.roleIds(userIds[0]);
-				this.roleIds = res.data;
-			}
-		},
-		async submit() {
-			this.isSaveing = true;
-			let res = await this.$API.user.assignRoles({
-				userIds: this.userIds,
-				roleIds: this.roleIds
-			});
-			if (res.data) {
-				this.isSaveing = false;
-				this.visible = false;
-				this.$message.success("分配成功")
-			} else {
-				this.$message.error("分配失败")
-			}
-		},
-		async loadRoles() {
-			let res = await this.$API.role.listAll();
-			this.options = res.data;
-		}
+	set(val) {
+		$myEmit('update:modelValue', val)
 	}
-}
+})
 </script>

src/views/setting/user/index.vue

@@ -47,8 +47,8 @@
 							<Delete />
 						</el-icon>
 					</el-button>
-					<el-button plain :disabled="checkedColumns.length === 0"> 分配角色 </el-button>
-					<el-button plain :disabled="checkedColumns.length === 0"> 密码重置 </el-button>
+					<el-button plain :disabled="curSelectionRows.length === 0" @click="assignRoleVisibile = true"> 分配角色 </el-button>
+					<el-button plain :disabled="curSelectionRows.length === 0" @click="resetPwdVisibile = true"> 密码重置 </el-button>
 				</template>
 
 				<template #filterAvatarSlot="scope">
@@ -88,6 +88,22 @@
 			:form-options="formOptions"
 			@submit="submitHandler"
 		/>
+
+		<assign-role-dialog
+			v-if="assignRoleVisibile"
+			v-model="assignRoleVisibile"
+			:user-ids="curSelectionRows.map(item => item.id)"
+			@successFn="updateParams()"
+			@closed="assignRoleVisibile = false"
+		></assign-role-dialog>
+
+		<reset-pwd
+			v-if="resetPwdVisibile"
+			v-model="resetPwdVisibile"
+			:user-ids="curSelectionRows.map(item => item.id)"
+			@closed="resetPwdVisibile = false"
+		>
+		</reset-pwd>
 	</div>
 </template>
 <script lang="tsx" setup>
@@ -98,6 +114,9 @@ import { ElMessage, ElTree } from 'element-plus'
 import { useTablePage } from '@/hooks/useTablePage'
 import { Plus, Delete } from '@element-plus/icons-vue'
 import StatusIndicator from '@/components/StatusIndicator'
+import AssignRoleDialog from './assign-role.vue'
+import ResetPwd from './reset-pwd.vue'
+
 const visible = ref(false) // 弹窗显示隐藏
 const isCreate = ref(true)
 const activeData = ref({})
@@ -167,6 +186,8 @@ const formOptions = ref({
 	}
 }) // 新增的表单
 const showGroupLoading = ref(false)
+const assignRoleVisibile = ref(false)
+const resetPwdVisibile = ref(false)
 const groupFilterText = ref('')
 const treeRef = ref<InstanceType<typeof ElTree>>()
 
@@ -330,6 +351,7 @@ const { searchData, tableOpts, checkedColumns, activeColumns, curSelectionRows,
 const deleteItem = async ids => {
 	try {
 		await user.userDeleteApi(ids)
+		updateParams()
 	} catch (e) {
 		console.log('删除失败')
 		ElMessage.error(`删除失败~`)
@@ -343,12 +365,8 @@ const table_del = row => {
 
 //批量删除
 const batch_del = () => {
-	/*	console.log(tableOpts.curRow);
-	debugger
-	const id = tableOpts.curRow.map(item => item.id)*/
-	// 多选数据
-	console.log(curSelectionRows.value, 'curSelectionRows.value')
-	// deleteItem(id)
+	const ids = curSelectionRows.value.map(item => item.id) // 多选数据
+	deleteItem(ids)
 }
 
 // 弹窗事件

src/views/setting/user/reset-pwd.vue

@@ -0,0 +1,84 @@
+<template>
+	<el-dialog v-model="visibleDialog" title="分配角色" :width="550" destroy-on-close @closed="handleCancel">
+		<el-form :label-position="'top'" label-width="100px" :model="formLabelAlign" style="max-width: 460px">
+			<el-form-item label="请输入新的密码">
+				<el-input v-model="formLabelAlign.password" />
+			</el-form-item>
+		</el-form>
+		<template #footer>
+			<el-button @click="handleCancel">取 消</el-button>
+			<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, ref, computed, reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import user from '@/api/system/user'
+
+const myProps = defineProps({
+	modelValue: {
+		type: Boolean,
+		default: false
+	},
+	userIds: {
+		type: Array,
+		default: () => []
+	}
+})
+
+const isSaveing = ref(false)
+
+const formLabelAlign = reactive({
+	password: ''
+})
+
+// 同步值
+const $myEmit = defineEmits(['update:modelValue', 'successFn'])
+
+// 关闭按钮
+const closeDrawer = () => {
+	$myEmit('successFn')
+	$myEmit('update:modelValue', false)
+}
+
+const handleCancel = () => {
+	closeDrawer()
+}
+
+// 保存
+const submit = async () => {
+	const _param = {
+		ids: myProps.userIds,
+		...formLabelAlign
+	}
+	if (!_param.password.trim()) {
+		return ElMessage.error('请输入新的密码')
+	}
+	const reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,.\/]).{6,20}$/
+	if (!reg.test(_param.password)) {
+		return ElMessage.error('密码必须为6-20位大小写字母数字特殊字符组合')
+	}
+	isSaveing.value = true
+	try {
+		await user.userResetPasswordApi(_param)
+		ElMessage.success('重置成功')
+		isSaveing.value = false
+		visibleDialog.value = false
+	} catch (e) {
+		ElMessage.error('重置失败')
+		isSaveing.value = false
+		visibleDialog.value = false
+	}
+}
+
+const visibleDialog = computed({
+	get() {
+		return myProps.modelValue
+	},
+	set(val) {
+		$myEmit('update:modelValue', val)
+	}
+})
+</script>

src/views/setting/user/save.vue

@@ -1,159 +0,0 @@
-<template>
-	<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
-		<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px"
-				 label-position="left">
-			<!--			<el-form-item label="头像" prop="avatar">-->
-			<!--				<sc-upload v-model="form.avatar" title="上传头像"></sc-upload>-->
-			<!--			</el-form-item>-->
-			<el-form-item label="登录账号" prop="username">
-				<el-input v-model="form.username" placeholder="用于登录系统" clearable></el-input>
-			</el-form-item>
-			<template v-if="mode=='add'">
-				<el-form-item label="登录密码" prop="password">
-					<el-input type="password" v-model="form.password" clearable show-password></el-input>
-				</el-form-item>
-				<el-form-item label="确认密码" prop="password2">
-					<el-input type="password" v-model="form.password2" clearable show-password></el-input>
-				</el-form-item>
-			</template>
-			<el-form-item label="昵称" prop="nickName">
-				<el-input v-model="form.nickName" placeholder="用于登录系统" clearable></el-input>
-			</el-form-item>
-			<el-form-item label="姓名" prop="realName">
-				<el-input v-model="form.realName" placeholder="请输入完整的真实姓名" clearable></el-input>
-			</el-form-item>
-			<el-form-item label="性别" prop="sex">
-				<el-radio-group v-model="form.sex">
-					<el-radio label="男">男</el-radio>
-					<el-radio label="女">女</el-radio>
-				</el-radio-group>
-			</el-form-item>
-			<el-form-item label="状态" prop="status">
-				<el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
-			</el-form-item>
-			<el-form-item label="所属角色" prop="roleIds">
-				<el-select v-model="form.roleIds" placeholder="请选择分配角色" multiple clearable style="width: 100%;">
-					<el-option v-for="item in roles" :key="item.id" :label="item.name" :value="item.id">
-						<span style="float: left">{{ item.name }}</span>
-						<span
-							style="float: right;color: var(--el-text-color-secondary); font-size: 13px;">{{ item.alias }}</span>
-					</el-option>
-				</el-select>
-			</el-form-item>
-		</el-form>
-		<template #footer>
-			<el-button @click="visible=false">取 消</el-button>
-			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
-		</template>
-	</el-dialog>
-</template>
-
-<script>
-export default {
-	emits: ['success', 'closed'],
-	data() {
-		return {
-			mode: "add",
-			titleMap: {
-				add: '新增用户',
-				edit: '编辑用户',
-				show: '查看'
-			},
-			visible: false,
-			isSaveing: false,
-			//表单数据
-			form: {
-				id: "",
-				username: "",
-				password: "",
-				nickName: "",
-				avatar: "",
-				realName: "",
-				group: "",
-				sex: "男",
-				status: 1,
-				roleIds: []
-			},
-			//验证规则
-			rules: {
-				avatar: [
-					{required: true, message: '请上传头像'}
-				],
-				username: [
-					{required: true, message: '请输入登录账号'}
-				],
-				password: [
-					{required: true, message: '请输入登录密码'},
-					{
-						validator: (rule, value, callback) => {
-							if (this.form.password2 !== '') {
-								this.$refs.dialogForm.validateField('password2');
-							}
-							callback();
-						}
-					}
-				],
-				password2: [
-					{required: true, message: '请再次输入密码'},
-					{
-						validator: (rule, value, callback) => {
-							if (value !== this.form.password) {
-								callback(new Error('两次输入密码不一致!'));
-							} else {
-								callback();
-							}
-						}
-					}
-				],
-				group: [
-					{required: true, message: '请选择所属角色'}
-				]
-			},
-			//所需数据选项
-			roles: []
-		}
-	},
-	mounted() {
-		this.loadRoles()
-	},
-	methods: {
-		open(mode = 'add') {
-			this.mode = mode;
-			this.visible = true;
-			return this
-		},
-		async loadRoles() {
-			let res = await this.$API.role.listAll();
-			this.roles = res.data;
-		},
-		//表单提交方法
-		submit() {
-			this.$refs.dialogForm.validate(async (valid) => {
-				if (valid) {
-					this.isSaveing = true;
-					var res = await this.$API.user.save(this.form);
-					this.isSaveing = false;
-					if (res.code == 200) {
-						this.$emit('success', this.form, this.mode)
-						this.visible = false;
-						this.$message.success("操作成功")
-					} else {
-						this.$alert(res.message, "提示", {type: 'error'})
-					}
-				} else {
-					return false;
-				}
-			})
-		},
-		//表单注入数据
-		async setData(data) {
-			this.form = data
-			let res = await this.$API.user.roleIds(data.id);
-			this.form.roleIds = res.data;
-		}
-	}
-}
-</script>
-
-<style>
-</style>