提交管理员管理灾害代码-liyuchen

src/api/disasterInfo/index.js

@@ -8,6 +8,36 @@ export function getList(params) {
     params,
   });
 }
+
+export function getPage(current,size,params) {
+  return request({
+    url: '/api/'+moduleName+'/ui/disasterInfo/list',
+    method: 'get',
+    params:{
+      current,
+      size,
+      ...params
+    },
+  });
+}
+
+export function updateDisasterManage(data){
+  return request({
+    url: '/api/'+moduleName+'/ui/disasterInfo/updateBatch',
+    method: 'put',
+    data: data,
+  });
+}
+
+export function removeManage(data){
+  return request({
+    url: '/api/'+moduleName+'/ui/disasterInfo/removeManage',
+    method: 'put',
+    data: data,
+  });
+}
+
+
 //review
 export function review(data) {
   return request({

src/views/home/index.vue

@@ -558,7 +558,7 @@ const setApplyDisaster = (data) => {
   })
   setTimeout(() => {
     initBarChart(xData,yData);
-  }, 1000);
+  }, 700);
 }
 /**
  * 设置灾种数量占比

src/views/systemManagement/chiefAdministrator/component/disasterInfo.vue

@@ -0,0 +1,122 @@
+<template>
+  <el-dialog title="management disaster" v-model="state.isShowDialog" width="900px"  @close="closeDialog">
+    <el-config-provider :locale="en">
+    <div class="system-user-search mb15" style="display: flex;margin-left: 10px;margin-top: 10px;">
+      <el-input size="default" placeholder="please enter disaster type" style="max-width: 190px" v-model="state.searchName"
+                clearable></el-input>
+      <el-button size="default" type="primary" class="ml10" @click="getDisaterInfo">
+        <el-icon>
+          <ele-Search/>
+        </el-icon>
+        search
+      </el-button>
+    </div>
+    <el-table :data="state.tableData.data" :row-key="getRowKeys" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" :reserve-selection="true"/>
+      <el-table-column property="dictValue" label="DisasterType" width="150" />
+      <el-table-column property="disasterCountry" label="DisasterCountry" width="200" />
+      <el-table-column property="disasterKeyword" label="DisasterKeyword" width="200" />d
+      <el-table-column property="disasterTime" label="DisasterTime" />
+      <el-table-column property="disasterLevel" label="DisasterLevel" />
+    </el-table>
+    <el-pagination @size-change="onHandleSizeChange"
+                   @current-change="onHandleCurrentChange"
+                   class="mt15"
+                   :pager-count="5"
+                   :page-sizes="[10, 20, 30]"
+                   v-model:current-page="state.tableData.param.pageNum"
+                   background
+                   v-model:page-size="state.tableData.param.pageSize"
+                   layout="total, sizes, prev, pager, next, jumper"
+                   :total="state.tableData.total">
+    </el-pagination>
+    </el-config-provider>
+    <template #footer>
+				<span class="dialog-footer">
+					<el-button @click="onCancel" size="default">cancel</el-button>
+					<el-button type="primary" @click="onSubmit" size="default" :loading="state.isLoading">confirm</el-button>
+				</span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import en from 'element-plus/dist/locale/en.mjs'
+import {getPage,updateDisasterManage} from '/@/api/disasterInfo/index.js';
+import {reactive} from "vue";
+import {ElMessage} from "element-plus";
+const emit = defineEmits(['callback']);
+const state = reactive({
+  isShowDialog:false,
+  table:false,
+  loading:false,
+  chiefId:null,
+  multipleSelection:[],
+  searchName:'',
+  tableData: {
+    data: [],
+    total: 0,
+    loading: false,
+    param: {
+      search: '',
+      pageNum: 1,
+      pageSize: 5,
+    },
+  },
+});
+const getRowKeys = (row) => {
+  return row.id
+}
+const handleSelectionChange = (val) => {
+  state.multipleSelection = val
+}
+// 打开弹窗
+const openDialog = (chiefId) => {
+  state.isShowDialog = true;
+  state.chiefId = chiefId;
+  getDisaterInfo();
+};
+//获取灾害列表
+const getDisaterInfo = () => {
+  getPage(state.tableData.param.pageNum,state.tableData.param.pageSize,{"respondStatus":3,"chiefId":state.chiefId,"disasterType":state.searchName}).then(res=>{
+    state.tableData.data = res.records;
+    state.tableData.total = res.total;
+  })
+}
+// 关闭弹窗
+const closeDialog = () => {
+  state.isShowDialog = false;
+};
+const onCancel = () => {
+  closeDialog();
+}
+const onSubmit = () => {
+  //将选中的灾害转为{"id":"","chiefId":""}格式
+  const saveRes = state.multipleSelection.map(item=> ({id:item.id,chiefId:state.chiefId}))
+  updateDisasterManage(saveRes).then(res=>{
+    ElMessage.success("Management success")
+    emit('callback');
+    closeDialog();
+  }).catch(err=>{
+
+  })
+}
+// 分页改变
+const onHandleSizeChange = (val) => {
+  state.tableData.param.pageSize = val;
+  getDisaterInfo();
+};
+// 分页改变
+const onHandleCurrentChange = (val) => {
+  state.tableData.param.pageNum = val;
+  getDisaterInfo();
+};
+// 暴露变量
+defineExpose({
+  openDialog,
+});
+</script>
+
+<style scoped>
+
+</style>

src/views/systemManagement/chiefAdministrator/component/manageDisaster.vue

@@ -0,0 +1,158 @@
+<template>
+  <el-config-provider :locale="en">
+  <el-drawer
+      v-model="state.table"
+      title="Management Disaster"
+      direction="rtl"
+      size="50%"
+  >
+    <div class="system-user-search mb15" style="display: flex;margin-left: 10px;margin-top: 10px;">
+      <el-input size="default" placeholder="please enter disaster type" style="max-width: 190px" v-model="state.searchName"
+                clearable></el-input>
+      <el-button size="default" type="primary" class="ml10" @click="getTableData">
+        <el-icon>
+          <ele-Search/>
+        </el-icon>
+        search
+      </el-button>
+      <el-button size="default" type="success" class="ml10" @click="addDisaster">
+        <el-icon>
+          <ele-FolderAdd/>
+        </el-icon>
+        add
+      </el-button>
+      <el-button size="default" type="danger" class="ml10" @click="batchDelete">
+        <el-icon>
+          <ele-Delete/>
+        </el-icon>
+        batch delete
+      </el-button>
+    </div>
+    <el-table :data="state.tableData.data" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" />
+      <el-table-column property="dictValue" label="DisasterType" width="150" />
+      <el-table-column property="disasterCountry" label="DisasterCountry" width="200" />
+      <el-table-column property="disasterTime" label="DisasterTime" />
+      <el-table-column prop="Operate"
+                       label="Operate"
+                       show-overflow-tooltip>
+        <template #default="scope">
+          <el-button link type="primary" size="small" @click="deleteDisaster(scope.row)">Delete</el-button>
+        </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="state.tableData.param.pageNum"
+                   background
+                   v-model:page-size="state.tableData.param.pageSize"
+                   layout="total, sizes, prev, pager, next, jumper"
+                   :total="state.tableData.total">
+    </el-pagination>
+    <DisasterInfo ref="disasterInfoRef" @callback="getTableData"/>
+  </el-drawer>
+  </el-config-provider>
+</template>
+
+<script setup>
+import en from 'element-plus/dist/locale/en.mjs'
+import {reactive, ref} from "vue";
+import DisasterInfo from './disasterInfo.vue';
+import {getPage,removeManage} from '/@/api/disasterInfo/index.js';
+import {ElMessage, ElMessageBox} from "element-plus";
+const disasterInfoRef = ref();
+const state = reactive({
+  table:false,
+  loading:false,
+  userId:null,
+  multipleSelection:[],
+  searchName:'',
+  tableData: {
+    data: [],
+    total: 0,
+    loading: false,
+    param: {
+      search: '',
+      pageNum: 1,
+      pageSize: 10,
+    },
+  },
+});
+const handleSelectionChange = (val) => {
+  state.multipleSelection = val
+}
+const addDisaster = () => {
+  disasterInfoRef.value.openDialog(state.userId);
+}
+//批量删除chief管理员管理灾害数据
+const batchDelete = () => {
+  if(state.multipleSelection.length == 0){
+    ElMessage.warning("Select the data to be operated first");
+    return false;
+  }
+  ElMessageBox.confirm(`This action batch deletes the disaster data，Whether to continue?`, 'tip', {
+    confirmButtonText: 'confirm',
+    cancelButtonText: 'cancel',
+    type: 'warning',
+  })
+      .then(() => {
+        let id = state.multipleSelection.map(item=>({id:item.id,chiefId:null}))
+        removeManage(id).then(res=>{
+          getTableData();
+          ElMessage.success('delete successfully');
+        })
+      })
+      .catch(() => {});
+}
+const deleteDisaster = (row) => {
+  ElMessageBox.confirm(`This operation will delete the disaster：“${row.dictValue}”，Whether to continue?`, 'tip', {
+    confirmButtonText: 'confirm',
+    cancelButtonText: 'cancel',
+    type: 'warning',
+  })
+      .then(() => {
+        let delData = [{"id":row.id,"cheif":null}]
+        removeManage(delData).then(res=>{
+          getTableData();
+          ElMessage.success('Deleted successfully');
+        })
+      })
+      .catch(() => {});
+}
+// 打开弹窗
+const openDialog = (userId) => {
+  state.table = true;
+  state.userId = userId;
+  getTableData();
+};
+//分页查询已经管理的灾害数据
+const getTableData = () => {
+  getPage(state.tableData.param.pageNum,state.tableData.param.pageSize,{"chiefIdEquals":state.userId,"disasterType":state.searchName}).then(res=>{
+    state.tableData.data = res.records;
+    state.tableData.total = res.total;
+  })
+}
+
+// 分页改变
+const onHandleSizeChange = (val) => {
+  state.tableData.param.pageSize = val;
+  getTableData();
+};
+// 分页改变
+const onHandleCurrentChange = (val) => {
+  state.tableData.param.pageNum = val;
+  getTableData();
+};
+
+// 暴露变量
+defineExpose({
+  openDialog,
+});
+</script>
+
+<style scoped>
+
+</style>

src/views/systemManagement/chiefAdministrator/index.vue

@@ -53,6 +53,7 @@
           <template #default="scope">
             <el-button link type="primary" size="small" @click="editUser(scope.row)">Edit</el-button>
             <el-button link type="primary" size="small" @click="deleteUser(scope.row)">Delete</el-button>
+            <el-button link type="primary" size="small" @click="manage(scope.row)">Manage</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -71,6 +72,7 @@
     </div>
     <AddAdministrator ref="administratorRef" @callback="getTableData"/>
     <EditAdministrator ref="editAdministratorRef" @callback="getTableData"/>
+    <ManageDisaster ref="manageRef"/>
     <RoleDialog ref="roleDialogRef"
                 @refresh="getTableData()" />
   </div>
@@ -79,12 +81,36 @@
 <script lang="ts" setup name="systemRole">
 import en from 'element-plus/dist/locale/en.mjs'
 import type { TabsPaneContext } from 'element-plus';
+import ManageDisaster from './component/manageDisaster.vue';
 import AddAdministrator from './component/addAdministrator.vue';
 import EditAdministrator from './component/editAdministrator.vue';
 import {getAdminPage,remove} from '/@/api/response/administrator.js';
+const gridData = [
+  {
+    date: '2016-05-02',
+    name: 'Peter Parker',
+    address: 'Queens, New York City',
+  },
+  {
+    date: '2016-05-04',
+    name: 'Peter Parker',
+    address: 'Queens, New York City',
+  },
+  {
+    date: '2016-05-01',
+    name: 'Peter Parker',
+    address: 'Queens, New York City',
+  },
+  {
+    date: '2016-05-03',
+    name: 'Peter Parker',
+    address: 'Queens, New York City',
+  },
+]
 const activeName = ref('first');
 const administratorRef = ref();
 const editAdministratorRef = ref();
+const manageRef = ref();
 const handleClick = (tab: TabsPaneContext, event: Event) => {
 	console.log(tab, event);
 };
@@ -99,6 +125,8 @@ const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialo
 // 定义变量内容
 const roleDialogRef = ref();
 const state = reactive({
+  table:false,
+  loading:false,
   multipleSelection:[],
   searchName:'',
 	tableData: {
@@ -170,6 +198,11 @@ const deleteUser = (row) => {
 		})
 		.catch(() => {});
 };
+//chief管理员管理灾害抽屉
+const manage = (row) => {
+  manageRef.value.openDialog(row.id);
+  //state.table = true;
+}
 // 分页改变
 const onHandleSizeChange = (val) => {
 	state.tableData.param.pageSize = val;