yjhtgl-web/src/views/inspectionWork/inspectorEdit.vue

<template>
  <div class="common-dialog">
    <div class="common-dialog-content">
      <div class="common-dialog-title-box">
        <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" class="custom-disabled">
<!--          <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="nick_name">
            <el-tree-select
              v-model="formData.nick_name"
              :data="treeData"
              :props="defaultProps"
              node-key="id"
              :render-after-expand="false"
              style="width: 468px"
              filterable
              disabled
            />
          </el-form-item>
          <el-form-item label="粤政易组织：" prop="ancestors_names">
            <el-input v-model="formData.ancestors_names" style="width: 468px !important" disabled />
          </el-form-item>
          <el-form-item label="联系方式：" prop="phonenumber">
            <el-input v-model="formData.phonenumber" style="width: 468px !important"  disabled />
          </el-form-item>
<!--          <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">
            <el-tree-select
              v-model="formData.area"
              :load="loadNodes"
              lazy
              node-key="id"
              :props="{ label: 'label', value: 'id', children: 'children', isLeaf: 'isShowSelect' }"
              :render-after-expand="false"
              style="width: 468px"
              check-strictly
            />
          </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,
  inspectorDivision,
  inspectorUpload,
  phoneList,
  userList
} from '@/api/inspectionWork/inspector';
import { reactive, ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { getRegionalTree } from '@/api/PreventionResponsible';
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_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_code: [{ required: true, message: '请选择责任区划', trigger: 'change' }]
});
const fetchDetail = async () => {
  const response = await inspectorDetail(props.eventId);
  if (response.code === 200) {
    formData.value = response.data;
  } else {
    ElMessage.error(response.msg);
  }
};

const loadNodes = (node, resolve) => {
  node.data.id = !node.data.id ? 0 : node.data.id;
  getRegionalTree(node.data.id).then((res) => {
    resolve(res.data);
  })
}

watch(
  () => props.eventId,
  (newVal) => {
    if (newVal) {
      fetchDetail();
    }
  },
  { immediate: true }
);
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 () => {
  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 fetchDivisionData = async () => {
  const response = await inspectorDivision();
  if (response.code === 200) {
    rawDivisionData.value = response.data;
    formattedDivisionData.value = rawDivisionData.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>
.custom-disabled {
  :deep(.el-select__wrapper.is-disabled),
  :deep(.el-input__wrapper) {
    background-color: #ffffff !important;
  }
  :deep(.el-select__wrapper.is-disabled .el-select__selected-item),
  :deep(.el-input__inner) {
    color: rgba(0, 0, 0, 0.85) !important;
    -webkit-text-fill-color: rgba(0, 0, 0, 0.85) !important;
  }
}
</style>