6 changed files with 280 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