迭代八巡查人员界面和修改功能

src/api/inspectionWork/inspector.ts

@@ -0,0 +1,33 @@
+import request from '@/utils/request';
+import {uploadEventCasualties} from "@/api/duty/eventing";
+// 查询部门列表
+export function deptList(params) {
+  return request({
+    url: '/api/riskManagement/allAreas',
+    method: 'get',
+    params: params
+  });
+}
+// 查询用户列表
+export function inspectorList(params) {
+  return request({
+    url: '/api/riskManagement/inspection/user/list',
+    method: 'get',
+    params: params
+  });
+}
+// 查询用户详情
+export function inspectorDetail(id) {
+  return request({
+    url: '/api/riskManagement/inspection/user/' + id,
+    method: 'get',
+    params: id
+  });
+}
+export function inspectorUpload(data) {
+  return request({
+    url: '/api/riskManagement/inspection/user/update',
+    method: 'put',
+    data: data
+  });
+}

src/views/inspectionWork/inspector.vue

@@ -1,11 +1,182 @@
+<template>
+  <div v-show="!inspectorEditState.show" class="app-container">
+    <el-row :gutter="20">
+      <el-col :lg="4" :xs="24">
+        <el-tree
+          ref="deptTreeRef"
+          class="mt-2"
+          node-key="id"
+          :data="deptOptions"
+          :props="{ label: 'label', children: 'children' }"
+          :expand-on-click-node="false"
+          :filter-node-method="filterNode"
+          highlight-current
+          default-expand-all
+          @node-click="handleNodeClick"
+        />
+      </el-col>
+      <el-col :lg="20" :xs="24">
+        <transition name="fade">
+          <div v-show="showSearch">
+            <el-form ref="queryFormRef" :model="queryParams">
+              <el-row :gutter="20">
+                <el-col :span="8">
+                  <el-form-item prop="username">
+                    <el-input v-model="queryParams.username" placeholder="请输入巡查人员" clearable />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-button type="primary" @click="handleQuery">搜索</el-button>
+                  <el-button @click="resetQuery">重置</el-button>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+        </transition>
+        <el-row :gutter="10">
+          <el-col :span="1.5">
+            <el-button type="primary" icon="Plus" @click="handleAdd()">新增</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="Top" @click="handleImport()"> 批量导入 </el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" plain :disabled="multiple" icon="Delete" @click="handleDelete()"> 删除 </el-button>
+          </el-col>
+        </el-row>
+        <el-table ref="multipleTable" v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="姓名" align="center" prop="username" />
+          <el-table-column label="联系方式" align="center" prop="phone" />
+          <el-table-column label="粤政易组织" align="center" prop="yzy_organization" />
+          <el-table-column label="责任区划" align="center" prop="division_responsibility" />
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template #default="scope">
+              <el-text class="common-btn-text-primary" @click="handleUpdate(scope.row)">编辑</el-text>
+              <el-text class="common-btn-text-danger" @click="handleDelete(scope.row)">删除</el-text>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.pageSize" :total="total" @pagination="tableData" />
+      </el-col>
+    </el-row>
+  </div>
+  <InspectorEdit v-if="inspectorEditState.show" :event-id="inspectorEditState.eventId" @close="handleCancel" />
+</template>
+
 <script setup lang="ts">
