feat:通用列表页弹窗样式调整

shuishen

2026-01-14 4906474b50f1d42e2f62be2625af2a55303df6d3

 applications/drone-command/src/views/areaManage/partition/FormDiaLog.vue

@@ -1,32 +1,72 @@
<template>
   <el-dialog v-model="visible" :title="titleEnum[dialogMode]" :close-on-click-modal="false" width="80%">
   <el-dialog class="ztzf-page-view-dialog" v-model="visible" :title="titleEnum[dialogMode]"
      :close-on-click-modal="false" width="80%">
      <div class="bodyBox">
         <div class="leftMap ztzf-cesium" id="mapContainer"></div>
         <div class="rightInfo">
            <div v-if="readonly">
               <div>区域名称: {{ formData.areaName }}</div>
               <div>区域位置: {{ formatLocation(formData) }}</div>
               <div>区域面积: {{ formData.areaSize || '-' }}k㎡</div>
               <div>区域类型: {{ getDictLabel(formData.areaType, dictObj.areaType) }}</div>
               <div>触发条件: {{ formData.triggerCondition }}</div>
               <div>响应机制: {{ formData.responseMechanism }}</div>
               <div>管控级别: {{ getDictLabel(formData.controlLevel, dictObj.controlLevel) }}</div>
               <div>关联派出所: {{ formData.policeStationName }}</div>
               <div>可飞行时间段: {{ formatFlyDate(formData) }}</div>
               <el-table ref="deviceTableRef" :data="deviceOptions" row-key="id">
                  <el-table-column prop="deviceName" label="设备名称" />
                  <el-table-column prop="deviceType" label="类型">
                     <template v-slot="{ row }">
                        {{ getDictLabel(row.deviceType, dictObj.deviceType) }}
                     </template>
                  </el-table-column>
               </el-table>
            <div class="detail-container" v-if="readonly">
               <div class="detail-title">区域详情</div>
               <el-row>
                  <el-col :span="24">
                     <div class="label">区域名称</div>
                     <div class="val">{{ formData.areaName }}</div>
                  </el-col>
                  <el-col :span="24">
                     <div class="label">区域位置</div>
                     <div class="val">{{ formatLocation(formData) }}</div>
                  </el-col>
                  <el-col :span="24">
                     <div class="label">区域面积</div>
                     <div class="val">{{ formData.areaSize || '-' }}k㎡</div>
                  </el-col>
                  <el-col :span="24">
                     <div class="label">区域类型</div>
                     <div class="val">{{ getDictLabel(formData.areaType, dictObj.areaType) }}</div>
                  </el-col>
                  <el-col :span="24">
                     <div class="label">触发条件</div>
                     <div class="val">{{ formData.triggerCondition }}</div>
                  </el-col>
                  <el-col :span="24">
                     <div class="label">响应机制</div>
                     <div class="val">{{ formData.responseMechanism }}</div>
                  </el-col>
                  <el-col :span="24">
                     <div class="label">管控级别</div>
                     <div class="val">{{ getDictLabel(formData.controlLevel, dictObj.controlLevel) }}</div>
                  </el-col>
                  <el-col :span="24">
                     <div class="label">关联派出所</div>
                     <div class="val">{{ formData.policeStationName }}</div>
                  </el-col>
                  <el-col :span="24">
                     <div class="label">可飞行时间段</div>
                     <div class="val">{{ formatFlyDate(formData) }}</div>
                  </el-col>
               </el-row>

               <div class="detail-title">关联设备</div>
               <div class="ztzf-table-container">
                  <div class="ztzf-table-content">
                     <el-table class="ztzf-data-cockpit-table" ref="deviceTableRef" :data="deviceOptions"
                        row-key="id">
                        <el-table-column prop="deviceName" label="设备名称" />
                        <el-table-column prop="deviceType" label="类型">
                           <template v-slot="{ row }">
                              {{ getDictLabel(row.deviceType, dictObj.deviceType) }}
                           </template>
                        </el-table-column>
                     </el-table>
                  </div>
               </div>
            </div>
            <el-form v-else ref="formRef" :model="formData" :rules="rules" :disabled="readonly" label-width="100px">
            <el-form class="dialog-form" v-else ref="formRef" :model="formData" :rules="rules" :disabled="readonly"
               label-width="100px">
               <el-row>
                  <el-col :span="24">
                     <el-form-item label="区域名称" prop="areaName">
                        <el-input v-model="formData.areaName" maxlength="50" placeholder="请输入" clearable />
                        <el-input class="ztzf-data-cockpit-search-input" v-model="formData.areaName"
                           maxlength="50" placeholder="请输入" clearable />
                     </el-form-item>
                  </el-col>
                  <el-col :span="24">
