| | |
| | | <el-dialog |
| | | v-model="isShow" |
| | | title="新增部件" |
| | | width="400" |
| | | width="760" |
| | | @close="closeModal" |
| | | > |
| | | <el-form label-width="140px" :model="formState" label-position="top" ref="formRef"> |
| | | <el-form-item |
| | | label="部件:" |
| | | prop="name" |
| | | <el-row :gutter="16"> |
| | | <el-col :span="12"> |
| | | <el-form-item |
| | | label="产品名称:" |
| | | prop="productId" |
| | | :rules="[ |
| | | { |
| | | required: true, |
| | | message: '请输入部件', |
| | | 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 |
| | | <el-tree-select |
| | | v-model="formState.productId" |
| | | placeholder="请选择产品名称" |
| | | clearable |
| | | filterable |
| | | check-strictly |
| | | :data="productCategoryOptions" |
| | | :render-after-expand="false" |
| | | style="width: 100%" |
| | | @change="handleProductChange" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item |
| | | label="产品规格:" |
| | | prop="productModelId" |
| | | :rules="[ |
| | | { |
| | | required: true, |
| | | message: '请选择产品规格', |
| | | }, |
| | | ]"> |
| | | <el-select v-model="formState.productModelId" |
| | | placeholder="请选择产品规格" |
| | | clearable |
| | | filterable |
| | | :disabled="!formState.productId" |
| | | style="width: 100%"> |
| | | <el-option v-for="item in modelOptions" |
| | | :key="item.id" |
| | | :label="item.model" |
| | | :value="item.id" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="部件编号" prop="no"> |
| | | <el-input v-model="formState.no" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item |
| | | label="部件类型" |
| | | prop="type" |
| | | :rules="[ |
| | |
| | | message: '请选择部件类型', |
| | | } |
| | | ]" |
| | | > |
| | | <el-select v-model="formState.type" placeholder="请选择部件类型"> |
| | | <el-option label="加工" :value="1" /> |
| | | <el-option label="刮板冷芯制作" :value="2" /> |
| | | <el-option label="管路组对" :value="3" /> |
| | | <el-option label="罐体连接及调试" :value="4" /> |
| | | <el-option label="测试打压" :value="5" /> |
| | | <el-option label="其他" :value="6" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="工资定额" prop="salaryQuota"> |
| | | <el-input v-model="formState.salaryQuota" type="number" :step="0.001"> |
| | | <template #append>元</template> |
| | | </el-input> |
| | | </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="remark"> |
| | | <el-input v-model="formState.remark" type="textarea" /> |
| | | </el-form-item> |
| | | > |
| | | <el-select v-model="formState.type" placeholder="请选择部件类型"> |
| | | <el-option label="加工" :value="1" /> |
| | | <el-option label="刮板冷芯制作" :value="2" /> |
| | | <el-option label="管路组对" :value="3" /> |
| | | <el-option label="罐体连接及调试" :value="4" /> |
| | | <el-option label="测试打压" :value="5" /> |
| | | <el-option label="其他" :value="6" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item |
| | | label="计划工时(小时)" |
| | | prop="salaryQuota" |
| | | :rules="[ |
| | | { validator: validateNonNegativeSalaryQuota, trigger: ['blur', 'change'] } |
| | | ]" |
| | | > |
| | | <el-input v-model="formState.salaryQuota" type="number" :step="0.001" :min="0"> |
| | | <template #append>小时</template> |
| | | </el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="计划人员" prop="plannerId"> |
| | | <el-select |
| | | v-model="formState.plannerId" |
| | | placeholder="请选择计划人员" |
| | | clearable |
| | | filterable |
| | | style="width: 100%" |
| | | @change="handlePlannerChange" |
| | | > |
| | | <el-option |
| | | v-for="item in plannerOptions" |
| | | :key="item.userId" |
| | | :label="item.nickName" |
| | | :value="item.userId" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="是否质检" prop="isQuality"> |
| | | <el-switch v-model="formState.isQuality" :active-value="true" inactive-value="false"/> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="24"> |
| | | <el-form-item label="备注" prop="remark"> |
| | | <el-input v-model="formState.remark" type="textarea" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | <template #footer> |
| | | <div class="dialog-footer"> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, computed, getCurrentInstance } from "vue"; |
| | | import { ref, computed, getCurrentInstance, onMounted } from "vue"; |
| | | import {add} from "@/api/productionManagement/productionProcess.js"; |
| | | import { modelListPage, productTreeList } from "@/api/basicData/product"; |
| | | import { userListNoPageByTenantId } from "@/api/system/user.js"; |
| | | |
| | | const props = defineProps({ |
| | | visible: { |
| | |
| | | // 响应式数据(替代选项式的 data) |
| | | const formState = ref({ |
| | | name: '', |
| | | productId: undefined, |
| | | productModelId: undefined, |
| | | type: undefined, |
| | | remark: '', |
| | | salaryQuota: '', |
| | | plannerId: undefined, |
| | | plannerName: '', |
| | | isQuality: false, |
| | | }); |
| | | const productCategoryOptions = ref([]); |
| | | const modelOptions = ref([]); |
| | | const plannerOptions = ref([]); |
| | | |
| | | const isShow = computed({ |
| | | get() { |
| | |
| | | }); |
| | | |
| | | let { proxy } = getCurrentInstance() |
| | | |
| | | const validateNonNegativeSalaryQuota = (rule, value, callback) => { |
| | | if (value === '' || value === null || value === undefined) { |
| | | callback(new Error('请输入计划工时')); |
| | | return; |
| | | } |
| | | const num = Number(value); |
| | | if (Number.isNaN(num) || num < 0) { |
| | | callback(new Error('计划工时不能小于0')); |
| | | return; |
| | | } |
| | | callback(); |
| | | }; |
| | | |
| | | const convertProductTree = list => { |
| | | return (list || []).map(item => { |
| | | const children = convertProductTree(item.children || item.childList || []); |
| | | return { |
| | | ...item, |
| | | value: item.id, |
| | | label: item.name || item.label, |
| | | children, |
| | | disabled: children.length > 0, |
| | | }; |
| | | }); |
| | | }; |
| | | |
| | | const findNodeById = (nodes, targetId) => { |
| | | for (const node of nodes || []) { |
| | | if (String(node.value) === String(targetId)) { |
| | | return node; |
| | | } |
| | | if (node.children && node.children.length > 0) { |
| | | const found = findNodeById(node.children, targetId); |
| | | if (found) return found; |
| | | } |
| | | } |
| | | return null; |
| | | }; |
| | | |
| | | const getProductCategoryOptions = async () => { |
| | | try { |
| | | const res = await productTreeList(); |
| | | const list = Array.isArray(res) ? res : res?.data || []; |
| | | productCategoryOptions.value = convertProductTree(list); |
| | | } catch (e) { |
| | | productCategoryOptions.value = []; |
| | | } |
| | | }; |
| | | |
| | | const getModelOptions = async productId => { |
| | | if (!productId) { |
| | | modelOptions.value = []; |
| | | return; |
| | | } |
| | | try { |
| | | const res = await modelListPage({ |
| | | id: productId, |
| | | current: 1, |
| | | size: 999, |
| | | }); |
| | | const records = res?.records || res?.data?.records || []; |
| | | modelOptions.value = records; |
| | | } catch (e) { |
| | | modelOptions.value = []; |
| | | } |
| | | }; |
| | | |
| | | const getPlannerOptions = async () => { |
| | | try { |
| | | const res = await userListNoPageByTenantId(); |
| | | plannerOptions.value = res?.data || []; |
| | | } catch (e) { |
| | | plannerOptions.value = []; |
| | | } |
| | | }; |
| | | |
| | | const handlePlannerChange = value => { |
| | | const selectedUser = plannerOptions.value.find(item => String(item.userId) === String(value)); |
| | | formState.value.plannerName = selectedUser?.nickName || ''; |
| | | }; |
| | | |
| | | const handleProductChange = async value => { |
| | | const selectedNode = findNodeById(productCategoryOptions.value, value); |
| | | formState.value.name = selectedNode?.label || ''; |
| | | formState.value.productModelId = undefined; |
| | | await getModelOptions(value); |
| | | }; |
| | | |
| | | const closeModal = () => { |
| | | isShow.value = false; |
| | |
| | | }) |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | getProductCategoryOptions(); |
| | | getPlannerOptions(); |
| | | }); |
| | | |
| | | defineExpose({ |
| | | closeModal, |
| | | handleSubmit, |