+import { onMounted, reactive, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { deptList, inspectorList } from '@/api/inspectionWork/inspector';
+import InspectorEdit from './inspectorEdit.vue';
+const router = useRouter();
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref<Array<number | string>>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const deptOptions = ref([]);
+const deptTreeRef = ref(null);
+const tableData = ref([]);
 
-</script>
+const initFormData = reactive({
+  username: '',
+  phone: '',
+  yzy_organization: '',
+  division_responsibility: '',
+  id: ''
+});
 
-<template>
+const data = reactive({
+  form: { ...initFormData },
+  queryParams: {
+    page: 1,
+    pageSize: 10,
+    nickName: '',
+    deptId: ''
+  }
+});
 
-</template>
+const { queryParams, form } = toRefs(data);
 
-<style scoped lang="scss">
+const filterNode = (value: string, data: any) => {
+  if (!value) return true;
+  return data.label.indexOf(value) !== -1;
+};
 
+const getTreeSelect = async () => {
+  const res = await deptList();
+  deptOptions.value = res.data; // 直接赋值给 deptOptions
+  loading.value = false; // 加载完成后关闭加载提示
+};
+
+const fetchUserData = async () => {
+  try {
+    const res = await inspectorList(queryParams.value); // 调用 inspectorList 接口
+    tableData.value = res.data.map((item) => ({
+      id: item.id,
+      username: item.user_name,
+      phone: item.phonenumber,
+      yzy_organization: item.yzy_account || '', // 如果 yzy_account 为空，则显示空字符串
+      division_responsibility: item.area // 显示责任区划
+    }));
+    total.value = res.total;
+  } catch (error) {
+    console.error('Failed to fetch inspector data:', error);
+  }
+};
+
+// 监听查询参数变化并重新获取数据
+watch(queryParams, () => {
+  fetchUserData();
+});
+let inspectorEditState = reactive({
+  show: false,
+  eventId: ''
+});
+const handleCancel = () => {
+  inspectorEditState.show = false;
+};
+const handleImport = () => {
+  // 实现导入逻辑
+};
+
+const handleAdd = async () => {
+  // 实现新增逻辑
+};
+
+const handleUpdate = (row) => {
+  if (row) {
+    inspectorEditState.eventId = row.id; // 假设eventId是id字段
+    inspectorEditState.show = true;
+  }
+};
+const handleQuery = () => {
+  queryParams.value.page = 1;
+  fetchUserData();
+};
+// 重置查询条件
+const resetQuery = () => {
+  queryParams.value = { page: 1, pageSize: 10, nickName: '', deptId: '' };
+  handleQuery();
+};
+const handleSelectionChange = (selection) => {
+  ids.value = selection.map((item) => item.userId);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+};
+
+onMounted(async () => {
+  await getTreeSelect();
+  fetchUserData();
+});
+</script>
+<style scoped>
+.mt-2 {
+  max-width: 300px; /* 设置最大宽度 */
+  max-height: 800px; /* 设置最大高度 */
+  overflow-y: auto; /* 如果内容超出高度则显示滚动条 */
+}
 </style>

src/views/inspectionWork/inspectorAdd.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/inspectionWork/inspectorEdit.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="common-dialog">
+    <div class="common-dialog-content">
+      <div class="common-dialog-title-box">
+        <h3 class="common-dialog-title">修改巡查人员</h3>
+      </div>
+      <div class="common-dialog-box">
+        <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
+          <el-form-item label="姓名：" prop="nick_name">
+            <el-input v-model="formData.nick_name" style="width: 468px !important" />
+          </el-form-item>
+          <el-form-item label="粤政易组织：" prop="yzy_account">
+            <el-input v-model="formData.yzy_account" style="width: 468px !important" />
+          </el-form-item>
+          <el-form-item label="联系方式：" prop="phonenumber">
+            <el-input v-model="formData.phonenumber" style="width: 468px !important" />
+          </el-form-item>
+          <el-form-item label="责任区划：" prop="area">
+            <el-input v-model="formData.area" style="width: 468px !important" />
+          </el-form-item>
+        </el-form>
+        <div class="common-dialog-footer">
+          <el-button @click="closeDialog">取消</el-button>
+          <el-button type="primary" @click="submitForm">确定</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { inspectorDetail, inspectorUpload } from '@/api/inspectionWork/inspector';
+import { ref, watch } from 'vue';
+import { ElMessage } from 'element-plus';
+const emits = defineEmits(['close']);
+const props = defineProps<{
+  eventId: string | number;
+}>();
+const formData = ref({
+  nick_name: '',
+  phonenumber: '',
+  yzy_account: '',
+  area: ''
+});
+const fetchDetail = async () => {
+  const response = await inspectorDetail(props.eventId);
+  if (response.code === 200) {
+    formData.value = response.data;
+  } else {
+    ElMessage.error(response.msg);
+  }
+};
+watch(
+  () => props.eventId,
+  (newVal) => {
+    if (newVal) {
+      fetchDetail();
+    }
+  },
+  { immediate: true }
+);
+const closeDialog = () => {
+  emits('close');
+};
+// 提交表单
+const submitForm = async () => {
+  try {
+    // 假设表单已经通过验证
+    const response = await inspectorUpload(formData.value);
+    if (response.code === 200) {
+      ElMessage.success('提交成功');
+      closeDialog(); // 关闭对话框
+    } else {
+      ElMessage.error(response.msg);
+    }
+  } catch (error) {
+    ElMessage.error('提交信息失败，请稍后再试');
+  }
+};
+</script>
+<style scoped></style>