三防新增接口调试和样式优化

src/api/PreventionResponsible/index.ts

@@ -1,8 +1,24 @@
 import { AxiosPromise } from 'axios';
-import { UserInfoVO } from '@/api/system/user/types';
+import { UserInfo } from '@/api/system/user/types';
 import request from '@/utils/request';
-import { parseStrEmpty } from '@/utils/ruoyi';
+import { data } from 'autoprefixer';
 
+export function getZoning(id): AxiosPromise<UserInfo> {
+  return request({
+    url: '/api/system/area/tree2/' + id,
+    method: 'get',
+    params: data
+  });
+}
+
+//获取责任人类别
+export function getPersonRespon(): AxiosPromise<any> {
+  return request({
+    url: '/api/ThreeProofingResponsible/type_data/treeData',
+    method: 'get',
+    params: data
+  });
+}
 // 首页列表查询
 export function getTableList(params) {
   return request({
@@ -20,8 +36,8 @@ export function responsibleDetail(id) {
   });
 }
 
-// 新建联系人
-export function crateData(data) {
+//提交新建责任人信息
+export function createNewPerson(data) {
   return request({
     url: '/api/ThreeProofingResponsible/person/create',
     method: 'post',

src/types/components.d.ts

@@ -27,8 +27,6 @@ declare module 'vue' {
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElCard: typeof import('element-plus/es')['ElCard']
-    ElCascader: typeof import('element-plus/es')['ElCascader']
     ElCheckboxButton: typeof import('element-plus/es')['ElCheckboxButton']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
@@ -45,14 +43,11 @@ declare module 'vue' {
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
-    ElRadio: typeof import('element-plus/es')['ElRadio']
-    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
@@ -64,11 +59,9 @@ declare module 'vue' {
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
-    ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
-    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     ExcelEditor: typeof import('./../components/ExcelEditor/index.vue')['default']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
@@ -80,8 +73,6 @@ declare module 'vue' {
     HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
-    IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
-    IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']

src/views/setting/PreventionResponsible/add.vue

@@ -3,7 +3,7 @@
     <div class="common-dialog-content">
       <div class="common-dialog-title-box">
         <i class="common-dialog-title-icon" />
-        <div>{{ props.id ? '修改三防责任人信息' : '新建三防责任人信息' }}</div>
+        <div>新建三防责任人信息</div>
       </div>
       <div class="common-dialog-box" style="width: 1000px">
         <el-form ref="formRef" :model="form" :rules="rules" label-width="160px">
@@ -15,54 +15,43 @@
           </el-form-item>
           <el-form-item label="所属单位：" prop="unit_name">
             <el-input v-model="form.unit_name" placeholder="例如：XX市XX县人民政府" />
-            <span style="color: #999; font-size: 12px; margin-left: 5px;">请使用单位全称</span>
+            <span style="color: #999; font-size: 12px; margin-left: 5px">请使用单位全称</span>
           </el-form-item>
           <el-form-item label="职务：" prop="position">
             <el-input v-model="form.position" placeholder="例如：县长/办公室主任/办事员等" />
           </el-form-item>
           <el-form-item label="行政区划：" prop="area_code">
-            <el-select v-model="data1" placeholder="请选择" style="width: 200px;margin-right: 5px" @change="getOptions2()" clearable>
-              <el-option
-                v-for="item in options1"
-                :key="item.id"
-                :label="item.label"
-                :value="item.id"
-              />
+            <el-select v-model="data1" placeholder="请选择" style="width: 200px; margin-right: 5px" clearable @change="getOptions2()">
+              <el-option v-for="item in options1" :key="item.id" :label="item.label" :value="item.id" />
             </el-select>
-            <el-select v-model="data2" placeholder="请选择" style="width: 200px; margin-right: 5px" @change="getOptions3()" clearable>
-              <el-option
-                v-for="item in options2"
-                :key="item.id"
-                :label="item.label"
-                :value="item.id"
-              />
+            <el-select v-model="data2" placeholder="请选择" style="width: 200px; margin-right: 5px" clearable @change="getOptions3()">
+              <el-option v-for="item in options2" :key="item.id" :label="item.label" :value="item.id" />
             </el-select>
-            <el-select v-model="data3" placeholder="请选择" style="width: 200px; margin-right: 5px" @change="getAreaContent()" clearable>
-              <el-option
-                v-for="item in options3"
-                :key="item.id"
-                :label="item.label"
-                :value="item.id"
-              />
+            <el-select v-model="data3" placeholder="请选择" style="width: 200px; margin-right: 5px" clearable @change="getAreaContent()">
+              <el-option v-for="item in options3" :key="item.id" :label="item.label" :value="item.id" />
             </el-select>
-<!--            <template>-->
-<!--              <el-cascader :props="props" />-->
-<!--            </template>-->
+          </el-form-item>
+          <el-form-item label="办公电话：" prop="office_phone">
+            <div class="phone-input-container">
+              <el-input v-model="form.office_phone_prefix" placeholder="例如：0668" style="width: 120px;"></el-input>
+              <span class="phone-input-separator">-</span>
+              <el-input v-model="form.office_phone_number" placeholder="例如：88888888" style="width: 200px;"></el-input>
+            </div>
           </el-form-item>
           <el-form-item label="排位顺序：" prop="order_num">
             <el-input v-model="form.order_num" placeholder="例如：请输入排位序号1-999" />
-            <span style="color: #999; font-size: 12px; margin-left: 5px;">序号数值越小越靠前</span>
+            <span style="color: #999; font-size: 12px; margin-left: 5px">序号数值越小越靠前</span>
           </el-form-item>
           <el-form-item label="选择类别：" prop="category">
             <div>
-              <el-checkbox-group v-model="checkboxGroup2" @change="changeChildType" >
-                <el-checkbox-button v-for="type in category" :key="type" :value="type" @click="deleteOne(type)" >
+              <el-checkbox-group v-model="checkboxGroup2" @change="changeChildType">
+                <el-checkbox-button v-for="type in category" :key="type" :value="type" @click="deleteOne(type)">
                   {{ type.label }}
                 </el-checkbox-button>
               </el-checkbox-group>
               <el-tabs v-model="childType" class="demo-tabs" @tab-click="handleClick">
                 <el-tab-pane v-for="item in checkboxGroup2" :label="item.label" :name="item.label">
-                  <el-checkbox-group v-model="item.checked"  @change="getSubOption()">
+                  <el-checkbox-group v-model="item.checked" @change="getSubOption()">
                     <el-checkbox-button v-for="item2 in item.children" :key="item2.id" :value="item2.id">
                       {{ item2.label }}
                     </el-checkbox-button>
@@ -77,19 +66,19 @@
                     <div style="display: flex">
                       <span>请选择责任类别：</span>
                       <el-checkbox-group v-model="item.other_type_id" @change="getChOption">
-                        <el-checkbox-button v-if="item.id === '5'" v-for="item2 in item.children2" :key="item2" :value="item2.id">
+                        <el-checkbox-button v-for="item2 in item.children2" v-if="item.id === '5'" :key="item2" :value="item2.id">
                           {{ item2.label }}
                         </el-checkbox-button>
                       </el-checkbox-group>
                     </div>
                   </div>
                   <div v-if="item.label === '水利工程'">
-                    <span >请填写单位名称：</span>
+                    <span>请填写单位名称：</span>
                     <el-input v-model="item.dept_name" style="width: 240px" placeholder="如：北江大堰" @change="memberUnits" />
                     <div style="display: flex">
                       <span v-if="item.label === '水利工程'">请选择责任类别：</span>
                       <el-checkbox-group v-model="item.other_type_id" @change="getChOption">
-                        <el-checkbox-button v-if="item.id === '7'" v-for="item2 in item.children2" :key="item2" :value="item2.id">
+                        <el-checkbox-button v-for="item2 in item.children2" v-if="item.id === '7'" :key="item2" :value="item2.id">
                           {{ item2.label }}
                         </el-checkbox-button>
                       </el-checkbox-group>
@@ -98,7 +87,7 @@
                   <div v-if="item.label === '抢险队伍'" style="display: flex">
                     <span>请选择责任类别：</span>
                     <el-checkbox-group v-model="item.other_type_id" @change="getChOption">
-                      <el-checkbox-button v-if="item.id === '9'" v-for="item2 in item.children2" :key="item2" :value="item2.id">
+                      <el-checkbox-button v-for="item2 in item.children2" v-if="item.id === '9'" :key="item2" :value="item2.id">
                         {{ item2.label }}
                       </el-checkbox-button>
                     </el-checkbox-group>
@@ -109,7 +98,12 @@
                   </div>
                   <div v-if="item.label === '其他'">
                     <span>请填写具体类型：</span>
-                    <el-input v-model="item.other_type_2_name" style="width: 240px" placeholder="请填写责任类型，如：重点单位等" @change="memberUnits" />
+                    <el-input
+                      v-model="item.other_type_2_name"
+                      style="width: 240px"
+                      placeholder="请填写责任类型，如：重点单位等"
+                      @change="memberUnits"
+                    />
                   </div>
                 </el-tab-pane>
               </el-tabs>
@@ -117,7 +111,7 @@
           </el-form-item>
         </el-form>
         <div class="common-dialog-footer">
-          <el-button @click="closeDialog">取消</el-button>
+          <el-button @click="goBack">取消</el-button>
           <el-button :loading="buttonLoading" type="primary" @click="submitNewPerson()">确定</el-button>
         </div>
       </div>
@@ -127,35 +121,19 @@
 
 <script setup lang="ts">
 import { ref, toRefs } from 'vue';
-import { deptList } from '@/api/inspectionWork/inspector';
-import {
-  createMaterialWarehouse,
-  getMaterialWarehouseInfo,
-  updateMaterialWarehouse
-} from '@/api/comprehensiveGuarantee/materialReserveManagement/godownManagement';
-import type { TabsPaneContext } from 'element-plus'
-import { crateData, updateData } from '@/api/PreventionResponsible';
-import { createNewPerson, getPersonRespon, getZoning } from '@/api/setting/PreventionResponsible/tree';
+import type { TabsPaneContext } from 'element-plus';
+import { createNewPerson, getPersonRespon, getZoning, responsibleDetail } from '@/api/PreventionResponsible';
 
 const category = ref([]);
 const checkboxGroup2 = ref([]);
-const checkboxGroup3 = ref([]);
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const props = defineProps({
   id: String
 });
 const buttonLoading = ref(false);
-const inputUnitName1 = ref("");
-const inputUnitName2 = ref("");
-const inputUnitName3 = ref("");
-const inputUnitName4 = ref("");
-const inputUnitName5 = ref("");
 const data1 = ref();
 const data2 = ref();
 const data3 = ref();
-const responType1 = ref();
-const responType2 = ref();
-const responType3 = ref();
 
 // 表单数据
 const data = reactive({
@@ -173,130 +151,92 @@ const data = reactive({
     unit_name: [{ required: true, message: '所属单位不能为空', trigger: 'change' }],
     phone: [{ required: true, message: '电话号码不能为空', trigger: 'change' }],
     position: [{ required: true, message: '职务不能为空', trigger: 'blur' }],
-    area_code: [{ required: true, message: '行政区划不能为空', trigger: 'blur' }]
+    area_code: [{ required: true, message: '行政区划不能为空', trigger: 'change' }]
   }
 });
 const { form } = toRefs(data);
-// const type_list = ref([]);
 const emits = defineEmits(['close']);
-const closeDialog = () => {
-  emits('close');
-};
-const options1 = ref("");
-const options2 = ref("");
-const options3 = ref("");
-const submitForm = async (formEl) => {
-  if (!formEl) return;
-  await formEl.validate((valid, fields) => {
-    if (valid) {
-      if (props.id) {
-        updateData(form.value).then(() => {
-          proxy.$modal.msgSuccess('修改成功');
-          emits('close', true);
-        });
-      } else {
-        crateData(form.value).then(() => {
-          proxy.$modal.msgSuccess('新增成功');
-          emits('close', true);
-        });
-      }
-    } else {
-      nextTick(() => {
-        let isError = document.getElementsByClassName('is-error');
-        isError[0].scrollIntoView({
-          // 滚动到指定节点
-          // 值有start,center,end，nearest，当前显示在视图区域中间
-          block: 'center',
-          // 值有auto、instant,smooth，缓动动画（当前是慢速的）
-          behavior: 'smooth'
-        });
-      });
-      proxy.$modal.msgError('表单校验失败');
-      return false;
-    }
-  });
-};
+const formRef = ref<InstanceType<typeof ElForm> | null>(null);
+const options1 = ref('');
+const options2 = ref('');
+const options3 = ref('');
 const getOptions1 = (id) => {
-  getZoning(id).then(res => {
+  getZoning(id).then((res) => {
     options1.value = res.data;
-  })
-}
+  });
+};
 const getOptions2 = () => {
   if (!data1.value) {
-    data2.value = "";
-    data3.value = "";
+    data2.value = '';
+    data3.value = '';
     form.value.area_code = undefined;
     options2.value = undefined;
     return;
-  }else{
-    getZoning(data1.value).then(res => {
+  } else {
+    getZoning(data1.value).then((res) => {
       options2.value = res.data;
-    })
+    });
     form.value.area_code = data1.value;
   }
-}
+};
 const getOptions3 = () => {
   if (!data2.value) {
-    data3.value = "";
+    data3.value = '';
     form.value.area_code = data1.value;
     options3.value = undefined;
     return;
-  }else{
-    getZoning(data2.value).then(res => {
+  } else {
+    getZoning(data2.value).then((res) => {
       options3.value = res.data;
-    })
+    });
     form.value.area_code = data2.value;
   }
-}
+};
 const getAreaContent = () => {
   if (!data3.value) {
     form.value.area_code = data2.value;
-    return
-  }else {
+    return;
+  } else {
     form.value.area_code = data3.value;
   }
-}
-watch(data1,(newdata2, olddata2) => {
-  data2.value = "";
-  data3.value = "";
+};
+watch(data1, () => {
+  data2.value = '';
+  data3.value = '';
   options2.value = undefined;
-})
-watch(data2, (newdata2, olddata2) => {
-  data3.value = "";
+});
+watch(data2, () => {
+  data3.value = '';
   options3.value = undefined;
-})
+});
 const getCategory = () => {
-  getPersonRespon().then(res => {
+  getPersonRespon().then((res) => {
     category.value = res.rows;
-  })
-}
+  });
+};
 
-const childType = ref()
+const childType = ref();
 const changeChildType = () => {
-
   category.value.forEach((item) => {
     let index = checkboxGroup2.value.findIndex((item2) => item2.id === item.id);
     if (index === -1) {
       delete item.checked;
     }
-  })
+  });
   childType.value = checkboxGroup2.value[checkboxGroup2.value.length - 1].label;
-}
+};
 
 const getSubOption = () => {
-  let datatemp = [];
-  let childrentemp = [];
   const obj = {
-    type_parent_id: "",
-    children: ""
+    type_parent_id: '',
+    children: ''
   };
   for (let i = 0; i < checkboxGroup2.value.length; i++) {
     obj.type_parent_id = checkboxGroup2.value[i].id;
     obj.children = checkboxGroup2.value[i].checked;
     form.value.type_list[i] = obj;
   }
-  // form.value.type_list = [...new Set(datatemp.map(item => JSON.stringify(item)))].map(item => JSON.parse(item)); //去重
-}
+};
 const memberUnits = () => {
   let datatemp = [];
   for (let i = 0; i < checkboxGroup2.value.length; i++) {
@@ -305,27 +245,30 @@ const memberUnits = () => {
         type_parent_id: checkboxGroup2.value[i].id,
         children: checkboxGroup2.value[i].checked
       };
-      if(['4', '5', '7'].includes(checkboxGroup2.value[i].id) &&  checkboxGroup2.value[i].dept_name) {   //成员单位
-        obj.dept_name =  checkboxGroup2.value[i].dept_name;
-      } else if (checkboxGroup2.value[i].id === "10" &&  checkboxGroup2.value[i].denger_point_name) {  //地质灾害
-        obj.denger_point_name =  checkboxGroup2.value[i].denger_point_name;
-      } else if (checkboxGroup2.value[i].id === "11" &&  checkboxGroup2.value[i].other_type_2_name) {  //其他
-        obj.other_type_2_name =  checkboxGroup2.value[i].other_type_2_name;
+      if (['4', '5', '7'].includes(checkboxGroup2.value[i].id) && checkboxGroup2.value[i].dept_name) {
+        //成员单位
+        obj.dept_name = checkboxGroup2.value[i].dept_name;
+      } else if (checkboxGroup2.value[i].id === '10' && checkboxGroup2.value[i].denger_point_name) {
+        //地质灾害
+        obj.denger_point_name = checkboxGroup2.value[i].denger_point_name;
+      } else if (checkboxGroup2.value[i].id === '11' && checkboxGroup2.value[i].other_type_2_name) {
+        //其他
+        obj.other_type_2_name = checkboxGroup2.value[i].other_type_2_name;
       }
-      datatemp.push(obj)
+      datatemp.push(obj);
     }
   }
   form.value.type_list = datatemp;
-}
+};
 
 const deleteOne = (type) => {
-  const index = form.value.type_list.findIndex(item => item.type_parent_id === type.id);
-  if (index !== -1){
+  const index = form.value.type_list.findIndex((item) => item.type_parent_id === type.id);
+  if (index !== -1) {
     form.value.type_list.splice(index, 1);
   }
-}
+};
 const getChOption = () => {
-  debugger
+  debugger;
   let datatemp = [];
   for (let i = 0; i < checkboxGroup2.value.length; i++) {
     if (!!checkboxGroup2.value[i] && checkboxGroup2.value[i].other_type_id.length > 0) {
@@ -333,33 +276,102 @@ const getChOption = () => {
         type_parent_id: checkboxGroup2.value[i].id,
         other_type_id: checkboxGroup2.value[i].other_type_id
       };
-      datatemp.push(obj)
+      datatemp.push(obj);
     }
   }
   form.value.type_list = datatemp;
-}
+};
 const handleClick = (tab: TabsPaneContext, event: Event) => {
-  console.log(tab, event)
-}
+  console.log(tab, event);
+};
 const personType = ref([]);
 for (const i in category.value) {
   personType.value.push(category.value[i].label);
 }
 
