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