表格修改

src/views/pms/device/IotDeviceFormAdd.vue

@@ -379,6 +379,32 @@
               />
             </el-form-item>
           </el-col>
+
+          <el-col :span="8">
+            <el-form-item label="每月折旧金额" prop="monthAmount">
+              <el-input
+                v-model="formData.monthAmount"
+                @input="handleInput(formData.monthAmount, 'monthAmount')"
+                placeholder="请输入每月折旧金额"
+              />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="8">
+            <el-form-item label="总折旧月份" prop="totalMonth">
+              <el-input
+                v-model="formData.totalMonth"
+                @input="handleInput(formData.totalMonth, 'totalMonth')"
+                placeholder="请输入总折旧月份"
+              />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="8">
+            <el-form-item label="币种" prop="currency">
+              <el-input v-model="formData.currency" placeholder="请输入币种" />
+            </el-form-item>
+          </el-col>
         </el-row>
       </div>
       <div class="title-div">
@@ -548,7 +574,10 @@ const formData = ref({
   assetClass: undefined,
   carNo: undefined,
   deviceNo: undefined,
-  address: undefined
+  address: undefined,
+  totalMonth: undefined,
+  monthAmount: undefined,
+  currency: undefined
 })
 const formRules = reactive({
   yfClass: [

src/views/pms/device/index.vue

@@ -3,7 +3,10 @@
     <!-- 左侧部门树 -->
     <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
     <el-col :xs="24" :span="isLeftContentCollapsed ? 24 : 20">
-      <ContentWrap style="border: none">
+      <div
+        style="border: none; background: #fff; display: flex; align-items: center"
+        class="py-2 rounded-sm px-2"
+      >
         <!-- 搜索工作栏 -->
         <el-form
           class="-mb-15px"
@@ -157,11 +160,11 @@
             </el-button>
           </el-form-item>
         </el-form>
-      </ContentWrap>
+      </div>
 
       <!-- 列表 -->
-      <ContentWrap style="border: none">
-        <zm-table :loading="loading" :data="list" height="calc(85vh - 215px)" show-border>
+      <ContentWrap style="border: none; margin-top: 20px">
+        <zm-table :loading="loading" :data="list" height="calc(85vh - 220px)" show-border>
           <zm-table-column
             :label="t('iotDevice.serial')"
             width="70"

src/views/pms/failure/index.vue

@@ -2,7 +2,10 @@
   <el-row :gutter="20">
     <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
     <el-col :xs="24" :span="isLeftContentCollapsed ? 24 : 20">
-      <ContentWrap>
+      <div
+        style="border: none; background: #fff; display: flex; align-items: center"
+        class="py-2 rounded-sm"
+      >
         <!-- 搜索工作栏 -->
         <el-form
           class="-mb-15px"
@@ -138,95 +141,75 @@
             </el-button>
           </el-form-item>
         </el-form>
-      </ContentWrap>
+      </div>
 
       <!-- 列表 -->
-      <ContentWrap>
-        <el-table
-          height="calc(85vh - 130px)"
-          v-loading="loading"
-          :data="list"
-          :stripe="true"
-          :show-overflow-tooltip="true"
-        >
-          <el-table-column :label="t('fault.serial')" width="70" align="center">
+      <ContentWrap style="border: none; margin-top: 20px">
+        <zm-table height="calc(85vh - 140px)" :loading="loading" :data="list" show-border>
+          <zm-table-column :label="t('fault.serial')" width="70" align="center">
             <template #default="scope">
               {{ scope.$index + 1 }}
             </template>
-          </el-table-column>
+          </zm-table-column>
           <!--        <el-table-column label="故障编码" align="center" prop="failureCode" />-->
-          <el-table-column
-            :label="t('fault.faultTitle')"
-            align="left"
-            prop="failureName"
-            min-width="350"
-          />
-          <el-table-column
-            :label="t('iotMaintain.deviceCode')"
-            align="center"
-            prop="deviceCode"
-            min-width="220"
-          />
-          <el-table-column
-            :label="t('fault.deviceName')"
-            align="center"
-            prop="deviceName"
-            min-width="240"
-          />
-          <el-table-column :label="t('fault.status')" align="center" prop="status" min-width="110">
+          <zm-table-column :label="t('fault.faultTitle')" align="center" prop="failureName" />
+          <zm-table-column :label="t('iotMaintain.deviceCode')" align="center" prop="deviceCode" />
+          <zm-table-column :label="t('fault.deviceName')" align="center" prop="deviceName" />
+          <zm-table-column :label="t('fault.status')" align="center" prop="status">
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.PMS_FAILURE_STATUS" :value="scope.row.status" />
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             :label="t('faultForm.failureType')"
             align="center"
             prop="failureType"
-            min-width="110"
+            min-width="90px"
           >
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.FAILURE_TYPE" :value="scope.row.failureType" />
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             :label="t('fault.approvalStatus')"
             align="center"
             prop="auditStatus"
-            min-width="130"
+            min-width="90px"
           >
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.CRM_AUDIT_STATUS" :value="scope.row.auditStatus" />
             </template>
-          </el-table-column>
-          <el-table-column :label="t('fault.solve')" align="center" prop="ifDeal">
+          </zm-table-column>
+          <zm-table-column :label="t('fault.solve')" align="center" prop="ifDeal">
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.ifDeal" />
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             :label="t('fault.failureTime')"
             align="center"
             prop="failureTime"
             :formatter="dateFormatter"
             min-width="180px"
           />
-          <el-table-column :label="t('fault.solveTime')" align="center" prop="dealHour">
+          <zm-table-column :label="t('fault.solveTime')" align="center" prop="dealHour">
             <template #default="scope">
               {{ scope.row.dealHour && scope.row.dealHour > 0 ? scope.row.dealHour + 'H' : '' }}
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             :label="t('table.createTime')"
             align="center"
             prop="createTime"
             :formatter="dateFormatter"
             min-width="180px"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('fault.operation')"
             align="center"
             min-width="120px"
             fixed="right"
+            action
           >
             <template #default="scope">
               <el-button
@@ -256,8 +239,8 @@
                 {{ t('fault.del') }}
               </el-button>
             </template>
-          </el-table-column>
-        </el-table>
+          </zm-table-column>
+        </zm-table>
         <!-- 分页 -->
         <Pagination
           :total="total"
@@ -280,6 +263,9 @@ import IotFailureReportForm from './IotFailureReportForm.vue'
 import { DICT_TYPE, getBoolDictOptions, getStrDictOptions } from '@/utils/dict'
 import DeptTree from '@/views/system/user/DeptTree2.vue'
 
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+const { ZmTable, ZmTableColumn } = useTableComponents()
+
 /** 故障上报 列表 */
 defineOptions({ name: 'IotFailureReport' })
 

src/views/pms/information/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <ContentWrap>
+  <div
+    style="border: none; background: #fff; display: flex; align-items: center"
+    class="py-2 rounded-sm px-2"
+  >
     <!-- 搜索工作栏 -->
     <el-form
       class="-mb-15px"
@@ -8,7 +11,7 @@
       :inline="true"
       label-width="68px"
     >
-      <el-form-item :label="t('deviceForm.category')" prop="deviceType" style="width: 15vw" >
+      <el-form-item :label="t('deviceForm.category')" prop="deviceType" style="width: 15vw">
         <el-tree-select
           v-model="queryParams.deviceType"
           :data="productClassifyList"
@@ -40,10 +43,12 @@
         />
       </el-form-item>
       <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" />
-          {{ t('info.search') }}</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" />
-          {{ t('info.reset') }}</el-button>
+        <el-button @click="handleQuery"
+          ><Icon icon="ep:search" class="mr-5px" /> {{ t('info.search') }}</el-button
+        >
+        <el-button @click="resetQuery"
+          ><Icon icon="ep:refresh" class="mr-5px" /> {{ t('info.reset') }}</el-button
+        >
         <el-button
           type="primary"
           plain
@@ -64,31 +69,37 @@
         </el-button>
       </el-form-item>
     </el-form>
-  </ContentWrap>
+  </div>
 
   <!-- 列表 -->
-  <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column :label="t('iotDevice.serial')" width="70" align="center">
+  <ContentWrap style="border: none; margin-top: 20px">
+    <zm-table :loading="loading" :data="list" height="70vh">
+      <zm-table-column :label="t('iotDevice.serial')" width="70" align="center">
         <template #default="scope">
           {{ scope.$index + 1 }}
         </template>
-      </el-table-column>
-      <el-table-column :label="t('info.deviceClass')" align="center" prop="className" />
-      <el-table-column :label="t('faultForm.faultImpact')" align="center" prop="failureInfluence" />
-      <el-table-column :label="t('iotMaintain.faultySystem')" align="center" prop="failureSystem" />
-      <el-table-column :label="t('info.description')" align="center" prop="description" />
-      <el-table-column :label="t('iotMaintain.solution')" align="center" prop="solutions" />
-      <el-table-column :label="t('iotMaintain.remark')" align="center" prop="remark" />
-      <el-table-column
+      </zm-table-column>
+      <zm-table-column :label="t('info.deviceClass')" align="center" prop="className" />
+      <zm-table-column :label="t('faultForm.faultImpact')" align="center" prop="failureInfluence" />
+      <zm-table-column :label="t('iotMaintain.faultySystem')" align="center" prop="failureSystem" />
+      <zm-table-column :label="t('info.description')" align="center" prop="description" />
+      <zm-table-column :label="t('iotMaintain.solution')" align="center" prop="solutions" />
+      <zm-table-column :label="t('iotMaintain.remark')" align="center" prop="remark" />
+      <zm-table-column
         :label="t('info.createTime')"
         align="center"
         prop="createTime"
         :formatter="dateFormatter"
         width="180px"
       />
-      <!--      <el-table-column label="审核状态" align="center" prop="auditStatus" />-->
-      <el-table-column :label="t('iotMaintain.operation')" align="center" min-width="120px">
+      <!--      <zm-table-column label="审核状态" align="center" prop="auditStatus" />-->
+      <zm-table-column
+        :label="t('iotMaintain.operation')"
+        align="center"
+        min-width="120px"
+        fixed="right"
+        action
+      >
         <template #default="scope">
           <el-button
             link
@@ -107,8 +118,8 @@
             {{ t('info.delete') }}
           </el-button>
         </template>
-      </el-table-column>
-    </el-table>
+      </zm-table-column>
+    </zm-table>
     <!-- 分页 -->
     <Pagination
       :total="total"
@@ -127,8 +138,11 @@ import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { IotInformationDbApi, IotInformationDbVO } from '@/api/pms/information'
 import IotInformationDbForm from './IotInformationDbForm.vue'
-import {defaultProps, handleTree} from "@/utils/tree";
-import * as ProductClassifyApi from "@/api/pms/productclassify";
+import { defaultProps, handleTree } from '@/utils/tree'
+import * as ProductClassifyApi from '@/api/pms/productclassify'
+
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+const { ZmTable, ZmTableColumn } = useTableComponents()
 
 /** 故障知识库 列表 */
 defineOptions({ name: 'IotInformationDb' })

src/views/pms/inspect/item/index.vue

@@ -2,7 +2,10 @@
   <el-row :gutter="20">
     <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
     <el-col :xs="24" :span="isLeftContentCollapsed ? 24 : 20">
-      <ContentWrap>
+      <div
+        style="border: none; background: #fff; display: flex; align-items: center"
+        class="py-2 rounded-sm px-2"
+      >
         <!-- 搜索工作栏 -->
         <el-form
           class="-mb-15px"
@@ -68,36 +71,36 @@
             </el-button>
           </el-form-item>
         </el-form>
-      </ContentWrap>
+      </div>
 
       <!-- 列表 -->
-      <ContentWrap>
-        <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <ContentWrap style="border: none; margin-top: 20px">
+        <zm-table :loading="loading" :data="list" show-border height="calc(85vh - 180px)">
           <!--      <el-table-column label="主键id" align="center" prop="id" />-->
-          <el-table-column :label="t('iotDevice.serial')" width="70" align="center">
+          <zm-table-column :label="t('iotDevice.serial')" width="70" align="center">
             <template #default="scope">
               {{ scope.$index + 1 }}
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             :label="t('monitor.category')"
             align="center"
             prop="deviceClassifyName"
           />
-          <el-table-column :label="t('iotDevice.brand')" align="center" prop="brandName" />
-          <el-table-column :label="t('iotDevice.code')" align="center" prop="deviceCode" />
-          <el-table-column :label="t('monitor.deviceName')" align="center" prop="deviceName" />
-          <el-table-column :label="t('inspect.InspectionItems')" align="center" prop="item" />
-          <el-table-column
+          <zm-table-column :label="t('iotDevice.brand')" align="center" prop="brandName" />
+          <zm-table-column :label="t('iotDevice.code')" align="center" prop="deviceCode" />
+          <zm-table-column :label="t('monitor.deviceName')" align="center" prop="deviceName" />
+          <zm-table-column :label="t('inspect.InspectionItems')" align="center" prop="item" />
+          <zm-table-column
             :label="t('inspect.InspectionStandards')"
             align="center"
             prop="standard"
           />
-          <el-table-column :label="t('inspect.createName')" align="center" prop="createName" />
+          <zm-table-column :label="t('inspect.createName')" align="center" prop="createName" />
           <!--      <el-table-column :label="t('common.sort')" align="center" prop="sort" />-->
           <!--      <el-table-column :label="t('form.remark')" align="center" prop="remark" />-->
 
-          <el-table-column
+          <zm-table-column
             :label="t('common.createTime')"
             align="center"
             prop="createTime"
@@ -105,7 +108,13 @@
             width="180px"
           />
           <!--      <el-table-column label="部门id" align="center" prop="deptId" />-->
-          <el-table-column :label="t('operationFill.operation')" align="center" min-width="120px">
+          <zm-table-column
+            :label="t('operationFill.operation')"
+            align="center"
+            min-width="120px"
+            action
+            fixed="right"
+          >
             <template #default="scope">
               <el-button
                 link
@@ -124,8 +133,8 @@
                 {{ t('fault.del') }}
               </el-button>
             </template>
-          </el-table-column>
-        </el-table>
+          </zm-table-column>
+        </zm-table>
         <!-- 分页 -->
         <Pagination
           :total="total"
@@ -150,6 +159,9 @@ import { defaultProps, handleTree } from '@/utils/tree'
 import * as ProductClassifyApi from '@/api/pms/productclassify'
 import DeptTree from '@/views/system/user/DeptTree2.vue'
 
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+const { ZmTable, ZmTableColumn } = useTableComponents()
+
 /** 巡检项 列表 */
 defineOptions({ name: 'IotInspectItem' })
 

src/views/pms/inspect/order/index.vue

@@ -2,7 +2,10 @@
   <el-row :gutter="20">
     <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
     <el-col :xs="24" :span="isLeftContentCollapsed ? 24 : 20">
-      <ContentWrap>
+      <div
+        style="border: none; background: #fff; display: flex; align-items: center"
+        class="py-2 rounded-sm px-2"
+      >
         <!-- 搜索工作栏 -->
         <el-form
           class="-mb-15px"
@@ -17,7 +20,7 @@
               :placeholder="t('bomList.nHolder')"
               clearable
               @keyup.enter="handleQuery"
-              class="!w-240px"
+              class="!w-180px"
             />
           </el-form-item>
           <!--          <el-form-item label="工单编码" prop="inspectOrderCode">-->
@@ -34,7 +37,7 @@
               v-model="queryParams.status"
               :placeholder="t('operationFill.status')"
               clearable
-              class="!w-240px"
+              class="!w-180px"
             >
               <el-option
                 v-for="dict in getStrDictOptions(DICT_TYPE.PMS_INSPECT_ORDER_STATUS)"
@@ -52,7 +55,7 @@
               start-placeholder="开始日期"
               end-placeholder="结束日期"
               :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-              class="!w-220px"
+              class="!w-180px"
             />
           </el-form-item>
           <el-form-item>
@@ -81,36 +84,25 @@
             </el-button>
           </el-form-item>
         </el-form>
-      </ContentWrap>
+      </div>
 
       <!-- 列表 -->
-      <ContentWrap>
-        <el-table
-          v-loading="loading"
-          :data="list"
-          :stripe="true"
-          height="calc(85vh - 175px)"
-          :show-overflow-tooltip="true"
-        >
-          <el-table-column :label="t('iotDevice.serial')" width="70" align="center">
+      <ContentWrap style="border: none; margin-top: 20px">
+        <zm-table :loading="loading" :data="list" height="calc(85vh - 138px)">
+          <zm-table-column :label="t('iotDevice.serial')" width="70" align="center">
             <template #default="scope">
               {{ scope.$index + 1 }}
             </template>
-          </el-table-column>
-          <el-table-column
-            :label="t('bomList.name')"
-            align="center"
-            prop="inspectOrderTitle"
-            min-width="300"
-          />
+          </zm-table-column>
+          <zm-table-column :label="t('bomList.name')" align="center" prop="inspectOrderTitle" />
           <!--          <el-table-column label="工单编码" align="center" prop="inspectOrderCode" />-->
-          <el-table-column
+          <zm-table-column
             :label="t('route.orderType')"
             align="center"
             prop="type"
             min-width="90"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('operationFill.status')"
             align="center"
             prop="status"
@@ -119,14 +111,14 @@
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.PMS_INSPECT_ORDER_STATUS" :value="scope.row.status" />
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             :label="t('iotMaintain.PersonInCharge')"
             align="center"
             prop="chargeName"
             min-width="110"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('inspect.deviceCount')"
             align="center"
             prop="deviceCount"
@@ -135,8 +127,8 @@
             <template #default="scope">
               <el-tag type="info"> {{ scope.row.deviceCount }}</el-tag>
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             :label="t('inspect.needDevice')"
             align="center"
             prop="needDevice"
@@ -145,8 +137,8 @@
             <template #default="scope">
               <el-tag type="success"> {{ scope.row.needDevice }}</el-tag>
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             :label="t('inspect.exceptionCount')"
             align="center"
             prop="exceptionCount"
@@ -155,27 +147,28 @@
             <template #default="scope">
               <el-tag type="danger"> {{ scope.row.exceptionCount }}</el-tag>
             </template>
-          </el-table-column>
+          </zm-table-column>
           <!--          <el-table-column label="备注" align="center" prop="remark" />-->
-          <el-table-column
+          <zm-table-column
             :label="t('inspect.generateTime')"
             align="center"
             prop="createTime"
             :formatter="dateFormatter"
             min-width="180px"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('inspect.executeTime')"
             align="center"
             prop="executeDate"
             :formatter="dateFormatter"
             min-width="180px"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('iotMaintain.operation')"
             align="center"
             min-width="160px"
             fixed="right"
+            action
           >
             <template #default="scope">
               <el-button link type="primary" @click="openForm(scope.row.id)">
@@ -200,8 +193,8 @@
               </el-button>
               <!--              <el-button link type="primary" @click="openForm(scope.row.id)"> {{ t('inspect.ignore') }} </el-button>-->
             </template>
-          </el-table-column>
-        </el-table>
+          </zm-table-column>
+        </zm-table>
         <el-dialog
           v-model="dialogVisible"
           title="忽略理由"
@@ -249,6 +242,9 @@ import IotInspectOrderForm from './IotInspectOrderForm.vue'
 import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
 import DeptTree from '@/views/system/user/DeptTree2.vue'
 
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+const { ZmTable, ZmTableColumn } = useTableComponents()
+
 const { push } = useRouter()
 const { params } = useRoute()
 /** 巡检工单 列表 */

src/views/pms/inspect/plan/index.vue

@@ -3,7 +3,10 @@
     <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
 
     <el-col :xs="24" :span="isLeftContentCollapsed ? 24 : 20">
-      <ContentWrap>
+      <div
+        style="border: none; background: #fff; display: flex; align-items: center"
+        class="py-2 rounded-sm px-2"
+      >
         <!-- 搜索工作栏 -->
         <el-form
           class="-mb-15px"
@@ -67,35 +70,30 @@
             </el-button>
           </el-form-item>
         </el-form>
-      </ContentWrap>
+      </div>
 
       <!-- 列表 -->
-      <ContentWrap>
-        <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-          <el-table-column :label="t('iotDevice.serial')" width="70" align="center">
+      <ContentWrap style="border: none; margin-top: 20px">
+        <zm-table :loading="loading" :data="list" height="63vh">
+          <zm-table-column :label="t('iotDevice.serial')" width="70" align="center">
             <template #default="scope">
               {{ scope.$index + 1 }}
             </template>
-          </el-table-column>
-          <el-table-column
-            :label="t('route.planTitle')"
-            align="center"
-            prop="planTitle"
-            min-width="240"
-          />
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column :label="t('route.planTitle')" align="center" prop="planTitle" />
+          <zm-table-column
             :label="t('route.planNumber')"
             align="center"
             prop="planCode"
             min-width="200"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('route.cycle')"
             align="center"
             prop="planCycle"
             min-width="80"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('workOrderMaterial.unit')"
             align="center"
             prop="planUnit"
@@ -104,8 +102,8 @@
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.PMS_INSPECT_UNIT" :value="scope.row.planUnit" />
             </template>
-          </el-table-column>
-          <el-table-column :label="t('bomList.status')" key="status" min-width="80">
+          </zm-table-column>
+          <zm-table-column :label="t('bomList.status')" key="status" min-width="80">
             <template #default="scope">
               <el-switch
                 v-model="scope.row.status"
@@ -114,38 +112,39 @@
                 @change="handleStatusChange(scope.row)"
               />
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             :label="t('route.beginCreateTime')"
             align="center"
             prop="beginCreateTime"
             :formatter="dateFormatter"
             min-width="180px"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('route.lastCreateTime')"
             align="center"
             prop="lastCreateTime"
             :formatter="dateFormatter"
             min-width="180px"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('iotDevice.dept')"
             align="center"
             prop="deptName"
             min-width="130"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('inspect.createName')"
             align="center"
             prop="createName"
             min-width="130"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('operationFill.operation')"
             align="center"
-            min-width="180"
+            min-width="120"
             fixed="right"
+            action
           >
             <template #default="scope">
               <el-button
@@ -165,8 +164,8 @@
                 {{ t('fault.del') }}
               </el-button>
             </template>
-          </el-table-column>
-        </el-table>
+          </zm-table-column>
+        </zm-table>
         <!-- 分页 -->
         <Pagination
           :total="total"
@@ -193,6 +192,9 @@ import DeptTree from '@/views/system/user/DeptTree2.vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+const { ZmTable, ZmTableColumn } = useTableComponents()
+
 defineOptions({ name: 'IotInspectPlan' })
 const message = useMessage() // 消息弹窗
 
@@ -229,6 +231,9 @@ const handleDeptNodeClick = async (row) => {
 }
 
 const handleStatusChange = async (row: IotInspectPlanVO) => {
+  if (!isInitialized.value) {
+    return
+  }
   try {
     const text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用'
     await message.confirm('确认要"' + text + '""' + row.planTitle + '"巡检计划吗?')
@@ -239,13 +244,16 @@ const handleStatusChange = async (row: IotInspectPlanVO) => {
       row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE : CommonStatusEnum.ENABLE
   }
 }
-
+const isInitialized = ref(false)
 const getList = async () => {
   loading.value = true
   try {
     const data = await IotInspectPlanApi.getIotInspectPlanPage(queryParams)
     list.value = data.list
     total.value = data.total
+    setTimeout(() => {
+      isInitialized.value = true
+    }, 100)
   } finally {
     loading.value = false
   }

src/views/pms/inspect/route/index.vue

@@ -2,7 +2,10 @@
   <el-row :gutter="20">
     <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
     <el-col :xs="24" :span="isLeftContentCollapsed ? 24 : 20">
-      <ContentWrap>
+      <div
+        style="border: none; background: #fff; display: flex; align-items: center"
+        class="py-2 rounded-sm px-2 mb-2"
+      >
         <!-- 搜索工作栏 -->
         <el-form
           class="-mb-15px"
@@ -75,26 +78,26 @@
             </el-button>
           </el-form-item>
         </el-form>
-      </ContentWrap>
+      </div>
 
       <!-- 列表 -->
-      <ContentWrap>
-        <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-          <el-table-column :label="t('iotDevice.serial')" width="70" align="center">
+      <ContentWrap style="border: none; margin-top: 10px">
+        <zm-table :loading="loading" :data="list" height="64vh">
+          <zm-table-column :label="t('iotDevice.serial')" width="70" align="center">
             <template #default="scope">
               {{ scope.$index + 1 }}
             </template>
-          </el-table-column>
+          </zm-table-column>
           <el-table-column :label="t('route.RouteName')" align="center" prop="routeName" />
-          <el-table-column
+          <zm-table-column
             :label="t('monitor.category')"
             align="center"
             prop="deviceClassifyName"
           />
-          <el-table-column :label="t('monitor.deviceName')" align="center" prop="deviceName" />
+          <zm-table-column :label="t('monitor.deviceName')" align="center" prop="deviceName" />
           <!--      <el-table-column label="巡检项" align="center" prop="itemJson" />-->
-          <el-table-column :label="t('iotDevice.brand')" align="center" prop="brandName" />
-          <el-table-column
+          <zm-table-column :label="t('iotDevice.brand')" align="center" prop="brandName" />
+          <zm-table-column
             :label="t('common.createTime')"
             align="center"
             prop="createTime"
@@ -102,7 +105,12 @@
             width="180px"
           />
           <!--      <el-table-column label="部门id" align="center" prop="deptId" />-->
-          <el-table-column :label="t('operationFill.operation')" align="center" min-width="120px">
+          <zm-table-column
+            :label="t('operationFill.operation')"
+            align="center"
+            min-width="120px"
+            action
+          >
             <template #default="scope">
               <el-button
                 link
@@ -121,8 +129,8 @@
                 {{ t('fault.del') }}
               </el-button>
             </template>
-          </el-table-column>
-        </el-table>
+          </zm-table-column>
+        </zm-table>
         <!-- 分页 -->
         <Pagination
           :total="total"
@@ -149,6 +157,9 @@ const { push } = useRouter() // 路由跳转
 /** 巡检路线 列表 */
 defineOptions({ name: 'IotInspectRoute' })
 
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+const { ZmTable, ZmTableColumn } = useTableComponents()
+
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 let isLeftContentCollapsed = ref(false)

src/views/pms/iotopeationfill/index.vue

@@ -2,7 +2,7 @@
   <el-row :gutter="20">
     <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
     <el-col :xs="24" :span="isLeftContentCollapsed ? 24 : 20">
-      <ContentWrap>
+      <ContentWrap style="border: none">
         <!-- 搜索工作栏 -->
         <el-form
           class="-mb-15px"
@@ -79,55 +79,18 @@
       </ContentWrap>
 
       <!-- 列表 -->
-      <ContentWrap>
-        <el-table v-loading="loading" :data="list" :stripe="true" height="calc(85vh - 175px)">
-          <el-table-column :label="t('common.index')" min-width="60" align="center">
+      <ContentWrap style="border: none">
+        <zm-table :loading="loading" :data="list" height="calc(85vh - 175px)">
+          <zm-table-column :label="t('common.index')" min-width="60" align="center">
             <template #default="scope">
               {{ scope.$index + 1 }}
             </template>
-          </el-table-column>
-          <el-table-column
-            :label="t('bomList.name')"
-            align="center"
-            prop="orderName"
-            min-width="320"
-          />
-          <el-table-column
-            :label="t('operationFill.duty')"
-            align="center"
-            prop="userName"
-            min-width="100"
-          />
-          <el-table-column
-            :label="t('operationFill.orderDevice')"
-            align="center"
-            prop="fillList"
-            min-width="150"
-          >
-            <template #default="scope">
-              <el-popover
-                style="padding: 0"
-                placement="left"
-                :width="300"
-                :hide-after="0"
-                trigger="hover"
-                popper-class="project-popover"
-              >
-                <template #reference>
-                  <span class="cursor-pointer">{{ truncateText(scope.row.fillList, 20) }}</span>
-                </template>
-                <div class="scrollable-tooltip">
-                  <p>{{ scope.row.fillList }}</p>
-                </div>
-              </el-popover>
-            </template>
-          </el-table-column>
-          <el-table-column
-            :label="t('operationFill.status')"
-            align="center"
-            prop="orderStatus"
-            min-width="120"
-          >
+          </zm-table-column>
+          <zm-table-column :label="t('bomList.name')" align="center" prop="orderName" />
+          <zm-table-column :label="t('operationFill.duty')" align="center" prop="userName" />
+          <zm-table-column :label="t('operationFill.orderDevice')" align="center" prop="fillList" />
+
+          <zm-table-column :label="t('operationFill.status')" align="center" prop="orderStatus">
             <template #default="scope">
               <el-tooltip
                 v-if="scope.row.orderStatus === 3"
@@ -146,56 +109,42 @@
                 :value="scope.row.orderStatus"
               />
             </template>
-          </el-table-column>
-          <el-table-column
-            :label="t('operationFill.deviceCount')"
-            align="center"
-            prop="allDev"
-            min-width="120"
-          >
+          </zm-table-column>
+          <zm-table-column :label="t('operationFill.deviceCount')" align="center" prop="allDev">
             <template #default="scope">
               <el-tag type="info"> {{ scope.row.allDev }}</el-tag>
             </template>
-          </el-table-column>
-          <el-table-column
-            :label="t('operationFill.fillCount')"
-            align="center"
-            prop="fillDev"
-            min-width="120"
-          >
+          </zm-table-column>
+          <zm-table-column :label="t('operationFill.fillCount')" align="center" prop="fillDev">
             <template #default="scope">
               <el-tag type="success"> {{ scope.row.fillDev }}</el-tag>
             </template>
-          </el-table-column>
-          <el-table-column
-            :label="t('operationFill.unFillCount')"
-            align="center"
-            prop="unFillDev"
-            min-width="120"
-          >
+          </zm-table-column>
+          <zm-table-column :label="t('operationFill.unFillCount')" align="center" prop="unFillDev">
             <template #default="scope">
               <el-tag type="danger"> {{ scope.row.unFillDev }}</el-tag>
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             :label="t('dict.createTime')"
             align="center"
             prop="createTime"
             :formatter="dateFormatter"
             min-width="170"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('dict.fillTime')"
             align="center"
             prop="updateTime"
             :formatter="dateFormatter"
             min-width="170"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('operationFill.operation')"
             align="center"
             min-width="120px"
             fixed="right"
+            action
           >
             <template #default="scope">
               <div v-if="scope.row.orderStatus == 0 || scope.row.orderStatus == 2">
@@ -296,8 +245,8 @@
 
               <!-- 编辑按钮 -->
             </template>
-          </el-table-column>
-        </el-table>
+          </zm-table-column>
+        </zm-table>
         <el-dialog
           v-model="dialogVisible"
           title="忽略理由"
@@ -347,11 +296,15 @@ import DeptTree from '@/views/system/user/DeptTree2.vue'
 import { onMounted, ref } from 'vue'
 import { IotOpeationFillApi, IotOpeationFillVO } from '@/api/pms/iotopeationfill'
 import { useUserStore } from '@/store/modules/user'
+
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+const { ZmTable, ZmTableColumn } = useTableComponents()
 const { push } = useRouter()
 const { query } = useRoute() // 查询参数
 const deptId = query.deptId
 const orderStatus = query.orderStatus
 const createTime = query.createTime
+
 /** 巡检工单 列表 */
 defineOptions({ name: 'IotOpeationFill1' })
 const dialogVisible = ref(false)

src/views/pms/iotopeationfill/plan/index.vue

@@ -3,7 +3,10 @@
     <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
 
     <el-col :xs="24" :span="isLeftContentCollapsed ? 24 : 20">
-      <ContentWrap>
+      <div
+        style="border: none; background: #fff; display: flex; align-items: center"
+        class="py-2 rounded-sm px-2"
+      >
         <!-- 搜索工作栏 -->
         <el-form
           class="-mb-15px"
@@ -18,7 +21,7 @@
               :placeholder="t('main.nameHolder')"
               clearable
               @keyup.enter="handleQuery"
-              class="!w-240px"
+              class="!w-180px"
             />
           </el-form-item>
           <el-form-item :label="t('main.planCode')" prop="planCode">
@@ -27,7 +30,7 @@
               :placeholder="t('main.codeHolder')"
               clearable
               @keyup.enter="handleQuery"
-              class="!w-240px"
+              class="!w-180px"
             />
           </el-form-item>
           <el-form-item :label="t('common.createTime')" prop="createTime" label-width="100px">
@@ -38,7 +41,7 @@
               :start-placeholder="t('info.start')"
               :end-placeholder="t('info.end')"
               :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-              class="!w-220px"
+              class="!w-180px"
             />
           </el-form-item>
           <el-form-item>
@@ -67,36 +70,25 @@
             </el-button>
           </el-form-item>
         </el-form>
-      </ContentWrap>
+      </div>
 
       <!-- 列表 -->
-      <ContentWrap>
-        <el-table
-          v-loading="loading"
-          :data="list"
-          :stripe="true"
-          :show-overflow-tooltip="true"
-          height="calc(85vh - 175px)"
-        >
+      <ContentWrap style="border: none; margin-top: 20px">
+        <zm-table :loading="loading" :data="list" height="calc(85vh - 175px)">
           <el-table-column :label="t('iotDevice.serial')" width="70" align="center">
             <template #default="scope">
               {{ scope.$index + 1 }}
             </template>
           </el-table-column>
-          <el-table-column
-            :label="t('route.planTitle')"
-            align="center"
-            prop="planTitle"
-            min-width="240"
-          />
+          <zm-table-column :label="t('route.planTitle')" align="center" prop="planTitle" />
           <!--          <el-table-column :label="t('route.planNumber')" align="center" prop="planCode" min-width="200" />-->
-          <el-table-column
+          <zm-table-column
             :label="t('route.cycle')"
             align="center"
             prop="planCycle"
             min-width="80"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('workOrderMaterial.unit')"
             align="center"
             prop="planUnit"
@@ -105,48 +97,54 @@
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.PMS_INSPECT_UNIT" :value="scope.row.planUnit" />
             </template>
-          </el-table-column>
-          <el-table-column :label="t('bomList.status')" key="status" min-width="80">
+          </zm-table-column>
+          <zm-table-column
+            :label="t('bomList.status')"
+            prop="status"
+            column-key="status"
+            min-width="80"
+          >
             <template #default="scope">
               <el-switch
-                v-model="scope.row.status"
+                :model-value="scope.row.status"
                 :active-value="0"
                 :inactive-value="1"
-                @change="handleStatusChange(scope.row)"
+                @change="(value) => handleStatusChange(scope.row, value)"
               />
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             :label="t('route.beginCreateTime')"
             align="center"
             prop="beginCreateTime"
             :formatter="dateFormatter"
             min-width="180px"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('route.lastCreateTime')"
             align="center"
             prop="lastCreateTime"
             :formatter="dateFormatter"
             min-width="180px"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('iotDevice.dept')"
             align="center"
             prop="deptName"
             min-width="130"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('inspect.createName')"
             align="center"
             prop="createName"
             min-width="130"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('operationFill.operation')"
             align="center"
-            min-width="180"
+            min-width="120"
             fixed="right"
+            action
           >
             <template #default="scope">
               <el-button
@@ -166,8 +164,8 @@
                 {{ t('fault.del') }}
               </el-button>
             </template>
-          </el-table-column>
-        </el-table>
+          </zm-table-column>
+        </zm-table>
         <!-- 分页 -->
         <Pagination
           :total="total"
@@ -194,6 +192,9 @@ import DeptTree from '@/views/system/user/DeptTree2.vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+const { ZmTable, ZmTableColumn } = useTableComponents()
+
 defineOptions({ name: 'iotOperationPlan' })
 const message = useMessage() // 消息弹窗
 
@@ -229,24 +230,36 @@ const handleDeptNodeClick = async (row) => {
   await getList()
 }
 
-const handleStatusChange = async (row: IotOperationPlanVO) => {
+const handleStatusChange = async (row: IotOperationPlanVO, value: number) => {
+  // 如果还未初始化完成，直接返回
+  if (!isInitialized.value) {
+    return
+  }
+  const previousStatus = row.status
+  if (previousStatus === value) {
+    return
+  }
   try {
-    const text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用'
+    const text = value === CommonStatusEnum.ENABLE ? '启用' : '停用'
     await message.confirm('确认要"' + text + '""' + row.planTitle + '"巡检计划吗?')
-    await IotOperationPlanApi.updateIotOperationStatus(row.id, row.status)
+    row.status = value
+    await IotOperationPlanApi.updateIotOperationStatus(row.id, value)
     await getList()
   } catch {
-    row.status =
-      row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE : CommonStatusEnum.ENABLE
+    row.status = previousStatus
   }
 }
 
+const isInitialized = ref(false)
 const getList = async () => {
   loading.value = true
   try {
     const data = await IotOperationPlanApi.getIotOperationPlanPage(queryParams)
     list.value = data.list
     total.value = data.total
+    setTimeout(() => {
+      isInitialized.value = true
+    }, 100)
   } finally {
     loading.value = false
   }

src/views/pms/maintain/index.vue

@@ -2,7 +2,10 @@
   <el-row :gutter="20">
     <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
     <el-col :xs="24" :span="isLeftContentCollapsed ? 24 : 20">
-      <ContentWrap>
+      <div
+        style="border: none; background: #fff; display: flex; align-items: center"
+        class="py-2 rounded-sm px-2"
+      >
         <!-- 搜索工作栏 -->
         <el-form
           class="-mb-15px"
@@ -161,35 +164,19 @@
             </el-button>
           </el-form-item>
         </el-form>
-      </ContentWrap>
+      </div>
 
       <!-- 列表 -->
-      <ContentWrap>
-        <el-table
-          v-loading="loading"
-          :data="list"
-          :stripe="true"
-          :show-overflow-tooltip="true"
-          height="calc(85vh - 175px)"
-        >
-          <el-table-column :label="t('maintain.serial')" min-width="70" align="center">
+      <ContentWrap style="border: none; margin-top: 20px">
+        <zm-table :loading="loading" :data="list" height="calc(85vh - 180px)">
+          <zm-table-column :label="t('maintain.serial')" min-width="70" align="center">
             <template #default="scope">
               {{ scope.$index + 1 }}
             </template>
-          </el-table-column>
-          <el-table-column
-            :label="t('iotDevice.code')"
-            align="center"
-            prop="deviceCode"
-            width="180"
-          />
-          <el-table-column
-            :label="t('maintain.deviceName')"
-            align="center"
-            prop="deviceName"
-            width="280"
-          />
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column :label="t('iotDevice.code')" align="center" prop="deviceCode" />
+          <zm-table-column :label="t('maintain.deviceName')" align="center" prop="deviceName" />
+          <zm-table-column
             :label="t('maintain.status')"
             align="center"
             prop="status"
@@ -198,14 +185,14 @@
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.PMS_MAIN_STATUS" :value="scope.row.status" />
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             :label="t('maintain.source')"
             align="center"
             prop="maintainType"
             min-width="135"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('iotMaintain.repairType')"
             align="center"
             prop="type"
@@ -214,54 +201,45 @@
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.PMS_MAIN_TYPE" :value="scope.row.type" />
             </template>
-          </el-table-column>
-          <el-table-column
-            :label="t('maintain.shutDown')"
-            align="center"
-            prop="ifStop"
-            min-width="135"
-          >
+          </zm-table-column>
+          <zm-table-column :label="t('maintain.shutDown')" align="center" prop="ifStop">
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.ifStop" />
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             label="执行时间"
             align="center"
             prop="executeDate"
             :formatter="dateFormatter"
             min-width="180px"
           />
-          <el-table-column
-            :label="t('iotMaintain.oaFlowNo')"
-            align="center"
-            prop="oaFlowNo"
-            min-width="250"
-          />
-          <el-table-column
+          <zm-table-column :label="t('iotMaintain.oaFlowNo')" align="center" prop="oaFlowNo" />
+          <zm-table-column
             :label="t('maintain.dept')"
             align="center"
             prop="deptName"
             min-width="135"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('inspect.createName')"
             align="center"
             prop="createName"
             min-width="130"
           />
-          <el-table-column
+          <zm-table-column
             label="创建时间"
             align="center"
             prop="createTime"
             :formatter="dateFormatter"
             width="180px"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('maintain.operation')"
             align="center"
             min-width="170"
             fixed="right"
+            action
           >
             <template #default="scope">
               <el-button link type="primary" @click="detail(scope.row.id)">
@@ -297,8 +275,8 @@
                 {{ t('maintain.record') }}
               </el-button>
             </template>
-          </el-table-column>
-        </el-table>
+          </zm-table-column>
+        </zm-table>
         <el-dialog
           v-model="dialogVisible"
           title="维修方式"
@@ -354,6 +332,9 @@ import DeptTree from '@/views/system/user/DeptTree2.vue'
 import { DICT_TYPE, getBoolDictOptions, getStrDictOptions } from '@/utils/dict'
 import { useUserStore } from '@/store/modules/user'
 
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+const { ZmTable, ZmTableColumn } = useTableComponents()
+
 /** 维修工单 列表 */
 defineOptions({ name: 'IotMaintain' })
 

src/views/pms/modeltemplate/index.vue

@@ -12,7 +12,10 @@
     </el-col>
     <el-col :span="20" :xs="24">
       <!-- 搜索 -->
-      <ContentWrap>
+      <div
+        style="border: none; background: #fff; display: flex; align-items: center"
+        class="py-2 rounded-sm px-2"
+      >
         <el-form
           class="-mb-15px"
           :model="queryParams"
@@ -29,7 +32,7 @@
               class="!w-240px"
             />
           </el-form-item>
-<!--          <el-form-item label="模板编码" prop="code">
+          <!--          <el-form-item label="模板编码" prop="code">
             <el-input
               v-model="queryParams.code"
               placeholder="请输入模板编码"
@@ -64,41 +67,45 @@
             />
           </el-form-item>
           <el-form-item>
-            <el-button @click="handleQuery"><Icon icon="ep:search" />{{t('operationFill.search')}}</el-button>
-            <el-button @click="resetQuery"><Icon icon="ep:refresh" />{{t('operationFill.reset')}}</el-button>
+            <el-button @click="handleQuery"
+              ><Icon icon="ep:search" />{{ t('operationFill.search') }}</el-button
+            >
+            <el-button @click="resetQuery"
+              ><Icon icon="ep:refresh" />{{ t('operationFill.reset') }}</el-button
+            >
             <el-button
               type="primary"
               plain
               @click="openForm('create')"
               v-hasPermi="['rq:iot-model-template:create']"
             >
-              <Icon icon="ep:plus" />{{t('operationFill.add')}}
+              <Icon icon="ep:plus" />{{ t('operationFill.add') }}
             </el-button>
           </el-form-item>
         </el-form>
-      </ContentWrap>
-      <ContentWrap>
-        <el-table v-loading="loading" :data="list">
-<!--          <el-table-column
+      </div>
+      <ContentWrap style="border: none; margin-top: 20px">
+        <zm-table :loading="loading" :data="list">
+          <!--          <el-table-column
             label="模板编码"
             align="center"
             prop="code"
             :show-overflow-tooltip="true"
           />-->
-          <el-table-column
+          <zm-table-column
             :label="t('modelTemplate.name')"
             align="center"
             prop="name"
             :show-overflow-tooltip="true"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('modelTemplate.ec')"
             align="center"
             key="deviceCategoryName"
             prop="deviceCategoryName"
             :show-overflow-tooltip="true"
           />
-          <el-table-column :label="t('modelTemplate.status')" key="status">
+          <zm-table-column :label="t('modelTemplate.status')" key="status">
             <template #default="scope">
               <el-switch
                 v-model="scope.row.status"
@@ -108,23 +115,30 @@
                 :disabled="!checkPermi(['rq:iot-model-template:update'])"
               />
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             :label="t('modelTemplate.createTime')"
             align="center"
             prop="createTime"
             :formatter="dateFormatter"
-            width="180"
           />
-          <el-table-column :label="t('operationFill.operation')" align="center" width="260">
+          <zm-table-column :label="t('operationFill.operation')" align="center" width="220" action>
             <template #default="scope">
               <div class="flex items-center justify-center">
                 <el-button
                   type="primary"
                   link
-                  @click="openDetail(scope.row.deviceCategoryId+','+scope.row.deviceCategoryName+','+scope.row.name)"
+                  @click="
+                    openDetail(
+                      scope.row.deviceCategoryId +
+                        ',' +
+                        scope.row.deviceCategoryName +
+                        ',' +
+                        scope.row.name
+                    )
+                  "
                 >
-                  <Icon icon="ep:edit" />{{t('operationFill.view')}}
+                  <Icon icon="ep:edit" />{{ t('operationFill.view') }}
                 </el-button>
                 <el-button
                   type="primary"
@@ -132,22 +146,21 @@
                   @click="openForm('update', scope.row.id)"
                   v-hasPermi="['rq:iot-model-template:update']"
                 >
-                  <Icon icon="ep:edit" />{{t('modelTemplate.update')}}
+                  <Icon icon="ep:edit" />{{ t('modelTemplate.update') }}
                 </el-button>
 
                 <el-button
                   type="danger"
                   link
-                  @click="handleDelete(scope.row.id,scope.row.deviceCategoryId)"
+                  @click="handleDelete(scope.row.id, scope.row.deviceCategoryId)"
                   v-hasPermi="['rq:iot-model-template:delete']"
                 >
-                  <Icon icon="ep:delete" />{{t('modelTemplate.delete')}}
+                  <Icon icon="ep:delete" />{{ t('modelTemplate.delete') }}
                 </el-button>
-
               </div>
             </template>
-          </el-table-column>
-        </el-table>
+          </zm-table-column>
+        </zm-table>
         <Pagination
           :total="total"
           v-model:page="queryParams.pageNo"
@@ -169,16 +182,17 @@ import { CommonStatusEnum } from '@/utils/constants'
 import * as ModelTemplateApi from '@/api/pms/modeltemplate'
 import TemplateForm from './TemplateForm.vue'
 import ModelCategoryTree from './ModelCategoryTree.vue'
-import { useTreeStore } from '@/store/modules/attrTemplateTreeStore';
-import {DeviceAttrModelApi} from "@/api/pms/modelattrtemplate";
+import { useTreeStore } from '@/store/modules/attrTemplateTreeStore'
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+const { ZmTable, ZmTableColumn } = useTableComponents()
 
 defineOptions({ name: 'ModelAttrsTemplate' })
 
-const treeStore = useTreeStore();
+const treeStore = useTreeStore()
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
-const {push} = useRouter()
+const { push } = useRouter()
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数
@@ -189,14 +203,15 @@ const queryParams = reactive({
   code: undefined,
   status: undefined,
   deviceCategoryId: undefined,
-  deviceCategoryName:undefined,
+  deviceCategoryName: undefined,
   createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
 
 // 从 Store 中获取左侧 设备分类树 选中的 节点ID
-const selectedId = computed(() => treeStore.selectedId);
+const selectedId = computed(() => treeStore.selectedId)
 
+const isInitialized = ref(false)
 /** 查询 设备属性模板 列表 */
 const getList = async () => {
   loading.value = true
@@ -204,6 +219,10 @@ const getList = async () => {
     const data = await ModelTemplateApi.getModelTemplatePage(queryParams)
     list.value = data.list
     total.value = data.total
+    // 数据加载完成后，标记为已初始化
+    setTimeout(() => {
+      isInitialized.value = true
+    }, 100)
   } finally {
     loading.value = false
   }
@@ -235,12 +254,16 @@ const openForm = (type: string, id?: number) => {
 
 /** 打开详情 */
 const openDetail = (id: string) => {
-  push({ name: 'ModelAttrTemplate', params: {id} })
+  push({ name: 'ModelAttrTemplate', params: { id } })
 }
 
-
 /** 修改 设备属性模板 状态 */
 const handleStatusChange = async (row: ModelTemplateApi.ModelAttrTemplateVO) => {
+  // 如果还未初始化完成，直接返回
+  if (!isInitialized.value) {
+    return
+  }
+
   try {
     // 修改状态的二次确认
     const text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用'
@@ -260,7 +283,7 @@ const handleStatusChange = async (row: ModelTemplateApi.ModelAttrTemplateVO) =>
 const handleCommand = (command: string, row: ModelTemplateApi.ModelAttrTemplateVO) => {
   switch (command) {
     case 'handleDelete':
-      handleDelete(row.id,row.deviceCategoryId)
+      handleDelete(row.id, row.deviceCategoryId)
       break
     default:
       break
@@ -270,14 +293,14 @@ const handleCommand = (command: string, row: ModelTemplateApi.ModelAttrTemplateV
 /** 删除按钮操作 */
 const handleDelete = async (id: number | undefined, deviceId: number) => {
   try {
-    const data = await ModelTemplateApi.getIsRelated(deviceId);
-    if(data.length===0){
+    const data = await ModelTemplateApi.getIsRelated(deviceId)
+    if (data.length === 0) {
       // 删除的二次确认
       await message.delConfirm()
       // 发起删除
       await ModelTemplateApi.deleteModelTemplate(id)
       message.success(t('common.delSuccess'))
-    }else{
+    } else {
       message.error(t('form.relatedModel'))
     }