master
parent
d32b16ac11
commit
bdb40f8249
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<Page class="dict-page">
|
||||
<DictCategory @search-dict="searchDict"/>
|
||||
<ElDivider direction="vertical"/>
|
||||
<DictItem ref="dictItem"/>
|
||||
</Page>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import Page from '@/components/page/Page.vue'
|
||||
import DictCategory from '@/pages/sys/dict/DictCategory.vue'
|
||||
import DictItem from '@/pages/sys/dict/DictItem.vue'
|
||||
|
||||
const dictItemIns = useTemplateRef<InstanceType<typeof DictItem>>('dictItem')
|
||||
|
||||
function searchDict(data: DictTypes.SearchDictResult) {
|
||||
dictItemIns.value?.reload(data)
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="stylus" scoped>
|
||||
.dict-page {
|
||||
display flex
|
||||
justify-content space-between
|
||||
flex-direction: row;
|
||||
gap: 50px;
|
||||
|
||||
& > div:not(:nth-child(2)) {
|
||||
width 50%
|
||||
box-sizing border-box
|
||||
}
|
||||
|
||||
& > div:nth-child(2) {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<template>
|
||||
<ElDialog v-model="showDialog"
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
width="25vw">
|
||||
<ElForm :model="dictFormData"
|
||||
class="sys_dict-form"
|
||||
label-width="auto">
|
||||
<ElFormItem label="字典标识">
|
||||
<ElInput
|
||||
v-model="dictFormData.dictKey"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="字典标识"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="字典名称">
|
||||
<ElInput
|
||||
v-model="dictFormData.dictName"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="字典名称"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="备注">
|
||||
<ElInput
|
||||
v-model="dictFormData.memo"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="备注"/>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<template #footer>
|
||||
<ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
|
||||
<ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import DictApi from '@/pages/sys/dict/dict-api.ts'
|
||||
import Strings from '@/common/utils/strings.ts'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const emits = defineEmits([ 'editSucc' ])
|
||||
const showDialog = ref(false)
|
||||
const submiting = ref(false)
|
||||
const status = ref<'add' | 'view' | 'modify'>('add')
|
||||
const dictFormData = reactive<DictTypes.SearchDictResult>({})
|
||||
|
||||
function submitHandler() {
|
||||
if (status.value === 'view') return
|
||||
submiting.value = true
|
||||
if (dictFormData.id != null) {
|
||||
DictApi.modify(dictFormData)
|
||||
.then(() => {
|
||||
ElMessage.success('修改成功')
|
||||
emits('editSucc')
|
||||
showDialog.value = false
|
||||
})
|
||||
.finally(() => {
|
||||
submiting.value = false
|
||||
})
|
||||
} else {
|
||||
DictApi.add(dictFormData)
|
||||
.then(() => {
|
||||
ElMessage.success('添加成功')
|
||||
emits('editSucc')
|
||||
showDialog.value = false
|
||||
})
|
||||
.finally(() => {
|
||||
submiting.value = false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open(data: DictTypes.SearchDictResult = {}) {
|
||||
showDialog.value = true
|
||||
if (!Strings.isBlank(data.id)) {
|
||||
status.value = 'modify'
|
||||
DictApi.detail(data.id!)
|
||||
.then(res => {
|
||||
Object.assign(dictFormData, res.data)
|
||||
})
|
||||
} else {
|
||||
status.value = 'add'
|
||||
Object.assign(dictFormData, {})
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="stylus" scoped>
|
||||
.sys_dict-form {
|
||||
padding 20px
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,191 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="tool-bar">
|
||||
<ElForm inline @submit.prevent="paging">
|
||||
<ElFormItem>
|
||||
<ElInput
|
||||
v-model="searchForm.dictKey"
|
||||
placeholder="请选择左侧的字典"
|
||||
readonly/>
|
||||
</ElFormItem>
|
||||
<ElFormItem>
|
||||
<ElInput
|
||||
v-model="searchForm.txt"
|
||||
clearable
|
||||
placeholder="请输入要搜索的文字"
|
||||
@clear="reset"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem>
|
||||
<ElButton :disabled="Strings.isBlank(currentDict.dictKey)" :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
|
||||
<ElButton :disabled="Strings.isBlank(currentDict.dictKey)" :icon="elIcons.Plus" type="primary" @click="addHandler">新建</ElButton>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
</div>
|
||||
<ElTable v-loading="searching" :data="tableData"
|
||||
cell-class-name="table-cell"
|
||||
class="table-list"
|
||||
empty-text="暂无数据"
|
||||
header-row-class-name="table-header"
|
||||
row-key="id">
|
||||
<!-- <ElTableColumn label="字典 Id" prop="dictId"/> -->
|
||||
|
||||
<ElTableColumn label="字典标识" prop="dictKey"/>
|
||||
|
||||
<ElTableColumn label="值" prop="val"/>
|
||||
|
||||
<ElTableColumn label="显示文本" prop="txt"/>
|
||||
|
||||
<ElTableColumn label="排序" prop="sort"/>
|
||||
|
||||
<ElTableColumn label="备注" prop="memo"/>
|
||||
|
||||
<ElTableColumn label="操作" width="180">
|
||||
<template #default="scope">
|
||||
<div class="action-btn">
|
||||
<el-popconfirm
|
||||
cancel-button-text="否"
|
||||
cancel-button-type="primary"
|
||||
confirm-button-text="是"
|
||||
confirm-button-type="danger"
|
||||
placement="top"
|
||||
title="是否删除当前数据?"
|
||||
width="180"
|
||||
@confirm="delHandler(scope)">
|
||||
<template #reference>
|
||||
<ElButton :loading="deling" text type="danger">删除</ElButton>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<ElButton text type="primary" @click="modifyHandler(scope)">修改</ElButton>
|
||||
</div>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
</ElTable>
|
||||
<DictItemForm ref="dictItemForm" @edit-succ="paging"/>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import DictApi from '@/pages/sys/dict/dict-api.ts'
|
||||
import DictItemApi from '@/pages/sys/dict/dict-item-api.ts'
|
||||
import { elIcons } from '@/common/element/element.ts'
|
||||
import DictItemForm from '@/pages/sys/dict/DictItemForm.vue'
|
||||
import Strings from '@/common/utils/strings.ts'
|
||||
|
||||
const tableData = ref<DictItemTypes.SearchDictItemResult[]>([])
|
||||
const searchForm = reactive<DictItemTypes.SearchDictItemParam>({
|
||||
current: 1,
|
||||
size: 20,
|
||||
})
|
||||
const searching = ref(false)
|
||||
const deling = ref(false)
|
||||
const currentDict = reactive<DictTypes.SearchDictResult>({})
|
||||
const dictItemFormIns = useTemplateRef<InstanceType<typeof DictItemForm>>('dictItemForm')
|
||||
|
||||
function showDialog(data?: DictItemTypes.SearchDictItemResult) {
|
||||
dictItemFormIns.value?.open(data)
|
||||
}
|
||||
|
||||
function delHandler({row}: { row: DictItemTypes.SearchDictItemResult }) {
|
||||
deling.value = true
|
||||
DictItemApi.del([ row.id! ])
|
||||
.then(() => {
|
||||
ElMessage.success('删除成功')
|
||||
paging()
|
||||
})
|
||||
.finally(() => {
|
||||
deling.value = false
|
||||
})
|
||||
}
|
||||
|
||||
function modifyHandler({row}: { row: DictItemTypes.SearchDictItemResult }) {
|
||||
showDialog(row)
|
||||
}
|
||||
|
||||
function addHandler() {
|
||||
if (Strings.isBlank(searchForm.dictKey)) {
|
||||
ElMessage.error('请选择左侧的字典')
|
||||
return
|
||||
}
|
||||
showDialog({dictId: currentDict.id, dictKey: currentDict.dictKey})
|
||||
}
|
||||
|
||||
function reset() {
|
||||
searchForm.txt = ''
|
||||
paging()
|
||||
}
|
||||
|
||||
function paging() {
|
||||
if (Strings.isBlank(searchForm.dictKey)) {
|
||||
ElMessage.error('请选择左侧的字典')
|
||||
return
|
||||
}
|
||||
searching.value = true
|
||||
DictApi.obtainDictData(searchForm)
|
||||
.then(res => {
|
||||
tableData.value = res.data ?? []
|
||||
})
|
||||
.finally(() => {
|
||||
searching.value = false
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
reload(data: DictTypes.SearchDictResult) {
|
||||
searchForm.dictKey = data.dictKey
|
||||
Object.assign(currentDict, data)
|
||||
paging()
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="stylus" scoped>
|
||||
.table-list {
|
||||
flex 1;
|
||||
width 100%
|
||||
|
||||
:deep(.table-header) {
|
||||
color #454C59
|
||||
|
||||
th {
|
||||
background-color #EDF1F7
|
||||
font-weight 500
|
||||
position relative
|
||||
|
||||
& > div {
|
||||
display flex
|
||||
gap 5px
|
||||
align-items center
|
||||
}
|
||||
|
||||
&:not(:first-child) > div::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 1px;
|
||||
width: 1px;
|
||||
background-color: #D3D7DE;
|
||||
transform: translateY(-50%);
|
||||
content: "";
|
||||
height 50%
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.table-cell) {
|
||||
color #2F3540
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width 100%
|
||||
display flex
|
||||
flex-wrap wrap
|
||||
|
||||
& > button {
|
||||
margin 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tool-bar {
|
||||
display flex
|
||||
justify-content space-between
|
||||
margin 0 0 20px 0
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
<template>
|
||||
<ElDialog v-model="showDialog"
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
width="25vw">
|
||||
<ElForm :model="dictItemFormData"
|
||||
class="sys_dict_item-form"
|
||||
label-width="auto">
|
||||
<ElFormItem label="值">
|
||||
<ElInput
|
||||
v-model="dictItemFormData.val"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="值"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="文本">
|
||||
<ElInput
|
||||
v-model="dictItemFormData.txt"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="文本"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="排序">
|
||||
<ElInputNumber
|
||||
v-model="dictItemFormData.sort"
|
||||
:disabled="status === 'view'"
|
||||
:min="1"
|
||||
placeholder="排序"
|
||||
style="width: 100%"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="备注">
|
||||
<ElInput
|
||||
v-model="dictItemFormData.memo"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="备注"/>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<template #footer>
|
||||
<ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
|
||||
<ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import DictItemApi from '@/pages/sys/dict/dict-item-api.ts'
|
||||
import Strings from '@/common/utils/strings.ts'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const emits = defineEmits([ 'editSucc' ])
|
||||
const showDialog = ref(false)
|
||||
const submiting = ref(false)
|
||||
const status = ref<'add' | 'view' | 'modify'>('add')
|
||||
const dictItemFormData = reactive<DictItemTypes.SearchDictItemResult>({})
|
||||
|
||||
function submitHandler() {
|
||||
if (status.value === 'view') return
|
||||
submiting.value = true
|
||||
if (dictItemFormData.id != null) {
|
||||
DictItemApi.modify(dictItemFormData)
|
||||
.then(() => {
|
||||
ElMessage.success('修改成功')
|
||||
emits('editSucc')
|
||||
showDialog.value = false
|
||||
})
|
||||
.finally(() => {
|
||||
submiting.value = false
|
||||
})
|
||||
} else {
|
||||
if (Strings.isBlank(dictItemFormData.dictId) || Strings.isBlank(dictItemFormData.dictKey)) {
|
||||
ElMessage.error('未指定字典')
|
||||
return
|
||||
}
|
||||
DictItemApi.add(dictItemFormData)
|
||||
.then(() => {
|
||||
ElMessage.success('添加成功')
|
||||
emits('editSucc')
|
||||
showDialog.value = false
|
||||
})
|
||||
.finally(() => {
|
||||
submiting.value = false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open(data: DictItemTypes.SearchDictItemResult = {}) {
|
||||
showDialog.value = true
|
||||
if (!Strings.isBlank(data.id)) {
|
||||
status.value = 'modify'
|
||||
DictItemApi.detail(data.id!)
|
||||
.then(res => {
|
||||
Object.assign(dictItemFormData, res.data)
|
||||
})
|
||||
} else {
|
||||
status.value = 'add'
|
||||
Object.assign(dictItemFormData, data)
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="stylus" scoped>
|
||||
.sys_dict_item-form {
|
||||
padding 20px
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import {
|
||||
get,
|
||||
post,
|
||||
} from '@/common/utils/http-util.ts'
|
||||
|
||||
export default {
|
||||
paging(data: DictTypes.SearchDictParam) {
|
||||
return get<G.PageResult<DictTypes.SearchDictResult>>('/dict/paging', data)
|
||||
},
|
||||
detail(id: string) {
|
||||
return get<DictTypes.SearchDictResult>('/dict/detail', {id})
|
||||
},
|
||||
obtainDictData(data: DictItemTypes.SearchDictItemParam) {
|
||||
return get<DictItemTypes.SearchDictItemResult[]>('/dict/dict_data', data)
|
||||
},
|
||||
add(data: DictTypes.AddDictParam) {
|
||||
return post('/dict/add', data)
|
||||
},
|
||||
modify(data: DictTypes.ModifyDictParam) {
|
||||
return post('/dict/modify', data)
|
||||
},
|
||||
del(ids: string[]) {
|
||||
return post('/dict/del', ids)
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import {
|
||||
get,
|
||||
post,
|
||||
} from '@/common/utils/http-util.ts'
|
||||
|
||||
export default {
|
||||
paging(data: DictItemTypes.SearchDictItemParam) {
|
||||
return get<G.PageResult<DictItemTypes.SearchDictItemResult>>('/dict_item/paging', data)
|
||||
},
|
||||
detail(id: string) {
|
||||
return get<DictItemTypes.SearchDictItemResult>('/dict_item/detail', {id})
|
||||
},
|
||||
add(data: DictItemTypes.AddDictItemParam) {
|
||||
return post('/dict_item/add', data)
|
||||
},
|
||||
modify(data: DictItemTypes.ModifyDictItemParam) {
|
||||
return post('/dict_item/modify', data)
|
||||
},
|
||||
del(ids: string[]) {
|
||||
return post('/dict_item/del', ids)
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
export {}
|
||||
declare global {
|
||||
namespace DictTypes {
|
||||
interface SearchDictParam extends G.PageParam {
|
||||
// Id
|
||||
id?: string
|
||||
// 字典标识
|
||||
dictKey?: string
|
||||
// 字典名称
|
||||
dictName?: string
|
||||
// 备注
|
||||
memo?: string
|
||||
}
|
||||
|
||||
interface SearchDictResult {
|
||||
// Id
|
||||
id?: string
|
||||
// 字典标识
|
||||
dictKey?: string
|
||||
// 字典名称
|
||||
dictName?: string
|
||||
// 备注
|
||||
memo?: string
|
||||
}
|
||||
|
||||
interface AddDictParam {
|
||||
// Id
|
||||
id?: string
|
||||
// 字典标识
|
||||
dictKey?: string
|
||||
// 字典名称
|
||||
dictName?: string
|
||||
// 备注
|
||||
memo?: string
|
||||
}
|
||||
|
||||
interface ModifyDictParam {
|
||||
// Id
|
||||
id?: string
|
||||
// 字典标识
|
||||
dictKey?: string
|
||||
// 字典名称
|
||||
dictName?: string
|
||||
// 备注
|
||||
memo?: string
|
||||
}
|
||||
}
|
||||
namespace DictItemTypes {
|
||||
interface SearchDictItemParam extends G.PageParam {
|
||||
// Id
|
||||
id?: string
|
||||
// 字典 Id
|
||||
dictId?: string
|
||||
// 字典标识
|
||||
dictKey?: string
|
||||
// 值
|
||||
val?: string
|
||||
// 显示文本
|
||||
txt?: string
|
||||
// 排序
|
||||
sort?: number
|
||||
// 备注
|
||||
memo?: string
|
||||
}
|
||||
|
||||
interface SearchDictItemResult {
|
||||
// Id
|
||||
id?: string
|
||||
// 字典 Id
|
||||
dictId?: string
|
||||
// 字典标识
|
||||
dictKey?: string
|
||||
// 值
|
||||
val?: string
|
||||
// 显示文本
|
||||
txt?: string
|
||||
// 排序
|
||||
sort?: number
|
||||
// 备注
|
||||
memo?: string
|
||||
}
|
||||
|
||||
interface AddDictItemParam {
|
||||
// Id
|
||||
id?: string
|
||||
// 字典 Id
|
||||
dictId?: string
|
||||
// 字典标识
|
||||
dictKey?: string
|
||||
// 值
|
||||
val?: string
|
||||
// 显示文本
|
||||
txt?: string
|
||||
// 排序
|
||||
sort?: number
|
||||
// 备注
|
||||
memo?: string
|
||||
}
|
||||
|
||||
interface ModifyDictItemParam {
|
||||
// Id
|
||||
id?: string
|
||||
// 字典 Id
|
||||
dictId?: string
|
||||
// 字典标识
|
||||
dictKey?: string
|
||||
// 值
|
||||
val?: string
|
||||
// 显示文本
|
||||
txt?: string
|
||||
// 排序
|
||||
sort?: number
|
||||
// 备注
|
||||
memo?: string
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export default {
|
||||
component: () => import('@/pages/sys/dict/Dict.vue'),
|
||||
} as RouterTypes.RouteConfig
|
||||
|
|
@ -0,0 +1,194 @@
|
|||
<template>
|
||||
<Page>
|
||||
<ElForm v-show="showSearchForm" inline @submit.prevent="paging">
|
||||
<ElFormItem label="角色代码">
|
||||
<ElInput
|
||||
v-model="searchForm.roleCode"
|
||||
placeholder="角色代码"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="角色名称">
|
||||
<ElInput
|
||||
v-model="searchForm.roleName"
|
||||
placeholder="角色名称"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="备注">
|
||||
<ElInput
|
||||
v-model="searchForm.memo"
|
||||
placeholder="备注"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem>
|
||||
<ElButton :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
|
||||
<ElButton :icon="elIcons.Refresh" :loading="searching" @click="reset">重置</ElButton>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<div class="tool-bar">
|
||||
<ElButton :icon="elIcons.Plus" type="primary" @click="addHandler">新建</ElButton>
|
||||
<ElButton :icon="elIcons.Filter" type="default" @click="showSearchForm = !showSearchForm"/>
|
||||
</div>
|
||||
<ElTable v-loading="searching" :data="tableData"
|
||||
cell-class-name="table-cell"
|
||||
class="table-list"
|
||||
empty-text="暂无数据"
|
||||
header-row-class-name="table-header"
|
||||
row-key="id">
|
||||
<ElTableColumn label="角色代码" prop="roleCode"/>
|
||||
|
||||
<ElTableColumn label="角色名称" prop="roleName"/>
|
||||
|
||||
<ElTableColumn label="备注" prop="memo"/>
|
||||
|
||||
<ElTableColumn label="操作" width="180">
|
||||
<template #default="scope">
|
||||
<div class="action-btn">
|
||||
<el-popconfirm
|
||||
v-if="scope.row.id != '1'"
|
||||
cancel-button-text="否"
|
||||
cancel-button-type="primary"
|
||||
confirm-button-text="是"
|
||||
confirm-button-type="danger"
|
||||
placement="top"
|
||||
title="是否删除当前数据?"
|
||||
width="180"
|
||||
@confirm="delHandler(scope)">
|
||||
<template #reference>
|
||||
<ElButton :loading="deling" text type="danger">删除</ElButton>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<ElButton text type="primary" @click="bindResHandler(scope)">资源</ElButton>
|
||||
<ElButton v-if="scope.row.id != '1'" text type="primary" @cl--ick="modifyHandler(scope)">修改</ElButton>
|
||||
</div>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
</ElTable>
|
||||
<RoleForm ref="roleForm" @edit-succ="paging"/>
|
||||
<BindRes ref="bindRes"/>
|
||||
</Page>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import RoleApi from '@/pages/sys/role/role-api.ts'
|
||||
import Page from '@/components/page/Page.vue'
|
||||
import { elIcons } from '@/common/element/element.ts'
|
||||
import RoleForm from '@/pages/sys/role/RoleForm.vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import BindRes from '@/pages/sys/role/BindRes.vue'
|
||||
|
||||
const tableData = ref<RoleTypes.SearchRoleResult[]>([])
|
||||
const searchForm = reactive<RoleTypes.SearchRoleParam>({
|
||||
current: 1,
|
||||
size: 20,
|
||||
})
|
||||
const searching = ref(false)
|
||||
const deling = ref(false)
|
||||
const showSearchForm = ref(true)
|
||||
const roleFormIns = useTemplateRef<InstanceType<typeof RoleForm>>('roleForm')
|
||||
const bindResIns = useTemplateRef<InstanceType<typeof BindRes>>('bindRes')
|
||||
|
||||
function showDialog(data?: RoleTypes.SearchRoleResult) {
|
||||
roleFormIns.value?.open(data)
|
||||
}
|
||||
|
||||
function delHandler({row}: { row: RoleTypes.SearchRoleResult }) {
|
||||
if (row.id == '1') {
|
||||
ElMessage.error('不能操作管理员')
|
||||
return
|
||||
}
|
||||
deling.value = true
|
||||
RoleApi.del([ row.id! ])
|
||||
.then(() => {
|
||||
ElMessage.success('删除成功')
|
||||
paging()
|
||||
})
|
||||
.finally(() => {
|
||||
deling.value = false
|
||||
})
|
||||
}
|
||||
|
||||
function bindResHandler({row}: { row: RoleTypes.SearchRoleResult }) {
|
||||
bindResIns.value?.open(row.id!)
|
||||
}
|
||||
|
||||
function modifyHandler({row}: { row: RoleTypes.SearchRoleResult }) {
|
||||
if (row.id == '1') {
|
||||
ElMessage.error('不能操作管理员')
|
||||
return
|
||||
}
|
||||
showDialog(row)
|
||||
}
|
||||
|
||||
function addHandler() {
|
||||
showDialog()
|
||||
}
|
||||
|
||||
function reset() {
|
||||
Object.assign(searchForm, {})
|
||||
paging()
|
||||
}
|
||||
|
||||
function paging() {
|
||||
searching.value = true
|
||||
RoleApi.paging(searchForm)
|
||||
.then(res => {
|
||||
tableData.value = res.data?.records ?? []
|
||||
})
|
||||
.finally(() => {
|
||||
searching.value = false
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
paging()
|
||||
})
|
||||
</script>
|
||||
<style lang="stylus" scoped>
|
||||
.table-list {
|
||||
flex 1;
|
||||
width 100%
|
||||
|
||||
:deep(.table-header) {
|
||||
color #454C59
|
||||
|
||||
th {
|
||||
background-color #EDF1F7
|
||||
font-weight 500
|
||||
position relative
|
||||
|
||||
& > div {
|
||||
display flex
|
||||
gap 5px
|
||||
align-items center
|
||||
}
|
||||
|
||||
&:not(:first-child) > div::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 1px;
|
||||
width: 1px;
|
||||
background-color: #D3D7DE;
|
||||
transform: translateY(-50%);
|
||||
content: "";
|
||||
height 50%
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.table-cell) {
|
||||
color #2F3540
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width 100%
|
||||
display flex
|
||||
flex-wrap wrap
|
||||
|
||||
& > button {
|
||||
margin 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tool-bar {
|
||||
display flex
|
||||
justify-content space-between
|
||||
margin 0 0 20px 0
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<template>
|
||||
<ElDialog v-model="showDialog"
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
width="25vw">
|
||||
<ElForm :model="roleFormData"
|
||||
class="sys_role-form"
|
||||
label-width="auto">
|
||||
<ElFormItem label="角色代码">
|
||||
<ElInput
|
||||
v-model="roleFormData.roleCode"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="角色代码"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="角色名称">
|
||||
<ElInput
|
||||
v-model="roleFormData.roleName"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="角色名称"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="备注">
|
||||
<ElInput
|
||||
v-model="roleFormData.memo"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="备注"/>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<template #footer>
|
||||
<ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
|
||||
<ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import RoleApi from '@/pages/sys/role/role-api.ts'
|
||||
import Strings from '@/common/utils/strings.ts'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const emits = defineEmits([ 'editSucc' ])
|
||||
const showDialog = ref(false)
|
||||
const submiting = ref(false)
|
||||
const status = ref<'add' | 'view' | 'modify'>('add')
|
||||
const roleFormData = reactive<RoleTypes.SearchRoleResult>({})
|
||||
|
||||
function submitHandler() {
|
||||
if (status.value === 'view') return
|
||||
submiting.value = true
|
||||
if (roleFormData.id != null) {
|
||||
RoleApi.modify(roleFormData)
|
||||
.then(() => {
|
||||
ElMessage.success('修改成功')
|
||||
emits('editSucc')
|
||||
showDialog.value = false
|
||||
})
|
||||
.finally(() => {
|
||||
submiting.value = false
|
||||
})
|
||||
} else {
|
||||
RoleApi.add(roleFormData)
|
||||
.then(() => {
|
||||
ElMessage.success('添加成功')
|
||||
emits('editSucc')
|
||||
showDialog.value = false
|
||||
})
|
||||
.finally(() => {
|
||||
submiting.value = false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open(data: RoleTypes.SearchRoleResult = {}) {
|
||||
showDialog.value = true
|
||||
if (!Strings.isBlank(data.id)) {
|
||||
status.value = 'modify'
|
||||
RoleApi.detail(data.id!)
|
||||
.then(res => {
|
||||
Object.assign(roleFormData, res.data)
|
||||
})
|
||||
} else {
|
||||
status.value = 'add'
|
||||
Object.assign(roleFormData, {})
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="stylus" scoped>
|
||||
.sys_role-form {
|
||||
padding 20px
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export default {
|
||||
component: () => import('@/pages/sys/role/Role.vue'),
|
||||
} as RouterTypes.RouteConfig
|
||||
Loading…
Reference in New Issue