|
|
@@ -45,27 +45,27 @@
|
|
|
<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-button v-for="type in category" :key="type" :value="type" @change="deleteOne(type)">
|
|
|
{{ type.label }}
|
|
|
</el-checkbox-button>
|
|
|
</el-checkbox-group>
|
|
|
- <el-tabs v-model="childType" class="demo-tabs" @tab-click="handleClick">
|
|
|
+ <el-tabs v-model="childType" class="demo-tabs">
|
|
|
<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="handleFormFormat">
|
|
|
<el-checkbox-button v-for="item2 in item.children" :key="item2.id" :value="item2.id">
|
|
|
{{ item2.label }}
|
|
|
</el-checkbox-button>
|
|
|
</el-checkbox-group>
|
|
|
<div v-if="item.label === '成员单位'">
|
|
|
<span>请填写单位名称：</span>
|
|
|
- <el-input v-model="item.dept_name" style="width: 240px" @change="memberUnits" />
|
|
|
+ <el-input v-model="item.dept_name" style="width: 240px" @change="handleFormFormat" />
|
|
|
</div>
|
|
|
<div v-if="item.label === '重点部门'">
|
|
|
<span>请填写单位名称：</span>
|
|
|
- <el-input v-model="item.dept_name" style="width: 240px" @change="memberUnits" />
|
|
|
+ <el-input v-model="item.dept_name" style="width: 240px" @change="handleFormFormat" />
|
|
|
<div style="display: flex">
|
|
|
<span>请选择责任类别：</span>
|
|
|
- <el-checkbox-group v-model="item.other_type_id" @change="getChOption">
|
|
|
+ <el-checkbox-group v-model="item.other_type_id" @change="handleFormFormat">
|
|
|
<el-checkbox-button v-for="item2 in item.children2" v-if="item.id === '5'" :key="item2" :value="item2.id">
|
|
|
{{ item2.label }}
|
|
|
</el-checkbox-button>
|
|
|
@@ -74,10 +74,10 @@
|
|
|
</div>
|
|
|
<div v-if="item.label === '水利工程'">
|
|
|
<span>请填写单位名称：</span>
|
|
|
- <el-input v-model="item.dept_name" style="width: 240px" placeholder="如：北江大堰" @change="memberUnits" />
|
|
|
+ <el-input v-model="item.dept_name" style="width: 240px" @change="handleFormFormat" />
|
|
|
<div style="display: flex">
|
|
|
<span v-if="item.label === '水利工程'">请选择责任类别：</span>
|
|
|
- <el-checkbox-group v-model="item.other_type_id" @change="getChOption">
|
|
|
+ <el-checkbox-group v-model="item.other_type_id" @change="handleFormFormat">
|
|
|
<el-checkbox-button v-for="item2 in item.children2" v-if="item.id === '7'" :key="item2" :value="item2.id">
|
|
|
{{ item2.label }}
|
|
|
</el-checkbox-button>
|
|
|
@@ -86,7 +86,7 @@
|
|
|
</div>
|
|
|
<div v-if="item.label === '抢险队伍'" style="display: flex">
|
|
|
<span>请选择责任类别：</span>
|
|
|
- <el-checkbox-group v-model="item.other_type_id" @change="getChOption">
|
|
|
+ <el-checkbox-group v-model="item.other_type_id" @change="handleFormFormat">
|
|
|
<el-checkbox-button v-for="item2 in item.children2" v-if="item.id === '9'" :key="item2" :value="item2.id">
|
|
|
{{ item2.label }}
|
|
|
</el-checkbox-button>
|
|
|
@@ -94,7 +94,7 @@
|
|
|
</div>
|
|
|
<div v-if="item.label === '地质灾害'">
|
|
|
<span>请填写隐患点名称：</span>
|
|
|
- <el-input v-model="item.denger_point_name" style="width: 240px" placeholder="" @change="memberUnits" />
|
|
|
+ <el-input v-model="item.denger_point_name" style="width: 240px" placeholder="" @change="handleFormFormat" />
|
|
|
</div>
|
|
|
<div v-if="item.label === '其他'">
|
|
|
<span>请填写具体类型：</span>
|
|
|
@@ -102,7 +102,7 @@
|
|
|
v-model="item.other_type_2_name"
|
|
|
style="width: 240px"
|
|
|
placeholder="请填写责任类型，如：重点单位等"
|
|
|
- @change="memberUnits"
|
|
|
+ @change="handleFormFormat"
|
|
|
/>
|
|
|
</div>
|
|
|
</el-tab-pane>
|
|
|
@@ -120,13 +120,13 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { onMounted, ref, toRefs, watch } from 'vue';
|
|
|
-import { ElMessage, TabsPaneContext } from 'element-plus';
|
|
|
-import { createNewPerson, getPersonRespon, getZoning, responsibleDetail } from '@/api/PreventionResponsible';
|
|
|
+import { ElMessage } from 'element-plus';
|
|
|
+import { updateData, getPersonRespon, getZoning, responsibleDetail } from '@/api/PreventionResponsible';
|
|
|
+import { deepClone } from '@/utils';
|
|
|
|
|
|
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
const category = ref([]);
|
|
|
const checkboxGroup2 = ref([]);
|
|
|
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
const props = defineProps<{
|
|
|
id: string | number;
|
|
|
}>();
|
|
|
@@ -145,7 +145,9 @@ const data = reactive({
|
|
|
position: '',
|
|
|
phone: '',
|
|
|
order_num: '',
|
|
|
- type_list: []
|
|
|
+ type_list: [],
|
|
|
+ office_phone_prefix: '',
|
|
|
+ office_phone_number: ''
|
|
|
},
|
|
|
rules: {
|
|
|
name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
|
|
|
@@ -172,6 +174,7 @@ const getOptions2 = () => {
|
|
|
data3.value = '';
|
|
|
form.value.area_code = undefined;
|
|
|
options2.value = undefined;
|
|
|
+ options3.value = undefined;
|
|
|
return;
|
|
|
} else {
|
|
|
getZoning(data1.value).then((res) => {
|
|
|
@@ -201,15 +204,6 @@ const getAreaContent = () => {
|
|
|
form.value.area_code = data3.value;
|
|
|
}
|
|
|
};
|
|
|
-watch(data1, () => {
|
|
|
- data2.value = '';
|
|
|
- data3.value = '';
|
|
|
- options2.value = undefined;
|
|
|
-});
|
|
|
-watch(data2, () => {
|
|
|
- data3.value = '';
|
|
|
- options3.value = undefined;
|
|
|
-});
|
|
|
const getCategory = () => {
|
|
|
getPersonRespon().then((res) => {
|
|
|
category.value = res.rows;
|
|
|
@@ -222,145 +216,152 @@ const changeChildType = () => {
|
|
|
let index = checkboxGroup2.value.findIndex((item2) => item2.id === item.id);
|
|
|
if (index === -1) {
|
|
|
delete item.checked;
|
|
|
+ delete item.other_type_id;
|
|
|
+ handleDeleteAttribute(item);
|
|
|
}
|
|
|
});
|
|
|
- childType.value = checkboxGroup2.value[checkboxGroup2.value.length - 1].label;
|
|
|
+ childType.value = checkboxGroup2.value.length ? checkboxGroup2.value[checkboxGroup2.value.length - 1].label : '';
|
|
|
};
|
|
|
|
|
|
-const getSubOption = () => {
|
|
|
- const obj = {
|
|
|
- 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;
|
|
|
+const deleteOne = (type) => {
|
|
|
+ const index = form.value.type_list.findIndex((item) => item.id === type.id);
|
|
|
+ if (index !== -1) {
|
|
|
+ form.value.type_list.splice(index, 1);
|
|
|
+ if (!!type.dept_name) {
|
|
|
+ delete type.dept_name;
|
|
|
+ }
|
|
|
+ if (!!type.denger_point_name) {
|
|
|
+ delete type.denger_point_name;
|
|
|
+ }
|
|
|
+ if (!!type.other_type_2_name) {
|
|
|
+ delete type.other_type_2_name;
|
|
|
+ }
|
|
|
}
|
|
|
};
|
|
|
-const memberUnits = () => {
|
|
|
- let datatemp = [];
|
|
|
+
|
|
|
+const handleFormFormat = () => {
|
|
|
+ const data = [];
|
|
|
for (let i = 0; i < checkboxGroup2.value.length; i++) {
|
|
|
- if (!!checkboxGroup2.value[i] && checkboxGroup2.value[i].children.length > 0) {
|
|
|
- const obj = {
|
|
|
- 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;
|
|
|
- }
|
|
|
- datatemp.push(obj);
|
|
|
+ if (!checkboxGroup2.value[i].checked || checkboxGroup2.value[i].checked.length === 0) {
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+ let obj = deepClone(checkboxGroup2.value[i]);
|
|
|
+ obj.type_parent_id = obj.id;
|
|
|
+ delete obj.id;
|
|
|
+ if (obj.checked && obj.checked.length > 0) {
|
|
|
+ obj.children = obj.checked;
|
|
|
+ delete obj.checked;
|
|
|
+ } else {
|
|
|
+ delete obj.children;
|
|
|
}
|
|
|
+ if (obj.other_type_id && obj.other_type_id.length > 0) {
|
|
|
+ obj.children2 = obj.other_type_id;
|
|
|
+ delete obj.other_type_id;
|
|
|
+ } else {
|
|
|
+ delete obj.children2;
|
|
|
+ }
|
|
|
+ data.push(obj);
|
|
|
}
|
|
|
- form.value.type_list = datatemp;
|
|
|
+ form.value.type_list = data;
|
|
|
};
|
|
|
|
|
|
-const deleteOne = (type) => {
|
|
|
- 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 handleDeleteAttribute = (obj) => {
|
|
|
+ if (!['4', '5', '7'].includes(obj.id)) {
|
|
|
+ delete obj.dept_name;
|
|
|
}
|
|
|
-};
|
|
|
-const getChOption = () => {
|
|
|
- debugger;
|
|
|
- let datatemp = [];
|
|
|
- for (let i = 0; i < checkboxGroup2.value.length; i++) {
|
|
|
- if (!!checkboxGroup2.value[i] && checkboxGroup2.value[i].other_type_id.length > 0) {
|
|
|
- const obj = {
|
|
|
- type_parent_id: checkboxGroup2.value[i].id,
|
|
|
- other_type_id: checkboxGroup2.value[i].other_type_id
|
|
|
- };
|
|
|
- datatemp.push(obj);
|
|
|
- }
|
|
|
+ if (obj.id !== '10') {
|
|
|
+ delete obj.denger_point_name;
|
|
|
+ }
|
|
|
+ if (obj.id !== '11') {
|
|
|
+ delete obj.other_type_2_name;
|
|
|
}
|
|
|
- form.value.type_list = datatemp;
|
|
|
};
|
|
|
-const handleClick = (tab: TabsPaneContext, event: Event) => {
|
|
|
- console.log(tab, event);
|
|
|
+const handleAddAttribute = (obj, item) => {
|
|
|
+ if (['4', '5', '7'].includes(obj.id)) {
|
|
|
+ item.dept_name = obj.dept_name;
|
|
|
+ }
|
|
|
+ if (obj.id === '10') {
|
|
|
+ item.denger_point_name = obj.denger_point_name;
|
|
|
+ }
|
|
|
+ if (obj.id === '11') {
|
|
|
+ item.other_type_2_name = obj.other_type_2_name;
|
|
|
+ }
|
|
|
};
|
|
|
-const personType = ref([]);
|
|
|
-for (const i in category.value) {
|
|
|
- personType.value.push(category.value[i].label);
|
|
|
-}
|
|
|
-
|
|
|
const fetchData = async () => {
|
|
|
const response = await responsibleDetail(props.id);
|
|
|
if (response.code === 200) {
|
|
|
- form.value = response.data;
|
|
|
+ const data = response.data;
|
|
|
+ data.type_list.forEach((item) => {
|
|
|
+ item.checked = item.children;
|
|
|
+ });
|
|
|
+ form.value = data;
|
|
|
+ getPersonRespon().then((res2) => {
|
|
|
+ data.type_list.forEach((item) => {
|
|
|
+ delete item.labelData;
|
|
|
+ item.id = item.type_parent_id;
|
|
|
+ item.id = item.type_parent_id;
|
|
|
+ item.label = item.type_parent;
|
|
|
+ handleDeleteAttribute(item);
|
|
|
+ delete item.type_parent_id;
|
|
|
+ delete item.type_parent;
|
|
|
+ delete item.other_type_label;
|
|
|
+ });
|
|
|
+ res2.rows.forEach((item) => {
|
|
|
+ let index = data.type_list.findIndex((item2) => item2.id === item.id);
|
|
|
+ delete item.css_class;
|
|
|
+ if (index > -1) {
|
|
|
+ let obj = data.type_list[index];
|
|
|
+ item.checked = obj.checked;
|
|
|
+ obj.children = item.children;
|
|
|
+ if (!!obj.children2) {
|
|
|
+ obj.other_type_id = deepClone(obj.children2);
|
|
|
+ item.other_type_id = deepClone(obj.children2);
|
|
|
+ obj.children2 = item.children2;
|
|
|
+ item.children2 = item.children2;
|
|
|
+ }
|
|
|
+ handleAddAttribute(obj, item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ category.value = res2.rows;
|
|
|
+ checkboxGroup2.value = data.type_list;
|
|
|
+ changeChildType();
|
|
|
+ handleFormFormat();
|
|
|
+ // 分割办公电话为区号和电话号码
|
|
|
+ if (response.data.telephone) {
|
|
|
+ const [prefix, number] = response.data.telephone.split('-');
|
|
|
+ form.value.office_phone_prefix = prefix;
|
|
|
+ form.value.office_phone_number = number;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 设置行政区划的默认值
|
|
|
+ setDefaultAreaSelection(response.data.area_list, response.data.area_code);
|
|
|
+ });
|
|
|
} else {
|
|
|
ElMessage.error('未找到相关数据');
|
|
|
}
|
|
|
};
|
|
|
-
|
|
|
-// 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('refresh');
|
|
|
-// } catch (error) {
|
|
|
-// console.error('Error creating new person:', error);
|
|
|
-// proxy.$modal.msgError('新增失败，请稍后再试或联系管理员');
|
|
|
-// } finally {
|
|
|
-// buttonLoading.value = false; // 结束加载状态
|
|
|
-// }
|
|
|
-// };
|
|
|
-
|
|
|
+const setDefaultAreaSelection = (areaList, areaCode) => {
|
|
|
+ data1.value = areaList[1] ? areaList[1].id : '';
|
|
|
+ data2.value = areaList[2] ? areaList[2].id : '';
|
|
|
+ data3.value = areaList[3] ? areaList[3].id : '';
|
|
|
+ form.value.area_code = areaCode;
|
|
|
+ getZoning(data1.value).then((res) => {
|
|
|
+ options2.value = res.data;
|
|
|
+ });
|
|
|
+ getZoning(data2.value).then((res) => {
|
|
|
+ options3.value = res.data;
|
|
|
+ });
|
|
|
+};
|
|
|
+const submitNewPerson = async () => {
|
|
|
+ await formRef.value.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ updateData(form.value).then((res) => {
|
|
|
+ proxy.$modal.msgSuccess('更新成功');
|
|
|
+ goBack();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
onMounted(() => {
|
|
|
getOptions1(2);
|
|
|
getCategory();
|
