4 changed files with 269 additions and 0 deletions
@ -0,0 +1,39 @@ |
|||
import { defHttp } from '@/utils/http/axios' |
|||
|
|||
// 定义新增或修改时,需要发送给后端的数据结构
|
|||
export interface FactoryVO { |
|||
id?: number |
|||
name: string // 电厂名称
|
|||
shortName?: string // 电厂简称
|
|||
areaId: number // 所属集团编号
|
|||
} |
|||
|
|||
// 定义分页查询时的参数
|
|||
export interface FactoryPageReqVO { |
|||
name?: string |
|||
} |
|||
|
|||
// 查询厂级列表
|
|||
export function getFactoryPage(params: FactoryPageReqVO) { |
|||
return defHttp.get({ url: '/system/Factory/page', params }) |
|||
} |
|||
|
|||
// 查询厂级详情
|
|||
export function getFactory(id: number) { |
|||
return defHttp.get({ url: `/system/Factory/get?id=${id}` }) |
|||
} |
|||
|
|||
// 新增厂级
|
|||
export function createFactory(data: FactoryVO) { |
|||
return defHttp.post({ url: '/system/Factory/create', data }) |
|||
} |
|||
|
|||
// 修改厂级
|
|||
export function updateFactory(data: FactoryVO) { |
|||
return defHttp.put({ url: '/system/Factory/update', data }) |
|||
} |
|||
|
|||
// 删除厂级
|
|||
export function deleteFactory(id: number) { |
|||
return defHttp.delete({ url: `/system/Factory/delete?id=${id}` }) |
|||
} |
@ -0,0 +1,56 @@ |
|||
import type { BasicColumn, FormSchema } from '@/components/Table' |
|||
|
|||
// 表格列定义 (已按您要求移除“集团编号”)
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '电厂编号', |
|||
dataIndex: 'id', |
|||
width: 80, |
|||
}, |
|||
{ |
|||
title: '集团名称', |
|||
dataIndex: 'areaName', |
|||
width: 180, |
|||
}, |
|||
{ |
|||
title: '电厂名称', |
|||
dataIndex: 'name', |
|||
width: 180, |
|||
}, |
|||
{ |
|||
title: '电厂简称', |
|||
dataIndex: 'shortName', |
|||
width: 150, |
|||
}, |
|||
] |
|||
|
|||
// 表单定义
|
|||
export const formSchema: FormSchema[] = [ |
|||
{ |
|||
label: '电厂编号', |
|||
field: 'id', |
|||
show: false, |
|||
component: 'Input', |
|||
}, |
|||
{ |
|||
label: '所属集团', |
|||
field: 'areaId', |
|||
required: true, |
|||
component: 'Select', |
|||
componentProps: { |
|||
options: [], |
|||
}, |
|||
}, |
|||
{ |
|||
label: '电厂名称', |
|||
field: 'name', |
|||
required: true, |
|||
component: 'Input', |
|||
}, |
|||
{ |
|||
label: '电厂简称', |
|||
field: 'shortName', |
|||
required: true, |
|||
component: 'Input', |
|||
}, |
|||
] |
@ -0,0 +1,79 @@ |
|||
<script lang="ts" setup> |
|||
import { ref, unref } from 'vue' |
|||
import { formSchema } from './Factory' |
|||
import { useI18n } from '@/hooks/web/useI18n' |
|||
import { useMessage } from '@/hooks/web/useMessage' |
|||
import { BasicForm, useForm } from '@/components/Form' |
|||
import { BasicModal, useModalInner } from '@/components/Modal' |
|||
import { getCompanyPage } from '@/api/system/config/Company' |
|||
import { createFactory, getFactory, updateFactory } from '@/api/system/config/Factory' |
|||
import type { FactoryVO } from '@/api/system/config/Factory' |
|||
|
|||
defineOptions({ name: 'FactoryModal' }) |
|||
|
|||
const emit = defineEmits(['success', 'register']) |
|||
const { t } = useI18n() |
|||
const { createMessage } = useMessage() |
|||
const isUpdate = ref(true) |
|||
|
|||
const [registerForm, { setFieldsValue, resetFields, validate, updateSchema }] = useForm({ |
|||
labelWidth: 120, |
|||
baseColProps: { span: 24 }, |
|||
schemas: formSchema, |
|||
showActionButtonGroup: false, |
|||
actionColOptions: { span: 23 }, |
|||
}) |
|||
|
|||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => { |
|||
resetFields() |
|||
setModalProps({ confirmLoading: false }) |
|||
isUpdate.value = !!data?.isUpdate |
|||
|
|||
const companyRes = await getCompanyPage({ pageNo: 1, pageSize: 100 }) |
|||
const companyOptions = companyRes.list.map(item => ({ |
|||
label: item.name, |
|||
value: item.id, |
|||
})) |
|||
|
|||
updateSchema({ |
|||
field: 'areaId', |
|||
componentProps: { |
|||
options: companyOptions, |
|||
}, |
|||
}) |
|||
|
|||
if (unref(isUpdate)) { |
|||
const res = await getFactory(data.record.id) |
|||
setFieldsValue({ ...res }) |
|||
} |
|||
}) |
|||
|
|||
async function handleSubmit() { |
|||
try { |
|||
const values = await validate() |
|||
setModalProps({ confirmLoading: true }) |
|||
if (unref(isUpdate)) |
|||
await updateFactory(values as FactoryVO) |
|||
else |
|||
await createFactory(values as FactoryVO) |
|||
closeModal() |
|||
emit('success') |
|||
createMessage.success(t('common.saveSuccessText')) |
|||
} |
|||
finally { |
|||
setModalProps({ confirmLoading: false }) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<BasicModal |
|||
v-bind="$attrs" |
|||
:title="isUpdate ? t('action.edit') : t('action.create')" |
|||
:width="600" |
|||
@register="registerModal" |
|||
@ok="handleSubmit" |
|||
> |
|||
<BasicForm @register="registerForm" /> |
|||
</BasicModal> |
|||
</template> |
@ -0,0 +1,95 @@ |
|||
<script lang="ts" setup> |
|||
import FactoryModal from './FactoryModal.vue' |
|||
import { columns } from './Factory' |
|||
import { useI18n } from '@/hooks/web/useI18n' |
|||
import { useMessage } from '@/hooks/web/useMessage' |
|||
import { useModal } from '@/components/Modal' |
|||
import { IconEnum } from '@/enums/appEnum' |
|||
import { BasicTable, TableAction, useTable } from '@/components/Table' |
|||
import { deleteFactory, getFactoryPage } from '@/api/system/config/Factory' |
|||
|
|||
defineOptions({ name: 'UnitFactory' }) |
|||
|
|||
const { t } = useI18n() |
|||
const { createMessage } = useMessage() |
|||
const [registerModal, { openModal }] = useModal() |
|||
|
|||
const [register, { getForm, reload }] = useTable({ |
|||
title: '厂级列表', |
|||
api: getList, |
|||
columns, |
|||
rowKey: 'id', |
|||
formConfig: { labelWidth: 120 }, |
|||
pagination: true, |
|||
useSearchForm: false, |
|||
showTableSetting: true, |
|||
showIndexColumn: false, |
|||
actionColumn: { |
|||
width: 140, |
|||
title: t('common.action'), |
|||
dataIndex: 'action', |
|||
fixed: 'right', |
|||
}, |
|||
}) |
|||
|
|||
async function getList() { |
|||
const res = await getFactoryPage(getForm().getFieldsValue() as any) |
|||
return res |
|||
} |
|||
|
|||
function handleCreate() { |
|||
openModal(true, { isUpdate: false }) |
|||
} |
|||
|
|||
function handleEdit(record: Recordable) { |
|||
openModal(true, { record, isUpdate: true }) |
|||
} |
|||
|
|||
async function handleDelete(record: Recordable) { |
|||
await deleteFactory(record.id) |
|||
createMessage.success(t('common.delSuccessText')) |
|||
reload() |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
<BasicTable @register="register"> |
|||
<template #toolbar> |
|||
<a-button v-auth="['system:Factory:create']" type="primary" :pre-icon="IconEnum.ADD" @click="handleCreate"> |
|||
{{ t('action.create') }} |
|||
</a-button> |
|||
</template> |
|||
<template #bodyCell="{ column, record }"> |
|||
<template v-if="column.key === 'action'"> |
|||
<TableAction |
|||
:actions="[ |
|||
{ icon: IconEnum.EDIT, label: t('action.edit'), auth: 'system:Factory:update', onClick: handleEdit.bind(null, record) }, |
|||
{ |
|||
icon: IconEnum.DELETE, |
|||
danger: true, |
|||
label: t('action.delete'), |
|||
auth: 'system:Factory:delete', |
|||
popConfirm: { |
|||
title: t('common.delMessage'), |
|||
placement: 'left', |
|||
confirm: handleDelete.bind(null, record), |
|||
}, |
|||
}, |
|||
]" |
|||
/> |
|||
</template> |
|||
</template> |
|||
</BasicTable> |
|||
<FactoryModal @register="registerModal" @success="reload()" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
/* 深度选择器覆盖 Ant Design 内部样式 */ |
|||
:deep(.ant-table-body) { |
|||
height: auto !important; |
|||
min-height: 200px; |
|||
max-height: 300 !important; |
|||
} |
|||
</style> |
Loading…
Reference in new issue