feat: dict vxe
This commit is contained in:
xingyu4j
parent
22748c5aa8
commit
42eb550858
@ -2,105 +2,87 @@ import { reactive } from 'vue'
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
import { required } from '@/utils/formRules'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
|
||||
import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
|
||||
// 国际化
|
||||
const { t } = useI18n()
|
||||
// 表单校验
|
||||
export const dictDataRules = reactive({
|
||||
label: [required],
|
||||
title: [required],
|
||||
value: [required],
|
||||
sort: [required]
|
||||
})
|
||||
// crudSchemas
|
||||
export const crudSchemas = reactive<CrudSchema[]>([
|
||||
export const crudSchemas = reactive<VxeCrudSchema>({
|
||||
primaryKey: 'id',
|
||||
primaryType: 'seq',
|
||||
action: true,
|
||||
actionWidth: '140px',
|
||||
columns: [
|
||||
{
|
||||
label: t('common.index'),
|
||||
field: 'id',
|
||||
type: 'index',
|
||||
form: {
|
||||
show: false
|
||||
},
|
||||
detail: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '字典类型',
|
||||
title: '字典类型',
|
||||
field: 'dictType',
|
||||
table: {
|
||||
show: false
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
isTable: false,
|
||||
isForm: false
|
||||
},
|
||||
{
|
||||
label: '数据标签',
|
||||
title: '数据标签',
|
||||
field: 'label',
|
||||
search: {
|
||||
show: true
|
||||
}
|
||||
isSearch: true
|
||||
},
|
||||
{
|
||||
label: '数据键值',
|
||||
title: '数据键值',
|
||||
field: 'value'
|
||||
},
|
||||
{
|
||||
label: '颜色类型',
|
||||
title: '颜色类型',
|
||||
field: 'colorType',
|
||||
form: {
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: [
|
||||
{
|
||||
label: 'default',
|
||||
title: 'default',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
label: 'success',
|
||||
title: 'success',
|
||||
value: 'success'
|
||||
},
|
||||
{
|
||||
label: 'info',
|
||||
title: 'info',
|
||||
value: 'info'
|
||||
},
|
||||
{
|
||||
label: 'warning',
|
||||
title: 'warning',
|
||||
value: 'warning'
|
||||
},
|
||||
{
|
||||
label: 'danger',
|
||||
title: 'danger',
|
||||
value: 'danger'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
table: {
|
||||
show: false
|
||||
}
|
||||
isTable: false
|
||||
},
|
||||
{
|
||||
label: 'CSS Class',
|
||||
title: 'CSS Class',
|
||||
field: 'cssClass',
|
||||
table: {
|
||||
show: false
|
||||
}
|
||||
isTable: false
|
||||
},
|
||||
{
|
||||
label: '显示排序',
|
||||
title: '显示排序',
|
||||
field: 'sort',
|
||||
table: {
|
||||
show: false
|
||||
}
|
||||
isTable: false
|
||||
},
|
||||
{
|
||||
label: t('common.status'),
|
||||
title: t('common.status'),
|
||||
field: 'status',
|
||||
dictType: DICT_TYPE.COMMON_STATUS,
|
||||
dictClass: 'number'
|
||||
},
|
||||
{
|
||||
label: t('form.remark'),
|
||||
title: t('form.remark'),
|
||||
field: 'remark',
|
||||
form: {
|
||||
component: 'Input',
|
||||
@ -112,21 +94,8 @@ export const crudSchemas = reactive<CrudSchema[]>([
|
||||
span: 24
|
||||
}
|
||||
},
|
||||
table: {
|
||||
show: false
|
||||
isTable: false
|
||||
}
|
||||
},
|
||||
{
|
||||
label: t('table.action'),
|
||||
field: 'action',
|
||||
width: '180px',
|
||||
form: {
|
||||
show: false
|
||||
},
|
||||
detail: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
])
|
||||
|
||||
export const { allSchemas } = useCrudSchemas(crudSchemas)
|
||||
]
|
||||
})
|
||||
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
|
||||
|
||||
@ -2,75 +2,53 @@ import { reactive } from 'vue'
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
import { required } from '@/utils/formRules'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
|
||||
// 国际化
|
||||
const { t } = useI18n()
|
||||
import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
// 表单校验
|
||||
export const dictTypeRules = reactive({
|
||||
name: [required],
|
||||
type: [required]
|
||||
})
|
||||
// 新增 + 修改
|
||||
const crudSchemas = reactive<CrudSchema[]>([
|
||||
const crudSchemas = reactive<VxeCrudSchema>({
|
||||
primaryKey: 'id',
|
||||
primaryType: 'seq',
|
||||
action: true,
|
||||
actionWidth: '140px',
|
||||
columns: [
|
||||
{
|
||||
label: t('common.index'),
|
||||
field: 'id',
|
||||
type: 'index',
|
||||
form: {
|
||||
show: false
|
||||
},
|
||||
detail: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '字典名称',
|
||||
title: '字典名称',
|
||||
field: 'name',
|
||||
search: {
|
||||
show: true
|
||||
}
|
||||
isSearch: true
|
||||
},
|
||||
{
|
||||
label: '字典类型',
|
||||
title: '字典类型',
|
||||
field: 'type',
|
||||
search: {
|
||||
show: true
|
||||
}
|
||||
isSearch: true
|
||||
},
|
||||
{
|
||||
label: t('common.status'),
|
||||
title: t('common.status'),
|
||||
field: 'status',
|
||||
dictType: DICT_TYPE.COMMON_STATUS,
|
||||
dictClass: 'number'
|
||||
dictClass: 'number',
|
||||
table: {
|
||||
width: 70
|
||||
}
|
||||
},
|
||||
{
|
||||
label: t('common.createTime'),
|
||||
title: t('common.createTime'),
|
||||
field: 'createTime',
|
||||
formatter: 'formatDate',
|
||||
isForm: false,
|
||||
table: {
|
||||
show: false
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
},
|
||||
detail: {
|
||||
show: false
|
||||
},
|
||||
search: {
|
||||
show: true,
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
type: 'datetimerange',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
defaultTime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]
|
||||
}
|
||||
width: 150
|
||||
}
|
||||
},
|
||||
{
|
||||
label: t('form.remark'),
|
||||
title: t('form.remark'),
|
||||
field: 'remark',
|
||||
table: {
|
||||
show: false
|
||||
},
|
||||
isTable: false,
|
||||
form: {
|
||||
componentProps: {
|
||||
type: 'textarea',
|
||||
@ -80,18 +58,7 @@ const crudSchemas = reactive<CrudSchema[]>([
|
||||
span: 24
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'action',
|
||||
width: '180px',
|
||||
label: t('table.action'),
|
||||
form: {
|
||||
show: false
|
||||
},
|
||||
detail: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
])
|
||||
|
||||
export const { allSchemas } = useCrudSchemas(crudSchemas)
|
||||
]
|
||||
})
|
||||
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
|
||||
|
||||
@ -6,13 +6,13 @@
|
||||
<span>字典分类</span>
|
||||
</div>
|
||||
</template>
|
||||
<Search
|
||||
:schema="DictTypeSchemas.allSchemas.searchSchema"
|
||||
@search="setTypeSearchParams"
|
||||
@reset="setTypeSearchParams"
|
||||
/>
|
||||
<!-- 操作工具栏 -->
|
||||
<div class="mb-10px">
|
||||
<vxe-grid
|
||||
ref="xTypeGrid"
|
||||
v-bind="typeGridOptions"
|
||||
@cell-click="cellClickEvent"
|
||||
class="xtable-scrollbar"
|
||||
>
|
||||
<template #toolbar_buttons>
|
||||
<XButton
|
||||
type="primary"
|
||||
preIcon="ep:zoom-in"
|
||||
@ -20,40 +20,22 @@
|
||||
v-hasPermi="['system:dict:create']"
|
||||
@click="handleTypeCreate()"
|
||||
/>
|
||||
</div>
|
||||
<!-- 列表 -->
|
||||
<Table
|
||||
@row-click="onClickType"
|
||||
:columns="DictTypeSchemas.allSchemas.tableColumns"
|
||||
:selection="false"
|
||||
:data="typeTableObject.tableList"
|
||||
:loading="typeTableObject.loading"
|
||||
:pagination="{
|
||||
total: typeTableObject.total
|
||||
}"
|
||||
:highlight-current-row="true"
|
||||
v-model:pageSize="typeTableObject.pageSize"
|
||||
v-model:currentPage="typeTableObject.currentPage"
|
||||
@register="typeRegister"
|
||||
>
|
||||
<template #status="{ row }">
|
||||
<DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<template #actionbtns_default="{ row }">
|
||||
<XTextButton
|
||||
preIcon="ep:edit"
|
||||
:title="t('action.edit')"
|
||||
v-hasPermi="['system:dict:update']"
|
||||
@click="handleTypeUpdate(row)"
|
||||
@click="handleTypeUpdate(row.id)"
|
||||
/>
|
||||
<XTextButton
|
||||
preIcon="ep:delete"
|
||||
:title="t('action.del')"
|
||||
v-hasPermi="['system:dict:delete']"
|
||||
@click="delTypeList(row.id, false)"
|
||||
@click="handleTypeDelete(row.id)"
|
||||
/>
|
||||
</template>
|
||||
</Table>
|
||||
</vxe-grid>
|
||||
</el-card>
|
||||
<el-card class="w-1/2 dict" style="margin-left: 10px" :gutter="12" shadow="hover">
|
||||
<template #header>
|
||||
@ -66,13 +48,9 @@
|
||||
<span>请从左侧选择</span>
|
||||
</div>
|
||||
<div v-if="tableTypeSelect">
|
||||
<Search
|
||||
:schema="DictDataSchemas.allSchemas.searchSchema"
|
||||
@search="setDataSearchParams"
|
||||
@reset="setDataSearchParams"
|
||||
/>
|
||||
<!-- 操作工具栏 -->
|
||||
<div class="mb-10px">
|
||||
<!-- 列表 -->
|
||||
<vxe-grid ref="xDataGrid" v-bind="dataGridOptions" class="xtable-scrollbar">
|
||||
<template #toolbar_buttons>
|
||||
<XButton
|
||||
type="primary"
|
||||
preIcon="ep:zoom-in"
|
||||
@ -80,37 +58,22 @@
|
||||
v-hasPermi="['system:dict:create']"
|
||||
@click="handleDataCreate()"
|
||||
/>
|
||||
</div>
|
||||
<Table
|
||||
:columns="DictDataSchemas.allSchemas.tableColumns"
|
||||
:selection="false"
|
||||
:data="dataTableObject.tableList"
|
||||
:loading="dataTableObject.loading"
|
||||
:pagination="{
|
||||
total: dataTableObject.total
|
||||
}"
|
||||
v-model:pageSize="dataTableObject.pageSize"
|
||||
v-model:currentPage="dataTableObject.currentPage"
|
||||
@register="dataRegister"
|
||||
>
|
||||
<template #status="{ row }">
|
||||
<DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<template #actionbtns_default="{ row }">
|
||||
<XTextButton
|
||||
v-hasPermi="['system:dict:update']"
|
||||
preIcon="ep:edit"
|
||||
:title="t('action.edit')"
|
||||
@click="handleDataUpdate(row)"
|
||||
@click="handleDataUpdate(row.id)"
|
||||
/>
|
||||
<XTextButton
|
||||
v-hasPermi="['system:dict:delete']"
|
||||
preIcon="ep:delete"
|
||||
:title="t('action.del')"
|
||||
@click="delDataList(row.id, false)"
|
||||
@click="handleDataDelete(row.id)"
|
||||
/>
|
||||
</template>
|
||||
</Table>
|
||||
</vxe-grid>
|
||||
</div>
|
||||
</el-card>
|
||||
<XModal id="dictModel" v-model="dialogVisible" :title="dialogTitle">
|
||||
@ -155,82 +118,81 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, unref, onMounted } from 'vue'
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
import { ref, unref, reactive } from 'vue'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { useMessage } from '@/hooks/web/useMessage'
|
||||
import { useVxeGrid } from '@/hooks/web/useVxeGrid'
|
||||
import { VxeGridInstance, VxeTableEvents } from 'vxe-table'
|
||||
import { FormExpose } from '@/components/Form'
|
||||
import { ElInput, ElTag } from 'element-plus'
|
||||
import { ElInput, ElTag, ElCard } from 'element-plus'
|
||||
import * as DictTypeSchemas from './dict.type'
|
||||
import * as DictDataSchemas from './dict.data'
|
||||
import { useTable } from '@/hooks/web/useTable'
|
||||
import { ElCard, ElMessage } from 'element-plus'
|
||||
import * as DictTypeApi from '@/api/system/dict/dict.type'
|
||||
import * as DictDataApi from '@/api/system/dict/dict.data'
|
||||
import { DictDataVO, DictTypeVO } from '@/api/system/dict/types'
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
// ========== 字典分类列表相关 ==========
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const xTypeGrid = ref<VxeGridInstance>() // 列表 Grid Ref
|
||||
const {
|
||||
register: typeRegister,
|
||||
tableObject: typeTableObject,
|
||||
methods: typeMethods
|
||||
} = useTable<DictTypeVO>({
|
||||
gridOptions: typeGridOptions,
|
||||
getList: typeGetList,
|
||||
deleteData: typeDeleteData
|
||||
} = useVxeGrid<DictTypeVO>({
|
||||
allSchemas: DictTypeSchemas.allSchemas,
|
||||
getListApi: DictTypeApi.getDictTypePageApi,
|
||||
delListApi: DictTypeApi.deleteDictTypeApi
|
||||
deleteApi: DictTypeApi.deleteDictTypeApi
|
||||
})
|
||||
|
||||
const xDataGrid = ref<VxeGridInstance>() // 列表 Grid Ref
|
||||
const queryParams = reactive({
|
||||
dictType: null
|
||||
})
|
||||
const {
|
||||
getList: getTypeList,
|
||||
setSearchParams: setTypeSearchParams,
|
||||
delList: delTypeList
|
||||
} = typeMethods
|
||||
gridOptions: dataGridOptions,
|
||||
getList: dataGetList,
|
||||
deleteData: dataDeleteData
|
||||
} = useVxeGrid<DictDataVO>({
|
||||
allSchemas: DictDataSchemas.allSchemas,
|
||||
queryParams: queryParams,
|
||||
getListApi: DictDataApi.getDictDataPageApi,
|
||||
deleteApi: DictDataApi.deleteDictDataApi
|
||||
})
|
||||
// ========== 字典分类列表相关 ==========
|
||||
const dictTypeValue = ref('')
|
||||
// 字典分类修改操作
|
||||
const handleTypeCreate = () => {
|
||||
dictTypeValue.value = ''
|
||||
setDialogTile('typeCreate')
|
||||
}
|
||||
const handleTypeUpdate = async (row: DictTypeVO) => {
|
||||
const handleTypeUpdate = async (rowId: number) => {
|
||||
setDialogTile('typeUpdate')
|
||||
// 设置数据
|
||||
const res = await DictTypeApi.getDictTypeApi(row.id)
|
||||
const res = await DictTypeApi.getDictTypeApi(rowId)
|
||||
dictTypeValue.value = res.type
|
||||
unref(typeFormRef)?.setValues(res)
|
||||
}
|
||||
|
||||
// ========== 字典数据列表相关 ==========
|
||||
const tableTypeSelect = ref(false)
|
||||
const {
|
||||
register: dataRegister,
|
||||
tableObject: dataTableObject,
|
||||
methods: dataMethods
|
||||
} = useTable<DictDataVO>({
|
||||
getListApi: DictDataApi.getDictDataPageApi,
|
||||
delListApi: DictDataApi.deleteDictDataApi
|
||||
})
|
||||
const {
|
||||
getList: getDataList,
|
||||
setSearchParams: setDataSearchParams,
|
||||
delList: delDataList
|
||||
} = dataMethods
|
||||
|
||||
// 字典数据修改操作
|
||||
const handleDataCreate = () => {
|
||||
setDialogTile('dataCreate')
|
||||
}
|
||||
const handleDataUpdate = async (row: DictDataVO) => {
|
||||
const handleDataUpdate = async (rowId: number) => {
|
||||
setDialogTile('dataUpdate')
|
||||
// 设置数据
|
||||
const res = await DictDataApi.getDictDataApi(row.id)
|
||||
const res = await DictDataApi.getDictDataApi(rowId)
|
||||
unref(dataFormRef)?.setValues(res)
|
||||
}
|
||||
// 字典分类点击行事件
|
||||
const parentType = ref('')
|
||||
const onClickType = async (data: { [key: string]: any }) => {
|
||||
const tableTypeSelect = ref(false)
|
||||
const cellClickEvent: VxeTableEvents.CellClick = async ({ row }) => {
|
||||
console.info(row['type'])
|
||||
tableTypeSelect.value = true
|
||||
dataTableObject.params = {
|
||||
dictType: data.type
|
||||
}
|
||||
getDataList()
|
||||
parentType.value = data.type
|
||||
queryParams.dictType = row['type']
|
||||
await dataGetList(xDataGrid)
|
||||
parentType.value = row['type']
|
||||
}
|
||||
// 弹出框
|
||||
const dialogVisible = ref(false) // 是否显示弹出层
|
||||
@ -246,6 +208,16 @@ const setDialogTile = (type: string) => {
|
||||
actionType.value = type
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
// 删除操作
|
||||
const handleTypeDelete = async (rowId: number) => {
|
||||
await typeDeleteData(xTypeGrid, rowId)
|
||||
}
|
||||
|
||||
const handleDataDelete = async (rowId: number) => {
|
||||
await dataDeleteData(xDataGrid, rowId)
|
||||
}
|
||||
|
||||
// 提交按钮
|
||||
const submitTypeForm = async () => {
|
||||
const elForm = unref(typeFormRef)?.getElFormRef()
|
||||
@ -259,16 +231,15 @@ const submitTypeForm = async () => {
|
||||
if (actionType.value === 'typeCreate') {
|
||||
data.type = dictTypeValue.value
|
||||
await DictTypeApi.createDictTypeApi(data)
|
||||
ElMessage.success(t('common.createSuccess'))
|
||||
message.success(t('common.createSuccess'))
|
||||
} else if (actionType.value === 'typeUpdate') {
|
||||
await DictTypeApi.updateDictTypeApi(data)
|
||||
ElMessage.success(t('common.updateSuccess'))
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
// 操作成功，重新加载列表
|
||||
await getTypeList()
|
||||
dialogVisible.value = false
|
||||
} finally {
|
||||
actionLoading.value = false
|
||||
typeGetList(xTypeGrid)
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -285,23 +256,17 @@ const submitDataForm = async () => {
|
||||
if (actionType.value === 'dataCreate') {
|
||||
data.dictType = parentType.value
|
||||
await DictDataApi.createDictDataApi(data)
|
||||
ElMessage.success(t('common.createSuccess'))
|
||||
message.success(t('common.createSuccess'))
|
||||
} else if (actionType.value === 'dataUpdate') {
|
||||
await DictDataApi.updateDictDataApi(data)
|
||||
ElMessage.success(t('common.updateSuccess'))
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
await getDataList()
|
||||
// 操作成功，重新加载列表
|
||||
dialogVisible.value = false
|
||||
} finally {
|
||||
actionLoading.value = false
|
||||
dataGetList(xDataGrid)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
// 初始化查询
|
||||
onMounted(async () => {
|
||||
await getTypeList()
|
||||
typeTableObject.tableList[0] && onClickType(typeTableObject.tableList[0])
|
||||
})
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user