-const submitNewPerson = () => {
-  createNewPerson(form).then(res => {
+const submitNewPerson = async () => {
+  // 打印当前表单值用于调试
+  console.log('Form values before submit:', form.value);
+
+  // 验证表单
+  try {
+    if (!formRef.value) {
+      throw new Error('Form reference is not set');
+    }
+
+    const valid = await formRef.value.validate((valid, invalidFields) => {
+      if (!valid) {
+        console.error('Validation failed:', invalidFields); // 输出未通过验证的字段
+      }
+      return valid;
+    });
+
+    if (!valid) {
+      proxy.$modal.msgError('请检查输入信息');
+      return;
+    }
+  } catch (error) {
+    console.error('Validation error:', error);
+    proxy.$modal.msgError('请检查输入信息');
+    return;
+  }
+
+  // 构建请求体
+  const requestBody = {
+    unit_name: form.value.unit_name,
+    name: form.value.name,
+    area_code: form.value.area_code,
+    position: form.value.position,
+    phone: form.value.phone,
+    order_num: form.value.order_num,
+    type_list: checkboxGroup2.value
+      .map((item) => ({
+        type_parent_id: item.id,
+        children: item.checked || [],
+        dept_name: item.dept_name || null,
+        other_type_2_name: item.other_type_2_name || null,
+        denger_point_name: item.denger_point_name || null
+      }))
+      .filter((item) => Object.values(item).some((val) => val !== null && val !== undefined))
+  };
+
+  buttonLoading.value = true; // 开始加载状态
+
+  try {
+    // 发送请求
+    await createNewPerson(requestBody);
     proxy.$modal.msgSuccess('新增成功');
-    emits('close',true);
-  })
-}
+    emits('close', true); // 关闭对话框并通知父组件
+    emits('refresh');
+  } catch (error) {
+    console.error('Error creating new person:', error);
+    proxy.$modal.msgError('新增失败，请稍后再试或联系管理员');
+  } finally {
+    buttonLoading.value = false; // 结束加载状态
+  }
+};
 
 onMounted(() => {
-  getMaterialWarehouseInfo(props.id).then((res) => {
-    form.value = res.data;
-  });
+  if (props.id) {
+    responsibleDetail(props.id).then((res) => {
+      Object.assign(form.value, res.data);
+      // 如果有特殊情况处理，如将API返回的类型列表转换为checkboxGroup2的格式
+      checkboxGroup2.value = res.data.type_list.map((item) => ({
+        id: item.type_parent_id,
+        checked: item.children || [],
+        dept_name: item.dept_name,
+        other_type_2_name: item.other_type_2_name,
+        denger_point_name: item.denger_point_name
+      }));
+    });
+  }
   getOptions1(2);
   getCategory();
 });
