70 lines
2.2 KiB
Vue
70 lines
2.2 KiB
Vue
<template>
|
|
<!-- 基础信息弹出框 -->
|
|
<el-dialog :model-value="dialogVisible" :title="title" v-bind="dialogSmall" @close="handleCancel" width="500" draggable>
|
|
<div>
|
|
<el-form :model="data">
|
|
<el-form-item label="用户名" :label-width="100">
|
|
<el-input v-model="data.username" placeholder="请输入用户名" autocomplete="off" />
|
|
</el-form-item>
|
|
<el-form-item label="真实姓名" :label-width="100">
|
|
<el-input v-model="data.realname" placeholder="请输入真实姓名" autocomplete="off" />
|
|
</el-form-item>
|
|
<el-form-item label="密码" :label-width="100">
|
|
<el-input type="password" v-model="data.password" placeholder="请输入密码" autocomplete="off" />
|
|
</el-form-item>
|
|
<el-form-item label="用户角色" :label-width="100">
|
|
<el-input v-model="data.rolename" placeholder="请输入用户角色" autocomplete="off" />
|
|
</el-form-item>
|
|
<el-form-item label="用户状态" :label-width="100">
|
|
<el-switch
|
|
v-model=value
|
|
inline-prompt
|
|
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
|
|
active-text="启用"
|
|
inactive-text="禁用"
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button @click="handleCancel">取消</el-button>
|
|
<el-button type="primary" @click="handleCancel">
|
|
保存
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref,computed } from 'vue'
|
|
import {dialogSmall} from '@/utils/elementBind'
|
|
|
|
const {dialogVisible,title,data} = defineProps<{
|
|
dialogVisible:boolean;
|
|
title:string;
|
|
data:{
|
|
username:string;
|
|
password:string;
|
|
realname:string;
|
|
status:number;
|
|
rolename:string;
|
|
}
|
|
}>();
|
|
|
|
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)
|
|
}
|
|
|
|
</script> |