台账

src/views/pms/qhse/index.vue

@@ -200,14 +200,13 @@
   </div>
 
   <!-- 新增/编辑台账对话框 -->
-  <el-dialog
-    :title="dialogTitle"
-    v-model="dialogVisible"
-    width="800px"
-    destroy-on-close
-    label-width="120px"
-    @close="closeDialog">
-    <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading">
+  <Dialog :title="dialogTitle" v-model="dialogVisible" destroy-on-close @close="closeDialog">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      v-loading="formLoading"
+      label-width="120px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="计量器具名称" prop="measureName">
@@ -333,7 +332,7 @@
       <el-button @click="closeDialog">取 消</el-button>
       <el-button type="primary" @click="submitForm" :loading="submitLoading">确 定</el-button>
     </template>
-  </el-dialog>
+  </Dialog>
 
   <el-drawer
     v-model="drawerVisible"
@@ -411,7 +410,7 @@
     </div>
   </el-drawer>
 
-  <el-dialog v-model="dialogFileView" title="附件" width="500">
+  <Dialog v-model="dialogFileView" title="附件" width="500">
     <div
       v-for="(file, index) in fileList"
       :key="index"
@@ -432,7 +431,7 @@
         <el-button type="primary" @click="dialogFileView = false"> 确认 </el-button>
       </div>
     </template>
-  </el-dialog>
+  </Dialog>
 </template>
 
 <script setup lang="ts">

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

@@ -1,11 +1,22 @@
 <template>
-  <el-row :gutter="20">
-    <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
-
-    <el-col :span="isLeftContentCollapsed ? 24 : 20" :xs="24">
-      <ContentWrap style="border: none">
-        <!-- 搜索工作栏 -->
-        <el-form :model="queryParams" ref="queryFormRef" :inline="true">
+  <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"
+        class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 py-2 pt-4 flex items-center flex-wrap min-w-0">
+        <div class="flex items-center gap-4 flex-wrap">
           <el-form-item label="计量器具编码" prop="measureCode">
             <el-input
               v-model="queryParams.measureCode"
@@ -32,14 +43,6 @@
               class="!w-150px" />
           </el-form-item>
           <el-form-item label="检测/校准有效期" prop="validityPeriod">
-            <!-- <el-date-picker
-              v-model="queryParams.validityPeriod"
-              value-format="YYYY-MM-DD"
-              type="daterange"
-              placeholder="选择检测/校准有效期"
-              clearable
-              class="!w-150px" /> -->
-
             <el-date-picker
               v-model="queryParams.validityPeriod"
               value-format="YYYY-MM-DD HH:mm:ss"
@@ -64,76 +67,91 @@
               <Icon icon="ep:download" class="mr-5px" /> 导出
             </el-button>
           </el-form-item>
-        </el-form>
-      </ContentWrap>
-
-      <!-- 列表 -->
-      <ContentWrap class="flex-1 overflow-hidden mt-15px" style="border: none">
-        <zm-table
-          :loading="loading"
-          :data="list"
-          :stripe="true"
-          height="calc(85vh - 195px)"
-          :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="measureCode" />
-          <zm-table-column label="计量器具名称" align="center" prop="measureName" />
-          <zm-table-column label="证书编码" align="center" prop="measureCertNo" />
-          <zm-table-column label="检测/校准日期" align="center" prop="detectDate" width="140">
-            <template #default="scope">
-              <span class="iot-md-date">{{ formatDateCorrectly(scope.row.detectDate) }}</span>
-            </template>
-          </zm-table-column>
-          <zm-table-column label="检测/校准机构" align="center" prop="detectOrg" />
-          <zm-table-column label="检测/校准标准" align="center" prop="detectStandard" />
-          <zm-table-column label="检测/校准内容" align="center" prop="detectContent">
-            <template #default="scope">
-              <div class="detect-content" v-html="scope.row.detectContent"></div>
-            </template>
-          </zm-table-column>
-          <zm-table-column label="检测/校准有效期" align="center" prop="validityPeriod" width="140">
-            <template #default="scope">
-              <span class="iot-md-date">{{ formatDateCorrectly(scope.row.validityPeriod) }}</span>
-            </template>
-          </zm-table-column>
-          <zm-table-column label="校准金额" align="center" prop="detectAmount" />
-          <zm-table-column label="部门名称" align="center" prop="deptName" />
-          <zm-table-column label="附件" align="center" prop="file" min-width="90">
-            <template #default="scope">
-              <el-button
-                v-if="scope.row.file"
-                link
-                type="primary"
-                @click="viewFile(scope.row.file)">
-                查看
-              </el-button>
-            </template>
-          </zm-table-column>
-          <zm-table-column label="操作" align="center" width="140" fixed="right" action>
-            <template #default="scope">
-              <el-button link type="primary" @click="openForm('update', scope.row.id)">
-                编辑
-              </el-button>
-              <el-button link type="danger" @click="handleDelete(scope.row.id)"> 删除 </el-button>
-            </template>
-          </zm-table-column>
-        </zm-table>
-        <div class="iot-md-pagination">
-          <Pagination
-            :total="total"
-            v-model:page="queryParams.pageNo"
-            v-model:limit="queryParams.pageSize"
-            @pagination="getList" />
         </div>
