cssd-back/resources/js/vue/views/Pack/AddEdit.vue

<template>
	<v-form ref="form">
		<v-container grid-list-xs fluid>
			<material-card color="black" title="Add Label on Set ">
				<v-layout align-center justify-center wrap class="px-5 my-3">
					<v-flex xs12 sm6 md3>
						<v-text-field
							name="name"
							label="Name"
							color="black"
							v-model="formData.name"
							:rules="[rules.required, rules.counter]"
							class="pa-2"
						></v-text-field>
					</v-flex>
					<v-flex xs12 sm6 md3>
						<v-text-field
							name="sterilizerId"
							label="Sterilizer ID"
							color="black"
							v-model="formData.sterilizerId"
							class="pa-2"
						></v-text-field>
					</v-flex>
					<v-flex xs12 sm6 md3>
						<v-text-field
							name="cycle_number"
							label="Cycle Number"
							color="black"
							v-model="formData.cycle_number"
							class="pa-2"
						></v-text-field>
					</v-flex>
					<v-flex xs12 sm6 md3>
						<v-text-field
							name="lot_number"
							label="Lot Number"
							color="black"
							v-model="formData.cycle_number"
							class="pa-2"
						></v-text-field>
					</v-flex>
					<v-flex xs12 sm6 md3>
						<v-autocomplete
							multiple
							:items="items"
							item-text="name"
							v-model="formData.items"
							item-value="id"
							label="Select Package For Pack"
						></v-autocomplete>
					</v-flex>
					<v-flex xs12 sm6 md3>
						<v-text-field
							name="department"
							label="Department"
							color="black"
							v-model="formData.department"
							class="pa-2"
						></v-text-field>
					</v-flex>
					<v-flex xs12 sm6 md3>
						<v-menu
							lazy
							:close-on-content-click="true"
							transition="v-scale-transition"
							offset-y
							v-model="fromMenuSterile"
						>
							<v-text-field required slot="activator" label="Sterile Date" v-model="formData.sterile_date"></v-text-field>
							<v-date-picker
								color="pink"
								no-title
								v-model="formData.sterile_date"
								:date-format="date => new Date(date).toDateString()"
							></v-date-picker>
						</v-menu>
					</v-flex>
					<v-flex xs12 sm6 md3>
						<v-menu
							lazy
							:close-on-content-click="true"
							transition="v-scale-transition"
							offset-y
							v-model="fromMenuExpire"
						>
							<v-text-field required slot="activator" label="Expire Date" v-model="formData.expire_date"></v-text-field>
							<v-date-picker
								color="pink"
								no-title
								v-model="formData.expire_date"
								:date-format="date => new Date(date).toDateString()"
							></v-date-picker>
						</v-menu>
					</v-flex>
				</v-layout>
				<v-layout align-center justify-center wrap class="px-5 mb-3">
					<v-flex xs12 sm12 md12>
						<v-textarea color="black" v-model="formData.description" class="pa-2" name="address">
							<template v-slot:label>
								<div>Description</div>
							</template>
						</v-textarea>
					</v-flex>
				</v-layout>
				<v-layout row wrap justify-center align-center>
					<v-flex xs12 md2 sm2 class="text-md-center text-xs-center">
						<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="submitForm()">
							<v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
							<span class="white--text">SAVE</span>
						</v-btn>
					</v-flex>
					<v-flex xs12 md2 sm2 class="text-md-center text-sm-center text-xs-center">
						<router-link :to="{name: 'AllPack'}">
							<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
								<v-icon class="black--text">keyboard_arrow_left</v-icon>
								<span class="black--text">Back</span>
							</v-btn>
						</router-link>
					</v-flex>
				</v-layout>
			</material-card>
		</v-container>
	</v-form>
</template>

<script>
import { ApiService } from "@/services";
import { urls } from "@/config/urls";
import { mapMutations } from "vuex";
export default {
	data() {
		return {
			fromMenuSterile: false ,
			fromMenuExpire: false,
			formData: {
				name: "",
				result: "",
				description: "",
				items: []
			},
			items: [],
			rules: {
				required: value => !!value || "Required.",
				counter: value =>
					!value ||
					value.length == 0 ||
					value.length >= 5 ||
					"Min 5 characters"
			}
		};
	},
	created() {
		if (this.$route.params.pack) {
			this.load(this.$route.params.pack);
		}
		this.loadItems();
	},
	methods: {
		async load(id) {
			const result = await ApiService.get(urls.editPack(id));
			if (result.status == 200) {
				this.formData = result.data.data;
			}
		},
		async loadItems() {
			const result = await ApiService.get(urls.listAllPackage());
			if (result.status == 200) {
				this.items = result.data.data;
			}
		},
		async submitForm() {
			let result;
			if (this.$route.params.pack) {
				result = await ApiService.put(
					urls.updatePack(this.$route.params.pack),
					this.formData
				);
			} else {
				result = await ApiService.post(
					urls.storePack,
					this.formData
				);
			}

			if (result && result.status == 200) {
				this.$router.push({ name: "AllPack" });
			}
		}
	}
};
</script>
<style>
.v-btn--floating {
    padding: 0!important;
}
.theme--light.v-btn.v-btn--flat {
    color: rgba(0,0,0,.87)!important;
}
.v-btn--floating, .v-btn--icon:before {
    border-radius: 50%!important;
}
</style>