预案管理界面样式优化

src/views/routineCommandMap/RightSection/index.vue

@@ -30,9 +30,7 @@
       </div>
     </div>
     <!--预案管理弹窗-->
-    <Dialog v-model="planManageState.showListDialog" title="预案管理列表" width="70%">
-      <planManageDialog />
-    </Dialog>
+    <planManageDialog v-if="planManageState.showListDialog" v-model="planManageState.showListDialog" />
     <Dialog v-model="planManageState.showDetailDialog" title="预案管理详情" width="70%"></Dialog>
     <!--应急知识库弹窗-->
     <Dialog v-model="knowledgeBaseState.showListDialog" title="应急知识库列表" width="70%">

src/views/routineCommandMap/RightSection/planManageDialog.vue

@@ -1,79 +1,144 @@
 <template>
-  <div class="app-container">
+  <Dialog v-model="localValue" customShow type="xl" title="预案管理列表" hide-footer @close="handleClose">
     <transition name="fade">
-      <div class="mb-[10px]">
+      <div v-if="isFormVisible" class="mb-[20px]">
         <el-form ref="queryFormRef" :model="planForm" :inline="true">
-          <el-form-item style="width: 200px" label="预案类型" prop="planType">
-            <el-select v-model="planForm.planType" placeholder="全部" clearable>
-              <el-option v-for="item in plan_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="发布日期" prop="publish_date">
-            <el-date-picker
-              v-model="dateRange"
-              type="daterange"
-              range-separator="-"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              value-format="YYYY-MM-DD"
-            ></el-date-picker>
-          </el-form-item>
-          <el-form-item>
-            <el-input v-model="planForm.keywords" placeholder="请输入预案名称/编制单位" clearable @keyup.enter="handleQuery" />
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-          </el-form-item>
-          <el-form-item>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-          </el-form-item>
+          <el-row :gutter="20">
+            <!-- 预案类型 -->
+            <el-col :span="6">
+              <el-form-item label="预案类型" prop="planType" label-width="200px">
+                <el-select
+                  v-model="planForm.planType"
+                  placeholder="全部"
+                  class="custom-select"
+                  size="large"
+                  popper-class="custom-select-popper"
+                  clearable
+                >
+                  <el-option label="全部" value=""></el-option>
+                  <el-option v-for="item in plan_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+
+            <!-- 发布日期 -->
+            <el-col :span="6">
+              <el-form-item label="发布日期" prop="publish_date" label-width="200px">
+                <el-date-picker
+                  v-model="dateRange"
+                  type="date"
+                  range-separator="-"
+                  placeholder="选择发布日期"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  value-format="YYYY-MM-DD"
+                  class="common-date-picker"
+                  popper-class="common-date-popper"
+                  style="width: 100%"
+                ></el-date-picker>
+              </el-form-item>
+            </el-col>
+
+            <!-- 关键词搜索 -->
+            <el-col :span="6">
+              <el-form-item label="关键词" label-width="200px">
+                <el-input
+                  v-model="planForm.keywords"
+                  class="custom-input2"
+                  placeholder="请输入预案名称/编制单位"
+                  clearable
+                  style="width: 600px"
+                  @keyup.enter="handleQuery"
+                />
+              </el-form-item>
+            </el-col>
+
+            <!-- 操作按钮 -->
+            <el-col :span="6">
+              <div class="flex" style="align-items: flex-start">
+                <div class="common-btn-primary" style="margin-top: -32px" @click="handleQuery">搜索</div>
+                <div class="common-btn" style="margin-left: 10px" @click="resetQuery">重置</div>
+              </div>
+            </el-col>
+          </el-row>
         </el-form>
       </div>
     </transition>
 
     <!-- 表格组件 -->
