120 lines
3.5 KiB
Vue
120 lines
3.5 KiB
Vue
<script lang="ts" setup>
|
|
import { ref } from 'vue';
|
|
import ReCol from '@/components/MyCol';
|
|
import { formRules } from '../utils/rule';
|
|
import { FormProps } from '../utils/types';
|
|
import { usePublicHooks } from '../../hooks';
|
|
|
|
const props = withDefaults(defineProps<FormProps>(), {
|
|
formInline: () => ({
|
|
title: '新增',
|
|
higherDeptOptions: [],
|
|
parentId: 0,
|
|
nickname: '',
|
|
username: '',
|
|
password: '',
|
|
phone: '',
|
|
email: '',
|
|
sex: '',
|
|
status: 1,
|
|
remark: '',
|
|
}),
|
|
});
|
|
|
|
const sexOptions = [
|
|
{
|
|
value: 0,
|
|
label: '男',
|
|
},
|
|
{
|
|
value: 1,
|
|
label: '女',
|
|
},
|
|
];
|
|
const ruleFormRef = ref();
|
|
const { switchStyle } = usePublicHooks();
|
|
const newFormInline = ref(props.formInline);
|
|
|
|
function getRef() {
|
|
return ruleFormRef.value;
|
|
}
|
|
|
|
defineExpose({ getRef });
|
|
</script>
|
|
|
|
<template>
|
|
<el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="82px">
|
|
<el-row :gutter="30">
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item label="用户昵称" prop="nickname">
|
|
<el-input v-model="newFormInline.nickname" clearable placeholder="请输入用户昵称" />
|
|
</el-form-item>
|
|
</re-col>
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item label="用户名称" prop="username">
|
|
<el-input v-model="newFormInline.username" clearable placeholder="请输入用户名称" />
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<re-col v-if="newFormInline.title === '新增'" :sm="24" :value="12" :xs="24">
|
|
<el-form-item label="用户密码" prop="password">
|
|
<el-input v-model="newFormInline.password" clearable placeholder="请输入用户密码" />
|
|
</el-form-item>
|
|
</re-col>
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item label="手机号" prop="phone">
|
|
<el-input v-model="newFormInline.phone" clearable placeholder="请输入手机号" />
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item label="邮箱" prop="email">
|
|
<el-input v-model="newFormInline.email" clearable placeholder="请输入邮箱" />
|
|
</el-form-item>
|
|
</re-col>
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item label="用户性别">
|
|
<el-select v-model="newFormInline.sex" class="w-full" clearable placeholder="请选择用户性别">
|
|
<el-option v-for="(item, index) in sexOptions" :key="index" :label="item.label" :value="item.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item label="归属部门">
|
|
<el-cascader
|
|
v-model="newFormInline.parentId"
|
|
:options="newFormInline.higherDeptOptions"
|
|
:props="{
|
|
value: 'id',
|
|
label: 'name',
|
|
emitPath: false,
|
|
checkStrictly: true,
|
|
}"
|
|
class="w-full"
|
|
clearable
|
|
filterable
|
|
placeholder="请选择归属部门"
|
|
>
|
|
<template #default="{ node, data }">
|
|
<span>{{ data.name }}</span>
|
|
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
|
</template>
|
|
</el-cascader>
|
|
</el-form-item>
|
|
</re-col>
|
|
<re-col v-if="newFormInline.title === '新增'" :sm="24" :value="12" :xs="24">
|
|
<el-form-item label="用户状态">
|
|
<el-switch v-model="newFormInline.status" :active-value="1" :inactive-value="0" :style="switchStyle" active-text="启用" inactive-text="停用" inline-prompt />
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<re-col>
|
|
<el-form-item label="备注">
|
|
<el-input v-model="newFormInline.remark" placeholder="请输入备注信息" type="textarea" />
|
|
</el-form-item>
|
|
</re-col>
|
|
</el-row>
|
|
</el-form>
|
|
</template>
|