<template>
<a-spin :spinning="loading">
<JFormContainer :disabled="disabled">
<template #detail>
<a-form v-bind="formItemLayout" name="commissionContractForm" ref="formRef">
<a-row>
<a-col :span="12">
<a-form-item label="合同编号(bill code)" v-bind="validateInfos.billCode" id="commissionContractForm-billCode" name="billCode">
<a-input v-model:value="formData.billCode" placeholder="自动生成" disabled />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="单据日期(bill date)" v-bind="validateInfos.billDate" id="commissionContractForm-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="供应商(supplier)" v-bind="validateInfos.supplier" id="commissionContractForm-supplier" name="supplier">
<JSelect v-model:value="formData.supplierId" :get-option-url="supplierOption" :showField="showField" @change="handleSupplierChange"></JSelect>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="币种(currency)" v-bind="validateInfos.currency" id="commissionContractForm-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="销售部门(sale department)"
v-bind="validateInfos.saleDepartmen"
id="commissionContractForm-saleDepartmen"
name="saleDepartmen"
>
<a-input v-model:value="formData.saleDepartmenName" placeholder="请输入" allow-clear disabled />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="业务员(salesman)" v-bind="validateInfos.salesman" id="commissionContractForm-salesman" name="salesman">
<a-input v-model:value="formData.salesmanName" placeholder="请输入采购员(salesman)" allow-clear disabled />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="备注(notes)" v-bind="validateInfos.notes" id="commissionContractForm-notes" name="notes">
<a-input v-model:value="formData.notes" AutoComplete="off" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="附件(attachs)" v-bind="validateInfos.attachs" id="commissionContractForm-attachs" name="attachs">
<JUpload v-model:value="formData.attachs"></JUpload>
</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="佣金合同 - 产品明细(product details)" key="commissionContractFormProduct" :forceRender="true">
<a-button type="primary" style="margin-right: 1%;margin-bottom: 1%;" @click="selectProductList"> 选择产品(select products)</a-button>
<j-vxe-table
:keep-source="true"
resizable
ref="commissionContractFormProductTableRef"
:loading="commissionContractFormProductTable.loading"
:columns="commissionContractFormProductTable.columns"
:dataSource="commissionContractFormProductTable.dataSource"
:maxHeight="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>
</a-spin>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, computed, toRaw } from 'vue';
import { useValidateAntFormAndTable } from '/@/hooks/system/useJvxeMethods';
import { queryProductListByMainId, queryDataById, supplierOption, saveOrUpdate,} from '../commissionContractForm.api';
import { JVxeTable } from '/@/components/jeecg/JVxeTable';
import { ProductColumns } from '../commissionContractForm.data';
import SelectPrpductModal from '../../../publicComponents/SelectPrpductModal.vue';
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
import { JDictSelectTag, ApiSelect,JSelect} from '/@/components/Form';
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: 'commissionContractForm',
components: {
JVxeTable,
JFormContainer,
SelectPrpductModal,
JUpload,
JDictSelectTag,
ApiSelect,
JSelect
},
props: {
formDisabled: {
type: Boolean,
default: false,
},
formData: { type: Object, default: () => {} },
formBpm: { type: Boolean, default: true },
},
emits: ['success'],
setup(props, { emit }) {
var showField = ref('currency+name');
const userStore = useUserStore();
const loading = ref(false);
const formRef = ref();
const SelectPrpductModalRef = ref();
const commissionContractFormProductTableRef = ref();
const commissionContractFormProductTable = reactive<Record<string, any>>({
loading: false,
columns: ProductColumns,
dataSource: [],
});
const activeKey = ref('commissionContractFormProduct');
const formData = reactive<Record<string, any>>({
id: '',
status: undefined,
delFlag: undefined,
submit: undefined,
billCode: '',
billDate: moment(new Date()).format('YYYY-MM-DD'),
supplierId: '',
supplierName: '',
currency: '',
salesman:'',
salesmanName:'',
saleDepartmen:'',
saleDepartmenName:'',
notes: '',
attachs: '',
});
//表单验证
const validatorRules = reactive({
});
const {resetFields, validate, validateInfos} = useForm(formData, validatorRules, {immediate: false});
const dbData = {};
const formItemLayout = {
labelCol: { xs: { span: 24 }, sm: { span: 7 } },
wrapperCol: { xs: { span: 24 }, sm: { span: 15 } },
labelCol1: { xs: { span: 24 }, sm: { span: 7 } },
wrapperCol1: { xs: { span: 24 }, sm: { span: 15 } },
};
// 表单禁用
const disabled = computed(() => {
if (props.formBpm === true) {
if (props.formData.disabled === false) {
return false;
} else {
return true;
}
}
return props.formDisabled;
});
function add() {
resetFields();
commissionContractFormProductTable.dataSource = [];
activeKey.value = 'commissionContractFormProduct';
formData.salesman = userStore.getUserInfo.username;
formData.salesmanName = userStore.getUserInfo.realname;
formData.saleDepartmen = userStore.getUserInfo.orgCode;
formData.saleDepartmenName = userStore.getUserInfo.orgName;
}
async function edit(row) {
//主表数据
await queryMainData(row.id);
const commissionContractFormProductDataList = await queryProductListByMainId(row['id']);
commissionContractFormProductTable.dataSource = [...commissionContractFormProductDataList];
}
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);
}
const { getSubFormAndTableData, transformData } = useValidateAntFormAndTable(activeKey, {
platCommissionContractProduct: commissionContractFormProductTableRef,
});
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() {
var xTable = commissionContractFormProductTableRef.value!.getXTable()
if(xTable.data.length==0){
message.warning('请添加产品明细')
}else{
commissionContractFormProductTableRef.value!.validateTable().then(async (errMap) => {
if (errMap) {
console.log('表单验证未通过：', { errMap });
} 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 addProduct(data) {
data.map((item) => {
item.productClass = item.classId_dictText;
item.productCode = item.code;
item.productId = item.id;
item.id = undefined
});
var xTable = commissionContractFormProductTableRef.value!.getXTable();
var arrProduct = xTable.data.concat(data);
commissionContractFormProductTable.dataSource = arrProduct;
} //产品明细-删除行
function handleDelete(prop) {
var xTable = commissionContractFormProductTableRef.value!.getXTable()
var newArray = [...xTable.data]
newArray.splice(prop.rowIndex, 1)
commissionContractFormProductTable.dataSource = newArray
} /**
* 值改变事件触发-树控件回调
* @param key
* @param value
*/
function handleFormChange(key, value) {
formData[key] = value;
}
async function handleSupplierChange(prop){
if (prop) {
var params = { id: prop };
var obj = await supplierOption(params);
formData.supplierName = obj.records[0].name;
} else {
formData.supplierId = '';
formData.supplierName = '';
}
}
return {
commissionContractFormProductTableRef,
commissionContractFormProductTable,
validatorRules,
validateInfos,
activeKey,
loading,
formData,
setFieldsValue,
handleFormChange,
formItemLayout,
disabled,
getFormData,
submitForm,
add,
edit,
formRef,
selectProductList,
SelectPrpductModalRef,
addProduct,
handleDelete,
supplierOption,
handleSupplierChange,
showField
};
},
});
</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;
}
/deep/.vxe-cell--valid-error-msg{
color: white !important;
background-color: white !important;
}
</style>