|
@@ -9,8 +9,11 @@ import OrderDialog from "./order-dialog.vue";
|
|
|
import EditOrder from "./edit-order.vue";
|
|
|
import { useResponseHandle } from "/@/hooks";
|
|
|
import { useRouter } from "vue-router";
|
|
|
-import { isChinese, isIDentityCard, isEmoticon } from "/@/utils/validate";
|
|
|
-import { inv_type_list } from "./../status";
|
|
|
+
|
|
|
+import { inv_type_list } from "./../../status";
|
|
|
+import InvoiceTitle from "./invoice-title.vue";
|
|
|
+import { convertInvoiceTitle } from "./columns";
|
|
|
+import { ADD_EDIT_FORM_RULES } from "./../../config/configs";
|
|
|
|
|
|
enum FROM_TYPE {
|
|
|
order = "order",
|
|
@@ -23,7 +26,7 @@ const { push } = useRouter();
|
|
|
const modelRef = ref<InstanceType<typeof OrderDialog>>(null);
|
|
|
const editOrderRef = ref<InstanceType<typeof EditOrder>>(null);
|
|
|
const formRef = ref<InstanceType<typeof ElForm>>(null);
|
|
|
-const mapSequenceNoToInvfee = ref<Record<string, string>>({});
|
|
|
+const mapSequenceNoToInvfee = ref<Record<string, any>>({});
|
|
|
const responseHandle = useResponseHandle();
|
|
|
const loading = ref(false);
|
|
|
const orderList = ref([]);
|
|
@@ -41,72 +44,19 @@ const initform = {
|
|
|
};
|
|
|
|
|
|
const ruleForm = ref({ ...initform });
|
|
|
-const rules = reactive<FormRules>({
|
|
|
- companyNo: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请选择销售方公司抬头",
|
|
|
- trigger: "change"
|
|
|
- }
|
|
|
- ],
|
|
|
- buy_id: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请选择购买方公司抬头",
|
|
|
- trigger: "change"
|
|
|
- }
|
|
|
- ],
|
|
|
-
|
|
|
- invtype: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请选择发票类型",
|
|
|
- trigger: "change"
|
|
|
- }
|
|
|
- ],
|
|
|
+const rules = reactive<FormRules>({ ...ADD_EDIT_FORM_RULES });
|
|
|
|
|
|
- email: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请输入电子邮箱",
|
|
|
- trigger: "blur"
|
|
|
- }
|
|
|
- ],
|
|
|
- remark: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请输入申请备注",
|
|
|
- trigger: "blur"
|
|
|
- }
|
|
|
- ],
|
|
|
- id_number: [
|
|
|
- {
|
|
|
- validator(_, value) {
|
|
|
- return !value || isIDentityCard(value);
|
|
|
- },
|
|
|
- trigger: "blur",
|
|
|
- message: "身份证号格式不正确"
|
|
|
- }
|
|
|
- ],
|
|
|
- real_name: [
|
|
|
- {
|
|
|
- validator(_, value) {
|
|
|
- return !value || (isChinese(value) && !isEmoticon(value));
|
|
|
- },
|
|
|
- trigger: "blur",
|
|
|
- message: "真实姓名格式不正确"
|
|
|
- }
|
|
|
- ]
|
|
|
-});
|
|
|
-
|
|
|
-function handleShowEditModal(index, row: any) {
|
|
|
+function handleShowEditModal(_, row: any) {
|
|
|
editOrderRef.value.onDisplay({
|
|
|
row
|
|
|
});
|
|
|
}
|
|
|
|
|
|
-function handleEdit({ row, inv_fee }) {
|
|
|
- mapSequenceNoToInvfee.value[row.sequenceNo] = inv_fee;
|
|
|
+function handleEdit({ row, inv_fee, num }) {
|
|
|
+ mapSequenceNoToInvfee.value[row.sequenceNo] = {
|
|
|
+ inv_fee,
|
|
|
+ num
|
|
|
+ };
|
|
|
}
|
|
|
|
|
|
const handleDelete = (index: number) => {
|
|
@@ -115,17 +65,27 @@ const handleDelete = (index: number) => {
|
|
|
orderList.value.splice(index, 1);
|
|
|
};
|
|
|
|
|
|
+function generatorOrderArr() {
|
|
|
+ const keys = Object.keys(mapSequenceNoToInvfee.value);
|
|
|
+ const orderArr = keys.map(sequenceNo => {
|
|
|
+ const { inv_fee, num } = mapSequenceNoToInvfee.value[sequenceNo];
|
|
|
+
|
|
|
+ return {
|
|
|
+ sequenceNo,
|
|
|
+ inv_fee,
|
|
|
+ num
|
|
|
+ };
|
|
|
+ });
|
|
|
+
|
|
|
+ return { orderArr };
|
|
|
+}
|
|
|
+
|
|
|
function handleSave() {
|
|
|
formRef.value.validate(async isValid => {
|
|
|
if (!isValid) return;
|
|
|
-
|
|
|
const { code, message } = await httpAdd({
|
|
|
...ruleForm.value,
|
|
|
- orderArr: Object.keys(mapSequenceNoToInvfee.value).map(sequenceNo => ({
|
|
|
- sequenceNo,
|
|
|
- inv_fee: mapSequenceNoToInvfee.value[sequenceNo],
|
|
|
- num: "2"
|
|
|
- }))
|
|
|
+ ...generatorOrderArr()
|
|
|
});
|
|
|
|
|
|
responseHandle({
|
|
@@ -141,19 +101,31 @@ function menu_type_change() {
|
|
|
rules.email[0].required = invtype === "26" || invtype === "27";
|
|
|
}
|
|
|
|
|
|
-async function companyNo_change() {
|
|
|
- const { companyNo } = ruleForm.value;
|
|
|
- const { buy_id } = ruleForm.value;
|
|
|
- console.log(companyNo, buy_id);
|
|
|
-}
|
|
|
-
|
|
|
function handleAddOrder(list) {
|
|
|
orderList.value = list;
|
|
|
-
|
|
|
- list.forEach(({ sequenceNo, winv_fee }) => {
|
|
|
- mapSequenceNoToInvfee.value[sequenceNo] = winv_fee;
|
|
|
+ list.forEach(({ sequenceNo, winv_fee, goodNum }) => {
|
|
|
+ mapSequenceNoToInvfee.value[sequenceNo] = {
|
|
|
+ inv_fee: winv_fee,
|
|
|
+ num: goodNum
|
|
|
+ };
|
|
|
});
|
|
|
}
|
|
|
+
|
|
|
+//设置发票抬头详情
|
|
|
+const sellerInvoiceTitle = ref<Record<string, string>>({});
|
|
|
+const purchaserInvoiceTitle = ref<Record<string, string>>({});
|
|
|
+
|
|
|
+function handleInvoiceTitle(
|
|
|
+ _isSeller: boolean,
|
|
|
+ invoiceTitle: Record<string, string>
|
|
|
+) {
|
|
|
+ _isSeller
|
|
|
+ ? (sellerInvoiceTitle.value = convertInvoiceTitle(invoiceTitle))
|
|
|
+ : (purchaserInvoiceTitle.value = invoiceTitle);
|
|
|
+}
|
|
|
+
|
|
|
+const setSellerInvoiceTitle = handleInvoiceTitle.bind(null, true);
|
|
|
+const setPurchaserInvoiceTitle = handleInvoiceTitle.bind(null, false);
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
@@ -181,9 +153,11 @@ function handleAddOrder(list) {
|
|
|
placeholder="销售方公司抬头"
|
|
|
response-label-prop="company_name"
|
|
|
response-val-prop="companyNo"
|
|
|
- @itemChange="companyNo_change()"
|
|
|
- /> </el-form-item
|
|
|
- ></el-col>
|
|
|
+ @item-change="setSellerInvoiceTitle"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <InvoiceTitle :detail="sellerInvoiceTitle" />
|
|
|
+ </el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item
|
|
|
label="购买方公司抬头"
|
|
@@ -199,9 +173,11 @@ function handleAddOrder(list) {
|
|
|
request-prop="name"
|
|
|
response-label-prop="invoice_title"
|
|
|
response-val-prop="id"
|
|
|
- @itemChange="companyNo_change()"
|
|
|
- /> </el-form-item
|
|
|
- ></el-col>
|
|
|
+ @item-change="setPurchaserInvoiceTitle"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <InvoiceTitle :detail="purchaserInvoiceTitle" />
|
|
|
+ </el-col>
|
|
|
<el-col :span="6">
|
|
|
<el-form-item label-width="100px" label="发票类型" prop="invtype">
|
|
|
<el-select
|
|
@@ -223,7 +199,7 @@ function handleAddOrder(list) {
|
|
|
/></el-form-item>
|
|
|
</el-col>
|
|
|
|
|
|
- <el-col :span="6">
|
|
|
+ <!-- <el-col :span="6">
|
|
|
<el-form-item label-width="120px" label="真实姓名" prop="real_name">
|
|
|
<el-input v-model="ruleForm.real_name" placeholder="真实姓名" />
|
|
|
</el-form-item>
|
|
@@ -231,7 +207,7 @@ function handleAddOrder(list) {
|
|
|
<el-form-item label-width="120px" label="身份证号" prop="id_number">
|
|
|
<el-input v-model="ruleForm.id_number" placeholder="身份证号"
|
|
|
/></el-form-item>
|
|
|
- </el-col>
|
|
|
+ </el-col> -->
|
|
|
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="申请备注" prop="remark" label-width="135px">
|
|
@@ -245,7 +221,7 @@ function handleAddOrder(list) {
|
|
|
/> </el-form-item
|
|
|
></el-col>
|
|
|
<el-col :span="24" v-show="TYPE === 'order'">
|
|
|
- <el-table :data="orderList" stripe border style="width: 100%">
|
|
|
+ <el-table :data="orderList" stripe border>
|
|
|
<el-table-column
|
|
|
prop="sequenceNo"
|
|
|
label="销售订单编号"
|
|
@@ -269,7 +245,7 @@ function handleAddOrder(list) {
|
|
|
|
|
|
<el-table-column label="开票金额" width="110">
|
|
|
<template #="{ row }">{{
|
|
|
- mapSequenceNoToInvfee[row.sequenceNo]
|
|
|
+ mapSequenceNoToInvfee[row.sequenceNo].inv_fee
|
|
|
}}</template>
|
|
|
</el-table-column>
|
|
|
|
|
@@ -315,167 +291,3 @@ function handleAddOrder(list) {
|
|
|
<EditOrder ref="editOrderRef" @save-btn-click="handleEdit" />
|
|
|
</div>
|
|
|
</template>
|
|
|
-<style lang="scss" scoped>
|
|
|
-.addEditForm {
|
|
|
- .InvoiceTmpDiv {
|
|
|
- font-size: 12px;
|
|
|
- width: 100%;
|
|
|
- .title {
|
|
|
- font-size: 26px;
|
|
|
- color: #b16363;
|
|
|
- text-align: center;
|
|
|
- line-height: 56px;
|
|
|
- }
|
|
|
- .extra {
|
|
|
- color: #b15b16;
|
|
|
- padding: 0 0 6px 0;
|
|
|
- div {
|
|
|
- line-height: 18px;
|
|
|
- }
|
|
|
- .content {
|
|
|
- color: #181818;
|
|
|
- }
|
|
|
- }
|
|
|
- .height84 {
|
|
|
- [class*="el-col-"] {
|
|
|
- border-right: 1px solid #b16363;
|
|
|
- &:last-child {
|
|
|
- border-right: 0px;
|
|
|
- }
|
|
|
- }
|
|
|
- ul {
|
|
|
- padding: 15px 0;
|
|
|
- // border-right: 1px solid #b16363;
|
|
|
- li {
|
|
|
- height: 20px;
|
|
|
- line-height: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
- .el-col-15 {
|
|
|
- padding: 5px 10px;
|
|
|
- div {
|
|
|
- line-height: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
- .el-col-7 {
|
|
|
- padding: 5px 10px;
|
|
|
- line-height: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
- .row {
|
|
|
- border: 1px solid #b16363;
|
|
|
- border-bottom: none;
|
|
|
- color: #b15b16;
|
|
|
- &.con {
|
|
|
- padding: 5px 0;
|
|
|
- line-height: 22px;
|
|
|
- }
|
|
|
- .content {
|
|
|
- color: #181818;
|
|
|
- }
|
|
|
- .col_1 {
|
|
|
- width: 4.16%;
|
|
|
- }
|
|
|
- .col_2 {
|
|
|
- width: 8.33%;
|
|
|
- }
|
|
|
- .col_3 {
|
|
|
- width: 12.5%;
|
|
|
- }
|
|
|
- .col_5 {
|
|
|
- width: 20.83%;
|
|
|
- }
|
|
|
- .col_6 {
|
|
|
- width: 25%;
|
|
|
- }
|
|
|
- .col_7 {
|
|
|
- width: 29.16%;
|
|
|
- }
|
|
|
- .col_8 {
|
|
|
- width: 33.33%;
|
|
|
- }
|
|
|
- .col_14 {
|
|
|
- width: 58.33%;
|
|
|
- }
|
|
|
- .col_15 {
|
|
|
- width: 62.5%;
|
|
|
- }
|
|
|
- .col_17 {
|
|
|
- width: 70.83%;
|
|
|
- }
|
|
|
- .col_18 {
|
|
|
- width: 75%;
|
|
|
- }
|
|
|
- .col_24 {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .col_1,
|
|
|
- .col_2,
|
|
|
- .col_3,
|
|
|
- .col_4,
|
|
|
- .col_5,
|
|
|
- .col_6,
|
|
|
- .col_7,
|
|
|
- .col_8,
|
|
|
- .col_14,
|
|
|
- .col_15,
|
|
|
- .col_17,
|
|
|
- .col_18,
|
|
|
- .col_24 {
|
|
|
- display: inline-block;
|
|
|
- padding: 8px;
|
|
|
- box-sizing: border-box;
|
|
|
- vertical-align: middle;
|
|
|
- border-left: 1px solid #b16363;
|
|
|
- height: 100%;
|
|
|
- &.no-border {
|
|
|
- border-left: none;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .row-div {
|
|
|
- border: 1px solid #b16363;
|
|
|
- // padding:7px 0;
|
|
|
- border-bottom: 0px;
|
|
|
- [class*="el-col-"] {
|
|
|
- padding: 4px 0;
|
|
|
- line-height: 22px;
|
|
|
- border-right: 1px solid #b16363;
|
|
|
- &:last-child {
|
|
|
- border-right: 0px;
|
|
|
- }
|
|
|
- }
|
|
|
- .el-row {
|
|
|
- &:first-child {
|
|
|
- [class*="el-col-"] {
|
|
|
- padding-top: 8px;
|
|
|
- }
|
|
|
- }
|
|
|
- &:last-child {
|
|
|
- [class*="el-col-"] {
|
|
|
- padding-bottom: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .last-row {
|
|
|
- padding: 6px 0 0 0;
|
|
|
- .content {
|
|
|
- color: #181818;
|
|
|
- }
|
|
|
- color: #b15b16;
|
|
|
- border-top: 1px solid #b16363;
|
|
|
- }
|
|
|
- .label {
|
|
|
- width: 78px;
|
|
|
- display: inline-block;
|
|
|
- text-align-last: justify;
|
|
|
- text-align: justify;
|
|
|
- }
|
|
|
- .title-label {
|
|
|
- width: 52px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|