Create.vue

<template>
    <!--Completed Container-->
    <div class="card mb-5 mb-5">
        <div class="card-body pt-9 pb-0">
            <div class="d-flex flex-wrap flex-sm-nowrap px-20 py-2 pb-6">
                <div class="flex-grow-1">
                    <div class="row">
                        <div class="col-10 d-flex flex-column align-items-start justify-content-start">
                            <div class="d-flex align-items-center mb-2 d-flex justify-content-between align-items-center">
                                <span class="text-gray-800 fs-2 fw-bolder me-1">
                                    <span>
                                        <span class="svg-icon svg-icon-success svg-icon-4x">
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                    <rect x="0" y="0" width="24" height="24"/>
                                                    <circle fill="#000000" opacity="0.3" cx="12" cy="12" r="10"/>
                                                    <path d="M16.7689447,7.81768175 C17.1457787,7.41393107 17.7785676,7.39211077 18.1823183,7.76894473 C18.5860689,8.1457787 18.6078892,8.77856757 18.2310553,9.18231825 L11.2310553,16.6823183 C10.8654446,17.0740439 10.2560456,17.107974 9.84920863,16.7592566 L6.34920863,13.7592566 C5.92988278,13.3998345 5.88132125,12.7685345 6.2407434,12.3492086 C6.60016555,11.9298828 7.23146553,11.8813212 7.65079137,12.2407434 L10.4229928,14.616916 L16.7689447,7.81768175 Z" fill="#000000" fill-rule="nonzero"/>
                                                </g>
                                            </svg>
                                        </span>
                                        Which ShipTroy warehouse are you shipping to? </span>
                                    <span>[Step 1-6]</span>
                                </span>
                            </div>
                        </div>
                        <div class="col-2">
                            <button type="button" class="btn btn-primary btn-lg w-100">Edit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Completed Container-->
    <!--Select Warehouse-->
    <div class="card mb-5 mb-5">
        <div class="card-body pt-9 pb-0">
            <div class="d-flex flex-wrap flex-sm-nowrap px-20 py-2 pb-10">
                <div class="flex-grow-1">
                    <div class="row">
                        <div class="col-8 d-flex flex-column align-items-start justify-content-start">
                            <div class="d-flex align-items-center mb-2 d-flex justify-content-between align-items-center">
                                <span class="text-gray-800 fs-2 fw-bolder me-1">
                                    <span>Which ShipTroy warehouse are you shipping to? </span>
                                    <span>[Step 1-6]</span>
                                </span>
                            </div>

                            <label class="required fw-bold mb-2">Sending To:</label>

                            <el-select v-model="warehouse" style="width:100%">
                                <el-option value="w1">Warehouse 1</el-option>
                                <el-option value="w2">Warehouse 2</el-option> 
                            </el-select>

                            <div class="alert alert-custom alert-secondary my-4 w-100  d-flex align-items-center" role="alert">
                                <div class="alert-icon">
                                    <inline-svg class="m-2" src="media/icons/duotune/general/gen019.svg" />
                                </div>
                                <div class="alert-text"><strong>Tip!</strong> Don’t know where to send your inventory? Choose the warehouse closest to you or your customers.</div>
                            </div> 

                            <div class="d-flex">
                                <button type="button" class="btn btn-primary btn-lg">Save & Continue</button>
                                <button type="button" class="btn btn-link mx-10">Cancel</button>
                            </div>

                        </div>
                        <div class="col-4">

                            <div class="card bg-light-primary flex-row-fluid overflow-hidden">
                                    <!--begin::Background-->
                                    <div class="position-absolute top-0 end-0 opacity-10 pe-none text-end">
                                        <img src="media/icons/duotune/ecommerce/ecm001.svg" class="w-175px">
                                    </div>
                                    <!--end::Background-->
                                    <!--begin::Card header-->
                                    <div class="card-header">
                                        <div class="card-title">
                                            <h2>Heads Up!</h2>
                                        </div>
                                    </div>
                                    <!--end::Card header-->
                                    <!--begin::Card body-->
                                    <div class="card-body pt-0">
                                        Each receiving order costs $25 to securely unload and store your items in bar-coded locations. For receiving orders that take longer than 2 hours, it will cost $40 per additional man-hour.
                                        <br><br>To learn more about Receiving Order costs,<a href=""> click here.</a>

                                    </div>
                                    <!--end::Card body-->
                                </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Select Warehouse-->
    <!--Select Product-->
    <div class="card mb-5 mb-5">
        <div class="card-body pt-9 pb-0">
            <div class="d-flex flex-wrap flex-sm-nowrap px-20 py-2 pb-10">
                <div class="flex-grow-1">
                    <div class="row">
                        <div class="col-8 d-flex flex-column align-items-start justify-content-start">
                            <div class="d-flex align-items-center mb-2 d-flex justify-content-between align-items-center">
                                <span class="text-gray-800 fs-2 fw-bolder me-1">
                                    <span>Search for item(s) you’re sending to ShipBob</span>
                                    <span>[Step 2-6]</span>
                                </span>
                            </div>

                            <label class="required fw-bold mb-2">Sending To:</label>

                            <Field
                                type="text"
                                class="form-control form-control-solid"
                                placeholder="Search by item name or Inventory ID"
                                name="product_name" 
                                value="Test"
                            />
 

                            <div class="d-flex">
                                <button type="button" class="btn btn-primary btn-lg">Save & Continue</button>
                                <button type="button" class="btn btn-link mx-10">Cancel</button>
                            </div>

                        </div>
                        <div class="col-4">

                            <div class="card bg-light-primary flex-row-fluid overflow-hidden">
                                    <!--begin::Background-->
                                    <div class="position-absolute top-0 end-0 opacity-10 pe-none text-end">
                                        <img src="media/icons/duotune/ecommerce/ecm001.svg" class="w-175px">
                                    </div>
                                    <!--end::Background-->
                                    <!--begin::Card header-->
                                    <div class="card-header">
                                        <div class="card-title">
                                            <h2>Heads Up!</h2>
                                        </div>
                                    </div>
                                    <!--end::Card header-->
                                    <!--begin::Card body-->
                                    <div class="card-body pt-0">
                                        Each receiving order costs $25 to securely unload and store your items in bar-coded locations. For receiving orders that take longer than 2 hours, it will cost $40 per additional man-hour.
                                        <br><br>To learn more about Receiving Order costs,<a href=""> click here.</a>

                                    </div>
                                    <!--end::Card body-->
                                </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Select Product-->
</template>

<script>
import {onMounted, ref} from "vue";
import {setCurrentPageBreadcrumbs, setCurrentPageTitle} from "../../core/helpers/breadcrumb";
export default {
  name: "OrderCreate", 
  setup(){
    onMounted(() => {
      setCurrentPageTitle("Order");
      setCurrentPageBreadcrumbs('Order Create',['Order']) 
    });

    const cargoCompany = ref('');

    return {
      cargoCompany,
      warehouse : 'w1',
    }
  }
}
</script>

<style scoped>

</style>