1

src/views/pms/iotrydailyreport/ry-form.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup generic="T">
 import { IotRyDailyReportApi } from '@/api/pms/iotrydailyreport'
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
 import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
 import { FormInstance, FormRules } from 'element-plus'
 import { computed, reactive, ref, watch, nextTick } from 'vue'
@@ -34,6 +35,16 @@ const NON_PROD_FIELDS = [
   { key: 'otherNptTime', label: '其他非生产时间' }
 ] as const
 
+interface ProductionStatus {
+  date: string
+  start_time: string
+  end_time: string
+  duration: number
+  endTimeWellDepth: number
+  operatingMode: string
+  detail: string
+}
+
 interface FormOriginal {
   id: number
   deptId: number
@@ -75,7 +86,7 @@ interface FormOriginal {
   // 其他非生产时间原因（仅作为备注字段存在）
   otherNptReason: string
 
-  productionStatus: string
+  productionStatus: ProductionStatus[]
   remark: string
   createTime: string
   opinion: string
@@ -108,7 +119,7 @@ const FORM_KEYS: (keyof FormOriginal)[] = [
   'otherProductionTime',
   'lastCurrentDepth',
 
-  'productionStatus',
+  // 'productionStatus',
   'remark',
   'createTime',
 
@@ -171,6 +182,12 @@ async function loadDetail(id: number) {
       }
     })
 
+    form.value.productionStatus = []
+
+    if (props.type === 'edit') {
+      form.value.currentDepth = form.value.productionStatus.at(-1)?.endTimeWellDepth
+    }
+
     if (props.type === 'edit' && !props.noValidateStatus && res.status !== 0)
       formType.value = 'readonly'
     if (props.type === 'approval' && !props.noValidateStatus && res.auditStatus !== 10)
@@ -180,6 +197,27 @@ async function loadDetail(id: number) {
   }
 }
 
