diff --git a/apps/web-antd/src/views/property/inspectionManagement/inspectionRoute/data.ts b/apps/web-antd/src/views/property/inspectionManagement/inspectionRoute/data.ts index db36a106..d23729f4 100644 --- a/apps/web-antd/src/views/property/inspectionManagement/inspectionRoute/data.ts +++ b/apps/web-antd/src/views/property/inspectionManagement/inspectionRoute/data.ts @@ -1,7 +1,6 @@ -import {type FormSchemaGetter, z} from '#/adapter/form'; +import {type FormSchemaGetter} from '#/adapter/form'; import type { VxeGridProps } from '#/adapter/vxe-table'; - export const querySchema: FormSchemaGetter = () => [ { component: 'Input', @@ -10,8 +9,6 @@ export const querySchema: FormSchemaGetter = () => [ }, ]; -// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新 -// export const columns: () => VxeGridProps['columns'] = () => [ export const columns: VxeGridProps['columns'] = [ { type: 'checkbox', width: 60 }, { @@ -61,19 +58,97 @@ export const modalSchema: FormSchemaGetter = () => [ component: 'Input', rules: 'required', }, - { - label: '巡检点', - fieldName: 'pointId', - component: 'ApiSelect', - componentProps:{ - mode: 'multiple', - }, - rules: z.array(z.string()).min(1, { message: '请选择' }), - formItemClass: 'col-span-2', - }, { label: '备注', fieldName: 'remark', component: 'Textarea', }, ]; + + +//!!!!!! +export const querySchemaPoint: FormSchemaGetter = () => [ + { + component: 'ApiSelect', + fieldName: 'pointId', + label: '巡检点名称', + componentProps: {}, + }, +]; + +export const columnsPoint: VxeGridProps['columns'] = [ + { + title: '巡检点ID', + field: 'pointId', + }, + { + title: '巡检点名称', + field: 'createTime', + }, + { + field: 'action', + fixed: 'right', + slots: { default: 'action' }, + title: '操作', + width: 180, + }, +]; + +export const modalSchemaPoint: FormSchemaGetter = () => [ + { + label: '主键id', + fieldName: 'id', + component: 'Input', + dependencies: { + show: () => false, + triggerFields: [''], + }, + }, + { + label: '巡检点名称', + fieldName: 'pointId', + rules: 'required', + component: 'ApiSelect', + componentProps: {}, + }, +]; + +export const modalSchemaPointSetting: FormSchemaGetter = () => [ + { + label: '主键id', + fieldName: 'id', + component: 'Input', + dependencies: { + show: () => false, + triggerFields: [''], + }, + }, + { + label: '开始时间', + fieldName: 'startTime', + component: 'DatePicker', + componentProps: { + showTime: true, + format: 'YYYY-MM-DD HH:mm:ss', + placeholder: '请选择开始时间', + }, + rules: 'required', + }, + { + label: '结束时间', + fieldName: 'endTime', + component: 'DatePicker', + componentProps: { + showTime: true, + format: 'YYYY-MM-DD HH:mm:ss', + placeholder: '请选择开始时间', + }, + rules: 'required', + }, + { + label: '排序', + fieldName: 'sort', + component: 'Input', + rules: 'required', + }, +]; diff --git a/apps/web-antd/src/views/property/inspectionManagement/inspectionRoute/index.vue b/apps/web-antd/src/views/property/inspectionManagement/inspectionRoute/index.vue index a6d4d94a..a5a30d0e 100644 --- a/apps/web-antd/src/views/property/inspectionManagement/inspectionRoute/index.vue +++ b/apps/web-antd/src/views/property/inspectionManagement/inspectionRoute/index.vue @@ -1,14 +1,8 @@ - + diff --git a/apps/web-antd/src/views/property/inspectionManagement/inspectionRoute/inspectionRoute-modal.vue b/apps/web-antd/src/views/property/inspectionManagement/inspectionRoute/inspectionRoute-modal.vue index 5a223913..44ec3c5d 100644 --- a/apps/web-antd/src/views/property/inspectionManagement/inspectionRoute/inspectionRoute-modal.vue +++ b/apps/web-antd/src/views/property/inspectionManagement/inspectionRoute/inspectionRoute-modal.vue @@ -9,7 +9,7 @@ import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup'; import { inspectionPointList, } from '#/api/property/inspectionManagement/inspectionPoint'; -import { modalSchema } from './data'; +import {modalSchema} from './data'; const emit = defineEmits<{ reload: [] }>(); @@ -20,11 +20,8 @@ const title = computed(() => { const [BasicForm, formApi] = useVbenForm({ commonConfig: { - // 默认占满两列 formItemClass: 'col-span-1', - // 默认label宽度 px labelWidth: 100, - // 通用配置项 会影响到所有表单项 componentProps: { class: 'w-full', } @@ -42,7 +39,6 @@ const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff( ); const [BasicModal, modalApi] = useVbenModal({ - // 在这里更改宽度 class: 'w-[60%]', fullscreenButton: false, onBeforeClose, @@ -59,7 +55,6 @@ const [BasicModal, modalApi] = useVbenModal({ if (isUpdate.value && id) { const record = await inspectionRouteInfo(id); - record.pointId = record.pointId?.split(',') await formApi.setValues(record); } await markInitialized(); @@ -75,9 +70,7 @@ async function handleConfirm() { if (!valid) { return; } - // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次 const data = cloneDeep(await formApi.getValues()); - data.pointId = data.pointId?.join(',') await (isUpdate.value ? inspectionRouteUpdate(data) : inspectionRouteAdd(data)); resetInitialized(); emit('reload'); @@ -104,12 +97,11 @@ async function queryWorkOrdersType() { label: item.pointName, value: item.id, })); - formApi.updateSchema([{ + tableApi.formApi.updateSchema([{ componentProps: () => ({ options: options, showSearch: true, filterOption: filterOption, - mode: 'multiple', }), fieldName: 'pointId', }]) @@ -118,11 +110,127 @@ async function queryWorkOrdersType() { const filterOption = (input: string, option: any) => { return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0; }; + + +//!!!!!! +import { Page, type VbenFormProps } from '@vben/common-ui'; +import { Space } from 'ant-design-vue'; +import { + useVbenVxeGrid, + type VxeGridProps +} from '#/adapter/vxe-table'; +import { + inspectionRouteList, +} from '#/api/property/inspectionManagement/inspectionRoute'; +import type { InspectionRouteForm } from '#/api/property/inspectionManagement/inspectionRoute/model'; +import pointModal from './point-modal.vue'; +import pointModalSetting from './pointSetting-modal.vue'; +import { columnsPoint, querySchemaPoint } from './data'; + +const formOptions: VbenFormProps = { + commonConfig: { + labelWidth: 90, + componentProps: { + allowClear: true, + }, + }, + schema: querySchemaPoint(), + wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4', +}; + +const gridOptions: VxeGridProps = { + checkboxConfig: { + highlight: true, + reserve: true, + }, + columns: columnsPoint, + height: 'auto', + keepSource: true, + pagerConfig: {}, + proxyConfig: { + ajax: { + query: async ({ page }, formValues = {}) => { + return await inspectionRouteList({ + pageNum: page.currentPage, + pageSize: page.pageSize, + ...formValues, + }); + }, + }, + }, + rowConfig: { + keyField: 'id', + }, + id: 'property-inspectionRoute-index' +}; + +const [BasicTable, tableApi] = useVbenVxeGrid({ + formOptions, + gridOptions, +}); + +const [PointModal, pointModalApi] = useVbenModal({ + connectedComponent: pointModal, +}); + +const [PointModalSetting, pointModalSettingApi] = useVbenModal({ + connectedComponent: pointModalSetting, +}); + +function handleAdd() { + pointModalApi.setData({}); + pointModalApi.open(); +} + +async function handleEdit(row: Required) { + pointModalSettingApi.setData({ id: row.id }); + pointModalSettingApi.open(); +} + +const setData = ref({}) +const handleSet = (data) => { + setData.value = data; // 更新父组件的数据源 + console.log(setData.value,111); +}; +const pointData = ref({}) +const handlePoint = (data) => { + pointData.value = data; // 更新父组件的数据源 + console.log(pointData.value,222); +}; +// const allDate = { +// ...pointData, +// ...setData +// } diff --git a/apps/web-antd/src/views/property/inspectionManagement/inspectionRoute/point-modal.vue b/apps/web-antd/src/views/property/inspectionManagement/inspectionRoute/point-modal.vue new file mode 100644 index 00000000..2766caba --- /dev/null +++ b/apps/web-antd/src/views/property/inspectionManagement/inspectionRoute/point-modal.vue @@ -0,0 +1,112 @@ + + + + diff --git a/apps/web-antd/src/views/property/inspectionManagement/inspectionRoute/pointSetting-modal.vue b/apps/web-antd/src/views/property/inspectionManagement/inspectionRoute/pointSetting-modal.vue new file mode 100644 index 00000000..f7ed3180 --- /dev/null +++ b/apps/web-antd/src/views/property/inspectionManagement/inspectionRoute/pointSetting-modal.vue @@ -0,0 +1,84 @@ + + + +