aizuda-web-vue3/src/views/setting/user/reset-pwd.vue

<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 { 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>