commit: 巡检保养相关联调修改

@@ -32,3 +32,23 @@ export const updateInspectionStatus = (params) => {
     params,
   });
 };
+
+/**
+ * 详情
+ */
+export const getInsPlanDetail = (params) => {
+  return defHttp.get<any>({
+    url: `/inspectionPlan/detail`,
+    params,
+  });
+};
+
+/**
+ * 更新
+ */
+export const updateInsStatus = (params) => {
+  return defHttp.post<any>({
+    url: `/inspectionPlan/changeStatus`,
+    params,
+  });
+};

@@ -23,3 +23,22 @@ export const deleteInsRecord = (params) => {
     params,
   });
 };
+/**
+ * 新增
+ */
+export const saveInsRecord = (params) => {
+  return defHttp.post<any>({
+    url: `/inspectionRecord/save`,
+    params,
+  });
+};
+
+/**
+ * 详情
+ */
+export const getInsRecordDetail = (params) => {
+  return defHttp.get<any>({
+    url: `/inspectionRecord/detail`,
+    params,
+  });
+};

@@ -24,6 +24,16 @@ export const deleteServePlan = (params) => {
 };
 
 /**
+ * 详情
+ */
+export const getPreserveDetail = (params) => {
+  return defHttp.get<any>({
+    url: `/preservePlan/detail`,
+    params,
+  });
+};
+
+/**
  * 更新
  */
 export const updateServiceStatus = (params) => {
@@ -32,3 +42,13 @@ export const updateServiceStatus = (params) => {
     params,
   });
 };
+
+/**
+ * 新增
+ */
+export const savePreservePlan = (params) => {
+  return defHttp.post<any>({
+    url: `/preservePlan/save`,
+    params,
+  });
+};

@@ -22,3 +22,34 @@ export const deleteServeRecord = (params) => {
     params,
   });
 };
