mirror of
https://github.com/frappe/books.git
synced 2025-02-04 21:18:32 +00:00
191 lines
11 KiB
Vue
191 lines
11 KiB
Vue
|
<template>
|
||
|
|
<div class="flex flex-col">
|
||
|
|
<PageHeader>
|
||
|
|
<a class="cursor-pointer font-semibold" slot="title" @click="$router.go(-1)">{{ _('Back') }}</a>
|
||
|
|
<template slot="actions">
|
||
|
|
<Button class="text-gray-900 text-xs">Customise</Button>
|
||
|
|
<Button v-if="doc._notInserted || doc._dirty" type="primary" class="text-white text-xs ml-2" @click="onSaveClick">{{ _('Save') }}</Button>
|
||
|
|
</template>
|
||
|
|
</PageHeader>
|
||
|
|
<div class="flex-1 ml-8 mb-8 mt-6" v-if="meta">
|
||
|
|
<div class="border rounded shadow h-full flex flex-col justify-between" style="width: 600px">
|
||
|
|
<div>
|
||
|
|
<div class="px-6 pt-6">
|
||
|
|
<div class="flex text-xs text-gray-600 border-b pb-4">
|
||
|
|
<div class="w-1/3">
|
||
|
|
<svg class="w-32" viewBox="0 0 120 24" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<g fill="#1F7AE0" fill-rule="nonzero">
|
||
|
|
<path
|
||
|
|
d="M6.032 18.953l-4.356-2.088a.401.401 0 01-.162-.582l2.181-3.2a.413.413 0 01.72.073l2.18 5.284c.071.157.032.34-.095.457a.407.407 0 01-.468.056zm14.967-.95V7.185a.404.404 0 00-.198-.344.412.412 0 00-.4-.012l-9.678 4.93a.4.4 0 00-.22.356v10.818a.404.404 0 00.198.344.412.412 0 00.4.012l9.681-4.93a.4.4 0 00.217-.356zm-2.832-4.176a4.924 4.924 0 01-2.423 4.023c-1.335.68-2.418-.017-2.417-1.559a4.924 4.924 0 012.423-4.024c1.335-.68 2.417.02 2.417 1.56zm-8.06-3.505L19.7 5.46a.4.4 0 00-.008-.716L10.18.166a.416.416 0 00-.368 0L.22 5.03a.4.4 0 00.008.716l9.514 4.576c.115.056.25.056.365 0v.001zm-.03-7.407l4.054 1.95a.4.4 0 01.007.716l-3.932 1.993a.419.419 0 01-.37 0l-4.052-1.95a.4.4 0 01-.007-.715l3.931-1.994a.418.418 0 01.37 0zM32.663 18.123a6.095 6.095 0 01-3.44-1.057c-.159-.113-.294-.315-.181-.54l.475-.968c.113-.225.407-.293.679-.135.611.337 1.358.765 2.603.765.882 0 1.38-.428 1.38-1.013 0-.697-.792-1.147-2.24-1.8-1.607-.72-2.83-1.575-2.83-3.285 0-1.306.929-2.836 3.463-2.836 1.449 0 2.535.428 3.056.765.249.18.362.495.226.765l-.362.72c-.159.315-.475.293-.68.203-.723-.315-1.425-.518-2.24-.518-.905 0-1.335.45-1.335.923 0 .675.747 1.08 1.788 1.53 1.924.81 3.372 1.508 3.372 3.443 0 1.62-1.403 3.038-3.734 3.038zm6.133-.742V7.974c0-.247.226-.495.498-.495h.52c.25 0 .385.113.453.315l.294.9a4.461 4.461 0 013.327-1.44c1.517 0 2.422.585 3.192 1.643.294-.293 1.538-1.643 3.53-1.643 3.191 0 3.983 2.205 3.983 4.906v5.22c0 .27-.203.496-.498.496h-1.267c-.317 0-.498-.225-.498-.495V12.07c0-1.665-.634-2.678-2.06-2.678-1.584 0-2.33 1.058-2.512 1.215.046.225.091.855.091 1.395v5.379c0 .27-.226.495-.475.495h-1.29a.487.487 0 01-.498-.495V12.07c0-1.688-.611-2.678-2.06-2.678-1.561 0-2.353 1.148-2.467 1.508v6.48c0 .27-.249.496-.498.496h-1.267a.5.5 0 01-.498-.495zm18.06-2.723c0-1.913 1.494-3.353 4.187-3.353 1.087 0 2.105.315 2.105.315.046-1.643-.362-2.386-1.675-2.386-1.199 0-2.376.338-2.919.495-.317.068-.52-.135-.588-.427l-.204-.855c-.068-.36.09-.518.34-.608.18-.067 1.674-.585 3.598-.585 3.35 0 3.666 2.003 3.666 4.59v5.537c0 .27-.249.495-.498.495h-.747c-.203 0-.316-.09-.43-.36l-.249-.698c-.565.54-1.606 1.305-3.213 1.305-1.97 0-3.372-1.305-3.372-3.465zm2.218-.023c0 .923.544 1.643 1.63 1.643 1.041 0 2.105-.743 2.422-1.26v-1.733c-.136-.09-.95-.36-1.901-.36-1.223 0-2.15.63-2.15 1.71zm9.438 2.746V4.618c0-.247.226-.495.498-.495h1.267c.25 0 .498.248.498.495v12.763c0 .27-.249.495-.498.495H69.01a.5.5 0 01-.498-.495zm5.568 0V4.618c0-.247.226-.495.497-.495h1.268c.249 0 .498.248.498.495v12.763c0 .27-.25.495-.498.495h-1.268a.5.5 0 01-.497-.495zm4.843-4.681c0-3.06 2.467-5.446 5.364-5.446 1.63 0 2.829.608 3.802 1.8.203.248.136.54-.09.743l-.815.743c-.295.27-.498.067-.68-.113-.475-.517-1.312-1.035-2.15-1.035-1.787 0-3.168 1.44-3.168 3.285 0 1.868 1.358 3.308 3.1 3.308 1.359 0 1.902-.765 2.468-1.282.226-.225.475-.225.701-.045l.702.562c.249.225.362.473.18.743-.86 1.283-2.262 2.16-4.073 2.16-2.92 0-5.341-2.295-5.341-5.423zm10.999 1.958c0-1.913 1.494-3.353 4.187-3.353 1.086 0 2.105.315 2.105.315.045-1.643-.362-2.386-1.675-2.386-1.2 0-2.376.338-2.92.495-.316.068-.52-.135-.588-.427l-.204-.855c-.068-.36.09-.518.34-.608.18-.067 1.675-.585 3.598-.585 3.35 0 3.667 2.003 3.667 4.59v5.537c0 .27-.25.495-.498.495h-.747c-.204 0-.317-.09-.43-.36l-.25-.698c-.565.54-1.606 1.305-3.213 1.305-1.969 0-3.372-1.305-3.372-3.465zm2.218-.023c0 .923.543 1.643 1.63 1.643 1.04 0 2.104-.743 2.421-1.26v-1.733c-.136-.09-.95-.36-1.901-.36-1.222 0-2.15.63-2.15 1.71zm12.38 3.488a6.095 6.095 0 01-3.44-1.057c-.159-.113-.295-.315-.181-.54l.475-.968c.113-.225.407-.293.679-.135.61.337 1.358.765 2.602.765.883 0 1.381-.428 1.381-1.013 0-.697-.792-1.147-2.24-1.8-1.607-.72-2.83-1.575-2.83-3.285 0-1.306.928-2.836 3.463-2.836 1.449 0 2.535.428 3.055.765.25.18.363.495.227.765l-.362.72c-.159.315-.476.293-.68.203-.724-.315-1.425-.518-2.24-.518-.905 0-1.335.45-1.335.923 0 .675.747 1.08 1.788 1.53 1.924.81 3.372 1.508 3.372 3.443 0 1.62-1.403 3.038-3.734 3.038zm5.5-5.446c0-2.925 2.059-5.423 5.205-5.423 2.715 0 4.775 2.003 4.775 4.77 0 .18-.023.54-.045.72a.487.487 0 01-.476.451h-7.22c.023 1.395 1.29 2.835
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="w-1/3">
|
||
|
|
<div>adickens@gmail.com</div>
|
||
|
|
<div>02002 5798368</div>
|
||
|
|
</div>
|
||
|
|
<div class="w-1/3">
|
||
|
|
<div>9086 Jerde Street, Port Coralie, AR 89317-0033</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mt-8 px-6">
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<div class="w-1/3">
|
||
|
|
<h1 class="text-2xl font-semibold">Invoice</h1>
|
||
|
|
<FormControl
|
||
|
|
class="mt-2"
|
||
|
|
:df="meta.getField('date')"
|
||
|
|
:value="doc.date"
|
||
|
|
:placeholder="'Date'"
|
||
|
|
@change="value => doc.set('date', value)"
|
||
|
|
input-class="bg-gray-100 rounded-lg px-3 py-2 text-sm"
|
||
|
|
/>
|
||
|
|
<FormControl
|
||
|
|
class="mt-2"
|
||
|
|
:df="meta.getField('account')"
|
||
|
|
:value="doc.account"
|
||
|
|
:placeholder="'Account'"
|
||
|
|
@change="value => doc.set('account', value)"
|
||
|
|
input-class="bg-gray-100 rounded-lg px-3 py-2 text-sm"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="w-1/3">
|
||
|
|
<FormControl
|
||
|
|
:df="meta.getField('customer')"
|
||
|
|
:value="doc.customer"
|
||
|
|
:placeholder="'Customer'"
|
||
|
|
@change="value => doc.set('customer', value)"
|
||
|
|
@new-doc="doc => doc.set('customer', doc.name)"
|
||
|
|
input-class="bg-gray-100 rounded-lg p-2 text-right"
|
||
|
|
/>
|
||
|
|
<div
|
||
|
|
class="mt-1 text-xs text-gray-600 text-right"
|
||
|
|
>9115 Francesco Valley, Port Christophe, NH 96860-1674</div>
|
||
|
|
<div class="mt-1 text-xs text-gray-600 text-right">GSTIN: 27MHCQ04111A2Z5</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="px-6">
|
||
|
|
<ListRow class="text-sm text-gray-600" :ratio="itemTableColumnRatio">
|
||
|
|
<div class="py-4 ml-2 text-center">
|
||
|
|
No
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="py-4 ml-5"
|
||
|
|
:class="['Float', 'Currency'].includes(df.fieldtype) ? 'text-right' : ''"
|
||
|
|
v-for="df in itemTableFields"
|
||
|
|
:key="df.fieldname"
|
||
|
|
>{{ df.label }}</div>
|
||
|
|
</ListRow>
|
||
|
|
<ListRow
|
||
|
|
class="text-sm"
|
||
|
|
:ratio="itemTableColumnRatio"
|
||
|
|
v-for="row in doc.items"
|
||
|
|
:key="row.idx"
|
||
|
|
>
|
||
|
|
<div class="py-4 ml-2 text-gray-700 text-center">
|
||
|
|
{{ row.idx + 1 }}
|
||
|
|
</div>
|
||
|
|
<div class="py-4 ml-5" v-for="df in itemTableFields" :key="df.fieldname">
|
||
|
|
<FormControl
|
||
|
|
:df="df"
|
||
|
|
:value="row[df.fieldname]"
|
||
|
|
:input-class="'text-gray-900 ' + (['Float', 'Currency'].includes(df.fieldtype) ? 'text-right' : '')"
|
||
|
|
@change="value => row.set(df.fieldname, value)"
|
||
|
|
@new-doc="doc => row.set(df.fieldname, doc.name)"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</ListRow>
|
||
|
|
<ListRow :ratio="itemTableColumnRatio" class="py-4 text-sm text-gray-500 cursor-pointer border-transparent">
|
||
|
|
<div class="ml-2 flex items-center">
|
||
|
|
<AddIcon class="w-4 h-4 text-gray-500 stroke-current" />
|
||
|
|
</div>
|
||
|
|
<div class="ml-5" @click="addNewItem">Add Row</div>
|
||
|
|
</ListRow>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="px-6 mb-6 flex justify-end text-sm">
|
||
|
|
<div class="w-64">
|
||
|
|
<div class="flex pl-2 justify-between py-3 border-b">
|
||
|
|
<div>Subtotal</div>
|
||
|
|
<div>{{ doc.netTotal }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex pl-2 justify-between py-3" v-for="tax in doc.taxes" :key="tax.name">
|
||
|
|
<div>{{ tax.account }} ({{ tax.rate }}%)</div>
|
||
|
|
<div>{{ tax.amount }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex pl-2 justify-between py-3 border-t text-green-600 font-semibold text-base">
|
||
|
|
<div>Grand Total</div>
|
||
|
|
<div>{{ doc.grandTotal }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import PageHeader from '@/components/PageHeader';
|
||
|
|
import Button from '@/components/Button';
|
||
|
|
import FormControl from '@/components/Controls/FormControl';
|
||
|
|
import ListRow from '@/pages/ListView/ListRow';
|
||
|
|
import AddIcon from '@/components/Icons/Add';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'InvoiceForm',
|
||
|
|
props: ['name'],
|
||
|
|
components: {
|
||
|
|
PageHeader,
|
||
|
|
Button,
|
||
|
|
FormControl,
|
||
|
|
ListRow,
|
||
|
|
AddIcon
|
||
|
|
},
|
||
|
|
provide() {
|
||
|
|
return {
|
||
|
|
doctype: 'SalesInvoice',
|
||
|
|
name: this.name
|
||
|
|
};
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
meta: null,
|
||
|
|
itemsMeta: null,
|
||
|
|
doc: {}
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
itemTableFields() {
|
||
|
|
return this.itemsMeta.fieldsInForm.map(fieldname =>
|
||
|
|
this.itemsMeta.getField(fieldname)
|
||
|
|
);
|
||
|
|
},
|
||
|
|
itemTableColumnRatio() {
|
||
|
|
return [0.3].concat(this.itemTableFields.map(_ => 1));
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async mounted() {
|
||
|
|
this.meta = frappe.getMeta('SalesInvoice');
|
||
|
|
this.itemsMeta = frappe.getMeta('SalesInvoiceItem');
|
||
|
|
this.doc = await frappe.getDoc('SalesInvoice', this.name);
|
||
|
|
window.si = this.doc;
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
async addNewItem() {
|
||
|
|
this.doc.append('items');
|
||
|
|
},
|
||
|
|
async onSaveClick() {
|
||
|
|
await this.doc.set('items', this.doc.items.filter(row => row.item));
|
||
|
|
|
||
|
|
if (this.doc.isNew()) {
|
||
|
|
this.doc.insert();
|
||
|
|
} else {
|
||
|
|
this.doc.update();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|