From 53ed3f94c44709c5d571d580dccd8149f020ffb7 Mon Sep 17 00:00:00 2001
From: 13937891274 <kxc0822>
Date: 星期五, 22 七月 2022 11:00:42 +0800
Subject: [PATCH] 应急预案一览对接

---
 src/views/contingencyManagement/panManagement/index.vue |  226 ++++++++++++++++++++++++-------------------------------
 1 files changed, 99 insertions(+), 127 deletions(-)

diff --git a/src/views/contingencyManagement/panManagement/index.vue b/src/views/contingencyManagement/panManagement/index.vue
index 1a1c7e7..b083b2d 100644
--- a/src/views/contingencyManagement/panManagement/index.vue
+++ b/src/views/contingencyManagement/panManagement/index.vue
@@ -4,23 +4,23 @@
       <div class="system-user-search mb15">
         <el-form :inline="true" :model="formInline" class="demo-form-inline">
           <el-form-item>
-          <el-input size="default" placeholder="预案名称" style="max-width: 215px;"> </el-input>
+            <el-input size="default" v-model="formInline.searchParams.name" placeholder="预案名称" style="max-width: 215px;"> </el-input>
           </el-form-item>
           <el-form-item>
-          <el-select size="default" v-model="value" placeholder="请选择预案类型" class="ml10" style="max-width: 215px;">
-            <el-option label="综合应急预案" value="admin"></el-option>
-            <el-option label="现场处置方案" value="common"></el-option>
-            <el-option label="专项应急预案" value="common"></el-option>
-            <el-option label="其他预案" value="common"></el-option>
-          </el-select>
+            <el-select size="default" v-model="formInline.searchParams.type" placeholder="请选择预案类型" class="ml10" style="max-width: 215px;">
+              <el-option label="综合应急预案" value="admin"></el-option>
+              <el-option label="现场处置方案" value="common"></el-option>
+              <el-option label="专项应急预案" value="common"></el-option>
+              <el-option label="其他预案" value="common"></el-option>
+            </el-select>
           </el-form-item>
           <el-form-item>
-          <el-button size="default" type="primary" class="ml10">
-            查询
-          </el-button>
-          <el-button size="default" class="ml10" @click="submitReset">
-            重置
-          </el-button>
+            <el-button size="default" type="primary" class="ml10" @click="onSubmit">
+              查询
+            </el-button>
+            <el-button size="default" class="ml10">
+              重置
+            </el-button>
           </el-form-item>
         </el-form>
       </div>
@@ -46,17 +46,17 @@
           </el-button>
         </div>
         <div class="button_Right">
-          <el-button @click="upButton">
+          <el-button size="default" @click="upButton">
             <el-icon>
               <Upload />
             </el-icon>
           </el-button>
-          <el-button>
+          <el-button size="default">
             <el-icon>
               <Download />
             </el-icon>
           </el-button>
-          <el-button>
+          <el-button size="default">
             <el-icon>
               <Refresh />
             </el-icon>
@@ -64,7 +64,7 @@
         </div>
       </div>
       <el-table
-          :data="tableData"
+          :data="tableData.data"
           style="width: 100%"
           ref="multipleTableRef"
       >
@@ -104,36 +104,23 @@
           </template>
         </el-table-column>
       </el-table>
-      <!--      <el-pagination-->
-      <!--          @size-change="onHandleSizeChange"-->
-      <!--          @current-change="onHandleCurrentChange"-->
-      <!--          class="mt15"-->
-      <!--          :pager-count="5"-->
-      <!--          :page-sizes="[10, 20, 30]"-->
-      <!--          v-model:current-page="tableData.param.pageNum"-->
-      <!--          background-->
-      <!--          v-model:page-size="tableData.param.pageSize"-->
-      <!--          layout="total, sizes, prev, pager, next, jumper"-->
-      <!--          :total="tableData.total"-->
-      <!--      >-->
-      <!--      </el-pagination>-->
       <div class="pages">
         <el-pagination
