<template>
|
<div>
|
<el-dialog
|
v-model="isShow"
|
title="编辑工序"
|
width="400"
|
@close="closeModal"
|
>
|
<el-form label-width="140px" :model="formState" label-position="top" ref="formRef">
|
<el-form-item
|
label="工序名称："
|
prop="name"
|
:rules="[
|
{
|
required: true,
|
message: '请输入工序名称',
|
},
|
{
|
max: 100,
|
message: '最多100个字符',
|
}
|
]">
|
<el-input v-model="formState.name" />
|
</el-form-item>
|
<el-form-item label="工序编号" prop="no">
|
<el-input v-model="formState.no" />
|
</el-form-item>
|
<!-- <el-form-item label="工资定额" prop="salaryQuota">-->
|
<!-- <el-input v-model="formState.salaryQuota" type="number" :step="0.001" />-->
|
<!-- </el-form-item>-->
|
<el-form-item label="是否质检" prop="isQuality">
|
<el-switch v-model="formState.isQuality" :active-value="true" inactive-value="false"/>
|
</el-form-item>
|
<el-form-item label="报工权限" prop="userPower" :rules="[{ required: true, message: '请选择报工权限', trigger: 'change' }]">
|
<el-tree-select
|
v-model="formState.userPower"
|
:data="staffList"
|
:props="treeProps"
|
placeholder="请选择人员"
|
multiple
|
show-checkbox
|
collapse-tags
|
collapse-tags-tooltip
|
style="width: 100%"
|
node-key="id"
|
:render-after-expand="false"
|
/>
|
</el-form-item>
|
<el-form-item label="备注" prop="remark">
|
<el-input v-model="formState.remark" type="textarea" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="handleSubmit">确认</el-button>
|
<el-button @click="closeModal">取消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, computed, getCurrentInstance, watch, onMounted } from "vue";
|
import {update} from "@/api/productionManagement/productionProcess.js";
|
import { listDeptUserTree } from "@/api/basicData/productProcess.js";
|
|
const props = defineProps({
|
visible: {
|
type: Boolean,
|
required: true,
|
},
|
|
record: {
|
type: Object,
|
required: true,
|
}
|
});
|
|
const emit = defineEmits(['update:visible', 'completed']);
|
|
// 响应式数据（替代选项式的 data）
|
const formState = ref({
|
id: props.record.id,
|
name: props.record.name,
|
no: props.record.no,
|
remark: props.record.remark,
|
salaryQuota: props.record.salaryQuota,
|
isQuality: props.record.isQuality,
|
userPower: props.record.userPower ? props.record.userPower.split(',') : [],
|
});
|
|
const staffList = ref([]);
|
|
const treeProps = {
|
label: 'label',
|
children: 'children',
|
};
|
|
const isShow = computed({
|
get() {
|
return props.visible;
|
},
|
set(val) {
|
emit('update:visible', val);
|
},
|
});
|
|
// 监听 record 变化，更新表单数据
|
watch(() => props.record, (newRecord) => {
|
if (newRecord && isShow.value) {
|
const userPowerNames = newRecord.userPower ? newRecord.userPower.split(',') : [];
|
const userPowerIds = userPowerNames.map(name => {
|
const user = findUserByName(name);
|
return user ? user.id : null;
|
}).filter(id => id !== null);
|
|
formState.value = {
|
id: newRecord.id,
|
name: newRecord.name || '',
|
no: newRecord.no || '',
|
remark: newRecord.remark || '',
|
salaryQuota: newRecord.salaryQuota || '',
|
isQuality: newRecord.isQuality,
|
userPower: userPowerIds,
|
};
|
}
|
}, { immediate: true, deep: true });
|
|
let { proxy } = getCurrentInstance()
|
|
const closeModal = () => {
|
isShow.value = false;
|
};
|
|
const handleSubmit = () => {
|
proxy.$refs["formRef"].validate(valid => {
|
if (valid) {
|
const userPowerNames = getAllUserNamesFromSelection(formState.value.userPower);
|
|
const submitData = {
|
...formState.value,
|
userPower: userPowerNames.join(',')
|
};
|
update(submitData).then(res => {
|
// 关闭模态框
|
isShow.value = false;
|
// 告知父组件已完成
|
emit('completed');
|
proxy.$modal.msgSuccess("提交成功");
|
})
|
}
|
})
|
};
|
|
const findUserById = (userId) => {
|
const findInTree = (nodes) => {
|
for (const node of nodes) {
|
if (node.id === userId) {
|
return node;
|
}
|
if (node.children && node.children.length > 0) {
|
const found = findInTree(node.children);
|
if (found) return found;
|
}
|
}
|
return null;
|
};
|
return findInTree(staffList.value);
|
};
|
|
const getStaffList = () => {
|
listDeptUserTree().then(res => {
|
const buildTree = (nodes) => {
|
return nodes.map(node => {
|
const deptNode = {
|
id: `dept_${node.deptId}`,
|
label: node.deptName,
|
isUser: false,
|
children: []
|
};
|
|
if (node.userList && node.userList.length > 0) {
|
node.userList.forEach(user => {
|
deptNode.children.push({
|
id: user.userId,
|
label: user.nickName || user.userName,
|
isUser: true,
|
userName: user.userName,
|
nickName: user.nickName
|
});
|
});
|
}
|
|
if (node.childrenList && node.childrenList.length > 0) {
|
const childNodes = buildTree(node.childrenList);
|
deptNode.children = deptNode.children.concat(childNodes);
|
}
|
|
return deptNode;
|
});
|
};
|
staffList.value = buildTree(res.data || []);
|
}).catch(() => {
|
staffList.value = [];
|
});
|
};
|
|
const getAllUserNamesFromSelection = (selectedIds) => {
|
const names = [];
|
const processNode = (node) => {
|
if (selectedIds.includes(node.id)) {
|
if (node.isUser) {
|
names.push(node.label);
|
} else {
|
if (node.children && node.children.length > 0) {
|
node.children.forEach(child => {
|
if (child.isUser) {
|
names.push(child.label);
|
}
|
});
|
}
|
}
|
}
|
if (node.children && node.children.length > 0) {
|
node.children.forEach(child => processNode(child));
|
}
|
};
|
staffList.value.forEach(node => processNode(node));
|
return [...new Set(names)];
|
};
|
|
onMounted(() => {
|
getStaffList();
|
});
|
|
defineExpose({
|
closeModal,
|
handleSubmit,
|
isShow,
|
});
|
</script>
|
