|
@@ -22,20 +22,18 @@
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<el-form-item label="安全责任所/中心" prop="safetyResponsibleCenter">
|
|
<el-form-item label="安全责任所/中心" prop="safetyResponsibleCenter">
|
|
|
- <el-select
|
|
|
|
|
- v-model="formValue.safetyResponsibleCenter"
|
|
|
|
|
- placeholder="请选择"
|
|
|
|
|
- size="large"
|
|
|
|
|
|
|
+ <el-cascader
|
|
|
|
|
+ v-model="formValue.safetyResponsibleCenterId"
|
|
|
style="width: 50%"
|
|
style="width: 50%"
|
|
|
|
|
+ size="large"
|
|
|
|
|
+ :ref="(el) => (cascaderRef['safetyResponsibleCenter'] = el)"
|
|
|
|
|
+ :options="firstLevelDepts"
|
|
|
|
|
+ :props="cascaderProp"
|
|
|
|
|
+ :show-all-levels="false"
|
|
|
|
|
+ placeholder="请选择安全责任部门"
|
|
|
filterable
|
|
filterable
|
|
|
- >
|
|
|
|
|
- <el-option
|
|
|
|
|
- v-for="item in firstLevelDepts"
|
|
|
|
|
- :key="item.hrIdtOrgId"
|
|
|
|
|
- :label="item.deptName"
|
|
|
|
|
- :value="item.deptName"
|
|
|
|
|
- />
|
|
|
|
|
- </el-select>
|
|
|
|
|
|
|
+ @change="(val) => handleChangeDept(val, 'safetyResponsibleCenter')"
|
|
|
|
|
+ />
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<el-form-item label="安全责任所/中心负责人" prop="safetyCenterManager">
|
|
<el-form-item label="安全责任所/中心负责人" prop="safetyCenterManager">
|
|
@@ -45,27 +43,30 @@
|
|
|
size="large"
|
|
size="large"
|
|
|
style="width: 50%"
|
|
style="width: 50%"
|
|
|
filterable
|
|
filterable
|
|
|
- @change="(val) => syncUserName(val, 'safetyCenterManagerName')"
|
|
|
|
|
|
|
+ @change="(val) => syncUserName(safetyCenterManagerOptions, val, 'safetyCenterManagerName')"
|
|
|
>
|
|
>
|
|
|
- <el-option v-for="item in userOptions" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
|
|
|
|
+ <el-option
|
|
|
|
|
+ v-for="item in safetyCenterManagerOptions"
|
|
|
|
|
+ :key="item.value"
|
|
|
|
|
+ :label="item.label"
|
|
|
|
|
+ :value="item.value"
|
|
|
|
|
+ />
|
|
|
</el-select>
|
|
</el-select>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<el-form-item label="安全责任部门" prop="safetyResponsibleDepartment">
|
|
<el-form-item label="安全责任部门" prop="safetyResponsibleDepartment">
|
|
|
- <el-select
|
|
|
|
|
- v-model="formValue.safetyResponsibleDepartment"
|
|
|
|
|
- placeholder="请选择"
|
|
|
|
|
- size="large"
|
|
|
|
|
|
|
+ <el-cascader
|
|
|
|
|
+ v-model="formValue.safetyResponsibleDepartmentId"
|
|
|
style="width: 50%"
|
|
style="width: 50%"
|
|
|
|
|
+ size="large"
|
|
|
|
|
+ :ref="(el) => (cascaderRef['safetyResponsibleDepartment'] = el)"
|
|
|
|
|
+ :options="firstLevelDepts"
|
|
|
|
|
+ :props="cascaderProp"
|
|
|
|
|
+ :show-all-levels="false"
|
|
|
|
|
+ placeholder="请选择安全责任部门"
|
|
|
filterable
|
|
filterable
|
|
|
- >
|
|
|
|
|
- <el-option
|
|
|
|
|
- v-for="item in firstLevelDepts"
|
|
|
|
|
- :key="item.hrIdtOrgId"
|
|
|
|
|
- :label="item.deptName"
|
|
|
|
|
- :value="item.deptName"
|
|
|
|
|
- />
|
|
|
|
|
- </el-select>
|
|
|
|
|
|
|
+ @change="(val) => handleChangeDept(val, 'safetyResponsibleDepartment')"
|
|
|
|
|
+ />
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<el-form-item label="安全责任部门负责人" prop="safetyDepartmentManager">
|
|
<el-form-item label="安全责任部门负责人" prop="safetyDepartmentManager">
|
|
@@ -75,9 +76,9 @@
|
|
|
size="large"
|
|
size="large"
|
|
|
style="width: 50%"
|
|
style="width: 50%"
|
|
|
filterable
|
|
filterable
|
|
|
- @change="(val) => syncUserName(val, 'safetyDepartmentManagerName')"
|
|
|
|
|
|
|
+ @change="(val) => syncUserName(userOptions, val, 'safetyDepartmentManagerName')"
|
|
|
>
|
|
>
|
|
|
- <el-option v-for="item in userOptions" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
|
|
|
|
+ <el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
</el-select>
|
|
</el-select>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
|
|
|
@@ -88,9 +89,9 @@
|
|
|
size="large"
|
|
size="large"
|
|
|
style="width: 50%"
|
|
style="width: 50%"
|
|
|
filterable
|
|
filterable
|
|
|
- @change="handleSpecificPersonChange"
|
|
|
|
|
|
|
+ @change="(val) => syncUserName(userOptions, val, 'safetySpecificPersonName')"
|
|
|
>
|
|
>
|
|
|
- <el-option v-for="item in userOptions" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
|
|
|
|
+ <el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
</el-select>
|
|
</el-select>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
|
|
|
@@ -112,17 +113,16 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
|
<script lang="ts" setup>
|
|
|
- import { ref, reactive, onMounted } from 'vue';
|
|
|
|
|
|
|
+ import { ref, reactive, onMounted, nextTick } from 'vue';
|
|
|
import { useRouter, useRoute } from 'vue-router';
|
|
import { useRouter, useRoute } from 'vue-router';
|
|
|
import { ElMessage } from 'element-plus';
|
|
import { ElMessage } from 'element-plus';
|
|
|
import { getAllDepartments } from '@/api/auth/dept';
|
|
import { getAllDepartments } from '@/api/auth/dept';
|
|
|
import { formatDeptTree } from '@/views/disaster/utils/formatDeptTree';
|
|
import { formatDeptTree } from '@/views/disaster/utils/formatDeptTree';
|
|
|
import {
|
|
import {
|
|
|
- queryUserPageByUsername,
|
|
|
|
|
areaCheckListQueryDetail,
|
|
areaCheckListQueryDetail,
|
|
|
areaCheckListUpdateArea,
|
|
areaCheckListUpdateArea,
|
|
|
|
|
+ queryAvailableUserList,
|
|
|
} from '@/api/production-safety/responsibility-implementation';
|
|
} from '@/api/production-safety/responsibility-implementation';
|
|
|
- import { getUserList } from '@/api/system/user-operate';
|
|
|
|
|
|
|
|
|
|
const router = useRouter();
|
|
const router = useRouter();
|
|
|
const route = useRoute();
|
|
const route = useRoute();
|
|
@@ -130,17 +130,23 @@
|
|
|
const submiting = ref(false);
|
|
const submiting = ref(false);
|
|
|
|
|
|
|
|
const userOptions = ref<any[]>([]);
|
|
const userOptions = ref<any[]>([]);
|
|
|
|
|
+ const safetyCenterManagerOptions = ref<any[]>([]);
|
|
|
const firstLevelDepts = ref<any[]>([]);
|
|
const firstLevelDepts = ref<any[]>([]);
|
|
|
|
|
+ const cascaderRef = ref({});
|
|
|
|
|
+ const cascaderProp = { expandTrigger: 'click', checkStrictly: true, value: 'id', label: 'deptName' };
|
|
|
|
|
|
|
|
const formValue = reactive({
|
|
const formValue = reactive({
|
|
|
|
|
+ id: undefined,
|
|
|
buildingNo: '',
|
|
buildingNo: '',
|
|
|
buildingArea: '',
|
|
buildingArea: '',
|
|
|
floorRoomNo: '',
|
|
floorRoomNo: '',
|
|
|
nameFunction: '',
|
|
nameFunction: '',
|
|
|
safetyResponsibleCenter: '',
|
|
safetyResponsibleCenter: '',
|
|
|
|
|
+ safetyResponsibleCenterId: [],
|
|
|
safetyCenterManager: null as number | null,
|
|
safetyCenterManager: null as number | null,
|
|
|
safetyCenterManagerName: '',
|
|
safetyCenterManagerName: '',
|
|
|
safetyResponsibleDepartment: '',
|
|
safetyResponsibleDepartment: '',
|
|
|
|
|
+ safetyResponsibleDepartmentId: [],
|
|
|
safetyDepartmentManager: null as number | null,
|
|
safetyDepartmentManager: null as number | null,
|
|
|
safetyDepartmentManagerName: '',
|
|
safetyDepartmentManagerName: '',
|
|
|
safetySpecificPerson: null as number | null,
|
|
safetySpecificPerson: null as number | null,
|
|
@@ -153,93 +159,124 @@
|
|
|
buildingArea: [{ required: true, message: '请输入楼宇/区域' }],
|
|
buildingArea: [{ required: true, message: '请输入楼宇/区域' }],
|
|
|
floorRoomNo: [{ required: true, message: '请输入楼层/房号' }],
|
|
floorRoomNo: [{ required: true, message: '请输入楼层/房号' }],
|
|
|
nameFunction: [{ required: true, message: '请输入名称/功能' }],
|
|
nameFunction: [{ required: true, message: '请输入名称/功能' }],
|
|
|
-
|
|
|
|
|
safetyResponsibleCenter: [{ required: true, message: '请选择安全责任所/中心', trigger: 'change' }],
|
|
safetyResponsibleCenter: [{ required: true, message: '请选择安全责任所/中心', trigger: 'change' }],
|
|
|
- safetyCenterManager: [{ required: true, message: '请选择安全责任所/中心负责人', trigger: 'change' }],
|
|
|
|
|
-
|
|
|
|
|
|
|
+ safetyCenterManager: [{ required: true, message: '请选择负责人', trigger: 'change' }],
|
|
|
safetyResponsibleDepartment: [{ required: true, message: '请选择安全责任部门', trigger: 'change' }],
|
|
safetyResponsibleDepartment: [{ required: true, message: '请选择安全责任部门', trigger: 'change' }],
|
|
|
- safetyDepartmentManager: [{ required: true, message: '请选择安全责任部门负责人', trigger: 'change' }],
|
|
|
|
|
-
|
|
|
|
|
|
|
+ safetyDepartmentManager: [{ required: true, message: '请选择负责人', trigger: 'change' }],
|
|
|
safetySpecificPerson: [{ required: true, message: '请选择安全具体责任人', trigger: 'change' }],
|
|
safetySpecificPerson: [{ required: true, message: '请选择安全具体责任人', trigger: 'change' }],
|
|
|
safetyPersonContact: [
|
|
safetyPersonContact: [
|
|
|
- { required: true, message: '请输入安全具体责任人联系方式' },
|
|
|
|
|
- { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码格式' },
|
|
|
|
|
|
|
+ { required: true, message: '请输入联系方式' },
|
|
|
|
|
+ { pattern: /^1[3-9]\d{9}$/, message: '格式不正确' },
|
|
|
],
|
|
],
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
- // 获取部门数据
|
|
|
|
|
const getDeptData = () => {
|
|
const getDeptData = () => {
|
|
|
getAllDepartments().then((res) => {
|
|
getAllDepartments().then((res) => {
|
|
|
firstLevelDepts.value = formatDeptTree(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 getUserData = (optionList, deptName) => {
|
|
|
|
|
+ return queryAvailableUserList({
|
|
|
|
|
+ pageNumber: 1,
|
|
|
|
|
+ pageSize: 200,
|
|
|
|
|
+ queryParam: { deptName },
|
|
|
|
|
+ }).then((res: any) => {
|
|
|
|
|
+ optionList.value = (res.records || []).map((u: any) => ({
|
|
|
|
|
+ value: u.id,
|
|
|
|
|
+ label: u.realname,
|
|
|
|
|
+ mobile: u.mobile,
|
|
|
}));
|
|
}));
|
|
|
});
|
|
});
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
- const syncUserName = (id: number, nameField: string) => {
|
|
|
|
|
- const user = userOptions.value.find((u) => u.id === id);
|
|
|
|
|
- if (user) formValue[nameField] = user.name;
|
|
|
|
|
|
|
+ const handleChangeDept = (val, prop) => {
|
|
|
|
|
+ const cascader = cascaderRef.value?.[prop];
|
|
|
|
|
+ const deptInfo = cascader?.getCheckedNodes();
|
|
|
|
|
+ if (deptInfo?.length) {
|
|
|
|
|
+ formValue[prop] = deptInfo[0].label;
|
|
|
|
|
+ handleQueryAvailableUserList(deptInfo[0].label, prop);
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const handleQueryAvailableUserList = (value, prop) => {
|
|
|
|
|
+ if (prop === 'safetyResponsibleCenter') {
|
|
|
|
|
+ formValue.safetyCenterManager = null;
|
|
|
|
|
+ getUserData(safetyCenterManagerOptions, value);
|
|
|
|
|
+ } else {
|
|
|
|
|
+ formValue.safetySpecificPerson = null;
|
|
|
|
|
+ formValue.safetyDepartmentManager = null;
|
|
|
|
|
+ getUserData(userOptions, value);
|
|
|
|
|
+ }
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
- const handleSpecificPersonChange = (id: number) => {
|
|
|
|
|
- const user = userOptions.value.find((u) => u.id === id);
|
|
|
|
|
|
|
+ const syncUserName = (optionList, id, nameField) => {
|
|
|
|
|
+ const user = optionList.find((u) => u.value === id);
|
|
|
if (user) {
|
|
if (user) {
|
|
|
- formValue.safetySpecificPersonName = user.name;
|
|
|
|
|
- formValue.safetyPersonContact = user.mobile;
|
|
|
|
|
|
|
+ formValue[nameField] = user.label;
|
|
|
|
|
+ if (nameField === 'safetySpecificPersonName') formValue.safetyPersonContact = user.mobile;
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const handlAreaCheckListQueryDetail = async () => {
|
|
|
|
|
+ const id = route.query.id;
|
|
|
|
|
+ if (!id) return;
|
|
|
|
|
+
|
|
|
|
|
+ try {
|
|
|
|
|
+ const res: any = await areaCheckListQueryDetail({ id });
|
|
|
|
|
+ if (res) {
|
|
|
|
|
+ // 1. 基础赋值
|
|
|
|
|
+ Object.assign(formValue, res);
|
|
|
|
|
+
|
|
|
|
|
+ // 2. 解析 JSON 字符串格式的 ID 数组
|
|
|
|
|
+ try {
|
|
|
|
|
+ if (typeof res.safetyResponsibleCenterId === 'string') {
|
|
|
|
|
+ formValue.safetyResponsibleCenterId = JSON.parse(res.safetyResponsibleCenterId);
|
|
|
|
|
+ }
|
|
|
|
|
+ if (typeof res.safetyResponsibleDepartmentId === 'string') {
|
|
|
|
|
+ formValue.safetyResponsibleDepartmentId = JSON.parse(res.safetyResponsibleDepartmentId);
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch (e) {
|
|
|
|
|
+ console.error('ID数组解析失败', e);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 3. ID 类型纠正 (String to Number)
|
|
|
|
|
+ formValue.safetyCenterManager = res.safetyCenterManager ? Number(res.safetyCenterManager) : null;
|
|
|
|
|
+ formValue.safetyDepartmentManager = res.safetyDepartmentManager ? Number(res.safetyDepartmentManager) : null;
|
|
|
|
|
+ formValue.safetySpecificPerson = res.safetySpecificPerson ? Number(res.safetySpecificPerson) : null;
|
|
|
|
|
+
|
|
|
|
|
+ // 4. 立即同步加载人员列表,防止页面初次显示 ID 数字
|
|
|
|
|
+ if (formValue.safetyResponsibleCenter) {
|
|
|
|
|
+ getUserData(safetyCenterManagerOptions, formValue.safetyResponsibleCenter);
|
|
|
|
|
+ }
|
|
|
|
|
+ if (formValue.safetyResponsibleDepartment) {
|
|
|
|
|
+ getUserData(userOptions, formValue.safetyResponsibleDepartment);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch (err) {
|
|
|
|
|
+ ElMessage.error('详情获取失败');
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
getDeptData();
|
|
getDeptData();
|
|
|
- getUserData();
|
|
|
|
|
handlAreaCheckListQueryDetail();
|
|
handlAreaCheckListQueryDetail();
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
const handleSubmit = () => {
|
|
const handleSubmit = () => {
|
|
|
- formRef.value?.validate((valid: boolean) => {
|
|
|
|
|
|
|
+ formRef.value?.validate((valid) => {
|
|
|
if (valid) {
|
|
if (valid) {
|
|
|
submiting.value = true;
|
|
submiting.value = true;
|
|
|
- areaCheckListUpdateArea({
|
|
|
|
|
- ...formValue,
|
|
|
|
|
- type: 2,
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ // 提交时后端通常接受字符串形式,如果后端要数组,则直接传 formValue
|
|
|
|
|
+ areaCheckListUpdateArea({ ...formValue, type: 2 })
|
|
|
.then(() => {
|
|
.then(() => {
|
|
|
ElMessage.success('编辑成功!');
|
|
ElMessage.success('编辑成功!');
|
|
|
router.push({ name: 'listResponsibilities:nonPublic' });
|
|
router.push({ name: 'listResponsibilities:nonPublic' });
|
|
|
})
|
|
})
|
|
|
- .finally(() => {
|
|
|
|
|
- submiting.value = false;
|
|
|
|
|
- });
|
|
|
|
|
|
|
+ .finally(() => (submiting.value = false));
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
};
|
|
};
|
|
|
-
|
|
|
|
|
- const handlAreaCheckListQueryDetail = () => {
|
|
|
|
|
- const id = route.query.id;
|
|
|
|
|
- if (!id) return;
|
|
|
|
|
-
|
|
|
|
|
- areaCheckListQueryDetail({ id })
|
|
|
|
|
- .then((res: any) => {
|
|
|
|
|
- if (res) {
|
|
|
|
|
- Object.assign(formValue, res);
|
|
|
|
|
- if (formValue.safetyCenterManager) formValue.safetyCenterManager = Number(formValue.safetyCenterManager);
|
|
|
|
|
- if (formValue.safetyDepartmentManager)
|
|
|
|
|
- formValue.safetyDepartmentManager = Number(formValue.safetyDepartmentManager);
|
|
|
|
|
- if (formValue.safetySpecificPerson) formValue.safetySpecificPerson = Number(formValue.safetySpecificPerson);
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
- .catch((err) => {
|
|
|
|
|
- ElMessage.error('获取详情失败');
|
|
|
|
|
- console.error(err);
|
|
|
|
|
- });
|
|
|
|
|
- };
|
|
|
|
|
</script>
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
@use '@/styles/page-main-layout.scss' as *;
|
|
@use '@/styles/page-main-layout.scss' as *;
|