From 4906474b50f1d42e2f62be2625af2a55303df6d3 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 14 Jan 2026 16:24:01 +0800
Subject: [PATCH] feat:通用列表页弹窗样式调整

---
 applications/drone-command/src/views/basicManage/maintainRecord/FormDiaLog.vue |  121 +++++++++++++++++++++-------------------
 1 files changed, 63 insertions(+), 58 deletions(-)

diff --git a/applications/drone-command/src/views/basicManage/maintainRecord/FormDiaLog.vue b/applications/drone-command/src/views/basicManage/maintainRecord/FormDiaLog.vue
index 3abf519..66111e0 100644
--- a/applications/drone-command/src/views/basicManage/maintainRecord/FormDiaLog.vue
+++ b/applications/drone-command/src/views/basicManage/maintainRecord/FormDiaLog.vue
@@ -1,104 +1,109 @@
 <template>
-	<el-dialog v-model="visible" :title="titleEnum[dialogMode]" @closed="handleClosed" destroy-on-close>
-		<div v-if="dialogReadonly">
-			<h3>设备详情</h3>
+	<el-dialog class="ztzf-page-view-dialog" v-model="visible" :title="titleEnum[dialogMode]" @closed="handleClosed"
+		destroy-on-close>
+		<div class="detail-container" v-if="dialogReadonly">
+			<div class="detail-title">设备详情</div>
 			<el-row>
 				<el-col :span="12">
-					<div>设备名称: {{ formData.deviceName }}</div>
+					<div class="label">设备名称</div>
+					<div class="val">{{ formData.deviceName }}</div>
 				</el-col>
 				<el-col :span="12">
-					<div>设备类型: {{ getDictLabel(formData.deviceType, dictObj.deviceType) }}</div>
+					<div class="label">设备类型</div>
+					<div class="val">{{ getDictLabel(formData.deviceType, dictObj.deviceType) }}</div>
 				</el-col>
 				<el-col :span="12">
-					<div>型号 : {{ formData.deviceModel }}</div>
+					<div class="label">型号</div>
+					<div class="val">{{ formData.deviceModel }}</div>
 				</el-col>
 				<el-col :span="12">
-					<div>生产厂商 : {{ formData.manufacturer }}</div>
+					<div class="label">生产厂商</div>
+					<div class="val">{{ formData.manufacturer }}</div>
 				</el-col>
 				<el-col :span="12">
-					<div>所属部门 : {{ formData.belongDeptName }}</div>
+					<div class="label">所属部门</div>
+					<div class="val">{{ formData.belongDeptName }}</div>
 				</el-col>
 				<el-col :span="12">
-					<div>负责人 : {{ formData.charger }}</div>
+					<div class="label">负责人</div>
+					<div class="val">{{ formData.charger }}</div>
 				</el-col>
 				<el-col :span="12">
-					<div>维护计划 : {{ getPlanCycleLabel(formData) }}</div>
+					<div class="label">维护计划</div>
+					<div class="val">{{ getPlanCycleLabel(formData) }}</div>
 				</el-col>
 				<el-col :span="12">
-					<div>维护时间 : {{ list?.[0]?.maintainTime }}</div>
+					<div class="label">维护时间</div>
+					<div class="val">{{ list?.[0]?.maintainTime }}</div>
 				</el-col>
 				<el-col :span="12">
-					<div>维护内容 : {{ formData.manufacturer }}</div>
+					<div class="label">维护内容</div>
+					<div class="val">{{ formData.manufacturer }}</div>
 				</el-col>
 				<el-col :span="12">
-					<div>跟换部件 : {{ formData.manufacturer }}</div>
+					<div class="label">跟换部件</div>
+					<div class="val">{{ formData.manufacturer }}</div>
 				</el-col>
 			</el-row>
