yjhtgl-web/src/views/setting/PreventionResponsible/Edit.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" style="width: 1000px">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="160px">
          <el-form-item label="姓名：" prop="name">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="电话号码：" prop="phone">
            <el-input v-model="form.phone" />
          </el-form-item>
          <el-form-item label="所属单位：" prop="unit_name">
            <el-input v-model="form.unit_name" />
            <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" />
          </el-form-item>
          <el-form-item label="行政区划：" prop="area_code">
            <el-select v-model="data1" 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" 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" 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>
          </el-form-item>
          <el-form-item label="办公电话：" prop="office_phone">
            <div class="phone-input-container">
              <el-input v-model="form.office_phone_prefix" style="width: 120px"></el-input>
              <span class="phone-input-separator">-</span>
              <el-input v-model="form.office_phone_number" style="width: 200px"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="排位顺序：" prop="order_num">
            <el-input v-model="form.order_num" />
            <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)">
                  {{ 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-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" />
                  </div>
                  <div v-if="item.label === '重点部门'">
                    <span>请填写单位名称：</span>
                    <el-input v-model="item.dept_name" style="width: 240px" @change="memberUnits" />
                    <div style="display: flex">
                      <span>请选择责任类别：</span>
                      <el-checkbox-group v-model="item.other_type_id" @change="getChOption">
                        <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>
                    <el-input v-model="item.dept_name" style="width: 240px" @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-for="item2 in item.children2" v-if="item.id === '7'" :key="item2" :value="item2.id">
                          {{ item2.label }}
                        </el-checkbox-button>
                      </el-checkbox-group>
                    </div>
                  </div>
                  <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-for="item2 in item.children2" v-if="item.id === '9'" :key="item2" :value="item2.id">
                        {{ item2.label }}
                      </el-checkbox-button>
                    </el-checkbox-group>
                  </div>
                  <div v-if="item.label === '地质灾害'">
                    <span>请填写隐患点名称：</span>
                    <el-input v-model="item.denger_point_name" style="width: 240px" placeholder="" @change="memberUnits" />
                  </div>
                  <div v-if="item.label === '其他'">
                    <span>请填写具体类型：</span>
                    <el-input
                      v-model="item.other_type_2_name"
                      style="width: 240px"
                      placeholder="请填写责任类型，如：重点单位等"
                      @change="memberUnits"
                    />
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-form-item>
        </el-form>
        <div class="common-dialog-footer">
          <el-button @click="goBack">取消</el-button>
          <el-button :loading="buttonLoading" type="primary" @click="submitNewPerson()">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, toRefs, watch } from 'vue';
import { ElMessage, TabsPaneContext } from 'element-plus';
import { updateData, getPersonRespon, getZoning, responsibleDetail } from '@/api/PreventionResponsible';

const category = ref([]);
const checkboxGroup2 = ref([]);
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps<{
  id: string | number;
}>();
const buttonLoading = ref(false);
const data1 = ref();
const data2 = ref();
const data3 = ref();

// 表单数据
const data = reactive({
  form: {
    unit_id: '',
    unit_name: '',
    name: '',
    area_code: '',
    position: '',
    phone: '',
    order_num: '',
    type_list: [],
    office_phone_prefix: '',
    office_phone_number: ''
  },
  rules: {
    name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
    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: 'change' }]
  }
});
const prepareUpdatePayload = () => {
  const payload = {
    id: form.value.id,
    unit_name: form.value.unit_name,
    name: form.value.name,
    area_code: form.value.area_code,
    position: form.value.position,
    phone: form.value.phone,
    telephone: `${form.value.office_phone_prefix}-${form.value.office_phone_number}`,
    order_num: form.value.order_num,
    type_list: form.value.type_list.map(item => ({
      type_parent_id: item.type_parent_id,
      children: item.children,
      dept_name: item.dept_name || null,
      children2: item.children2 || [],
      other_type_2_name: item.other_type_2_name || null,
      denger_point_name: item.denger_point_name || null
    }))
  };
  return payload;
};
const { form } = toRefs(data);
const emits = defineEmits(['close']);
const formRef = ref<InstanceType<typeof ElForm> | null>(null);
const options1 = ref('');
const options2 = ref('');
const options3 = ref('');
const getOptions1 = (id) => {
  getZoning(id).then((res) => {
    options1.value = res.data;
  });
};
const getOptions2 = () => {
  if (!data1.value) {
    data2.value = '';
    data3.value = '';
    form.value.area_code = undefined;
    options2.value = undefined;
    return;
  } else {
    getZoning(data1.value).then((res) => {
      options2.value = res.data;
    });
    form.value.area_code = data1.value;
  }
};
const getOptions3 = () => {
  if (!data2.value) {
    data3.value = '';
    form.value.area_code = data1.value;
    options3.value = undefined;
    return;
  } 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 {
    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;
  });
};

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 = () => {
  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 memberUnits = () => {
  let datatemp = [];
  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);
    }
  }
  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) {
    form.value.type_list.splice(index, 1);
  }
};
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);
    }
  }
  form.value.type_list = datatemp;
};
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
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 };

    // 分割办公电话为区号和电话号码
    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 setDefaultAreaSelection = (areaList, areaCode) => {
  let selectedAreas = [];

  // 逆向遍历 area_list 找到 area_code 对应的所有上级区域
  for (let i = areaList.length - 1; i >= 0; i--) {
    const area = areaList[i];
    if (area.id === areaCode) {
      selectedAreas.push({ id: area.id, label: area.label });
      break;
    }
  }

  // 如果找到了目标区域，则依次查找其上级区域
  while (selectedAreas.length < 3 && areaList.length > 0) {
    const lastSelected = selectedAreas[selectedAreas.length - 1];
    const parent = areaList.find(area => area.id !== lastSelected.id && areaList.some(child => child.id === lastSelected.id));
    if (parent) {
      selectedAreas.push({ id: parent.id, label: parent.label });
    } else {
      break;
    }
  }

  // 将找到的区域信息反向排序，以确保按照省市区的顺序填充到表单中
  selectedAreas.reverse();

  // 更新下拉框的选择状态
  [data1.value, data2.value, data3.value] = selectedAreas.map(area => area.id);
  form.value.area_code = areaCode;

  // 确保下拉框选项也被正确加载
  getOptions2();
  getOptions3();
};
const submitNewPerson = async () => {
  try {
    // 表单验证
    await formRef.value.validate();

    // 准备更新请求的负载
    const payload = prepareUpdatePayload();

    // 发送更新请求
    const response = await updateData(payload);

    if (response.code === 200) {
      ElMessage.success('更新成功');
      goBack();
      emits('refresh');
    } else {
      ElMessage.error('更新失败，请重试');
    }
  } catch (error) {
    console.error(error);
    ElMessage.error('验证未通过或请求失败');
  }
};
onMounted(() => {
  getOptions1(2);
  getCategory();
  fetchData();
});
// 返回上一级
const goBack = () => {
  emits('close');
};
</script>

<style scoped lang="scss">
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>