User Tools

Site Tools


Differences

This shows you the differences between two versions of the page.

Link to this comparison view

js:stock-sample [2018-11-21 14:54] (current)
ziggi created
Line 1: Line 1:
 +
 +<code javascript Stock.vue>​
 +<​template>​
 +
 +    <div id="​lorem"​ class="​grid-container">​
 +        <div class="​grid-x grid-margin-x align-center">​
 +            <div class="​cell medium-8">​
 +
 +                <​h5>​Stock</​h5>​
 +                <​table>​
 +                    <​thead>​
 +                        <tr>
 +                            <​th>#</​th>​
 +                            <​th>​pn</​th>​
 +                            <​th>​name</​th>​
 +                            <​th>​count</​th>​
 +                            <​th>​cost</​th>​
 +                            <​th>​to order</​th>​
 +                        </tr>
 +                    </​thead>​
 +                    <​tbody>​
 +                        <tr v-for="​(item,​ index) in list">​
 +                            <​td>​{{ index }}</​td>​
 +                            <​td>​{{ item.pn }}</​td>​
 +                            <​td>​{{ item.name }}</​td>​
 +                            <​td>​{{ item.count }}</​td>​
 +                            <​td>​{{ item.cost }}</​td>​
 +                            <​td><​a class="​button small" v-on:​click="​addOrder(item,​ index)">​to order</​a></​td>​
 +
 +                        </tr>
 +                    </​tbody>​
 +
 +                </​table>​
 +
 +
 +
 +                <​h5>​Order</​h5>​
 +
 +                <​table>​
 +                    <​thead>​
 +                        <tr>
 +                            <​th>#</​th>​
 +                            <​th>​pn</​th>​
 +                            <​th>​name</​th>​
 +                            <​th>​count</​th>​
 +                            <​th>​cost</​th>​
 +                            <​th>​sum</​th>​
 +                        </tr>
 +                    </​thead>​
 +                    <​tbody>​
 +                        <tr v-for="​(item,​ index) in order">​
 +                            <​td>​{{ index }}</​td>​
 +                            <​td>​{{ item.pn }}</​td>​
 +                            <​td>​{{ item.name }}</​td>​
 +                            <​td>​{{ item.count }}</​td>​
 +                            <​td>​{{ item.cost }}</​td>​
 +                            <​td>​{{ item.cost * item.count }}</​td>​
 +                        </tr>
 +                    </​tbody>​
 +
 +                </​table>​
 +                <​h5>​Total price: {{ sum }}</​h5>​
 +
 +
 +            </​div>​
 +        </​div>​
 +    </​div>​
 +</​template>​
 +
 +<script lang="​ts">​
 +
 +import { mapState, mapGetters, mapActions } from '​vuex'​
 +import foundation from '​./​foundation'​
 +
 +import { Vue, Component, Prop, Watch } from "​vue-property-decorator"​
 +
 +interface stockItem {
 +    id: number
 +    pn: string
 +    name: string
 +    count: number
 +    cost: number
 +}
 +
 +
 +@Component
 +export default class Stock extends Vue {
 +
 +    list : stockItem[] = []
 +    order : stockItem[] = []
 +    sum: number = 0
 +
 +    addStock(item : stockItem) {
 +        this.list.push(item)
 +    }
 +
 +    addOrder(stockItem : stockItem, index : number) {
 +
 +        if(this.list[index].count > 0) {
 +
 +            let orderItem = Object.assign({},​ stockItem)
 +            orderItem.count = 1
 +
 +            let i = this.order.findIndex((item : stockItem) => {
 +                return item.id === orderItem.id
 +            })
 +
 +            console.log(i)
 +
 +            if ( i >= 0) 
 +                this.order[i].count += 1
 +            else
 +                this.order.push(orderItem)
 +
 +            this.sum = 0
 +            this.order.forEach((item) => {
 +                this.sum += item.count * item.cost
 +            })
 +
 +            this.list[index].count -= 1
 +        }
 +    }
 +
 +    mounted() {
 +        this.addStock({
 +            id: 0,
 +            pn: "​SN189",​
 +            name: "​GoodsN",​
 +            count: 3,
 +            cost: 12
 +
 +        })
 +        this.addStock({
 +            id: 1,
 +            pn: "​SN832",​
 +            name: "​GoodsA",​
 +            count: 7,
 +            cost: 46
 +        })
 +
 +        this.addStock({
 +            id: 2,
 +            pn: "​SN652",​
 +            name: "​GoodsB",​
 +            count: 4,
 +            cost: 4
 +        })
 +    }
 +}
 +
 +</​script>​
 +</​code>​