访客修改

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',
+  },
+];

apps/web-antd/src/views/property/inspectionManagement/inspectionRoute/index.vue

@@ -1,14 +1,8 @@
 <script setup lang="ts">
-import type { Recordable } from '@vben/types';
-
-import { ref } from 'vue';
-
 import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
 import { getVxePopupContainer } from '@vben/utils';
-
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
-import dayjs from 'dayjs';
+import { ref } from 'vue';
-
 import {
   useVbenVxeGrid,
   vxeCheckboxChecked,
@@ -33,15 +27,6 @@ const formOptions: VbenFormProps = {
   },
   schema: querySchema(),
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
-  // 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
-  // 不需要直接删除
-  // fieldMappingTime: [
-  //  [
-  //    'createTime',
-  //    ['params[beginTime]', 'params[endTime]'],
-  //    ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
-  //  ],
-  // ],
 };
 
 const gridOptions: VxeGridProps = {
@@ -114,6 +99,12 @@ function handleMultiDelete() {
     },
   });
 }
+
+const parentData = ref({})
+const handleUpdate = (dataSet) => {
+  parentData.value = dataSet; // 更新父组件的数据源
+  console.log(parentData.value,111123);
+};
 </script>
 
 <template>
@@ -163,6 +154,6 @@ function handleMultiDelete() {
         </Space>
       </template>
     </BasicTable>
-    <InspectionRouteModal @reload="tableApi.query()" />
+    <InspectionRouteModal @reload="tableApi.query()" @update-data="handleUpdate"/>
   </Page>
 </template>

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>
 

apps/web-antd/src/views/property/inspectionManagement/inspectionRoute/point-modal.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { useVbenModal } from '@vben/common-ui';
+import { cloneDeep } from '@vben/utils';
+import { useVbenForm } from '#/adapter/form';
+import { inspectionRouteAdd, inspectionRouteInfo } from '#/api/property/inspectionManagement/inspectionRoute';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+import {
+  inspectionPointList,
+} from '#/api/property/inspectionManagement/inspectionPoint';
+import { modalSchemaPoint } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+    componentProps: {
+      class: 'w-full',
+    }
+  },
+  schema: modalSchemaPoint(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  class: 'w-[550px]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+    await queryWorkOrdersType()
+    const { id } = modalApi.getData() as { id?: number | string };
+
+    if (id) {
+      const record = await inspectionRouteInfo(id);
+      await formApi.setValues(record);
+    }
+    await markInitialized();
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    emit('update-data', data);
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+
+async function queryWorkOrdersType() {
+  let params = {
+    pageSize: 1000,
+    pageNum: 1
+  }
+  const res = await inspectionPointList(params)
+  const options = res.rows.map((item) => ({
+    label: item.pointName,
+    value: item.id,
+  }));
+  formApi.updateSchema([{
+    componentProps: () => ({
+      options: options,
+      showSearch: true,
+      filterOption: filterOption,
+    }),
+    fieldName: 'pointId',
+  }])
+}
+
+const filterOption = (input: string, option: any) => {
+  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+};
+</script>
+
+<template>
+  <BasicModal title="选择巡检点">
+    <BasicForm />
+  </BasicModal>
+</template>
+

apps/web-antd/src/views/property/inspectionManagement/inspectionRoute/pointSetting-modal.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { useVbenModal } from '@vben/common-ui';
+import { cloneDeep } from '@vben/utils';
+import { useVbenForm } from '#/adapter/form';
+import { inspectionRouteInfo, inspectionRouteUpdate } from '#/api/property/inspectionManagement/inspectionRoute';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+import { modalSchemaPointSetting } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+    componentProps: {
+      class: 'w-full',
+    }
+  },
+  schema: modalSchemaPointSetting(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  class: 'w-[550px]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+    const { id } = modalApi.getData() as { id?: number | string };
+
+    if (id) {
+      const record = await inspectionRouteInfo(id);
+      await formApi.setValues(record);
+    }
+    await markInitialized();
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    emit('update-data', data);
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicModal title="修改巡检点">
+    <BasicForm />
+  </BasicModal>
+</template>
+