sl-sfy-safety/src/views/production-safety/implement-safety-duty/non-public-area-responsibilities/add.vue

<template>
  <div class="safety-platform-container">
    <header class="safety-platform-container__header">
      <div class="breadcrumb-title">
        <BreadcrumbBack />
        创建非公共区域责任清单
      </div>
    </header>
    <main class="safety-platform-container__main">
      <el-form ref="formRef" label-width="auto" :model="formValue" :rules="rules">
        <el-form-item label="楼号" prop="buildingNo">
          <el-input v-model="formValue.buildingNo" size="large" placeholder="请输入楼号" style="width: 50%" />
        </el-form-item>
        <el-form-item label="楼宇/区域" prop="buildingArea">
          <el-input v-model="formValue.buildingArea" size="large" placeholder="请输入楼宇/区域" style="width: 50%" />
        </el-form-item>
        <el-form-item label="楼层/房号" prop="floorRoomNo">
          <el-input v-model="formValue.floorRoomNo" size="large" placeholder="请输入楼层/房号" style="width: 50%" />
        </el-form-item>
        <el-form-item label="名称/功能" prop="nameFunction">
          <el-input v-model="formValue.nameFunction" size="large" placeholder="请输入名称/功能" style="width: 50%" />
        </el-form-item>

        <el-form-item label="安全责任所/中心" prop="safetyResponsibleCenter">
          <!-- <el-select
            v-model="formValue.safetyResponsibleCenter"
            placeholder="请选择"
            size="large"
            style="width: 50%"
            filterable
          >
            <el-option
              v-for="item in firstLevelDepts"
              :key="item.hrIdtOrgId"
              :label="item.deptName"
              :value="item.deptName"
            />
          </el-select> -->
          <el-cascader
            style="width: 50%"
            size="large"
            :ref="(el) => (cascaderRef['safetyResponsibleCenter'] = el)"
            :options="firstLevelDepts"
            :props="cascaderProp"
            :show-all-levels="false"
            placeholder="请选择安全责任部门"
            filterable
            @change="(val) => handleChangeDept(val, 'safetyResponsibleCenter')"
          />
        </el-form-item>

        <el-form-item label="安全责任所/中心负责人" prop="safetyCenterManager">
          <el-select
            v-model="formValue.safetyCenterManager"
            placeholder="请选择"
            size="large"
            style="width: 50%"
            filterable
            @change="(val) => syncUserName(val, safetyCenterManagerOptions, 'safetyCenterManagerName')"
          >
            <el-option
              v-for="item in safetyCenterManagerOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="安全责任部门" prop="safetyResponsibleDepartment">
          <!-- <el-select
            v-model="formValue.safetyResponsibleDepartment"
            placeholder="请选择"
            size="large"
            style="width: 50%"
            filterable
          >
            <el-option
              v-for="item in firstLevelDepts"
              :key="item.hrIdtOrgId"
              :label="item.deptName"
              :value="item.deptName"
            />
          </el-select> -->
          <el-cascader
            style="width: 50%"
            size="large"
            :ref="(el) => (cascaderRef['safetyResponsibleDepartment'] = el)"
            :options="firstLevelDepts"
            :props="cascaderProp"
            :show-all-levels="false"
            placeholder="请选择安全责任部门"
            filterable
            @change="(val) => handleChangeDept(val, 'safetyResponsibleDepartment')"
          />
        </el-form-item>

        <el-form-item label="安全责任部门负责人" prop="safetyDepartmentManager">
          <el-select
            v-model="formValue.safetyDepartmentManager"
            placeholder="请选择"
            size="large"
            style="width: 50%"
            filterable
            @change="(val) => syncUserName(val, safetyDepartmentUserOptions, 'safetyDepartmentManagerName')"
          >
            <el-option
              v-for="item in safetyDepartmentUserOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <!-- @change="handleSpecificPersonChange" -->

        <el-form-item label="安全具体责任人" prop="safetySpecificPerson">
          <el-select
            v-model="formValue.safetySpecificPerson"
            placeholder="请选择"
            size="large"
            style="width: 50%"
            filterable
            @change="(val) => syncUserName(val, safetyDepartmentUserOptions, 'safetySpecificPersonName')"
          >
            <el-option
              v-for="item in safetyDepartmentUserOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="安全具体责任人联系方式" prop="safetyPersonContact">
          <el-input
            v-model="formValue.safetyPersonContact"
            size="large"
            placeholder="选择责任人后自动填充"
            style="width: 50%"
          />
        </el-form-item>
      </el-form>
    </main>
    <footer class="safety-platform-container__footer">
      <el-button @click="$router.push({ name: 'areaResponsibilities:nonPublic' })">返回</el-button>
      <el-button type="primary" :loading="submiting" @click="handleSubmit">提交</el-button>
    </footer>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted, nextTick } from 'vue';
  import { useRouter } from 'vue-router';
  import { ElMessage } from 'element-plus';
  import { getAllDepartments } from '@/api/auth/dept';
  import { formatDeptTree } from '@/views/disaster/utils/formatDeptTree';

  import { queryAvailableUserList, areaCheckListSavaArea } from '@/api/production-safety/responsibility-implementation';

  const router = useRouter();
  const formRef = ref<any>(null);
  const submiting = ref(false);
  const cascaderRef = ref({});

  const safetyCenterManagerOptions = ref<any[]>([]);
  const safetyDepartmentUserOptions = ref<any[]>([]);
  const firstLevelDepts = ref<any[]>([]);
  const cascaderProp = {
    expandTrigger: 'click',
    checkStrictly: true,
    // emitPath: false,
    value: 'id',
    label: 'deptName',
  };

  const formValue = reactive({
    buildingNo: '',
    buildingArea: '',
    floorRoomNo: '',
    nameFunction: '',
    safetyResponsibleCenter: '',
    safetyCenterManager: null as number | null,
    safetyCenterManagerName: '',
    safetyResponsibleDepartment: '',
    safetyDepartmentManager: null as number | null,
    safetyDepartmentManagerName: '',
    safetySpecificPerson: null as number | null,
    safetySpecificPersonName: '',
    safetyPersonContact: '',
  });

  const rules = reactive({
    buildingNo: [{ required: true, message: '请输入楼号' }],
    buildingArea: [{ required: true, message: '请输入楼宇/区域' }],
    floorRoomNo: [{ required: true, message: '请输入楼层/房号' }],
    nameFunction: [{ required: true, message: '请输入名称/功能' }],

    safetyResponsibleCenter: [{ required: true, message: '请选择安全责任所/中心', trigger: 'change' }],
    safetyCenterManager: [{ required: true, message: '请选择安全责任所/中心负责人', trigger: 'change' }],

    safetyResponsibleDepartment: [{ required: true, message: '请选择安全责任部门', trigger: 'change' }],
    safetyDepartmentManager: [{ required: true, message: '请选择安全责任部门负责人', trigger: 'change' }],

    safetySpecificPerson: [{ required: true, message: '请选择安全具体责任人', trigger: 'change' }],
    safetyPersonContact: [
      { required: true, message: '请输入安全具体责任人联系方式' },
      { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码格式' },
    ],
  });
  const handleQueryAvailableUserList = (deptName, prop, realname = '') => {
    queryAvailableUserList({
      pageNumber: 1,
      pageSize: 200,
      queryParam: {
        deptName,
        realname,
      },
    }).then((res: any) => {
      switch (prop) {
        case 'safetyResponsibleCenter':
          formValue.safetyCenterManager = null;
          safetyCenterManagerOptions.value = (res.records || []).map((u: any) => ({
            value: u.userId || u.id,
            label: u.realname,
          }));
          break;
        case 'safetyResponsibleDepartment':
          formValue.safetyDepartmentManager = null;
          formValue.safetySpecificPerson = null;
          safetyDepartmentUserOptions.value = (res.records || []).map((u: any) => ({
            value: u.userId || u.id,
            label: u.realname,
          }));
          break;
        default:
          break;
      }
    });
  };
  const handleChangeDept = (val, prop) => {
    const cascader = cascaderRef.value?.[prop];
    const deptInfo = cascader?.getCheckedNodes();
    Object.assign(formValue, {
      [prop]: deptInfo[0].label,
    });
    console.log('@val', val);
    formRef.value.validateField(prop);
    nextTick(() => {
      handleQueryAvailableUserList(deptInfo[0].label, prop);
    });
  };

  const getDeptData = () => {
    getAllDepartments().then((res) => {
      firstLevelDepts.value = formatDeptTree(res);
    });
  };

  // const getUserData = () => {
  //   getUserList({ pageNumber: 1, pageSize: 200, queryParam: {} }).then((res: any) => {
  //     userOptions.value = (res.records || []).map((u: any) => ({
  //       id: u.userId || u.id,
  //       name: u.realName || u.username,
  //     }));
  //   });
  // };

  const syncUserName = (id: number, options: any[], nameField: string) => {
    const user = options.find((u) => u.value === id);
    if (user) {
      formValue[nameField] = user.label;
      console.log(formValue);
    }
  };

  // const handleSpecificPersonChange = (id: number, options: any[], nameField) => {
  //   const user = userOptions.value.find((u) => u.id === id);
  //   if (user) {
  //     formValue.safetySpecificPersonName = user.name;
  //     formValue.safetyPersonContact = user.mobile;
  //   }
  // };

  onMounted(() => {
    getDeptData();
    // getUserData();
  });

  const handleSubmit = () => {
    formRef.value?.validate((valid: boolean) => {
      if (valid) {
        submiting.value = true;
        areaCheckListSavaArea({
          ...formValue,
          type: 2,
        })
          .then(() => {
            ElMessage.success('创建成功!');
            router.push({ name: 'areaResponsibilities:nonPublic' });
          })
          .finally(() => {
            submiting.value = false;
          });
      }
    });
  };
</script>
<style lang="scss" scoped>
  @use '@/styles/page-main-layout.scss' as *;
  @use '@/styles/page-details-layout.scss' as *;
  @use '@/styles/basic-table-action.scss' as *;
  .editor-container {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    margin-right: 20px;
    overflow: hidden;

    // :deep(.w-e-text-container) {
    //   min-height: 400px;
    //   overflow-y: auto;
    // }
  }
  // :deep(.breadcrumb .title) {
  //   margin-left: 0;
  // }

  // .main {
  //   display: flex;
  //   flex-direction: column;
  //   padding: 20px;
  //   flex: 1;
  //   overflow: hidden;
  //   background-color: #fff;
  // }
  // .button-content {
  //   margin-bottom: 20px;
  // }

  // .page-content {
  //   display: flex;
  //   justify-content: flex-end;
  // }
  // // :deep(.el-form) {
  // //   flex: 1;
  // //   overflow: hidden;
  // //   overflow-y: auto;
  // // }
</style>