-      </ContentWrap>
-    </el-col>
-  </el-row>
+      </el-form>
+    </div>
 
-  <el-dialog v-model="dialogFileView" title="附件" width="500">
+    <div class="min-w-0"></div>
+
+    <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"
+              :max-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="measureCode" />
+              <zm-table-column label="计量器具名称" align="center" prop="measureName" />
+              <zm-table-column label="证书编码" align="center" prop="measureCertNo" />
+              <zm-table-column label="检测/校准日期" align="center" prop="detectDate" width="140">
+                <template #default="scope">
+                  <span class="iot-md-date">{{ formatDateCorrectly(scope.row.detectDate) }}</span>
+                </template>
+              </zm-table-column>
+              <zm-table-column label="检测/校准机构" align="center" prop="detectOrg" />
+              <zm-table-column label="检测/校准标准" align="center" prop="detectStandard" />
+              <zm-table-column label="检测/校准内容" align="center" prop="detectContent">
+                <template #default="scope">
+                  <div class="detect-content" v-html="scope.row.detectContent"></div>
+                </template>
+              </zm-table-column>
+              <zm-table-column
+                label="检测/校准有效期"
+                align="center"
+                prop="validityPeriod"
+                width="140">
+                <template #default="scope">
+                  <span class="iot-md-date">{{
+                    formatDateCorrectly(scope.row.validityPeriod)
+                  }}</span>
+                </template>
+              </zm-table-column>
+              <zm-table-column label="校准金额" align="center" prop="detectAmount" />
+              <zm-table-column label="部门名称" align="center" prop="deptName" />
+              <zm-table-column label="附件" align="center" prop="file" min-width="90">
+                <template #default="scope">
+                  <el-button
+                    v-if="scope.row.file"
+                    link
+                    type="primary"
+                    @click="viewFile(scope.row.file)">
+                    查看
+                  </el-button>
+                </template>
+              </zm-table-column>
+              <zm-table-column label="操作" align="center" width="140" fixed="right" action>
+                <template #default="scope">
+                  <el-button link type="primary" @click="openForm('update', scope.row.id)">
+                    编辑
+                  </el-button>
+                  <el-button link type="danger" @click="handleDelete(scope.row.id)">
+                    删除
+                  </el-button>
+                </template>
+              </zm-table-column>
+            </zm-table>
+          </template>
+        </el-auto-resizer>
+      </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>
+    </div>
+  </div>
+
+  <Dialog v-model="dialogFileView" title="附件" width="500">
     <div
       v-for="(file, index) in fileList"
       :key="index"
@@ -154,7 +172,7 @@
         <el-button type="primary" @click="dialogFileView = false"> 确认 </el-button>
       </div>
     </template>
-  </el-dialog>
+  </Dialog>
 
   <!-- 表单弹窗：添加/修改 -->
   <IotMeasureDetectForm ref="formRef" @success="getList" />
@@ -165,16 +183,19 @@ import download from '@/utils/download'
 import { IotMeasureDetectApi, IotMeasureDetectVO } from '@/api/pms/qhse/index'
 import IotMeasureDetectForm from './IotMeasureDetectForm.vue'
 import { formatDate } from '@/utils/formatTime'
-import DeptTree from '@/views/system/user/DeptTree2.vue'
+import DeptTreeSelect from '@/components/DeptTreeSelect/index.vue'
 import { useTableComponents } from '@/components/ZmTable/useTableComponents'
 const { ZmTable, ZmTableColumn } = useTableComponents()
+import { useUserStore } from '@/store/modules/user'
 
 /** 计量器具-检测校准明细 列表 */
 defineOptions({ name: 'IotMeasureDetect' })
+// const userStore = useUserStore()
+const rootDeptId = 156
+const deptId = useUserStore().getUser.deptId || rootDeptId
 
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
-const isLeftContentCollapsed = ref(false)
 
 const loading = ref(true) // 列表的加载中
 const list = ref<IotMeasureDetectVO[]>([]) // 列表的数据
@@ -338,14 +359,7 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
-::deep(.el-tree--highlight-current) {
-  height: 200px !important;
-}
-::deep(.el-transfer-panel__body) {
-  height: 700px !important;
-}
-
+<style scoped lang="scss">
 .file-name-text {
   flex: 1;
   overflow: hidden;