-    <el-table v-loading="loading" :data="demoList" @selection-change="handleView">
-      <el-table-column label="预案编号" align="center" prop="planId" />
-      <el-table-column label="预案名称" align="center" prop="planName" />
-      <el-table-column label="预案类型" align="center" prop="planType" />
-      <el-table-column label="发文字号" align="center" prop="document" />
-      <el-table-column label="编制单位" align="center" prop="organizingUnit" />
-      <el-table-column label="发布日期" align="center" prop="publish_date" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template #default="scope">
-          <el-tooltip content="查看" placement="top" class="item" effect="dark">
-            <el-button type="text" @click="showKnowledgeBaseDetail(scope.row)">查看</el-button>
-          </el-tooltip>
-        </template>
-      </el-table-column>
-    </el-table>
-    <Dialog v-model="planManageState.showDetailDialog"  width="100%">
+    <div class="common-table">
+      <div class="table-header">
+        <div class="td">预案编号</div>
+        <div class="td">预案名称</div>
+        <div class="td">预案类型</div>
+        <div class="td">发文字号</div>
+        <div class="td">编制单位</div>
+        <div class="td">发布日期</div>
+        <div class="td">操作</div>
+      </div>
+      <div v-for="(item, index) in demoList" :key="index" class="tr">
+        <div class="td">{{ item.planId }}</div>
+        <div class="td">{{ item.planName }}</div>
+        <div class="td">{{ item.planType }}</div>
+        <div class="td">{{ item.document }}</div>
+        <div class="td">{{ item.organizingUnit }}</div>
+        <div class="td">{{ item.publishDate }}</div>
+        <div class="td">
+          <div class="common-btn2" @click="showDetail(item)">查看</div>
+        </div>
+      </div>
+    </div>
 
-      <!-- v-model="planManageState.showListDialog" -->
-      <checkview :planId="planId" />
-    </Dialog>
-    <!-- // 底部分页 -->
-    <pagination v-show="total > 0" v-model:page="planForm.pageNum" v-model:limit="planForm.pageSize" :total="total" @pagination="getList" />
-  </div>
+    <!-- 底部分页 -->
+    <div class="footer">
+      <pagination
+        v-show="total > 0"
+        v-model:page="planForm.pageNum"
+        v-model:limit="planForm.pageSize"
+        :total="total"
+        layout="total, prev, pager, next"
+        @pagination="getList"
+      />
+    </div>
+  </Dialog>
 </template>
 
-<script setup lang="ts" name="PlanManageDialog">
-import { ref, reactive, onMounted, toRefs } from 'vue';
-import { PlanForm, PlanVO } from '@/api/routineCommandMap/type';
+<script setup lang="ts">
+import { ref, reactive, onMounted, defineProps, defineEmits, toRefs } from 'vue';
 import { useRouter } from 'vue-router';
 import { parseTime } from '@/utils/ruoyi';
 import { getEmergencyPlanList } from '@/api/routineCommandMap';
-import checkview from '@/views/routineCommandMap/RightSection/checkview.vue';
 
-const router = useRouter();
-const demoList = ref<PlanVO[]>([]);
+// 定义props和emit
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  }
+});
+const emit = defineEmits(['update:modelValue']);
+
+// 内部局部状态来控制弹窗显示
+const localValue = ref(props.modelValue);
+
+// 监听外部的 modelValue 变化，并同步到本地的 localValue
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    localValue.value = newVal;
+  }
+);
+
+// 在关闭弹窗时，发出事件通知父组件更新 modelValue
+const handleClose = () => {
+  emit('update:modelValue', false);
+};
+
+// 数据管理
+const demoList = ref<any[]>([]);
 const loading = ref(false);
