<template>
<a-spin :spinning="loading">
<JFormContainer :disabled="disabled">
<template #detail>
<a-form v-bind="formItemLayout" name="SaleOrderForm" ref="formRef">
<a-row>
<a-col :span="12">
<a-form-item label="订单编号(bill code)" v-bind="validateInfos.billCode" id="SaleOrderForm-billCode" name="billCode">
<a-input v-model:value="formData.billCode" placeholder="订单编号(bill code)" disabled></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="单据日期(bill date)" v-bind="validateInfos.billDate" id="SaleOrderForm-billDate" name="billDate">
<a-date-picker placeholder="请选择单据日期(bill date)" v-model:value="formData.billDate" value-format="YYYY-MM-DD" style="width: 100%" allow-clear />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="项目(project)" v-bind="validateInfos.projectName" id="SaleOrderForm-projectName" name="projectName">
<a-input-search v-model:value="formData.projectName" placeholder="请输入项目(project)" :disabled="notAllowEdit" allow-clear enter-button="Search" @search="onSearchProject"></a-input-search>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="供应商(supplier)" v-bind="validateInfos.supplier" id="SaleOrderForm-supplier" name="supplier">
<a-input v-model:value="formData.supplierName" placeholder="请选择" allow-clear ></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="优先级(priority)" v-bind="validateInfos.priority" id="SaleOrderForm-priority" name="priority">
<JDictSelectTag v-model:value="formData.priority" placeholder="请选择" dictCode="priority" disabled/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="产品分类(production class)" v-bind="validateInfos.productionClass" id="SaleOrderForm-productionClass" name="productionClass">
<a-input v-model:value="formData.productionClass" placeholder="请输入" allow-clear disabled ></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="机型(model)" v-bind="validateInfos.model" id="SaleOrderForm-model" name="model">
<JDictSelectTag v-model:value="formData.model" placeholder="请选择" dictCode="model_typer" disabled />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="厂家(maker)" v-bind="validateInfos.maker" id="SaleOrderForm-maker" name="maker">
<a-input v-model:value="formData.maker" placeholder="请输入厂家(maker)" allow-clear disabled></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="贸易条款(trade term)" v-bind="validateInfos.tradeTerms" id="SaleOrderForm-tradeTerms" name="tradeTerms">
<JDictSelectTag v-model:value="formData.tradeTerms" placeholder="请选择" dictCode="delivery_terms"/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="是否出口(export)" v-bind="validateInfos.isExport" id="SaleOrderForm-isExport" name="isExport">
<JDictSelectTag v-model:value="formData.isExport" placeholder="请选择" dictCode="yes_or_no" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="包装要求(package requirement)" v-bind="validateInfos.packagebRequirement" id="SaleOrderForm-packagebRequirement" name="packagebRequirement">
<a-input v-model:value="formData.packagebRequirement" placeholder="请输入包装要求(package requirement)" allow-clear ></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="收件人(recipient)" v-bind="validateInfos.recipient" id="SaleOrderForm-recipient" name="recipient">
<a-input v-model:value="formData.recipient" placeholder="请选择" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="收件人电话(recipient tel)" v-bind="validateInfos.recipientTel" id="SaleOrderForm-recipientTel" name="recipientTel">
<a-input v-model:value="formData.recipientTel" placeholder="请选择" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="收件人地址(recipient address)" v-bind="validateInfos.recipientAddress" id="SaleOrderForm-recipientAddress" name="recipientAddress">
<a-input v-model:value="formData.recipientAddress" placeholder="请选择" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="付款条件(payment terms)" v-bind="validateInfos.paymentTerms" id="SaleOrderForm-paymentTerms" name="paymentTerms">
<JDictSelectTag v-model:value="formData.paymentTerms" placeholder="请选择" dictCode="payment_terms" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="发货方式(delivery)" v-bind="validateInfos.delivery" id="SaleOrderForm-delivery" name="delivery">
<JDictSelectTag v-model:value="formData.delivery" placeholder="请选择" dictCode="delivery_methods" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="质保期(warranty period)" v-bind="validateInfos.warrantyPeriod" id="SaleOrderForm-warrantyPeriod" name="warrantyPeriod">
<a-input v-model:value="formData.warrantyPeriod" placeholder="请输入" style="width: 85%;margin-right: 1%;"/>月(month)
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="质保条款(warranty terms)" v-bind="validateInfos.warrantyTerms" id="SaleOrderForm-warrantyTerms" name="warrantyTerms">
<a-input v-model:value="formData.warrantyTerms" placeholder="请输入质保条款(warranty terms)" allow-clear ></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="汇率(exchange rate)" v-bind="validateInfos.exchangeRate" id="SaleOrderForm-exchangeRate" name="exchangeRate">
<a-input v-model:value="formData.exchangeRate" placeholder="请输入厂家(maker)" allow-clear ></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="采购部门(purchase department)" v-bind="validateInfos.purchaseDepartment" id="SaleOrderForm-purchaseDepartment" name="purchaseDepartment">
<a-input v-model:value="formData.purchaseDepartment" placeholder="请输入" allow-clear disabled></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="采购员(purchasesman)" v-bind="validateInfos.purchaseman" id="SaleOrderForm-purchaseman" name="purchaseman">
<a-input v-model:value="formData.purchaseman" placeholder="请输入采购员(salesman)" allow-clear disabled ></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="币种(currency)" v-bind="validateInfos.currency" id="SaleOrderForm-currency" name="currency">
<JDictSelectTag v-model:value="formData.currency" placeholder="请选择" dictCode="currency" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="备注(notes)" v-bind="validateInfos.notes" id="SaleOrderForm-notes" name="notes">
<a-input v-model:value="formData.notes"></a-input>
</a-form-item>
</a-col>
</a-row>
</a-form>
</template>
</JFormContainer>
<!-- 子表单区域 -->
<a-tabs v-model:activeKey="activeKey" animated style=" padding: 24px;padding-top: 0px;">
<a-tab-pane tab="采购订单 - 船明细(ship details)" key="PurOrderFormShipFormShip" :forceRender="true">
<j-vxe-table
:keep-source="true"
resizable
ref="PurOrderFormShipFormShipTableRef"
:loading="PurOrderFormShipFormShipTable.loading"
:columns="PurOrderFormShipFormShipTable.columns"
:dataSource="PurOrderFormShipFormShipTable.dataSource"
:height="340"
:disabled="disabled"
:rowNumber="true"
:rowSelection="true"
>
<template #action="props" >
<a @click="viewAccessory(props)">查看配件信息(view accessory information)</a>
</template>
</j-vxe-table>
</a-tab-pane>
<a-tab-pane tab="采购订单 - 产品明细(product details)" key="purOrderFormShipFormProduct" :forceRender="true">
<a-button type="primary" style="margin-right: 1%;margin-bottom: 1%;" @click="selectSaleOrderList"> 选择销售订单(select saleorder)</a-button>
<a-button type="primary" style="margin-right: 1%;margin-bottom: 1%;" @click="SelectSupplierQuotationList"> 选择报价单(select quotation)</a-button>
<a-button type="primary" style="margin-right: 1%;margin-bottom: 1%;" @click="selectProductList"> 选择产品(select product)</a-button>
<j-vxe-table
:keep-source="true"
resizable
ref="purOrderFormShipFormProductTableRef"
:loading="purOrderFormShipFormProductTable.loading"
:columns="purOrderFormShipFormProductTable.columns"
:dataSource="purOrderFormShipFormProductTable.dataSource"
:height="340"
:disabled="disabled"
:rowNumber="true"
:rowSelection="true"
asyncRemove
>
<template #action="props">
<a-popconfirm title="确定删除吗？" @confirm="handleDelete(props)">
<a>删除(delete)</a>
</a-popconfirm>
</template>
</j-vxe-table>
</a-tab-pane>
</a-tabs>
<SelectPrpductModal ref="SelectPrpductModalRef" @selectProduct ='addProduct'></SelectPrpductModal>
<SelectProjectModal ref="SelectProjectModalRef" @selectProject="addProject"></SelectProjectModal>
<BaseShipArchiveAccessoriesModal ref="BaseShipArchiveAccessoriesModalRef"></BaseShipArchiveAccessoriesModal>
<SelectSupplierQuotationModal ref="SelectSupplierQuotationModalRef" @selectSupplierQuotation="addFromQuotation"></SelectSupplierQuotationModal>
<SelectSaleOrderModal ref="SelectSaleOrderModalRef" @selectSaleOrder="addFormSaleOrder"></SelectSaleOrderModal>
</a-spin>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, computed, toRaw} from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { useValidateAntFormAndTable } from '/@/hooks/system/useJvxeMethods';
import { queryPurOrderFormShipFormShippTable, queryPurOrderFormProductListByMainId, queryDataById, saveOrUpdate,queryVersonHistoryById,queryPurVersonFormShipListByMainId, queryPurVersonProductListByMainId} from '../PurchaseOrderyForm.api';
import { JVxeTable } from '/@/components/jeecg/JVxeTable';
import {purchaseOrderShipColumns, purchaseOrderProductColumns} from '../PurchaseOrderForm.data';
import SelectPrpductModal from '../../../publicComponents/SelectPrpductModal.vue';
import SelectProjectModal from '../../../publicComponents/SelectProjectModal.vue';
import SelectSaleOrderModal from '../../../publicComponents/SelectSaleOrderModal.vue';
import SelectSupplierQuotationModal from '../../../publicComponents/SelectSupplierQuotationModal.vue';
import BaseShipArchiveAccessoriesModal from '../../../publicComponents/BaseShipArchiveAccessoriesModal.vue';
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
import { JDictSelectTag} from '/@/components/Form';
import JSelectInput from '/@/components/Form/src/jeecg/components/JSelectInput.vue';
import { Form, message } from 'ant-design-vue';
import { useUserStore } from '/@/store/modules/user';
import moment from 'moment';
const useForm = Form.useForm;
export default defineComponent({
name: "SaleOrderForm",
components:{
JVxeTable,
JFormContainer,
SelectPrpductModal,
JUpload,
JDictSelectTag,
JSelectInput,
SelectProjectModal,
BaseShipArchiveAccessoriesModal,
SelectSupplierQuotationModal,
SelectSaleOrderModal
},
props:{
formDisabled:{
type: Boolean,
default: false
},
formData: { type: Object, default: ()=>{} },
formBpm: { type: Boolean, default: true }
},
emits:['success'],
setup(props, {emit}) {
const userStore = useUserStore();
const loading = ref(false);
const formRef = ref();
const PurOrderFormShipFormShipTableRef = ref();
const SelectPrpductModalRef = ref()
const SelectProjectModalRef = ref()
const BaseShipArchiveAccessoriesModalRef = ref();
const SelectSupplierQuotationModalRef = ref();
const SelectSaleOrderModalRef = ref();
const PurOrderFormShipFormShipTable = reactive<Record<string, any>>({
loading: false,
columns: purchaseOrderShipColumns,
dataSource: []
});
const purOrderFormShipFormProductTableRef = ref();
const purOrderFormShipFormProductTable = reactive<Record<string, any>>({
loading: false,
columns: purchaseOrderProductColumns,
dataSource: []
});
const activeKey = ref('PurOrderFormShipFormShip');
var notAllowEdit = ref(false);
const formData = reactive<Record<string, any>>({
id: '',
status: undefined,
delFlag: undefined,
sourceCode:'',
sourceCode2:'',
submit:'',
billCode:'',
billDate: moment(new Date()).format('YYYY-MM-DD'),
project: '',
projectName:'',
supplier:"",
supplierName:'',
priority: '',
productionClass: '',
model: '',
maker: '',
tradeTerms:'',
isExport:'',
packagebRequirement:'',
recipient:'',
recipientTel:'',
recipientAddress:'',
paymentTerms:'',
delivery:'',
warrantyPeriod:'',
warrantyTerms:'',
exchangeRate:'',
purchaseDepartment:"",
purchaseman:'',
currency:'',
notes:''
});
//表单验证
const validatorRules = reactive({
});
const {resetFields, validate, validateInfos} = useForm(formData, validatorRules, {immediate: false});
const dbData = {};
const formItemLayout = {
labelCol: {xs: {span: 24}, sm: {span: 5}},
wrapperCol: {xs: {span: 24}, sm: {span: 16}},
};
// 表单禁用
const disabled = computed(()=>{
if(props.formBpm === true){
if(props.formData.disabled === false){
return false;
}else{
return true;
}
}
return props.formDisabled;
});
function add() {
resetFields();
PurOrderFormShipFormShipTable.dataSource = [];
purOrderFormShipFormProductTable.dataSource = [];
activeKey.value = 'PurOrderFormShipFormShip'
formData.purchaseman=userStore.getUserInfo.username;
formData.purchaseDepartment = userStore.getUserInfo.orgCode
}
async function copy(data,id){
//主表数据
await queryMainData(id);
formData.id = ''
formData.billCode = ''
//子表数据
const PurOrderFormShipFormShipDataList = await queryPurOrderFormShipFormShippTable(id);
PurOrderFormShipFormShipTable.dataSource = [...PurOrderFormShipFormShipDataList];
purOrderFormShipFormProductTable.dataSource = [...data];
isSelect()
}
// 判断有没有参照的子表
function isSelect(){
var arrQuo = [],
arrCon=[]
purOrderFormShipFormProductTable.dataSource.map(item=>{
var sign = ''
sign = item.sourceId?(item.sourceId).substring(0, 3):''
if(item.sourceId&&sign=='Quo'){
arrQuo.push(item.sourceId)
}else if(item.sourceId&&sign=='Con'){
arrCon.push(item.sourceId)
}
})
if(arrQuo.length==0&&arrCon.length==0){
formData.sourceCode2 = ''
formData.sourceCode = ''
notAllowEdit.value=false
}else if(arrQuo.length==0){
formData.sourceCode = ''
}else if(arrCon.length==0){
formData.sourceCode2 = ''
}
}
async function edit(row) {
//主表数据
await queryMainData(row.id);
//子表数据
const PurOrderFormShipFormShipDataList = await queryPurOrderFormShipFormShippTable(row['id']);
PurOrderFormShipFormShipTable.dataSource = [...PurOrderFormShipFormShipDataList];
const purOrderFormShipFormProductDataList = await queryPurOrderFormProductListByMainId(row['id']);
purOrderFormShipFormProductTable.dataSource = [...purOrderFormShipFormProductDataList];
}
async function queryMainData(id) {
const row = await queryDataById(id);
resetFields();
const tmpData = {};
Object.keys(formData).forEach((key) => {
if(row.hasOwnProperty(key)){
tmpData[key] = row[key]
}
})
//赋值
Object.assign(formData,tmpData);
}
//查看版本详情
async function VersionDetail(record){
//主表数据
await queryVersonHistoryData(record.id);
//子表数据
const SaleOrderFormShipFormShipDataList = await queryPurVersonFormShipListByMainId(record.id);
PurOrderFormShipFormShipTable.dataSource = [...SaleOrderFormShipFormShipDataList];
const purOrderFormShipFormProductDataList = await queryPurVersonProductListByMainId(record.id);
purOrderFormShipFormProductTable.dataSource = [...purOrderFormShipFormProductDataList];
}
async function queryVersonHistoryData(id){
const row = await queryVersonHistoryById(id);
resetFields();
const tmpData = {};
Object.keys(formData).forEach((key) => {
if(row.hasOwnProperty(key)){
tmpData[key] = row[key]
}
})
//赋值
Object.assign(formData,tmpData);
}
const {getSubFormAndTableData, transformData} = useValidateAntFormAndTable(activeKey, {
'purOrderShip': PurOrderFormShipFormShipTableRef,
'purOrderProduct': purOrderFormShipFormProductTableRef,
});
async function getFormData() {
try {
// 触发表单验证
await validate();
} catch ({ errorFields }) {
if (errorFields) {
const firstField = errorFields[0];
if (firstField) {
formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
}
}
return Promise.reject(errorFields);
}
return transformData(toRaw(formData))
}
async function submitForm() {
if(formData.sourceCode==''&&formData.sourceCode2==''){
message.warning('请选择销售订单或报价单')
}else{
const mainData = await getFormData();
const subData = await getSubFormAndTableData();
const values = Object.assign({}, dbData, mainData, subData);
console.log('表单提交数据', values)
const isUpdate = values.id ? true : false
const isRevise = values.submit=='1' ? true : false
await saveOrUpdate(values, isUpdate,isRevise);
//关闭弹窗
emit('success');
}
}
function setFieldsValue(values) {
if(values){
Object.keys(values).map(k=>{
formData[k] = values[k];
});
}
}
function selectProductList(){
SelectPrpductModalRef.value.getTable()
}
function onSearchProject(){
SelectProjectModalRef.value.getTable()
}
function addProduct(data){
var arrProduct = data.concat(purOrderFormShipFormProductTable.dataSource)
arrProduct.map(item=>{
item.productClass = item.classId_dictText
item.productCode = item.code
item.productId = item.id
})
purOrderFormShipFormProductTable.dataSource=arrProduct
}
function getShipList(id,status){
let params = {id:id}
let url = status=='quotation'?'/purCode/purPurchaseQuotation/queryPurPurchaseQuotationShipByMainId':'/saleCode/saleOrder/querySaleOrderShipByMainId'
defHttp.get({url:url,params}, { isTransformResponse: false }).then(res=>{
if(res){
PurOrderFormShipFormShipTable.dataSource = res.result
}
})
}
function addFromQuotation(data){
data.map(item=>{
item.model = item.childModel
item.sourceId = 'Quo'+item.childId
item.sourceCode =data[0].billCode
})
var arrProduct = data.concat(purOrderFormShipFormProductTable.dataSource)
purOrderFormShipFormProductTable.dataSource=arrProduct
notAllowEdit.value=true
formData.sourceCode =data[0].billCode
if(formData.sourceCode2==''){
formData.project = data[0].quotationProject
formData.projectName = data[0].projectName
formData.supplier= data[0].quotationSuppiler
formData.supplierName= data[0].suppilerName
formData.priority =data[0].priority
formData.productionClass =data[0].productionClass
formData.model =data[0].headModel
formData.maker =data[0].maker
getShipList(data[0].headId,'quotation')
}
}
function addFormSaleOrder(data){
data.map(item=>{
item.model = item.childModel
item.sourceId = 'Con'+item.childId
item.sourceCode =data[0].billCode
})
var arrProduct = data.concat(purOrderFormShipFormProductTable.dataSource)
purOrderFormShipFormProductTable.dataSource=arrProduct
notAllowEdit.value=true
formData.sourceCode2 =data[0].billCode
if(formData.sourceCode==''){
formData.project = data[0].project
formData.projectName = data[0].projectName
formData.priority =data[0].priority
formData.productionClass =data[0].productionClass
formData.model =data[0].headModel
formData.maker =data[0].maker
getShipList(data[0].headId,'contract')
}
}
function addProject(data){
formData.project = data[0].id
formData.projectName = data[0].name
}
//查看配件信息
function viewAccessory(prop){
BaseShipArchiveAccessoriesModalRef.value.getTable(prop.row)
}
//产品明细-删除行
function handleDelete(prop) {
var newArray = [...purOrderFormShipFormProductTable.dataSource]
newArray.splice(prop.rowIndex, 1)
if( purOrderFormShipFormProductTable.dataSource.length!==0){
purOrderFormShipFormProductTable.dataSource = newArray
var arrQuo = [],
arrCon=[]
purOrderFormShipFormProductTable.dataSource.map(item=>{
var sign = ''
sign = item.sourceId?(item.sourceId).substring(0, 3):''
if(item.sourceId&&sign=='Quo'){
arrQuo.push(item.sourceId)
}else if(item.sourceId&&sign=='Con'){
arrCon.push(item.sourceId)
}
})
if(arrQuo.length==0&&arrCon.length==0){
formData.sourceCode2 = ''
formData.sourceCode = ''
notAllowEdit.value=false
}else if(arrQuo.length==0){
formData.sourceCode = ''
}else if(arrCon.length==0){
formData.sourceCode2 = ''
}
}else{
notAllowEdit.value=false
formData.sourceCode2 = ''
formData.sourceCode = ''
}
}
//选择供应商报价单
function SelectSupplierQuotationList (){
SelectSupplierQuotationModalRef.value.getTable(formData)
}
// 选择销售订单
function selectSaleOrderList(){
SelectSaleOrderModalRef.value.getTable(formData)
}
/**
* 值改变事件触发-树控件回调
* @param key
* @param value
*/
function handleFormChange(key, value) {
formData[key] = value;
}
return {
PurOrderFormShipFormShipTableRef,
PurOrderFormShipFormShipTable,
purOrderFormShipFormProductTableRef,
purOrderFormShipFormProductTable,
SelectSupplierQuotationModalRef,
SelectSaleOrderModalRef,
validatorRules,
validateInfos,
activeKey,
loading,
formData,
setFieldsValue,
handleFormChange,
formItemLayout,
disabled,
getFormData,
submitForm,
add,
edit,
copy,
formRef,
selectProductList,
SelectPrpductModalRef,
addProduct,
onSearchProject,
SelectProjectModalRef,
addProject,
handleDelete,
BaseShipArchiveAccessoriesModalRef,
viewAccessory,
VersionDetail,
SelectSupplierQuotationList,
addFromQuotation,
notAllowEdit,
selectSaleOrderList,
addFormSaleOrder
}
}
});
</script>
<style lang="less" scoped>
/** 时间和数字输入框样式 */
:deep(.ant-input-number) {
width: 100%;
}
:deep(.ant-calendar-picker) {
width: 100%;
}
/deep/.vxe-table--body-wrapper{
height: 100% !important;
}
/deep/.ant-modal-body{
padding: 24px !important;
}
/deep/.ant-form-item{
margin-bottom: 8px !important;
}
</style>