You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

преди 6 години
преди 6 години
преди 6 години
преди 6 години
преди 6 години
преди 6 години
преди 6 години
преди 6 години
преди 6 години
преди 6 години
преди 7 месеца
преди 5 години
преди 3 години
преди 5 години
преди 7 месеца
преди 7 месеца
преди 7 месеца
преди 3 години
преди 7 месеца
преди 6 години
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817
  1. <?php
  2. /**
  3. Copyright Souke (2018)
  4. contact@souke.fr
  5. Ce logiciel est un programme informatique servant à aider les producteurs
  6. à distribuer leur production en circuits courts.
  7. Ce logiciel est régi par la licence CeCILL soumise au droit français et
  8. respectant les principes de diffusion des logiciels libres. Vous pouvez
  9. utiliser, modifier et/ou redistribuer ce programme sous les conditions
  10. de la licence CeCILL telle que diffusée par le CEA, le CNRS et l'INRIA
  11. sur le site "http://www.cecill.info".
  12. En contrepartie de l'accessibilité au code source et des droits de copie,
  13. de modification et de redistribution accordés par cette licence, il n'est
  14. offert aux utilisateurs qu'une garantie limitée. Pour les mêmes raisons,
  15. seule une responsabilité restreinte pèse sur l'auteur du programme, le
  16. titulaire des de la licence CeCILL telle que diffusée par le CEA, le CNRS et l'INRIA
  17. droits patrimoniaux et les concédants successifs.
  18. A cet égard l'attention de l'utilisateur est attirée sur les risques
  19. associés au chargement, à l'utilisation, à la modification et/ou au
  20. développement et à la reproduction du logiciel par l'utilisateur étant
  21. donné sa spécificité de logiciel libre, qui peut le rendre complexe à
  22. manipuler et qui le réserve donc à des développeurs et des professionnels
  23. avertis possédant des connaissances informatiques approfondies. Les
  24. utilisateurs sont donc invités à charger et tester l'adéquation du
  25. logiciel à leurs besoins dans des conditions permettant d'assurer la
  26. sécurité de leurs systèmes et ou de leurs données et, plus généralement,
  27. à l'utiliser et l'exploiter dans les mêmes conditions de sécurité.
  28. Le fait que vous puissiez accéder à cet en-tête signifie que vous avez
  29. pris connaissance de la licence CeCILL, et que vous en avez accepté les
  30. termes.
  31. */
  32. $this->setTitle('Distributions') ;
  33. $this->setPageTitle('Distributions') ;
  34. ?>
  35. <?php if($orderUpdate):
  36. $orderUpdateDistributionTimestamp = strtotime($orderUpdate->distribution->date);
  37. ?>
  38. <script>
  39. window.vueValues = {
  40. date: new Date(<?= date('Y', $orderUpdateDistributionTimestamp) ?>, <?= date('m', $orderUpdateDistributionTimestamp) - 1 ?>, <?= date('d', $orderUpdateDistributionTimestamp) ?>),
  41. dateFormat: '<?= date('d/m/Y', $orderUpdateDistributionTimestamp) ?>',
  42. showModalFormOrderUpdate: true,
  43. idOrderUpdate: <?= $orderUpdate->id ?>
  44. };
  45. </script>
  46. <?php endif; ?>
  47. <div id="app-distribution-index" class="app-vuejs">
  48. <?php if(strlen($date)): ?>
  49. <span id="distribution-date"><?= $date; ?></span>
  50. <?php endif; ?>
  51. <div id="loading" v-if="showLoading">
  52. <img src="<?= Yii::$app->urlManagerBackend->getBaseUrl(); ?>/img/loader.gif" alt="Chargement ..." />
  53. </div>
  54. <div id="wrapper-app-distribution-index" :class="'wrapper-app-vuejs '+(loading ? '' : 'loaded')">
  55. <div class="col-md-4">
  56. <div id="calendar">
  57. <v-calendar
  58. is-inline
  59. is-expanded
  60. v-model="date"
  61. popover-visibility="hidden"
  62. color="green"
  63. :mode="calendar.mode"
  64. :formats="calendar.formats"
  65. :theme-styles="calendar.themeStyles"
  66. :attributes="calendar.attrs"
  67. @dayclick='dayClicked'>
  68. ></v-calendar>
  69. </div>
  70. <div class="clr"></div>
  71. </div>
  72. <div class="col-md-8">
  73. <div v-if="date">
  74. <div id="infos-top">
  75. <div class="col-md-12">
  76. <div class="info-box" id="info-box-distribution">
  77. <span :class="'info-box-icon '+(distribution.active ? 'bg-green' : 'bg-red')"><i :class="'fa '+(distribution.active ? 'fa-check' : 'fa-remove')"></i></span>
  78. <div class="info-box-content">
  79. <span class="info-box-text">
  80. <h4>
  81. Distribution du <strong>{{ dateFormat }}</strong>
  82. <a v-if="distribution.active" class="btn btn-default" :href="distribution.url_order" @click="copyLinkOrder($event, distribution.url_order)"><span class="glyphicon glyphicon-link"></span></a>
  83. <span v-if="distribution.is_leave_period" class="label label-info">
  84. <span class="glyphicon glyphicon-info-sign"></span>
  85. Congés
  86. </span>
  87. </h4>
  88. <a @click="activeWeekDistribution" data-active="0" class="btn btn-default btn-active-week" v-if="oneDistributionWeekActive">Désactiver cette semaine</a>
  89. <a @click="activeWeekDistribution" data-active="1" class="btn btn-default btn-active-week" v-else>Activer cette semaine</a>
  90. <a @click="activeDistribution" data-active="0" class="btn btn-default" v-if="distribution.active">Désactiver ce jour</a>
  91. <a @click="activeDistribution" data-active="1" class="btn btn-default" v-else>Activer ce jour</a>
  92. </span>
  93. </div>
  94. </div>
  95. </div>
  96. <!-- produits -->
  97. <div class="col-md-6">
  98. <div class="info-box col-md-4">
  99. <span class="info-box-icon bg-yellow"><i class="fa fa-clone"></i></span>
  100. <div class="info-box-content">
  101. <span class="info-box-text">
  102. {{ countActiveProducts }} Produits<br />
  103. <template v-if="isOneProductMaximumQuantityExceeded()"><span class="glyphicon glyphicon-alert"></span> Quantités max dépassées<br /></template>
  104. <br />
  105. <button class="btn btn-default" @click="showModalProducts = true">Configurer</button>
  106. </span>
  107. </div>
  108. </div>
  109. </div>
  110. <modal v-if="showModalProducts" id="modal-products" @close="showModalProducts = false">
  111. <h3 slot="header">Produits</h3>
  112. <div slot="body">
  113. <table class="table table-condensed table-bordered table-hover">
  114. <thead>
  115. <tr>
  116. <td>Actif</td>
  117. <td>Nom</td>
  118. <td class="quantity-ordered">Commandé</td>
  119. <td class="quantity-max">Maximum</td>
  120. </tr>
  121. </thead>
  122. <tbody>
  123. <tr v-for="product in products" v-if="getProductDistribution(product)">
  124. <td>
  125. <button class="btn btn-success" v-if="getProductDistribution(product).active == 1"><span class="glyphicon glyphicon-ok"></span></button>
  126. <button class="btn btn-default" v-else data-active-product="1" :data-id-product="product.id" @click="productActiveClick"><span class="glyphicon glyphicon-ok"></span></button>
  127. <button class="btn btn-danger" v-if="getProductDistribution(product).active == 0"><span class="glyphicon glyphicon-remove"></span></button>
  128. <button class="btn btn-default" v-else data-active-product="0" :data-id-product="product.id" @click="productActiveClick"><span class="glyphicon glyphicon-remove"></span></button>
  129. </td>
  130. <td>{{ product.name }}</td>
  131. <td class="quantity-ordered">
  132. <span v-if="isProductMaximumQuantityExceeded(product)" class="glyphicon glyphicon-alert"></span>
  133. {{ product.quantity_ordered ? product.quantity_ordered + ' '+ ((product.unit == 'piece') ? ' p.' : ' '+(product.unit == 'g' || product.unit == 'kg') ? 'kg' : 'litre(s)') : '&empty;' }}
  134. </td>
  135. <td class="quantity-max">
  136. <div class="input-group">
  137. <input type="text" class="form-control quantity-max" placeholder="&infin;" :data-id-product="product.id" v-model="getProductDistribution(product).quantity_max" @keyup="productQuantityMaxChange" />
  138. <span class="input-group-addon">{{ (product.unit == 'piece') ? 'p.' : ' '+((product.unit == 'g' || product.unit == 'kg') ? 'kg' : 'litre(s)') }}</span>
  139. </div>
  140. </td>
  141. </tr>
  142. </tbody>
  143. </table>
  144. </div>
  145. <div slot="footer">
  146. <div class="actions-form">
  147. <button class="modal-default-button btn btn-default" @click="closeModalProducts">Fermer</button>
  148. </div>
  149. </div>
  150. </modal>
  151. <div class="col-md-6">
  152. <div class="info-box col-md-4">
  153. <span class="info-box-icon bg-yellow"><i class="fa fa-map-marker"></i></span>
  154. <div class="info-box-content">
  155. <span class="info-box-text">
  156. {{ countActivePointsSale }} Points de vente<br /><br />
  157. <button class="btn btn-default" @click="showModalPointsSale = true">Configurer</button>
  158. </span>
  159. </div>
  160. </div>
  161. </div>
  162. <modal v-if="showModalPointsSale" id="modal-points-sale" @close="showModalPointsSale = false">
  163. <h3 slot="header">Points de vente</h3>
  164. <div slot="body">
  165. <table class="table table-condensed table-bordered table-hover">
  166. <thead>
  167. <tr>
  168. <td>Actif</td>
  169. <td>Nom</td>
  170. </tr>
  171. </thead>
  172. <tbody>
  173. <tr v-for="pointSale in pointsSale" v-if="pointSale.status == 1">
  174. <td>
  175. <button class="btn btn-success" v-if="pointSale.pointSaleDistribution[0].delivery == 1"><span class="glyphicon glyphicon-ok"></span></button>
  176. <button class="btn btn-default" v-else data-delivery-point-sale="1" :data-id-point-sale="pointSale.id" @click="pointSaleActiveClick"><span class="glyphicon glyphicon-ok"></span></button>
  177. <button class="btn btn-danger" v-if="pointSale.pointSaleDistribution[0].delivery == 0"><span class="glyphicon glyphicon-remove"></span></button>
  178. <button class="btn btn-default" v-else data-delivery-point-sale="0" :data-id-point-sale="pointSale.id" @click="pointSaleActiveClick"><span class="glyphicon glyphicon-remove"></span></button>
  179. </td>
  180. <td>{{ pointSale.name }}</td>
  181. </tr>
  182. </tbody>
  183. </table>
  184. </div>
  185. </modal>
  186. <div class="col-md-6">
  187. <div id="summary-ca-weight" class="info-box col-md-4">
  188. <span class="info-box-icon bg-yellow"><i class="fa fa-euro"></i></span>
  189. <div class="info-box-content">
  190. <span class="info-box-text">CA réel / potentiel (HT)</span>
  191. <span class="info-box-number">
  192. <span data-toggle="tooltip" data-placement="bottom" :data-original-title="distribution.revenues_with_tax+' TTC'">{{ distribution.revenues }}</span>
  193. <span class="normal" v-if="distribution.potential_revenues != '0,00 €'">/ <span data-toggle="tooltip" data-placement="bottom" :data-original-title="distribution.potential_revenues_with_tax+' TTC'">{{ distribution.potential_revenues }}</span></span>
  194. </span>
  195. <span class="info-box-text">Poids</span>
  196. <span class="info-box-number">{{ distribution.weight }} kg <span class="normal" v-if="distribution.potential_weight > 0">/ {{ distribution.potential_weight }} kg</span></span>
  197. </div>
  198. </div>
  199. </div>
  200. <div class="col-md-6">
  201. <div class="info-box col-md-4">
  202. <span class="info-box-icon bg-yellow"><i class="fa fa-download"></i></span>
  203. <div class="info-box-content">
  204. <span class="info-box-text">
  205. {{ countOrders }} Commande<span v-if="countOrders > 1">s</span><br />
  206. <template v-for="distributionExport in distribution.exports">
  207. <a v-if="countOrders > 0" :href="distributionExport.url" target="_blank" class="btn btn-xs btn-default">{{ distributionExport.label }}</a><br />
  208. </template>
  209. <!--<a :href="distribution.url_report+'&type=csv'" class="btn btn-xs btn-default" v-if="countOrders > 0">Tableau (CSV)</a>
  210. <a :href="distribution.url_report_csv2" class="btn btn-xs btn-default" v-if="countOrders > 0">Tableau 2 (CSV)</a>
  211. <br />
  212. <a :href="distribution.url_report_grid" class="btn btn-xs btn-default" v-if="producer && producer.option_distribution_export_orders_grid_pdf && countOrders > 0">Grille (PDF)</a>
  213. <a :href="distribution.url_export_shopping_cart_labels" class="btn btn-xs btn-default" v-if="countOrders > 0">Étiquettes (PDF)</a>
  214. <a :href="distribution.url_report_total_products" class="btn btn-xs btn-default" v-if="countOrders > 0">Total produits (CSV)</a>-->
  215. </span>
  216. </div>
  217. </div>
  218. </div>
  219. </div>
  220. </div>
  221. <div class="callout callout-info" v-else>
  222. <h4><i class="fa fa-info"></i> Pour commencer</h4>
  223. <p>Veuillez choisir une date de distribution.</p>
  224. </div>
  225. </div>
  226. <div class="clr"></div>
  227. <div id="orders" class="panel panel-default" v-if="date">
  228. <div class="panel-heading">
  229. <h3 class="panel-title">Commandes <label class="label label-success" v-if="orders.length">{{ orders.length }}</label><label class="label label-danger" v-else>0</label></h3>
  230. <div class="buttons">
  231. </div>
  232. </div>
  233. <div class="panel-body">
  234. <order-form
  235. v-if="showModalFormOrderCreate"
  236. create="1"
  237. :date="date"
  238. :distribution="distribution"
  239. :order="orderCreate"
  240. :points-sale="pointsSale"
  241. :id-active-point-sale="idActivePointSale"
  242. :means-payment="meansPayment"
  243. :users="users"
  244. :products="products"
  245. :producer="producer"
  246. :orders="ordersUpdate"
  247. :loading-update-product-order="loadingUpdateProductOrder"
  248. :units="units"
  249. @close="closeModalOrderForm(true)"
  250. @ordercreatedupdated="orderCreatedUpdated"
  251. @updateproductorderprices="updateProductOrderPrices"
  252. ></order-form>
  253. <div id="wrapper-nav-points-sale">
  254. <ul id="nav-points-sale">
  255. <li data-id-point-sale="0" data-id-point-sale="0" v-if="countActivePointsSale > 1" @click="pointSaleClick">
  256. <a class="btn btn-default btn-primary" v-if="idActivePointSale == 0">Tous <span class="label label-default">{{ orders.length }}</span> <span class="glyphicon glyphicon-triangle-bottom"></span></a>
  257. <a class="btn btn-default" v-else>Tous <span class="label label-default">{{ orders.length }}</span><span class="glyphicon glyphicon-triangle-bottom"></span></a>
  258. </li>
  259. <li v-for="pointSale in pointsSale" :data-id-point-sale="pointSale.id" v-if="pointSale.pointSaleDistribution[0].delivery == 1 && (pointSale.status == 1 || countOrdersByPointSale[pointSale.id] > 0)" @click="pointSaleClick">
  260. <a class="btn btn-default btn-primary" v-if="idActivePointSale == pointSale.id">{{ pointSale.name }} <span class="label label-default">{{ countOrdersByPointSale[pointSale.id] }}</span><span class="glyphicon glyphicon-triangle-bottom"></span></a>
  261. <a class="btn btn-default" v-else>{{ pointSale.name }} <span class="label label-default">{{ countOrdersByPointSale[pointSale.id] }}</span><span class="glyphicon glyphicon-triangle-bottom"></span></a>
  262. </li>
  263. </ul>
  264. <div class="clr"></div>
  265. </div>
  266. <div id="buttons-top-orders">
  267. <div class="right">
  268. <div class="dropdown">
  269. <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
  270. <span class="glyphicon glyphicon-file"></span> Documents
  271. <span class="caret"></span>
  272. </button>
  273. <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
  274. <li><a v-if="idActivePointSale > 0 && pointSaleActive.button_generate_delivery_note_point_sale == 1" @click="generateDeliveryNotePointSale" href="javascript:void(0);" >Générer un bon de livraison pour ce point de vente</a></li>
  275. <li><a v-if="idActivePointSale > 0 && pointSaleActive.button_generate_delivery_note_each_user == 1" @click="generateDeliveryNoteEachUser" href="javascript:void(0);">Générer un bon de livraison pour chaque client</a></li>
  276. <li><a @click="validateDeliveryNotes" href="javascript:void(0);">Valider les bons de livraisons</a></li>
  277. </ul>
  278. </div>
  279. <button id="btn-add-subscriptions" @click="addSubscriptions" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-plus"></span> Importer les abonnements</button>
  280. <template v-if="producer && producer.tiller == true">
  281. <template v-if="tillerIsAuthenticated">
  282. <button v-if="tillerIsSynchro" id="btn-tiller" class="btn btn-success btn-xs" disabled><span class="glyphicon glyphicon-refresh"></span> Synchronisé avec Tiller</button>
  283. <template v-else-if="!isDistributionToday()">
  284. <span data-toggle="tooltip" data-placement="top" data-original-title="Synchronisation possible uniquement le jour de la distribution">
  285. <button id="btn-tiller" class="btn btn-xs btn-default" disabled><span class="glyphicon glyphicon-refresh"></span> Synchroniser avec Tiller</button>
  286. </span>
  287. </template>
  288. <button v-else id="btn-tiller" class="btn btn-xs btn-default" @click="synchroTiller"><span class="glyphicon glyphicon-refresh"></span> Synchroniser avec Tiller</button>
  289. </template>
  290. <template v-else>
  291. <a :href="tillerUrlAuthorizeCode" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-refresh"></span> Connexion Tiller</a>
  292. </template>
  293. </template>
  294. <button v-if="producer && producer.credit" id="btn-pay-orders" class="btn btn-default btn-xs" @click="payOrders"><span class="glyphicon glyphicon-euro"></span> Débiter les commandes</button>
  295. <button id="btn-add-order" @click="openModalFormOrderCreate" class="btn btn-xs btn-primary"><span class="glyphicon glyphicon-plus"></span> Ajouter une commande</button>
  296. </div>
  297. <div class="left">
  298. <a v-if="false && deliveryNoteExist(idActivePointSale)" :href="UrlManager.getBaseUrl()+'delivery-note/update?id='+deliveryNotes[idActivePointSale].id" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-file"></span> Bon de livraison</a>
  299. </div>
  300. <div class="clr"></div>
  301. </div>
  302. <div class="alert alert-info" v-if="missingSubscriptions && missingSubscriptions.length > 0">
  303. <span class="glyphicon glyphicon-info-sign"></span>
  304. {{ missingSubscriptions.length }} abonnement<template v-if="missingSubscriptions.length > 1">s</template> manquant<template v-if="missingSubscriptions.length > 1">s</template> :
  305. <span v-for="(subscription, index) in missingSubscriptions">
  306. {{ subscription.username }}<template v-if="index != missingSubscriptions.length - 1">, </template><template v-else>.</template>
  307. </span>
  308. </div>
  309. <div class="alert alert-danger" v-if="distribution && !distribution.active && orders && orders.length > 0">
  310. Attention, ce jour de distribution n'est pas activé et vous avez quand même des commandes enregistrées.
  311. </div>
  312. <div v-if="idActivePointSale > 0 && (totalActivePointSale() > 0 || weightActivePointSale() > 0)" class="point-sale-totals">
  313. <div>
  314. <span class="title">Totaux</span>
  315. CA TTC : <strong>{{ totalActivePointSale() }} €</strong> / Poids : <strong>{{ weightActivePointSale() }} kg</strong>
  316. </div>
  317. <div v-if="producer.credit && pointSaleActive">
  318. <span class="title">Cagnotte</span>
  319. <template v-if="pointSaleActive.payment_method_credit && pointSaleActive.payment_method_credit == 1">
  320. <template v-if="pointSaleActive.credit_functioning == 'mandatory'">Obligatoire</template>
  321. <template v-else-if="pointSaleActive.credit_functioning == 'user'">Basé sur l'utilisateur</template>
  322. <template v-else-if="pointSaleActive.credit_functioning == 'optional'">Optionnel</template>
  323. </template>
  324. <template v-else>Désactivé</template>
  325. </div>
  326. </div>
  327. <table class="table table-condensed table-bordered table-hover" v-if="countOrdersByPointSale[idActivePointSale] > 0 || (idActivePointSale == 0 && orders.length > 0)">
  328. <thead>
  329. <tr>
  330. <th class="column-checkbox" v-if="idActivePointSale > 0">
  331. <input type="checkbox" v-model="checkboxSelectAllOrders" @change="selectAllOrdersEvent" />
  332. </th>
  333. <th class="column-origin">Origine</th>
  334. <th class="column-state">État</th>
  335. <th class="column-user">Utilisateur</th>
  336. <th class="column-point-sale" v-if="idActivePointSale == 0">Point de vente</th>
  337. <th class="column-amount">Montant</th>
  338. <th class="column-state-payment">Paiement</th>
  339. <th class="column-credit" v-if="!idActivePointSale || (pointSaleActive && pointSaleActive.payment_method_credit == 1)">Cagnotte</th>
  340. <th class="column-actions">Actions</th>
  341. <th class="column-tiller" v-if="producer && producer.tiller">Tiller</th>
  342. </tr>
  343. </thead>
  344. <tbody>
  345. <template v-for="(order, key, index) in orders" v-if="idActivePointSale == 0 || idActivePointSale == order.id_point_sale">
  346. <tr>
  347. <td class="column-checkbox" v-if="idActivePointSale > 0">
  348. <input type="checkbox" v-model="order.selected" />
  349. </td>
  350. <td class="column-origin">
  351. <label class="label label-success" v-if="order.origin == 'user'">client</label>
  352. <label class="label label-default" v-else-if="order.origin == 'auto'">auto</label>
  353. <label class="label label-warning" v-else>admin</label>
  354. </td>
  355. <td class="column-state">
  356. <span class="label label-danger" v-if="order.date_delete"><span class="glyphicon glyphicon-trash"></span></span>
  357. <span class="label label-warning" v-if="order.date_update"><span class="glyphicon glyphicon-pencil"></span></span>
  358. <span class="label label-success" v-if="!order.date_update && !order.date_delete"><span class="glyphicon glyphicon-check"></span></span>
  359. </td>
  360. <td class="column-user">
  361. <a v-if="order.user" :href="baseUrl+'/user/view?id='+order.id_user" target="_blank" :class="order.user.trust_alert ? 'user-trust-alert' : ''" :title="order.user.trust_alert ? order.user.trust_alert_comment : ''">
  362. <template v-if="order.user.name_legal_person && order.user.name_legal_person.length">
  363. {{ order.user.name_legal_person }}
  364. </template>
  365. <template v-else>
  366. {{ order.user.lastname+' '+order.user.name }}
  367. </template>
  368. <!--<span class="shortcuts btn-group" role="group">
  369. <a :class="order.user.credit_active ? 'btn btn-success btn-sm' : 'btn btn-default btn-sm'" :href="baseUrl+'/user/credit?id='+order.id_user" data-toggle="popover" data-trigger="hover" data-placement="bottom" :data-content="order.user.credit.toFixed(2)+' €'"><span class="glyphicon glyphicon-euro"></span></a>
  370. <a class="btn btn-default btn-sm" :href="baseUrl+'/user/update?id='+order.id_user" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-content="Modifier"><span class="glyphicon glyphicon-user"></span></a>
  371. <a class="btn btn-default btn-sm" :href="baseUrl+'/user/orders?id='+order.id_user" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-content="Voir les commandes"><span class="glyphicon glyphicon-eye-open"></span></a>
  372. </span>-->
  373. </a>
  374. <span v-else class="no-user">{{ order.username }}</span>
  375. <span v-if="order.comment && order.comment.length > 0" class="glyphicon glyphicon-comment"></span>
  376. <span v-if="order.delivery_home && order.delivery_address && order.delivery_address.length > 0" class="glyphicon glyphicon-home"></span>
  377. </td>
  378. <td class="column-point-sale" v-if="idActivePointSale == 0">
  379. <template v-if="order.pointSale">
  380. {{ order.pointSale.name }}
  381. </template>
  382. </td>
  383. <td class="column-amount">
  384. {{ order.amount.toFixed(2)+'&nbsp;€' }}
  385. <div class="state-payment-mobile">
  386. <order-state-payment :order="order" :producer="producer"></order-state-payment>
  387. </div>
  388. </td>
  389. <td class="column-state-payment">
  390. <template v-if="!order.date_delete">
  391. <a href="javascript:void(0);" @click="orderPaymentModalClick" :data-id-order="order.id">
  392. <order-state-payment :order="order" :producer="producer"></order-state-payment>
  393. </a>
  394. <span class="glyphicon glyphicon-time" title="Débit automatique de la cagnotte la veille de la distribution" v-if="order.amount != 0 && order.isCreditAutoPayment && (order.amount_paid == 0 || order.amount_paid < order.amount)"></span>
  395. </template>
  396. </td>
  397. <td class="column-credit" v-if="!idActivePointSale || (pointSaleActive && pointSaleActive.payment_method_credit == 1)">
  398. <template v-if="order.isCreditContext">
  399. <a :href="baseUrl+'/user/credit?id='+order.id_user" target="_blank" :class="order.user.credit >= 0 ? 'positive' : 'negative'">
  400. {{ order.user.credit.toFixed(2).replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,")+'&nbsp;€' }}
  401. </a>
  402. </template>
  403. </td>
  404. <td class="column-actions">
  405. <span v-if="false && order.oneProductUnactivated" class="glyphicon glyphicon-warning-sign" title="Contient un produit non activé"></span>
  406. <a href="javascript:void(0);" class="btn btn-default btn-xs" :data-id-order="order.id" @click="orderViewClick"><span :class="'glyphicon ' + ((showViewProduct && idOrderView == order.id) ? 'glyphicon-eye-close' : 'glyphicon-eye-open')"></span></a>
  407. <a href="javascript:void(0);" class="btn btn-default btn-xs" :data-id-order="order.id" @click="updateOrderClick"><span class="glyphicon glyphicon-pencil"></span></a>
  408. <div class="wrapper-button-dropdown">
  409. <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  410. € <span class="caret"></span>
  411. </button>
  412. <ul class="dropdown-menu">
  413. <template v-if="!order.isPaidViaInvoice">
  414. <li v-if="order.isCreditContext">
  415. <a href="javascript:void(0);" @click="orderPaymentClick" :data-id-order="order.id" :data-type="getTypePayment(order)" data-mean-payment="credit">
  416. <span class="glyphicon glyphicon-piggy-bank"></span> {{ getLabelPaymentRefund(order, 'Débiter', 'Recréditer', 'la cagnotte') }}
  417. </a>
  418. </li>
  419. <template v-if="(!order.isCreditFunctioningMandatory && !order.isCreditFunctioningUser) || !order.id_user">
  420. <li>
  421. <a href="javascript:void(0);" @click="orderPaymentClick" :data-id-order="order.id" :data-type="getTypePayment(order)" data-mean-payment="money">
  422. <span class="glyphicon glyphicon-euro"></span> {{ getLabelPaymentRefund(order, 'Payer', 'Rembourser', 'en espèce') }}
  423. </a>
  424. </li>
  425. <li>
  426. <a href="javascript:void(0);" @click="orderPaymentClick" :data-id-order="order.id" :data-type="getTypePayment(order)" data-mean-payment="cheque">
  427. <span class="glyphicon glyphicon-euro"></span> {{ getLabelPaymentRefund(order, 'Payer', 'Rembourser', 'par chèque') }}
  428. </a>
  429. </li>
  430. <li>
  431. <a href="javascript:void(0);" @click="orderPaymentClick" :data-id-order="order.id" :data-type="getTypePayment(order)" data-mean-payment="transfer">
  432. <span class="glyphicon glyphicon-euro"></span> {{ getLabelPaymentRefund(order, 'Payer', 'Rembourser', 'par virement') }}
  433. </a>
  434. </li>
  435. <li>
  436. <a href="javascript:void(0);" @click="orderPaymentClick" :data-id-order="order.id" :data-type="getTypePayment(order)" data-mean-payment="credit-card">
  437. <span class="glyphicon glyphicon-euro"></span> {{ getLabelPaymentRefund(order, 'Payer', 'Rembourser', 'par carte bancaire') }}
  438. </a>
  439. </li>
  440. </template>
  441. </template>
  442. <li>
  443. <a href="javascript:void(0);" @click="orderPaymentModalClick" :data-id-order="order.id">
  444. <span class="glyphicon glyphicon-th-list"></span> Historique
  445. </a>
  446. </li>
  447. </ul>
  448. </div>
  449. <div class="wrapper-button-dropdown">
  450. <button type="button" :class="'btn btn-xs dropdown-toggle ' + (countDocuments(order) ? 'btn-success' : 'btn-default')" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  451. <span class="glyphicon glyphicon-file"></span> <template v-if="countDocuments(order)">{{ countDocuments(order) }}</template> <span class="caret"></span>
  452. </button>
  453. <ul class="dropdown-menu">
  454. <li v-if="!order.id_delivery_note">
  455. <a href="javascript:void(0);" :data-id-order="order.id" @click="generateDeliveryNote">
  456. <span class="glyphicon glyphicon-plus"></span> Générer un bon de livraison
  457. </a>
  458. </li>
  459. <li v-if="order.id_quotation">
  460. <a :href="UrlManager.getBaseUrl()+'quotation/update?id='+order.id_quotation">
  461. <span class="glyphicon glyphicon-file"></span> Modifier le devis
  462. </a>
  463. </li>
  464. <li v-if="order.id_delivery_note && order.deliveryNote">
  465. <a :href="UrlManager.getBaseUrl()+'delivery-note/update?id='+order.id_delivery_note">
  466. <span class="glyphicon glyphicon-file"></span> Modifier le bon de livraison
  467. </a>
  468. <template v-if="order.deliveryNote.status == 'valid'">
  469. <a v-if="!order.deliveryNote.is_sent" href="javascript:void(0);" :data-id-order="order.id" @click="sendDeliveryNote">
  470. <span class="glyphicon glyphicon-send"></span> Envoyer le bon de livraison
  471. </a>
  472. <a v-else class="text-success disable" href="#">
  473. <span class="glyphicon glyphicon-ok"></span> Bon de livraison envoyé
  474. </a>
  475. </template>
  476. </li>
  477. <li v-if="order.id_invoice">
  478. <a :href="UrlManager.getBaseUrl()+'invoice/update?id='+order.id_invoice">
  479. <span class="glyphicon glyphicon-file"></span> Modifier la facture
  480. </a>
  481. </li>
  482. </ul>
  483. </div>
  484. <div class="wrapper-button-dropdown">
  485. <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  486. <span class="caret"></span>
  487. </button>
  488. <ul class="dropdown-menu">
  489. <li><a href="javascript:void(0);" class="" :data-id-order="order.id" @click="deleteOrderClick"><span class="glyphicon glyphicon-trash"></span> Supprimer</a></li>
  490. <li v-if="order.id_subscription > 0"><a class="" :href="baseUrl+'/subscription/update?id='+order.id_subscription"><span class="glyphicon glyphicon-repeat"></span> Modifier l'abonnement lié</a></li>
  491. <li v-else><a class="add-subscription" :href="baseUrl+'/subscription/create?idOrder='+order.id"><span class="glyphicon glyphicon-plus"></span><span class="glyphicon glyphicon-repeat"></span>Créer un abonnement</a></li>
  492. </ul>
  493. </div>
  494. <order-form
  495. v-if="showModalFormOrderUpdate && idOrderUpdate == order.id"
  496. create="0"
  497. :distribution="distribution"
  498. :date="date"
  499. :date-format="dateFormat"
  500. :points-sale="pointsSale"
  501. :id-active-point-sale="idActivePointSale"
  502. :means-payment="meansPayment"
  503. :users="users"
  504. :products="products"
  505. :order="ordersUpdate[key]"
  506. :orders="ordersUpdate"
  507. :producer="producer"
  508. :loading-update-product-order="loadingUpdateProductOrder"
  509. :units="units"
  510. @close="closeModalOrderForm(false)"
  511. @ordercreatedupdated="orderCreatedUpdated"
  512. @updateproductorderprices="updateProductOrderPrices"
  513. @updateinvoiceprices="updateInvoicePrices"
  514. ></order-form>
  515. <modal v-if="showModalPayment && idOrderPayment == order.id" class="modal-payment" @close="showModalPayment = false">
  516. <h3 slot="header">
  517. Commande du <strong>{{ dateFormat }}</strong> &gt;
  518. <strong><span v-if="order.user">{{ order.user.name +' '+order.user.lastname }}</span>
  519. <span v-else>{{ order.username }}</span></strong>
  520. </h3>
  521. <div slot="body">
  522. <div class="row">
  523. <div class="col-md-6">
  524. <div class="info-box">
  525. <span :class="'info-box-icon ' +((order.isPaid) ? 'bg-green' : 'bg-red')"><i class="fa fa-check"></i></span>
  526. <div class="info-box-content">
  527. <span class="info-box-text">Montant</span>
  528. <span class="info-box-number">
  529. {{ order.amount.toFixed(2)+' €' }}
  530. </span>
  531. </div>
  532. </div>
  533. </div>
  534. <div class="col-md-6" v-if="order.isCreditContext">
  535. <div class="info-box">
  536. <span :class="'info-box-icon ' +((order.user.credit > 0) ? 'bg-green' : 'bg-red')"><i class="fa fa-user"></i></span>
  537. <div class="info-box-content">
  538. <span class="info-box-text">Cagnotte</span>
  539. <span class="info-box-number">
  540. {{ order.user.credit.toFixed(2).replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,")+' €' }}
  541. </span>
  542. </div>
  543. </div>
  544. </div>
  545. </div>
  546. <div class="row">
  547. <div class="col-md-12">
  548. <h4>Historique paiements</h4>
  549. <table class="table table-condensed table-bordered table-hover" v-if="order.paymentsArray && order.paymentsArray.length > 0">
  550. <thead>
  551. <tr>
  552. <td>Date</td>
  553. <td>Origine action</td>
  554. <td>Type</td>
  555. <td>Moyen</td>
  556. <td>Montant</td>
  557. </tr>
  558. </thead>
  559. <tbody>
  560. <tr v-for="payment in order.paymentsArray">
  561. <td>{{ payment.date }}</td>
  562. <td>{{ payment.user_action }}</td>
  563. <td>{{ payment.wording_type }}</td>
  564. <td>{{ payment.wording_mean_payment }}</td>
  565. <td v-html="payment.amount"></td>
  566. </tr>
  567. </tbody>
  568. </table>
  569. <div class="alert alert-info" v-else>
  570. Aucun paiement rattaché à commande.
  571. </div>
  572. <div class="alert alert-success" v-if="order.isPaidViaInvoice">
  573. La commande est payée via la <a :href="UrlManager.getBaseUrl()+'invoice/update?id='+order.id_invoice">facture</a> à laquelle elle est rattachée.
  574. </div>
  575. </div>
  576. </div>
  577. </div>
  578. </modal>
  579. </td>
  580. <td v-if="producer && producer.tiller" class="tiller column-tiller">
  581. <input v-if="order.tiller_synchronization == true" type="checkbox" checked="checked" :id="'checkbox-tiller-synchronization-'+order.id" :data-id-order="order.id" @change="changeSynchroTiller" />
  582. <input v-else type="checkbox" :id="'checkbox-tiller-synchronization-'+order.id" :data-id-order="order.id" @change="changeSynchroTiller" />
  583. <label :for="'checkbox-tiller-synchronization-'+order.id">Tiller</label>
  584. </td>
  585. </tr>
  586. <tr class="view" v-if="showViewProduct && idOrderView == order.id">
  587. <td colspan="6">
  588. <strong><span class="glyphicon glyphicon-menu-right"></span> Produits</strong>
  589. <ul>
  590. <li v-for="product in products" v-if="getProductDistribution(product) && order.productOrder[product.id].quantity > 0">
  591. {{ product.name }} : {{ order.productOrder[product.id].quantity }} {{ order.productOrder[product.id].unit == 'piece' ? ' pièce(s)' : ' '+order.productOrder[product.id].unit }} <span v-if="getProductDistribution(product).active == 0" class="glyphicon glyphicon-warning-sign" title="Ce produit n'est pas activé"></span>
  592. </li>
  593. </ul>
  594. <div v-if="order.comment && order.comment.length > 0" class="comment">
  595. <strong><span class="glyphicon glyphicon-menu-right"></span> Commentaire</strong><br />
  596. {{ order.comment }}
  597. </div>
  598. <div v-if="order.delivery_home && order.delivery_address && order.delivery_address.length > 0" class="delivery">
  599. <strong><span class="glyphicon glyphicon-menu-right"></span> Livraison à domicile</strong><br />
  600. {{ order.delivery_address }}
  601. </div>
  602. </td>
  603. </tr>
  604. </template>
  605. </tbody>
  606. </table>
  607. <div class="alert alert-warning" v-else>
  608. Aucune commande
  609. </div>
  610. </div>
  611. </div>
  612. </div>
  613. </div>
  614. <script type="text/x-template" id="order-state-payment">
  615. <span v-html="order.paymentLabelShort"></span>
  616. </script>
  617. <!-- template for the order-form component -->
  618. <script type="text/x-template" id="order-form-template">
  619. <modal class="modal-form-order" @close="$emit('close')">
  620. <h3 v-if="order.id" slot="header">
  621. <template v-if="order.id">Modifier</template>
  622. <template v-else>Ajouter</template>
  623. une commande - {{ dateFormat }}
  624. </h3>
  625. <div slot="body">
  626. <div class="callout callout-warning" v-if="errors.length">
  627. <ul>
  628. <li v-for="error in errors">{{ error }}</li>
  629. </ul>
  630. </div>
  631. <div class="col-md-4">
  632. <div class="form-group">
  633. <a v-if="producer && producer.credit && order.id_user > 0 && user.id_user == order.id_user" class="btn btn-xs btn-primary btn-credit" :href="baseUrl+'/user/credit?id='+user.id_user" v-for="user in users">{{ parseFloat(user.credit).toFixed(2).replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,")+'&nbsp;€' }}</a>
  634. <label class="control-label" for="select-id-user">
  635. Utilisateur
  636. <a v-if="!order.id_user || order.id_user == 0" class="btn btn-default btn-xs" href="<?= Yii::$app->urlManager->createUrl('user/create'); ?>">
  637. <span class="glyphicon glyphicon-plus"></span>
  638. Créer un utilisateur
  639. </a>
  640. </label>
  641. <select class="form-control select2-order-form" v-model="order.id_user" @change="userChange">
  642. <option value="0">--</option>
  643. <option v-for="user in users" :value="user.id_user">
  644. <template v-if="user.type == 'legal-person' && user.name_legal_person && user.name_legal_person.length">
  645. {{ user.name_legal_person }} (personne morale)
  646. </template>
  647. <template v-else>
  648. {{ user.lastname +' '+ user.name }}
  649. </template>
  650. </option>
  651. </select>
  652. <input v-model="order.username" type="text" class="form-control" placeholder="Ou saisissez ici le nom de l'utilisateur" />
  653. </div>
  654. <div class="form-group">
  655. <label class="control-label" for="select-id-point-sale">Point de vente</label>
  656. <select class="form-control" id="select-id-point-sale" v-model="order.id_point_sale" @change="pointSaleChange">
  657. <option value="0">--</option>
  658. <option v-for="pointSale in pointsSale" v-if="pointSale.pointSaleDistribution[0].delivery == 1" :value="pointSale.id"">{{ pointSale.name }}</option>
  659. </select>
  660. </div>
  661. <div class="form-group">
  662. <label class="control-label" for="textarea-comment">Commentaire</label>
  663. <textarea class="form-control" id="textarea-comment" v-model="order.comment"></textarea>
  664. </div>
  665. <div class="form-group" v-if="isPointSaleCreditFunctioningOptional(order.id_point_sale)">
  666. <input type="checkbox" id="debit-credit" v-model="order.debitCredit" />
  667. <label class="control-label" for="debit-credit">Débiter la cagnotte</label>
  668. </div>
  669. </div>
  670. <div class="col-md-8">
  671. <label class="control-label">Produits</label>
  672. <table class="table table-condensed table-bordered table-hover table-products">
  673. <thead>
  674. <tr>
  675. <th></th>
  676. <th>Nom</th>
  677. <th>Prix unitaire</th>
  678. <th>Quantité</th>
  679. <th>Reste</th>
  680. </tr>
  681. </thead>
  682. <tbody>
  683. <tr v-for="product in products" v-if="product.status >= 0 || order.productOrder[product.id].quantity > 0" :class="(order.productOrder[product.id].quantity > 0) ? 'product-ordered' : ''">
  684. <td>
  685. <span class="label label-success" v-if="loadingUpdateProductOrder || order.productOrder[product.id].active">Actif</span>
  686. <span class="label label-danger" v-else>Inactif</span>
  687. </td>
  688. <td>
  689. {{ product.name }}
  690. </td>
  691. <td class="price">
  692. <div v-show="vatMode == 'all'" class="input-group">
  693. <input type="text" v-model="order.productOrder[product.id].price" class="form-control input-sm" @change="productPriceChange" :data-with-tax="false" :data-id-product="product.id" />
  694. <span class="input-group-addon" id="basic-addon2">€ HT&nbsp;&nbsp;</span>
  695. </div>
  696. <div class="input-group">
  697. <input type="text" v-model="order.productOrder[product.id].price_with_tax" class="form-control input-sm" @change="productPriceChange" :data-with-tax="true" :data-id-product="product.id" />
  698. <span class="input-group-addon" id="basic-addon2">€ TTC</span>
  699. </div>
  700. <div class="invoice-price" v-show="vatMode == 'all'" v-if="(order.id_invoice || order.id_delivery_note || order.id_quotation) && order.productOrder[product.id].quantity > 0">
  701. <span class="label-invoice-price">Prix facturé</span><br />
  702. <div class="input-group">
  703. <input v-if="order.isLinkedToValidInvoice" type="text" v-model="order.productOrder[product.id].invoice_price" class="form-control input-sm" :data-id-product="product.id" disabled="disabled" title="La commande est liée à une facture validée, le prix facturé n'est donc plus modifiable" />
  704. <input v-else type="text" v-model="order.productOrder[product.id].invoice_price" class="form-control input-sm" :data-id-product="product.id" />
  705. <span class="input-group-addon" id="basic-addon2">€ HT</span>
  706. </div>
  707. </div>
  708. </td>
  709. <td class="quantity">
  710. <div class="input-group">
  711. <span class="input-group-btn">
  712. <button class="btn btn-default btn-moins" type="button" @click="productQuantityClick(product.id, order.productOrder[product.id].unit == 'piece' ? -1 : -parseFloat(product.step))"><span class="glyphicon glyphicon-minus"></span></button>
  713. </span>
  714. <input type="text" v-model="order.productOrder[product.id].quantity" class="form-control input-quantity" />
  715. <span class="input-group-addon">{{ order.productOrder[product.id].unit == 'piece' ? 'p.' : order.productOrder[product.id].unit }}</span>
  716. <span class="input-group-btn">
  717. <button class="btn btn-default btn-plus" type="button" @click="productQuantityClick(product.id, order.productOrder[product.id].unit == 'piece' ? 1 : parseFloat(product.step))"><span class="glyphicon glyphicon-plus"></span></button>
  718. </span>
  719. </div>
  720. </td>
  721. <td class="quantity-remaining infinite" v-if="product.quantity_remaining === null || order.productOrder[product.id].unit != product.unit">&infin;</td>
  722. <td class="quantity-remaining negative" v-else-if="getProductQuantityRemaining(product) <= 0">
  723. {{ getProductQuantityRemaining(product) }} {{ order.productOrder[product.id].unit == 'piece' ? ' p.' : ' '+(order.productOrder[product.id].unit == 'g' || order.productOrder[product.id].unit == 'kg') ? 'kg' : 'litre(s)' }}
  724. <span class="glyphicon glyphicon-alert" v-if="getProductQuantityRemaining(product) < 0"></span>
  725. </td>
  726. <td class="quantity-remaining has-quantity" v-else>{{ getProductQuantityRemaining(product) }} {{ order.productOrder[product.id].unit == 'piece' ? ' p.' : ' '+(order.productOrder[product.id].unit == 'g' || order.productOrder[product.id].unit == 'kg') ? 'kg' : 'litre(s)' }}</td>
  727. </tr>
  728. </tbody>
  729. </table>
  730. </div>
  731. </div>
  732. <div slot="footer">
  733. <div class="actions-form">
  734. <button class="modal-default-button btn btn-danger" @click="$emit('close')">Fermer</button>
  735. <button class="modal-default-button btn btn-primary" @click="submitFormUpdate" v-if="order.id">Modifier</button>
  736. <button class="modal-default-button btn btn-primary" @click="submitFormCreate" v-if="!order.id">Créer</button>
  737. <div class="right">
  738. <button class="modal-default-button btn btn-info btn-update-prices" @click="updateProductOrderPrices(true)">Recharger les prix</button>
  739. <button v-if="order.id" class="modal-default-button btn btn-info btn-update-prices" @click="updateInvoicePrices(true)">
  740. Réinitialiser les prix facturés
  741. </button>
  742. <button class="modal-default-button btn btn-info btn-display-prices-without-tax" @click="toggleVatMode()">
  743. <template v-if="vatMode == 'all'">Cacher</template>
  744. <template v-else>Afficher</template>
  745. les prix HT
  746. </button>
  747. </div>
  748. </div>
  749. </div>
  750. </modal>
  751. </script>
  752. <!-- template for the modal component -->
  753. <script type="text/x-template" id="modal-template">
  754. <transition name="modal">
  755. <div class="modal-mask">
  756. <div class="modal-wrapper">
  757. <div class="modal-container">
  758. <div class="modal-header">
  759. <slot name="header"></slot>
  760. </div>
  761. <div class="modal-body">
  762. <slot name="body"></slot>
  763. </div>
  764. <div class="modal-footer">
  765. <slot name="footer">
  766. <button class="modal-default-button btn btn-default" @click="$emit('close')">Fermer</button>
  767. </slot>
  768. </div>
  769. </div>
  770. </div>
  771. </div>
  772. </transition>
  773. </script>