-let planId = ref();
 const total = ref(0);
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { plan_type } = toRefs<any>(proxy?.useDict('plan_type'));
-const queryFormRef = ref();
-const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
+const dateRange = ref<[string, string]>(['', '']);
 const planForm = reactive({
   pageNum: 1,
   pageSize: 10,
@@ -82,94 +147,146 @@ const planForm = reactive({
   sortBy: 'publish_date',
   sortOrder: 'desc'
 });
+const isFormVisible = ref(true);
 
-let form = ref({
-  planId: '',
-  planName: '',
-  planType: '',
-  document: '',
-  organizingUnit: '',
-  publishDate: '',
-  fileList: []
-});
-
-const planManageState = reactive({
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    sortBy: 'publish_date',
-    sortOrder: 'desc'
-  },
-  listData: [],
-  showListDialog: true,
-  showDetailDialog: false
+const router = useRouter();
+onMounted(() => {
+  getList();
 });
-
-const showKnowledgeBaseList = () => {
-  planManageState.showListDialog = true;
-};
-
-const showKnowledgeBaseDetail = (row) => {
-  planManageState.showDetailDialog = true;
-  planId.value = row.planId;
-};
-
-// 获取预案类型字典
+const proxy = getCurrentInstance()?.proxy;
+const { plan_type } = toRefs<any>(proxy?.useDict('plan_type'));
+// 获取列表
 const getList = () => {
-  getEmergencyPlanList(proxy?.addDateRange(planForm, dateRange.value)).then((res) => {
-    res.data.forEach((item) => {
-      item.publish_date = parseTime(item.publish_date);
-      item.img = 'https://img0.baidu.com/it/u=1918456140,3851309096&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500';
-    });
+  loading.value = true;
+  const params = {
+    ...planForm,
+    startDate: dateRange.value[0],
+    endDate: dateRange.value[1]
+  };
+  // 获取预案列表
+  getEmergencyPlanList(params).then((res) => {
     demoList.value = res.data;
+    total.value = res.total;
+    loading.value = false;
   });
 };
-
-// 搜索
+// 查询
 const handleQuery = () => {
   planForm.pageNum = 1;
   getList();
 };
-// 重置
+
 const resetQuery = () => {
   planForm.pageNum = 1;
   planForm.planType = '';
   planForm.keywords = '';
   dateRange.value = ['', ''];
-  handleQuery();
+  getList();
 };
 
 // 显示预案详情
 const handleView = (row: PlanVO) => {
   router.push({
     path: '/riskPrevention/planManage/planList',
-    query: {
-      planId: row.planId
-    }
+    query: { planId: row.planId }
   });
 };
-
-onMounted(() => {
-  getList();
-});
 </script>
-
-<style>
-.custom-dialog {
+<style lang="scss" scoped>
+.dialog-wrap {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 2000;
   width: 100%;
-  margin-bottom: 20px;
+  height: 100%;
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: center;
+  .overlay {
+    background-color: rgba(0, 0, 0, 0.5);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    cursor: pointer;
+  }
+  .dialog {
+    width: 5000px;
+    height: 2000px;
+    margin: 0 auto;
+    background-color: #fff;
+    border-radius: 20px;
+  }
 }
-
-.img-item {
-  width: 280px;
-  height: 500px;
-  margin-left: 215px;
+.dialog {
+  padding: 0 50px;
+  .dialog-header {
+    width: 100%;
+    height: 150px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .icon-close {
+      cursor: pointer;
+    }
+  }
+}
+.footer {
+  height: 64px;
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  cursor: pointer;
+  justify-content: flex-end;
+  margin-bottom: 30px;
+  .pagination-container {
+    height: 64px;
+    margin: 0;
+  }
+  :deep(.el-pagination__total) {
+    color: #a7ccdf;
+    font-size: 32px;
+  }
+  :deep(.el-pagination) {
+    .btn-next,
+    .btn-prev {
+      background-color: transparent;
+      border: none;
+      .el-icon {
+        font-size: 22px;
+        color: #a7ccdf;
+      }
+    }
+    .btn-prev:disabled,
+    .btn-next:disabled {
+      background-color: transparent;
+      border: none;
+    }
+    .el-pager li {
+      width: 64px;
+      height: 64px;
+      line-height: 64px;
+      text-align: center;
+      font-size: 32px;
+      color: #a7ccdf;
+      background-color: #0e3064;
+      border: 1px solid #0c57a7;
+      margin: 0 6px;
+      &:hover {
+        background-color: #038dff;
+        border: 1px solid #038dff;
+      }
+    }
+    .el-pager li.is-active {
+      background-color: #038dff;
+      border: 1px solid #038dff;
+    }
+  }
+}
+.flex {
+  display: flex;
+  align-items: flex-start;
 }
 </style>