+const addProductionStatusRow = () => {
+  if (!form.value.productionStatus) {
+    form.value.productionStatus = []
+  }
+  form.value.productionStatus.push({
+    date: '',
+    start_time: '',
+    end_time: '',
+    duration: 0,
+    endTimeWellDepth: 0,
+    operatingMode: '',
+    detail: ''
+  })
+}
+
+const removeProductionStatusRow = (index: number) => {
+  form.value.productionStatus?.splice(index, 1)
+}
+
+const { ZmTable, ZmTableColumn } = useTableComponents<ProductionStatus>()
+
 function handleOpenForm(id: number, type: 'edit' | 'readonly') {
   formType.value = type
   emits('update:visible', true)
@@ -357,7 +395,7 @@ const orange = computed(() => {
     :model-value="visible"
     @update:model-value="emits('update:visible', $event)"
     header-class="mb-0!"
-    size="50%"
+    size="60%"
   >
     <template #header>
       <span class="text-xl font-bold text-[var(--el-text-color-primary)]">
@@ -567,22 +605,177 @@ const orange = computed(() => {
             :disabled="isMainFieldDisabled"
           />
         </el-form-item>
-        <el-form-item class="col-span-2" label="生产动态" prop="productionStatus">
+        <el-form-item class="col-span-2" label="备注" prop="remark">
           <el-input
-            v-model="form.productionStatus"
+            v-model="form.remark"
             type="textarea"
             autosize
             maxlength="1000"
             :disabled="isMainFieldDisabled"
           />
         </el-form-item>
-        <el-form-item class="col-span-2" label="备注" prop="remark">
+
+        <div class="col-span-2">
+          <div class="flex items-center justify-between mb-2">
+            <div class="flex items-center gap-2">
+              <div class="bg-[var(--el-color-primary)] w-1 h-5 rounded-full"></div>
+              <div class="text-lg font-medium text-[var(--el-text-color-primary)]">生产动态</div>
+            </div>
+            <el-button
+              type="primary"
+              link
+              icon="ep:plus"
+              @click="addProductionStatusRow"
+              :disabled="isMainFieldDisabled"
+            >
+              添加一行
+            </el-button>
+          </div>
+
+          <ZmTable :data="form.productionStatus!" :loading="false" class="mb-4">
+            <ZmTableColumn label="日期" min-width="140" align="center">
+              <template #default="{ row, $index }">
+                <el-form-item
+                  :prop="`productionStatus.${$index}.date`"
+                  :rules="{ required: true, message: '请选择日期', trigger: 'change' }"
+                  class="mb-0!"
+                >
+                  <el-date-picker
+                    v-model="row.date"
+                    type="date"
+                    value-format="YYYY-MM-DD"
+                    placeholder="选择日期"
+                    :clearable="false"
+                    class="!w-full"
+                    :disabled="isMainFieldDisabled"
+                  />
+                </el-form-item>
+              </template>
+            </ZmTableColumn>
+
+            <ZmTableColumn label="开始时间" min-width="120" align="center">
+              <template #default="{ row, $index }">
+                <el-form-item
+                  :prop="`productionStatus.${$index}.start_time`"
+                  :rules="{ required: true, message: '必填', trigger: 'change' }"
+                  class="mb-0!"
+                >
+                  <el-time-picker
+                    v-model="row.start_time"
+                    format="HH:mm"
+                    value-format="HH:mm"
+                    placeholder="开始"
+                    class="!w-full"
+                    :clearable="false"
+                    :disabled="isMainFieldDisabled"
+                  />
+                </el-form-item>
+              </template>
+            </ZmTableColumn>
+
+            <ZmTableColumn label="结束时间" min-width="120" align="center">
+              <template #default="{ row, $index }">
+                <el-form-item
+                  :prop="`productionStatus.${$index}.end_time`"
+                  :rules="{ required: true, message: '必填', trigger: 'change' }"
+                  class="mb-0!"
+                >
+                  <el-time-picker
+                    v-model="row.end_time"
+                    format="HH:mm"
+                    value-format="HH:mm"
+                    placeholder="结束"
+                    class="!w-full"
+                    :clearable="false"
+                    :disabled="isMainFieldDisabled"
+                  />
+                </el-form-item>
+              </template>
+            </ZmTableColumn>
+
+            <ZmTableColumn label="时长(h)" min-width="100" align="center">
+              <template #default="{ row, $index }">
+                <el-form-item :prop="`productionStatus.${$index}.duration`" class="mb-0!">
+                  <el-input-number
+                    v-model="row.duration"
+                    :min="0"
+                    :controls="false"
+                    class="!w-full"
+                    :disabled="isMainFieldDisabled"
+                  />
+                </el-form-item>
+              </template>
+            </ZmTableColumn>
+
+            <ZmTableColumn label="工况" min-width="120" align="center">
+              <template #default="{ row, $index }">
+                <el-form-item
+                  :prop="`productionStatus.${$index}.operatingMode`"
+                  :rules="{ required: true, message: '必填', trigger: 'blur' }"
+                  class="mb-0!"
+                >
+                  <el-input
+                    v-model="row.operatingMode"
+                    placeholder="请输入工况"
+                    :disabled="isMainFieldDisabled"
+                  />
+                </el-form-item>
+              </template>
+            </ZmTableColumn>
+
+            <ZmTableColumn label="结束井深(m)" min-width="120" align="center">
+              <template #default="{ row, $index }">
+                <el-form-item :prop="`productionStatus.${$index}.endTimeWellDepth`" class="mb-0!">
+                  <el-input-number
+                    v-model="row.endTimeWellDepth"
+                    :min="0"
+                    :controls="false"
+                    class="!w-full"
+                    :disabled="isMainFieldDisabled"
+                  />
+                </el-form-item>
+              </template>
+            </ZmTableColumn>
+
+            <ZmTableColumn label="详细描述" min-width="200" align="center">
+              <template #default="{ row, $index }">
+                <el-form-item
+                  :prop="`productionStatus.${$index}.detail`"
+                  :rules="{ required: true, message: '必填', trigger: 'blur' }"
+                  class="mb-0!"
+                >
+                  <el-input
+                    v-model="row.detail"
+                    placeholder="生产详情"
+                    :disabled="isMainFieldDisabled"
+                  />
+                </el-form-item>
+              </template>
+            </ZmTableColumn>
+
+            <ZmTableColumn label="操作" width="60" fixed="right" align="center">
+              <template #default="{ $index }">
+                <el-button
+                  link
+                  type="danger"
+                  @click="removeProductionStatusRow($index)"
+                  :disabled="isMainFieldDisabled"
+                >
+                  删除
+                </el-button>
+              </template>
+            </ZmTableColumn>
+          </ZmTable>
+        </div>
+
+        <el-form-item v-if="isApproval" class="col-span-2" label="当日生产简报" prop="remark">
           <el-input
             v-model="form.remark"
             type="textarea"
             autosize
             maxlength="1000"
-            :disabled="isMainFieldDisabled"
+            :disabled="formType === 'readonly'"
+            placeholder="请输入当日生产简报"
           />
         </el-form-item>
 

src/views/pms/iotrydailyreport/ry-xj-form.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup generic="T">
 import { IotRyDailyReportApi } from '@/api/pms/iotrydailyreport'
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
 import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
 import { FormInstance, FormRules } from 'element-plus'
 import { computed, reactive, ref, watch, nextTick } from 'vue'
@@ -34,6 +35,15 @@ const NON_PROD_FIELDS = [
   { key: 'otherNptTime', label: '其他非生产时间' }
 ] as const
 
+interface ProductionStatus {
+  date: string
+  start_time: string
+  end_time: string
+  duration: number
+  operatingMode: string
+  detail: string
+}
+
 interface FormOriginal {
   id: number
   deptId: number
@@ -74,7 +84,7 @@ interface FormOriginal {
   // 其他非生产时间原因（仅作为备注字段存在）
   otherNptReason: string
 
-  productionStatus: string
+  productionStatus: ProductionStatus[]
   remark: string
   createTime: string
   opinion: string
@@ -105,7 +115,7 @@ const FORM_KEYS: (keyof FormOriginal)[] = [
   'totalStaffNum',
   'onDutyStaffNum',
   'leaveStaffNum',
-  'productionStatus',
+  // 'productionStatus',
   'remark',
   'createTime',
   'opinion',
@@ -167,6 +177,8 @@ async function loadDetail(id: number) {
       }
     })
 
+    form.value.productionStatus = []
+
     if (props.type === 'edit' && !props.noValidateStatus && res.status !== 0)
       formType.value = 'readonly'
     if (props.type === 'approval' && !props.noValidateStatus && res.auditStatus !== 10)
@@ -176,6 +188,26 @@ async function loadDetail(id: number) {
   }
 }
 
+const addProductionStatusRow = () => {
+  if (!form.value.productionStatus) {
+    form.value.productionStatus = []
+  }
+  form.value.productionStatus.push({
+    date: '',
+    start_time: '',
+    end_time: '',
+    duration: 0,
+    operatingMode: '',
+    detail: ''
+  })
+}
+
+const removeProductionStatusRow = (index: number) => {
+  form.value.productionStatus?.splice(index, 1)
+}
+
+const { ZmTable, ZmTableColumn } = useTableComponents<ProductionStatus>()
+
 function handleOpenForm(id: number, type: 'edit' | 'readonly') {
   formType.value = type
   emits('update:visible', true)
@@ -348,7 +380,7 @@ const orange = computed(() => {
     :model-value="visible"
     @update:model-value="emits('update:visible', $event)"
     header-class="mb-0!"
-    size="50%"
+    size="60%"
   >
     <template #header>
       <span class="text-xl font-bold text-[var(--el-text-color-primary)]">
@@ -548,22 +580,163 @@ const orange = computed(() => {
             class="w-full!"
           />
         </el-form-item>
-        <el-form-item class="col-span-2" label="生产动态" prop="productionStatus">
+        <el-form-item class="col-span-2" label="备注" prop="remark">
           <el-input
-            v-model="form.productionStatus"
+            v-model="form.remark"
             type="textarea"
             autosize
             maxlength="1000"
             :disabled="isMainFieldDisabled"
           />
         </el-form-item>
-        <el-form-item class="col-span-2" label="备注" prop="remark">
+
+        <div class="col-span-2">
+          <div class="flex items-center justify-between mb-2">
+            <div class="flex items-center gap-2">
+              <div class="bg-[var(--el-color-primary)] w-1 h-5 rounded-full"></div>
+              <div class="text-lg font-medium text-[var(--el-text-color-primary)]">生产动态</div>
+            </div>
+            <el-button
+              type="primary"
+              link
+              icon="ep:plus"
+              @click="addProductionStatusRow"
+              :disabled="isMainFieldDisabled"
+            >
+              添加一行
+            </el-button>
+          </div>
+
+          <ZmTable :data="form.productionStatus!" :loading="false" class="mb-4">
+            <ZmTableColumn label="日期" min-width="140" align="center">
+              <template #default="{ row, $index }">
+                <el-form-item
+                  :prop="`productionStatus.${$index}.date`"
+                  :rules="{ required: true, message: '请选择日期', trigger: 'change' }"
+                  class="mb-0!"
+                >
+                  <el-date-picker
+                    v-model="row.date"
+                    type="date"
+                    value-format="YYYY-MM-DD"
+                    placeholder="选择日期"
+                    :clearable="false"
+                    class="!w-full"
+                    :disabled="isMainFieldDisabled"
+                  />
+                </el-form-item>
+              </template>
+            </ZmTableColumn>
+
+            <ZmTableColumn label="开始时间" min-width="120" align="center">
+              <template #default="{ row, $index }">
+                <el-form-item
+                  :prop="`productionStatus.${$index}.start_time`"
+                  :rules="{ required: true, message: '必填', trigger: 'change' }"
+                  class="mb-0!"
+                >
+                  <el-time-picker
+                    v-model="row.start_time"
+                    format="HH:mm"
+                    value-format="HH:mm"
+                    placeholder="开始"
+                    class="!w-full"
+                    :clearable="false"
+                    :disabled="isMainFieldDisabled"
+                  />
+                </el-form-item>
+              </template>
+            </ZmTableColumn>
+
+            <ZmTableColumn label="结束时间" min-width="120" align="center">
+              <template #default="{ row, $index }">
+                <el-form-item
+                  :prop="`productionStatus.${$index}.end_time`"
+                  :rules="{ required: true, message: '必填', trigger: 'change' }"
+                  class="mb-0!"
+                >
+                  <el-time-picker
+                    v-model="row.end_time"
+                    format="HH:mm"
+                    value-format="HH:mm"
+                    placeholder="结束"
+                    class="!w-full"
+                    :clearable="false"
+                    :disabled="isMainFieldDisabled"
+                  />
+                </el-form-item>
+              </template>
+            </ZmTableColumn>
+
+            <ZmTableColumn label="时长(h)" min-width="100" align="center">
+              <template #default="{ row, $index }">
+                <el-form-item :prop="`productionStatus.${$index}.duration`" class="mb-0!">
+                  <el-input-number
+                    v-model="row.duration"
+                    :min="0"
+                    :controls="false"
+                    class="!w-full"
+                    :disabled="isMainFieldDisabled"
+                  />
+                </el-form-item>
+              </template>
+            </ZmTableColumn>
+
+            <ZmTableColumn label="工况" min-width="120" align="center">
+              <template #default="{ row, $index }">
+                <el-form-item
+                  :prop="`productionStatus.${$index}.operatingMode`"
+                  :rules="{ required: true, message: '必填', trigger: 'blur' }"
+                  class="mb-0!"
+                >
+                  <el-input
+                    v-model="row.operatingMode"
+                    placeholder="请输入工况"
+                    :disabled="isMainFieldDisabled"
+                  />
+                </el-form-item>
+              </template>
+            </ZmTableColumn>
+
+            <ZmTableColumn label="详细描述" min-width="200" align="center">
+              <template #default="{ row, $index }">
+                <el-form-item
+                  :prop="`productionStatus.${$index}.detail`"
+                  :rules="{ required: true, message: '必填', trigger: 'blur' }"
+                  class="mb-0!"
+                >
+                  <el-input
+                    v-model="row.detail"
+                    placeholder="生产详情"
+                    :disabled="isMainFieldDisabled"
+                  />
+                </el-form-item>
+              </template>
+            </ZmTableColumn>
+
+            <ZmTableColumn label="操作" width="60" fixed="right" align="center">
+              <template #default="{ $index }">
+                <el-button
+                  link
+                  type="danger"
+                  @click="removeProductionStatusRow($index)"
+                  :disabled="isMainFieldDisabled"
+                >
+                  删除
+                </el-button>
+              </template>
+            </ZmTableColumn>
+          </ZmTable>
+        </div>
+
+        <el-form-item v-if="isApproval" class="col-span-2" label="当日生产简报" prop="remark">
           <el-input
             v-model="form.remark"
             type="textarea"
             autosize
             maxlength="1000"
-            :disabled="isMainFieldDisabled"
+            :disabled="formType === 'readonly'"
+            placeholder="请输入当日生产简报"
           />
         </el-form-item>