事故案例

src/views/pms/qhse/case/index.vue

@@ -1,131 +1,215 @@
 <template>
-  <div>
-    <ContentWrap style="border: none; padding: 16px">
-      <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="90px" class="flex flex-wrap gap-4">
+  <div
+    class="grid grid-cols-[auto_1fr] grid-rows-[auto_auto_minmax(0,1fr)] gap-0 gap-x-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]">
+    <DeptTreeSelect
+      class="row-span-4"
+      :top-id="rootDeptId"
+      :deptId="deptId"
+      v-model="queryParams.deptId"
+      :init-select="false"
+      :show-title="false"
+      request-api="getSimpleDeptList"
+      @node-click="handleDeptNodeClick" />
+
+    <div class="mb-1">
+      <el-form
+        :model="queryParams"
+        ref="queryFormRef"
+        :inline="true"
+        @submit.prevent
+        class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 pt-4 flex items-center flex-wrap min-w-0">
         <el-form-item label="事故类型" prop="accidentType">
-          <el-input v-model="queryParams.accidentType" placeholder="请输入事故类型" clearable class="!w-240px" />
+          <el-input
+            v-model="queryParams.accidentType"
+            placeholder="请输入事故类型"
+            clearable
+            class="!w-240px" />
         </el-form-item>
         <el-form-item label="事故等级" prop="accidentGrade">
-          <el-input v-model="queryParams.accidentGrade" placeholder="请输入事故等级" clearable class="!w-240px" />
+          <el-input
+            v-model="queryParams.accidentGrade"
+            placeholder="请输入事故等级"
+            clearable
+            class="!w-240px" />
         </el-form-item>
         <el-form-item label="现场负责人" prop="siteSupervisor">
-          <el-input v-model="queryParams.siteSupervisor" placeholder="请输入现场负责人" clearable class="!w-240px" />
+          <el-input
+            v-model="queryParams.siteSupervisor"
+            placeholder="请输入现场负责人"
+            clearable
+            class="!w-240px" />
         </el-form-item>
         <el-form-item>
-          <el-button @click="handleQuery" v-hasPermi="['rq:qhse-accident-case:query']"><Icon icon="ep:search" class="mr-5px" />搜索</el-button>
+          <el-button @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="['rq:qhse-accident-case:create']"><Icon icon="ep:plus" class="mr-5px" />新增</el-button>
-          <el-button type="success" plain :loading="exportLoading" @click="handleExport" v-hasPermi="['rq:qhse-accident-case:export']"><Icon icon="ep:download" class="mr-5px" />导出</el-button>
+          <el-button type="primary" plain @click="openForm('create')"
+            ><Icon icon="ep:plus" class="mr-5px" />新增</el-button
+          >
+          <el-button
+            type="success"
+            plain
+            :loading="exportLoading"
+            @click="handleExport"
+            v-hasPermi="['rq:qhse-accident-case:export']"
+            ><Icon icon="ep:download" class="mr-5px" />导出</el-button
+          >
         </el-form-item>
       </el-form>
-    </ContentWrap>
+    </div>
 
-    <ContentWrap style="border: none; margin-top: 16px">
-      <zm-table :loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-        <zm-table-column :label="t('monitor.serial')" width="70" align="center">
-          <template #default="scope">
-            {{ scope.$index + 1 }}
-          </template>
-        </zm-table-column>
-        <zm-table-column label="事故时间" align="center" prop="accidentTime" width="170">
-          <template #default="{ row }">
-            {{ formatDateTime(row.accidentTime) }}
-          </template>
-        </zm-table-column>
-        <zm-table-column label="现场负责人" align="center" prop="siteSupervisor" />
-        <zm-table-column label="事故类型" align="center" prop="accidentType" />
-        <zm-table-column label="事故等级" align="center" prop="accidentGrade" />
-        <zm-table-column label="附件" align="center" prop="file" min-width="120">
-          <template #default="{ row }">
-            <el-button text v-if="row.file" type="primary" size="small" @click="viewFile(row.file)">查看</el-button>
-            <span v-else>-</span>
-          </template>
-        </zm-table-column>
-        <zm-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
-        <zm-table-column label="操作" align="center" fixed="right" min-width="140" action>
-          <template #default="scope">
-            <el-button link type="primary" @click="openForm('update', scope.row.id)" v-hasPermi="['rq:qhse-accident-case:update']">编辑</el-button>
-            <el-button link type="danger" @click="handleDelete(scope.row.id)" v-hasPermi="['rq:qhse-accident-case:delete']">删除</el-button>
-          </template>
-        </zm-table-column>
-      </zm-table>
+    <div class="min-w-0"></div>
 
