浏览代码

fix(iotrddailyreport): 调整瑞都日报搜索栏布局问题

Zimo 3 天之前
父节点
当前提交
fce6ef165d

+ 38 - 47
src/views/pms/iotrddailyreport/fillDailyReport.vue

@@ -190,30 +190,26 @@ function realValue(type: any, value: string) {
 
 <template>
   <div
-    class="grid grid-cols-[auto_1fr] grid-rows-[62px_1fr] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]"
-  >
+    class="grid grid-cols-[auto_minmax(0,1fr)] grid-rows-[auto_minmax(0,1fr)] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]">
     <DeptTreeSelect
       :top-id="163"
       :deptId="deptId"
       v-model="query.deptId"
       :show-title="false"
-      class="row-span-2"
-    />
+      class="row-span-2" />
 
     <!-- <div class="p-4 bg-white dark:bg-[#1d1e1f] shadow rounded-lg row-span-2"> </div> -->
     <el-form
       size="default"
-      class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 gap-8 flex items-center justify-between"
-    >
-      <div class="flex items-center gap-8">
+      class="min-h-62px bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 py-3 gap-x-8 gap-y-3 flex flex-wrap items-center justify-between">
+      <div class="min-w-0 flex flex-1 flex-wrap items-center gap-x-8 gap-y-3">
         <el-form-item label="项目">
           <el-input
             v-model="query.contractName"
             placeholder="请输入项目"
             clearable
             @keyup.enter="handleQuery()"
-            class="!w-240px"
-          />
+            class="!w-240px" />
         </el-form-item>
         <el-form-item label="任务">
           <el-input
@@ -221,8 +217,7 @@ function realValue(type: any, value: string) {
             placeholder="请输入任务"
             clearable
             @keyup.enter="handleQuery()"
-            class="!w-240px"
-          />
+            class="!w-240px" />
         </el-form-item>
         <el-form-item label="创建时间" prop="createTime">
           <el-date-picker
@@ -232,23 +227,23 @@ function realValue(type: any, value: string) {
             start-placeholder="开始日期"
             end-placeholder="结束日期"
             :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-            class="!w-220px"
-            :shortcuts="rangeShortcuts"
-          />
+            class="!w-300px max-w-full"
+            :shortcuts="rangeShortcuts" />
         </el-form-item>
       </div>
-      <el-form-item>
-        <el-button
-          type="primary"
-          @click="handleOpenCreateForm()"
-          v-hasPermi="['pms:iot-rd-daily-report:update']"
-        >
-          新增日报
-        </el-button>
-        <el-button type="primary" @click="handleQuery()">
-          <Icon icon="ep:search" class="mr-5px" /> 搜索
-        </el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" />重置</el-button>
+      <el-form-item class="daily-report-actions shrink-0">
+        <div class="flex flex-wrap items-center justify-end gap-3">
+          <el-button
+            type="primary"
+            @click="handleOpenCreateForm()"
+            v-hasPermi="['pms:iot-rd-daily-report:update']">
+            新增日报
+          </el-button>
+          <el-button type="primary" @click="handleQuery()">
+            <Icon icon="ep:search" class="mr-5px" /> 搜索
+          </el-button>
+          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" />重置</el-button>
+        </div>
         <!-- <el-button
           type="primary"
           plain
@@ -262,7 +257,7 @@ function realValue(type: any, value: string) {
         </el-button> -->
       </el-form-item>
     </el-form>
-    <div class="bg-white dark:bg-[#1d1e1f] shadow rounded-lg flex flex-col p-4">
+    <div class="min-h-0 bg-white dark:bg-[#1d1e1f] shadow rounded-lg flex flex-col p-4">
       <div class="flex-1 relative">
         <el-auto-resizer class="absolute">
           <template #default="{ width, height }">
@@ -272,8 +267,7 @@ function realValue(type: any, value: string) {
               :width="width"
               :max-height="height"
               :height="height"
-              show-border
-            >
+              show-border>
               <zm-table-column label="操作" width="140" fixed="left" action>
                 <template #default="scope">
                   <el-button
@@ -281,16 +275,14 @@ function realValue(type: any, value: string) {
                     type="primary"
                     @click="handleOpenForm(scope.row.id, 'edit')"
                     v-hasPermi="['pms:iot-rd-daily-report:update']"
-                    v-if="scope.row.status === 0"
-                  >
+                    v-if="scope.row.status === 0">
                     填报
                   </el-button>
                   <el-button
                     link
                     type="success"
                     @click="handleOpenForm(scope.row.id, 'detail', scope.row)"
-                    v-hasPermi="['pms:iot-rd-daily-report:query']"
-                  >
+                    v-hasPermi="['pms:iot-rd-daily-report:query']">
                     查看
                   </el-button>
                   <el-button
@@ -302,8 +294,7 @@ function realValue(type: any, value: string) {
                     "
                     @click="handleOpenForm(scope.row.id, 'time', scope.row)"
                     v-hasPermi="['pms:iot-rd-daily-report:non-productive']"
-                    v-if="scope.row.auditStatus === 20"
-                  >
+                    v-if="scope.row.auditStatus === 20">
                     时效
                   </el-button>
                 </template>
@@ -312,8 +303,7 @@ function realValue(type: any, value: string) {
                 prop="createTime"
                 label="创建时间"
                 cover-formatter
-                :real-value="formCreateTime"
-              />
+                :real-value="formCreateTime" />
               <zm-table-column
                 prop="status"
                 label="日报状态"
@@ -321,13 +311,11 @@ function realValue(type: any, value: string) {
                 :real-value="
                   (row: ListItem) =>
                     realValue(DICT_TYPE.OPERATION_FILL_ORDER_STATUS, row.status ?? '')
-                "
-              >
+                ">
                 <template #default="scope">
                   <dict-tag
                     :type="DICT_TYPE.OPERATION_FILL_ORDER_STATUS"
-                    :value="scope.row.status"
-                  />
+                    :value="scope.row.status" />
                 </template>
               </zm-table-column>
               <zm-table-column prop="auditStatus" label="审批状态">
@@ -353,8 +341,9 @@ function realValue(type: any, value: string) {
                 prop="nonProductionRate"
                 label="非生产时效"
                 cover-formatter
-                :real-value="(row) => (Number(row.nonProductionRate ?? 0) * 100).toFixed(2) + '%'"
-              />
+                :real-value="
+                  (row) => (Number(row.nonProductionRate ?? 0) * 100).toFixed(2) + '%'
+                " />
               <zm-table-column label="非生产时间">
                 <zm-table-column prop="accidentTime" label="工程质量" />
                 <zm-table-column prop="repairTime" label="设备故障" />
@@ -387,8 +376,7 @@ function realValue(type: any, value: string) {
           :total="total"
           layout="total, sizes, prev, pager, next, jumper"
           @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-        />
+          @current-change="handleCurrentChange" />
       </div>
     </div>
   </div>
@@ -397,8 +385,7 @@ function realValue(type: any, value: string) {
     :id="viewId"
     ref="formRef"
     :load-list="loadList"
-    v-model:visible="visible"
-  />
+    v-model:visible="visible" />
   <!-- <IotRdDailyReportForm ref="formRef" @success="loadList" /> -->
 </template>
 
@@ -406,4 +393,8 @@ function realValue(type: any, value: string) {
 :deep(.el-form-item) {
   margin-bottom: 0;
 }
+
+.daily-report-actions :deep(.el-button + .el-button) {
+  margin-left: 0;
+}
 </style>

+ 19 - 13
src/views/pms/iotrddailyreport/index.vue

@@ -261,7 +261,7 @@ onMounted(() => {
 
 <template>
   <div
-    class="grid grid-cols-[auto_1fr] grid-rows-[62px_1fr] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]">
+    class="grid grid-cols-[auto_minmax(0,1fr)] grid-rows-[auto_minmax(0,1fr)] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]">
     <DeptTreeSelect
       :top-id="163"
       :deptId="deptId"
@@ -272,8 +272,8 @@ onMounted(() => {
     <!-- <div class="p-4 bg-white dark:bg-[#1d1e1f] shadow rounded-lg row-span-2"> </div> -->
     <el-form
       size="default"
-      class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 gap-8 flex items-center justify-between">
-      <div class="flex items-center gap-8">
+      class="min-h-62px bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 py-3 gap-x-8 gap-y-3 flex flex-wrap items-center justify-between">
+      <div class="min-w-0 flex flex-1 flex-wrap items-center gap-x-8 gap-y-3">
         <el-form-item label="项目">
           <el-input
             v-model="query.contractName"
@@ -298,15 +298,20 @@ onMounted(() => {
             start-placeholder="开始日期"
             end-placeholder="结束日期"
             :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-            class="!w-220px"
+            class="!w-300px max-w-full"
             :shortcuts="rangeShortcuts" />
         </el-form-item>
       </div>
-      <el-form-item>
-        <el-button type="primary" @click="handleQuery()">
-          <Icon icon="ep:search" class="mr-5px" /> 搜索
-        </el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" />重置</el-button>
+      <el-form-item class="daily-report-actions shrink-0">
+        <div class="flex flex-wrap items-center justify-end gap-3">
+          <el-button type="primary" @click="handleQuery()">
+            <Icon icon="ep:search" class="mr-5px" /> 搜索
+          </el-button>
+          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" />重置</el-button>
+          <el-button type="success" plain @click="handleExport" :loading="exportLoading">
+            <Icon icon="ep:download" class="mr-5px" /> 导出
+          </el-button>
+        </div>
         <!-- <el-button
           type="primary"
           plain
@@ -315,12 +320,9 @@ onMounted(() => {
         >
           <Icon icon="ep:plus" class="mr-5px" /> 新增
         </el-button> -->
-        <el-button type="success" plain @click="handleExport" :loading="exportLoading">
-          <Icon icon="ep:download" class="mr-5px" /> 导出
-        </el-button>
       </el-form-item>
     </el-form>
-    <div class="bg-white dark:bg-[#1d1e1f] shadow rounded-lg flex flex-col p-4">
+    <div class="min-h-0 bg-white dark:bg-[#1d1e1f] shadow rounded-lg flex flex-col p-4">
       <div class="flex-1 relative">
         <el-auto-resizer class="absolute">
           <template #default="{ width, height }">
@@ -560,4 +562,8 @@ onMounted(() => {
 :deep(.el-form-item) {
   margin-bottom: 0;
 }
+
+.daily-report-actions :deep(.el-button + .el-button) {
+  margin-left: 0;
+}
 </style>

+ 38 - 43
src/views/pms/iotrddailyreport/statistics.vue

@@ -167,30 +167,26 @@ function handleWellNameClick(taskId: number) {
 
 <template>
   <div
-    class="grid grid-cols-[auto_1fr] grid-rows-[62px_1fr] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]"
-  >
+    class="grid grid-cols-[auto_minmax(0,1fr)] grid-rows-[auto_minmax(0,1fr)] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]">
     <DeptTreeSelect
       :top-id="163"
       :deptId="deptId"
       v-model="query.deptId"
       :show-title="false"
-      class="row-span-2"
-    />
+      class="row-span-2" />
 
     <!-- <div class="p-4 bg-white dark:bg-[#1d1e1f] shadow rounded-lg row-span-2"> </div> -->
     <el-form
       size="default"
-      class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 gap-8 flex items-center justify-between"
-    >
-      <div class="flex items-center gap-8">
+      class="min-h-62px bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 py-3 gap-x-8 gap-y-3 flex flex-wrap items-center justify-between">
+      <div class="min-w-0 flex flex-1 flex-wrap items-center gap-x-8 gap-y-3">
         <el-form-item label="项目">
           <el-input
             v-model="query.contractName"
             placeholder="请输入项目"
             clearable
             @keyup.enter="handleQuery()"
-            class="!w-240px"
-          />
+            class="!w-240px" />
         </el-form-item>
         <el-form-item label="任务">
           <el-input
@@ -198,8 +194,7 @@ function handleWellNameClick(taskId: number) {
             placeholder="请输入任务"
             clearable
             @keyup.enter="handleQuery()"
-            class="!w-240px"
-          />
+            class="!w-240px" />
         </el-form-item>
         <el-form-item label="创建时间" prop="createTime">
           <el-date-picker
@@ -209,30 +204,30 @@ function handleWellNameClick(taskId: number) {
             start-placeholder="开始日期"
             end-placeholder="结束日期"
             :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-            class="!w-220px"
-            :shortcuts="rangeShortcuts"
-          />
+            class="!w-300px max-w-full"
+            :shortcuts="rangeShortcuts" />
         </el-form-item>
       </div>
-      <el-form-item>
-        <el-button type="primary" @click="handleQuery()">
-          <Icon icon="ep:search" class="mr-5px" /> 搜索
-        </el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" />重置</el-button>
-        <el-button
-          type="primary"
-          plain
-          @click="openForm('create')"
-          v-hasPermi="['pms:iot-rd-daily-report:create']"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
-        </el-button>
-        <el-button type="success" plain @click="handleExport" :loading="exportLoading">
-          <Icon icon="ep:download" class="mr-5px" /> 导出
-        </el-button>
+      <el-form-item class="daily-report-actions shrink-0">
+        <div class="flex flex-wrap items-center justify-end gap-3">
+          <el-button type="primary" @click="handleQuery()">
+            <Icon icon="ep:search" class="mr-5px" /> 搜索
+          </el-button>
+          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" />重置</el-button>
+          <el-button
+            type="primary"
+            plain
+            @click="openForm('create')"
+            v-hasPermi="['pms:iot-rd-daily-report:create']">
+            <Icon icon="ep:plus" class="mr-5px" /> 新增
+          </el-button>
+          <el-button type="success" plain @click="handleExport" :loading="exportLoading">
+            <Icon icon="ep:download" class="mr-5px" /> 导出
+          </el-button>
+        </div>
       </el-form-item>
     </el-form>
-    <div class="bg-white dark:bg-[#1d1e1f] shadow rounded-lg flex flex-col p-4">
+    <div class="min-h-0 bg-white dark:bg-[#1d1e1f] shadow rounded-lg flex flex-col p-4">
       <div class="flex-1 relative">
         <el-auto-resizer class="absolute">
           <template #default="{ width, height }">
@@ -242,20 +237,17 @@ function handleWellNameClick(taskId: number) {
               :width="width"
               :max-height="height"
               :height="height"
-              show-border
-            >
+              show-border>
               <zm-table-column
                 prop="rdStatus"
                 :label="t('project.status')"
                 :real-value="
                   (row: ListItem) => realValue(DICT_TYPE.PMS_PROJECT_RD_STATUS, row.rdStatus ?? '')
-                "
-              >
+                ">
                 <template #default="scope">
                   <dict-tag
                     :type="DICT_TYPE.PMS_PROJECT_RD_STATUS"
-                    :value="scope.row.rdStatus ?? ''"
-                  />
+                    :value="scope.row.rdStatus ?? ''" />
                 </template>
               </zm-table-column>
               <zm-table-column prop="period" label="施工周期(D)" />
@@ -267,8 +259,7 @@ function handleWellNameClick(taskId: number) {
                   <el-link
                     type="primary"
                     @click="handleWellNameClick(scope.row.taskId)"
-                    underline="never"
-                  >
+                    underline="never">
                     {{ scope.row.wellName }}
                   </el-link>
                 </template>
@@ -289,8 +280,9 @@ function handleWellNameClick(taskId: number) {
                 prop="nonProductionRate"
                 label="非生产时效"
                 cover-formatter
-                :real-value="(row) => (Number(row.nonProductionRate ?? 0) * 100).toFixed(2) + '%'"
-              />
+                :real-value="
+                  (row) => (Number(row.nonProductionRate ?? 0) * 100).toFixed(2) + '%'
+                " />
               <zm-table-column prop="manufactureName" label="甲方" action />
             </zm-table>
           </template>
@@ -307,8 +299,7 @@ function handleWellNameClick(taskId: number) {
           :total="total"
           layout="total, sizes, prev, pager, next, jumper"
           @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-        />
+          @current-change="handleCurrentChange" />
       </div>
     </div>
   </div>
@@ -320,4 +311,8 @@ function handleWellNameClick(taskId: number) {
 :deep(.el-form-item) {
   margin-bottom: 0;
 }
+
+.daily-report-actions :deep(.el-button + .el-button) {
+  margin-left: 0;
+}
 </style>