访客修改

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<InspectionRouteForm>) {
+  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
+// }
 </script>
 
 <template>
   <BasicModal :title="title">
     <BasicForm />
+    <Page :auto-content-height="true" style="background-color: #F1F3F6">
+      <BasicTable table-title="巡检点">
+        <template #toolbar-tools>
+          <Space>
+            <a-button
+              type="primary"
+              @click="handleAdd"
+            >
+              {{ $t('pages.common.add') }}
+            </a-button>
+          </Space>
+        </template>
+        <template #action="{ row }">
+          <Space>
+            <ghost-button
+              @click.stop="handleEdit(row)"
+            >
+              {{ '巡检点' }}
+            </ghost-button>
+          </Space>
+        </template>
+      </BasicTable>
+      <PointModal @reload="tableApi.query()"  @update-data="handlePoint"/>
+      <PointModalSetting @reload="tableApi.query()" @update-data="handleSet"/>
+    </Page>
   </BasicModal>
 </template>