-            v-model:currentPage="pageIndex"
-            v-model:page-size="pageSize"
+            v-if="tableData.length == 0 ? false : true"
+            v-model:currentPage="formInline.pageIndex"
+            v-model:page-size="formInline.pageSize"
             :page-sizes="[10, 20, 30]"
             :pager-count="5"
-            :small="small"
-            :disabled="disabled"
-            :background="background"
+            class="mt15"
+            background
             layout="total, sizes, prev, pager, next, jumper"
-            :total="40"
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
+            :total="tableData.total"
+            @size-change="onHandleSizeChange"
+            @current-change="onHandleCurrentChange"
         />
       </div>
     </el-card>
-    <OpenAdd ref="addRef" />
+    <OpenAdd ref="addRef"  @refreshRoleList="initTableData"/>
     <AbolishLibrary ref="abolishRef"/>
     <upData ref="upShow"></upData>
     <el-dialog v-model="dialogFormVisible" width="30%" title="启动" :fullscreen="full">
@@ -157,9 +144,9 @@
 
 <script lang="ts">
 import {
-  // toRefs,
+  toRefs,
   reactive,
-  // onMounted,
+  onMounted,
   ref,
   defineComponent
 } from 'vue';
@@ -175,7 +162,6 @@
   Upload,
   Download,
   Refresh,
-  View,
   VideoPause,
   VideoPlay,
   EditPen,
@@ -212,13 +198,19 @@
   // // describe: string;
   // createTime: string;
 }