-			<h3>维护详情</h3>
-			<el-table v-loading="loading" :data="list">
-				<el-table-column type="index" width="60" label="序号" />
-				<el-table-column prop="maintainTime" label="维护时间" />
-				<el-table-column prop="maintainContent" label="维护内容" />
-				<el-table-column prop="replacePart" label="跟换部件" />
-			</el-table>
-			<el-pagination
-				v-model:current-page="searchParams.current"
-				v-model:page-size="searchParams.size"
-				:total="total"
-				@change="getList"
-			/>
+
+			<div class="detail-title">维护详情</div>
+			<div class="ztzf-table-container" v-loading="loading" element-loading-background="rgba(5, 5, 15, 0.6)">
+				<div class="ztzf-table-content">
+					<el-table class="ztzf-data-cockpit-table" :data="list">
+						<el-table-column type="index" width="60" label="序号" />
+						<el-table-column prop="maintainTime" label="维护时间" />
+						<el-table-column prop="maintainContent" label="维护内容" />
+						<el-table-column prop="replacePart" label="跟换部件" />
+					</el-table>
+				</div>
+
+				<div class="ztzf-table-pagination">
+					<el-pagination popper-class="ztzf-data-cockpit-select-popper"
+						v-model:current-page="searchParams.current" v-model:page-size="searchParams.size"
+						layout="total, prev, pager, next, sizes" :total="total" @change="getList" />
+				</div>
+			</div>
 		</div>
-		<el-form v-else ref="formRef" :model="formData" :rules="rules" :disabled="dialogReadonly" label-width="100px">
+
+		<el-form class="dialog-form" v-else ref="formRef" :model="formData" :rules="rules" :disabled="dialogReadonly"
+			label-width="120px">
 			<el-row>
 				<el-col :span="12">
 					<el-form-item label="选择设备" prop="deviceId">
-						<el-select v-model="formData.deviceId" placeholder="请选择" filterable clearable>
-							<el-option v-for="item in deviceList" :key="item.id" :label="item.deviceName" :value="item.id" />
+						<el-select class="ztzf-data-cockpit-select" popper-class="ztzf-data-cockpit-select-popper"
+							v-model="formData.deviceId" placeholder="请选择" filterable clearable>
+							<el-option v-for="item in deviceList" :key="item.id" :label="item.deviceName"
+								:value="item.id" />
 						</el-select>
 					</el-form-item>
 				</el-col>
 				<el-col :span="12">
 					<el-form-item label="维护计划周期" prop="planCycleType">
-						<el-select
-							v-model="formData.planCycleType"
-							placeholder="请选择"
-							clearable
-							@change="formData.planCycleValue = []"
-						>
-							<el-option v-for="item in planCycleOptions" :key="item.value" :label="item.label" :value="item.value" />
+						<el-select class="ztzf-data-cockpit-select" popper-class="ztzf-data-cockpit-select-popper"
+							v-model="formData.planCycleType" placeholder="请选择" clearable
+							@change="formData.planCycleValue = []">
+							<el-option v-for="item in planCycleOptions" :key="item.value" :label="item.label"
+								:value="item.value" />
 						</el-select>
 					</el-form-item>
 				</el-col>
 				<el-col :span="12">
 					<el-form-item label="维护计划时间" prop="planCycleValue">
-						<el-select
-							v-model="formData.planCycleValue"
-							placeholder="请选择"
-							clearable
-							multiple
-							:disabled="!formData.planCycleType"
-						>
-							<el-option
-								v-for="item in planCycleValueOptions"
-								:key="item.value"
-								:label="item.value"
-								:value="item.value"
-							/>
+						<el-select class="ztzf-data-cockpit-select" popper-class="ztzf-data-cockpit-select-popper"
+							v-model="formData.planCycleValue" placeholder="请选择" clearable multiple
+							:disabled="!formData.planCycleType">
+							<el-option v-for="item in planCycleValueOptions" :key="item.value" :label="item.value"
+								:value="item.value" />
 						</el-select>
 					</el-form-item>
 				</el-col>
 			</el-row>
 		</el-form>
 		<template #footer>
-			<el-button @click="handleCancel">{{ dialogReadonly ? '关闭' : '取消' }}</el-button>
-			<el-button
-				v-if="!dialogReadonly"
-				type="primary"
-				:loading="submitting"
-				:disabled="submitting"
-				@click="handleSubmit"
-			>
-				确定
+			<el-button color="#2B2B4C" @click="handleCancel">{{ dialogReadonly ? '关闭' : '取消' }}</el-button>
+			<el-button color="#284FE3" v-if="!dialogReadonly" type="primary" :loading="submitting"
+				:disabled="submitting" @click="handleSubmit">
+				保存
 			</el-button>
 		</template>
 	</el-dialog>

--
Gitblit v1.9.3