<template> <a-spin :spinning="confirmLoading"> <j-form-container :disabled="formDisabled"> <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail"> <a-row> <a-col :span="24"> <a-form-model-item label="物料编码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="code"> <a-input v-model="model.code" placeholder="请输入物料编码"></a-input> </a-form-model-item> </a-col> <a-col :span="24"> <a-form-model-item label="物料名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name"> <a-input v-model="model.name" placeholder="请输入物料名称"></a-input> </a-form-model-item> </a-col> <a-col :span="24"> <a-form-model-item label="货主编码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="companyCode"> <a-input v-model="model.companyCode" placeholder="请输入货主编码"></a-input> </a-form-model-item> </a-col> <a-col :span="24"> <a-form-model-item label="规格" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="spec"> <a-input v-model="model.spec" placeholder="请输入规格"></a-input> </a-form-model-item> </a-col> <a-col :span="24"> <a-form-model-item label="单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="unit"> <a-input v-model="model.unit" placeholder="请输入单位"></a-input> </a-form-model-item> </a-col> <a-col :span="24"> <a-form-model-item label="类别" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="type"> <a-select show-search placeholder="请输入类别" option-filter-prop="children" v-model="model.type"> <a-select-option v-for="item in materialTypeList" :key="item.name" :value="item.code">{{ item.name }} </a-select-option> </a-select> </a-form-model-item> </a-col> <a-col :span="24"> <a-form-model-item label="ABC分类" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="abcclass"> <a-input v-model="model.abcclass" placeholder="请输入ABC分类"></a-input> </a-form-model-item> </a-col> <a-col :span="24"> <a-form-model-item label="物料分区" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="materialareacode"> <a-input v-model="model.materialareacode" placeholder="请输入物料分区"></a-input> </a-form-model-item> </a-col> <a-col :span="24"> <a-form-model-item label="保质期(天)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="daystoexpire"> <a-input-number v-model="model.daystoexpire" placeholder="请输入保质期(天)" style="width: 100%"/> </a-form-model-item> </a-col> <a-col :span="24"> <a-form-model-item label="临期预警天数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="expiringdays"> <a-input-number v-model="model.expiringdays" placeholder="请输入临期预警天数" style="width: 100%"/> </a-form-model-item> </a-col> <a-col :span="24"> <a-form-model-item label="可用状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="enable"> <j-dict-select-tag type="list" v-model="model.enable" dictCode="enable_status" :trigger-change="true"/> </a-form-model-item> </a-col> </a-row> </a-form-model> </j-form-container> </a-spin> </template> <script> import {httpAction, getAction} from '@/api/manage' import {validateDuplicateValue} from '@/utils/util' import {getMaterialTypeList} from '@/api/api' export default { name: 'MaterialForm', components: {}, props: { //表单禁用 disabled: { type: Boolean, default: false, required: false } }, data() { return { materialTypeList: [], model: {}, labelCol: { xs: {span: 24}, sm: {span: 5}, }, wrapperCol: { xs: {span: 24}, sm: {span: 16}, }, confirmLoading: false, validatorRules: { code: [ {required: true, message: '请输入物料编码!'}, ], name: [ {required: true, message: '请输入物料名称!'}, ], warehousecode: [ {required: true, message: '请输入仓库编码!'}, ], enable: [ {required: true, message: '请输入可用状态!'}, ], }, url: { add: "/config/material/add", edit: "/config/material/edit", queryById: "/config/material/queryById" } } }, computed: { formDisabled() { return this.disabled }, }, created() { //备份model原始值 this.modelDefault = JSON.parse(JSON.stringify(this.model)); this.loadFrom(); }, methods: { add() { this.edit(this.modelDefault); model.enable = 1; this.form.setFieldsValue({enable: 1}); }, edit(record) { this.model = Object.assign({}, record); this.visible = true; }, loadFrom() { getMaterialTypeList().then((res) => { if (res.success) { this.materialTypeList = res.result } }); }, submitForm() { const that = this; // 触发表单验证 this.$refs.form.validate(valid => { if (valid) { that.confirmLoading = true; let httpurl = ''; let method = ''; if (!this.model.id) { httpurl += this.url.add; method = 'post'; } else { httpurl += this.url.edit; method = 'put'; } httpAction(httpurl, this.model, method).then((res) => { if (res.success) { that.$message.success(res.message); that.$emit('ok'); } else { that.$message.warning(res.message); } }).finally(() => { that.confirmLoading = false; }) } }) }, } } </script>