-
+//
+interface TableDataState {
+  tableData: {
+    data: Array<TableDataRow>;
+    total: number;
+    loading: boolean;
+  };
+}
 export default defineComponent({
   name: 'systemUser',
   components: {
     OpenAdd,
     AbolishLibrary,
-    View,
     EditPen,
     Plus,
     Edit,
@@ -228,17 +220,53 @@
     Refresh,
     VideoPause,
     VideoPlay,
-    UpData
+    UpData,
+    emergencyPlanApi
   },
   setup() {
-    // const seeRef = ref();
-    // 选择框
-    // const value = ref('');
-    // const options =
-    //   {
-    //     value: 'Option1',
-    //     label: 'Option1',
-    //   };
+    // 定义表单搜索
+    const formInline = reactive({
+      pageIndex: 1,
+      pageSize: 10,
+      searchParams: {
+        name: "",
+        type: "",
+      }
+    })
+    // 搜索按钮
+    const onSubmit = async () => {
+      let res = await emergencyPlanApi().getEmergencyPlanList(formInline)
+      if(res.data.code === '200'){
+        state.tableData.data = res.data.data;
+        state.tableData.total = state.tableData.data.length;
+      }else{
+        ElMessage({
+          type:'warning',
+          message:res.data.msg
+        })
+      }
+    }
+    // 定义表格数据
+    const state = reactive<TableDataState>({
+      tableData: {
+        data: [],
+        total: 0,
+        loading: false,
+      },
+    })
+    // 初始化表格数据
+    const initTableData = async () => {
+      let res = await emergencyPlanApi().getEmergencyPlanList(formInline)
+      if(res.data.code === '200'){
+        state.tableData.data = res.data.data;
+        state.tableData.total = state.tableData.data.length;
+      }else{
+        ElMessage({
+          type:'warning',
+          message:res.data.msg
+        })
+      }
+    };
     const multipleTableRef = ref<InstanceType<typeof ElTable>>()
     const multipleSelection = ref<User[]>([])
 
@@ -247,61 +275,6 @@
     const upButton=()=>{
       upShow.value.openDialog()
     }
-    // 定义表格数据
-    const tableData: User[] = [
-      {
-        teamName: '应急救援组',
-        teamLevel: '公司',
-        teamDescription: '实施抢险抢险的应急方案和措施实施 ;',
-        teamPhone: '051383830321',
-        phone: '13603812900',
-        describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' +
-            '(2)负责现场被困人员、受伤人员抢救工作;\n' +
-            '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' +
-            '(4)抢险抢修或救援结束后,对结果进行复查和评估。',
-        responsibleDepartment: '仪表班',
-        teamLeader: '王磊',
-      },
-      {
-        teamName: '应急救援组',
-        teamLevel: '公司',
-        teamDescription: '实施抢险抢险的应急方案和措施实施 ;',
-        teamPhone: '051383830321',
-        phone: '13603812900',
-        describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' +
-            '(2)负责现场被困人员、受伤人员抢救工作;\n' +
-            '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' +
-            '(4)抢险抢修或救援结束后,对结果进行复查和评估。',
-        responsibleDepartment: '仪表班',
-        teamLeader: '王磊',
-      },
-      {
-        teamName: '应急救援组',
-        teamLevel: '公司',
-        teamDescription: '实施抢险抢险的应急方案和措施实施 ;',
-        teamPhone: '051383830321',
-        phone: '13603812900',
-        describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' +
-            '(2)负责现场被困人员、受伤人员抢救工作;\n' +
-            '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' +
-            '(4)抢险抢修或救援结束后,对结果进行复查和评估。',
-        responsibleDepartment: '仪表班',
-        teamLeader: '王磊',
-      },
-      {
-        teamName: '应急救援组',
-        teamLevel: '公司',
-        teamDescription: '实施抢险抢险的应急方案和措施实施 ;',
-        teamPhone: '051383830321',
-        phone: '13603812900',
-        describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' +
-            '(2)负责现场被困人员、受伤人员抢救工作;\n' +
-            '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' +
-            '(4)抢险抢修或救援结束后,对结果进行复查和评估。',
-        responsibleDepartment: '仪表班',
-        teamLeader: '王磊',
-      }
-    ]
     // 启动弹窗
     const dialogTableVisible = ref(false)
     const dialogFormVisible = ref(false)
@@ -331,19 +304,16 @@
           .catch(() => {});
     };
     // 页面加载时
-    // onMounted(() => {
-    //   initTableData();
-    // });
-    // 分页
-    const pageIndex = ref(4);
-    const pageSize = ref(10);
+    onMounted(() => {
+      initTableData();
+    });
     // 分页改变
-    const handleSizeChange = (val: number) => {
-      console.log(`${val} items per page`);
+    const onHandleSizeChange = (val: number) => {
+      formInline.pageSize = val;
     };
     // 分页未改变
-    const handleCurrentChange = (val: number) => {
-      console.log(`current page: ${val}`);
+    const onHandleCurrentChange = (val: number) => {
+      formInline.pageIndex = val;
     };
 
     const router=useRouter()
@@ -375,32 +345,31 @@
       }
     };
     return {
-      // value,
-      // options,
       multipleSelection,
       multipleTableRef,
       upButton,
       upShow,
-      tableData,
+      initTableData,
       dialogTableVisible,
       dialogFormVisible,
       form,
-      // seeRef,
+      onSubmit,
       onOpenAdd,  //新增
       onabolishLibrary,
       addRef,
       abolishRef,
       onRowDel,
-      pageIndex,
-      pageSize,
-      handleSizeChange,
-      handleCurrentChange,
+      onHandleSizeChange,
+      onHandleCurrentChange,
       jumpFrom,
       abolish,
       router,
       toggleFullscreen,
       FullScreen,
       full,
+      formInline,
+      onMounted,
+      ...toRefs(state),
     };
   },
 });
@@ -418,8 +387,11 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  margin-bottom: 10px;
 }
-
+.el-form .el-form-item {
+  margin-bottom: 0 !important;
+}
 .el-button--text {
   margin-right: 15px;
 }

--
Gitblit v1.9.2