| | |
| | | <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="type" |
| | | :rules="[ |
| | | { |
| | | required: true, |
| | | message: '请选择工序类型', |
| | | } |
| | | ]" |
| | | > |
| | | <el-select v-model="formState.type" placeholder="请选择工序类型"> |
| | | <el-option label="计时" :value="0" /> |
| | | <el-option label="计件" :value="1" /> |
| | | </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="inbound"> |
| | | <el-switch v-model="formState.inbound" :active-value="true" inactive-value="false"/> |
| | | </el-form-item> |
| | | <el-form-item label="是否报工" prop="reportWork"> |
| | | <el-switch v-model="formState.reportWork" :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-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 } from "vue"; |
| | | import {add} from "@/api/productionManagement/productionProcess.js"; |
| | | |
| | | const props = defineProps({ |
| | | visible: { |
| | | type: Boolean, |
| | | required: true, |
| | | }, |
| | | }); |
| | | |
| | | const emit = defineEmits(['update:visible', 'completed']); |
| | | |
| | | // 响应式数据(替代选项式的 data) |
| | | const formState = ref({ |
| | | name: '', |
| | | type: undefined, |
| | | remark: '', |
| | | salaryQuota: '', |
| | | isQuality: false, |
| | | inbound: false, |
| | | reportWork: false, |
| | | }); |
| | | |
| | | const isShow = computed({ |
| | | get() { |
| | | return props.visible; |
| | | }, |
| | | set(val) { |
| | | emit('update:visible', val); |
| | | }, |
| | | }); |
| | | |
| | | let { proxy } = getCurrentInstance() |
| | | |
| | | const closeModal = () => { |
| | | isShow.value = false; |
| | | }; |
| | | |
| | | const handleSubmit = () => { |
| | | proxy.$refs["formRef"].validate(valid => { |
| | | if (valid) { |
| | | add(formState.value).then(res => { |
| | | // 关闭模态框 |
| | | isShow.value = false; |
| | | // 告知父组件已完成 |
| | | emit('completed'); |
| | | proxy.$modal.msgSuccess("提交成功"); |
| | | }) |
| | | } |
| | | }) |
| | | }; |
| | | |
| | | defineExpose({ |
| | | closeModal, |
| | | handleSubmit, |
| | | isShow, |
| | | }); |
| | | </script> |