mirror of
https://gitee.com/hhyykk/ipms-sjy-ui.git
synced 2025-07-23 07:15:08 +08:00
初始化项目，自 v1.7.1 版本开始
This commit is contained in:
YunaiV
104
src/views/system/dict/dict.data.ts
Normal file
104
src/views/system/dict/dict.data.ts
Normal file
@ -0,0 +1,104 @@
|
||||
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
|
||||
// 国际化
|
||||
const { t } = useI18n()
|
||||
// 表单校验
|
||||
export const dictDataRules = reactive({
|
||||
label: [required],
|
||||
value: [required],
|
||||
sort: [required]
|
||||
})
|
||||
// crudSchemas
|
||||
export const crudSchemas = reactive<VxeCrudSchema>({
|
||||
primaryKey: 'id',
|
||||
primaryType: null,
|
||||
action: true,
|
||||
actionWidth: '140px',
|
||||
searchSpan: 12,
|
||||
columns: [
|
||||
{
|
||||
title: '字典类型',
|
||||
field: 'dictType',
|
||||
isTable: false,
|
||||
isForm: false
|
||||
},
|
||||
{
|
||||
title: '数据标签',
|
||||
field: 'label',
|
||||
isSearch: true
|
||||
},
|
||||
{
|
||||
title: '数据键值',
|
||||
field: 'value'
|
||||
},
|
||||
// {
|
||||
// title: '标签类型',
|
||||
// field: 'colorType',
|
||||
// form: {
|
||||
// component: 'Select',
|
||||
// componentProps: {
|
||||
// options: [
|
||||
// {
|
||||
// label: 'default',
|
||||
// value: ''
|
||||
// },
|
||||
// {
|
||||
// label: 'success',
|
||||
// value: 'success'
|
||||
// },
|
||||
// {
|
||||
// label: 'info',
|
||||
// value: 'info'
|
||||
// },
|
||||
// {
|
||||
// label: 'warning',
|
||||
// value: 'warning'
|
||||
// },
|
||||
// {
|
||||
// label: 'danger',
|
||||
// value: 'danger'
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// },
|
||||
// isTable: false
|
||||
// },
|
||||
{
|
||||
title: '颜色',
|
||||
field: 'cssClass',
|
||||
isTable: false,
|
||||
form: {
|
||||
component: 'ColorPicker',
|
||||
componentProps: {
|
||||
predefine: ['#ffffff', '#409eff', '#67c23a', '#e6a23c', '#f56c6c', '#909399', '#c71585']
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '显示排序',
|
||||
field: 'sort',
|
||||
isTable: false
|
||||
},
|
||||
{
|
||||
title: t('common.status'),
|
||||
field: 'status',
|
||||
dictType: DICT_TYPE.COMMON_STATUS,
|
||||
dictClass: 'number'
|
||||
},
|
||||
{
|
||||
title: t('form.remark'),
|
||||
field: 'remark',
|
||||
form: {
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
type: 'textarea',
|
||||
rows: 4
|
||||
},
|
||||
colProps: {
|
||||
span: 24
|
||||
}
|
||||
},
|
||||
isTable: false
|
||||
}
|
||||
]
|
||||
})
|
||||
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
|
||||
65
src/views/system/dict/dict.type.ts
Normal file
65
src/views/system/dict/dict.type.ts
Normal file
@ -0,0 +1,65 @@
|
||||
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
// 表单校验
|
||||
export const dictTypeRules = reactive({
|
||||
name: [required],
|
||||
type: [required]
|
||||
})
|
||||
// 新增 + 修改
|
||||
const crudSchemas = reactive<VxeCrudSchema>({
|
||||
primaryKey: 'id',
|
||||
primaryType: null,
|
||||
action: true,
|
||||
actionWidth: '140px',
|
||||
searchSpan: 12,
|
||||
columns: [
|
||||
{
|
||||
title: '字典名称',
|
||||
field: 'name',
|
||||
isSearch: true
|
||||
},
|
||||
{
|
||||
title: '字典类型',
|
||||
field: 'type',
|
||||
isSearch: true
|
||||
},
|
||||
{
|
||||
title: t('common.status'),
|
||||
field: 'status',
|
||||
dictType: DICT_TYPE.COMMON_STATUS,
|
||||
dictClass: 'number',
|
||||
table: {
|
||||
width: 70
|
||||
}
|
||||
},
|
||||
{
|
||||
title: t('common.createTime'),
|
||||
field: 'createTime',
|
||||
formatter: 'formatDate',
|
||||
isForm: false,
|
||||
isTable: false,
|
||||
search: {
|
||||
show: true,
|
||||
itemRender: {
|
||||
name: 'XDataTimePicker'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: t('form.remark'),
|
||||
field: 'remark',
|
||||
isTable: false,
|
||||
form: {
|
||||
componentProps: {
|
||||
type: 'textarea',
|
||||
rows: 4
|
||||
},
|
||||
colProps: {
|
||||
span: 24
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
|
||||
251
src/views/system/dict/index.vue
Normal file
251
src/views/system/dict/index.vue
Normal file
@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<div class="flex">
|
||||
<!-- ====== 字典分类 ====== -->
|
||||
<el-card class="w-1/2 dict" :gutter="12" shadow="always">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>字典分类</span>
|
||||
</div>
|
||||
</template>
|
||||
<XTable @register="registerType" @cell-click="cellClickEvent">
|
||||
<!-- 操作：新增类型 -->
|
||||
<template #toolbar_buttons>
|
||||
<XButton
|
||||
type="primary"
|
||||
preIcon="ep:zoom-in"
|
||||
:title="t('action.add')"
|
||||
v-hasPermi="['system:dict:create']"
|
||||
@click="handleTypeCreate()"
|
||||
/>
|
||||
</template>
|
||||
<template #actionbtns_default="{ row }">
|
||||
<!-- 操作：编辑类型 -->
|
||||
<XTextButton
|
||||
preIcon="ep:edit"
|
||||
:title="t('action.edit')"
|
||||
v-hasPermi="['system:dict:update']"
|
||||
@click="handleTypeUpdate(row.id)"
|
||||
/>
|
||||
<!-- 操作：删除类型 -->
|
||||
<XTextButton
|
||||
preIcon="ep:delete"
|
||||
:title="t('action.del')"
|
||||
v-hasPermi="['system:dict:delete']"
|
||||
@click="typeDeleteData(row.id)"
|
||||
/>
|
||||
</template>
|
||||
</XTable>
|
||||
<!-- @星语：分页和列表重叠在一起了 -->
|
||||
</el-card>
|
||||
<!-- ====== 字典数据 ====== -->
|
||||
<el-card class="w-1/2 dict ml-3" :gutter="12" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>字典数据</span>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 列表 -->
|
||||
<div v-if="!tableTypeSelect">
|
||||
<span>请从左侧选择</span>
|
||||
</div>
|
||||
<div v-if="tableTypeSelect">
|
||||
<!-- 列表 -->
|
||||
<XTable @register="registerData">
|
||||
<!-- 操作：新增数据 -->
|
||||
<template #toolbar_buttons>
|
||||
<XButton
|
||||
type="primary"
|
||||
preIcon="ep:zoom-in"
|
||||
:title="t('action.add')"
|
||||
v-hasPermi="['system:dict:create']"
|
||||
@click="handleDataCreate()"
|
||||
/>
|
||||
</template>
|
||||
<template #actionbtns_default="{ row }">
|
||||
<!-- 操作：修改数据 -->
|
||||
<XTextButton
|
||||
v-hasPermi="['system:dict:update']"
|
||||
preIcon="ep:edit"
|
||||
:title="t('action.edit')"
|
||||
@click="handleDataUpdate(row.id)"
|
||||
/>
|
||||
<!-- 操作：删除数据 -->
|
||||
<XTextButton
|
||||
v-hasPermi="['system:dict:delete']"
|
||||
preIcon="ep:delete"
|
||||
:title="t('action.del')"
|
||||
@click="dataDeleteData(row.id)"
|
||||
/>
|
||||
</template>
|
||||
</XTable>
|
||||
</div>
|
||||
</el-card>
|
||||
<XModal id="dictModel" v-model="dialogVisible" :title="dialogTitle">
|
||||
<Form
|
||||
v-if="['typeCreate', 'typeUpdate'].includes(actionType)"
|
||||
:schema="DictTypeSchemas.allSchemas.formSchema"
|
||||
:rules="DictTypeSchemas.dictTypeRules"
|
||||
ref="typeFormRef"
|
||||
>
|
||||
<template #type>
|
||||
<template v-if="actionType == 'typeUpdate'">
|
||||
<el-tag>{{ dictTypeValue }}</el-tag>
|
||||
</template>
|
||||
<template v-else><el-input v-model="dictTypeValue" /> </template>
|
||||
</template>
|
||||
</Form>
|
||||
<Form
|
||||
v-if="['dataCreate', 'dataUpdate'].includes(actionType)"
|
||||
:schema="DictDataSchemas.allSchemas.formSchema"
|
||||
:rules="DictDataSchemas.dictDataRules"
|
||||
ref="dataFormRef"
|
||||
/>
|
||||
<!-- 操作按钮 -->
|
||||
<template #footer>
|
||||
<XButton
|
||||
v-if="['typeCreate', 'typeUpdate'].includes(actionType)"
|
||||
type="primary"
|
||||
:title="t('action.save')"
|
||||
:loading="actionLoading"
|
||||
@click="submitTypeForm"
|
||||
/>
|
||||
<XButton
|
||||
v-if="['dataCreate', 'dataUpdate'].includes(actionType)"
|
||||
type="primary"
|
||||
:title="t('action.save')"
|
||||
:loading="actionLoading"
|
||||
@click="submitDataForm"
|
||||
/>
|
||||
<XButton :title="t('dialog.close')" @click="dialogVisible = false" />
|
||||
</template>
|
||||
</XModal>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts" name="Dict">
|
||||
import { VxeTableEvents } from 'vxe-table'
|
||||
import type { FormExpose } from '@/components/Form'
|
||||
import * as DictTypeSchemas from './dict.type'
|
||||
import * as DictDataSchemas from './dict.data'
|
||||
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 [registerType, { reload: typeGetList, deleteData: typeDeleteData }] = useXTable({
|
||||
allSchemas: DictTypeSchemas.allSchemas,
|
||||
getListApi: DictTypeApi.getDictTypePageApi,
|
||||
deleteApi: DictTypeApi.deleteDictTypeApi
|
||||
})
|
||||
|
||||
const queryParams = reactive({
|
||||
dictType: null
|
||||
})
|
||||
const [registerData, { reload: dataGetList, deleteData: dataDeleteData }] = useXTable({
|
||||
allSchemas: DictDataSchemas.allSchemas,
|
||||
params: queryParams,
|
||||
getListApi: DictDataApi.getDictDataPageApi,
|
||||
deleteApi: DictDataApi.deleteDictDataApi
|
||||
})
|
||||
// ========== 字典分类列表相关 ==========
|
||||
const dictTypeValue = ref('')
|
||||
// 字典分类修改操作
|
||||
const handleTypeCreate = () => {
|
||||
dictTypeValue.value = ''
|
||||
setDialogTile('typeCreate')
|
||||
}
|
||||
const handleTypeUpdate = async (rowId: number) => {
|
||||
setDialogTile('typeUpdate')
|
||||
// 设置数据
|
||||
const res = await DictTypeApi.getDictTypeApi(rowId)
|
||||
dictTypeValue.value = res.type
|
||||
unref(typeFormRef)?.setValues(res)
|
||||
}
|
||||
|
||||
// 字典数据修改操作
|
||||
const handleDataCreate = () => {
|
||||
setDialogTile('dataCreate')
|
||||
}
|
||||
const handleDataUpdate = async (rowId: number) => {
|
||||
setDialogTile('dataUpdate')
|
||||
// 设置数据
|
||||
const res = await DictDataApi.getDictDataApi(rowId)
|
||||
unref(dataFormRef)?.setValues(res)
|
||||
}
|
||||
// 字典分类点击行事件
|
||||
const parentType = ref('')
|
||||
const tableTypeSelect = ref(false)
|
||||
const cellClickEvent: VxeTableEvents.CellClick = async ({ row }) => {
|
||||
tableTypeSelect.value = true
|
||||
queryParams.dictType = row['type']
|
||||
await dataGetList()
|
||||
parentType.value = row['type']
|
||||
}
|
||||
// 弹出框
|
||||
const dialogVisible = ref(false) // 是否显示弹出层
|
||||
const dialogTitle = ref('edit') // 弹出层标题
|
||||
const actionLoading = ref(false) // 遮罩层
|
||||
const typeFormRef = ref<FormExpose>() // 分类表单 Ref
|
||||
const dataFormRef = ref<FormExpose>() // 数据表单 Ref
|
||||
const actionType = ref('') // 操作按钮的类型
|
||||
|
||||
// 设置标题
|
||||
const setDialogTile = (type: string) => {
|
||||
dialogTitle.value = t('action.' + type)
|
||||
actionType.value = type
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
// 提交按钮
|
||||
const submitTypeForm = async () => {
|
||||
const elForm = unref(typeFormRef)?.getElFormRef()
|
||||
if (!elForm) return
|
||||
elForm.validate(async (valid) => {
|
||||
if (valid && dictTypeValue.value != '') {
|
||||
actionLoading.value = true
|
||||
// 提交请求
|
||||
try {
|
||||
const data = unref(typeFormRef)?.formModel as DictTypeVO
|
||||
if (actionType.value === 'typeCreate') {
|
||||
data.type = dictTypeValue.value
|
||||
await DictTypeApi.createDictTypeApi(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
} else if (actionType.value === 'typeUpdate') {
|
||||
await DictTypeApi.updateDictTypeApi(data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
dialogVisible.value = false
|
||||
} finally {
|
||||
actionLoading.value = false
|
||||
typeGetList()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
const submitDataForm = async () => {
|
||||
const elForm = unref(dataFormRef)?.getElFormRef()
|
||||
if (!elForm) return
|
||||
elForm.validate(async (valid) => {
|
||||
if (valid) {
|
||||
actionLoading.value = true
|
||||
// 提交请求
|
||||
try {
|
||||
const data = unref(dataFormRef)?.formModel as DictDataVO
|
||||
if (actionType.value === 'dataCreate') {
|
||||
data.dictType = parentType.value
|
||||
await DictDataApi.createDictDataApi(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
} else if (actionType.value === 'dataUpdate') {
|
||||
await DictDataApi.updateDictDataApi(data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
dialogVisible.value = false
|
||||
} finally {
|
||||
actionLoading.value = false
|
||||
dataGetList()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user