<template> <a-modal centered class="allocateBill-basicInfo-modal" :footer="null" :maskClosable="false" title="新增" v-model="isShow" @cancle="isShow = false" :width="800"> <a-spin :spinning="spinning" tip="Loading..."> <a-form-model id="allocateBill-basicInfo-form" ref="ruleForm" :model="form" :rules="rules" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" > <a-form-model-item label="调往对象" prop="targetType"> <a-radio-group v-model="form.targetType" @change="targetTypeChange"> <a-radio v-for="(item,index) in targetTypeList" :key="index" :value="item.code">{{ item.dispName }}</a-radio> </a-radio-group> </a-form-model-item> <a-form-model-item label="调往对象名称" :prop="isDealer ? 'targetSn' : 'targetName'"> <a-select v-if="isDealer" show-search id="allocateBill-basicInfo-dealerName" v-model="form.targetSn" placeholder="请选择" :filter-option="false" :not-found-content="fetching ? undefined : null" @search="fetchUser" @change="handleChange" > <a-spin v-if="fetching" slot="notFoundContent" size="small" /> <a-select-option v-for="item in dealerData" :key="item.dealerSn" :value="item.dealerSn">{{ item.dealerName }}</a-select-option> </a-select> <a-input v-if="!isDealer" v-model="form.targetName" placeholder="请输入调往对象名称(最多30个字符)" allowClear :maxLength="30" /> </a-form-model-item> <a-form-model-item label="调拨类型" prop="allocateTypeSn"> <a-select id="allocateBill-basicInfo-allocateTypeSn" v-model="form.allocateTypeSn" placeholder="请选择调拨类型" allowClear > <a-select-option v-for="item in allocateTypeList" :key="item.allocateTypeSn" :value="item.allocateTypeSn">{{ item.name }}</a-select-option> </a-select> </a-form-model-item> <a-form-model-item label="备注" prop="remark"> <a-textarea id="allocateBill-basicInfo-remark" :maxLength="120" v-model="form.remark" placeholder="请输入备注(最多120个字符)" allowClear /> </a-form-model-item> </a-form-model> <div class="btn-cont"> <a-button type="primary" id="allocateBill-basicInfo-modal-save" @click="handleSave">保存</a-button> <a-button id="allocateBill-basicInfo-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button> </div> </a-spin> </a-modal> </template> <script> import debounce from 'lodash/debounce' import { VSelect } from '@/components' import { allocateBillSave } from '@/api/allocateBill' import { dealerSubareaScopeList } from '@/api/dealer' import { getLookUpData } from '@/api/data' import { allocateTypeAllList } from '@/api/allocateType' export default { name: 'StoreTransferOutBasicInfoModal', components: { VSelect }, props: { openModal: { // 弹框显示状态 type: Boolean, default: false } }, data () { this.fetchUser = debounce(this.fetchUser, 800) return { isShow: this.openModal, // 是否打开弹框 spinning: false, formItemLayout: { labelCol: { span: 4 }, wrapperCol: { span: 20 } }, form: { targetType: 'DEALER', targetSn: undefined, targetName: '', allocateTypeSn: undefined, remark: '' }, rules: { targetType: [{ required: true, message: '请选择调往对象', trigger: 'change' }], targetSn: [{ required: true, message: '请选择调往对象名称', trigger: 'change' }], targetName: [{ required: true, message: '请输入调往对象名称', trigger: 'blur' }], allocateTypeSn: [{ required: true, message: '请选择调拨类型', trigger: 'change' }] }, fetching: false, dealerData: [], // 经销商 下拉数据 targetTypeList: [], // 调往对象类型 allocateTypeList: [] // 调拨类型 } }, computed: { // 当前所选调往对象是否为经销商 isDealer () { return this.form.targetType == 'DEALER' } }, methods: { // 搜索经销商 fetchUser (value) { console.log('fetching user', value) this.fetching = true dealerSubareaScopeList({ nameLike: value, pageNo: 1, pageSize: 20 }).then(res => { if (res.status == 200) { this.dealerData = res.data.list this.fetching = false } else { this.dealerData = [] this.fetching = false } }) }, // 调往对象名称 change handleChange (value) { const ind = this.dealerData.findIndex(item => item.dealerSn == value) this.form.targetName = this.dealerData[ind].dealerName }, // 保存 handleSave () { const _this = this this.$refs.ruleForm.validate(valid => { if (valid) { const form = JSON.parse(JSON.stringify(_this.form)) _this.spinning = true allocateBillSave(form).then(res => { if (res.status == 200) { _this.$message.success(res.message) setTimeout(() => { _this.isShow = false _this.$emit('ok', res.data) _this.spinning = false }, 1000) } else { _this.spinning = false } }) } else { console.log('error submit!!') return false } }) }, // 调往对象 change targetTypeChange (e) { this.$refs.ruleForm.resetFields() this.form.targetSn = undefined this.form.targetName = '' this.form.targetType = e.target.value }, // 调往对象类型 getTargetTypeList () { const _this = this getLookUpData({ pageNo: 1, pageSize: 1000, lookupCode: 'TARGET_TYPE' }).then(res => { if (res.status == 200) { _this.targetTypeList = res.data.list } else { _this.targetTypeList = [] } }) }, // 调拨类型 getAllocateTypeAllList () { allocateTypeAllList().then(res => { if (res.status == 200) { this.allocateTypeList = res.data } else { this.allocateTypeList = [] } }) } }, watch: { // 父页面传过来的弹框状态 openModal (newValue, oldValue) { this.isShow = newValue }, // 重定义的弹框状态 isShow (newValue, oldValue) { if (!newValue) { this.$emit('close') this.$refs.ruleForm.resetFields() } else { this.getTargetTypeList() this.getAllocateTypeAllList() } } } } </script> <style lang="less"> .allocateBill-basicInfo-modal { .ant-modal-body { padding: 40px 40px 24px; } .btn-cont { text-align: center; margin: 35px 0 10px; } } </style>