@@ -39,7 +79,8 @@
                  </el-col>
                  <el-col :span="24">
                     <el-form-item label="区域类型" prop="areaType">
                        <el-select v-model="formData.areaType" placeholder="请选择" clearable>
                        <el-select class="ztzf-data-cockpit-select" popper-class="ztzf-data-cockpit-select-popper"
                           v-model="formData.areaType" placeholder="请选择" clearable>
                           <el-option
                              v-for="item in dictObj.areaType"
                              :key="item.dictKey"
@@ -51,17 +92,20 @@
                  </el-col>
                  <el-col :span="24">
                     <el-form-item label="响应机制" prop="responseMechanism">
                        <el-input v-model="formData.responseMechanism" maxlength="200" placeholder="请输入" clearable />
                        <el-input class="ztzf-data-cockpit-search-input" v-model="formData.responseMechanism"
                           maxlength="200" placeholder="请输入" clearable />
                     </el-form-item>
                  </el-col>
                  <el-col :span="24">
                     <el-form-item label="触发条件" prop="triggerCondition">
                        <el-input v-model="formData.triggerCondition" maxlength="200" placeholder="请输入" clearable />
                        <el-input class="ztzf-data-cockpit-search-input" v-model="formData.triggerCondition"
                           maxlength="200" placeholder="请输入" clearable />
                     </el-form-item>
                  </el-col>
                  <el-col :span="24">
                     <el-form-item label="管控级别" prop="controlLevel">
                        <el-select v-model="formData.controlLevel" placeholder="请选择" clearable>
                        <el-select class="ztzf-data-cockpit-select" popper-class="ztzf-data-cockpit-select-popper"
                           v-model="formData.controlLevel" placeholder="请选择" clearable>
                           <el-option
                              v-for="item in dictObj.controlLevel"
                              :key="item.dictKey"
@@ -74,6 +118,8 @@
                  <el-col :span="24">
                     <el-form-item label="可飞行时段" prop="flyDateStart">
                        <el-date-picker
                           class="ztzf-data-cockpit-date-picker"
                           popper-class="ztzf-data-cockpit-date-picker-popper"
                           v-model="flyDateRange"
                           type="datetimerange"
                           range-separator="至"
@@ -86,7 +132,8 @@
                  </el-col>
                  <el-col :span="24">
                     <el-form-item label="关联派出所" prop="policeStationId">
                        <el-select v-model="formData.policeStationId" placeholder="请选择" clearable>
                        <el-select class="ztzf-data-cockpit-select" popper-class="ztzf-data-cockpit-select-popper"
                           v-model="formData.policeStationId" placeholder="请选择" clearable>
                           <el-option
                              v-for="item in policeStationOptions"
                              :key="item.id"
@@ -100,10 +147,12 @@
                     <div>
                        <div>
                           关联设备
                           <el-input v-model="searchName" placeholder="请输入" clearable></el-input>
                           <el-input class="ztzf-data-cockpit-search-input" v-model="searchName" placeholder="请输入"
                              clearable></el-input>
                        </div>
                        <el-form-item prop="deviceIds" label-width="0">
                           <el-table
                              class="ztzf-data-cockpit-table"
                              ref="deviceTableRef"
                              :data="deviceOptions.filter(item => item.deviceName.includes(searchName))"
                              row-key="id"
@@ -125,8 +174,9 @@
         </div>
      </div>
      <template #footer>
         <el-button @click="handleCancel">{{ readonly ? '关闭' : '取消' }}</el-button>
         <el-button v-if="!readonly" type="primary" :loading="submitting" :disabled="submitting" @click="handleSubmit">
         <el-button color="#2B2B4C" @click="handleCancel">{{ readonly ? '关闭' : '取消' }}</el-button>
         <el-button color="#284FE3" v-if="!readonly" type="primary" :loading="submitting" :disabled="submitting"
            @click="handleSubmit">
            确定
         </el-button>
      </template>
@@ -391,6 +441,12 @@
      width: 30%;
      height: 100%;
      overflow: auto;

      .ztzf-table-container,
      .ztzf-table-content {
         height: auto;
         flex: none;
      }
   }
}
</style>