| | |
| | | <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="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" /> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, computed, getCurrentInstance, watch } from "vue"; |
| | | 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: { |
| | |
| | | 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() { |
| | |
| | | // 监听 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: props.record.isQuality, |
| | | isQuality: newRecord.isQuality, |
| | | userPower: userPowerIds, |
| | | }; |
| | | } |
| | | }, { immediate: true, deep: true }); |
| | | |
| | | // 监听弹窗打开,重新初始化表单数据 |
| | | watch(() => props.visible, (visible) => { |
| | | if (visible && props.record) { |
| | | formState.value = { |
| | | id: props.record.id, |
| | | name: props.record.name || '', |
| | | no: props.record.no || '', |
| | | remark: props.record.remark || '', |
| | | salaryQuota: props.record.salaryQuota || '', |
| | | isQuality: props.record.isQuality, |
| | | }; |
| | | } |
| | | }); |
| | | |
| | | let { proxy } = getCurrentInstance() |
| | | |
| | |
| | | const handleSubmit = () => { |
| | | proxy.$refs["formRef"].validate(valid => { |
| | | if (valid) { |
| | | update(formState.value).then(res => { |
| | | const userPowerNames = getAllUserNamesFromSelection(formState.value.userPower); |
| | | |
| | | const submitData = { |
| | | ...formState.value, |
| | | userPower: userPowerNames.join(',') |
| | | }; |
| | | update(submitData).then(res => { |
| | | // 关闭模态框 |
| | | isShow.value = false; |
| | | // 告知父组件已完成 |
| | |
| | | }) |
| | | }; |
| | | |
| | | 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, |