提交表格组件-liyuchen

src/components/form/index.vue

@@ -1,13 +0,0 @@
-<template>
-
-</template>
-
-<script>
-export default {
-name: "index"
-}
-</script>
-
-<style scoped>
-
-</style>

src/components/table/DisasterTable.vue

@@ -0,0 +1,120 @@
+<!--灾害列表table组件-->
+<template>
+  <div class="search">
+    <el-select class="form-select"  size="default" clearable
+            placeholder="Disaster Type"  v-model="state.search.disasterType">
+      <el-option v-for="(item,index) in state.dictList" :value="item.dictKey"  :key="index" :label="item.dictValue"/>
+    </el-select>
+    <el-input type="text"
+           class="form-control" size="default" clearable
+           placeholder="Disaster Country"  v-model="state.search.disasterCountry"/>
+    <el-button size="default" type="primary" class="ml10" @click="getDisasterTable">
+      <el-icon>
+        <ele-Search />
+      </el-icon>
+      Search
+    </el-button>
+  </div>
+  <el-table :data="state.disasterData.data" v-loading="state.disasterData.loading" style="width: 100%"
+            highlight-current-row @row-click="tableClick">
+    <el-table-column type="index" label="ID" width="50" />
+    <el-table-column prop="dictValue" label="Disaster type" show-overflow-tooltip sortable></el-table-column>
+    <el-table-column prop="disasterCountry" label="Disaster country" show-overflow-tooltip sortable></el-table-column>
+    <el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip sortable></el-table-column>
+  </el-table>
+  <el-pagination @size-change="onHandleDisasterSizeChange" @current-change="onHandleDisasterCurrentChange"
+                 class="mt15" :pager-count="3" :page-sizes="[10, 20, 30]"
+                 v-model:current-page="state.disasterData.param.pageNum" background
+                 v-model:page-size="state.disasterData.param.pageSize" layout="total, sizes, prev, pager, next"
+                 :total="state.disasterData.total">
+  </el-pagination>
+</template>
+
+<script setup name="disasterTable">
+
+import {onMounted, reactive, computed, defineProps, defineEmits} from "vue";
+import {getList} from "/@/api/system/dictbiz.js";
+import {getPage} from "/@/api/disasterInfo/index.js";
+//定义表格点击后的回调
+const emit = defineEmits(["click"]);
+//定义组件接收的参数
+const props = defineProps({
+  //响应状态
+  status: {
+    type: Number
+  },
+})
+const state = reactive({
+  //查询参数
+  search:{
+    respondStatus:props.status
+  },
+  //灾害类型字典项
+  dictList:[],
+  //表格数据
+  disasterData: {
+    data: [],
+    total: 0,
+    loading: false,
+    param: {
+      search: '',
+      pageNum: 1,
+      pageSize: 10,
+    },
+  },
+})
+//灾害表格点击事件
+const tableClick = (row, column, event) => {
+  emit("click", row.disasterId);
+}
+//获取字典数据
+const getDictBizData = () => {
+  getList({code:'disaster'}).then(res =>{
+    state.dictList = res[0].children
+  })
+}
+//获取灾害列表
+const getDisasterTable = () => {
+  getPage(state.disasterData.param.pageNum, state.disasterData.param.pageSize, state.search).then(res => {
+    state.disasterData.data = res.records;
+    state.disasterData.total = res.total;
+  })
+}
+// 分页改变
+const onHandleDisasterSizeChange = (val) => {
+  state.disasterData.param.pageSize = val;
+  getDisasterTable();
+};
+// 分页改变
+const onHandleDisasterCurrentChange = (val) => {
+  state.disasterData.param.pageNum = val;
+  getDisasterTable();
+};
+//页面加载
+onMounted(()=>{
+  //获取灾害类型
+  getDictBizData();
+  //获取灾害列表
+  getDisasterTable();
+})
+//组件对外暴露方法
+defineExpose({
+
+});
+</script>
+
+<style scoped>
+.mt15 {
+  display: flex;
+  justify-content: end;
+}
+.search{
+  display: flex;
+  margin-left: 10px;
+  margin-top: 10px;
+}
+.form-control{
+  margin-left: 10px;
+  width: 200px;
+}
+</style>