142 lines
5.0 KiB
Vue
142 lines
5.0 KiB
Vue
<template>
|
||
<!-- 基础信息弹出框 -->
|
||
<el-dialog :model-value="dialogVisible" :title="title" v-bind="dialogSmall" @close="handleCancel" width="500" draggable>
|
||
<div>
|
||
<el-form :model="data"
|
||
ref='formRuleRef'
|
||
:rules='rules'
|
||
>
|
||
<el-form-item label="用户名" prop='name' :label-width="100">
|
||
<el-input v-model="data.name" placeholder="请输入用户名" autocomplete="off" />
|
||
</el-form-item>
|
||
<el-form-item label="登录名" prop='loginName' :label-width="100">
|
||
<el-input v-model="data.loginName" placeholder="请输入登录名" autocomplete="off" />
|
||
</el-form-item>
|
||
<el-form-item label="密码" prop='password' :label-width="100">
|
||
<el-input type="password" v-model="data.password" placeholder="请输入密码" autocomplete="off" />
|
||
</el-form-item>
|
||
<el-form-item label="手机号码" prop='phone' :label-width="100">
|
||
<el-input v-model="data.phone" placeholder="请输入手机号码" autocomplete="off" />
|
||
</el-form-item>
|
||
<el-form-item label="邮箱地址" prop='email' :label-width="100">
|
||
<el-input v-model="data.email" placeholder="请输入邮箱地址" autocomplete="off" />
|
||
</el-form-item>
|
||
<el-form-item label="最后一次登录时间" prop='loginTime' :label-width="100">
|
||
<el-input v-model="data.loginTime" placeholder="请输入最后一次登录时间" autocomplete="off" />
|
||
</el-form-item>
|
||
<el-form-item label="登录错误次数" prop='loginErrorTimes' :label-width="100">
|
||
<el-input v-model="data.loginErrorTimes" placeholder="请输入登录错误次数" autocomplete="off" />
|
||
</el-form-item>
|
||
<el-form-item label="用户密码错误锁定时间" prop='lockTime' :label-width="100">
|
||
<el-input v-model="data.lockTime" placeholder="请输入用户密码错误锁定时间" autocomplete="off" />
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button @click="handleCancel">取消</el-button>
|
||
<el-button type="primary" @click="handleOK">
|
||
保存
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref,computed } from 'vue'
|
||
import {dialogSmall} from '@/utils/elementBind'
|
||
import { FormInstance,FormItemRule } from 'element-plus'
|
||
import {
|
||
addUser,
|
||
editUser,
|
||
} from '@/api/user/user'
|
||
|
||
const {dialogVisible,title,data,openType,getTableList} = defineProps<{
|
||
dialogVisible:boolean;
|
||
title:string;
|
||
openType:string;
|
||
getTableList:Function;
|
||
data:{
|
||
id?: string; //用户ID，作为唯一标识
|
||
name: string; //用户名(别名)
|
||
loginName: string;//登录名
|
||
password: string; //密码
|
||
phone?: string; //手机号
|
||
email?: string; //邮箱
|
||
loginTime?: string;//最后一次登录时间
|
||
loginErrorTimes: number;//登录错误次数
|
||
lockTime?: string; //用户密码错误锁定时间
|
||
}
|
||
}>();
|
||
|
||
//定义规则
|
||
const formRuleRef = ref<FormInstance>()
|
||
//定义校验规则
|
||
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
|
||
name: [{ required: true, message: '名称必填！', trigger: 'blur' }],
|
||
loginName: [{ required: true, message: '登录名必填！', trigger: 'blur' }],
|
||
password: [{ required: true, message: '密码必填！', trigger: 'blur' }],
|
||
loginErrorTimes: [{ required: true, message: '登录错误次数必填！', trigger: 'blur' }],
|
||
})
|
||
// const value = computed({
|
||
// get: () => data.status === 1,
|
||
// set: (value: boolean) => data.status = value ? 1 : 0
|
||
// })
|
||
|
||
const emit = defineEmits<{
|
||
(e:'update:visible',value:boolean):void;
|
||
}>();
|
||
|
||
const handleCancel = () => {
|
||
emit('update:visible',false)
|
||
}
|
||
|
||
const handleOK = () => {
|
||
|
||
ElMessage.info('用户数据提交')
|
||
try {
|
||
formRuleRef.value?.validate((valid: boolean) => {
|
||
if (valid) {
|
||
// 将表单数据转为json,发送到后端
|
||
// let confirmFormData = JSON.parse(JSON.stringify(form.value))
|
||
// console.log(confirmFormData)
|
||
if(openType === "add")
|
||
{
|
||
addUser(data).then(res => {
|
||
if(res.code === "200")
|
||
{
|
||
ElMessage.success(res.message)
|
||
getTableList()
|
||
}
|
||
else
|
||
ElMessage.error(res.message)
|
||
})
|
||
}
|
||
|
||
if(openType === "edit")
|
||
{
|
||
editUser(data).then(res => {
|
||
if(res.code === "200")
|
||
{
|
||
ElMessage.success(res.message)
|
||
getTableList()
|
||
}
|
||
else
|
||
ElMessage.error(res.message)
|
||
})
|
||
}
|
||
|
||
emit('update:visible',false)
|
||
} else {
|
||
ElMessage.error('表单验证失败！')
|
||
|
||
}
|
||
|
||
})
|
||
} catch (error) {
|
||
console.error('验证过程中发生错误', error)
|
||
}
|
||
}
|
||
</script> |