Alessandro Francia
101 lines
4.4 KiB
Vue
101 lines
4.4 KiB
Vue
<template>
|
|
<modal type="modal-load-program" :title="'modal_load_program_lbl_title_window' | localize('Selezione programma')">
|
|
<button class="close" slot="header-buttons" @click="close()"><i class="fa fa-remove"></i></button>
|
|
<div class="modal-load-program-header">
|
|
<!-- <div class="title">
|
|
<i class="fa fa-chevron-left"></i>
|
|
Selezione programma da aggiungere in coda
|
|
</div> -->
|
|
<div class="box-search">
|
|
<div class="path">
|
|
<div class="root">PC</div>
|
|
<div v-if="true"><i class="fa fa-chevron-right"></i></div>
|
|
<div class="child">Cliente A</div>
|
|
<div v-if="true"><i class="fa fa-chevron-right"></i></div>
|
|
<div class="child">Part Program 01</div>
|
|
</div>
|
|
<div class="search">
|
|
<input type="text" />
|
|
<button class="btn"><i class="fa fa-search"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-load-program-body">
|
|
<div class="first-column">
|
|
<card-folder-path @click="selectElementSecond()"></card-folder-path>
|
|
<card-folder-path name="CN"></card-folder-path>
|
|
</div>
|
|
<div class="second-column" v-if="enableSecondColumn">
|
|
<div class="content scrollable">
|
|
<card-folder-path name="Cliente A" @click="selectElementThird()"></card-folder-path>
|
|
</div>
|
|
</div>
|
|
<div class="third-column" v-if="enableThirdColumn">
|
|
<div class="content scrollable">
|
|
<card-folder-path name="Cliente A" @click="selectItem()" :with-arrow="false"></card-folder-path>
|
|
</div>
|
|
</div>
|
|
<div class="selected-item" v-if="enableSelectedItem">
|
|
<div class="selected-item-header">
|
|
<label class="selected-item-title">Job 1</label>
|
|
<div class="group-button">
|
|
<button class="btn"><i class="fa fa-clone"></i></button>
|
|
<button class="btn"><i class="fa fa-pencil-square-o"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="selected-item-body">
|
|
<div class="selected-item-body-image">
|
|
<img src="">
|
|
</div>
|
|
<div class="selected-item-body-description">
|
|
<label class="title">Descrizione</label>
|
|
<label class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-load-program-footer">
|
|
<button class="btn">Aggiungi in coda</button>
|
|
</div>
|
|
</modal>
|
|
</template>
|
|
<script>
|
|
import Modal from "src/modules/base-components/modal.vue";
|
|
// import { ModalHelper } from "../modules/base-components/ModalHelper.ts";
|
|
// import { Factory, MessageService } from '../_base';
|
|
// import { MaintenanceService } from "../services/maintenanceService";
|
|
// import { store } from "src/store";
|
|
// import { maintenanceActions } from "../store/maintenance.store";
|
|
// import moment from "moment";
|
|
import cardFolderPath from "./cards/card-folder-path.vue";
|
|
import cardElementQueue from "./cards/card-element-queue.vue";
|
|
export default {
|
|
components:{
|
|
modal: Modal,cardFolderPath, cardElementQueue
|
|
},
|
|
data: function (){
|
|
return {
|
|
enableSecondColumn: false,
|
|
selectedFolder: null,
|
|
enableThirdColumn: false,
|
|
enableSelectedItem: false
|
|
|
|
}
|
|
},
|
|
methods:{
|
|
selectElementSecond(){
|
|
this.enableSecondColumn = true;
|
|
this.selectedFolder = {};
|
|
},
|
|
selectElementThird(){
|
|
this.enableThirdColumn = true;
|
|
this.selectedFolder = {};
|
|
},
|
|
selectItem(){
|
|
this.enableSelectedItem = true;
|
|
this.selectedFolder = {};
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<!--<script src="./create-maintenance.ts" lang="ts"></script>--> |