yjdp-web/src/views/routineCommandMap/RightSection/planManageDialog.vue

<template>
  <Dialog v-model="localValue" custom-show type="xl" title="预案管理列表" hide-footer @close="handleClose">
    <transition name="fade">
      <div v-if="isFormVisible" class="mb-[20px]">
        <el-form ref="queryFormRef" :model="planForm" :inline="true">
          <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"
                  :teleported="false"
                  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"
                  :teleported="false"
                  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>

    <!-- 表格组件 -->
    <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 v-if="item.planType === '1' || item.planType === '2' || item.planType === '3'" class="flex">
          <template v-if="item.planType === '1'">
            <div>总体应急预案</div>
          </template>
          <template v-if="item.planType === '2'">
            <div>专项应急预案</div>
          </template>
          <template v-if="item.planType === '3'">
            <div>部门应急预案</div>
          </template>
        </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>

    <!-- 底部分页 -->
    <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">
import { ref, reactive, onMounted, defineProps, defineEmits, toRefs } from 'vue';
import { useRouter } from 'vue-router';
import { parseTime } from '@/utils/ruoyi';
import { getEmergencyPlanList } from '@/api/routineCommandMap';

// 定义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);
const total = ref(0);
const dateRange = ref<[string, string]>(['', '']);
const planForm = reactive({
  pageNum: 1,
  pageSize: 10,
  planType: '',
  keywords: '',
  sortBy: 'publish_date',
  sortOrder: 'desc'
});
const isFormVisible = ref(true);

const router = useRouter();
onMounted(() => {
  getList();
});
const proxy = getCurrentInstance()?.proxy;
const { plan_type } = toRefs<any>(proxy?.useDict('plan_type'));
// 获取列表
const getList = () => {
  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 = ['', ''];
  getList();
};

// 显示预案详情
const handleView = (row: PlanVO) => {
  router.push({
    path: '/riskPrevention/planManage/planList',
    query: { planId: row.planId }
  });
};
</script>
<style lang="scss" scoped>
.dialog-wrap {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 2000;
  width: 100%;
  height: 100%;
  display: flex;
  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;
  }
}
.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;
  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>