-      <div class="mt-4 flex justify-end">
-        <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    <div class="bg-white dark:bg-[#1d1e1f] shadow rounded-lg flex flex-col p-2 pt-4 min-w-0">
+      <div class="flex-1 relative min-h-0">
+        <el-auto-resizer class="absolute">
+          <template #default="{ width, height }">
+            <zm-table :loading="loading" :data="list" :width="width" :height="height">
+              <zm-table-column :label="t('monitor.serial')" width="70" align="center">
+                <template #default="scope">
+                  {{ scope.$index + 1 }}
+                </template>
+              </zm-table-column>
+              <zm-table-column label="事故时间" align="center" prop="accidentTime" width="170">
+                <template #default="{ row }">
+                  {{ formatDateTime(row.accidentTime) }}
+                </template>
+              </zm-table-column>
+              <zm-table-column label="现场负责人" align="center" prop="siteSupervisor" />
+              <zm-table-column label="事故类型" align="center" prop="accidentType" />
+              <zm-table-column label="事故等级" align="center" prop="accidentGrade" />
+              <zm-table-column label="附件" align="center" prop="file" min-width="120">
+                <template #default="{ row }">
+                  <el-button
+                    text
+                    v-if="row.file"
+                    type="primary"
+                    size="small"
+                    @click="viewFile(row.file)"
+                    >查看</el-button
+                  >
+                  <span v-else>-</span>
+                </template>
+              </zm-table-column>
+              <zm-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
+              <zm-table-column label="操作" align="center" fixed="right" min-width="140" action>
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    @click="openForm('update', scope.row.id)"
+                    v-hasPermi="['rq:qhse-accident-case:update']"
+                    >编辑</el-button
+                  >
+                  <el-button
+                    link
+                    type="danger"
+                    @click="handleDelete(scope.row.id)"
+                    v-hasPermi="['rq:qhse-accident-case:delete']"
+                    >删除</el-button
+                  >
+                </template>
+              </zm-table-column>
+            </zm-table>
+          </template>
+        </el-auto-resizer>
       </div>
-    </ContentWrap>
-
-    <Dialog :title="dialogTitle" v-model="dialogVisible" width="600px" destroy-on-close @close="closeDialog">
-      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" v-loading="formLoading">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="事故时间" prop="accidentTime">
-              <el-date-picker
-                v-model="formData.accidentTime"
-                type="datetime"
-                value-format="YYYY-MM-DD HH:mm:ss"
-                placeholder="请选择事故时间"
-                style="width: 100%" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="现场负责人" prop="siteSupervisor">
-              <el-input v-model="formData.siteSupervisor" placeholder="请输入现场负责人" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="事故类型" prop="accidentType">
-              <el-input v-model="formData.accidentType" placeholder="请输入事故类型" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="事故等级" prop="accidentGrade">
-              <el-input v-model="formData.accidentGrade" placeholder="请输入事故等级" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <el-row :gutter="20">
-          <el-col :span="24">
-            <el-form-item label="附件" prop="file">
-              <UploadFile v-model="formData.file" :file-type="['doc', 'docx', 'pdf', 'jpg', 'png', 'jpeg', 'xls', 'xlsx', 'bmp']" :limit="5" :file-size="100" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <el-row :gutter="20">
-          <el-col :span="24">
-            <el-form-item label="备注" prop="remark">
-              <el-input type="textarea" :rows="4" v-model="formData.remark" placeholder="请输入备注" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
 
-      <template #footer>
-        <el-button type="primary" @click="submitForm" :disabled="formLoading">确定</el-button>
-        <el-button @click="dialogVisible = false">取消</el-button>
-      </template>
-    </Dialog>
-
-    <Dialog title="附件" v-model="dialogFileView" width="500px">
-      <div v-for="(item, index) in fileList" :key="index" class="mt-4 flex items-center justify-between gap-4">
-        <span class="truncate">{{ extractFileName(item) }}</span>
-        <div class="flex gap-2">
-          <el-button type="primary" text @click="viewFileInfo(item)">查看</el-button>
-          <el-button type="primary" text @click="downloadFile(item)">下载</el-button>
-        </div>
+      <div class="h-8 mt-2 flex items-center justify-end">
+        <Pagination
+          :total="total"
+          v-model:page="queryParams.pageNo"
+          v-model:limit="queryParams.pageSize"
+          @pagination="getList" />
       </div>
