<template> <j-modal :title="title" :width="width" :visible="visible" :confirmLoading="confirmLoading" switchFullscreen @ok="handleOk" @cancel="handleCancel" cancelText="关闭"> <a-spin :spinning="confirmLoading"> <a-form-model ref="form" :model="model" :rules="validatorRules"> <a-row> <a-col :span="24"> <a-form-model-item label="货主" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="companyCode"> <a-select show-search placeholder="请选择货主" option-filter-prop="children" v-model="model.companyCode"> <a-select-option v-for="item in companyList" :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="入库单类型" :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 receiptTypeList" :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="供应商" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="supplierCode"> <a-select show-search placeholder="请选择供应商" option-filter-prop="children" v-model="model.supplierCode"> <a-select-option v-for="item in supplierList" :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="入库单备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark"> <a-input v-model="model.remark" placeholder="请输入入库单备注"></a-input> </a-form-model-item> </a-col> </a-row> </a-form-model> </a-spin> </j-modal> </template> <script> import {httpAction} from '@/api/manage' import {validateDuplicateValue} from '@/utils/util' import {getCompanyList} from '@/api/api' import {getReceiptTypeList} from '@/api/api' import {getSupplierList} from '@/api/api' export default { name: "ReceiptHeaderModal", components: {}, data() { return { title: "操作", width: 800, visible: false, companyList: [], receiptTypeList: [], supplierList: [], model: {}, labelCol: { xs: {span: 24}, sm: {span: 5}, }, wrapperCol: { xs: {span: 24}, sm: {span: 16}, }, confirmLoading: false, validatorRules: { type: [ {required: true, message: '请输入入库单类型!'}, ], }, url: { add: "/receipt/receiptHeader/add", edit: "/receipt/receiptHeader/edit", } } }, created() { //备份model原始值 this.modelDefault = JSON.parse(JSON.stringify(this.model)); this.loadFrom(); }, methods: { add() { let record={companyCode: this.companyList[0].code, type:'YCLR'} this.edit(record); }, edit(record) { this.model = Object.assign({}, record); this.visible = true; }, close() { this.$emit('close'); this.visible = false; this.$refs.form.clearValidate(); }, handleOk() { 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; that.close(); }) } else { return false } }) }, handleCancel() { this.close() }, loadFrom() { getCompanyList().then((res) => { if (res.success) { this.companyList = res.result } }); getReceiptTypeList().then((res) => { if (res.success) { this.receiptTypeList = res.result } }); getSupplierList().then((res) => { if (res.success) { this.supplierList = res.result } }); }, } } </script>