|
|
|
@ -5,6 +5,8 @@ import { onMounted, reactive, ref } from 'vue' |
|
|
|
import ConfirmBox from '@/components/ConfirmBox.vue' |
|
|
|
import Snackbar from '@/components/Snackbar.vue' |
|
|
|
import DataTable from '@/components/DataTable.vue' |
|
|
|
import CardBox from '@/components/CardBox.vue' |
|
|
|
import type { CustomResponse } from '@/common/interface' |
|
|
|
|
|
|
|
interface FormInfo { |
|
|
|
id: number |
|
|
|
@ -12,6 +14,7 @@ interface FormInfo { |
|
|
|
password: string |
|
|
|
role_id: number |
|
|
|
group_id: number |
|
|
|
account_type: number |
|
|
|
status: number |
|
|
|
} |
|
|
|
|
|
|
|
@ -20,6 +23,7 @@ const data = reactive({ |
|
|
|
{ title: 'ID', key: 'id' }, |
|
|
|
{ title: '账号', key: 'username' }, |
|
|
|
{ title: '角色', key: 'role_name' }, |
|
|
|
{ title: '类型', key: 'account_type' }, |
|
|
|
{ title: '所属组', key: 'group_name' }, |
|
|
|
{ title: '状态', key: 'status' }, |
|
|
|
{ title: '创建时间', key: 'created_at' }, |
|
|
|
@ -29,6 +33,12 @@ const data = reactive({ |
|
|
|
options: { |
|
|
|
roles: [] as any[], |
|
|
|
groups: [] as any[], |
|
|
|
account_type: [ |
|
|
|
{ title: '请选择', value: 0 }, |
|
|
|
{ title: '管理员', value: 1 }, |
|
|
|
{ title: '小组长', value: 2 }, |
|
|
|
{ title: '组成员', value: 3 }, |
|
|
|
], |
|
|
|
}, |
|
|
|
form: {} as FormInfo, |
|
|
|
rules: { |
|
|
|
@ -36,23 +46,24 @@ const data = reactive({ |
|
|
|
password: [(v: any) => (v.length >= 6 && v.length <= 20) || '密码字符在6-20之间'], |
|
|
|
roles: [(v: any) => v > 0 || '请选择角色'], |
|
|
|
groups: [(v: any) => v > 0 || '请选择组'], |
|
|
|
account_type: [(v: any) => v > 0 || '请选择账号类型'], |
|
|
|
}, |
|
|
|
dialog: false, |
|
|
|
confirm: { show: false, msg: '确定要删除此记录吗' }, |
|
|
|
request: { method: 0, url: '' }, |
|
|
|
snackbar: { show: false, msg: '' }, |
|
|
|
page: { current: 1, last_page: 1 }, |
|
|
|
search: { username: '', group_id: 0 }, |
|
|
|
}) |
|
|
|
|
|
|
|
const getItems = async (page: number = 1) => { |
|
|
|
const params = { |
|
|
|
username: '', |
|
|
|
role_name: '', |
|
|
|
group_name: '', |
|
|
|
username: data.search.username, |
|
|
|
group_id: data.search.group_id, |
|
|
|
page: page, |
|
|
|
size: pageLimit, |
|
|
|
} |
|
|
|
const response = (await instance.post('/manager/list', params)).data |
|
|
|
const response: CustomResponse = (await instance.post('/manager/list', params)).data |
|
|
|
|
|
|
|
if (!response.code) { |
|
|
|
data.snackbar.show = true |
|
|
|
@ -71,7 +82,7 @@ const getRoles = async () => { |
|
|
|
page: 1, |
|
|
|
size: 100, |
|
|
|
} |
|
|
|
const response = (await instance.post('/role/list', params)).data |
|
|
|
const response: CustomResponse = (await instance.post('/role/list', params)).data |
|
|
|
|
|
|
|
if (!response.code) { |
|
|
|
data.snackbar.show = true |
|
|
|
@ -79,7 +90,7 @@ const getRoles = async () => { |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
data.options.roles = [{ title: '请选择', value: 0 }] |
|
|
|
data.options.roles = [{ title: '全部', value: 0 }] |
|
|
|
for (const item of response.data.data) { |
|
|
|
data.options.roles.push({ |
|
|
|
title: item.name, |
|
|
|
@ -95,7 +106,7 @@ const getGroups = async () => { |
|
|
|
page: 1, |
|
|
|
size: 100, |
|
|
|
} |
|
|
|
const response = (await instance.post('/system/groupList', params)).data |
|
|
|
const response: CustomResponse = (await instance.post('/system/groupList', params)).data |
|
|
|
|
|
|
|
if (!response.code) { |
|
|
|
data.snackbar.show = true |
|
|
|
@ -103,7 +114,7 @@ const getGroups = async () => { |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
data.options.groups = [{ title: '请选择', value: 0 }] |
|
|
|
data.options.groups = [{ title: '全部', value: 0 }] |
|
|
|
for (const item of response.data.data) { |
|
|
|
data.options.groups.push({ |
|
|
|
title: item.group_name, |
|
|
|
@ -114,7 +125,7 @@ const getGroups = async () => { |
|
|
|
|
|
|
|
const insertBox = (method: number) => { |
|
|
|
data.dialog = true |
|
|
|
data.form = { status: 1, role_id: 0, group_id: 0 } as FormInfo |
|
|
|
data.form = { status: 1, role_id: 0, group_id: 0, account_type: 0 } as FormInfo |
|
|
|
|
|
|
|
data.request.method = method |
|
|
|
data.request.url = '/manager/add' |
|
|
|
@ -140,7 +151,7 @@ const destoryBox = (method: number, item: any) => { |
|
|
|
const form = ref() |
|
|
|
const confirms = ref() |
|
|
|
const onSubmit = async () => { |
|
|
|
let params = { id: data.form.id } as FormInfo |
|
|
|
const params = { id: data.form.id } as FormInfo |
|
|
|
if (data.request.method < 2) { |
|
|
|
if (!(await form.value.validate()).valid) return |
|
|
|
|
|
|
|
@ -149,9 +160,10 @@ const onSubmit = async () => { |
|
|
|
params.role_id = data.form.role_id |
|
|
|
params.group_id = data.form.group_id |
|
|
|
params.status = data.form.status |
|
|
|
params.account_type = data.form.account_type |
|
|
|
} |
|
|
|
|
|
|
|
const response = (await instance.post(data.request.url, params)).data |
|
|
|
const response: CustomResponse = (await instance.post(data.request.url, params)).data |
|
|
|
|
|
|
|
data.snackbar.show = true |
|
|
|
data.snackbar.msg = response.msg |
|
|
|
@ -171,71 +183,109 @@ onMounted(() => { |
|
|
|
</script> |
|
|
|
|
|
|
|
<template> |
|
|
|
<v-card> |
|
|
|
<v-card-title> |
|
|
|
<v-row> |
|
|
|
<v-col cols="12" class="pb-0"> |
|
|
|
<v-btn color="primary" @click="insertBox(0)">添加</v-btn> |
|
|
|
</v-card-title> |
|
|
|
<v-card-text> |
|
|
|
<DataTable |
|
|
|
:headers="data.headers" |
|
|
|
:items="data.desserts" |
|
|
|
:page="data.page.current" |
|
|
|
:size="data.page.last_page" |
|
|
|
@get-items="getItems" |
|
|
|
> |
|
|
|
<template #item.status="{ value }"> |
|
|
|
<v-btn v-if="value === 1" color="green" variant="tonal" size="small">在职</v-btn> |
|
|
|
<v-btn v-if="value === 2" color="pink" variant="tonal" size="small">离职</v-btn> |
|
|
|
</template> |
|
|
|
|
|
|
|
<template #item.actions="{ item }"> |
|
|
|
<v-btn size="small" class="me-2" @click="changeBox(1, item)">编辑</v-btn> |
|
|
|
<v-btn color="pink" size="small" @click="destoryBox(2, item)">删除</v-btn> |
|
|
|
</template> |
|
|
|
</DataTable> |
|
|
|
</v-card-text> |
|
|
|
|
|
|
|
<!-- 编辑 --> |
|
|
|
<v-dialog v-model="data.dialog" width="600"> |
|
|
|
</v-col> |
|
|
|
|
|
|
|
<v-col cols="12"> |
|
|
|
<v-card> |
|
|
|
<v-card-title>信息</v-card-title> |
|
|
|
<v-toolbar class="px-2 pt-3"> |
|
|
|
<v-row> |
|
|
|
<v-col cols="3"> |
|
|
|
<v-text-field v-model="data.search.username" label="账号"></v-text-field> |
|
|
|
</v-col> |
|
|
|
<v-col cols="3"> |
|
|
|
<v-select label="所属组" v-model="data.search.group_id" :items="data.options.groups"></v-select> |
|
|
|
</v-col> |
|
|
|
<v-btn icon="mdi-magnify" variant="elevated" color="primary" class="mt-5 mr-4" @click="() => getItems()"></v-btn> |
|
|
|
</v-row> |
|
|
|
</v-toolbar> |
|
|
|
<v-card-text> |
|
|
|
<v-form ref="form"> |
|
|
|
<v-text-field |
|
|
|
label="账号" |
|
|
|
v-model="data.form.username" |
|
|
|
:rules="data.rules.username" |
|
|
|
:disabled="data.request.method == 1 ? true : false" |
|
|
|
></v-text-field> |
|
|
|
<v-text-field label="密码" v-model="data.form.password"></v-text-field> |
|
|
|
<v-select v-model="data.form.role_id" :items="data.options.roles" :rules="data.rules.roles"></v-select> |
|
|
|
<v-select v-model="data.form.group_id" :items="data.options.groups" :rules="data.rules.groups"></v-select> |
|
|
|
<v-switch |
|
|
|
:label="data.form.status == 1 ? '在职' : '离职'" |
|
|
|
v-model="data.form.status" |
|
|
|
:true-value="1" |
|
|
|
:false-value="2" |
|
|
|
inset |
|
|
|
color="primary" |
|
|
|
></v-switch> |
|
|
|
</v-form> |
|
|
|
<DataTable |
|
|
|
:headers="data.headers" |
|
|
|
:items="data.desserts" |
|
|
|
:page="data.page.current" |
|
|
|
:size="data.page.last_page" |
|
|
|
@get-items="getItems" |
|
|
|
> |
|
|
|
<template #item.account_type="{ value }"> |
|
|
|
<span v-for="v in data.options.account_type" :key="v.value"> |
|
|
|
<v-btn v-if="v.value == value" color="warning" variant="tonal" size="small">{{ v.title }}</v-btn> |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
|
|
|
|
<template #item.group_name="{ value }"> |
|
|
|
<span v-if="value == ''"> - </span> |
|
|
|
<v-btn v-else color="pink" variant="tonal" size="small">{{ value }}</v-btn> |
|
|
|
</template> |
|
|
|
|
|
|
|
<template #item.status="{ value }"> |
|
|
|
<v-btn v-if="value === 1" color="green" variant="tonal" size="small">在职</v-btn> |
|
|
|
<v-btn v-if="value === 2" color="pink" variant="tonal" size="small">离职</v-btn> |
|
|
|
</template> |
|
|
|
|
|
|
|
<template #item.actions="{ item }"> |
|
|
|
<v-btn size="small" class="me-2" @click="changeBox(1, item)">编辑</v-btn> |
|
|
|
<v-btn color="pink" size="small" @click="destoryBox(2, item)">删除</v-btn> |
|
|
|
</template> |
|
|
|
</DataTable> |
|
|
|
</v-card-text> |
|
|
|
<v-card-actions> |
|
|
|
<v-btn color="pink" @click="data.dialog = false">取消</v-btn> |
|
|
|
<v-btn color="primary" variant="flat" @click="onSubmit">确定</v-btn> |
|
|
|
</v-card-actions> |
|
|
|
|
|
|
|
<!-- 编辑 --> |
|
|
|
<v-dialog v-model="data.dialog" width="800"> |
|
|
|
<CardBox :title="data.request.method == 0 ? '添加' : '编辑'" @submit="onSubmit" @close="(v) => (data.dialog = v)"> |
|
|
|
<template #text> |
|
|
|
<v-form ref="form"> |
|
|
|
<v-text-field |
|
|
|
label="账号" |
|
|
|
v-model="data.form.username" |
|
|
|
:rules="data.rules.username" |
|
|
|
:disabled="data.request.method == 1 ? true : false" |
|
|
|
></v-text-field> |
|
|
|
<v-text-field label="密码" v-model="data.form.password"></v-text-field> |
|
|
|
<v-select |
|
|
|
label="角色" |
|
|
|
v-model="data.form.role_id" |
|
|
|
:items="data.options.roles" |
|
|
|
:rules="data.rules.roles" |
|
|
|
></v-select> |
|
|
|
<v-select |
|
|
|
label="账号类型" |
|
|
|
v-model="data.form.account_type" |
|
|
|
:items="data.options.account_type" |
|
|
|
:rules="data.rules.account_type" |
|
|
|
></v-select> |
|
|
|
<v-select |
|
|
|
label="所属组" |
|
|
|
v-model="data.form.group_id" |
|
|
|
:items="data.options.groups" |
|
|
|
:rules="data.rules.groups" |
|
|
|
></v-select> |
|
|
|
<v-switch |
|
|
|
:label="data.form.status == 1 ? '在职' : '离职'" |
|
|
|
v-model="data.form.status" |
|
|
|
:true-value="1" |
|
|
|
:false-value="2" |
|
|
|
inset |
|
|
|
color="primary" |
|
|
|
></v-switch> |
|
|
|
</v-form> |
|
|
|
</template> |
|
|
|
</CardBox> |
|
|
|
</v-dialog> |
|
|
|
|
|
|
|
<!-- 删除 --> |
|
|
|
<ConfirmBox |
|
|
|
ref="confirms" |
|
|
|
:show="data.confirm.show" |
|
|
|
:msg="data.confirm.msg" |
|
|
|
@on-sumbit="onSubmit" |
|
|
|
@show="(v) => (data.confirm.show = v)" |
|
|
|
/> |
|
|
|
|
|
|
|
<Snackbar :show="data.snackbar.show" :msg="data.snackbar.msg" @close="(v) => (data.snackbar.show = v)" /> |
|
|
|
</v-card> |
|
|
|
</v-dialog> |
|
|
|
|
|
|
|
<!-- 删除 --> |
|
|
|
<ConfirmBox |
|
|
|
ref="confirms" |
|
|
|
:show="data.confirm.show" |
|
|
|
:msg="data.confirm.msg" |
|
|
|
@on-sumbit="onSubmit" |
|
|
|
@show="(v) => (data.confirm.show = v)" |
|
|
|
/> |
|
|
|
|
|
|
|
<Snackbar :show="data.snackbar.show" :msg="data.snackbar.msg" @close="(v) => (data.snackbar.show = v)" /> |
|
|
|
</v-card> |
|
|
|
</v-col> |
|
|
|
</v-row> |
|
|
|
</template> |
|
|
|
|
sprint
5 months ago