StdDialog.vue 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. <template>
  2. <q-dialog ref="dialog" v-model="active" @show="onShow" @hide="onHide">
  3. <slot></slot>
  4. <!--------------------------------------------------->
  5. <div v-show="type == 'alert'" class="column bg-white">
  6. <div class="header row">
  7. <div class="caption col row items-center q-ml-md">
  8. <q-icon v-show="caption" class="text-warning q-mr-sm" name="las la-exclamation-circle" size="28px"></q-icon>
  9. <div v-html="caption"></div>
  10. </div>
  11. <div class="close-icon column justify-center items-center">
  12. <q-btn flat round dense v-close-popup>
  13. <q-icon name="la la-times" size="18px"></q-icon>
  14. </q-btn>
  15. </div>
  16. </div>
  17. <div class="col q-mx-md">
  18. <div v-html="message"></div>
  19. </div>
  20. <div class="buttons row justify-end q-pa-md">
  21. <q-btn class="q-px-md" dense no-caps @click="okClick">OK</q-btn>
  22. </div>
  23. </div>
  24. <!--------------------------------------------------->
  25. <div v-show="type == 'confirm'" class="column bg-white">
  26. <div class="header row">
  27. <div class="caption col row items-center q-ml-md">
  28. <q-icon v-show="caption" class="text-warning q-mr-sm" name="las la-exclamation-circle" size="28px"></q-icon>
  29. <div v-html="caption"></div>
  30. </div>
  31. <div class="close-icon column justify-center items-center">
  32. <q-btn flat round dense v-close-popup>
  33. <q-icon name="la la-times" size="18px"></q-icon>
  34. </q-btn>
  35. </div>
  36. </div>
  37. <div class="col q-mx-md">
  38. <div v-html="message"></div>
  39. </div>
  40. <div class="buttons row justify-end q-pa-md">
  41. <q-btn class="q-px-md q-ml-sm" dense no-caps v-close-popup>Отмена</q-btn>
  42. <q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="okClick">OK</q-btn>
  43. </div>
  44. </div>
  45. <!--------------------------------------------------->
  46. <div v-show="type == 'prompt'" class="column bg-white">
  47. <div class="header row">
  48. <div class="caption col row items-center q-ml-md">
  49. <q-icon v-show="caption" class="text-warning q-mr-sm" name="las la-exclamation-circle" size="28px"></q-icon>
  50. <div v-html="caption"></div>
  51. </div>
  52. <div class="close-icon column justify-center items-center">
  53. <q-btn flat round dense v-close-popup>
  54. <q-icon name="la la-times" size="18px"></q-icon>
  55. </q-btn>
  56. </div>
  57. </div>
  58. <div class="col q-mx-md">
  59. <div v-html="message"></div>
  60. <q-input ref="input" class="q-mt-xs" outlined dense v-model="inputValue"/>
  61. <div class="error"><span v-show="error != ''">{{ error }}</span></div>
  62. </div>
  63. <div class="buttons row justify-end q-pa-md">
  64. <q-btn class="q-px-md q-ml-sm" dense no-caps v-close-popup>Отмена</q-btn>
  65. <q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="okClick">OK</q-btn>
  66. </div>
  67. </div>
  68. </q-dialog>
  69. </template>
  70. <script>
  71. //-----------------------------------------------------------------------------
  72. import Vue from 'vue';
  73. import Component from 'vue-class-component';
  74. //import * as utils from '../../share/utils';
  75. export default @Component({
  76. watch: {
  77. inputValue: function(newValue) {
  78. this.validate(newValue);
  79. },
  80. }
  81. })
  82. class StdDialog extends Vue {
  83. caption = '';
  84. message = '';
  85. active = false;
  86. type = '';
  87. inputValue = '';
  88. error = '';
  89. created() {
  90. if (this.$root.addKeyHook) {
  91. this.$root.addKeyHook(this.keyHook);
  92. }
  93. }
  94. init(message, caption) {
  95. this.caption = caption;
  96. this.message = message;
  97. this.ok = false;
  98. this.type = '';
  99. this.inputValidator = null;
  100. this.inputValue = '';
  101. this.error = '';
  102. }
  103. onHide() {
  104. if (this.hideTrigger) {
  105. this.hideTrigger();
  106. this.hideTrigger = null;
  107. }
  108. }
  109. onShow() {
  110. if (this.type == 'prompt') {
  111. this.enableValidator = true;
  112. if (this.inputValue)
  113. this.validate(this.inputValue);
  114. this.$refs.input.focus();
  115. }
  116. }
  117. validate(value) {
  118. if (!this.enableValidator)
  119. return false;
  120. if (this.inputValidator) {
  121. const result = this.inputValidator(value);
  122. if (result !== true) {
  123. this.error = result;
  124. return false;
  125. }
  126. }
  127. this.error = '';
  128. return true;
  129. }
  130. okClick() {
  131. if (this.type == 'prompt' && !this.validate(this.inputValue)) {
  132. this.$refs.dialog.shake();
  133. return;
  134. }
  135. this.ok = true;
  136. this.$refs.dialog.hide();
  137. }
  138. alert(message, caption) {
  139. return new Promise((resolve) => {
  140. this.init(message, caption);
  141. this.hideTrigger = () => {
  142. if (this.ok) {
  143. resolve(true);
  144. } else {
  145. resolve(false);
  146. }
  147. };
  148. this.type = 'alert';
  149. this.active = true;
  150. });
  151. }
  152. confirm(message, caption) {
  153. return new Promise((resolve) => {
  154. this.init(message, caption);
  155. this.hideTrigger = () => {
  156. if (this.ok) {
  157. resolve(true);
  158. } else {
  159. resolve(false);
  160. }
  161. };
  162. this.type = 'confirm';
  163. this.active = true;
  164. });
  165. }
  166. prompt(message, caption, opts) {
  167. return new Promise((resolve) => {
  168. this.enableValidator = false;
  169. this.init(message, caption);
  170. this.hideTrigger = () => {
  171. if (this.ok) {
  172. resolve({value: this.inputValue});
  173. } else {
  174. resolve(false);
  175. }
  176. };
  177. this.type = 'prompt';
  178. if (opts) {
  179. this.inputValidator = opts.inputValidator || null;
  180. this.inputValue = opts.inputValue || '';
  181. }
  182. this.active = true;
  183. });
  184. }
  185. keyHook(event) {
  186. if (this.active && event.code == 'Enter') {
  187. this.okClick();
  188. event.stopPropagation();
  189. event.preventDefault();
  190. }
  191. }
  192. }
  193. //-----------------------------------------------------------------------------
  194. </script>
  195. <style scoped>
  196. .header {
  197. height: 50px;
  198. }
  199. .caption {
  200. font-size: 110%;
  201. overflow: hidden;
  202. }
  203. .close-icon {
  204. width: 50px;
  205. }
  206. .buttons {
  207. height: 60px;
  208. }
  209. .error {
  210. height: 20px;
  211. font-size: 80%;
  212. color: red;
  213. }
  214. </style>