189 lines
7.3 KiB
Vue
189 lines
7.3 KiB
Vue
|
<template>
|
||
|
|
<el-dialog class="cn-operate-dialog" v-model="dialogVisible" :title="title">
|
||
|
|
<el-scrollbar>
|
||
|
|
<el-form :inline="true" :model="form" label-width="120px" :rules="rules">
|
||
|
|
<el-form-item label="用户名" prop="name">
|
||
|
|
<el-input v-model="form.name" placeholder="请输入昵称" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="登录名" prop="loginName">
|
||
|
|
<el-input v-model="form.loginName" placeholder="请输入登录名" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="默认密码" prop="password">
|
||
|
|
<el-input v-model="form.password" placeholder="请输入密码" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="权限类型" prop="type">
|
||
|
|
<el-select
|
||
|
|
style="width: 100%"
|
||
|
|
v-model="form.type"
|
||
|
|
@change="changeValue"
|
||
|
|
disabled
|
||
|
|
placeholder="请选择权限类型"
|
||
|
|
>
|
||
|
|
<el-option
|
||
|
|
v-for="(item, index) in UserTypeOption"
|
||
|
|
:label="item.label"
|
||
|
|
:value="item.value"
|
||
|
|
:key="index"
|
||
|
|
></el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="用户类型" prop="casualUser">
|
||
|
|
<el-select style="width: 100%" v-model="form.casualUser" placeholder="请选择权限类型">
|
||
|
|
<el-option
|
||
|
|
v-for="(item, index) in TypeOptions"
|
||
|
|
:label="item.label"
|
||
|
|
:value="item.value"
|
||
|
|
:key="index"
|
||
|
|
></el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="所属部门" prop="deptName">
|
||
|
|
<Area style="width: 100%" v-model="form.deptName" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="角色" prop="role">
|
||
|
|
<el-select style="width: 100%" v-model="form.role" placeholder="请选择角色">
|
||
|
|
<el-option
|
||
|
|
v-for="(item, index) in roleOptions"
|
||
|
|
:label="item.label"
|
||
|
|
:value="item.value"
|
||
|
|
:key="index"
|
||
|
|
></el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
<el-form-item label="手机号" prop="phone">
|
||
|
|
<el-input v-model="form.phone" placeholder="请输入手机号" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="邮箱" prop="email">
|
||
|
|
<el-input v-model="form.email" placeholder="请输入描述" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="起始IP" prop="limitIpStart">
|
||
|
|
<el-input v-model="form.limitIpStart" placeholder="请输入描述" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="结束IP" prop="limitIpEnd">
|
||
|
|
<el-input v-model="form.limitIpEnd" placeholder="请输入描述" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="时间段" prop="limitTime">
|
||
|
|
<el-time-picker
|
||
|
|
v-model="form.limitTime"
|
||
|
|
is-range
|
||
|
|
arrow-control
|
||
|
|
range-separator="-"
|
||
|
|
start-placeholder="开始时间"
|
||
|
|
end-placeholder="结束时间"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="短信通知" prop="smsNotice">
|
||
|
|
<el-radio-group v-model="form.smsNotice" size="mini">
|
||
|
|
<el-radio-button :label="0">是</el-radio-button>
|
||
|
|
<el-radio-button :label="1">否</el-radio-button>
|
||
|
|
</el-radio-group>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="邮件通知" prop="emailNotice">
|
||
|
|
<el-radio-group v-model="form.emailNotice" size="mini">
|
||
|
|
<el-radio-button :label="0">是</el-radio-button>
|
||
|
|
<el-radio-button :label="1">否</el-radio-button>
|
||
|
|
</el-radio-group>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="用户ID">
|
||
|
|
<div style="display: flex; width: 100%">
|
||
|
|
<el-radio-group v-model="useId" size="mini">
|
||
|
|
<el-radio-button :label="1">是</el-radio-button>
|
||
|
|
<el-radio-button :label="0">否</el-radio-button>
|
||
|
|
</el-radio-group>
|
||
|
|
<el-input
|
||
|
|
v-model="form.id"
|
||
|
|
placeholder="请输入用户id"
|
||
|
|
v-if="useId"
|
||
|
|
style="flex: 1"
|
||
|
|
class="ml10"
|
||
|
|
></el-input>
|
||
|
|
</div>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</el-scrollbar>
|
||
|
|
|
||
|
|
<template #footer>
|
||
|
|
<span class="dialog-footer">
|
||
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||
|
|
<el-button type="primary" @click="submit">确认</el-button>
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { ref, inject } from 'vue'
|
||
|
|
import { reactive } from 'vue'
|
||
|
|
import TableStore from '@/utils/tableStore'
|
||
|
|
import { ElMessage } from 'element-plus'
|
||
|
|
import { add, update } from '@/api/user-boot/role'
|
||
|
|
import { useAdminInfo } from '@/stores/adminInfo'
|
||
|
|
import Area from '@/components/form/area/index.vue'
|
||
|
|
|
||
|
|
const adminInfo = useAdminInfo()
|
||
|
|
const tableStore = inject('tableStore') as TableStore
|
||
|
|
// do not use same name with ref
|
||
|
|
const form = reactive({
|
||
|
|
id: '',
|
||
|
|
name: '',
|
||
|
|
password: '',
|
||
|
|
email: '',
|
||
|
|
limitIpStart: '',
|
||
|
|
deptId: '',
|
||
|
|
deptName: '',
|
||
|
|
casualUser: 1,
|
||
|
|
loginName: '',
|
||
|
|
phone: '',
|
||
|
|
limitIpEnd: '',
|
||
|
|
limitTime: '',
|
||
|
|
role: [],
|
||
|
|
smsNotice: 0,
|
||
|
|
emailNotice: 0,
|
||
|
|
type: undefined
|
||
|
|
})
|
||
|
|
const rules = {
|
||
|
|
name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
|
||
|
|
code: [{ required: true, message: '角色编码不能为空', trigger: 'blur' }]
|
||
|
|
}
|
||
|
|
const UserTypeOption = [
|
||
|
|
{ label: '管理员', value: 1 },
|
||
|
|
{ label: '普通用户', value: 2 }
|
||
|
|
]
|
||
|
|
const TypeOptions = [
|
||
|
|
{ label: '临时用户', value: 0 },
|
||
|
|
{ label: '长期用户', value: 1 }
|
||
|
|
]
|
||
|
|
const useId = ref(1)
|
||
|
|
const roleOptions: treeData = []
|
||
|
|
const queryRole = () => {}
|
||
|
|
const dialogVisible = ref(false)
|
||
|
|
const title = ref('新增菜单')
|
||
|
|
const open = (text: string, data?: anyObj) => {
|
||
|
|
title.value = text
|
||
|
|
dialogVisible.value = true
|
||
|
|
if (data) {
|
||
|
|
for (let key in form) {
|
||
|
|
form[key] = data[key]
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
for (let key in form) {
|
||
|
|
form[key] = ''
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const submit = async () => {
|
||
|
|
if (form.id) {
|
||
|
|
await update(form)
|
||
|
|
} else {
|
||
|
|
form.type = adminInfo.$state.userType + 1
|
||
|
|
await add(form)
|
||
|
|
}
|
||
|
|
ElMessage.success('保存成功')
|
||
|
|
tableStore.index()
|
||
|
|
dialogVisible.value = false
|
||
|
|
}
|
||
|
|
|
||
|
|
const changeValue = () => {}
|
||
|
|
defineExpose({ open })
|
||
|
|
</script>
|