qhse菜单配置

src/api/pms/iotryimprovedailyreport/index.ts

@@ -7,13 +7,18 @@ export interface IotRyImproveDailyReportVO {
   workLocation: string
   workPurpose: string
   relocationDays: number
-  productionStatus: string
   personnel: string
-  nextPlan: string
+  improveReportDetails: IotRyImproveDailyReportDetailVO[]
   auditStatus?: 0 | 10 | 20 | 30 | 40
   opinion?: string
 }
 
+export interface IotRyImproveDailyReportDetailVO {
+  projectName: string
+  constructionDetail: string
+  nextPlan: string
+}
+
 export interface IotRyImproveDailyReportApprovalVO {
   id: number
   auditStatus: 20 | 30

src/views/pms/iotrydailyreport/components/equipment-form.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { IotRyImproveDailyReportApi } from '@/api/pms/iotryimprovedailyreport'
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
 import { FormInstance, FormRules } from 'element-plus'
-import { Close } from '@element-plus/icons-vue'
+import { Close, Delete, Plus } from '@element-plus/icons-vue'
 
 defineOptions({ name: 'IotRyEquipmentReportForm' })
 
@@ -14,13 +15,18 @@ interface EquipmentReportForm {
   workLocation: string
   workPurpose: string
   relocationDays: number | undefined
-  productionStatus: string
-  nextPlan: string
+  improveReportDetails: ImproveReportDetail[]
   personnel: string
   auditStatus?: 0 | 10 | 20 | 30 | 40
   opinion?: string
 }
 
+interface ImproveReportDetail {
+  projectName: string
+  constructionDetail: string
+  nextPlan: string
+}
+
 interface Props {
   visible?: boolean
   loadList: () => void | Promise<void>
@@ -41,8 +47,7 @@ const defaultForm: EquipmentReportForm = {
   workLocation: '',
   workPurpose: '',
   relocationDays: undefined,
-  productionStatus: '',
-  nextPlan: '',
+  improveReportDetails: [],
   personnel: '',
   auditStatus: undefined,
   opinion: ''
@@ -54,6 +59,7 @@ const form = ref<EquipmentReportForm>({ ...defaultForm })
 const formLoading = ref(false)
 const detailLoading = ref(false)
 const message = useMessage()
+const { ZmTable, ZmTableColumn } = useTableComponents<ImproveReportDetail>()
 
 const auditStatusMap = {
   0: { label: '未提交', type: 'info' },
@@ -69,8 +75,6 @@ const rules: FormRules = {
   workLocation: [{ required: true, message: '请输入工作地点', trigger: ['blur', 'change'] }],
   workPurpose: [{ required: true, message: '请输入施工目的', trigger: ['blur', 'change'] }],
   relocationDays: [{ required: true, message: '请输入安全作业天数', trigger: ['blur', 'change'] }],
-  productionStatus: [{ required: true, message: '请输入施工动态', trigger: ['blur', 'change'] }],
-  nextPlan: [{ required: true, message: '请输入下步计划', trigger: ['blur', 'change'] }],
   personnel: [{ required: true, message: '请输入人员情况', trigger: ['blur', 'change'] }]
 }
 
@@ -95,8 +99,32 @@ function getAuditStatus(status?: number) {
   return auditStatusMap[status as keyof typeof auditStatusMap] || auditStatusMap[0]
 }
 
+function createDefaultDetail(): ImproveReportDetail {
+  return {
+    projectName: '',
+    constructionDetail: '',
+    nextPlan: ''
+  }
+}
+
+function getDefaultDetails() {
+  return [createDefaultDetail()]
+}
+
+function normalizeDetails(details?: ImproveReportDetail[]) {
+  if (!Array.isArray(details) || !details.length) {
+    return getDefaultDetails()
+  }
+
+  return details.map((item) => ({
+    projectName: item.projectName || '',
+    constructionDetail: item.constructionDetail || '',
+    nextPlan: item.nextPlan || ''
+  }))
+}
+
 function toFormData(row?: any): EquipmentReportForm {
-  if (!row) return { ...defaultForm }
+  if (!row) return { ...defaultForm, improveReportDetails: getDefaultDetails() }
 
   return {
     id: row.id,
@@ -105,8 +133,7 @@ function toFormData(row?: any): EquipmentReportForm {
     workLocation: row.workLocation,
     workPurpose: row.workPurpose,
     relocationDays: row.relocationDays,
-    productionStatus: row.productionStatus,
-    nextPlan: row.nextPlan,
+    improveReportDetails: normalizeDetails(row.improveReportDetails),
     personnel: row.personnel,
     auditStatus: row.auditStatus,
     opinion: row.opinion || ''
@@ -115,7 +142,10 @@ function toFormData(row?: any): EquipmentReportForm {
 
 async function handleOpenForm(mode: FormMode = 'create', row?: any) {
   formMode.value = mode
-  form.value = mode === 'create' ? { ...defaultForm } : toFormData(row)
+  form.value =
+    mode === 'create'
+      ? { ...defaultForm, improveReportDetails: getDefaultDetails() }
+      : toFormData(row)
   emits('update:visible', true)
 
   if (mode !== 'create' && row?.id) {
@@ -137,6 +167,19 @@ function handleCloseForm() {
   emits('update:visible', false)
 }
 
+function addImproveReportDetail() {
+  form.value.improveReportDetails.push(createDefaultDetail())
+}
+
+function removeImproveReportDetail(index: number) {
+  if (form.value.improveReportDetails.length <= 1) {
+    form.value.improveReportDetails = getDefaultDetails()
+    return
+  }
+
+  form.value.improveReportDetails.splice(index, 1)
+}
+
 async function submitForm() {
   if (!formRef.value || formDisabled.value || formMode.value === 'approval') return
 
@@ -154,9 +197,8 @@ async function submitForm() {
         workLocation: data.workLocation,
         workPurpose: data.workPurpose,
         relocationDays: Number(data.relocationDays),
-        productionStatus: data.productionStatus,
         personnel: data.personnel,
-        nextPlan: data.nextPlan
+        improveReportDetails: data.improveReportDetails
       })
       message.success('编辑成功')
       await props.loadList()
@@ -167,9 +209,8 @@ async function submitForm() {
         workLocation: data.workLocation,
         workPurpose: data.workPurpose,
         relocationDays: Number(data.relocationDays),
-        productionStatus: data.productionStatus,
         personnel: data.personnel,
-        nextPlan: data.nextPlan
+        improveReportDetails: data.improveReportDetails
       })
       message.success('新增成功')
       await (props.reloadAfterCreate ? props.reloadAfterCreate() : props.loadList())
@@ -293,29 +334,107 @@ defineExpose({ handleOpenForm })
               :disabled="mainFieldDisabled" />
           </el-form-item>
 
-          <el-form-item class="col-span-2" label="施工动态" prop="productionStatus">
-            <el-input
-              v-model="form.productionStatus"
-              type="textarea"
-              :autosize="{ minRows: 8 }"
-              resize="none"
-              show-word-limit
-              :maxlength="2000"
-              placeholder="请输入施工动态，每行一条"
-              :disabled="mainFieldDisabled" />
-          </el-form-item>
-
-          <el-form-item class="col-span-2" label="下步计划" prop="nextPlan">
-            <el-input
-              v-model="form.nextPlan"
-              type="textarea"
-              :autosize="{ minRows: 2 }"
-              resize="none"
-              show-word-limit
-              :maxlength="1000"
-              placeholder="请输入下步计划"
-              :disabled="mainFieldDisabled" />
-          </el-form-item>
+          <div class="col-span-2 detail-toolbar">
+            <div class="text-base font-medium text-[var(--el-text-color-primary)]">
+              施工动态明细
+            </div>
+            <el-button
+              type="primary"
+              plain
+              :icon="Plus"
+              @click="addImproveReportDetail"
+              :disabled="mainFieldDisabled">
+              新增明细
+            </el-button>
+          </div>
+
+          <div class="col-span-2">
+            <ZmTable
+              :data="form.improveReportDetails"
+              :loading="false"
+              class="detail-table"
+              :show-border="true"
+              :show-overflow-tooltip="false">
+              <ZmTableColumn label="项目名称" prop="projectName" :width="220">
+                <template #default="{ row, $index }">
+                  <el-form-item
+                    class="mb-0!"
+                    :show-message="false"
+                    :prop="`improveReportDetails.${$index}.projectName`"
+                    :rules="{
+                      required: true,
+                      message: '请输入项目名称',
+                      trigger: ['blur', 'change']
+                    }">
+                    <el-input
+                      v-model="row.projectName"
+                      clearable
+                      placeholder="请输入项目名称"
+                      :disabled="mainFieldDisabled" />
+                  </el-form-item>
+                </template>
+              </ZmTableColumn>
+
+              <ZmTableColumn label="施工动态" min-width="280">
+                <template #default="{ row, $index }">
+                  <el-form-item
+                    class="mb-0!"
+                    :show-message="false"
+                    :prop="`improveReportDetails.${$index}.constructionDetail`"
+                    :rules="{
+                      required: true,
+                      message: '请输入施工动态',
+                      trigger: ['blur', 'change']
+                    }">
+                    <el-input
+                      v-model="row.constructionDetail"
+                      type="textarea"
+                      :autosize="{ minRows: 2, maxRows: 8 }"
+                      resize="vertical"
+                      :maxlength="1000"
+                      placeholder="请输入施工动态"
+                      :disabled="mainFieldDisabled" />
+                  </el-form-item>
+                </template>
+              </ZmTableColumn>
+
+              <ZmTableColumn label="下步计划" min-width="240">
+                <template #default="{ row, $index }">
+                  <el-form-item
+                    class="mb-0!"
+                    :show-message="false"
+                    :prop="`improveReportDetails.${$index}.nextPlan`"
+                    :rules="{
+                      required: true,
+                      message: '请输入下步计划',
+                      trigger: ['blur', 'change']
+                    }">
+                    <el-input
+                      v-model="row.nextPlan"
+                      type="textarea"
+                      :autosize="{ minRows: 2, maxRows: 8 }"
+                      resize="vertical"
+                      :maxlength="1000"
+                      placeholder="请输入下步计划"
+                      :disabled="mainFieldDisabled" />
+                  </el-form-item>
+                </template>
+              </ZmTableColumn>
+
+              <ZmTableColumn label="操作" width="90" fixed="right">
+                <template #default="{ $index }">
+                  <el-button
+                    link
+                    type="danger"
+                    :icon="Delete"
+                    @click="removeImproveReportDetail($index)"
+                    :disabled="mainFieldDisabled">
+                    删除
+                  </el-button>
+                </template>
+              </ZmTableColumn>
+            </ZmTable>
+          </div>
 
           <el-form-item v-if="showAuditInfo" class="col-span-2" label="审批意见" prop="opinion">
             <el-input
@@ -366,4 +485,22 @@ defineExpose({ handleOpenForm })
 :deep(.el-form-item__label) {
   font-weight: 500;
 }
+
+.detail-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 8px;
+  margin-bottom: 12px;
+}
+
+.detail-table :deep(.el-form-item) {
+  width: 100%;
+}
+
+.detail-table :deep(.el-table__body .el-table__cell) {
+  .cell {
+    padding: 10px 8px;
+  }
+}
 </style>