-      <template #footer>
-        <div class="dialog-footer mt-6">
-          <el-button type="primary" @click="dialogFileView = false">确认</el-button>
-        </div>
-      </template>
-    </Dialog>
+    </div>
   </div>
+
+  <Dialog
+    :title="dialogTitle"
+    v-model="dialogVisible"
+    width="600px"
+    destroy-on-close
+    @close="closeDialog">
+    <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="事故时间" prop="accidentTime">
+            <el-date-picker
+              v-model="formData.accidentTime"
+              type="datetime"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择事故时间"
+              style="width: 100%" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="现场负责人" prop="siteSupervisor">
+            <el-input v-model="formData.siteSupervisor" placeholder="请输入现场负责人" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="事故类型" prop="accidentType">
+            <el-input v-model="formData.accidentType" placeholder="请输入事故类型" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="事故等级" prop="accidentGrade">
+            <el-input v-model="formData.accidentGrade" placeholder="请输入事故等级" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="附件" prop="file">
+            <UploadFile
+              v-model="formData.file"
+              :file-type="['doc', 'docx', 'pdf', 'jpg', 'png', 'jpeg', 'xls', 'xlsx', 'bmp']"
+              :limit="5"
+              :file-size="100" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="备注" prop="remark">
+            <el-input
+              type="textarea"
+              :rows="4"
+              v-model="formData.remark"
+              placeholder="请输入备注" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <template #footer>
+      <el-button type="primary" @click="submitForm" :disabled="formLoading">确定</el-button>
+      <el-button @click="dialogVisible = false">取消</el-button>
+    </template>
+  </Dialog>
+
+  <Dialog title="附件" v-model="dialogFileView" width="500px">
+    <div
+      v-for="(item, index) in fileList"
+      :key="index"
+      class="mt-4 flex items-center justify-between gap-4">
+      <span class="truncate">{{ extractFileName(item) }}</span>
+      <div class="flex gap-2">
+        <el-button type="primary" text @click="viewFileInfo(item)">查看</el-button>
+        <el-button type="primary" text @click="downloadFile(item)">下载</el-button>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer mt-6">
+        <el-button type="primary" @click="dialogFileView = false">确认</el-button>
+      </div>
+    </template>
+  </Dialog>
 </template>
 
 <script setup lang="ts">
@@ -134,9 +218,13 @@ import { useI18n } from 'vue-i18n'
 import { formatDate } from '@/utils/formatTime'
 import UploadFile from '@/components/UploadFile/src/UploadFile.vue'
 import { AccidentCaseApi } from '@/api/pms/qhse/index'
+import { useUserStore } from '@/store/modules/user'
 
 defineOptions({ name: 'QhseAccidentCase' })
 
+const rootDeptId = 156
+const deptId = useUserStore().getUser.deptId || rootDeptId
+
 const message = useMessage()
 const { t } = useI18n()
 
@@ -158,7 +246,8 @@ const queryParams = reactive({
   pageSize: 10,
   accidentType: undefined,
   accidentGrade: undefined,
-  siteSupervisor: undefined
+  siteSupervisor: undefined,
+  deptId: undefined
 })
 
 const createDefaultForm = () => ({
@@ -195,6 +284,12 @@ const getList = async () => {
   }
 }
 
+const handleDeptNodeClick = async (row) => {
+  queryParams.deptId = row.id
+  queryParams.pageNo = 1
+  getList()
+}
+
 const handleQuery = () => {
   queryParams.pageNo = 1
   getList()
@@ -294,7 +389,9 @@ const extractFileName = (url: string) => {
 }
 
 const viewFileInfo = (file: string) => {
-  window.open('http://doc.deepoil.cc:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(file)))
+  window.open(
+    'http://doc.deepoil.cc:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(file))
+  )
 }
 
 const downloadFile = async (url: string) => {