|
|
@@ -0,0 +1,1013 @@
|
|
|
+<template>
|
|
|
+ <div class="form">
|
|
|
+ <van-tabs v-model:active="active">
|
|
|
+ <van-tab :title="proxy.t('contract.transactionInformation')" />
|
|
|
+ <van-tab :title="proxy.t('contract.commodityInformation')" />
|
|
|
+ <van-tab :title="proxy.t('contract.otherCharges')" />
|
|
|
+ <van-tab :title="proxy.t('contract.deliveryInformation')" />
|
|
|
+ <van-tab :title="proxy.t('contract.shipmentPlan')" />
|
|
|
+ <div class="common-process-card" v-show="active == 0">
|
|
|
+ <div class="common-title">{{ proxy.t("contract.transactionInformation") }}</div>
|
|
|
+ <testForm v-model="formData.data" :formOption="formOption" :formConfig="formConfig" :rules="rules" ref="formDom1"> </testForm>
|
|
|
+ </div>
|
|
|
+ <div class="common-process-card" v-show="active == 1">
|
|
|
+ <div class="common-title">{{ proxy.t("contract.commodityInformation") }}</div>
|
|
|
+ <testForm v-model="formData.data" :formOption="formGoodsOption" :formConfig="formEmptyConfig" :rules="rules" ref="formDom2"> </testForm>
|
|
|
+ <testForm v-model="formData.data" :formOption="formOption" :formConfig="formAmountProductConfig" :rules="rules" ref="formDom3"> </testForm>
|
|
|
+ </div>
|
|
|
+ <div class="common-process-card" v-show="active == 2">
|
|
|
+ <div class="common-title">{{ proxy.t("contract.otherCharges") }}</div>
|
|
|
+ <testForm v-model="formData.data" :formOption="formProjectOption" :formConfig="formEmptyConfig" :rules="rules" ref="formDom4"> </testForm>
|
|
|
+ <testForm v-model="formData.data" :formOption="formOption" :formConfig="formAmountProjectConfig" :rules="rules" ref="formDom5"> </testForm>
|
|
|
+ </div>
|
|
|
+ <div class="common-process-card" v-show="active == 3">
|
|
|
+ <div class="common-title">{{ proxy.t("contract.deliveryInformation") }}</div>
|
|
|
+ <testForm v-model="formData.data" :formOption="formOption" :formConfig="formDeliveryConfig" :rules="rulesTwo" ref="formDom6"> </testForm>
|
|
|
+ </div>
|
|
|
+ <div class="common-process-card" v-show="active == 4">
|
|
|
+ <div class="common-title">{{ proxy.t("contract.shipmentPlan") }}</div>
|
|
|
+ <testForm v-model="formData.data" :formOption="formShipmentOption" :formConfig="formEmptyConfig" :rules="rulesTwo" ref="formDom7"> </testForm>
|
|
|
+ </div>
|
|
|
+ </van-tabs>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <script setup>
|
|
|
+ import { ref, getCurrentInstance, onMounted, defineProps, defineExpose, watch, reactive, toRefs } from "vue";
|
|
|
+ import { useRoute } from "vue-router";
|
|
|
+ import testForm from "@/components/testForm/index.vue";
|
|
|
+ import { getUserInfo } from "@/utils/auth";
|
|
|
+ import { showFailToast } from "vant";
|
|
|
+
|
|
|
+ // 接收父组件的传值
|
|
|
+ const props = defineProps({
|
|
|
+ queryData: Object,
|
|
|
+ });
|
|
|
+ const refProps = toRefs(props);
|
|
|
+ const proxy = getCurrentInstance().proxy;
|
|
|
+ const route = useRoute();
|
|
|
+ const active = ref(0);
|
|
|
+ const tabsChange = () => {
|
|
|
+ active.value++;
|
|
|
+ };
|
|
|
+ const formData = reactive({
|
|
|
+ data: {
|
|
|
+ contractType: "1",
|
|
|
+ contractProductList: [],
|
|
|
+ contractProjectList: [],
|
|
|
+ contractShipmentList: [],
|
|
|
+ },
|
|
|
+ });
|
|
|
+ const formDom1 = ref(null);
|
|
|
+ const formDom2 = ref(null);
|
|
|
+ const formDom3 = ref(null);
|
|
|
+ const formDom4 = ref(null);
|
|
|
+ const formDom5 = ref(null);
|
|
|
+ const formDom6 = ref(null);
|
|
|
+ const formDom7 = ref(null);
|
|
|
+ const formOption = reactive({
|
|
|
+ readonly: false,
|
|
|
+ disabled: false,
|
|
|
+ labelAlign: "top",
|
|
|
+ scroll: true,
|
|
|
+ labelWidth: "62pk",
|
|
|
+ hiddenSubmitBtn: true,
|
|
|
+ });
|
|
|
+ const formConfig = reactive([
|
|
|
+ {
|
|
|
+ type: "picker",
|
|
|
+ label: proxy.t("contract.contractType"),
|
|
|
+ prop: "contractType",
|
|
|
+ itemType: "onePicker",
|
|
|
+ showPicker: false,
|
|
|
+ fieldNames: {
|
|
|
+ text: "label",
|
|
|
+ value: "value",
|
|
|
+ },
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "picker",
|
|
|
+ label: proxy.t("contract.contractTemplateId"),
|
|
|
+ prop: "contractTemplateId",
|
|
|
+ itemType: "onePicker",
|
|
|
+ showPicker: false,
|
|
|
+ fieldNames: {
|
|
|
+ text: "label",
|
|
|
+ value: "value",
|
|
|
+ },
|
|
|
+ data: [],
|
|
|
+ changeFn: (val, data) => {
|
|
|
+ proxy.formChange(val, data, formData);
|
|
|
+ formData.data.sellCorporationId = "";
|
|
|
+ formData.data.sellCountryName = "";
|
|
|
+ formData.data.sellProvinceName = "";
|
|
|
+ formData.data.sellCityName = "";
|
|
|
+ formData.data.sellAddress = "";
|
|
|
+ formData.data.sellContactName = "";
|
|
|
+ formData.data.sellContactNumber = "";
|
|
|
+ if (val.selectedValues[0]) {
|
|
|
+ proxy.post("/contractTemplate/detail", { id: val.selectedValues[0] }).then((res) => {
|
|
|
+ formData.data.sellCorporationId = res.data.corporationId;
|
|
|
+ if (res.data.corporationId) {
|
|
|
+ proxy.post("/corporation/detail", { id: res.data.corporationId }).then((detailCorporation) => {
|
|
|
+ let sellCity = "";
|
|
|
+ if (detailCorporation.data.countryEnStr) {
|
|
|
+ formData.data.sellCountryName = detailCorporation.data.countryEnStr;
|
|
|
+ sellCity = detailCorporation.data.countryEnStr;
|
|
|
+ }
|
|
|
+ if (detailCorporation.data.provinceEnStr) {
|
|
|
+ formData.data.sellProvinceName = detailCorporation.data.provinceEnStr;
|
|
|
+ sellCity = sellCity + " " + detailCorporation.data.provinceEnStr;
|
|
|
+ }
|
|
|
+ if (detailCorporation.data.cityEnStr) {
|
|
|
+ formData.data.sellCityName = detailCorporation.data.cityEnStr;
|
|
|
+ sellCity = sellCity + " " + detailCorporation.data.cityEnStr;
|
|
|
+ }
|
|
|
+ if (detailCorporation.data.addressEn) {
|
|
|
+ formData.data.sellAddress = detailCorporation.data.addressEn;
|
|
|
+ }
|
|
|
+ formData.data.sellCity = sellCity;
|
|
|
+ formDom1.value.formDataShowLabelOne();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ formData.data.sellContactName = res.data.contactName;
|
|
|
+ formData.data.sellContactNumber = res.data.contactNumber;
|
|
|
+ formDom1.value.formDataShowLabelOne();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ data.showPicker = false;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "title",
|
|
|
+ title: proxy.t("contract.sellerInformation"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "picker",
|
|
|
+ label: proxy.t("contract.sellCorporationId"),
|
|
|
+ prop: "sellCorporationId",
|
|
|
+ itemType: "onePicker",
|
|
|
+ showPicker: false,
|
|
|
+ fieldNames: {
|
|
|
+ text: "label",
|
|
|
+ value: "value",
|
|
|
+ },
|
|
|
+ data: [],
|
|
|
+ readonly: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ label: proxy.t("contract.cityText"),
|
|
|
+ prop: "sellCity",
|
|
|
+ itemType: "text",
|
|
|
+ readonly: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ label: proxy.t("contract.address"),
|
|
|
+ prop: "sellAddress",
|
|
|
+ itemType: "textarea",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ label: proxy.t("contract.contactName"),
|
|
|
+ prop: "sellContactName",
|
|
|
+ itemType: "text",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ label: proxy.t("contract.contactNumber"),
|
|
|
+ prop: "sellContactNumber",
|
|
|
+ itemType: "text",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "title",
|
|
|
+ title: proxy.t("contract.buyerInformation"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "picker",
|
|
|
+ label: proxy.t("contract.buyCorporationId"),
|
|
|
+ prop: "buyCorporationId",
|
|
|
+ itemType: "onePicker",
|
|
|
+ showPicker: false,
|
|
|
+ fieldNames: {
|
|
|
+ text: "label",
|
|
|
+ value: "value",
|
|
|
+ },
|
|
|
+ data: [],
|
|
|
+ changeFn: (val, data) => {
|
|
|
+ proxy.formChange(val, data, formData);
|
|
|
+ formData.data.buyContactName = "";
|
|
|
+ formData.data.buyContactNumber = "";
|
|
|
+ if (val.selectedValues[0]) {
|
|
|
+ proxy.post("/customer/detail", { id: val.selectedValues[0] }).then((res) => {
|
|
|
+ if (res.data.customerUserList && res.data.customerUserList.length > 0) {
|
|
|
+ formData.data.buyContactName = res.data.customerUserList[0].name;
|
|
|
+ if (res.data.customerUserList[0].contactJson) {
|
|
|
+ let contactJson = JSON.parse(res.data.customerUserList[0].contactJson);
|
|
|
+ if (contactJson && contactJson.length > 0) {
|
|
|
+ formData.data.buyContactNumber = contactJson[0].contactNo;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let countryCityName = "";
|
|
|
+ if (res.data.countryName) {
|
|
|
+ countryCityName = res.data.countryName;
|
|
|
+ if (res.data.provinceName) {
|
|
|
+ countryCityName = countryCityName + " " + res.data.provinceName;
|
|
|
+ if (res.data.cityName) {
|
|
|
+ countryCityName = countryCityName + " " + res.data.cityName;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ formData.data.countryCityName = countryCityName;
|
|
|
+ if (res.data.cityId) {
|
|
|
+ formData.data.countryCity = res.data.cityId;
|
|
|
+ } else if (res.data.provinceId) {
|
|
|
+ formData.data.countryCity = res.data.provinceId;
|
|
|
+ } else if (res.data.countryId) {
|
|
|
+ formData.data.countryCity = res.data.countryId;
|
|
|
+ } else {
|
|
|
+ formData.data.countryCity = "";
|
|
|
+ }
|
|
|
+ formData.data.countryId = res.data.countryId;
|
|
|
+ formData.data.provinceId = res.data.provinceId;
|
|
|
+ formData.data.cityId = res.data.cityId;
|
|
|
+ formData.data.buyPostalCode = res.data.zipCode;
|
|
|
+ formData.data.buyAddress = res.data.address;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ formData.data.countryId = "";
|
|
|
+ formData.data.provinceId = "";
|
|
|
+ formData.data.cityId = "";
|
|
|
+ formData.data.buyPostalCode = "";
|
|
|
+ formData.data.buyAddress = "";
|
|
|
+ }
|
|
|
+ data.showPicker = false;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "cascader",
|
|
|
+ label: proxy.t("contract.cityText"),
|
|
|
+ prop: "countryCity",
|
|
|
+ itemType: "city",
|
|
|
+ showPicker: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ label: proxy.t("contract.address"),
|
|
|
+ prop: "buyAddress",
|
|
|
+ itemType: "textarea",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ label: proxy.t("contract.postalCode"),
|
|
|
+ prop: "buyPostalCode",
|
|
|
+ itemType: "text",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ label: proxy.t("contract.contactName"),
|
|
|
+ prop: "buyContactName",
|
|
|
+ itemType: "text",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ label: proxy.t("contract.contactNumber"),
|
|
|
+ prop: "buyContactNumber",
|
|
|
+ itemType: "text",
|
|
|
+ },
|
|
|
+ ]);
|
|
|
+ const formGoodsOption = reactive({
|
|
|
+ readonly: false,
|
|
|
+ disabled: false,
|
|
|
+ labelAlign: "top",
|
|
|
+ scroll: true,
|
|
|
+ labelWidth: "62pk",
|
|
|
+ hiddenSubmitBtn: true,
|
|
|
+ btnConfig: {
|
|
|
+ isNeed: true,
|
|
|
+ prop: "contractProductList",
|
|
|
+ plain: true,
|
|
|
+ listTitle: proxy.t("contract.commodityInformation"),
|
|
|
+ listConfig: [
|
|
|
+ {
|
|
|
+ type: "picker",
|
|
|
+ label: proxy.t("contract.productId"),
|
|
|
+ prop: "productId",
|
|
|
+ itemType: "onePicker",
|
|
|
+ showPicker: false,
|
|
|
+ readonly: false,
|
|
|
+ fieldNames: {
|
|
|
+ text: "label",
|
|
|
+ value: "value",
|
|
|
+ },
|
|
|
+ data: [],
|
|
|
+ changeFn: (val, data, index, indexTwo, propName) => {
|
|
|
+ let selectList = formData.data[propName].filter((item, itemIndex) => item[data.prop] === val.selectedValues[0] && itemIndex !== index);
|
|
|
+ if (selectList && selectList.length > 0) {
|
|
|
+ return showFailToast(proxy.t("contract.productRepeat"));
|
|
|
+ }
|
|
|
+ formData.data[propName][index][data.prop] = val.selectedValues[0];
|
|
|
+ formData.data.contractShipmentList[index][data.prop] = val.selectedValues[0];
|
|
|
+ let list = data.data.filter((item) => item[data.fieldNames.value] == val.selectedValues[0]);
|
|
|
+ if (list && list.length > 0) {
|
|
|
+ formData.data[propName][index][data.prop + "Name"] = list[0][data.fieldNames.text];
|
|
|
+ let name = list[0].name;
|
|
|
+ if (list[0].standardJson) {
|
|
|
+ let standardJson = JSON.parse(list[0].standardJson);
|
|
|
+ if (standardJson && standardJson.englishName) {
|
|
|
+ name = standardJson.englishName;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ formData.data[propName][index].productName = name;
|
|
|
+ formData.data[propName][index].productModel = list[0].spec;
|
|
|
+ formData.data.contractShipmentList[index].productName = name;
|
|
|
+ } else {
|
|
|
+ formData.data[propName][index][data.prop + "Name"] = "";
|
|
|
+ }
|
|
|
+ formData.data[propName][index].quantity = null;
|
|
|
+ formData.data[propName][index].price = null;
|
|
|
+ formData.data[propName][index].amount = null;
|
|
|
+ formData.data[propName][index].remark = null;
|
|
|
+ formData.data.contractShipmentList[index].shipmentTime = null;
|
|
|
+ formData.data.contractShipmentList[index].quantity = null;
|
|
|
+ formData.data.contractShipmentList[index].remark = null;
|
|
|
+ data.showPicker = false;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ label: proxy.t("contract.productName"),
|
|
|
+ prop: "productName",
|
|
|
+ itemType: "text",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ label: proxy.t("contract.productModel"),
|
|
|
+ prop: "productModel",
|
|
|
+ itemType: "text",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ label: proxy.t("contract.quantity"),
|
|
|
+ prop: "quantity",
|
|
|
+ itemType: "number",
|
|
|
+ changeFn: () => {
|
|
|
+ calculatedAmount();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ label: proxy.t("contract.price"),
|
|
|
+ prop: "price",
|
|
|
+ itemType: "number",
|
|
|
+ changeFn: () => {
|
|
|
+ calculatedAmount();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ clickFn: () => {
|
|
|
+ if (formData.data.contractProductList && formData.data.contractProductList.length > 0) {
|
|
|
+ formData.data.contractProductList.push({
|
|
|
+ productId: null,
|
|
|
+ productName: null,
|
|
|
+ productModel: null,
|
|
|
+ quantity: null,
|
|
|
+ price: null,
|
|
|
+ amount: null,
|
|
|
+ remark: null,
|
|
|
+ });
|
|
|
+ formData.data.contractShipmentList.push({
|
|
|
+ productId: null,
|
|
|
+ productName: null,
|
|
|
+ shipmentTime: null,
|
|
|
+ quantity: null,
|
|
|
+ remark: null,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ formData.data.contractProductList = [
|
|
|
+ {
|
|
|
+ productId: null,
|
|
|
+ productName: null,
|
|
|
+ productModel: null,
|
|
|
+ quantity: null,
|
|
|
+ price: null,
|
|
|
+ amount: null,
|
|
|
+ remark: null,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ formData.data.contractShipmentList = [
|
|
|
+ {
|
|
|
+ productId: null,
|
|
|
+ productName: null,
|
|
|
+ shipmentTime: null,
|
|
|
+ quantity: null,
|
|
|
+ remark: null,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deleteFn: (index) => {
|
|
|
+ formData.data.contractProductList.splice(index, 1);
|
|
|
+ formData.data.contractShipmentList.splice(index, 1);
|
|
|
+ handleChangeAmount();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ const formEmptyConfig = reactive([]);
|
|
|
+ const formAmountProductConfig = reactive([
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ label: proxy.t("contract.amountProduct"),
|
|
|
+ prop: "amountProduct",
|
|
|
+ itemType: "text",
|
|
|
+ readonly: true,
|
|
|
+ placeholder: proxy.t("contract.amountProductPlaceholder"),
|
|
|
+ },
|
|
|
+ ]);
|
|
|
+ const formAmountProjectConfig = reactive([
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ label: proxy.t("contract.amountProject"),
|
|
|
+ prop: "amountProject",
|
|
|
+ itemType: "text",
|
|
|
+ readonly: true,
|
|
|
+ placeholder: proxy.t("contract.amountProjectPlaceholder"),
|
|
|
+ },
|
|
|
+ ]);
|
|
|
+ const formProjectOption = reactive({
|
|
|
+ readonly: false,
|
|
|
+ disabled: false,
|
|
|
+ labelAlign: "top",
|
|
|
+ scroll: true,
|
|
|
+ labelWidth: "62pk",
|
|
|
+ hiddenSubmitBtn: true,
|
|
|
+ btnConfig: {
|
|
|
+ isNeed: true,
|
|
|
+ prop: "contractProjectList",
|
|
|
+ plain: true,
|
|
|
+ listTitle: proxy.t("contract.chargeItem"),
|
|
|
+ listConfig: [
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ label: proxy.t("contract.chargeItem"),
|
|
|
+ prop: "payName",
|
|
|
+ itemType: "text",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ label: proxy.t("contract.amount"),
|
|
|
+ prop: "amount",
|
|
|
+ itemType: "number",
|
|
|
+ changeFn: () => {
|
|
|
+ handleChangeAmount();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ label: proxy.t("contract.remark"),
|
|
|
+ prop: "remark",
|
|
|
+ itemType: "textarea",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ clickFn: () => {
|
|
|
+ if (formData.data.contractProjectList && formData.data.contractProjectList.length > 0) {
|
|
|
+ formData.data.contractProjectList.push({
|
|
|
+ payName: null,
|
|
|
+ amount: null,
|
|
|
+ remark: null,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ formData.data.contractProjectList = [
|
|
|
+ {
|
|
|
+ payName: null,
|
|
|
+ amount: null,
|
|
|
+ remark: null,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deleteFn: (index) => {
|
|
|
+ formData.data.contractProjectList.splice(index, 1);
|
|
|
+ handleChangeAmount();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ const formDeliveryConfig = reactive([
|
|
|
+ {
|
|
|
+ type: "title",
|
|
|
+ title: proxy.t("contract.collectionInformation"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "picker",
|
|
|
+ label: proxy.t("contract.currency"),
|
|
|
+ prop: "currency",
|
|
|
+ itemType: "onePicker",
|
|
|
+ showPicker: false,
|
|
|
+ fieldNames: {
|
|
|
+ text: "label",
|
|
|
+ value: "value",
|
|
|
+ },
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ label: proxy.t("contract.amountAll"),
|
|
|
+ prop: "amount",
|
|
|
+ itemType: "text",
|
|
|
+ readonly: true,
|
|
|
+ placeholder: proxy.t("contract.amountAllPlaceholder"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "picker",
|
|
|
+ label: proxy.t("contract.paymentMethod"),
|
|
|
+ prop: "paymentMethod",
|
|
|
+ itemType: "onePicker",
|
|
|
+ showPicker: false,
|
|
|
+ fieldNames: {
|
|
|
+ text: "label",
|
|
|
+ value: "value",
|
|
|
+ },
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ label: proxy.t("contract.advanceRatio"),
|
|
|
+ prop: "advanceRatio",
|
|
|
+ itemType: "number",
|
|
|
+ inputFn: (val) => {
|
|
|
+ if (val) {
|
|
|
+ if (val > 100) {
|
|
|
+ formData.data.advanceRatio = 100;
|
|
|
+ } else if (val < 0) {
|
|
|
+ formData.data.advanceRatio = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "picker",
|
|
|
+ label: proxy.t("contract.shroffAccountId"),
|
|
|
+ prop: "shroffAccountId",
|
|
|
+ itemType: "onePicker",
|
|
|
+ showPicker: false,
|
|
|
+ fieldNames: {
|
|
|
+ text: "label",
|
|
|
+ value: "value",
|
|
|
+ },
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "title",
|
|
|
+ title: proxy.t("contract.deliveryInformation"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "picker",
|
|
|
+ label: proxy.t("contract.tradeMethods"),
|
|
|
+ prop: "tradeMethods",
|
|
|
+ itemType: "onePicker",
|
|
|
+ showPicker: false,
|
|
|
+ fieldNames: {
|
|
|
+ text: "label",
|
|
|
+ value: "value",
|
|
|
+ },
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "picker",
|
|
|
+ label: proxy.t("contract.transportMethod"),
|
|
|
+ prop: "transportMethod",
|
|
|
+ itemType: "onePicker",
|
|
|
+ showPicker: false,
|
|
|
+ fieldNames: {
|
|
|
+ text: "label",
|
|
|
+ value: "value",
|
|
|
+ },
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ label: proxy.t("contract.transportRemark"),
|
|
|
+ prop: "transportRemark",
|
|
|
+ itemType: "text",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ label: proxy.t("contract.remarks"),
|
|
|
+ prop: "remark",
|
|
|
+ itemType: "textarea",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ label: proxy.t("contract.warranty"),
|
|
|
+ prop: "warranty",
|
|
|
+ itemType: "digit",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ label: proxy.t("contract.deliveryTime"),
|
|
|
+ prop: "deliveryTime",
|
|
|
+ itemType: "digit",
|
|
|
+ },
|
|
|
+ ]);
|
|
|
+ const formShipmentOption = reactive({
|
|
|
+ readonly: false,
|
|
|
+ disabled: false,
|
|
|
+ labelAlign: "top",
|
|
|
+ scroll: true,
|
|
|
+ labelWidth: "62pk",
|
|
|
+ hiddenSubmitBtn: true,
|
|
|
+ btnConfig: {
|
|
|
+ isNeed: false,
|
|
|
+ prop: "contractShipmentList",
|
|
|
+ plain: true,
|
|
|
+ listTitle: proxy.t("contract.commodity"),
|
|
|
+ listConfig: [
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ label: proxy.t("contract.productName"),
|
|
|
+ prop: "productName",
|
|
|
+ itemType: "text",
|
|
|
+ readonly: true,
|
|
|
+ placeholder: proxy.t("contract.productNamePlaceholder"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "picker",
|
|
|
+ label: proxy.t("contract.shipmentTime"),
|
|
|
+ prop: "shipmentTime",
|
|
|
+ itemType: "datePicker",
|
|
|
+ showPicker: false,
|
|
|
+ split: "-",
|
|
|
+ columnsType: ["year", "month", "day"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ label: proxy.t("contract.quantityShipment"),
|
|
|
+ prop: "quantity",
|
|
|
+ itemType: "number",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ });
|
|
|
+ const rules = {
|
|
|
+ contractType: [{ required: true, message: proxy.t("contract.contractTypeMsg") }],
|
|
|
+ contractTemplateId: [{ required: true, message: proxy.t("contract.contractTemplateIdMsg") }],
|
|
|
+ sellCorporationId: [{ required: true, message: proxy.t("contract.sellCorporationIdMsg") }],
|
|
|
+ buyCorporationId: [{ required: true, message: proxy.t("contract.buyCorporationIdMsg") }],
|
|
|
+ sellCity: [{ required: true, message: proxy.t("contract.cityMsg") }],
|
|
|
+ countryCity: [{ required: true, message: proxy.t("contract.cityMsg") }],
|
|
|
+ sellAddress: [{ required: true, message: proxy.t("contract.addressMsg") }],
|
|
|
+ buyAddress: [{ required: true, message: proxy.t("contract.addressMsg") }],
|
|
|
+ sellContactName: [{ required: true, message: proxy.t("contract.contactNameMsg") }],
|
|
|
+ sellContactNumber: [{ required: true, message: proxy.t("contract.contactNumberMsg") }],
|
|
|
+ // buyPostalCode: [{ required: true, message: proxy.t("contract.postalCodeMsg") }],
|
|
|
+ buyContactName: [{ required: true, message: proxy.t("contract.contactNameMsg") }],
|
|
|
+ buyContactNumber: [{ required: true, message: proxy.t("contract.contactNumberMsg") }],
|
|
|
+ productId: [{ required: true, message: proxy.t("contract.productIdMsg") }],
|
|
|
+ productName: [{ required: true, message: proxy.t("contract.productNameMsg") }],
|
|
|
+ productModel: [{ required: true, message: proxy.t("contract.productModelMsg") }],
|
|
|
+ quantity: [{ required: true, message: proxy.t("contract.quantityMsg") }],
|
|
|
+ price: [{ required: true, message: proxy.t("contract.priceMsg") }],
|
|
|
+ payName: [{ required: true, message: proxy.t("contract.chargeItemMsg") }],
|
|
|
+ amount: [{ required: true, message: proxy.t("contract.amountMsg") }],
|
|
|
+ };
|
|
|
+ const rulesTwo = {
|
|
|
+ currency: [{ required: true, message: proxy.t("contract.currencyMsg") }],
|
|
|
+ paymentMethod: [{ required: true, message: proxy.t("contract.paymentMethodMsg") }],
|
|
|
+ advanceRatio: [{ required: true, message: proxy.t("contract.advanceRatioMsg") }],
|
|
|
+ shroffAccountId: [{ required: true, message: proxy.t("contract.shroffAccountIdMsg") }],
|
|
|
+ tradeMethods: [{ required: true, message: proxy.t("contract.tradeMethodsMsg") }],
|
|
|
+ transportMethod: [{ required: true, message: proxy.t("contract.transportMethodMsg") }],
|
|
|
+ transportRemark: [{ required: true, message: proxy.t("contract.transportRemarkMsg") }],
|
|
|
+ remark: [{ required: true, message: proxy.t("contract.remarksMsg") }],
|
|
|
+ };
|
|
|
+ const getDict = () => {
|
|
|
+ let query = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 999,
|
|
|
+ tenantId: getUserInfo().tenantId,
|
|
|
+ };
|
|
|
+ proxy.post("/dictTenantData/page", { ...query, dictCode: "contract_type" }).then((res) => {
|
|
|
+ if (res.data.rows && res.data.rows.length > 0) {
|
|
|
+ formConfig[0].data = res.data.rows.map((item) => {
|
|
|
+ return {
|
|
|
+ label: item.dictValue,
|
|
|
+ value: item.dictKey,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ proxy.post("/contractTemplate/page", { pageNum: 1, pageSize: 999 }).then((res) => {
|
|
|
+ if (res.data.rows && res.data.rows.length > 0) {
|
|
|
+ formConfig[1].data = res.data.rows.map((item) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ label: item.templateName,
|
|
|
+ value: item.id,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ proxy.post("/corporation/page", { pageNum: 1, pageSize: 999 }).then((res) => {
|
|
|
+ if (res.data.rows && res.data.rows.length > 0) {
|
|
|
+ formConfig[3].data = res.data.rows.map((item) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ label: item.name,
|
|
|
+ value: item.id,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ proxy.post("/productInfo/page", { pageNum: 1, pageSize: 9999, definition: "1" }).then((res) => {
|
|
|
+ if (res.data.rows && res.data.rows.length > 0) {
|
|
|
+ formGoodsOption.btnConfig.listConfig[0].data = res.data.rows.map((item) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ label: item.name,
|
|
|
+ value: item.id,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ proxy.post("/dictTenantData/page", { ...query, dictCode: "account_currency" }).then((res) => {
|
|
|
+ if (res.data.rows && res.data.rows.length > 0) {
|
|
|
+ formDeliveryConfig[1].data = res.data.rows.map((item) => {
|
|
|
+ return {
|
|
|
+ label: item.dictValue,
|
|
|
+ value: item.dictKey,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ proxy.post("/dictTenantData/page", { ...query, dictCode: "funds_payment_method" }).then((res) => {
|
|
|
+ if (res.data.rows && res.data.rows.length > 0) {
|
|
|
+ formDeliveryConfig[3].data = res.data.rows.map((item) => {
|
|
|
+ return {
|
|
|
+ label: item.dictValue,
|
|
|
+ value: item.dictKey,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ proxy.post("/accountManagement/page", { pageNum: 1, pageSize: 999 }).then((res) => {
|
|
|
+ if (res.data.rows && res.data.rows.length > 0) {
|
|
|
+ formDeliveryConfig[5].data = res.data.rows.map((item) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ label: item.alias,
|
|
|
+ value: item.id,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ proxy.post("/dictTenantData/page", { ...query, dictCode: "trade_mode" }).then((res) => {
|
|
|
+ if (res.data.rows && res.data.rows.length > 0) {
|
|
|
+ formDeliveryConfig[7].data = res.data.rows.map((item) => {
|
|
|
+ return {
|
|
|
+ label: item.dictValue,
|
|
|
+ value: item.dictKey,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ proxy.post("/dictTenantData/page", { ...query, dictCode: "shipping_method" }).then((res) => {
|
|
|
+ if (res.data.rows && res.data.rows.length > 0) {
|
|
|
+ formDeliveryConfig[8].data = res.data.rows.map((item) => {
|
|
|
+ return {
|
|
|
+ label: item.dictValue,
|
|
|
+ value: item.dictKey,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (["10", "20"].includes(route.query.processType)) {
|
|
|
+ proxy.post("/customer/page", { pageNum: 1, pageSize: 999 }).then((res) => {
|
|
|
+ if (res.data.rows && res.data.rows.length > 0) {
|
|
|
+ formConfig[9].data = res.data.rows.map((item) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ label: item.name,
|
|
|
+ value: item.id,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ proxy.post("/customer/privateSeaPage", { pageNum: 1, pageSize: 999 }).then((res) => {
|
|
|
+ if (res.data.rows && res.data.rows.length > 0) {
|
|
|
+ formConfig[9].data = res.data.rows.map((item) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ label: item.name,
|
|
|
+ value: item.id,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ };
|
|
|
+ getDict();
|
|
|
+ const calculatedAmount = () => {
|
|
|
+ if (formData.data.contractProductList && formData.data.contractProductList.length > 0) {
|
|
|
+ for (let i = 0; i < formData.data.contractProductList.length; i++) {
|
|
|
+ let money = 0;
|
|
|
+ if (formData.data.contractProductList[i].quantity && formData.data.contractProductList[i].price) {
|
|
|
+ money = Number(Math.round(Number(formData.data.contractProductList[i].quantity) * Number(formData.data.contractProductList[i].price) * 10000) / 10000);
|
|
|
+ }
|
|
|
+ formData.data.contractProductList[i].amount = money;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ handleChangeAmount();
|
|
|
+ };
|
|
|
+ const handleChangeAmount = () => {
|
|
|
+ let money = 0;
|
|
|
+ let amountProduct = 0;
|
|
|
+ let amountProject = 0;
|
|
|
+ if (formData.data.contractProductList && formData.data.contractProductList.length > 0) {
|
|
|
+ for (let i = 0; i < formData.data.contractProductList.length; i++) {
|
|
|
+ if (formData.data.contractProductList[i].amount) {
|
|
|
+ money = Number(Math.round((Number(money) + Number(formData.data.contractProductList[i].amount)) * 10000) / 10000);
|
|
|
+ amountProduct = Number(Math.round((Number(amountProduct) + Number(formData.data.contractProductList[i].amount)) * 10000) / 10000);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (formData.data.contractProjectList && formData.data.contractProjectList.length > 0) {
|
|
|
+ for (let i = 0; i < formData.data.contractProjectList.length; i++) {
|
|
|
+ if (formData.data.contractProjectList[i].amount) {
|
|
|
+ money = Number(Math.round((Number(money) + Number(formData.data.contractProjectList[i].amount)) * 10000) / 10000);
|
|
|
+ amountProject = Number(Math.round((Number(amountProject) + Number(formData.data.contractProjectList[i].amount)) * 10000) / 10000);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ formData.data.amount = money;
|
|
|
+ formData.data.amountProduct = amountProduct;
|
|
|
+ formData.data.amountProject = amountProject;
|
|
|
+ };
|
|
|
+ const handleSubmit = async () => {
|
|
|
+ const flag = await formDom1.value.validateForm().then((status) => {
|
|
|
+ if (status) {
|
|
|
+ active.value = 0;
|
|
|
+ return false;
|
|
|
+ } else {
|
|
|
+ if (!(formData.data.contractProductList && formData.data.contractProductList.length > 0)) {
|
|
|
+ active.value = 1;
|
|
|
+ showFailToast(proxy.t("contract.pleaseAddProduct"));
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return formDom2.value.validateForm().then((status1) => {
|
|
|
+ if (status1) {
|
|
|
+ active.value = 1;
|
|
|
+ return false;
|
|
|
+ } else {
|
|
|
+ return formDom4.value.validateForm().then((status2) => {
|
|
|
+ if (status2) {
|
|
|
+ active.value = 2;
|
|
|
+ return false;
|
|
|
+ } else {
|
|
|
+ return formDom6.value.validateForm().then((status3) => {
|
|
|
+ if (status3) {
|
|
|
+ active.value = 3;
|
|
|
+ return false;
|
|
|
+ } else {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (flag) {
|
|
|
+ return formData.data;
|
|
|
+ }
|
|
|
+ };
|
|
|
+ let status = ref(true);
|
|
|
+ watch(
|
|
|
+ refProps.queryData,
|
|
|
+ () => {
|
|
|
+ if (refProps.queryData.value && ["10", "20", "30"].includes(route.query.processType)) {
|
|
|
+ for (const key in refProps.queryData.value) {
|
|
|
+ formData.data[key] = refProps.queryData.value[key];
|
|
|
+ }
|
|
|
+ formDom1.value.formDataShowLabelOne();
|
|
|
+ formDom2.value.formDataListShowLabelOne();
|
|
|
+ formDom6.value.formDataShowLabelOne();
|
|
|
+ if (!formData.data.sellCity) {
|
|
|
+ let sellCity = "";
|
|
|
+ if (formData.data.sellCountryName) {
|
|
|
+ sellCity = formData.data.sellCountryName;
|
|
|
+ }
|
|
|
+ if (formData.data.sellProvinceName) {
|
|
|
+ sellCity = sellCity + " " + formData.data.sellProvinceName;
|
|
|
+ }
|
|
|
+ if (formData.data.sellCityName) {
|
|
|
+ sellCity = sellCity + " " + formData.data.sellCityName;
|
|
|
+ }
|
|
|
+ formData.data.sellCity = sellCity;
|
|
|
+ }
|
|
|
+ if (["10", "20"].includes(route.query.processType)) {
|
|
|
+ formOption.readonly = true;
|
|
|
+ formGoodsOption.readonly = true;
|
|
|
+ formGoodsOption.btnConfig.isNeed = false;
|
|
|
+ formProjectOption.readonly = true;
|
|
|
+ formProjectOption.btnConfig.isNeed = false;
|
|
|
+ formShipmentOption.readonly = true;
|
|
|
+ }
|
|
|
+ handleChangeAmount();
|
|
|
+ if (status.value) {
|
|
|
+ if (!formData.data.countryCityName) {
|
|
|
+ if (formData.data.countryId) {
|
|
|
+ let countryCityName = "";
|
|
|
+ formData.data.countryCity = formData.data.countryId;
|
|
|
+ proxy.post("/customizeArea/list", { parentId: "0" }).then((res) => {
|
|
|
+ let list = res.data.filter((item) => item.id == formData.data.countryId);
|
|
|
+ if (list && list.length > 0) {
|
|
|
+ countryCityName = list[0].name;
|
|
|
+ formData.data.countryCityName = countryCityName;
|
|
|
+ }
|
|
|
+ if (formData.data.provinceId) {
|
|
|
+ formData.data.countryCity = formData.data.provinceId;
|
|
|
+ proxy.post("/customizeArea/list", { parentId: formData.data.countryId }).then((res) => {
|
|
|
+ let list = res.data.filter((item) => item.id == formData.data.provinceId);
|
|
|
+ if (list && list.length > 0) {
|
|
|
+ countryCityName = countryCityName + " " + list[0].name;
|
|
|
+ formData.data.countryCityName = countryCityName;
|
|
|
+ }
|
|
|
+ if (formData.data.cityId) {
|
|
|
+ formData.data.countryCity = formData.data.cityId;
|
|
|
+ proxy.post("/customizeArea/list", { parentId: formData.data.provinceId }).then((res) => {
|
|
|
+ let list = res.data.filter((item) => item.id == formData.data.cityId);
|
|
|
+ if (list && list.length > 0) {
|
|
|
+ countryCityName = countryCityName + " " + list[0].name;
|
|
|
+ formData.data.countryCityName = countryCityName;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ status.value = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ deep: true,
|
|
|
+ }
|
|
|
+ );
|
|
|
+ defineExpose({
|
|
|
+ handleSubmit,
|
|
|
+ tabsChange,
|
|
|
+ });
|
|
|
+ onMounted(() => {
|
|
|
+ proxy.post("/contract/detail", { id: route.query.contractId }).then((res) => {
|
|
|
+
|
|
|
+ for (const key in res.data) {
|
|
|
+ formData.data[key] = res.data[key];
|
|
|
+ }
|
|
|
+ formDom2.value.formDataListShowLabelOne();
|
|
|
+ handleChangeAmount();
|
|
|
+ if (!formData.data.countryCityName) {
|
|
|
+ if (formData.data.buyCountryId) {
|
|
|
+ let countryCityName = "";
|
|
|
+ formData.data.countryCity = formData.data.buyCountryId;
|
|
|
+ proxy.post("/customizeArea/list", { parentId: "0" }).then((res) => {
|
|
|
+ let list = res.data.filter((item) => item.id == formData.data.buyCountryId);
|
|
|
+ if (list && list.length > 0) {
|
|
|
+ countryCityName = list[0].name;
|
|
|
+ formData.data.countryCityName = countryCityName;
|
|
|
+ }
|
|
|
+ if (formData.data.buyProvinceId) {
|
|
|
+ formData.data.countryCity = formData.data.buyProvinceId;
|
|
|
+ proxy.post("/customizeArea/list", { parentId: formData.data.buyCountryId }).then((res) => {
|
|
|
+ let list = res.data.filter((item) => item.id == formData.data.buyProvinceId);
|
|
|
+ if (list && list.length > 0) {
|
|
|
+ countryCityName = countryCityName + " " + list[0].name;
|
|
|
+ formData.data.countryCityName = countryCityName;
|
|
|
+ }
|
|
|
+ if (formData.data.buyCityId) {
|
|
|
+ formData.data.countryCity = formData.data.buyCityId;
|
|
|
+ proxy.post("/customizeArea/list", { parentId: formData.data.buyProvinceId }).then((res) => {
|
|
|
+ let list = res.data.filter((item) => item.id == formData.data.buyCityId);
|
|
|
+ if (list && list.length > 0) {
|
|
|
+ countryCityName = countryCityName + " " + list[0].name;
|
|
|
+ formData.data.countryCityName = countryCityName;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+ <style lang="scss" scoped></style>
|
|
|
+
|
cz