+/**
+ * 根据保养计划获取保养明细分页接口
+ */
+export const serveRecordDetail = (params) => {
+  const { page, pageSize } = params;
+  const otherParams = omit(params, ['page', 'pageSize']);
+  return defHttp.post<any>({
+    url: `/preservePlan/pageDetail?page=${page}&pageSize=${pageSize}`,
+    params: otherParams,
+  });
+};
+
+
+/**
+ * 新增
+ */
+export const savePreserveRecord = (params) => {
+  return defHttp.post<any>({
+    url: `/preserveRecord/save`,
+    params,
+  });
+};
+/**
+ * 详情
+ */
+export const getRecordDetail = (params) => {
+  return defHttp.get<any>({
+    url: `/preserveRecord/detail`,
+    params,
+  });
+};

 export default {
   listText: '保养计划',
+  preserveDetailText: '保养明细',
   preserveNameText: '计划名称',
   preserveCodeText: '计划编号',
   statusText: '状态',

@@ -3,6 +3,7 @@
     ref="tree"
     class="organization-tree flex relative items-center py-4"
     :class="foldFlag ? '' : 'pl-4'"
+    :style="treeStyle"
   >
     <div
       class="cursor-pointer flex py-4 fold-icon absolute rounded svg:fill-gray-400 hover:bg-gray-200"
@@ -33,8 +34,8 @@
   import { useI18n } from '/@/hooks/web/useI18n';
 
   const props = defineProps<OrganizationTreePropsType>();
-
   const attrs = useAttrs();
+
   const tree = ref<Nullable<HTMLDivElement>>();
   const emit = defineEmits(['select', 'register']);
   const treeData = ref<TreeItem[]>([]);
@@ -42,6 +43,7 @@
   const treeExpandData = ref<string[]>([]);
 
   const innerProps = ref<OrganizationTreePropsType>({});
+  const treeStyle = ref<any>({})
 
   //获取所有父级id
   function findForAllId(data: Recordable[] = [], arr: string[] = []) {
@@ -59,11 +61,12 @@
     selectedKeys.value = [];
   }
 
-  const foldFlag = ref(true);
+  const foldFlag = ref(false);
   const handleFold = () => {
     foldFlag.value = !unref(foldFlag);
   };
 
+
   const setTreeHeight = () => {
     const rect = getBoundingClientRect(unref(tree)!);
     if (rect) {
@@ -75,6 +78,12 @@
   };
 
   onMounted(async () => {
+    if (attrs?.isOpen) {
+      foldFlag.value = false;
+      treeStyle.value.height = '50vh'
+    }else {
+      treeStyle.value.height = '100vh'
+    }
     let api:any;
     if (attrs?.listType === 'equipment') {
       api = getAllCategory()
@@ -128,7 +137,7 @@
 
 <style scoped lang="less">
   .organization-tree {
-    max-height: 100vh;
+    //max-height: 100vh;
 
     .expand {
       opacity: 0;

+import insPlanModal from './insPlanModal.vue';
+
+export { insPlanModal };

+<template>
+  <a-modal
+    v-model:visible="visible"
+    :title="modalTitle"
+    width="80vw"
+    @ok="handleOk"
+    @cancel="handleCancel"
+  >
+    <a-form :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }" style="margin-top: 32px" :rules="rules">
+      <a-row :gutter="16">
+        <a-col :span="12">
+          <a-form-item label="计划编号" name="code">
+            <a-input v-model:value="form.code" :disabled="isViewMode" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="计划名称" name="name">
+            <a-input v-model:value="form.name" :disabled="isViewMode" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row :gutter="16">
+        <a-col :span="12">
+          <a-form-item label="开始时间" name="startTime">
+            <a-date-picker
+              v-model:value="form.startTime"
+              :disabled="isViewMode"
+              placeholder="请选择"
+              style="width: 100%"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="结束时间" name="endTime">
+            <a-date-picker
+              v-model:value="form.endTime"
+              :disabled="isViewMode"
+              placeholder="请选择"
+              style="width: 100%"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row :gutter="16">
+        <a-col :span="12">
+          <a-form-item label="计划状态" name="status">
+            <a-select
+              v-model:value="form.status"
+              :disabled="isViewMode"
+              placeholder="请选择"
+              :options="[
+                {label:'未开始',value:'NOT_START'},
+                {label:'进行中',value:'UNDERWAY'},
+                {label:'已完成',value:'FINISH'},
+                {label:'停用',value:'STOP'},
+                ]"
+            >
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row :gutter="16">
+        <a-col :span="24">
+          <a-form-item label="计划备注" name="remark">
+            <a-textarea
+              v-model:value="form.remark"
+              :disabled="isViewMode"
+            >
+            </a-textarea>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-form-item label="巡检明细" name="tkCheckDetailsDTOList">
+        <div style="text-align: end">
+          <a-button class="editable-add-btn" type="primary" @click="handleAdd" style="margin-bottom: 8px" :disabled="isViewMode">
+            <template #icon>
+              <PlusOutlined/>
+            </template>
+            新增
+          </a-button>
+          <a-table bordered :data-source="tableData" :columns="columns">
+            <template #code="{ text, record, index }">
+              <div>
+                <a-input v-model:value="record.code" :disabled="isViewMode"/>
+              </div>
+            </template>
+            <template #checkDeviceId="{ text, record, index }">
+              <div>
+                <a-select
+                  v-model:value="record.checkDeviceId"
+                  :options="Options"
+                  :disabled="isViewMode"
+                  :field-names="{ label: 'name', value: 'id' }"
+                  placeholder="请选择"
+                />
+              </div>
+            </template>
+            <template #checkPlanId="{ text, record, index }">
+              <div>
+                <a-select
+                  v-model:value="record.checkPlanId"
+                  :options="planOptions"
+                  :disabled="isViewMode"
+                  :fieldNames="{ label: 'name', value: 'id' }"
+                  placeholder="请选择"
+                />
+              </div>
+            </template>
+            <template #planDetails="{ text, record, index }">
+              <div>
+                <a-textarea v-model:value="record.planDetails"  :disabled="isViewMode"/>
+              </div>
+            </template>
+            <template #operation="{ text, record, index }">
+              <div>
+                <a-button type="link" @click="handleDelete(index)" :disabled="isViewMode">删除</a-button>
+              </div>
+            </template>
+          </a-table>
+        </div>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+<script setup lang="ts">
+// 定义 props
+import {onMounted, ref, watch} from "vue";
+import {getLedgerList} from "/@/api/equipment/ledger";
+import {getPlanList} from "/@/api/equipment/chenkPlan";
+const Options = ref([]);
+const planOptions = ref([]);
+const props = defineProps({
+  initialData: {
+    type: Object,
+    default: () => ({
+      form: {
+        code: '',
+        name: '',
+        status: '',
+        enabled: '',
+        startTime: '',
+        endTime: '',
+        remark: '',
+      },
+      tableData: [],
+    }),
+  },
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  isViewMode: {
+    type: Boolean,
+    default: false,
+  },
+  modalTitle: {
+    type: String,
+    default: '',
+  },
+});
+
+const columns = [
+  {
+    title: '明细编号',
+    dataIndex: 'code',
+    slots: { customRender: 'code' },
+    width: '160px'
+  },
+  {
+    title: '巡检设备',
+    dataIndex: 'checkDeviceId',
+    slots: { customRender: 'checkDeviceId' },
+    width: '180px'
+  },
+  {
+    title: '巡检方案',
+    dataIndex: 'checkPlanId',
+    slots: { customRender: 'checkPlanId' },
+    width: '180px'
+  },
+  {
+    title: '方案明细',
+    dataIndex: 'planDetails',
+    slots: { customRender: 'planDetails' },
+    width: '160px'
+  },
+  {
+    title: '操作',
+    dataIndex: 'operation',
+    slots: { customRender: 'operation' },
+    width: '120px'
+  }
+];
+const rules = {
+  code: [
+    { required: true, message: '请输入', trigger: 'blur' },
+  ],
+  name: [
+    { required: true, message: '请输入', trigger: 'blur' },
+  ],
+  remark: [
+    { required: true, message: '请输入', trigger: 'blur' },
+  ],
+  status: [{ required: true, message: '请选择', trigger: 'change' }],
+};
+const visible = ref(props.visible);
+const isViewMode = ref(props.isViewMode);
+const modalTitle = ref(props.modalTitle);
+const form = ref({ ...props.initialData.form });
+const tableData = ref([...props.initialData.tableData]);
+const emit = defineEmits(['update:visible', 'submit']);
+// 监听 visible 的变化
+watch(
+  () => props.visible,
+  (newVal) => {
+    visible.value = newVal;
+  }
+);
+
+watch(
+  () => props.isViewMode,
+  (newVal) => {
+    isViewMode.value = newVal;
+  }
+);
+
+// 监听 visible 的变化并通知父组件
+watch(
+  () => visible.value,
+  (newVal) => {
+    emit('update:visible', newVal);
+  }
+);
+
+// 监听 initialData 的变化
+watch(
+  () => props.initialData,
+  (newVal) => {
+    form.value = { ...newVal.form };
+    tableData.value = [...newVal.tableData];
+  },
+  { deep: true }
+);
+
+
+onMounted(() => {
+  fetchAgeOptions();
+});
+
+const fetchAgeOptions = async () => {
+  try {
+    const response = await getLedgerList({ page: 1, pageSize: 999 }); // 调用接口
+    const response1 = await getPlanList({ page: 1, pageSize: 999, type: 'INSPECTION' }); // 调用接口
+    Options.value = response.items?.map((item: any) => {
+      return {
+        value: item?.id,
+        label: item?.name
+      }
+    })
+    planOptions.value = response1.items?.map((item: any) => {
+      return {
+        value: item?.id,
+        label: item?.name
+      }
+    });
+  } catch (error) {
+    console.error('失败:', error);
+  }
+};
+const handleAdd = () => {
+  tableData.value.push({
+    code: '',
+    checkDeviceId: undefined,
+    checkPlanId: undefined,
+    planDetails: '',
+  });
+};
+
+const handleDelete = (index) => {
+  tableData.value.splice(index, 1);
+};
+
+const handleOk = () => {
+  if (isViewMode.value) {
+    visible.value = false;
+    return;
+  }
+  const objData = { ...form.value, tkCheckDetailsDTOList: tableData.value };
+  emit('submit', objData); // 将数据提交给父组件
+  resetForm();
+}
+
+const handleCancel = () => {
+  resetForm();
+  visible.value = false;
+};
+// 清空表单和表格数据
+const resetForm = () => {
+  form.value = {
+    code: '',
+    name: '',
+    status: '',
+    enabled: '',
+    startTime: '',
+    endTime: '',
+    remark: '',
+  };
+  tableData.value = [];
+  isViewMode.value = false;
+};
+</script>

@@ -3,7 +3,7 @@
     <BasicTable :clickToRowSelect="false" @register="registerTable">
       <template #toolbar>
         <Authority value="api:yt:product:category:post">
-          <Button type="primary">
+          <Button type="primary" @click="handleCreate">
             {{ t('inspection.inspectionPlan.createCategoryText') }}
           </Button>
         </Authority>
@@ -26,10 +26,16 @@
         <TableAction
           :actions="[
             {
+              label: t('common.viewText'),
+              auth: 'api:yt:product:category:update',
+              icon: 'ant-design:eye-outlined',
+              onClick: handleViewDetail.bind(null, record),
+            },
+            {
               label: t('common.editText'),
               auth: 'api:yt:product:category:update',
               icon: 'clarity:note-edit-line',
-              // onClick: handleEdit.bind(null, record),
+              onClick: handleEdit.bind(null, record),
               ifShow: () => record.status === 'NOT_START',
             },
             {
@@ -77,17 +83,47 @@
         />
       </template>
     </BasicTable>
+    <insPlanModal
+      v-model:visible="modalVisible"
+      :initial-data="initialData"
+      :is-view-mode="isViewMode"
+      @submit="handleSubmit"
+      :title="modalTitle"
+    />
   </div>
 </template>
 <script setup lang="ts">
 import { BasicTable, useTable, TableAction } from '/@/components/Table';
-import {deleteInspectionPlan, getInspectionPlanList, updateInspectionStatus} from '/@/api/inspection/inspectionPlan';
+import {
+  deleteInspectionPlan,
+  getInspectionPlanList,
+  getInsPlanDetail,
+  updateInspectionStatus, updateInsStatus
+} from '/@/api/inspection/inspectionPlan';
 import { columns, searchFormSchema } from './index';
 import { useI18n } from '/@/hooks/web/useI18n';
-import { Button, Tag } from 'ant-design-vue';
+import {Button, message, Tag} from 'ant-design-vue';
 import {useMessage} from "/@/hooks/web/useMessage";
+import { insPlanModal } from "./components/index"
+import {ref} from "vue";
+import {dateFormat} from "/@/utils/common/compUtils";
 const { t } = useI18n();
 const { createMessage } = useMessage();
+const modalVisible = ref(false);
+const isViewMode = ref(false);
+const modalTitle = ref('');
+const initialData = ref({
+  form: {
+    code: '',
+    name: '',
+    status: '',
+    enabled: '',
+    startTime: '',
+    endTime: '',
+    remark: '',
+  },
+  tableData: [],
+});
 
 const [
   registerTable,
@@ -139,20 +175,21 @@ const handleReload = () => {
 };
 
 const handleUpdateStatus = async (record?: any,value?: string) => {
-  let _status = '';
+  let id = record.id;
+  let status = '';
   if (record.status === 'NOT_START') {
-    _status = 'UNDERWAY'
+    status = 'UNDERWAY'
   }else if(record.status === 'UNDERWAY'){
-    _status = 'FINISH'
+    status = 'FINISH'
   }else if(record.status === 'FINISH'){
-    _status = 'STOP'
+    status = 'STOP'
   }
   if (value === 'STOP') {
-    _status = 'STOP'
+    status = 'STOP'
   }
   try {
     setLoading(true);
-    await updateInspectionStatus({ ...record,status: _status });
+    await updateInsStatus({ id,status });
     createMessage.success(t('common.editSuccessText'));
     handleReload();
   } catch (error) {
@@ -162,4 +199,71 @@ const handleUpdateStatus = async (record?: any,value?: string) => {
   }
 }
 
+const handleViewDetail = async (record?: any) => {
+  let id = record.id;
+  modalTitle.value = '查看';
+  try {
+    const response = await getInsPlanDetail({id})
+    initialData.value = {
+      form: response, // 表单数据
+      tableData: response.tkCheckDetailsDTOList, // 表格数据
+    };
+    modalVisible.value = true; // 打开弹框
+    isViewMode.value = true;
+  }catch (error) {
+    throw error;
+  }finally {
+
+  }
+}
+
+const handleEdit = async (record?: any) => {
+  let id = record.id;
+  modalTitle.value = '修改';
+  try {
+    const response = await getInsPlanDetail({id})
+    initialData.value = {
+      form: response, // 表单数据
+      tableData: response.tkCheckDetailsDTOList, // 表格数据
+    };
+    modalVisible.value = true; // 打开弹框
+  }catch (error) {
+    throw error;
+  }finally {
+
+  }
+}
+
+// 新增
+const handleCreate = () => {
+  modalTitle.value = '新增';
+  initialData.value = {
+    form: {
+      code: '',
+      name: '',
+      status: '',
+      enabled: '',
+      startTime: '',
+      endTime: '',
+      remark: '',
+    },
+    tableData: [],
+  }
+  modalVisible.value = true;
+};
+
+const handleSubmit = async (data) => {
+  const format = 'yyyy-MM-dd hh:mm:ss';
+  const _data = {
+    ...data,
+    startTime: dateFormat(data?.startTime, format),
+    endTime: dateFormat(data?.endTime, format),
+  }
+  modalVisible.value = false;
+  await updateInspectionStatus(_data)
+  message.success('提交成功');
+  handleReload()
+};
+
+
 </script>

+import insRecordModal from './insRecordModal.vue';
+
+export { insRecordModal };

+<template>
+  <a-modal
+    v-model:visible="visible"
+    :title="modalTitle"
+    width="80vw"
+    @ok="handleOk"
+    @cancel="handleCancel"
+  >
+    <a-form :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }" style="margin-top: 32px" :rules="rules">
+      <a-row :gutter="16">
+        <a-col :span="12">
+          <a-form-item label="巡检计划" name="inspectionPlanId">
+            <a-select
+              v-model:value="form.inspectionPlanId"
+              :options="planOptions"
+              :disabled="isViewMode"
+              placeholder="请选择"
+              @change="handleChange"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="巡检计划编号" name="code">
+            <a-input v-model:value="form.code" :disabled="true" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row :gutter="16">
+        <a-col :span="12">
+          <a-form-item label="巡检日期" name="checkDate">
+            <a-date-picker
+              v-model:value="form.checkDate"
+              :disabled="isViewMode"
+              placeholder="请选择"
+              style="width: 100%"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="巡检结果" name="recordResult">
+            <a-select
+              v-model:value="form.recordResult"
+              :options="[{label: '正常',value: true},{label: '异常',value: false}]"
+              :disabled="isViewMode"
+              placeholder="请选择"
+            >
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row :gutter="16">
+        <a-col :span="12">
+          <a-form-item label="巡检人" name="preserveByName">
+            <div style="display: flex">
+              <a-input
+                v-model:value="form.inspectorName"
+                placeholder="请选择"
+                :disabled="true"
+              >
+              </a-input>
+              <a-button
+                type="primary"
+                @click="goChoose"
+                :disabled="isViewMode"
+              >
+                选人
+              </a-button>
+            </div>
+          </a-form-item>
+        </a-col>
+
+      </a-row>
+      <a-form-item label="巡检明细" name="tkInspectionDetailsDTOList">
+        <a-table bordered :data-source="tableData" :columns="columns">
+          <template #tkDeviceAccountDTO="{ text, record, index }">
+            <div>
+              {{record?.tkDeviceAccountDTO?.name}}
+            </div>
+          </template>
+          <template #recordResult="{ text, record, index }">
+            <div>
+              <a-select
+                v-model:value="record.recordResult"
+                :options="[{label: '正常',value: true},{label: '异常',value: false}]"
+                :disabled="isViewMode"
+                placeholder="请选择"
+              />
+            </div>
+          </template>
+          <template #operation="{ text, record, index }">
+            <div>
+              <a-button type="link" @click="handleDelete(index)" :disabled="isViewMode">删除</a-button>
+            </div>
+          </template>
+        </a-table>
+      </a-form-item>
+    </a-form>
+    <a-modal
+      v-model:visible="userVisible"
+      :title="userModalTitle"
+      width="60vw"
+      height="50vh"
+      @ok="handleUserOk"
+      @cancel="handleUserCancel"
+    >
+      <div style="padding: 20px;display: flex">
+        <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" isOpen="true"/>
+        <div style="margin-top: 20px;margin-left: 30px">
+          <a-radio-group v-model:value="selectedItem">
+            <template v-for="item in Options" :key="`${item.id}`">
+              <a-radio :style="radioStyle" :value="item">{{ item.username }}</a-radio>
+            </template>
+          </a-radio-group>
+        </div>
+      </div>
+    </a-modal>
+  </a-modal>
+</template>
+<script setup lang="ts">
+import {computed, onMounted, reactive, ref, unref, watch} from "vue";
+import {getInspectionPlanList, getInsPlanDetail} from "/@/api/inspection/inspectionPlan";
+import { ApiTreeSelect } from '/@/components/Form';
+import {OrganizationListItem} from "/@/api/system/model/systemModel";
+import {getOrganizationList} from "/@/api/system/system";
+import {getUserListByOrg} from "/@/api/equipment/ledger";
+import {useUserStore} from "/@/store/modules/user";
+import {useI18n} from "/@/hooks/web/useI18n";
+import {useMessage} from "/@/hooks/web/useMessage";
+import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
+interface Value {
+  value?: string;
+  label?: string;
+}
+const rules = {
+  code: [{ required: true, message: '请输入', trigger: 'blur' },],
+  inspectionPlanId: [{ required: true, message: '请输入', trigger: 'blur' },],
+  orgId: [{ required: true, message: '请选择', trigger: 'change' }],
+  inspectorId: [{ required: true, message: '请选择', trigger: 'change' }],
+  inspectorName: [{ required: true, message: '请选择', trigger: 'change' }],
+
+};
+const columns = [
+  {
+    title: '巡检设备',
+    dataIndex: 'tkDeviceAccountDTO',
+    slots: { customRender: 'tkDeviceAccountDTO' },
+    width: '180px'
+  },
+  {
+    title: '巡检内容',
+    dataIndex: 'planDetails',
+    width: '180px'
+  },
+  {
+    title: '巡检结果',
+    dataIndex: 'recordResult',
+    slots: { customRender: 'recordResult' },
+    width: '160px'
+  },
+  {
+    title: '操作',
+    dataIndex: 'operation',
+    slots: { customRender: 'operation' },
+    width: '120px'
+  }
+];
+
+const props = defineProps({
+  initialData: {
+    type: Object,
+    default: () => ({
+      form: {
+        code: '',
+        inspectionPlanId: '',
+        inspectorId: '',
+        inspectorName: '',
+        checkDate: '',
+        recordResult: '',
+        orgId: '',
+      },
+      tableData: [],
+    }),
+  },
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  isViewMode: {
+    type: Boolean,
+    default: false,
+  },
+  modalTitle: {
+    type: String,
+    default: '',
+  },
+});
+const visible = ref(props.visible);
+const isViewMode = ref(props.isViewMode);
+const modalTitle = ref(props.modalTitle);
+const form = ref({ ...props.initialData.form });
+const tableData = ref([...props.initialData.tableData]);
+const emit = defineEmits(['update:visible', 'submit']);
+const planOptions = ref([]);
+const Options = ref([]);
+const userInfo = useUserStore();
+const timespan = ref(Date.now());
+const orgList = ref<Recordable[]>([]);
+const { t } = useI18n();
+const needReload = ref(true);
+
+const { createMessage } = useMessage();
+
+const searchInfo = reactive<Recordable>({});
+const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
+const userVisible = ref(false);
+const userModalTitle = ref('选人');
+const selectedItem = ref<{ id: number; username: string } | null>(null);
+const radioStyle = reactive({
+  display: 'block',
+  height: '30px',
+  lineHeight: '30px',
+});
+
+// 监听 visible 的变化
+watch(
+  () => props.visible,
+  (newVal) => {
+    visible.value = newVal;
+  }
+);
+
+watch(
+  () => props.isViewMode,
+  (newVal) => {
+    isViewMode.value = newVal;
+  }
+);
+
+// 监听 visible 的变化并通知父组件
+watch(
+  () => visible.value,
+  (newVal) => {
+    emit('update:visible', newVal);
+  }
+);
+
+// 监听 initialData 的变化
+watch(
+  () => props.initialData,
+  (newVal) => {
+    console.log(newVal?.form,'66666')
+    form.value = { ...newVal.form, inspectorId: newVal.form?.userDTO?.id || '',inspectorName: newVal.form?.userDTO?.realName || ''};
+
+    tableData.value = [...newVal.tableData];
+  },
+  { deep: true }
+);
+
+const goChoose = () => {
+  userVisible.value = true;
+  selectedItem.value = null;
+}
+
+const handleDelete = (index) => {
+  tableData.value.splice(index, 1);
+};
+
+// 确认按钮的回调
+const handleUserOk = () => {
+  if (!selectedItem.value) {
+    createMessage.warning('请选择一个用户');
+    return;
+  }
+  form.value.inspectorId = selectedItem.value.id
+  form.value.inspectorName = selectedItem.value.username
+
+  userVisible.value = false; // 关闭弹框
+};
+
+const handleUserCancel = () => {
+  selectedItem.value = null;
+  userVisible.value = false;
+};
+
+const handleSelect = async (organizationId: string) => {
+  searchInfo.organizationId = organizationId;
+  const _data = {
+    page: '1',
+    pageSize: '999',
+    tenantId: userInfo.getUserInfo.tenantId!,
+    organizationId: organizationId
+  }
+  const response = await getUserListByOrg(_data); // 调用接口
+  Options.value = response.items;
+
+};
+onMounted(() => {
+  fetchAgeOptions();
+});
+
+const fetchAgeOptions = async () => {
+  try {
+    const response = await getInspectionPlanList({ page: 1, pageSize: 999 }); // 调用接口
+    planOptions.value = response.items?.map((item: any) => {
+      return {
+        value: item?.id,
+        label: item?.name
+      }
+    });
+  } catch (error) {
+    console.error('失败:', error);
+  }
+};
+
+const getBindProps = computed<Recordable>(() => {
+  const params = {}
+  return {
+    replaceFields: { children: 'children', key: 'id', title: 'name', value: 'id' },
+    getPopupContainer: () => document.body,
+    placeholder: t('deviceManagement.device.organizationPlaceholderText'),
+    maxLength: 250,
+    value: form.orgId,
+    dropdownStyle: { maxHeight: '300px' },
+    api: async (params: OrganizationListItem) => {
+      try {
+        const result = ((await getOrganizationList(params)) as unknown as Recordable[]) || [];
+        orgList.value = result;
+        needReload.value = false;
+        return result;
+      } catch (error) {
+        return unref(orgList);
+      }
+    },
+    params: {
+      ...params,
+      _t: unref(timespan),
+    },
+    onChange: async (...args: any[]) => {
+      const _data = {
+        page: '1',
+        pageSize: '999',
+        tenantId: userInfo.getUserInfo.tenantId!,
+        organizationId: args?.[0]
+      }
+      const response = await getUserListByOrg(_data); // 调用接口
+      Options.value = response.items?.map((item: any) => {
+        return {
+          label: item.username,
+          value: item.id,
+        }
+      });
+      form.orgId.value = args?.[0]
+
+    },
+  };
+});
+
+const handleChange = async (value: Value) => {
+  const res = await getInsPlanDetail({id:value})
+  form.value.code = res.code
+  tableData.value = res?.tkCheckDetailsDTOList?.map((item: any) => {
+    return {
+      checkDeviceId: item?.checkDeviceId || '',
+      recordResult: true,
+      planDetails: item?.checkDeviceId || '',
+      tkDeviceAccountDTO: item?.tkDeviceAccountDTO
+    }
+  }) || []
+};
+
+const handleOk = () => {
+  if (isViewMode.value) {
+    visible.value = false;
+    return;
+  }
+  const objData = { ...form.value, tkInspectionDetailsDTOList: tableData.value };
+  emit('submit', objData); // 将数据提交给父组件
+  resetForm();
+}
+const handleCancel = () => {
+  resetForm();
+  visible.value = false;
+}
+
+// 清空表单和表格数据
+const resetForm = () => {
+  form.value = {
+    code: '',
+    inspectionPlanId: '',
+    inspectorId: '',
+    inspectorName: '',
+    checkDate: '',
+    recordResult: '',
+    orgId: '',
+  };
+  tableData.value = [];
+  isViewMode.value = false;
+};
+
+</script>

@@ -3,7 +3,7 @@
     <BasicTable :clickToRowSelect="false" @register="registerTable">
       <template #toolbar>
         <Authority value="api:yt:product:category:post">
-          <Button type="primary" >
+          <Button type="primary" @click="handleCreate">
             {{ t('inspection.inspectionRecord.createRecordText') }}
           </Button>
         </Authority>
@@ -20,10 +20,16 @@
         <TableAction
           :actions="[
             {
+              label: t('common.viewText'),
+              auth: 'api:yt:product:category:update',
+              icon: 'ant-design:eye-outlined',
+              onClick: handleViewDetail.bind(null, record),
+            },
+            {
               label: t('common.editText'),
               auth: 'api:yt:product:category:update',
               icon: 'clarity:note-edit-line',
-              // onClick: handleEdit.bind(null, record),
+              onClick: handleEdit.bind(null, record),
             },
             {
               label: t('common.delText'),
@@ -39,18 +45,46 @@
         />
       </template>
     </BasicTable>
+    <insRecordModal
+      v-model:visible="modalVisible"
+      :initial-data="initialData"
+      :is-view-mode="isViewMode"
+      :title="modalTitle"
+      @submit="handleSubmit"
+    />
   </div>
 </template>
 <script setup lang="ts">
+  import {ref} from "vue";
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { getInspectionRecordList, deleteInsRecord } from '/@/api/inspection/inspectionRecord';
+  import {
+    getInspectionRecordList,
+    deleteInsRecord,
+    saveInsRecord, getInsRecordDetail
+  } from '/@/api/inspection/inspectionRecord';
   import { columns, searchFormSchema } from './index';
   import { useI18n } from '/@/hooks/web/useI18n';
-  import { Button, Tag } from 'ant-design-vue';
+  import {Button, message, Tag} from 'ant-design-vue';
   import {useMessage} from "/@/hooks/web/useMessage";
+  import { insRecordModal } from "./components/index"
   const { t } = useI18n();
   const { createMessage } = useMessage();
-
+  const modalVisible = ref(false);
+  const isViewMode = ref(false);
+  const modalTitle = ref('');
+  import { dateFormat } from '/@/utils/common/compUtils';
+  import {getRecordDetail} from "/@/api/inspection/serviceRecord";
+  const initialData = ref({
+    form: {
+      code: '',
+      inspectionPlanId: '',
+      inspectorId: '',
+      checkDate: '',
+      recordResult: '',
+      orgId: '',
+    },
+    tableData: [],
+  });
   const [
     registerTable,
     { reload, setLoading, getSelectRowKeys, setSelectedRowKeys, getRowSelection },
@@ -95,8 +129,71 @@
     }
   };
 
+  const handleCreate = () => {
+    modalTitle.value = '新增';
+    initialData.value = {
+      form: {
+        code: '',
+        inspectionPlanId: '',
+        inspectorId: '',
+        checkDate: '',
+        recordResult: '',
+        orgId: '',
+      },
+      tableData: [],
+    }
+    modalVisible.value = true;
+  }
+
   const handleReload = () => {
     setSelectedRowKeys([]);
     reload();
   };
+
+  const handleSubmit = async (data) => {
+    const format = 'yyyy-MM-dd hh:mm:ss';
+    modalVisible.value = false;
+    const _data = {
+      ...data,
+      checkDate: dateFormat(data?.checkDate, format)
+    }
+    await saveInsRecord(_data)
+    message.success('提交成功');
+    handleReload()
+  };
+
+  const handleViewDetail = async (record?: any) => {
+    let id = record.id;
+    modalTitle.value = '查看';
+    try {
+      const response = await getInsRecordDetail({id})
+      initialData.value = {
+        form: response, // 表单数据
+        tableData: response.tkInspectionDetailsDTOList, // 表格数据
+      };
+      modalVisible.value = true; // 打开弹框
+      isViewMode.value = true;
+    }catch (error) {
+      throw error;
+    }finally {
+
+    }
+  }
+
+  const handleEdit = async (record?: any) => {
+    let id = record.id;
+    modalTitle.value = '修改';
+    try {
+      const response = await getInsRecordDetail({id})
+      initialData.value = {
+        form: response, // 表单数据
+        tableData: response.tkInspectionDetailsDTOList, // 表格数据
+      };
+      modalVisible.value = true; // 打开弹框
+    }catch (error) {
+      throw error;
+    }finally {
+    }
+  }
+
 </script>

 <template>
-  <div>
-    <BasicModal
-      v-bind="$attrs"
-      width="30rem"
-      :title="getTitle"
-      @register="register"
-      @cancel="handleCancel"
-      @ok="handleOk"
-      destroyOnClose
-    >
-      <div>
-        <BasicForm @register="registerForm" />
-      </div>
-    </BasicModal>
-  </div>
+  <a-modal
+    v-model:visible="visible"
+    :title="modalTitle"
+    width="80vw"
+    @ok="handleOk"
+    @cancel="handleCancel"
+  >
+    <a-form :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }" style="margin-top: 32px" :rules="rules">
+      <a-row :gutter="16">
+        <a-col :span="12">
+          <a-form-item label="计划编号" name="preserveCode">
+            <a-input v-model:value="form.preserveCode" :disabled="isViewMode" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="计划名称" name="preserveName">
+            <a-input v-model:value="form.preserveName" :disabled="isViewMode" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row :gutter="16">
+        <a-col :span="12">
+          <a-form-item label="保养设备" name="status">
+            <a-select
+              v-model:value="form.status"
+              :options="statusOptions"
+              :disabled="isViewMode"
+              placeholder="请选择"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="次数" name="times">
+            <a-input v-model:value="form.times" :disabled="isViewMode" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row :gutter="16">
+        <a-col :span="12">
+          <a-form-item label="频率" name="frequency">
+            <a-input v-model:value="form.frequency" :disabled="isViewMode" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-form-item label="保养明细" name="preserveDetailList">
+        <div style="text-align: end">
+          <a-button class="editable-add-btn" type="primary" @click="handleAdd" style="margin-bottom: 8px" :disabled="isViewMode">
+            <template #icon>
+              <PlusOutlined/>
+            </template>
+            新增
+          </a-button>
+        </div>
+        <a-table bordered :data-source="tableData" :columns="columns">
+          <template #detailCode="{ text, record, index }">
+            <div>
+              <a-input v-model:value="record.detailCode" :disabled="isViewMode"/>
+            </div>
+          </template>
+          <template #deviceId="{ text, record, index }">
+            <div>
+              <a-select
+                v-model:value="record.deviceId"
+                :options="Options"
+                :disabled="isViewMode"
+                :field-names="{ label: 'name', value: 'id' }"
+                placeholder="请选择"
+              />
+            </div>
+          </template>
+          <template #checkPlanId="{ text, record, index }">
+            <div>
+              <a-select
+                v-model:value="record.checkPlanId"
+                :options="planOptions"
+                :disabled="isViewMode"
+                :fieldNames="{ label: 'name', value: 'id' }"
+                placeholder="请选择"
+              />
+            </div>
+          </template>
+          <template #preserveDetail="{ text, record, index }">
+            <div>
+              <a-textarea v-model:value="record.preserveDetail"  :disabled="isViewMode"/>
+            </div>
+          </template>
+          <template #operation="{ text, record, index }">
+            <div>
+              <a-button type="link" @click="handleDelete(index)" :disabled="isViewMode">删除</a-button>
+            </div>
+          </template>
+        </a-table>
+      </a-form-item>
+    </a-form>
+  </a-modal>
 </template>
+
 <script setup lang="ts">
-import {computed, ref, unref} from "vue";
-import {useI18n} from "/@/hooks/web/useI18n";
-import {useForm} from "/@/components/Form";
-import {schemas} from "../index";
-import {useModalInner} from "/@/components/Modal";
+import { ref, onMounted, watch  } from 'vue';
+import { getLedgerList } from "/@/api/equipment/ledger";
+import { getPlanList } from "/@/api/equipment/chenkPlan";
+import { useI18n } from "/@/hooks/web/useI18n";
+import { message } from 'ant-design-vue';
+
+
+const Options = ref([]);
+const planOptions = ref([]);
 const { t } = useI18n();
-const isUpdate = ref<Boolean>(false);
-const recordInfo = ref<any>({});
-const emit = defineEmits(['handleReload', 'register']);
-
-const getTitle = computed(() =>
-  !unref(isUpdate)
-    ? t('inspection.servicePlan.createPlanText')
-    : t('inspection.servicePlan.editPlanText')
+// 定义 props
+const props = defineProps({
+  initialData: {
+    type: Object,
+    default: () => ({
+      form: {
+        preserveCode: '',
+        preserveName: '',
+        status: '',
+        times: '',
+        frequency: '',
+      },
+      tableData: [],
+    }),
+  },
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  isViewMode: {
+    type: Boolean,
+    default: false,
+  },
+  modalTitle: {
+    type: String,
+    default: '',
+  },
+});
+const visible = ref(props.visible);
+const isViewMode = ref(props.isViewMode);
+const modalTitle = ref(props.modalTitle);
+const rules = {
+  preserveCode: [
+    { required: true, message: '请输入', trigger: 'blur' },
+  ],
+  preserveName: [
+    { required: true, message: '请输入', trigger: 'blur' },
+  ],
+
+  frequency: [
+    { required: true, message: '请输入', trigger: 'blur' },
+  ],
+
+  times: [
+    { required: true, message: '请输入', trigger: 'blur' },
+  ],
+  status: [{ required: true, message: '请选择', trigger: 'change' }],
+  preserveDetailList: [{ required: true, message: '请选择', trigger: 'change' }],
+
+};
+
+const statusOptions = [
+  { label: t('inspection.servicePlan.NOTSTART'), value: 'NOTSTART' },
+  { label: t('inspection.servicePlan.UNDERWAY'), value: 'UNDERWAY' },
+  { label: t('inspection.servicePlan.COMPLETED'), value: 'COMPLETED' },
+  { label: t('inspection.servicePlan.STOP'), value: 'STOP' },
+];
+const form = ref({ ...props.initialData.form });
+const tableData = ref([...props.initialData.tableData]);
+const emit = defineEmits(['update:visible', 'submit']);
+onMounted(() => {
+  fetchAgeOptions();
+});
+
+const fetchAgeOptions = async () => {
+  try {
+    const response = await getLedgerList({ page: 1, pageSize: 999 }); // 调用接口
+    const response1 = await getPlanList({ page: 1, pageSize: 999, type: 'MAINTENANCE' }); // 调用接口
+    Options.value = response.items?.map((item: any) => {
+      return {
+        value: item?.id,
+        label: item?.name
+      }
+    })
+    planOptions.value = response1.items?.map((item: any) => {
+      return {
+        value: item?.id,
+        label: item?.name
+      }
+    });
+  } catch (error) {
+    console.error('失败:', error);
+  }
+};
+
+// 监听 visible 的变化
+watch(
+  () => props.visible,
+  (newVal) => {
+    visible.value = newVal;
+  }
 );
 
-const [registerForm, { getFieldsValue, setFieldsValue, validate, updateSchema }] = useForm({
-  labelWidth: 140,
-  schemas,
-  actionColOptions: {
-    span: 14,
+watch(
+  () => props.isViewMode,
+  (newVal) => {
+    isViewMode.value = newVal;
+  }
+);
+
+// 监听 visible 的变化并通知父组件
+watch(
+  () => visible.value,
+  (newVal) => {
+    emit('update:visible', newVal);
+  }
+);
+
+// 监听 initialData 的变化
+watch(
+  () => props.initialData,
+  (newVal) => {
+    form.value = { ...newVal.form };
+    tableData.value = [...newVal.tableData];
   },
-  showActionButtonGroup: false,
-});
+  { deep: true }
+);
 
-const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
-  setModalProps({ confirmLoading: false, loading: true });
-  isUpdate.value = data?.isUpdate;
-  recordInfo.value = data?.record;
-  if (data?.record) {
-    setFieldsValue(data?.record);
+const columns = [
+  {
+    title: '明细编号',
+    dataIndex: 'detailCode',
+    slots: { customRender: 'detailCode' },
+    width: '160px'
+  },
+  {
+    title: '保养设备',
+    dataIndex: 'deviceId',
+    slots: { customRender: 'deviceId' },
+    width: '180px'
+  },
+  {
+    title: '保养方案',
+    dataIndex: 'checkPlanId',
+    slots: { customRender: 'checkPlanId' },
+    width: '180px'
+  },
+  {
+    title: '方案明细',
+    dataIndex: 'preserveDetail',
+    slots: { customRender: 'preserveDetail' },
+    width: '160px'
+  },
+  {
+    title: '操作',
+    dataIndex: 'operation',
+    slots: { customRender: 'operation' },
+    width: '120px'
   }
-  setModalProps({ loading: false });
-});
+];
 
-const handleCancel = () => {
-  closeModal();
+const handleAdd = () => {
+  tableData.value.push({
+    detailCode: '',
+    deviceId: undefined,
+    checkPlanId: undefined,
+    preserveDetail: '',
+  });
 };
 
-const handleOk = async () => {
+const handleDelete = (index) => {
+  tableData.value.splice(index, 1);
+};
+
+const handleOk = () => {
+  if (isViewMode.value) {
+    visible.value = false;
+    return;
+  }
+  const objData = { ...form.value, preserveDetailList: tableData.value };
+  emit('submit', objData); // 将数据提交给父组件
+  resetForm();
+};
 
-}
+const handleCancel = () => {
+  resetForm();
+  visible.value = false;
+};
+// 清空表单和表格数据
+const resetForm = () => {
+  form.value = {
+    serveCode: '',
+    preserveName: '',
+    status: '',
+    times: '',
+    frequency: '',
+};
+  tableData.value = [];
+  isViewMode.value = false;
+};
 </script>

-import { FormSchema } from '/@/components/Form';
+import {FormSchema} from '/@/components/Form';
 import { useI18n } from '/@/hooks/web/useI18n';
 import { BasicColumn } from '/@/components/Table';
 const { t } = useI18n();
 
+
 export const searchFormSchema: FormSchema[] = [
   {
     field: 'preserveName',
     label: t('inspection.servicePlan.preserveNameText'),
     component: 'Input',
-    colProps: { span: 8 },
+    colProps: { span: 6 },
   },
 ];
 
@@ -37,49 +38,4 @@ export const columns: BasicColumn[] = [
 ];
 
 
-export const schemas: FormSchema[] = [
-  {
-    field: 'code',
-    label: t('equipment.checkPlan.nameCode'),
-    component: 'Input',
-    colProps: { span: 21 },
-    required: true,
-    componentProps: {
-      maxLength: 20,
-    },
-  },
-  {
-    field: 'name',
-    label: t('equipment.checkPlan.nameText'),
-    component: 'Input',
-    colProps: { span: 21 },
-    required: true,
-    componentProps: {
-      maxLength: 20,
-    },
-  },
-  {
-    field: 'type',
-    label: t('equipment.checkPlan.typeText'),
-    component: 'RadioButtonGroup',
-    defaultValue: 'INSPECTION',
 
-  },
-  {
-    field: 'status',
-    label: t('equipment.checkPlan.statusText'),
-    component: 'RadioButtonGroup',
-    defaultValue: 'ENABLE',
-
-  },
-  {
-    field: 'planDetails',
-    label: t('equipment.checkPlan.nameDetail'),
-    component: 'InputTextArea',
-    colProps: { span: 21 },
-    required: true,
-    componentProps: {
-      maxLength: 200,
-    },
-  },
-];

@@ -26,10 +26,16 @@
         <TableAction
           :actions="[
             {
+              label: t('common.viewText'),
+              auth: 'api:yt:product:category:update',
+              icon: 'ant-design:eye-outlined',
+              onClick: handleViewDetail.bind(null, record),
+            },
+            {
               label: t('common.editText'),
               auth: 'api:yt:product:category:update',
               icon: 'clarity:note-edit-line',
-              // onClick: handleEdit.bind(null, record),
+              onClick: handleEdit.bind(null, record),
               ifShow: () => record.status === 'NOTSTART',
             },
             {
@@ -77,22 +83,43 @@
         />
       </template>
     </BasicTable>
-    <servicePlanModal @register="registerModal" @handleReload="handleReload" />
+    <servicePlanModal
+      v-model:visible="modalVisible"
+      :initial-data="initialData"
+      :is-view-mode="isViewMode"
+      @submit="handleSubmit"
+      :title="modalTitle"
+    />
 
   </div>
 </template>
 <script setup lang="ts">
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import {deleteServePlan, getServicePlanList, updateServiceStatus} from '/@/api/inspection/servicePlan';
+  import {deleteServePlan, getServicePlanList, updateServiceStatus, savePreservePlan, getPreserveDetail} from '/@/api/inspection/servicePlan';
+  import { servicePlanModal } from "./components/index"
   import { columns, searchFormSchema } from './index';
   import { useI18n } from '/@/hooks/web/useI18n';
-  import { Button, Tag } from 'ant-design-vue';
+  import {Button, message, Tag} from 'ant-design-vue';
   import {useModal} from "/@/components/Modal";
   import {useMessage} from "/@/hooks/web/useMessage";
   const { t } = useI18n();
+  import { ref } from "vue"
+  import {getPreservePlanDetail} from "/@/api/inspection/inspectionPlan";
   const [registerModal, { openModal }] = useModal();
   const { createMessage } = useMessage();
-
+  const modalVisible = ref(false);
+  const isViewMode = ref(false);
+  const modalTitle = ref('');
+  const initialData = ref({
+    form: {
+      preserveCode: '',
+      preserveName: '',
+      status: '',
+      times: '',
+      frequency: '',
+    },
+    tableData: [],
+  });
   const [
     registerTable,
     { reload, setLoading, getSelectRowKeys, setSelectedRowKeys, getRowSelection },
@@ -125,9 +152,27 @@
 
   // 新增
   const handleCreate = () => {
-    openModal(true, {
-      isUpdate: false,
-    });
+    modalTitle.value = '新增';
+    initialData.value = {
+      form: {
+        preserveCode: '',
+        preserveName: '',
+        status: '',
+        times: '',
+        frequency: '',
+      },
+      tableData: [],
+    }
+    modalVisible.value = true;
+  };
+
+  const handleSubmit = async (data) => {
+    console.log('提交的数据:', data);
+
+    modalVisible.value = false;
+    await savePreservePlan(data)
+    message.success('提交成功');
+    handleReload()
   };
 
   const handleReload = () => {
@@ -135,6 +180,41 @@
     reload();
   };
 
+  const handleViewDetail = async (record?: any) => {
+    let id = record.id;
+    modalTitle.value = '查看';
+    try {
+      const response = await getPreserveDetail({id})
+      initialData.value = {
+        form: response, // 表单数据
+        tableData: response.preserveDetailList, // 表格数据
+      };
+      modalVisible.value = true; // 打开弹框
+      isViewMode.value = true;
+    }catch (error) {
+      throw error;
+    }finally {
+
+    }
+  }
+  
+  const handleEdit = async (record?: any) => {
+    let id = record.id;
+    modalTitle.value = '修改';
+    try {
+      const response = await getPreserveDetail({id})
+      initialData.value = {
+        form: response, // 表单数据
+        tableData: response.preserveDetailList, // 表格数据
+      };
+      modalVisible.value = true; // 打开弹框
+    }catch (error) {
+      throw error;
+    }finally {
+
+    }
+  }
+
   const handleDelete = async (record?: any) => {
     let id = record.id;
     try {

+import serviceRecordModal from './serviceRecordModal.vue';
+
+export { serviceRecordModal };

+<template>
+  <a-modal
+    v-model:visible="visible"
+    :title="modalTitle"
+    width="80vw"
+    @ok="handleOk"
+    @cancel="handleCancel"
+  >
+    <a-form :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }" style="margin-top: 32px" :rules="rules">
+      <a-row :gutter="16">
+        <a-col :span="12">
+          <a-form-item label="记录编号" name="recordCode">
+            <a-input v-model:value="form.recordCode" :disabled="isViewMode" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="保养计划" name="preservePlanId">
+            <a-select
+              v-model:value="form.preservePlanId"
+              :options="planOptions"
+              :disabled="isViewMode"
+              placeholder="请选择"
+              @change="handleChange"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <a-row :gutter="16">
+        <a-col :span="12">
+          <a-form-item label="保养日期" name="preserveDate">
+            <a-date-picker
+              v-model:value="form.preserveDate"
+              :disabled="isViewMode"
+              placeholder="请选择"
+              style="width: 100%"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="维护结果" name="preserveStatus">
+            <a-select
+              v-model:value="form.preserveStatus"
+              :disabled="isViewMode"
+              placeholder="请选择"
+              :options="[{label:'未完成',value:'INCOMPLETE'},{label:'已完成',value:'COMPLETE'}]"
+            ></a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row :gutter="16">
+        <a-col :span="12">
+          <a-form-item label="保养人" name="preserveByName">
+            <div style="display: flex">
+              <a-input
+                v-model:value="form.preserveByName"
+                placeholder="请选择"
+                :disabled="true"
+              >
+              </a-input>
+              <a-button
+                type="primary"
+                @click="goChoose"
+                :disabled="isViewMode"
+              >
+                选人
+              </a-button>
+            </div>
+
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-form-item label="保养明细" name="preserveDetailList">
+        <a-table bordered :data-source="tableData" :columns="columns">
+          <template #deviceInfo="{ text, record, index }">
+            <div>
+              {{record?.deviceInfo.name}}
+            </div>
+          </template>
+          <template #status="{ text, record, index }">
+            <div>
+              <a-select
+                v-model:value="record.status"
+                :options="defaultOptions"
+                :disabled="isViewMode"
+                :field-names="{ label: 'name', value: 'id' }"
+                placeholder="请选择"
+              />
+            </div>
+          </template>
+          <template #operation="{ text, record, index }">
+            <div>
+              <a-button type="link" @click="handleDelete(index)" :disabled="isViewMode">删除</a-button>
+            </div>
+          </template>
+        </a-table>
+      </a-form-item>
+    </a-form>
+    <a-modal
+      v-model:visible="userVisible"
+      :title="userModalTitle"
+      width="60vw"
+      height="50vh"
+      @ok="handleUserOk"
+      @cancel="handleUserCancel"
+    >
+      <div style="padding: 20px;display: flex">
+        <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" isOpen="true"/>
+        <div style="margin-top: 20px;margin-left: 30px">
+          <a-radio-group v-model:value="selectedItem">
+            <template v-for="item in Options" :key="`${item.id}`">
+              <a-radio :style="radioStyle" :value="item">{{ item.username }}</a-radio>
+            </template>
+          </a-radio-group>
+        </div>
+      </div>
+    </a-modal>
+  </a-modal>
+</template>
+<script setup lang="ts">
+// 定义 props
+import {computed, onMounted, ref, unref, watch, reactive} from "vue";
+import {getServicePlanList} from "/@/api/inspection/servicePlan";
+import { ApiTreeSelect } from '/@/components/Form';
+import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
+import {OrganizationListItem} from "/@/api/system/model/systemModel";
+import {getOrganizationList} from "/@/api/system/system";
+import {useI18n} from "/@/hooks/web/useI18n";
+import {getUserListByOrg} from "/@/api/equipment/ledger";
+import {useUserStore} from "/@/store/modules/user";
+import {serveRecordDetail} from "/@/api/inspection/serviceRecord";
+import {useMessage} from "/@/hooks/web/useMessage";
+const { createMessage } = useMessage();
+
+const searchInfo = reactive<Recordable>({});
+const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
+const userVisible = ref(false);
+const userModalTitle = ref('选人');
+const selectedItem = ref<{ id: number; username: string } | null>(null);
+const radioStyle = reactive({
+  display: 'block',
+  height: '30px',
+  lineHeight: '30px',
+});
+
+interface Value {
+  value?: string;
+  label?: string;
+}
+const props = defineProps({
+  initialData: {
+    type: Object,
+    default: () => ({
+      form: {
+        recordCode: '',
+        preserveName: '',
+        preservePlanId: '',
+        preserveDate: '',
+        preserveStatus: '',
+        orgId: '',
+        preserveBy: '',
+        preserveByName: '',
+      },
+      tableData: [],
+    }),
+  },
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  isViewMode: {
+    type: Boolean,
+    default: false,
+  },
+  modalTitle: {
+    type: String,
+    default: '',
+  },
+});
+const visible = ref(props.visible);
+const isViewMode = ref(props.isViewMode);
+const modalTitle = ref(props.modalTitle);
+const defaultOptions = [
+  {
+    label: '未执行',
+    value: 'UNEXECUTED',
+  },
+  {
+    label: '已执行',
+    value: 'EXECUTED',
+  },
+]
+const form = ref({ ...props.initialData.form });
+const tableData = ref([...props.initialData.tableData]);
+const emit = defineEmits(['update:visible', 'submit']);
+const planOptions = ref([]);
+const Options = ref([]);
+const rules = {
+  recordCode: [
+    { required: true, message: '请输入', trigger: 'blur' },
+  ],
+  preservePlanId: [{ required: true, message: '请选择', trigger: 'change' }],
+  orgId: [{ required: true, message: '请选择', trigger: 'change' }],
+  preserveBy: [{ required: true, message: '请选择', trigger: 'change' }],
+  preserveByName: [{ required: true, message: '请选择', trigger: 'change' }],
+  preserveStatus: [{ required: true, message: '请选择', trigger: 'change' }],
+};
+
+const columns = [
+  {
+    title: '保养明细编号',
+    dataIndex: 'detailCode',
+    slots: { customRender: 'detailCode' },
+    width: '160px'
+  },
+  {
+    title: '保养设备',
+    dataIndex: 'deviceInfo',
+    slots: { customRender: 'deviceInfo' },
+    width: '180px'
+  },
+  {
+    title: '保养明细',
+    dataIndex: 'preserveDetail',
+    width: '180px'
+  },
+  {
+    title: '执行状态',
+    dataIndex: 'status',
+    slots: { customRender: 'status' },
+    width: '160px'
+  },
+  {
+    title: '操作',
+    dataIndex: 'operation',
+    slots: { customRender: 'operation' },
+    width: '120px'
+  }
+];
+
+
+const userInfo = useUserStore();
+const timespan = ref(Date.now());
+const orgList = ref<Recordable[]>([]);
+const { t } = useI18n();
+const needReload = ref(true);
+const getBindProps = computed<Recordable>(() => {
+ const params = {}
+  return {
+    replaceFields: { children: 'children', key: 'id', title: 'name', value: 'id' },
+    getPopupContainer: () => document.body,
+    placeholder: t('deviceManagement.device.organizationPlaceholderText'),
+    maxLength: 250,
+    value: form.orgId,
+    dropdownStyle: { maxHeight: '300px' },
+    api: async (params: OrganizationListItem) => {
+      try {
+        const result = ((await getOrganizationList(params)) as unknown as Recordable[]) || [];
+        orgList.value = result;
+        needReload.value = false;
+        return result;
+      } catch (error) {
+        return unref(orgList);
+      }
+    },
+    params: {
+      ...params,
+      _t: unref(timespan),
+    },
+    onChange: async (...args: any[]) => {
+      const _data = {
+        page: '1',
+        pageSize: '999',
+        tenantId: userInfo.getUserInfo.tenantId!,
+        organizationId: args?.[0]
+      }
+      const response = await getUserListByOrg(_data); // 调用接口
+      Options.value = response.items?.map((item: any) => {
+        return {
+          label: item.username,
+          value: item.id,
+        }
+      });
+      form.orgId.value = args?.[0]
+
+    },
+  };
+});
+
+
+// 监听 initialData 的变化
+watch(
+  () => props.initialData,
+  (newVal) => {
+    form.value = { ...newVal.form };
+    tableData.value = [...newVal.tableData];
+  },
+  { deep: true }
+);
+
+
+const handleDelete = (index) => {
+  tableData.value.splice(index, 1);
+};
+
+const handleChange = async (value: Value) => {
+  const res = await serveRecordDetail({preservePlanId:value,page:'1',pageSize:'999'})
+  tableData.value = res?.items?.map((item: any) => {
+    return {
+      detailCode: item?.detailCode || '',
+      preserveDetail: item?.preserveDetail || '',
+      deviceInfo: item?.deviceInfo || {},
+      preserveDetailId: item?.id || '',
+      status: 'UNEXECUTED'
+    }
+  }) || []
+};
+
+// 监听 visible 的变化
+watch(
+  () => props.visible,
+  (newVal) => {
+    visible.value = newVal;
+  }
+);
+
+watch(
+  () => props.isViewMode,
+  (newVal) => {
+    isViewMode.value = newVal;
+  }
+);
+
+// 监听 visible 的变化并通知父组件
+watch(
+  () => visible.value,
+  (newVal) => {
+    emit('update:visible', newVal);
+  }
+);
+
+onMounted(() => {
+  fetchAgeOptions();
+});
+
+const fetchAgeOptions = async () => {
+  try {
+    const response = await getServicePlanList({ page: 1, pageSize: 999 }); // 调用接口
+    planOptions.value = response.items?.map((item: any) => {
+      return {
+        value: item?.id,
+        label: item?.preserveName
+      }
+    });
+  } catch (error) {
+    console.error('失败:', error);
+  }
+};
+
+const handleOk = () => {
+  if (isViewMode.value) {
+    visible.value = false;
+    return;
+  }
+  const objData = { ...form.value, preserveDetailStatusList: tableData.value };
+  emit('submit', objData); // 将数据提交给父组件
+  resetForm();
+}
+const handleCancel = () => {
+  resetForm();
+  visible.value = false;
+}
+
+// 清空表单和表格数据
+const resetForm = () => {
+  form.value = {
+    recordCode: '',
+    preserveName: '',
+    preservePlanId: '',
+    preserveDate: '',
+    preserveStatus: '',
+    orgId: '',
+    preserveBy: '',
+    preserveByName: '',
+  };
+  tableData.value = [];
+  isViewMode.value = false;
+};
+
+const goChoose = () => {
+  userVisible.value = true;
+  selectedItem.value = null;
+}
+
+const handleSelect = async (organizationId: string) => {
+  searchInfo.organizationId = organizationId;
+  const _data = {
+    page: '1',
+    pageSize: '999',
+    tenantId: userInfo.getUserInfo.tenantId!,
+    organizationId: organizationId
+  }
+  const response = await getUserListByOrg(_data); // 调用接口
+  Options.value = response.items;
+
+};
+
+// 确认按钮的回调
+const handleUserOk = () => {
+  if (!selectedItem.value) {
+    createMessage.warning('请选择一个用户');
+    return;
+  }
+  form.value.preserveBy = selectedItem.value.id
+  form.value.preserveByName = selectedItem.value.username
+
+  userVisible.value = false; // 关闭弹框
+};
+
+const handleUserCancel = () => {
+  selectedItem.value = null;
+  userVisible.value = false;
+};
+</script>
+

@@ -3,7 +3,7 @@
     <BasicTable :clickToRowSelect="false" @register="registerTable">
       <template #toolbar>
         <Authority value="api:yt:product:category:post">
-          <Button type="primary" >
+          <Button type="primary" @click="handleCreate">
             {{ t('inspection.serviceRecord.createCategoryText') }}
           </Button>
         </Authority>
@@ -24,10 +24,16 @@
         <TableAction
           :actions="[
             {
+              label: t('common.viewText'),
+              auth: 'api:yt:product:category:update',
+              icon: 'ant-design:eye-outlined',
+              onClick: handleViewDetail.bind(null, record),
+            },
+            {
               label: t('common.editText'),
               auth: 'api:yt:product:category:update',
               icon: 'clarity:note-edit-line',
-              // onClick: handleEdit.bind(null, record),
+              onClick: handleEdit.bind(null, record),
             },
             {
               label: t('common.delText'),
@@ -43,17 +49,46 @@
         />
       </template>
     </BasicTable>
+    <serviceRecordModal
+      v-model:visible="modalVisible"
+      :initial-data="initialData"
+      :is-view-mode="isViewMode"
+      :title="modalTitle"
+      @submit="handleSubmit"
+    />
   </div>
 </template>
 <script setup lang="ts">
 import { BasicTable, useTable, TableAction } from '/@/components/Table';
-import { getServiceRecordList, deleteServeRecord } from '/@/api/inspection/serviceRecord';
+import {
+  getServiceRecordList,
+  deleteServeRecord,
+  savePreserveRecord, getRecordDetail
+} from '/@/api/inspection/serviceRecord';
 import { columns, searchFormSchema } from './index';
 import { useI18n } from '/@/hooks/web/useI18n';
-import { Button, Tag } from 'ant-design-vue';
+import {Button, message, Tag} from 'ant-design-vue';
 import {useMessage} from "/@/hooks/web/useMessage";
+import { serviceRecordModal } from "./components/index"
+import {ref} from "vue";
 const { t } = useI18n();
 const { createMessage } = useMessage();
+const modalVisible = ref(false);
+const isViewMode = ref(false);
+const modalTitle = ref('');
+import { dateFormat } from '/@/utils/common/compUtils';
+const initialData = ref({
+  form: {
+    recordCode: '',
+    preservePlanId: '',
+    preserveStatus: '',
+    preserveBy: '',
+    preserveByName: '',
+    preserveDate: '',
+    orgId: '',
+  },
+  tableData: [],
+});
 
 const [
   registerTable,
@@ -104,4 +139,69 @@ const handleReload = () => {
   reload();
 };
 
+const handleCreate = () => {
+  modalTitle.value = '新增';
+  initialData.value = {
+    form: {
+      recordCode: '',
+      preservePlanId: '',
+      preserveStatus: '',
+      preserveBy: '',
+      preserveByName: '',
+      preserveDate: '',
+      orgId: '',
+    },
+    tableData: [],
+  }
+  modalVisible.value = true;
+}
+
+const handleSubmit = async (data) => {
+  const format = 'yyyy-MM-dd hh:mm:ss';
+  modalVisible.value = false;
+  const _data = {
+    ...data,
+    preserveDate: dateFormat(data?.preserveDate, format)
+  }
+  await savePreserveRecord(_data)
+  message.success('提交成功');
+  handleReload()
+};
+
+const handleEdit = async (record?: any) => {
+  let id = record.id;
+  modalTitle.value = '修改';
+  try {
+    const response = await getRecordDetail({id})
+    console.log(response,'res')
+    initialData.value = {
+      form: response, // 表单数据
+      tableData: response.preserveDetailStatusList, // 表格数据
+    };
+    modalVisible.value = true; // 打开弹框
+  }catch (error) {
+    throw error;
+  }finally {
+
+  }
+}
+
+const handleViewDetail = async (record?: any) => {
+  let id = record.id;
+  modalTitle.value = '查看';
+  try {
+    const response = await getRecordDetail({id})
+    initialData.value = {
+      form: response, // 表单数据
+      tableData: response.preserveDetailStatusList, // 表格数据
+    };
+    modalVisible.value = true; // 打开弹框
+    isViewMode.value = true;
+  }catch (error) {
+    throw error;
+  }finally {
+
+  }
+}
+
 </script>