|
|
@@ -2,12 +2,25 @@
|
|
|
<div class="common-dialog">
|
|
|
<div class="common-dialog-content">
|
|
|
<div class="common-dialog-title-box">
|
|
|
- <h3 class="common-dialog-title">修改巡查人员</h3>
|
|
|
+ <i class="common-dialog-title-icon" />
|
|
|
+ <div>修改巡查人员</div>
|
|
|
</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 label="姓名：" prop="nick_name">-->
|
|
|
+<!-- <el-input v-model="formData.nick_name" style="width: 468px !important" />-->
|
|
|
+<!-- </el-form-item>-->
|
|
|
+ <el-form-item label="姓名：" prop="user_id">
|
|
|
+ <el-tree-select
|
|
|
+ v-model="formData.user_id"
|
|
|
+ :data="treeData"
|
|
|
+ :props="defaultProps"
|
|
|
+ node-key="id"
|
|
|
+ :render-after-expand="false"
|
|
|
+ style="width: 468px"
|
|
|
+ @change="onUserNameChange"
|
|
|
+ filterable
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="粤政易组织：" prop="yzy_account">
|
|
|
<el-input v-model="formData.yzy_account" style="width: 468px !important" />
|
|
|
@@ -15,8 +28,19 @@
|
|
|
<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 label="责任区划：" prop="area_code">-->
|
|
|
+<!-- <el-input v-model="formData.area_code" style="width: 468px !important" />-->
|
|
|
+<!-- </el-form-item>-->
|
|
|
+ <el-form-item label="责任区划：" prop="area_code">
|
|
|
+ <el-tree-select
|
|
|
+ v-model="formData.area_code"
|
|
|
+ :data="formattedDivisionData"
|
|
|
+ :props="{ label: 'label', value: 'code', children: 'children' }"
|
|
|
+ :render-after-expand="false"
|
|
|
+ style="width: 468px"
|
|
|
+ @change="onDivisionChange"
|
|
|
+ check-strictly
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<div class="common-dialog-footer">
|
|
|
@@ -28,25 +52,35 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
-import { inspectorDetail, inspectorUpload } from '@/api/inspectionWork/inspector';
|
|
|
-import { ref, watch } from 'vue';
|
|
|
+import {
|
|
|
+ inspectorDetail,
|
|
|
+ inspectorDivision,
|
|
|
+ inspectorUpload,
|
|
|
+ phoneList,
|
|
|
+ userList
|
|
|
+} from '@/api/inspectionWork/inspector';
|
|
|
+import { reactive, ref, watch } from 'vue';
|
|
|
import { ElMessage } from 'element-plus';
|
|
|
const emits = defineEmits(['close']);
|
|
|
+const treeData = ref([]);
|
|
|
+const formattedDivisionData = ref([]);
|
|
|
+const rawDivisionData = ref([]);
|
|
|
const props = defineProps<{
|
|
|
eventId: string | number;
|
|
|
}>();
|
|
|
const formData = ref({
|
|
|
+ user_id: '',
|
|
|
nick_name: '',
|
|
|
phonenumber: '',
|
|
|
yzy_account: '',
|
|
|
- area: ''
|
|
|
+ area_code: ''
|
|
|
});
|
|
|
// 表单验证规则
|
|
|
const rules = ref({
|
|
|
nick_name: [{ required: true, message: '请选择姓名', trigger: 'change' }],
|
|
|
yzy_account: [{ required: true, message: '请输入粤政易组织', trigger: 'blur' }],
|
|
|
phonenumber: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
|
|
|
- area: [{ required: true, message: '请选择责任区划', trigger: 'change' }]
|
|
|
+ area_code: [{ required: true, message: '请选择责任区划', trigger: 'change' }]
|
|
|
});
|
|
|
const fetchDetail = async () => {
|
|
|
const response = await inspectorDetail(props.eventId);
|
|
|
@@ -68,16 +102,108 @@ watch(
|
|
|
const closeDialog = () => {
|
|
|
emits('close');
|
|
|
};
|
|
|
+const findNode = (nodes, code) => {
|
|
|
+ for (let i = 0; i < nodes.length; i++) {
|
|
|
+ const node = nodes[i];
|
|
|
+ if (node.code === code) {
|
|
|
+ return node;
|
|
|
+ }
|
|
|
+ if (node.children && node.children.length > 0) {
|
|
|
+ const found = findNode(node.children, code);
|
|
|
+ if (found) {
|
|
|
+ return found;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return null;
|
|
|
+};
|
|
|
// 提交表单
|
|
|
const submitForm = async () => {
|
|
|
- // 假设表单已经通过验证
|
|
|
- const response = await inspectorUpload(formData.value);
|
|
|
+ try {
|
|
|
+ let area_codeCode = '';
|
|
|
+ // 确保在提交前有选中的区划
|
|
|
+ if (formData.value.area_code) {
|
|
|
+ const selectedDivision = findNode(formattedDivisionData.value, formData.value.area_code);
|
|
|
+ if (selectedDivision) {
|
|
|
+ area_codeCode = selectedDivision.code;
|
|
|
+ } else {
|
|
|
+ ElMessage.error('请选择责任区划。');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (!area_codeCode) {
|
|
|
+ ElMessage.error('请选择责任区划。');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 假设表单已经通过验证
|
|
|
+ const response = await inspectorUpload(formData.value);
|
|
|
+ if (response.code === 200) {
|
|
|
+ ElMessage.success('提交成功');
|
|
|
+ closeDialog(); // 关闭对话框
|
|
|
+ } else {
|
|
|
+ ElMessage.error(response.msg);
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ ElMessage.error('提交失败，请检查输入信息。');
|
|
|
+ }
|
|
|
+
|
|
|
+};
|
|
|
+const fetchPhoneList = async () => {
|
|
|
+ const response = await phoneList();
|
|
|
+ treeData.value = response.data;
|
|
|
+};
|
|
|
+
|
|
|
+const defaultProps = reactive({
|
|
|
+ children:'children',
|
|
|
+ label:'label',
|
|
|
+ disabled:(node) => {
|
|
|
+ return node.deptType && !node.children;
|
|
|
+ }
|
|
|
+})
|
|
|
+const onUserNameChange = async (value) => {
|
|
|
+ if (value) {
|
|
|
+ const response = await userList({ userId: value });
|
|
|
+ if (response.code === 200 && response.rows.length > 0) {
|
|
|
+ updateFormData(response);
|
|
|
+ } else {
|
|
|
+ ElMessage.error(response.msg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+// 格式化责任区划数据
|
|
|
+const formatDivisionData = (data) => {
|
|
|
+ return data.map((item) => ({
|
|
|
+ id: item.id,
|
|
|
+ label: item.label,
|
|
|
+ code: item.code,
|
|
|
+ children: item.children ? formatDivisionData(item.children) : []
|
|
|
+ }));
|
|
|
+};
|
|
|
+const fetchDivisionData = async () => {
|
|
|
+ const response = await inspectorDivision();
|
|
|
if (response.code === 200) {
|
|
|
- ElMessage.success('提交成功');
|
|
|
- closeDialog(); // 关闭对话框
|
|
|
+ rawDivisionData.value = response.data;
|
|
|
+ formattedDivisionData.value = formatDivisionData(rawDivisionData.value);
|
|
|
+ console.log('Formatted Division Data:', formattedDivisionData.value);
|
|
|
} else {
|
|
|
ElMessage.error(response.msg);
|
|
|
}
|
|
|
};
|
|
|
+const onDivisionChange = (value) => {
|
|
|
+ // 确认选中的项存在
|
|
|
+ const selectedDivision = findNode(formattedDivisionData.value, value);
|
|
|
+ if (!selectedDivision) {
|
|
|
+ ElMessage.warning('未找到匹配的责任区划。');
|
|
|
+ // 将选中的值重置为 null 或空字符串，防止后续逻辑错误
|
|
|
+ formData.value.area_code = null;
|
|
|
+ } else {
|
|
|
+ console.log('Selected Division:', selectedDivision); // 调试输出
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ fetchPhoneList();
|
|
|
+ fetchDivisionData();
|
|
|
+});
|
|
|
</script>
|
|
|
<style scoped></style>
|