+// 返回上一级
+const goBack = () => {
+  emits('close');
+};
 </script>
 
 <style scoped lang="scss">

src/views/setting/PreventionResponsible/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="app-container">
-      <div v-show="!dialog.visible && !detailState.show && !addState.show">
+      <div v-show="!dialog.visible && !detailState.show && !addState.show && !EditState.show">
         <el-row :gutter="20">
           <el-col :lg="4" :xs="24" style="">
             <el-input v-model="deptName" placeholder="请输入部门名称" prefix-icon="Search" clearable />
@@ -97,7 +97,8 @@
       <DataImport v-model="uploadShow" url="" file-name="责任人信息批量导入模板" steps-text="责任人信息" />
       <DataImportDetail v-model="showUploadDetails" />
       <detail v-if="detailState.show" :id="detailState.id" @close="handledetailClose"></detail>
-      <add v-if="addState.show" :id="addState.id" @close="handleAddClose"></add>
+      <add v-if="addState.show" @close="handleAddClose" @refresh="getList"></add>
+      <Edit v-if="EditState.show" :id="EditState.id" @close="handleEditClose" @refresh="getList"></Edit>
     </div>
   </div>
 </template>
@@ -115,6 +116,7 @@ import { to } from 'await-to-js';
 import { optionselect } from '@/api/system/post';
 import detail from '@/views/setting/PreventionResponsible/detail.vue';
 import add from '@/views/setting/PreventionResponsible/add.vue';
+import Edit from '@/views/setting/PreventionResponsible/Edit.vue';
 import { reactive, ref } from 'vue';
 import { deleteMaterialRoot } from '@/api/comprehensiveGuarantee/materialReserveManagement/warehouseManagement';
 
@@ -289,6 +291,9 @@ const handledetailClose = () => {
   detailState.show = false;
 };
 let addState = reactive({
+  show: false
+});
+let EditState = reactive({
   show: false,
   id: ''
 });
@@ -296,11 +301,17 @@ let addState = reactive({
 const handleAddClose = () => {
   addState.show = false;
 };
+const handleEditClose = () => {
+  EditState.show = false;
+};
 const handleAdd = (row: UserVO) => {
   addState.show = true;
   addState.id = row.id;
 };
-
+const handleUpdate = () => {
+  EditState.show = true;
+  EditState.id = row.id;
+};
 /** 选择条数  */
 const handleSelectionChange = (selection: UserVO[]) => {
   ids.value = selection.map((item) => item.userId);
@@ -351,21 +362,21 @@ const cancel = () => {
 //   // form.value.password = initPassword.value.toString();
 // };
 
-/** 修改按钮操作 */
-const handleUpdate = async (row?: UserForm) => {
-  reset();
-  const userId = row?.userId || ids.value[0];
-  const { data } = await api.getUser(userId);
-  dialog.visible = true;
-  dialog.title = '修改用户';
-  await initTreeData();
-  Object.assign(form.value, data.user);
-  postOptions.value = data.posts;
-  roleOptions.value = data.roles;
-  form.value.postIds = data.postIds;
-  form.value.roleIds = data.roleIds;
-  form.value.password = '';
-};
+// /** 修改按钮操作 */
+// const handleUpdate = async (row?: UserForm) => {
+//   reset();
+//   const userId = row?.userId || ids.value[0];
+//   const { data } = await api.getUser(userId);
+//   dialog.visible = true;
+//   dialog.title = '修改用户';
+//   await initTreeData();
+//   Object.assign(form.value, data.user);
+//   postOptions.value = data.posts;
+//   roleOptions.value = data.roles;
+//   form.value.postIds = data.postIds;
+//   form.value.roleIds = data.roleIds;
+//   form.value.password = '';
+// };
 
 // 导入
 let uploadShow = ref(false);
@@ -383,8 +394,10 @@ let onMounted1 = onMounted(() => {
     initPassword.value = response.data;
   });
 });
-
-
+// 监听查询参数变化并重新获取数据
+watch(queryParams, () => {
+  getList();
+});
 </script>
 
 <style scoped lang="scss"></style>